@rio-cloud/uikit-mcp 1.1.1 → 1.1.3

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 LTM5U13MCY\n\nItem 22I53GR1TM\n\nItem NFPHWUDEPD\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 QJXBPX4FY1\n\nItem L56N5K97ZOG\n\nItem Y280KNO84\n\nItem JE4VGX02E\n\nItem 6TU5EMVX6MF\n\nItem 451IDXN9WP",
+    "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 YUWCXY4QCL\n\nItem 18Z0QVGEMQ\n\nItem KQ9QJ25F3B\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 4NYRNZDOEAJ\n\nItem 9XGVIHIZDRK\n\nItem ZP0PGXK14B\n\nItem N4PC0EB2RM\n\nItem KO6IY6WXTC\n\nItem KC0LC7DH2MH",
     "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 | React.ref | — | 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| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner 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| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\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 | React.ref | — | 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| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner 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| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\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 | React.ref | — | 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| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner 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| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\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 | React.ref | — | 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| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner 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| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\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 | React.ref | — | 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| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner 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| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n5\n2\n1\n\nAsset Group3\nVehicle-2115Asset 1005\nVehicle-2747Asset 1001\nVehicle-5156Asset 1000\n\nUngrouped5\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 | React.ref | — | 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| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner 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| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |",
+    "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 | React.ref | — | 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| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner 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| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\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 | React.ref | — | 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| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner 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| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\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 | React.ref | — | 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| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner 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| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\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 | React.ref | — | 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| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner 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| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\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 | React.ref | — | 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| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner 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| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n4\n7\n4\n4\n\nAsset Group9\nVehicle-1869Asset 1015\nVehicle-3532Asset 1007\nVehicle-3812Asset 1000\nVehicle-5185Asset 1016\nVehicle-6538Asset 1017\nVehicle-7129Asset 1008\nVehicle-7924Asset 1010\nVehicle-8111Asset 1012\nVehicle-9372Asset 1014\n\nUngrouped10\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 | React.ref | — | 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| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner 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| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |",
     "category": "Components",
     "section": "Application",
     "boost": "ApplicationLayout components/appLayout #components/appLayout Components Application"
@@ -104,7 +104,7 @@
     "title": "AssetTree",
     "lead": "The asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.",
     "summary": "The asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.",
-    "searchText": "AssetTree\nThe asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.\nAssetTree\nFilter\n\n5920\n4\n\nGroup - Ada Carroll - 364111\n\nGroup - Adrienne Hartmann - 323112\n\nGroup - Adrienne Ritchie - 744514\n\nGroup - Agnes Boyer - 871212\n\nGroup - Alan Bauch - 196214\n\nGroup - Albert Hudson - 836021\n\nGroup - Alejandro Considine - 895713\n\nGroup - Alexander McGlynn - 779416\n\nGroup - Alison Olson - 595512\n\nGroup - Allen Jakubowski - 804915\n\nGroup - Allen Waters - 354312\n\nGroup - Alonzo Brekke - 57275\n\nGroup - Alonzo Morar - 447115\n\nGroup - Alton Lindgren - 417810\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| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / 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 | Function | () ={} | 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 | Function | () ={} | Callback for handling change of category. |\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| children | TreeCategory | — | A list of TreeCategory components |\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 / Node | — | 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 | Array of objects | [] | 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 | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | 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 \\| Node | — | The subline of an 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| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\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. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | 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 | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\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| summary | node | — | 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| 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 | ReactNode | — | 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 | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\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 | Function | () ={} | 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 | object | — | 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| └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 | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | 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 | Function | — | 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 and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with single select\n10\n9\n8\n3\n\nMy Empty Group5\n\nTruck Group East8\n\nTruck Group North4\nN18-G546 / M-AN 1006\nN18-G661 / M-AN 1028\nN18-G787 / M-AN 1004\nN18-G911 / M-AN 1029\n\nTruck Group South6\n\nTruck Group West4\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| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / 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 | Function | () ={} | 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 | Function | () ={} | Callback for handling change of category. |\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| children | TreeCategory | — | A list of TreeCategory components |\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 / Node | — | 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 | Array of objects | [] | 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 | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | 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 \\| Node | — | The subline of an 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| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\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. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | 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 | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\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| summary | node | — | 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| 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 | ReactNode | — | 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 | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\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 | Function | () ={} | 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 | object | — | 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| └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 | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | 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 | Function | — | 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 and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with multiple asset filter in summary\nWhen using fuel filter, please check out the fuel type utils that ease the implementation of mapping vehicle fuel types to common fuel type groups.\n5\n2\n8\n5\n\n15\n2\n1\n1\n1\n\nMixed Vehicles9\nVehicle-1564Debug: hydrogen\nVehicle-2359Debug: lpg\nVehicle-2411Debug: heavy_fuel_oil\nVehicle-3355Debug: gas\nVehicle-6981Debug: electric\nVehicle-7289Debug: gas\nVehicle-8098Debug: heavy_fuel_oil\nVehicle-8298Debug: heavy_fuel_oil\nVehicle-9591Debug: lpg\n\nUngrouped11\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| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / 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 | Function | () ={} | 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 | Function | () ={} | Callback for handling change of category. |\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| children | TreeCategory | — | A list of TreeCategory components |\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 / Node | — | 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 | Array of objects | [] | 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 | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | 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 \\| Node | — | The subline of an 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| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\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. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | 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 | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\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| summary | node | — | 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| 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 | ReactNode | — | 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 | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\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 | Function | () ={} | 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 | object | — | 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| └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 | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | 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 | Function | — | 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 and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\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| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / 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 | Function | () ={} | 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 | Function | () ={} | Callback for handling change of category. |\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| children | TreeCategory | — | A list of TreeCategory components |\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 / Node | — | 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 | Array of objects | [] | 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 | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | 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 \\| Node | — | The subline of an 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| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\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. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | 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 | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\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| summary | node | — | 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| 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 | ReactNode | — | 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 | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\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 | Function | () ={} | 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 | object | — | 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| └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 | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | 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 | Function | — | 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 and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree\nTree with header and search\n\n20\n\nFolder 015\n\nFolder 025\n\nFolder 035\n\nFolder 045\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | 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 | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | 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 \\| Node | — | The subline of an 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| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\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. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | 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 | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\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| summary | node | — | 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| 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 | ReactNode | — | 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 | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\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 014\n\nFolder 024\n\nFolder 037\n\nFolder 045\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | 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 | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | 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 \\| Node | — | The subline of an 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| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\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. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | 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 | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\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| summary | node | — | 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| 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 | ReactNode | — | 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 | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\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 | object | — | 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| └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 | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | 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 | Function | — | 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 and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | 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 | object | — | 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| └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 | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | 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 | Function | — | 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 and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |",
+    "searchText": "AssetTree\nThe asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.\nAssetTree\nFilter\n\n5384\n4\n\nGroup - Abraham Watsica - 621113\n\nGroup - Adam Windler - 770317\n\nGroup - Alexandra Collins - 999013\n\nGroup - Alfred Olson - 956712\n\nGroup - Alfred Stokes - 89338\n\nGroup - Alice Green - 890610\n\nGroup - Allison Padberg III - 27086\n\nGroup - Alma Sanford - 66055\n\nGroup - Alvin Wolf Sr. - 47075\n\nGroup - Amanda Kunde - 348613\n\nGroup - Amelia Zemlak - 819710\n\nGroup - Amos Welch - 13858\n\nGroup - Ana Greenfelder - 97437\n\nGroup - Andrea Mueller - 75687\n\nGroup - Andrew Howell Sr. - 815511\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| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / 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 | Function | () ={} | 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 | Function | () ={} | Callback for handling change of category. |\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| children | TreeCategory | — | A list of TreeCategory components |\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 / Node | — | 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 | Array of objects | [] | 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 | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | 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 \\| Node | — | The subline of an 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| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\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. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | 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 | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\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| summary | node | — | 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| 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 | ReactNode | — | 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 | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\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 | Function | () ={} | 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 | object | — | 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| └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 | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | 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 | Function | — | 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 and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with single select\n10\n5\n9\n6\n\nMy Empty Group5\n\nTruck Group East5\n\nTruck Group North7\nN18-G109 / M-AN 1018\nN18-G176 / M-AN 1026\nN18-G560 / M-AN 1006\nN18-G704 / M-AN 1007\nN18-G811 / M-AN 1005\nN18-G830 / M-AN 1010\nN18-G961 / M-AN 1009\n\nTruck Group South7\n\nTruck Group West3\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| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / 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 | Function | () ={} | 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 | Function | () ={} | Callback for handling change of category. |\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| children | TreeCategory | — | A list of TreeCategory components |\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 / Node | — | 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 | Array of objects | [] | 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 | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | 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 \\| Node | — | The subline of an 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| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\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. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | 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 | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\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| summary | node | — | 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| 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 | ReactNode | — | 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 | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\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 | Function | () ={} | 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 | object | — | 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| └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 | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | 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 | Function | — | 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 and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with multiple asset filter in summary\nWhen using fuel filter, please check out the fuel type utils that ease the implementation of mapping vehicle fuel types to common fuel type groups.\n7\n4\n3\n6\n\n7\n5\n1\n4\n3\n\nMixed Vehicles12\nVehicle-1219Debug: lpg\nVehicle-1695Debug: heavy_fuel_oil\nVehicle-2865Debug: gas\nVehicle-2935Debug: hydrogen\nVehicle-4548Debug: lpg\nVehicle-4993Debug: hydrogen\nVehicle-5555Debug: heavy_fuel_oil\nVehicle-7086Debug: diesel\nVehicle-8678Debug: dual_fuel_diesel_cng\nVehicle-8791Debug: hydrogen\nVehicle-9194Debug: lpg\nVehicle-9266Debug: hydrogen\n\nUngrouped8\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| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / 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 | Function | () ={} | 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 | Function | () ={} | Callback for handling change of category. |\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| children | TreeCategory | — | A list of TreeCategory components |\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 / Node | — | 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 | Array of objects | [] | 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 | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | 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 \\| Node | — | The subline of an 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| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\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. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | 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 | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\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| summary | node | — | 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| 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 | ReactNode | — | 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 | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\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 | Function | () ={} | 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 | object | — | 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| └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 | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | 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 | Function | — | 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 and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\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| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / 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 | Function | () ={} | 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 | Function | () ={} | Callback for handling change of category. |\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| children | TreeCategory | — | A list of TreeCategory components |\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 / Node | — | 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 | Array of objects | [] | 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 | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | 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 \\| Node | — | The subline of an 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| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\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. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | 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 | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\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| summary | node | — | 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| 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 | ReactNode | — | 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 | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\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 | Function | () ={} | 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 | object | — | 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| └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 | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | 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 | Function | — | 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 and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree\nTree with header and search\n\n20\n\nFolder 015\n\nFolder 024\n\nFolder 034\n\nFolder 047\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | 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 | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | 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 \\| Node | — | The subline of an 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| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\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. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | 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 | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\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| summary | node | — | 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| 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 | ReactNode | — | 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 | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\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 024\n\nFolder 036\n\nFolder 043\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | 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 | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | 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 \\| Node | — | The subline of an 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| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\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. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | 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 | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\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| summary | node | — | 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| 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 | ReactNode | — | 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 | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\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 | object | — | 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| └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 | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | 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 | Function | — | 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 and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | 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 | object | — | 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| └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 | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | 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 | Function | — | 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 and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |",
     "category": "Components",
     "section": "Selection",
     "boost": "AssetTree components/assetTree #components/assetTree Components Selection"
@@ -144,7 +144,7 @@
     "title": "BarChart",
     "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": "BarChart\nBarChart\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.\nSimple horizontal BarChart\n\nJanuaryFebruaryMarchAprilMayJune\n### BarChart\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 \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\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 | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\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 |\nHorizontal BarChart\n\nJanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €Costs\n### BarChart\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 \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\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 | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\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 |\nMultiple Bars BarChart\n\npv\nuv\n\nPage APage BPage CPage DPage EPage FPage G025005000750010000\n### BarChart\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 \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\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 | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\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 |\nStacked BarChart\n\npv\nuv\n\nPage APage BPage CPage DPage EPage FPage G030006000900012000\n### BarChart\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 \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\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 | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\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 |\nVertical BarChart\n\nBasistarif\nDiesel\nMaut\nZuschläge\n\nBasistarifDieselMautZuschläge01530456046.8€22€12.4€3.88€\n### BarChart\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 \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\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 | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\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 |\nBarChart with custom Tooltips\npv\nuv\n\nTruck ATruck BTruck CTruck DTruck ETruck FTruck G030006000900012000\n### BarChart\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 \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\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 | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\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 |\nMultiple axis BarChart\n\nJanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €CostsQ1Q1Q1Q2Q2Q2\n### BarChart\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 \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\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 | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\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": "BarChart\nBarChart\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.\nSimple horizontal BarChart\n\nJanuaryFebruaryMarchAprilMayJune\n### BarChart\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 \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\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 | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\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 |\nHorizontal BarChart\n\nJanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €Costs\n### BarChart\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 \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\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 | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\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 |\nMultiple Bars BarChart\n\npv\nuv\n\nPage APage BPage CPage DPage EPage FPage G025005000750010000\n### BarChart\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 \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\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 | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\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 |\nStacked BarChart\n\npv\nuv\n\nPage APage BPage CPage DPage EPage FPage G030006000900012000\n### BarChart\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 \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\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 | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\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 |\nVertical BarChart\n\nBasistarif\nDiesel\nMaut\nZuschläge\n\n015304560BasistarifDieselMautZuschläge\n### BarChart\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 \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\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 | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\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 |\nBarChart with custom Tooltips\npv\nuv\n\nTruck ATruck BTruck CTruck DTruck ETruck FTruck G030006000900012000\n### BarChart\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 \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\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 | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\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 |\nMultiple axis BarChart\n\nJanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €CostsQ1Q1Q1Q2Q2Q2\n### BarChart\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 \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\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 | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\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": "BarChart components/barCharts #components/barCharts Components Charts"
@@ -164,7 +164,7 @@
     "title": "Map",
     "lead": "The following map shows labels for locale de",
     "summary": "The following map shows labels for locale de",
-    "searchText": "Map\nThe following map shows labels for locale de\nMap\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nMap with ScaleBar\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nMap localization\nTerms of use© 1987–2025 HERE\n\n10 km\n\nAnsicht auswählen\nKartenansicht\nSatellit\n\nVerkehrslage\nVerkehrsstörungen anzeigen",
+    "searchText": "Map\nThe following map shows labels for locale de\nMap\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nMap with ScaleBar\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nMap localization\nTerms of use© 1987–2026 HERE\n\n10 km\n\nAnsicht auswählen\nKartenansicht\nSatellit\n\nVerkehrslage\nVerkehrsstörungen anzeigen",
     "category": "Components",
     "section": "Map",
     "boost": "Map components/basicMap #components/basicMap Components Map"
@@ -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\nSaturday\n13 December 2025\n\nSunday\n14 December 2025\n\nMonday\n15 December 2025\n\nTuesday\n16 December 2025\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| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |\nDec\n13\n2025\n\nDec\n14\n2025\n\nDec\n15\n2025\n\nDec\n16\n2025\n\nDec\n17\n2025\n\nDec\n18\n2025\n\nDec\n19\n2025\n\nDec\n20\n2025\n\nDec\n21\n2025\n\nDec\n22\n2025\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| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |",
+    "searchText": "CalendarStripe\nA headless component where you provide a function that renders the UI for every day to be displayed.\nCalendarStripe\nThursday\n8 January 2026\n\nFriday\n9 January 2026\n\nSaturday\n10 January 2026\n\nSunday\n11 January 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| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |\nJan\n8\n2026\n\nJan\n9\n2026\n\nJan\n10\n2026\n\nJan\n11\n2026\n\nJan\n12\n2026\n\nJan\n13\n2026\n\nJan\n14\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| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |",
     "category": "Components",
     "section": "Misc",
     "boost": "CalendarStripe components/calendarStripe #components/calendarStripe Components Misc"
@@ -324,7 +324,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‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00\n\nNo timeFormat: YYYY-MM-DD\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\nOnly month\n\n‹2025›\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‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nWith min-width\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nClearableInput and optional value\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n03:20\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nTo:\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nUnspecified localeFormat: MM/DD/YYYY\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nReset\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\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‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00\n\nNo timeFormat: YYYY-MM-DD\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\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‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nWith min-width\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nClearableInput and optional value\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n01:11\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nTo:\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nUnspecified localeFormat: MM/DD/YYYY\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nReset\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\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 +354,7 @@
     "title": "Dropdowns",
     "lead": "Wrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.",
     "summary": "Wrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.",
-    "searchText": "Dropdowns\nWrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.\nDropdowns\nButtonDropdown\nSimpleButtonDropdown\n\nSingleButtonDropdown\n\nWrapper component for ButtonDropdown, kept for backwards compatibility.\n\nSplitButtonDropdown\n\nWrapper component for ButtonDropdown where prop \"splitButton\" is set automatically.\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 / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\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 | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\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| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nSingleButtonDropdown\nSplitButton\n\nSplitButton ButtonDropdown\nDropdownSubmenu\nNormal ButtonDropdown\nnoCaret ButtonDropdown\nSplitButton ButtonDropdown\n\nNormal ButtonDropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | String / Node | \"\" | Displayed button title. |\n| items | Array of Objects | [] | Details see above for the ButtonDropdown |\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 / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\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 | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\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| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\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 / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\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 | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\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| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nLarge amount of dropdowns in a list or table\nIDContentAction\n\n1Nunc eget lorem neque. semper. rutrum scelerisque ac finibus\n\n2Orci ante Vivamus vel ligula quis, fames sem. volutpat\n\n3Sagittis ac ac eget velit. sem. Ut fames orci, quis, ac\n\n4In, ac eget hendrerit nunc felis. aliquam semper ligula in ac purus ipsum\n\n5Ut lorem faucibus. sem. primis ante tincidunt.\n\n6Et efficitur lorem pretium semper. in,\n\n7Vel ac in elit. ante iaculis. enim hendrerit malesuada vel massa,\nLorem\n\n8Ac posuere primis fringilla posuere Fusce ac felis. molestie efficitur\nLorem volutpat fames purus fringilla\n\n9Ac In primis nunc et ante orci orci ut volutpat consectetur\n\n10Nec sem. bibendum, lorem primis pretium dolor consectetur vel vitae purus orci\n\n11Ac ut fames Mauris neque. faucibus. faucibus. nec consectetur eget ac quis, amet,\n\n12Pharetra in Ut quis, Mauris massa ante iaculis. semper\n\n13Tortor ante Mauris est metus\n\n14Elit. molestie semper Ut dolor ac et\n\n15Ipsum Duis tincidunt. et ipsum ac et ante ut amet, posuere sem. velit. eget\n\n16Ac massa orci, et ut consectetur ligula adipiscing\n\n17Volutpat libero ipsum dui dui Integer\n\n18Posuere orci Interdum posuere adipiscing fringilla molestie ac nec nec consectetur scelerisque libero\n\n19Felis. in eget iaculis. et sem. sem. et\n\n20Semper. efficitur ante In fames eget\nLorem rutrum in ac fames bibendum, primis quis, ipsum\n\n21Dolor in condimentum velit.\nLorem ipsum primis\n\n22Nec tincidunt. ante tortor condimentum sem. malesuada viverra eget\n\n23Efficitur hendrerit adipiscing nec pharetra\n\n24Ac ante eget nunc ac scelerisque nec ipsum viverra amet, scelerisque ipsum\n\n25Sagittis hendrerit Mauris Vivamus efficitur sem. ac dui ac\n\n26Ac efficitur consectetur metus vel elit.\n\n27Adipiscing vitae et fringilla neque. ante dolor ligula tincidunt. efficitur in purus ipsum\n\n28Massa felis. posuere posuere ante ac adipiscing amet,\n\n29Duis consectetur Mauris ac nec massa, in neque. sem.\nLorem semper. ut\n\n30Semper bibendum, Fusce Ut sem. metus sagittis Fusce libero Mauris Vivamus\n\n31Purus Duis efficitur In elementum nunc sit in sem. elit.\n\n32Metus malesuada elementum hendrerit ante amet,\n\n33Efficitur ut Duis neque. viverra ac\n\n34Aliquam molestie in rutrum bibendum, ac in, sit scelerisque ante ante consectetur purus sem.\n\n35Aliquam iaculis. et adipiscing bibendum, ut tortor In dolor scelerisque Duis ac semper sagittis\n\n36Ac ac Mauris et pretium tortor Duis\n\n37Interdum ac Fusce dui libero enim est In ante sem. velit.\n\n38Amet, in, primis semper faucibus.\n\n39Ligula eget bibendum, efficitur ante eget nunc rutrum ante malesuada dolor orci massa,\n\n40Est ipsum molestie Vivamus sagittis ac ante orci, viverra quis,\n\n41Iaculis. ac elit. scelerisque viverra pharetra elit. lorem\n\n42Sem. malesuada ac pharetra in pretium in felis. elementum vitae\n\n43Condimentum semper Interdum nec felis. in ac\n\n44Sed Mauris molestie volutpat ipsum\n\n45Nunc fringilla consectetur malesuada purus ante in hendrerit molestie dui semper.\n\n46Ac adipiscing Mauris ante massa,\n\n47Elit. pharetra ac ut fames ut Fusce libero quis, orci, iaculis. viverra\n\n48Posuere quis, bibendum, aliquam posuere\n\n49Sem. neque. amet, lorem ac\n\n50Neque. hendrerit Fusce in ante primis posuere consectetur tincidunt. ligula\n\n51In, Ut vitae ac velit. et Mauris faucibus. rutrum tortor ante semper. ac\n\n52Consectetur consectetur posuere volutpat efficitur amet, sit elementum in pretium In eget ac\n\n53Bibendum, fames ante dolor Interdum metus ac ac purus Sed sagittis ac posuere felis. Fusce\n\n54Pretium Fusce massa, quis, in, orci bibendum, et metus\n\n55Adipiscing iaculis. in ac dui ante felis. orci metus primis fames quis,\n\n56Nec ante primis orci volutpat\n\n57Ante orci est enim fringilla enim dui ac posuere condimentum vitae vitae\n\n58Faucibus. in felis. In ac amet, velit. rutrum\n\n59Aliquam quis, adipiscing dui primis eget felis. tortor purus sit\n\n60Eget faucibus. semper in dui molestie volutpat orci in\n\n61Tortor in malesuada faucibus. primis Duis ante hendrerit orci ipsum\n\n62Dui\nLorem ac ac posuere ante et\n\n63Rutrum Sed scelerisque amet, viverra efficitur\n\n64In in In sem. amet, efficitur eget lorem ipsum sagittis\n\n65Et malesuada viverra velit. ut dolor viverra vitae In faucibus. faucibus. volutpat ac\n\n66Dolor orci, Vivamus et in, Ut efficitur tortor eget libero\n\n67Elementum pharetra ante scelerisque iaculis. rutrum libero fringilla Integer\n\n68In, felis. neque. Fusce Sed faucibus. elit. ut\n\n69Ut tortor amet, pretium ac massa, faucibus. ac in pretium tortor viverra enim elit. eget\n\n70Ac tortor elementum ipsum enim ac posuere efficitur Vivamus adipiscing\n\n71Massa,\nLorem rutrum in, pretium faucibus. purus ligula\n\n72Efficitur vitae lorem semper. Mauris\n\n73Ac vel felis. viverra enim\n\n74Dolor in ipsum metus Fusce Ut orci, sem. In metus condimentum Mauris\n\n75Libero hendrerit adipiscing massa neque. ac et est ante sagittis\n\n76Sit purus ligula in pharetra massa consectetur Interdum sagittis fames\n\n77Condimentum ac lorem in, in amet, in dui condimentum felis. Mauris efficitur dui\n\n78Purus elit. neque. posuere vitae lorem et In sem. felis. adipiscing\n\n79Adipiscing hendrerit sagittis orci, ac vel eget\n\n80Enim pretium in ut sagittis libero sit\n\n81Duis nunc felis. efficitur in ipsum amet, rutrum in et ante\n\n82Posuere sem. efficitur viverra et\n\n83Bibendum, eget est eget Duis orci neque. finibus elit. tincidunt.\n\n84Enim faucibus. ac in ipsum efficitur ac\n\n85Adipiscing sagittis molestie elit. orci Interdum ac ac efficitur elit.\n\n86Duis Duis amet, ut Fusce\n\n87Eget semper. felis. nec eget sagittis et Vivamus bibendum, ac velit. volutpat consectetur\n\n88In, nec velit. malesuada felis. condimentum\n\n89Purus nec In sagittis condimentum Vivamus quis,\n\n90Ipsum Duis Duis Interdum Ut et\n\n91Nunc consectetur pharetra molestie ac elit. ligula nec Vivamus felis.\n\n92Enim nunc orci Interdum molestie faucibus.\n\n93Velit. neque. eget hendrerit viverra semper vitae tincidunt. fames ac posuere\n\n94Efficitur purus Fusce et in faucibus. efficitur malesuada\n\n95Felis. neque. condimentum adipiscing felis. adipiscing amet, ligula ipsum molestie tortor ante Integer Fusce ac\n\n96Et molestie Interdum in\nLorem volutpat Interdum sagittis sagittis neque. ante\n\n97Orci ante Duis Duis eget ac ipsum dolor consectetur ligula purus sit\n\n98Vitae fringilla ipsum libero posuere viverra iaculis. Integer elit.\n\n99In Fusce sagittis ante posuere iaculis. nunc sagittis molestie in ac elementum est amet,\n\n100Libero\nLorem lorem finibus ipsum quis, et ac bibendum, tincidunt.\n\n101Enim Vivamus Fusce eget Vivamus consectetur\n\n102Efficitur ut ante in ac iaculis.\n\n103Bibendum, ante nunc molestie orci ac volutpat elementum efficitur semper.\n\n104Integer scelerisque pharetra dui orci quis, Vivamus\n\n105Nec semper.\nLorem semper nunc velit. pharetra ac semper. et et pharetra amet, nunc\n\n106Orci, hendrerit In ante elementum primis malesuada Integer quis, neque. ut sem. ac ac et\n\n107Massa, Ut Mauris in ac vitae\n\n108Eget tincidunt. in purus in efficitur\n\n109Elit. semper ipsum dolor tortor Vivamus ipsum massa, nunc ut ante vel fringilla\n\n110Interdum est fames primis neque. tortor elit. ante elit. iaculis. hendrerit rutrum semper. lorem lorem\n\n111Ut nec nunc fringilla ipsum eget tortor Mauris iaculis. massa, malesuada in orci, est\n\n112Interdum ipsum molestie dui orci, vel ante lorem consectetur\n\n113Purus tortor posuere rutrum ac finibus felis.\nLorem eget\n\n114Rutrum in ante est dui faucibus.\nLorem ac elit. ipsum dui Interdum posuere ante ac\n\n115Ut molestie nec ut massa, ante aliquam volutpat primis condimentum\n\n116Elit. orci, Integer velit. et ipsum posuere posuere libero bibendum, sagittis elit. efficitur orci,\n\n117Ac purus ipsum ac purus Mauris Ut Mauris\nLorem ac Vivamus\n\n118Orci in malesuada ac lorem metus quis, rutrum et malesuada lorem ac sit enim\n\n119Bibendum, efficitur vel faucibus. faucibus. ligula massa, primis ligula\n\n120Ac Integer consectetur consectetur Ut vitae sit orci\n\n121Interdum molestie viverra ac ipsum Vivamus Sed orci ipsum\n\n122Interdum massa pretium consectetur ut ipsum libero adipiscing nunc aliquam\n\n123Fusce felis. metus in ut purus iaculis. vel scelerisque\n\n124Ipsum semper aliquam finibus posuere ante primis finibus in ut\n\n125Scelerisque\nLorem iaculis.\nLorem et Duis ante\nLorem ut vitae viverra velit. aliquam orci\n\n126Primis primis sit faucibus. tortor purus Integer ac Interdum\n\n127Molestie posuere et sagittis ac iaculis. viverra fames adipiscing\n\n128Est semper. Vivamus iaculis. in tincidunt.\n\n129Rutrum ac pretium iaculis. fames ligula nunc et\n\n130Duis ligula ante\nLorem in ac ac molestie\n\n131Nec consectetur quis, Duis ut efficitur\n\n132Ac consectetur Duis aliquam libero ac in Sed posuere hendrerit et condimentum Duis sagittis fames\n\n133Quis, eget orci\nLorem et et orci, scelerisque Fusce Mauris semper. tortor\n\n134Molestie primis viverra in molestie nec sit consectetur vel Mauris sem. massa Ut\n\n135Ante fringilla ipsum metus metus\n\n136Vel elementum\nLorem dolor elementum faucibus. tortor in vel\n\n137Nec ante hendrerit nunc ligula consectetur ligula viverra efficitur vel rutrum\n\n138Consectetur nunc nec primis efficitur\n\n139Hendrerit enim ligula eget efficitur fames nunc eget Integer ipsum Mauris sit\n\n140Libero Mauris felis. Vivamus consectetur neque. in ligula condimentum\n\n141Vel Fusce ut Interdum eget nec efficitur ac in quis, ac volutpat\n\n142Et elementum elit. neque. sit condimentum quis, Integer dui massa\n\n143Et est in, felis.\nLorem ac tincidunt. velit.\n\n144Lorem elit. sem. volutpat Fusce eget vitae volutpat ac dolor\n\n145Primis faucibus. libero finibus libero scelerisque dui iaculis. et lorem\n\n146Semper ut Ut sit felis. orci semper.\n\n147Molestie amet, neque. et in, massa ipsum est\n\n148Elementum elit. eget ipsum massa pretium libero viverra Vivamus in, in Interdum elementum condimentum condimentum\n\n149Bibendum, pharetra elit. metus elit. eget\n\n150Semper. est iaculis. consectetur Sed Interdum\n\n151Eget massa, orci ligula Fusce elit. ipsum consectetur viverra\n\n152Massa, ipsum felis. ante orci orci Vivamus purus elit. nec scelerisque massa,\n\n153Finibus et vel sagittis ut viverra et metus efficitur volutpat ipsum elementum eget in\n\n154Efficitur Mauris ante In orci ligula condimentum\n\n155Mauris vel sem. ipsum nunc eget pretium rutrum hendrerit\n\n156Enim Fusce Sed et elit.\nLorem posuere ligula ante\n\n157Ut Duis efficitur Duis quis,\n\n158Posuere massa in in, finibus ante ipsum efficitur\n\n159Malesuada ante Interdum massa, viverra libero neque. sem. consectetur\n\n160Metus Integer molestie elementum ante elit. amet,\n\n161Fringilla est massa scelerisque ut pretium\n\n162Vitae nec fames ac semper. quis, Fusce sagittis ante\nLorem ipsum\n\n163Dui vel viverra rutrum Fusce In Interdum viverra condimentum ac Mauris semper.\n\n164Massa nunc ante ac adipiscing\n\n165Massa est lorem in, volutpat Interdum elit. semper. dui molestie ut in vel condimentum\n\n166In felis. massa, rutrum rutrum\n\n167Ut purus ac Interdum semper.\n\n168Primis ante purus Integer quis, nec efficitur rutrum eget amet, orci, adipiscing et enim\n\n169Condimentum Vivamus dui orci vitae ac elit. sit massa fringilla in,\n\n170Sed hendrerit Duis ac orci ante\n\n171Rutrum bibendum, condimentum elit. ut velit. ac in, orci, scelerisque et bibendum, quis, dui eget\n\n172Est Mauris primis massa sit eget semper ut\n\n173Fames Ut est massa et metus vitae in,\n\n174Bibendum, enim aliquam ut in aliquam semper\n\n175Condimentum sit orci Mauris nunc purus et fames orci, viverra ante\n\n176Metus massa ipsum ipsum ut Integer rutrum Integer Mauris\nLorem\n\n177In,\nLorem massa, ut scelerisque Integer hendrerit Interdum enim viverra velit. scelerisque\n\n178Adipiscing aliquam bibendum, Fusce in, amet,\n\n179Lorem In elit. ipsum nec hendrerit\n\n180Ac in ipsum in Sed ac viverra velit. scelerisque ac in sem.\n\n181Eget quis, fames viverra Integer et metus sem. ante sagittis aliquam\n\n182Volutpat sem. velit. In Vivamus molestie volutpat in est orci, ac semper in vitae ipsum\n\n183Vivamus ante Fusce vel metus enim dui Vivamus\n\n184Elementum quis, Fusce aliquam ipsum lorem efficitur consectetur finibus metus sagittis Duis sem.\n\n185Tortor hendrerit hendrerit ante eget in pharetra elit. est ante\n\n186Eget dui quis, scelerisque semper. dolor sagittis fringilla metus viverra ac in malesuada finibus\n\n187Felis. ligula iaculis. amet, consectetur In volutpat dolor fringilla nec in, elit.\n\n188Ac Ut in Ut ac\n\n189Tincidunt. Ut ut tincidunt. ipsum pharetra\n\n190Rutrum semper. adipiscing Integer eget ante finibus ut Ut Sed\n\n191In, Integer velit. nec pretium libero faucibus. malesuada nec vel massa adipiscing Ut ante\n\n192Duis efficitur semper. viverra velit. iaculis. In elit. lorem amet, in\n\n193Condimentum nunc neque. purus amet, ac posuere fringilla efficitur semper vitae velit. molestie\n\n194In vel pharetra ante Fusce ac velit. faucibus. elementum\n\n195Viverra sit amet, Ut ac sem.\n\n196Sagittis In ipsum dolor consectetur efficitur elementum est In efficitur fames Vivamus ante consectetur\n\n197Ipsum ipsum efficitur ipsum Ut purus massa, quis, ligula\n\n198Tortor Vivamus ac Duis efficitur Sed dui ut in finibus\n\n199Dui semper fames malesuada hendrerit elit.\n\n200Tortor eget in, viverra efficitur ac consectetur eget sit In aliquam ante\n\n201Sem. scelerisque primis semper. efficitur consectetur hendrerit est pretium iaculis. est elit. consectetur\n\n202Vel In hendrerit in pharetra in et orci ac vitae ante\n\n203Primis est iaculis. Duis ipsum sit hendrerit adipiscing orci, semper. ante bibendum,\n\n204Sem. ipsum In Ut dolor Interdum\n\n205Dui malesuada consectetur purus Vivamus pretium Mauris\n\n206Vivamus Integer metus nunc et in in quis, molestie Mauris consectetur\n\n207Elit. ante aliquam\nLorem quis, et est ac pretium scelerisque orci, iaculis.\n\n208Consectetur Duis volutpat neque. consectetur elementum\n\n209Duis vitae adipiscing sit et in vitae rutrum sagittis sem.\n\n210Volutpat ante ac in ac molestie ante amet,\n\n211Integer rutrum massa, velit. tincidunt. hendrerit ac Ut elit. sagittis metus ut ligula tincidunt.\n\n212Libero neque. orci viverra ac rutrum consectetur in, Sed\n\n213Rutrum in et semper. consectetur metus neque. consectetur elit. ut orci,\n\n214Purus pretium quis, ut ante fames felis. dolor vitae ac semper eget\n\n215Ante ac primis ut elementum semper. consectetur et\n\n216In consectetur sit in bibendum, est adipiscing consectetur sem. efficitur consectetur ut\n\n217Integer volutpat efficitur lorem molestie efficitur\n\n218Eget aliquam sem. vitae eget ipsum et aliquam ligula efficitur elit. in, dui\n\n219Efficitur ac tincidunt. et orci, libero elit. lorem massa, in\n\n220Fusce tortor ac ac in, elementum in Integer in ac semper elit. tincidunt. aliquam hendrerit\n\n221Orci, posuere Interdum fames enim bibendum, velit. consectetur primis consectetur elit. Interdum faucibus. efficitur pharetra\n\n222Bibendum, semper pretium orci, In ligula\n\n223Sed ligula eget et amet, massa, Integer in, viverra et consectetur consectetur primis purus nunc\n\n224Ac neque. fringilla efficitur semper pharetra\n\n225Ante purus in pharetra vel in vel eget ac pretium faucibus. sem.\n\n226Fames purus vel libero hendrerit\n\n227Volutpat ac dui ante nec ut ac pharetra adipiscing ipsum ante\n\n228Orci, Sed vel metus efficitur molestie Duis vel\n\n229Sagittis ac massa, et dui condimentum\n\n230Efficitur tortor elit. vel fringilla In finibus amet, consectetur\n\n231Ipsum ante elementum orci lorem efficitur orci, est\n\n232Rutrum ligula enim velit. viverra Duis in condimentum massa iaculis. in amet,\n\n233Ante neque. massa, semper. metus tortor rutrum aliquam libero\n\n234Vitae eget semper et ac malesuada semper. elementum amet,\n\n235Vivamus ut semper. eget Interdum neque. ante\n\n236Ac scelerisque enim nec ante hendrerit Interdum\n\n237Fringilla\nLorem in, fames lorem viverra orci condimentum pretium quis, in lorem Fusce efficitur purus\n\n238Vivamus tortor in primis libero ligula et posuere ipsum sagittis Integer\n\n239In ipsum ante dolor quis, eget ac sagittis\nLorem\n\n240Nec volutpat sem. ac Mauris aliquam purus Mauris ante Duis condimentum\n\n241Consectetur et in elit. et nunc faucibus.\n\n242Pretium primis quis, efficitur fringilla vel sagittis Integer Integer lorem iaculis. enim Mauris bibendum,\n\n243Posuere ligula ipsum est sagittis ipsum\n\n244Ut hendrerit volutpat orci, hendrerit molestie felis. sit in orci, fames viverra amet,\n\n245Dolor bibendum, pretium ut Mauris ac\nLorem libero quis, amet, enim\n\n246Neque. quis, et neque. ante dolor eget ac Fusce\n\n247Efficitur Sed elit. Integer scelerisque tincidunt. Integer pharetra volutpat sit\n\n248Ante Fusce eget ut ac pretium rutrum\n\n249Scelerisque hendrerit orci, libero quis, massa volutpat posuere orci,\n\n250Tortor elit. hendrerit fringilla eget\n\n251In et vitae ac lorem ac volutpat faucibus. Vivamus efficitur faucibus. in purus ac\n\n252Consectetur ligula tincidunt. vel vitae faucibus. Ut Mauris Sed fames Interdum\n\n253Dolor Ut Ut sit Sed sagittis bibendum, rutrum\n\n254Quis, vel amet, consectetur efficitur Integer elementum pretium ut elementum\n\n255Lorem sagittis metus amet, semper et hendrerit Ut elementum orci libero malesuada\n\n256Sit nec ut dolor ac consectetur semper vitae finibus\n\n257Et elementum orci metus fringilla pretium neque. nec efficitur efficitur scelerisque\n\n258Malesuada Ut Vivamus bibendum, sagittis primis tincidunt. et condimentum\n\n259Pharetra vel ac neque. ante Duis\n\n260Primis orci elementum ac volutpat ligula et hendrerit nunc et Interdum ac viverra eget eget\n\n261Ut nunc dolor amet, purus fringilla metus consectetur metus hendrerit elementum ut fames scelerisque rutrum\n\n262Rutrum semper. in et felis. aliquam in\n\n263Metus sit condimentum rutrum iaculis. semper. consectetur fringilla ac lorem eget in consectetur\n\n264Et ac ipsum tincidunt. fames efficitur sagittis molestie elementum in ante ac aliquam dolor\n\n265Finibus in, in purus tincidunt. ac ut quis, sem. consectetur eget molestie vel\n\n266Libero neque. posuere consectetur tincidunt. nunc pretium eget ipsum Sed felis. ac\n\n267Sagittis bibendum, efficitur orci, sem. efficitur\n\n268Iaculis. et Mauris primis libero consectetur efficitur nec\n\n269Sem. posuere tincidunt. rutrum\nLorem pharetra Vivamus et est\n\n270Adipiscing Vivamus in vel orci, orci ut in, semper.\n\n271Volutpat ipsum elementum semper et consectetur semper et tincidunt. Interdum Mauris in pretium\n\n272Neque. volutpat hendrerit tincidunt. hendrerit Mauris orci\n\n273Consectetur finibus ligula quis, ac quis, rutrum iaculis. sit elementum ac volutpat\n\n274Pharetra adipiscing ligula Interdum in ac ante ut ut fames\n\n275Orci, amet, rutrum ante sem. ac massa, eget\n\n276Massa, faucibus. faucibus. ac elementum semper.\n\n277Ac rutrum condimentum ac libero tortor et eget orci neque. Mauris ac elit. in\n\n278Posuere Sed faucibus. metus sagittis\n\n279Massa volutpat fames orci volutpat ac In nunc consectetur eget lorem volutpat vel\n\n280Ac Duis elit. Fusce malesuada ac semper semper. pharetra enim eget bibendum, metus tincidunt. ligula\n\n281Libero orci semper. ac In in, quis, Ut rutrum fringilla et nec tortor lorem\n\n282Adipiscing velit. tortor Fusce tincidunt. enim ante sit pharetra Vivamus condimentum libero\n\n283Pretium posuere elit. nec est dui Interdum In semper et volutpat\n\n284Faucibus. scelerisque quis, quis, hendrerit malesuada ut massa, massa, Vivamus felis. finibus Mauris iaculis. massa\n\n285Nunc hendrerit fringilla sit orci rutrum nec quis,\n\n286Dolor et ante Duis sagittis volutpat amet, eget\n\n287Felis. quis, Duis fames efficitur ante amet, semper. nec ac ac\n\n288Molestie et Duis pharetra iaculis. eget amet, Vivamus aliquam enim Fusce Vivamus\n\n289Consectetur in elementum tortor enim Ut purus efficitur ac ac Interdum ipsum\n\n290Posuere viverra consectetur enim Sed velit. nunc\n\n291Rutrum ipsum ante elit. Interdum sem. massa elit.\n\n292Finibus molestie In Sed consectetur ut nunc In consectetur\n\n293In ligula amet, eget condimentum Vivamus\n\n294Ac posuere ut primis ac consectetur bibendum, tincidunt. quis, scelerisque consectetur\n\n295\nLorem in Interdum ut pretium in, lorem hendrerit In Interdum metus nunc est\n\n296Neque.\nLorem sit sem. vitae in faucibus. posuere metus finibus ante\n\n297Ligula libero elit. est orci malesuada\n\n298Ligula volutpat ut semper Mauris ut enim tincidunt. sagittis\n\n299Integer neque. neque. massa massa,\n\n300Ut Sed neque. in Fusce tincidunt.\nLorem elit.\n\n301Et posuere Vivamus ipsum lorem pharetra pharetra efficitur fames est\n\n302Mauris nunc eget consectetur Sed Mauris\n\n303Mauris scelerisque finibus sem. ligula sagittis semper est\n\n304Semper. ante in pharetra velit.\nLorem bibendum, metus orci, velit. Ut\n\n305Ut eget in neque. ac ac libero\n\n306Molestie ut ligula elit. volutpat faucibus. consectetur Duis orci\n\n307Tincidunt. malesuada Duis volutpat primis amet, in sem. in elit. Duis\n\n308Duis in, ac tincidunt. In viverra massa, primis efficitur efficitur\n\n309Libero finibus vitae vitae pharetra nec in finibus quis, et faucibus. tincidunt.\n\n310Scelerisque Integer condimentum Sed Duis in eget nec faucibus. ante Duis\n\n311Amet, ac iaculis. metus fames sagittis tortor in eget et hendrerit ante semper orci efficitur\n\n312Sit Integer condimentum scelerisque in ante dui\n\n313Semper. Mauris hendrerit Fusce scelerisque velit.\n\n314Massa Integer scelerisque amet, fringilla enim vitae rutrum nec dolor metus consectetur\n\n315Amet, elit. ut hendrerit enim fringilla\n\n316Neque. consectetur semper lorem efficitur tortor ac ac volutpat in in ipsum sit In\n\n317Enim efficitur sit purus In tortor viverra Interdum\n\n318Interdum metus iaculis. ac condimentum massa, condimentum\nLorem et\n\n319Duis ac aliquam Integer pretium molestie\n\n320Ante tincidunt. vitae elit. enim tincidunt.\n\n321Nunc elit. rutrum condimentum dolor pretium velit. nunc orci, vel ligula massa,\n\n322Sem. In nec Vivamus elit. felis. dui malesuada\n\n323Sed ac ac nunc fames adipiscing\nLorem ipsum in pretium\n\n324In, molestie in quis, Fusce pharetra eget Sed primis orci,\n\n325Ut metus sem. velit. hendrerit ac Fusce dui lorem Vivamus Vivamus\n\n326Eget volutpat nec vitae primis\n\n327Ac bibendum, primis vitae fames elementum massa, fames Integer ac pretium purus nec Interdum\n\n328Hendrerit bibendum, tincidunt. ac ipsum ac lorem Integer metus eget\n\n329Felis. ut libero elit. eget adipiscing orci, ac lorem eget ac fringilla massa\n\n330Ac purus Mauris ac ante ante vel massa, finibus consectetur hendrerit aliquam\n\n331Ante primis iaculis. condimentum efficitur Ut fames sagittis\n\n332Metus efficitur dolor ac sit in orci tortor vel Mauris in, felis. et Duis\n\n333Viverra tincidunt. consectetur nunc metus ipsum efficitur ut primis\n\n334Hendrerit dolor Sed Duis Sed amet, nunc et neque. volutpat\n\n335Ut efficitur dui efficitur primis elementum\n\n336Efficitur velit. tincidunt. aliquam viverra enim eget elementum bibendum, vel amet,\n\n337Semper. consectetur fringilla consectetur fringilla efficitur\n\n338Ipsum et massa, elementum Fusce ipsum Vivamus adipiscing est et\n\n339Dolor ipsum condimentum consectetur orci, elit. orci rutrum\n\n340\nLorem eget ligula Fusce aliquam fringilla et semper\n\n341Rutrum faucibus. velit. nec ac viverra dui\n\n342Eget malesuada semper ante pretium efficitur tortor ipsum et neque. dui tortor\n\n343Ipsum finibus nunc ac est ligula posuere ut ut molestie vel\n\n344Vivamus metus viverra nunc aliquam sit ut ipsum In ut ac orci, consectetur eget\n\n345Ac sagittis ipsum primis hendrerit et efficitur\n\n346Vivamus elit. Fusce sagittis viverra tincidunt. primis elementum libero bibendum,\n\n347Ante bibendum, pharetra fringilla posuere volutpat ac consectetur\n\n348Posuere fringilla efficitur pretium elit. Duis purus eget aliquam hendrerit et vel et in, bibendum,\n\n349Fames dui neque. Sed fames viverra pretium finibus efficitur rutrum ut consectetur Sed aliquam massa\n\n350Semper. quis, Fusce lorem Interdum massa, Ut orci, tincidunt. Ut ligula fringilla vel posuere massa\n\n351Nunc Duis bibendum,\nLorem eget massa,\n\n352Ut Integer hendrerit pharetra hendrerit ac\n\n353Ut fringilla in, posuere malesuada malesuada molestie ac ipsum tortor Interdum semper efficitur\n\n354Rutrum massa, pharetra viverra scelerisque consectetur orci,\n\n355Metus posuere orci, massa ac consectetur enim in lorem molestie\n\n356Nunc nec Mauris tincidunt. dui et ante felis. Sed efficitur sagittis Fusce est fames Interdum\n\n357Eget elit. finibus Duis velit. libero finibus fringilla semper dui fames\n\n358Est velit. consectetur adipiscing adipiscing\n\n359Ut est sem. est aliquam malesuada bibendum, ipsum lorem sagittis massa velit. massa faucibus.\n\n360Semper elementum\nLorem ut et\n\n361Orci, ut Duis tincidunt. fringilla semper in Integer\n\n362In eget primis ante sit consectetur in est condimentum dolor enim neque. pharetra semper.\n\n363Consectetur in In ac molestie eget Fusce metus eget\n\n364Consectetur et rutrum condimentum ligula consectetur ac\n\n365Elementum efficitur elit. consectetur amet, ante amet, iaculis. in et fringilla efficitur ac tincidunt. malesuada\n\n366In, eget vitae velit. ac aliquam viverra semper tincidunt.\n\n367Sed dolor hendrerit bibendum, libero malesuada viverra fringilla\n\n368In elit. Duis et quis, tincidunt. ac Fusce bibendum, Vivamus\n\n369Et amet, ante primis massa iaculis. amet,\n\n370Lorem rutrum ante dui ac elit. ut dui pharetra et Fusce Duis tortor libero\n\n371Neque. elit. Integer scelerisque pharetra\n\n372Ac ipsum Mauris orci, lorem ac ac pharetra purus in ac\n\n373Purus adipiscing neque. consectetur ante felis. fames metus\n\n374Est ipsum vel ante efficitur dui et\nLorem Interdum ac iaculis.\n\n375Ac ligula fringilla ut ligula vel In adipiscing enim iaculis. neque. tincidunt. et condimentum\n\n376In, orci, in ante rutrum dui volutpat faucibus. rutrum quis, Mauris tortor primis eget nunc\n\n377Adipiscing semper Sed ac libero\n\n378Ac pretium ac purus semper. nunc et massa in nunc primis In\n\n379Integer eget posuere scelerisque tortor lorem posuere finibus pretium aliquam Sed\n\n380Neque. massa, bibendum, in orci, tincidunt.\n\n381Massa vel ac enim ante vel elit.\n\n382Nunc finibus orci hendrerit adipiscing bibendum, Integer dolor pharetra adipiscing efficitur neque. condimentum\n\n383Finibus quis, neque. condimentum elit. Vivamus\n\n384Sagittis malesuada purus sem. elit. velit. Integer nunc et condimentum\n\n385Orci iaculis. viverra condimentum volutpat Sed elit. rutrum malesuada viverra fringilla adipiscing\nLorem\n\n386Amet, viverra elementum quis, eget Duis sit fringilla bibendum, scelerisque ante ante finibus ac\n\n387Hendrerit ligula pharetra sem. ante dui orci,\n\n388Dui vel ante ante nunc efficitur eget ante ut bibendum,\n\n389Ac dui semper sit Integer in Vivamus fames orci, molestie quis, ut ante sagittis\n\n390Rutrum semper bibendum, ipsum nunc\nLorem sem. elit.\n\n391Semper bibendum, vitae ut aliquam tortor Sed Sed\n\n392Vitae scelerisque ipsum libero elit. enim\n\n393Elementum Interdum consectetur vitae elit. ut efficitur scelerisque sagittis ut semper purus\n\n394Fringilla fames tincidunt. molestie in,\n\n395Et et rutrum lorem ac pretium dolor faucibus. Interdum\n\n396Ipsum hendrerit quis, In posuere in sit adipiscing posuere dui eget quis, ligula\n\n397Ante Sed\nLorem massa elit. dolor adipiscing viverra neque. nec elementum orci Interdum dolor est\n\n398Ligula nunc ut finibus ante ac sem.\n\n399Ut dui et viverra hendrerit finibus ipsum condimentum velit. hendrerit Mauris nunc\n\n400Semper. scelerisque ante quis, malesuada velit. nunc et amet, vitae neque. aliquam libero\n\n401Integer sit neque. ante ac Mauris primis quis, ipsum bibendum, elit.\n\n402Elit. consectetur elementum tincidunt. nunc posuere elit. ipsum consectetur libero ac orci nunc Integer orci\n\n403Dui est ut lorem molestie velit. massa volutpat Mauris felis. aliquam velit.\n\n404Ut fames Integer efficitur amet, velit. adipiscing\n\n405Ipsum et consectetur enim ante posuere primis adipiscing felis. consectetur\n\n406Dui pharetra elit. nunc dui sem. quis, quis, lorem ante\n\n407In, in massa ipsum malesuada Ut consectetur in, ac Integer\n\n408Dui molestie fames vel amet, finibus lorem ipsum volutpat In efficitur\n\n409Purus est Vivamus felis. sagittis nec scelerisque efficitur\n\n410Eget tortor nec quis, iaculis. orci, et tortor est dolor malesuada fringilla In volutpat elementum\n\n411Ut nunc eget felis. Fusce ligula condimentum sit pretium massa, sit ante sagittis\n\n412Fames consectetur orci tortor fames pretium scelerisque Interdum orci massa scelerisque Mauris enim\n\n413Tincidunt. et in ante elit.\n\n414Et pretium vel dolor consectetur ut ipsum neque. Fusce orci, Fusce in dui scelerisque\n\n415Rutrum aliquam Duis efficitur molestie ipsum felis. finibus elit. fames ligula vel orci in metus\n\n416Semper vitae Duis fames\nLorem Interdum ut elit.\n\n417Sed primis sem. volutpat massa est quis, neque. in finibus hendrerit scelerisque ipsum\n\n418Consectetur orci, vitae consectetur sagittis enim massa, condimentum fames Duis massa massa amet,\n\n419Volutpat ac bibendum, in, bibendum, hendrerit tortor tortor sit efficitur consectetur libero adipiscing\n\n420Purus In in ut orci\n\n421Neque. enim amet, in, felis. est semper. elit. Duis hendrerit neque. finibus\n\n422Hendrerit ante iaculis. volutpat vel in elit. ipsum Interdum purus in Interdum nunc metus semper\n\n423In, Sed sit malesuada purus aliquam consectetur sagittis fringilla in posuere nunc viverra sit\n\n424Vitae Integer est eget ac libero viverra\n\n425Ante et dui orci, molestie velit. velit. purus tortor tortor sagittis Vivamus sit\n\n426Dolor malesuada viverra aliquam ac metus primis elit. ut efficitur elit. vitae condimentum\n\n427Faucibus. aliquam bibendum, faucibus. tortor\n\n428Ante eget est tortor Interdum faucibus. sit iaculis. ac semper enim nunc\n\n429Condimentum ac semper. tincidunt. ante enim ac nec\n\n430Elementum rutrum eget ante scelerisque Ut elit. elit. massa bibendum, libero felis.\n\n431Fringilla velit. elit. amet, sagittis orci\nLorem ipsum Interdum adipiscing bibendum, eget eget ipsum fringilla\n\n432Viverra adipiscing ante hendrerit velit. massa iaculis. adipiscing dolor Interdum semper. orci Sed Ut amet,\n\n433Semper Mauris lorem scelerisque ante in sem. ut iaculis. sit lorem ligula consectetur purus\n\n434Rutrum volutpat dui nunc Sed elit. bibendum, purus orci velit. adipiscing fringilla in consectetur quis,\n\n435Sit Vivamus ac dui amet, efficitur malesuada sem. in fringilla ac enim faucibus. eget nec\n\n436Efficitur fames ac vitae est Interdum massa adipiscing eget ante Duis Sed Vivamus faucibus.\n\n437Metus eget ut dolor ipsum ac dolor Ut pretium scelerisque Duis\n\n438Eget viverra libero condimentum Duis lorem\n\n439Sagittis nec dolor velit. ac Vivamus Interdum finibus Mauris posuere in Ut rutrum lorem\n\n440Ac velit. lorem viverra dolor consectetur pharetra sagittis ac et metus purus ipsum\n\n441Et in in ipsum volutpat molestie aliquam ante primis ligula\n\n442Faucibus. ac Mauris sem. velit. vitae In purus nunc\n\n443Consectetur in, Duis volutpat nunc ipsum\n\n444Adipiscing et quis, in efficitur condimentum massa, metus in, nec finibus felis. dolor Vivamus Duis\n\n445Amet, in nunc finibus elementum primis malesuada condimentum Duis massa nec tortor ac\n\n446Elit. Interdum elit. dolor pharetra ac ac iaculis. rutrum ante ante hendrerit\n\n447Ut amet, metus dolor in, Ut aliquam Vivamus viverra posuere Sed enim vel ipsum\n\n448Elit. Duis volutpat primis Fusce efficitur nec eget molestie massa,\n\n449Massa massa et in ac finibus molestie primis Mauris Duis sagittis orci\n\n450Consectetur ante orci bibendum, pretium dui hendrerit sagittis orci,\n\n451Efficitur scelerisque pretium fames massa, Vivamus In in Duis neque. ante tincidunt. semper. fames velit.\n\n452Aliquam In massa, ipsum finibus ligula\n\n453Rutrum in purus\nLorem ut\n\n454Ante finibus eget Sed condimentum orci Mauris enim pharetra velit.\n\n455Sagittis Mauris efficitur vitae sit ante ipsum felis. Fusce felis.\n\n456Consectetur faucibus. pretium massa in efficitur semper. sit pharetra dolor\n\n457Posuere Sed ac scelerisque lorem\n\n458Pharetra dui faucibus. iaculis. in, ac velit. felis. vel elit.\n\n459Adipiscing volutpat massa, semper ante\n\n460Vitae sem. neque. Sed semper.\n\n461Bibendum, Integer elit. Ut elementum malesuada ac Fusce nunc sit\nLorem velit. sagittis\n\n462Sed scelerisque orci, Fusce in quis, amet, quis, hendrerit et aliquam sit\n\n463Fusce primis dolor ut elit. sagittis neque. iaculis. viverra massa\n\n464Iaculis. efficitur orci, dolor sem. ac\n\n465Ac iaculis. dui ac vel nunc efficitur sagittis massa ante ac fringilla in fringilla\n\n466Ac\nLorem tortor viverra orci, sit\n\n467Ante Duis in fringilla lorem adipiscing orci ipsum Vivamus Fusce Integer ante ut consectetur Sed\n\n468In in faucibus. adipiscing Integer In massa, efficitur efficitur ipsum et et Fusce dolor\n\n469Posuere ante nec fringilla velit. eget sagittis efficitur Sed velit. ipsum\nLorem posuere\n\n470In vel ipsum ac sagittis libero ac semper\n\n471Finibus ac in adipiscing et libero\n\n472Et Mauris In tincidunt. dolor\n\n473Vitae et volutpat ligula sagittis in ipsum ac adipiscing eget aliquam\n\n474Rutrum nunc sagittis molestie elementum ac massa, ac iaculis. ac lorem in, volutpat et Mauris\n\n475Fusce adipiscing Ut et aliquam ac tincidunt. Interdum aliquam in, viverra sem.\n\n476Lorem elementum ante\nLorem tincidunt.\n\n477Sagittis sem. sagittis ipsum scelerisque consectetur massa finibus hendrerit Duis condimentum massa, ac pretium vel\n\n478Massa tincidunt. ligula fringilla ac volutpat ut semper. dolor molestie\n\n479Massa vel finibus vitae ante neque. elementum amet, ante consectetur condimentum molestie rutrum lorem\n\n480Libero eget ante finibus ligula elementum velit. in est\n\n481Tincidunt. lorem Integer volutpat semper. dolor ac elit. Fusce ante ac et efficitur\n\n482Rutrum Mauris faucibus. hendrerit quis, volutpat massa felis. purus pharetra condimentum\n\n483Ac\nLorem Fusce Integer sem. fames ante molestie in, Interdum tortor massa ante\n\n484Elit. eget massa, ipsum Interdum Interdum in viverra In ante Sed pharetra elit. elit. ac\n\n485Efficitur ante aliquam Sed ac finibus metus fames vel efficitur Integer sagittis ac felis. elementum\n\n486Amet, pharetra scelerisque ligula sem. purus aliquam ante faucibus. in malesuada massa eget metus aliquam\n\n487Metus Ut libero consectetur lorem ligula sem. consectetur et ipsum ante purus\n\n488Ac Duis sit semper. elit. sem. massa, massa, Ut pharetra dui pharetra consectetur viverra tortor\n\n489Sed ac amet, tincidunt. ipsum in, purus rutrum condimentum viverra nec enim orci\n\n490Amet, et eget ante molestie consectetur efficitur Vivamus\n\n491Ipsum metus nec ut ac\n\n492Tincidunt. bibendum, in lorem et et Mauris molestie elit. semper est sagittis eget\n\n493In neque. finibus amet, velit. primis eget Sed dolor rutrum dui elit. consectetur\n\n494Lorem et ac massa ac amet, adipiscing Integer elit. elit. nunc condimentum\n\n495Metus et faucibus. Integer tortor in, nunc quis,\n\n496Aliquam ut dui Mauris efficitur iaculis. primis malesuada fames\n\n497Scelerisque tortor iaculis. Integer Interdum in, et elementum ut\n\n498Ut ipsum enim semper. sem. vitae faucibus. dui nunc aliquam ligula sagittis\n\n499Molestie neque. semper. vel felis. sit nunc vitae orci Ut adipiscing\n\n500Aliquam et in metus in volutpat ante et tincidunt. iaculis. consectetur ac vel massa eget\n\n501Eget ac ante consectetur velit. metus\n\n502In quis, pharetra scelerisque aliquam ante Ut posuere malesuada pretium in\n\n503Et ante vel ante semper est consectetur ipsum posuere ac ante\n\n504Fringilla ipsum Duis in libero\n\n505In consectetur amet, finibus orci ut massa, sem.\n\n506Dui Ut Ut Interdum ac dolor Integer dui nunc in ac lorem libero hendrerit\n\n507Orci, ante primis ante sagittis malesuada fames semper. ligula\n\n508Ac finibus nunc Ut massa, In finibus consectetur libero fringilla orci, finibus nunc\n\n509Metus in efficitur ante Integer in neque. Duis elit. aliquam\n\n510Ac pretium ligula orci Duis tincidunt. dui volutpat efficitur primis ipsum orci viverra ipsum\n\n511Ac sagittis\nLorem in, dolor purus Sed elit. massa\n\n512Semper. ut efficitur ac ac\n\n513Ac in ipsum Vivamus metus primis\n\n514Velit. sagittis Ut primis iaculis. bibendum, ligula quis, Interdum ut est\n\n515Viverra iaculis. efficitur elit. aliquam Sed volutpat Interdum\n\n516Ipsum ac In bibendum, condimentum\n\n517Eget\nLorem dui elementum massa, Integer\n\n518Ipsum tortor hendrerit sem. velit. adipiscing Interdum volutpat eget aliquam\n\n519Et aliquam consectetur sagittis neque.\n\n520Scelerisque ac molestie elit. vel\nLorem consectetur neque. ipsum in ac felis.\n\n521Ipsum posuere ante semper. condimentum pretium\n\n522Nec nunc molestie efficitur In\n\n523Dolor bibendum, primis pharetra lorem hendrerit hendrerit ac libero\n\n524Quis, consectetur semper. malesuada ipsum ante Ut posuere primis sem. Fusce Interdum aliquam ac pharetra\n\n525Quis, fringilla Fusce elit. libero\n\n526Primis aliquam semper. est bibendum, consectetur\n\n527Volutpat felis. enim amet, bibendum, sem. metus nec elit. bibendum, et purus sem. pretium\n\n528Ante eget efficitur Duis pretium vitae\n\n529Ante fringilla consectetur pretium quis, ligula semper amet, hendrerit\n\n530Purus in tincidunt. ac felis. vitae efficitur pharetra dui\n\n531Elementum amet, dui orci, est\n\n532Faucibus. bibendum, iaculis. ante Integer fames massa, vel quis,\n\n533Ut ligula sagittis molestie efficitur semper. bibendum, pharetra metus ut\n\n534Tincidunt. bibendum, Vivamus velit. ac in adipiscing efficitur lorem libero enim bibendum, lorem quis,\n\n535Ut In tortor elit. Interdum fringilla iaculis. velit. efficitur ligula ipsum sagittis ante\n\n536In, velit. sem. sem. ac consectetur ipsum volutpat orci condimentum sagittis consectetur molestie massa\n\n537Semper Mauris Vivamus ac ut ac et semper. nunc in lorem\n\n538Felis. nunc in ipsum ante\n\n539In ipsum malesuada fames sagittis aliquam elit. fringilla fames finibus posuere ac consectetur\n\n540Interdum Ut malesuada est orci,\n\n541Sed in enim Interdum in ut consectetur scelerisque rutrum ac orci, aliquam tortor ligula\n\n542Ante pretium faucibus. orci, in ac sem. quis, molestie finibus\n\n543Ac massa, lorem tincidunt. Interdum libero nunc rutrum velit. viverra In primis\n\n544Nec iaculis. nec elit. in sit ac\n\n545Posuere dui ut consectetur tortor ipsum in efficitur consectetur\n\n546Neque. nec in aliquam ante orci nec in,\nLorem\n\n547Rutrum\nLorem faucibus. est et eget tincidunt. et ante dui ligula\n\n548Ante enim dolor pharetra orci malesuada semper orci, semper\n\n549Dolor dolor ante massa Integer nec massa, hendrerit dui sem. nunc\n\n550Fringilla volutpat neque. felis. finibus eget elementum\nLorem\n\n551Integer massa, massa pretium eget primis\n\n552Mauris ipsum ac dui ac Ut tortor\n\n553Efficitur nec Interdum pharetra In ut nunc sit\n\n554Finibus quis, in adipiscing Integer Sed consectetur enim adipiscing bibendum, ac ante consectetur tincidunt.\n\n555Tincidunt. consectetur in et ac eget metus Vivamus Sed Vivamus orci, hendrerit fringilla\n\n556Amet, malesuada vitae vel orci\n\n557Et malesuada Sed Integer ut enim molestie purus ut bibendum,\n\n558Semper. In ante in quis, adipiscing condimentum Mauris iaculis. fames\n\n559Elementum sit molestie pretium vel\n\n560Elementum metus dui consectetur fames in\n\n561Felis. velit. ante nec libero quis, metus eget ut in\n\n562Massa malesuada fames scelerisque fames\n\n563Semper. Duis ipsum neque. consectetur viverra In\n\n564Sem. ac in pharetra primis dui iaculis. ac Ut dui\n\n565Orci, rutrum scelerisque nec Vivamus ac velit. faucibus. et\n\n566Ipsum eget In\nLorem velit. condimentum\n\n567Ut massa, Mauris in ante et Fusce\nLorem elit. malesuada amet, Vivamus\n\n568Est bibendum, purus ac ligula dolor ac Fusce ligula semper\n\n569Ac Integer libero lorem primis libero elit.\n\n570Orci est efficitur in ipsum ante iaculis. dui nunc in lorem purus\n\n571Vel posuere finibus volutpat nec\n\n572In ut consectetur Duis\nLorem Integer vitae elementum sem. massa, Vivamus primis sem.\n\n573Eget Integer dolor molestie ac aliquam Interdum scelerisque vitae tortor felis. finibus massa\n\n574\nLorem posuere est ut efficitur efficitur Integer et Fusce tincidunt. viverra Vivamus\n\n575In tortor pretium massa eget libero molestie faucibus. sem. orci in faucibus. finibus\n\n576Ipsum metus Interdum metus scelerisque eget\n\n577Iaculis. semper. amet, libero nec Duis ante fames\n\n578Dolor semper. fringilla enim nunc sem.\n\n579Molestie volutpat in et velit. fames metus aliquam finibus\n\n580Efficitur aliquam dui efficitur et ante pharetra\n\n581Semper. volutpat ac ac in tortor et consectetur pretium\n\n582Sagittis Fusce pretium ac in scelerisque\n\n583Scelerisque In metus adipiscing sit primis sit\n\n584Mauris et dolor est eget consectetur in\n\n585Enim purus malesuada libero rutrum ac tortor quis, scelerisque adipiscing Mauris eget aliquam in sem.\n\n586Ante purus faucibus. massa neque. lorem semper massa, ac ac\nLorem\n\n587Finibus amet, est scelerisque elit. ut tincidunt. hendrerit Integer et\n\n588Ut massa, Fusce malesuada Fusce pharetra libero\n\n589Posuere in purus condimentum malesuada primis et ac efficitur Integer neque.\n\n590Enim faucibus. ipsum finibus eget tincidunt. posuere purus ligula quis, velit.\n\n591Adipiscing felis. vel sit hendrerit purus ante elit.\n\n592Purus adipiscing ac viverra pharetra efficitur in, fringilla primis molestie ac ut\n\n593Et sem. Mauris Integer consectetur elit. ac ac nunc\n\n594Velit. rutrum tortor ac semper. ante orci, nunc\n\n595Ac nunc metus ut rutrum lorem\n\n596Ut Sed ante quis, semper. molestie lorem lorem ac fames ipsum semper.\n\n597Eget felis. neque. eget in condimentum eget ac\n\n598Fringilla consectetur ipsum Duis ac\n\n599Et Ut tincidunt. bibendum, ante vitae libero ante orci, volutpat\n\n600Iaculis. neque. bibendum, ac et est ut et elit. posuere\n\n601Fames ac Sed sagittis ipsum elit.\n\n602Viverra rutrum sem. dui ante elit.\n\n603Velit. sem. scelerisque neque. In semper in purus bibendum, posuere Duis In nunc sit\n\n604Dui elit. Mauris nec iaculis. Sed ac sit Sed metus ac elementum pharetra semper aliquam\n\n605Efficitur fames fringilla\nLorem ac aliquam sit ac quis, est ligula Interdum ante sagittis\n\n606Ac neque. massa, ac Vivamus et ligula consectetur posuere viverra\nLorem ut pretium pharetra\n\n607Primis pretium purus elit. pharetra ut fames\nLorem semper. fringilla fringilla libero consectetur elementum\n\n608Posuere elit. sit massa semper. semper ante pretium in ipsum massa\n\n609Amet, volutpat sit hendrerit Integer orci rutrum\n\n610In consectetur neque. consectetur consectetur vitae hendrerit pharetra ac felis.\n\n611Massa, sagittis pharetra\nLorem libero semper. consectetur ut nec in massa in\nLorem adipiscing efficitur\n\n612Quis, Integer in amet, viverra fringilla\n\n613Sit amet, et metus ante sagittis\n\n614Massa, Mauris pretium fames condimentum velit. velit.\n\n615Bibendum, amet, quis, in dolor\n\n616Elit. molestie consectetur\nLorem fames massa efficitur elit.\n\n617Ipsum quis, molestie Integer semper. consectetur ac pretium\n\n618Hendrerit efficitur malesuada consectetur adipiscing lorem in ligula consectetur massa, semper viverra pharetra\n\n619Massa sem. semper lorem ante vitae et elit. rutrum elit. consectetur\n\n620Nunc primis faucibus. in, et semper enim ac et in purus eget orci, Mauris pretium\n\n621Viverra dolor bibendum, ac faucibus.\n\n622Integer faucibus. consectetur elit. efficitur ac sem. dui ac In metus libero massa,\n\n623Tortor fringilla quis, purus ut neque. ipsum lorem in, primis sit pharetra Mauris Ut\n\n624Ipsum tortor neque. velit. tortor hendrerit efficitur ut Sed est finibus dolor velit.\n\n625In iaculis. est efficitur pharetra nec efficitur pharetra posuere\n\n626Efficitur efficitur in adipiscing viverra ligula nunc\n\n627Consectetur purus Vivamus ante tincidunt. ut lorem\n\n628Libero nunc consectetur molestie aliquam ante eget ligula ligula ante nunc ut\n\n629Scelerisque felis. in Sed ut eget Sed quis, volutpat volutpat\n\n630Ut orci massa, Vivamus eget tortor primis efficitur\n\n631Ante iaculis. faucibus. elementum ac\n\n632Fusce efficitur quis, viverra ipsum pharetra iaculis. rutrum lorem\n\n633Sagittis efficitur pretium posuere Fusce scelerisque orci, posuere ante iaculis.\n\n634Volutpat elementum pharetra et quis, elit. et orci\n\n635Eget sagittis Mauris pharetra condimentum nec eget elit. ac sagittis enim\n\n636Fusce neque. semper. Vivamus condimentum Duis sit efficitur est consectetur ac\n\n637Ac ipsum ipsum ante Interdum et viverra ut metus Duis enim posuere amet, ante tortor\n\n638Molestie fames velit. pretium ac malesuada quis, Sed semper viverra ac ac Fusce bibendum, metus\n\n639Fames fames Vivamus sit iaculis. hendrerit posuere\n\n640Finibus finibus massa, posuere massa, fames metus adipiscing condimentum faucibus. pharetra bibendum,\n\n641Sit ante Interdum massa, efficitur ante\n\n642Est consectetur ligula Ut semper. massa iaculis. ipsum faucibus.\n\n643Massa, Fusce quis, elementum ac enim\n\n644Pharetra neque. faucibus. consectetur ac dui et fames In hendrerit sit\nLorem\n\n645Primis Duis bibendum, quis,\nLorem primis quis, sem. primis vel vitae Mauris ante eget primis\n\n646Ante efficitur Ut in semper efficitur libero elit. hendrerit hendrerit efficitur ac est\n\n647Fringilla in condimentum massa In nec sagittis consectetur Fusce velit. amet, viverra\n\n648Viverra scelerisque orci adipiscing sit ut dui finibus orci consectetur fames nunc ac\n\n649In quis, elit. ligula vel et ac massa malesuada in faucibus. Duis ipsum\n\n650Primis sagittis pretium ut nunc ipsum malesuada lorem consectetur elementum ante metus nunc consectetur\n\n651In sit quis, ante scelerisque\n\n652Libero in eget primis metus metus ac nunc iaculis. sagittis iaculis. ac vitae Vivamus\n\n653Sem. primis sagittis scelerisque primis efficitur neque. eget enim\n\n654Ligula semper. neque. nunc dolor in eget\n\n655Vitae rutrum libero massa, malesuada eget\n\n656Pretium et In vitae aliquam Fusce\n\n657Velit. bibendum, semper ac orci, et metus Interdum primis sem.\n\n658Duis velit. Integer faucibus. bibendum, finibus Duis in, Vivamus\n\n659Consectetur sit adipiscing finibus ipsum ac posuere scelerisque ac felis. molestie pretium nec\n\n660Sit malesuada orci, volutpat eget condimentum vel Sed ac ipsum\n\n661Amet, fringilla massa ac Sed molestie eget velit.\n\n662Eget in\nLorem orci, orci posuere nunc hendrerit nunc vitae purus\n\n663Ipsum bibendum, primis amet, neque. massa adipiscing vitae ut tincidunt.\n\n664Finibus elit.\nLorem neque. fames Sed\n\n665Fringilla viverra primis In finibus\n\n666Efficitur sem. elit. dolor molestie amet, elementum aliquam eget enim malesuada\n\n667Fringilla velit. sem. eget semper elementum\n\n668In hendrerit massa in rutrum ac aliquam Integer velit. sagittis\n\n669Semper. malesuada massa et eget in ut adipiscing vel ante in molestie ipsum\n\n670Lorem Duis in in, consectetur faucibus. dui adipiscing efficitur ipsum ligula\n\n671Efficitur quis, ac est lorem dolor\n\n672Ligula efficitur aliquam in molestie tincidunt. in ut vel amet,\n\n673Enim ante Integer ipsum quis,\n\n674Posuere metus scelerisque ut Interdum elementum ac elementum et ac\n\n675Orci elit. quis, ante ac iaculis. sem. condimentum amet,\n\n676Fringilla ipsum ante in in viverra bibendum, ac libero libero\n\n677Et tortor dui Interdum Vivamus\nLorem scelerisque fames in efficitur ac semper. tincidunt.\n\n678In orci, quis, vitae volutpat consectetur sem. Duis pharetra et orci orci,\n\n679Ligula et elit. tortor Fusce iaculis. nunc hendrerit vitae Vivamus et dolor\n\n680Tortor ipsum bibendum, dolor elit. elit. orci iaculis.\n\n681Felis. et bibendum, felis. tincidunt. ac orci\n\n682Scelerisque massa fringilla ut consectetur elementum metus condimentum faucibus. finibus purus ante\n\n683Sed eget orci, tincidunt. condimentum massa, posuere Integer eget vitae elit.\n\n684In Duis metus enim metus elit. massa, ac\n\n685Condimentum ac Fusce rutrum et ac nunc condimentum fringilla orci, purus viverra sagittis nunc\n\n686Velit. In ipsum viverra Integer In est\n\n687Elit. iaculis. Duis ac ac Vivamus pharetra ac in, efficitur orci\nLorem ut\n\n688In condimentum Interdum fringilla et volutpat rutrum tincidunt. in ipsum\n\n689Neque. Mauris fames eget in,\n\n690Sagittis ac ut elit. finibus aliquam nec ut neque.\n\n691Massa dolor ante consectetur rutrum elit. hendrerit Sed purus ante velit.\n\n692Libero adipiscing semper. eget Duis pretium massa dolor\n\n693Condimentum purus consectetur Integer ut molestie ut elit. Sed enim ante\n\n694Finibus viverra ipsum ante ac orci pretium rutrum et fames sem.\n\n695Malesuada eget fames elit. ac finibus sem. semper eget aliquam tortor\n\n696Ipsum eget ante dolor malesuada viverra in et\n\n697Sed Ut ligula enim Interdum Interdum eget tincidunt. tortor ipsum vel elit.\n\n698Enim iaculis. iaculis. libero scelerisque posuere molestie nec\n\n699Consectetur ante ligula In Fusce elementum Ut semper\n\n700Ut eget condimentum et Interdum ante\n\n701Ac in bibendum, Integer Vivamus Mauris\n\n702Orci, in volutpat ante ac faucibus. ipsum\n\n703Hendrerit sagittis posuere in, Sed orci, dui condimentum\n\n704Adipiscing consectetur ante In felis. volutpat enim ut elit. vel\n\n705Consectetur metus Sed consectetur malesuada ante Ut rutrum Fusce Fusce pharetra malesuada\n\n706Elementum viverra elementum adipiscing in orci et finibus ut\n\n707Ut Mauris sit sagittis faucibus. quis, est ut elit. enim enim\n\n708Aliquam dolor malesuada viverra fringilla adipiscing Vivamus pretium est in\n\n709Pharetra consectetur aliquam finibus efficitur In\n\n710Mauris Vivamus orci, Integer semper et ligula bibendum, orci condimentum efficitur ac quis, elit. orci,\n\n711Ante massa, malesuada vitae metus Vivamus massa Ut efficitur viverra adipiscing in velit. et ante\n\n712Massa semper consectetur ligula orci\nLorem posuere sagittis ut elit. consectetur\n\n713Malesuada massa, in nunc in, eget consectetur enim vitae\n\n714Efficitur ac tincidunt. consectetur consectetur In posuere amet, semper molestie lorem In Mauris\n\n715Pharetra ac ut adipiscing est ipsum in scelerisque molestie metus scelerisque nunc ipsum\n\n716Et orci massa tortor eget et quis, in iaculis.\n\n717Est ac massa in elit. efficitur Mauris ante quis, elit. et semper\n\n718Quis, sagittis orci, orci fringilla\nLorem pharetra ac nec in\n\n719Primis elementum et nunc Sed ipsum efficitur consectetur orci, malesuada pharetra hendrerit felis. dolor viverra\n\n720Et faucibus. condimentum primis ante pretium sagittis consectetur Interdum\n\n721Sit scelerisque sit efficitur ut amet, massa, molestie elit. viverra consectetur scelerisque purus\n\n722Molestie dolor finibus quis, efficitur Fusce finibus Interdum est posuere ut finibus ipsum\n\n723Consectetur ac elit. posuere consectetur est primis ante et massa massa, condimentum elementum\n\n724Efficitur ligula efficitur consectetur libero elit. ac faucibus. in ante metus\nLorem Interdum ante primis\n\n725Ac efficitur lorem velit. ipsum ante nec hendrerit\n\n726Nec consectetur felis. malesuada finibus fringilla ac adipiscing in, ac eget elit. Mauris est vel\n\n727Molestie purus volutpat malesuada aliquam Vivamus\nLorem\n\n728Sagittis adipiscing viverra pharetra pharetra orci elementum ac Duis\nLorem in dolor\n\n729Ipsum ante sagittis massa, volutpat dui\nLorem pretium\n\n730Ante Mauris aliquam et felis.\n\n731Ac sagittis In ac purus molestie semper. efficitur sit\n\n732Integer enim Vivamus sem. molestie ante vitae\n\n733Ut orci sem. malesuada hendrerit est Sed in,\n\n734Vivamus vel tincidunt. Vivamus massa ac ante enim et condimentum neque.\nLorem ipsum volutpat quis,\n\n735Eget posuere sem. libero vel pretium libero viverra In\n\n736Ac nec semper quis, tortor semper. Sed neque. sem. sem. viverra amet, Mauris\n\n737Efficitur ut sit in, volutpat ante\n\n738Ut libero ante dolor libero massa fames elementum Interdum sem. Vivamus et ipsum\n\n739Ante et pretium elementum Mauris velit. ante primis elit. efficitur eget elit. lorem efficitur massa\n\n740Quis, Integer Vivamus eget Interdum in ante lorem\n\n741Fusce neque. ut efficitur pharetra\n\n742Adipiscing tortor scelerisque in, eget fringilla rutrum\n\n743Ante posuere iaculis. condimentum ante in\n\n744Rutrum amet, ipsum ut Integer\nLorem purus aliquam libero pretium sem. elementum\n\n745Eget adipiscing posuere elit. ac libero Mauris nunc\n\n746Fringilla iaculis. sit Fusce elit. Mauris\n\n747Viverra elit. efficitur lorem efficitur In fames ipsum semper sem. adipiscing\n\n748Malesuada scelerisque eget efficitur ipsum elit. vel sit est aliquam consectetur in amet, viverra\n\n749Consectetur viverra enim amet, Mauris\n\n750Posuere ante elit. viverra sit et elit. amet, tortor semper quis, ligula nec efficitur orci\n\n751Enim ac adipiscing in sit condimentum dui tortor libero efficitur ipsum Vivamus elementum Duis ac\n\n752Primis massa, Integer finibus dui efficitur faucibus. velit.\n\n753Mauris in nunc adipiscing Interdum in, malesuada semper. fringilla fames elit.\n\n754Aliquam Fusce et nec massa, eget est et ut finibus ipsum sit\n\n755Ut tincidunt. ante efficitur elit. dolor pretium ac eget neque. pharetra rutrum et Interdum velit.\n\n756Semper. vel libero orci tincidunt. sem. pretium semper. dolor ac\n\n757Consectetur in\nLorem sagittis elit.\n\n758Orci, in Vivamus In ipsum ut velit. felis. in condimentum iaculis. ac\n\n759In, massa, ligula massa, consectetur sem. adipiscing enim et eget massa, viverra fringilla vel Integer\n\n760Fames ipsum Integer tincidunt. vitae Duis nunc Integer vel\n\n761Eget tortor in, consectetur pretium efficitur ipsum\n\n762Semper\nLorem ac vel viverra Mauris ac hendrerit ipsum metus Ut ipsum et efficitur\n\n763In, Ut et Fusce In ut Vivamus tincidunt. ac ipsum pretium faucibus. Vivamus\n\n764Interdum nec Mauris eget viverra tortor ac massa, quis, in\n\n765Ac ac ipsum Interdum orci, ac vel molestie eget\n\n766Metus ipsum eget ipsum nunc finibus felis. semper. elit. sem. ante\n\n767Nunc Interdum condimentum eget et iaculis. in massa ante ac elementum in ante et in\n\n768Est consectetur ut aliquam eget orci, Ut\n\n769Adipiscing fames efficitur\nLorem et\n\n770Tincidunt. velit. est in semper. in dui massa, dolor scelerisque sem. fames scelerisque posuere\n\n771Ut Mauris orci, in, massa Sed ac massa, pharetra amet, ac\n\n772Felis. ac amet, Sed fringilla in sem. in, bibendum,\n\n773Dolor ante libero consectetur rutrum in vitae tincidunt. et quis, rutrum volutpat est enim\n\n774Aliquam ac orci consectetur vel dolor sem. scelerisque consectetur Sed consectetur orci\n\n775Vivamus tortor In orci amet, pharetra ut\n\n776Sagittis elit. Integer malesuada felis. ac et primis malesuada hendrerit malesuada\n\n777Dui scelerisque orci dolor lorem quis, et In malesuada\n\n778Est dui Mauris in ante lorem dolor\n\n779Finibus Integer viverra purus eget ac massa, rutrum ut in, pharetra ac faucibus.\n\n780Dui ipsum orci velit. consectetur Ut purus ligula faucibus. et eget massa, ante vitae ac\n\n781Volutpat dolor ut elit. faucibus. fames libero iaculis.\n\n782Hendrerit orci posuere massa rutrum molestie ante orci condimentum\n\n783Quis, in ac in, eget in, pharetra\n\n784Mauris eget dui semper orci volutpat primis adipiscing ac sit ut consectetur et\n\n785Primis dolor sem. scelerisque primis primis ante ut Mauris pretium in fringilla molestie in elementum\n\n786Pretium volutpat elementum orci, molestie Fusce Sed\n\n787Aliquam Mauris dui viverra in\n\n788Elit. orci condimentum adipiscing neque. ac ipsum aliquam Interdum purus bibendum, elit. efficitur pretium semper\n\n789Est eget semper. neque. Vivamus vitae ac Integer rutrum tincidunt. amet, consectetur\n\n790Ante Fusce et Ut ut efficitur Sed scelerisque ipsum dolor nec\n\n791Viverra ac scelerisque in, ante faucibus. rutrum viverra aliquam rutrum orci bibendum, volutpat ac\n\n792Tincidunt. Interdum et Mauris malesuada malesuada Duis Duis pharetra in in,\n\n793Orci in elit. bibendum, nunc eget vitae consectetur ut Sed Sed condimentum\n\n794\nLorem in ante in neque. molestie\n\n795Iaculis. condimentum tincidunt. Duis scelerisque hendrerit ante ac ac\n\n796Vel dolor ante molestie libero iaculis.\n\n797Massa ipsum in orci, Sed\nLorem elementum Fusce finibus\n\n798Dolor in libero Mauris in massa, Ut fringilla ut\n\n799\nLorem ac in semper. libero scelerisque aliquam ligula orci\nLorem ac volutpat semper. pretium ac\n\n800Faucibus. orci, consectetur elementum sit ac purus eget lorem malesuada vel consectetur Mauris\n\n801Duis in Mauris orci, semper in Mauris elit. efficitur enim est\n\n802Vivamus semper. pharetra fames elit. primis elit. et bibendum, pharetra\n\n803Consectetur Fusce ut ligula sem.\n\n804Mauris rutrum in, ut ipsum In ipsum ac libero ante\n\n805Molestie\nLorem pretium amet, ut ac primis viverra ac pharetra eget purus ante ac\n\n806Tortor aliquam orci orci, Mauris purus ut et malesuada Integer finibus efficitur consectetur pretium eget\n\n807Sem. posuere In\nLorem efficitur velit. vel neque. consectetur aliquam semper.\n\n808Mauris sagittis faucibus. orci, ac Vivamus faucibus. Integer\n\n809Ut Interdum sem. efficitur massa semper. amet, ante ac Ut fringilla et ac hendrerit felis.\n\n810Ut in dui fringilla enim Integer est tincidunt. lorem\n\n811Viverra purus bibendum, finibus massa, pretium ac posuere\n\n812Ante faucibus. tortor dolor volutpat in fames quis,\n\n813Libero ante Ut ante quis, ut efficitur Integer felis. finibus ac primis nec\n\n814Metus ante dolor nec aliquam ac fringilla est sit Duis\n\n815Sem. malesuada tincidunt. pharetra in, nunc semper malesuada velit. Sed velit. orci,\n\n816Ipsum sagittis Interdum metus velit. primis molestie iaculis. Ut\n\n817Ante metus aliquam tortor Fusce\n\n818Vel pretium fringilla Sed nunc\n\n819Nec in, orci est Ut\nLorem in,\n\n820Felis. eget in massa hendrerit ac sit quis, ipsum Duis\n\n821Volutpat amet, ac rutrum scelerisque efficitur posuere vitae massa, purus In Interdum\n\n822Consectetur Vivamus orci sagittis tincidunt. rutrum scelerisque elementum posuere lorem primis in ipsum eget felis.\n\n823Semper. pharetra primis tincidunt. dolor ac et et\n\n824Mauris eget elit. velit. finibus ipsum condimentum eget adipiscing lorem molestie\n\n825Enim orci, quis, neque. lorem vitae in,\n\n826Metus ac posuere iaculis. pharetra\n\n827Ligula in malesuada condimentum lorem neque. condimentum in et ipsum posuere\n\n828Tincidunt. semper. bibendum, Sed tortor nunc posuere in\n\n829Tortor felis. ligula neque. ut in, bibendum, ac ut efficitur\n\n830Neque. nec sagittis elit. ipsum efficitur est felis.\n\n831Efficitur hendrerit hendrerit viverra ac dolor amet,\n\n832Finibus ante viverra elit. eget In libero\n\n833Ut in ut quis, iaculis. hendrerit Ut elit. malesuada condimentum Duis in Ut libero ipsum\n\n834Efficitur dolor scelerisque molestie volutpat efficitur ante in tortor Mauris lorem scelerisque purus\n\n835Semper. lorem ante in viverra in, dolor\n\n836Interdum Sed posuere sem.\nLorem ac adipiscing in\n\n837Faucibus. lorem bibendum, scelerisque ut nec elit. eget In dolor sit\n\n838Pretium sagittis fringilla ipsum libero neque. elementum viverra efficitur\n\n839\nLorem quis, et velit. Sed\n\n840Dolor malesuada hendrerit massa, amet,\n\n841Ac sit massa iaculis. vitae\n\n842Ut vel ac ante elit. ligula orci hendrerit posuere vel Fusce ante in amet, adipiscing\n\n843Lorem pharetra purus molestie sagittis fringilla massa tortor massa, sagittis orci,\n\n844In libero hendrerit massa iaculis. orci in, semper massa, ac ut\n\n845Pretium pharetra semper. in, pretium ipsum\n\n846Semper. semper dui ut malesuada finibus enim\n\n847Vivamus massa, eget Duis adipiscing fringilla\nLorem eget nunc scelerisque metus in Interdum semper.\n\n848Et elementum sem. vitae hendrerit ligula\n\n849Finibus Integer rutrum finibus tincidunt. eget Mauris consectetur sem. massa, et adipiscing efficitur ante adipiscing\n\n850Amet, semper efficitur Sed Interdum efficitur tortor adipiscing orci\n\n851Posuere neque. ac et quis, felis. ut finibus Sed neque. est massa\n\n852Consectetur efficitur tortor ligula in ut tortor scelerisque in semper elit.\n\n853Bibendum, in, pharetra felis. Sed metus consectetur velit. ac fringilla ac ante volutpat\n\n854Hendrerit primis est eget malesuada iaculis. sit tincidunt. eget Ut ante ac semper. molestie\n\n855Est elementum in Sed purus nunc et posuere ligula efficitur malesuada malesuada ac in massa\n\n856In et elementum consectetur Integer sagittis\n\n857Ante tortor sagittis in, Duis nec in, adipiscing molestie Duis bibendum, massa\n\n858Tortor ligula tortor est eget eget orci, est condimentum dui eget ipsum\n\n859Ut enim metus tincidunt. Fusce est iaculis.\n\n860Malesuada et quis,\nLorem volutpat\n\n861Ante libero ac ipsum sagittis ac semper efficitur\nLorem orci,\n\n862Vitae sagittis consectetur pretium primis et pretium ipsum eget iaculis. molestie elementum ligula\n\n863Dui bibendum, ac ac felis. metus\n\n864Eget enim iaculis. vitae pharetra bibendum, nec sagittis Mauris hendrerit molestie dolor\n\n865Ipsum Interdum sagittis Vivamus velit. felis. massa primis iaculis. volutpat libero Integer velit.\n\n866Pretium elit. Vivamus quis, ipsum tincidunt. consectetur enim\n\n867Iaculis. tincidunt. rutrum pretium felis. ac vitae adipiscing orci quis, hendrerit dui\n\n868Posuere aliquam sem. elementum sem. orci, elit.\n\n869Ac faucibus. ipsum in nec primis aliquam ut pharetra ipsum\n\n870Primis et ante efficitur consectetur ipsum ac elementum consectetur faucibus. orci\n\n871Felis. tortor Interdum efficitur metus Interdum\n\n872Elit. nec bibendum, dolor lorem Fusce\n\n873Nec sit semper fringilla metus Sed ut ac primis aliquam vitae primis Integer fames\n\n874Tincidunt. velit. sit ac Duis libero libero aliquam velit. viverra ac primis rutrum ac\n\n875Purus hendrerit ipsum efficitur est ante viverra elit. quis,\n\n876Iaculis. libero consectetur ligula ac orci,\n\n877In lorem ac Ut primis semper. in, In elementum Duis vitae\n\n878Ac fringilla ante massa, scelerisque adipiscing viverra Ut tincidunt. fames posuere\n\n879Orci, elit. elementum hendrerit Ut semper. eget eget In\n\n880Malesuada fames faucibus. sit massa amet, Fusce Fusce finibus est fringilla elit. est aliquam adipiscing\n\n881Vel Ut aliquam vitae eget ac tortor vitae malesuada in,\n\n882Enim eget tortor viverra bibendum, massa, libero ac Ut orci, elit.\n\n883Adipiscing rutrum Mauris enim viverra eget semper. orci, ac rutrum posuere finibus pharetra finibus\n\n884Eget massa in aliquam rutrum metus dui massa,\n\n885Ac tincidunt. aliquam ipsum efficitur enim amet, semper vitae et orci,\n\n886Posuere neque. Vivamus adipiscing vitae condimentum felis. Duis quis, tincidunt.\n\n887In amet, elit. ante elit. vel tortor Duis metus ipsum et\n\n888Ante posuere bibendum, elit. viverra Integer efficitur et aliquam Integer\n\n889In faucibus. Interdum elementum ac metus in neque. adipiscing Fusce lorem elit. efficitur\n\n890Rutrum ligula pretium condimentum Duis ante rutrum neque. tincidunt.\n\n891Sed ac Vivamus lorem ac ante metus\n\n892Ante fringilla enim ante vel ante eget nunc massa, et hendrerit ac\n\n893Hendrerit fringilla massa, tincidunt. vitae viverra finibus eget ac elementum viverra\n\n894Massa amet, efficitur Duis in, orci dolor pharetra semper. condimentum orci orci,\n\n895Tortor aliquam ante massa eget lorem ante est eget ac neque. eget dolor vitae iaculis.\n\n896Tincidunt. iaculis. elementum dui viverra aliquam metus consectetur aliquam sit ut pretium hendrerit ligula\n\n897Condimentum ante Sed nunc metus quis,\n\n898Integer est sem. massa, adipiscing ac quis, massa, ut massa, faucibus. elit.\n\n899Ut elementum ut amet, elementum Mauris\n\n900Ligula ac malesuada vitae consectetur ac ac faucibus. pharetra pretium iaculis. ut Fusce ac ante\n\n901Nec in, orci, ante Vivamus aliquam In amet, in, volutpat\nLorem sagittis sem.\n\n902Enim pretium ligula lorem elementum Vivamus sagittis ac\n\n903Fusce vel orci, Sed enim\n\n904In, sagittis amet, vitae adipiscing ac hendrerit orci, elit.\n\n905Libero tortor vitae semper. ac fringilla posuere neque. sagittis eget quis, elit.\n\n906Sagittis sit bibendum, neque. fames malesuada Interdum libero\n\n907In semper. nunc ac massa nunc lorem elementum dui ante neque. tortor et Vivamus adipiscing\n\n908Malesuada massa, eget ipsum nunc finibus ante sit orci\n\n909Tortor enim finibus aliquam hendrerit nunc et\n\n910Posuere nec ac in, sit ac finibus fames tincidunt. tortor aliquam ac amet, scelerisque viverra\n\n911\nLorem ac Duis orci, Ut fringilla posuere Fusce\n\n912Amet, consectetur fames Sed eget semper hendrerit ut ante in, neque. bibendum, volutpat sagittis\n\n913Primis in, Sed fringilla ipsum efficitur finibus Sed adipiscing ac semper elit. et\n\n914Sit Integer bibendum, fames fames sagittis felis. enim\n\n915In est fames felis. pharetra et Fusce posuere Ut Fusce\n\n916Malesuada In pretium lorem est ante semper. felis. amet,\n\n917Efficitur Vivamus In tincidunt. vitae ut Fusce\n\n918Fames sit amet, vitae volutpat\n\n919In ac ligula ac\nLorem pharetra Sed dolor scelerisque Integer consectetur\n\n920Enim molestie ut est tortor In ac adipiscing scelerisque vitae elementum Mauris in\n\n921Et hendrerit Fusce in, sit\n\n922Vitae semper ac sagittis faucibus. viverra eget hendrerit molestie\n\n923Et dolor ac enim eget eget enim ante Mauris libero amet,\n\n924Vel et In Duis finibus\n\n925Ac in felis. nec sagittis vitae Sed libero finibus orci,\n\n926In in Integer massa, finibus\n\n927Ut volutpat elit. hendrerit tortor Interdum massa, in, semper. Duis eget ante massa ac efficitur\n\n928Primis sagittis bibendum, ac condimentum metus tincidunt. eget felis. et in Interdum neque. ipsum ligula\n\n929Bibendum, In iaculis. consectetur velit.\n\n930Ipsum hendrerit orci fames efficitur finibus dolor pretium est malesuada Fusce\n\n931Primis ut Integer hendrerit felis. hendrerit semper semper dolor\n\n932Vivamus Interdum Sed rutrum vitae ipsum\n\n933Ipsum amet, enim purus ligula primis eget consectetur massa fames rutrum\n\n934Pretium est tortor purus massa consectetur sem. Interdum eget elit. tincidunt. Fusce nec\n\n935Neque. malesuada Mauris condimentum ipsum iaculis. felis. amet, ante et sit Duis\n\n936Elit. tortor semper. scelerisque faucibus. ante elit.\n\n937Felis. nec ante scelerisque Ut vitae volutpat dolor elit. lorem\n\n938Volutpat sagittis et ante iaculis. ac\n\n939Ligula enim aliquam bibendum, felis. Ut\n\n940Sem. felis. elit. ut in,\n\n941Finibus fames efficitur quis, sagittis\n\n942In amet, nunc consectetur scelerisque fringilla vel\n\n943Iaculis. Integer neque. pharetra Mauris aliquam nec nec quis, semper. Integer ac dolor ac orci\n\n944Eget dolor pharetra velit. elit. pretium ipsum enim enim vitae finibus ante quis, nec\n\n945Tincidunt. vitae in, molestie tincidunt. efficitur pharetra in finibus sagittis fames dui et\n\n946Molestie scelerisque volutpat faucibus. tortor semper aliquam tortor semper massa consectetur\n\n947Ligula ante libero nunc et finibus amet, ipsum orci, ante dui viverra finibus\n\n948Integer libero elementum vel fames sit in fringilla Integer massa, ut rutrum sit consectetur\n\n949Duis dolor viverra ipsum ac semper dui Mauris\n\n950Efficitur elit. massa, massa Integer est orci in finibus\n\n951Sem. ac pharetra nunc purus viverra purus in\n\n952Volutpat iaculis. rutrum in purus efficitur Mauris\n\n953Duis pharetra Mauris volutpat faucibus. orci, ac ante malesuada ligula faucibus. ipsum efficitur\n\n954Primis ac vel est pretium\n\n955Velit. in ut sem. pretium orci, ligula sagittis pretium\n\n956Dolor quis, sit massa ipsum bibendum, condimentum\n\n957In consectetur et Fusce rutrum malesuada consectetur nec in malesuada eget efficitur felis. ante\n\n958In in malesuada volutpat semper hendrerit Interdum\n\n959Efficitur quis, scelerisque fringilla ipsum sagittis massa Vivamus ipsum ac dui\n\n960Ante sagittis in enim faucibus. elementum enim fringilla efficitur vitae orci\n\n961Iaculis. Vivamus elit. efficitur orci, dolor fringilla adipiscing volutpat\nLorem ac ipsum volutpat et\n\n962Ipsum neque. Duis amet, in dolor sem. viverra pharetra felis. volutpat elit. ante velit. eget\n\n963In, in condimentum ac quis,\n\n964Libero tortor viverra eget scelerisque Interdum consectetur\n\n965Vitae bibendum, Fusce iaculis. nunc in primis in quis, adipiscing nunc aliquam vel orci\n\n966Orci, faucibus. sem. neque. sem.\n\n967Vel Mauris elit. ante semper. Duis semper.\n\n968Finibus\nLorem massa, finibus fringilla faucibus. ante iaculis.\n\n969Faucibus. semper elementum et ac ac ac velit. et\n\n970Ac et metus faucibus. eget eget bibendum, purus semper dui Interdum efficitur orci\n\n971Enim semper. fringilla ipsum ut efficitur orci, dolor\n\n972Dolor sit molestie semper fringilla Integer hendrerit semper. semper. dui ipsum elementum\nLorem in, malesuada\n\n973Ipsum volutpat neque. malesuada lorem neque. velit. finibus efficitur\n\n974Malesuada volutpat neque. ligula efficitur\n\n975Hendrerit elit. efficitur amet, Interdum felis. ac nunc quis,\n\n976Primis efficitur malesuada sagittis condimentum primis Integer ut et semper In volutpat posuere ipsum\n\n977Eget efficitur condimentum pharetra massa ligula elit. volutpat dui Fusce Mauris in est ante volutpat\n\n978Ante iaculis. volutpat fringilla tortor ac ac semper. Duis velit.\n\n979Fusce ante primis vitae\nLorem Integer pretium et ut ut consectetur fames Integer nec\n\n980Consectetur velit. ut finibus ante massa nec molestie lorem\n\n981\nLorem eget neque. massa ante\nLorem Duis libero Fusce Mauris\n\n982Sem. finibus Fusce in eget et lorem finibus\n\n983Ligula Fusce neque. fringilla fringilla felis. faucibus. pretium semper. Integer finibus in\n\n984Condimentum Mauris semper. primis consectetur Duis fringilla massa ac consectetur in molestie\n\n985Ut Interdum sem. Duis eget aliquam et Fusce massa ac ut finibus Interdum finibus\n\n986Mauris faucibus. ante tincidunt.\nLorem ac vel Mauris malesuada efficitur et Ut\n\n987In Integer sit ac et scelerisque\n\n988Adipiscing scelerisque dolor pharetra posuere velit. et Integer sem. viverra elementum eget orci,\n\n989Faucibus. ac viverra viverra massa, viverra ac in enim vitae vel\n\n990Posuere finibus neque. Sed elit. eget Duis nec in, consectetur In velit. scelerisque Duis\n\n991Efficitur purus sit quis, Vivamus dolor aliquam ipsum lorem\n\n992Rutrum In scelerisque Mauris efficitur malesuada\n\n993Vitae hendrerit vel faucibus. metus et libero\n\n994Mauris posuere ut ante tortor eget viverra ut bibendum, ut ipsum\n\n995Interdum neque. fames lorem malesuada eget velit. pretium Vivamus quis, ut efficitur tincidunt. elit. viverra\n\n996Consectetur ac et tortor dui fames Sed sem. elit. eget In dolor\n\n997Rutrum dui consectetur malesuada scelerisque malesuada bibendum, massa vitae massa,\n\n998Dolor in pretium sagittis Integer ac bibendum, dolor et faucibus. pretium\n\n999Semper posuere eget semper. in ipsum scelerisque et rutrum\n\n1000Efficitur dolor ipsum fames condimentum Sed eget ut semper eget fames nunc condimentum primis amet,\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\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 | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\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| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |",
+    "searchText": "Dropdowns\nWrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.\nDropdowns\nButtonDropdown\nSimpleButtonDropdown\n\nSingleButtonDropdown\n\nWrapper component for ButtonDropdown, kept for backwards compatibility.\n\nSplitButtonDropdown\n\nWrapper component for ButtonDropdown where prop \"splitButton\" is set automatically.\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 / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\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 | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\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| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nSingleButtonDropdown\nSplitButton\n\nSplitButton ButtonDropdown\nDropdownSubmenu\nNormal ButtonDropdown\nnoCaret ButtonDropdown\nSplitButton ButtonDropdown\n\nNormal ButtonDropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | String / Node | \"\" | Displayed button title. |\n| items | Array of Objects | [] | Details see above for the ButtonDropdown |\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 / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\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 | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\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| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\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 / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\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 | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\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| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nLarge amount of dropdowns in a list or table\nIDContentAction\n\n1Duis efficitur felis. Mauris Sed Vivamus elementum sit tortor purus et\n\n2Pharetra et posuere Mauris massa,\n\n3Eget est metus elit. felis. bibendum, nunc orci, vel iaculis. orci semper.\n\n4Bibendum, enim massa consectetur primis in dui nec dolor purus ante aliquam dolor\n\n5Orci, enim consectetur felis. vel dui Sed\n\n6Orci ipsum Integer sagittis in\n\n7Sit ipsum scelerisque posuere malesuada Interdum fames consectetur Duis sagittis dolor\n\n8Efficitur Ut consectetur ligula purus tincidunt. elit. vel\n\n9Fringilla volutpat eget sem. efficitur vel rutrum iaculis. nec orci, neque. felis. malesuada ac ante\n\n10Tincidunt. consectetur ac adipiscing sem. in, ac ipsum neque. metus\n\n11\nLorem efficitur ac hendrerit in eget Mauris finibus velit. elit. primis Mauris pretium Integer efficitur\n\n12Ipsum est lorem tincidunt. vel vel enim molestie sit semper consectetur et\n\n13In, sagittis ac metus\nLorem iaculis. aliquam\n\n14Fringilla lorem\nLorem adipiscing in, Vivamus\n\n15Mauris semper volutpat faucibus. ut quis,\n\n16In elementum orci orci, faucibus. purus eget iaculis.\n\n17Lorem fames purus ipsum dolor vel et ac\n\n18Semper orci orci, ipsum est ipsum\n\n19Aliquam bibendum, et in, ante fames rutrum quis, molestie volutpat massa, semper\n\n20Rutrum fames posuere purus\nLorem ante ut\n\n21Semper. fames pretium neque. Sed fames quis, in, consectetur\n\n22Massa, ante est ligula efficitur iaculis. ut quis,\n\n23Felis. elit. ut dolor consectetur purus massa et consectetur orci, ac Mauris primis Mauris\n\n24Dolor ante ante vitae in,\n\n25Nunc ante sit ac efficitur In consectetur Sed semper vitae fringilla\n\n26\nLorem Mauris enim Mauris In amet,\n\n27In velit. amet, fames condimentum sem.\n\n28Sagittis elit. ac ipsum finibus ut orci\n\n29Ante pretium orci ac eget vitae in tincidunt. consectetur in\n\n30Vitae aliquam ligula iaculis. amet, nunc Ut iaculis. fringilla bibendum, elementum\n\n31Iaculis. nec neque. molestie In semper In volutpat dui libero consectetur ac ac\n\n32Sem. vel molestie nunc purus semper vitae orci ipsum faucibus. in, ante rutrum\n\n33Ut ac fringilla orci ac primis fringilla\n\n34Eget eget ante Ut enim nunc amet, purus efficitur ac sem. ante condimentum\n\n35Tortor fames consectetur ac fringilla elementum ac pretium felis. in condimentum vitae massa\n\n36Quis, et in pharetra fames nec orci,\n\n37Posuere quis, rutrum sagittis et hendrerit Interdum adipiscing ipsum velit. ipsum tincidunt.\n\n38\nLorem et nunc Interdum Ut Vivamus Interdum et rutrum in molestie Ut ipsum\n\n39Ante tortor eget velit. malesuada pretium consectetur elementum lorem ante lorem felis. ante quis, Integer\n\n40Condimentum ac posuere consectetur felis. Mauris nec Ut\n\n41Aliquam eget vitae efficitur Fusce orci sit elit. eget primis amet, eget tortor Sed\n\n42Ante ac in, tincidunt. viverra ipsum tortor est In dui lorem Vivamus orci, molestie\n\n43Ac dui fames\nLorem et\nLorem aliquam primis in ac sit\n\n44Consectetur malesuada orci, Duis ipsum felis. Ut et enim consectetur metus Vivamus ipsum\n\n45Fames malesuada sit nec dolor In orci vel Interdum metus in semper. consectetur\n\n46Lorem nunc efficitur dolor elementum ac ante amet, aliquam ligula et hendrerit velit.\n\n47Massa Interdum est pretium Interdum in adipiscing hendrerit consectetur iaculis. pharetra\n\n48Primis elementum aliquam vitae Ut Fusce Duis\n\n49Lorem in, consectetur elit. lorem massa, faucibus.\n\n50Pretium in, consectetur posuere tortor ut\n\n51In vitae purus ac pretium molestie ante ante ac eget iaculis. eget\n\n52Pharetra semper Mauris est finibus semper. eget massa, sit massa elit. Interdum tincidunt. Mauris\n\n53Eget Integer nunc metus ac Interdum vel ac fringilla consectetur\n\n54Enim ac libero molestie In\n\n55Consectetur est amet, massa, eget viverra pharetra ac in tincidunt. massa\n\n56Efficitur lorem elit. bibendum, neque. ac\n\n57Aliquam dui rutrum iaculis. sem.\n\n58Consectetur Ut eget est Fusce pretium hendrerit nunc purus Fusce Duis\n\n59Interdum adipiscing efficitur libero Interdum eget neque. ut purus in finibus ut eget\n\n60Efficitur nunc Ut aliquam finibus malesuada massa, nec ut tortor dolor libero In metus scelerisque\n\n61Et tortor Vivamus faucibus. eget dolor efficitur dui in\n\n62Consectetur Vivamus faucibus. velit. in Ut ac in et orci fames\n\n63Ac Duis Mauris primis in enim scelerisque efficitur\n\n64Adipiscing molestie neque. ac ante ante consectetur ac ipsum In metus\n\n65Condimentum orci, Duis Integer purus sagittis\n\n66Purus finibus pharetra vitae semper in ipsum scelerisque nunc finibus amet, volutpat enim\n\n67Elit. purus massa, velit. Ut bibendum, sem. hendrerit nec velit. Integer metus\n\n68Sed vitae massa efficitur condimentum Mauris quis,\n\n69Libero est neque. scelerisque sagittis massa, metus nec velit. ligula et ante\n\n70Pharetra Ut et vel molestie Fusce orci\n\n71Fusce tincidunt. Ut massa fames ut elit.\n\n72Faucibus. aliquam nec primis vitae condimentum in in Ut molestie\n\n73Duis est eget metus semper. molestie dui semper\n\n74Posuere posuere molestie velit. metus fames ac semper vel et eget Vivamus nec faucibus.\n\n75Massa, ac posuere nec ipsum eget pharetra dolor\nLorem sit efficitur ut tincidunt.\n\n76Efficitur semper tincidunt. hendrerit ac dui finibus condimentum\n\n77Ac condimentum scelerisque sem. ipsum dui\n\n78Orci in, pretium ante molestie posuere tincidunt. elit.\n\n79Interdum Duis Integer pharetra felis. metus Vivamus tincidunt. elementum Vivamus viverra molestie efficitur\n\n80Posuere condimentum et fames est semper. fringilla aliquam elementum vitae in, et Sed\n\n81Elit. adipiscing condimentum ipsum et sagittis enim metus efficitur pharetra Ut\n\n82In ligula in primis nunc Sed adipiscing semper In faucibus. purus molestie molestie elit. iaculis.\n\n83Consectetur vel orci bibendum, ipsum consectetur semper consectetur Duis\n\n84Neque. Fusce in faucibus. condimentum rutrum fames lorem ac ipsum metus et ut dolor\n\n85Elit. eget efficitur bibendum, ut malesuada aliquam In condimentum purus\n\n86Duis est efficitur dolor rutrum elit. neque. scelerisque ligula nunc ante\n\n87Et ante tincidunt. vitae consectetur ut posuere eget efficitur in ac aliquam\n\n88Velit. neque. Integer vel nec in in Ut Integer massa sit\n\n89Malesuada sagittis volutpat felis. Fusce felis. Vivamus\n\n90Massa, elementum et semper ac bibendum, tincidunt. ipsum\n\n91Condimentum ante purus ante sit Mauris ante in semper. nunc Sed nec et enim in,\n\n92Vitae amet, amet, consectetur orci, tortor lorem ac malesuada Sed\n\n93Elementum hendrerit Ut consectetur finibus ante efficitur hendrerit in consectetur condimentum\n\n94Amet, ipsum ac malesuada in Interdum efficitur semper\n\n95Sed fames ipsum metus sagittis fringilla dui sagittis condimentum ac\n\n96Dolor molestie molestie efficitur viverra\n\n97Ipsum purus eget In metus fames ac\nLorem Duis Vivamus ac Duis neque. enim\n\n98Sit consectetur est ut iaculis. velit. quis, felis. nunc fringilla ante purus\n\n99Consectetur purus Integer tortor posuere consectetur pretium pretium ut dui\n\n100Nunc velit. primis Sed eget Ut\n\n101Libero ut in elementum ante orci, elit. pharetra\n\n102Quis, eget fringilla in, Mauris ut ac ac faucibus. ac orci neque.\n\n103Interdum eget posuere orci, in tortor et volutpat\nLorem Integer purus tincidunt.\n\n104Dui Interdum pharetra libero efficitur aliquam Ut efficitur Vivamus enim semper orci,\n\n105Hendrerit faucibus. ac aliquam orci massa est\n\n106Enim est elit. Duis pretium nec ac malesuada\n\n107Felis. ac Sed et elementum vitae Vivamus tincidunt. est Vivamus amet, orci,\n\n108In vitae et massa ac massa, metus ante elit. ipsum finibus\n\n109Semper eget dolor in, felis. Ut in consectetur elit. sem. adipiscing est libero ipsum ipsum\n\n110Orci, Mauris metus fringilla finibus Vivamus posuere aliquam sagittis hendrerit bibendum, posuere nunc vitae\n\n111In, condimentum ut adipiscing in efficitur scelerisque posuere faucibus. dui sem. in efficitur faucibus.\n\n112Ut ut Integer eget Vivamus rutrum posuere\n\n113Ut ac Interdum pharetra neque. molestie ante hendrerit semper.\n\n114Vitae massa, In ipsum sagittis vitae scelerisque lorem\n\n115Pretium malesuada fringilla elit. in finibus semper. faucibus.\n\n116Consectetur est vitae fames fames\n\n117In pharetra elit. sit aliquam scelerisque\n\n118Quis, sagittis condimentum fringilla faucibus. elit. ac semper. hendrerit\nLorem finibus elit. ante molestie ac\n\n119Ante In ac neque. dolor Mauris ante Fusce consectetur rutrum Interdum sagittis Integer consectetur ut\n\n120Consectetur bibendum, bibendum, ac pharetra elementum\n\n121In hendrerit ac sagittis quis, elementum nunc lorem fringilla elit. Duis orci, faucibus. eget semper.\n\n122Felis. Fusce Fusce primis felis. malesuada ac massa volutpat ut semper. viverra ante elit. ante\n\n123Fusce purus ante viverra condimentum In ante ac molestie Integer\n\n124Vivamus lorem nunc volutpat orci, Mauris ipsum eget vel dui quis,\n\n125Vitae Vivamus sagittis adipiscing metus consectetur tortor dui metus\n\n126Nec ipsum enim sem. et consectetur eget massa, nec ac tincidunt. elit. in, in\n\n127Vel sit tortor massa primis ac malesuada\n\n128Volutpat ut in neque. massa,\n\n129Viverra nunc tincidunt. consectetur amet, efficitur et amet, finibus massa pretium sagittis ipsum\n\n130Finibus bibendum, ligula consectetur hendrerit aliquam\n\n131Massa ipsum Mauris consectetur scelerisque Vivamus semper massa consectetur ac ligula ligula\n\n132Ante orci ipsum primis fames ac molestie ut pretium finibus felis.\n\n133Sed Sed\nLorem fringilla consectetur velit. efficitur est ac eget consectetur neque.\n\n134Vitae iaculis. ante eget massa, faucibus. orci primis dui primis aliquam faucibus.\n\n135Tortor aliquam consectetur lorem malesuada Duis pharetra velit. ac ante molestie\n\n136Et In eget volutpat ac elit. posuere elit.\n\n137Consectetur vitae primis molestie scelerisque molestie\n\n138Ipsum ac eget felis. orci in pharetra ac ante iaculis. vel\n\n139Neque. et est in ac Mauris In velit. volutpat pharetra\n\n140Fringilla fames enim volutpat lorem massa, rutrum enim pharetra\nLorem semper. quis, condimentum fames massa,\n\n141Sed Vivamus semper ante massa, in, malesuada fames hendrerit orci metus Integer ac\n\n142\nLorem ac eget condimentum faucibus. metus primis ac purus nec iaculis. eget sem.\n\n143Massa, ut viverra In et Integer consectetur purus Mauris orci, tortor libero sem.\n\n144Enim consectetur Ut dolor ante pharetra nec finibus elit. ac ante Duis finibus quis,\n\n145Malesuada ac enim quis, Sed\n\n146Semper. iaculis. volutpat sit sem. dolor viverra vitae quis, eget vitae rutrum sagittis\n\n147Primis ipsum felis. sagittis primis\n\n148In, enim lorem lorem faucibus. elementum tincidunt. Sed metus orci ante ut semper. tincidunt.\n\n149Ante fringilla aliquam sit ac molestie Mauris posuere adipiscing ac finibus semper. ipsum\n\n150Massa, ante adipiscing sem. efficitur et ac in est\n\n151Elementum eget semper. sagittis in, in in, Duis iaculis. rutrum efficitur\n\n152In pharetra ante felis. purus\n\n153Dui Fusce elit. molestie\nLorem malesuada eget aliquam vel in, semper\n\n154Mauris Integer Integer semper. hendrerit enim condimentum posuere\n\n155Mauris fringilla dolor velit. tortor metus scelerisque libero\n\n156Sem. est neque. hendrerit volutpat aliquam efficitur iaculis. ac\n\n157Hendrerit dolor ante viverra velit. ac consectetur hendrerit elementum posuere sem. bibendum, scelerisque\n\n158Sem. ac elit. sit tincidunt. pharetra\n\n159Finibus volutpat eget adipiscing consectetur faucibus.\n\n160Ac Vivamus rutrum tortor consectetur malesuada nunc\n\n161Adipiscing faucibus. Sed In fames ante pretium velit. ut purus massa\n\n162Ut consectetur ut malesuada adipiscing efficitur massa\n\n163In pretium amet, bibendum, ut iaculis. adipiscing in ac hendrerit semper ante Integer\n\n164In fames elit. enim elementum sit purus Integer Vivamus finibus vitae eget\n\n165Interdum iaculis. ut dui ante ut nec amet, condimentum\n\n166Nec Fusce semper. metus fames ipsum in tincidunt. et scelerisque in\n\n167Amet, ante et finibus nunc in Integer felis. massa, massa, bibendum, faucibus. massa, in et\n\n168Consectetur viverra malesuada libero et semper\n\n169Dolor Mauris iaculis. amet, in iaculis. et dolor aliquam metus est orci neque.\n\n170Ac elit. consectetur libero vel malesuada In ut\n\n171Semper. Interdum malesuada Sed eget elementum primis vel Fusce\n\n172Quis, massa ante consectetur ante dui elit. iaculis. fames ac aliquam\n\n173Metus sagittis efficitur In felis. rutrum ante\n\n174Vivamus elit. eget nec ipsum scelerisque aliquam quis, et orci, semper elit.\n\n175Aliquam enim fringilla felis. efficitur nec finibus tincidunt. et Integer ut enim quis,\n\n176Fames Interdum massa elit. elementum amet, Sed semper quis, molestie consectetur ante sit orci,\n\n177Eget ante libero metus hendrerit hendrerit Vivamus scelerisque felis. volutpat ac et efficitur consectetur\n\n178Sed ipsum condimentum tortor molestie eget Vivamus ut hendrerit molestie\n\n179Semper. ac nunc Duis ut in\n\n180Eget bibendum, ligula enim dui velit. bibendum, sagittis aliquam ipsum\n\n181Est massa, Fusce dolor ac amet,\n\n182Orci, nec condimentum libero condimentum elit. sem. velit. in Ut hendrerit\n\n183Ante purus semper. massa neque. efficitur et neque. Sed fringilla eget elementum efficitur finibus Sed\n\n184Viverra quis, scelerisque eget consectetur semper in,\n\n185Metus quis, lorem ipsum ante consectetur ac\n\n186Fusce efficitur pretium enim In ut massa\n\n187Semper. nec vel Fusce eget massa, felis. velit. consectetur fringilla\n\n188Ipsum aliquam in, nunc ipsum in, libero consectetur eget\n\n189Tortor in orci viverra tincidunt. in rutrum primis eget efficitur\n\n190Volutpat dui scelerisque in Fusce\n\n191Purus Integer In dolor nec ut ante Duis ante molestie ante ipsum consectetur fringilla\n\n192Ligula Ut Fusce orci molestie malesuada tortor\n\n193Vivamus in nunc consectetur vitae Mauris semper in fringilla nunc Duis iaculis. sem. eget\n\n194Velit. sem. ipsum nec lorem metus volutpat ante amet, dui et\n\n195Est primis bibendum, fames consectetur vel volutpat rutrum dolor vel\n\n196Ac Sed massa in, pretium enim tincidunt. Integer Sed\n\n197Est ligula Sed orci, ac elit. molestie Interdum tincidunt. ac ac primis\n\n198Amet, velit. ante felis. velit. condimentum ut in elementum Ut dolor bibendum, Vivamus iaculis. enim\n\n199Dolor lorem neque. adipiscing bibendum, hendrerit ac felis.\n\n200Et Duis felis. ante amet, molestie\n\n201Molestie ac molestie nunc molestie bibendum, nunc\n\n202Iaculis. eget elit. hendrerit libero massa, In ut semper. condimentum felis. aliquam elit.\n\n203Volutpat molestie velit. et nunc fringilla et elit. in libero consectetur purus Duis eget finibus\n\n204Posuere dui massa, semper. rutrum\n\n205Ac ut massa lorem in, efficitur quis,\n\n206Condimentum Sed orci consectetur Integer bibendum, Vivamus metus vitae pretium scelerisque Fusce ligula adipiscing\n\n207Purus In iaculis. malesuada in Sed molestie Vivamus consectetur consectetur Interdum in, semper. faucibus. orci\n\n208\nLorem tortor et dui bibendum, consectetur malesuada ac ac massa et\n\n209Ut bibendum, quis, lorem velit. lorem enim\n\n210Pretium ut amet, In bibendum, ut Mauris primis aliquam pretium orci dui\n\n211Ante orci fames eget bibendum, Duis et\n\n212Sem. dui efficitur eget tincidunt. finibus viverra eget orci ligula ante Vivamus faucibus. tincidunt.\n\n213Eget et ante condimentum Fusce molestie semper. condimentum condimentum vitae condimentum\n\n214Condimentum tortor vitae Interdum nunc elit. Integer posuere lorem\n\n215Tortor libero Interdum ante lorem faucibus. consectetur ipsum vitae eget sit Ut ante ante enim\n\n216Iaculis. In efficitur efficitur fringilla elementum\n\n217Ac efficitur felis. posuere Ut ante finibus elit. ante condimentum quis, scelerisque est\n\n218Ut viverra elementum elit. nec In Sed iaculis. dui\nLorem libero tincidunt. efficitur primis\n\n219In ac Vivamus nunc eget condimentum Ut in bibendum, posuere in Ut amet, ac metus\n\n220Sem. ipsum in aliquam condimentum nec in ac ut Fusce\n\n221Ac lorem adipiscing adipiscing Integer Fusce primis enim Sed ante\n\n222Velit. libero in est rutrum elit. In amet, Sed ac\n\n223In faucibus. orci ante eget In sit et sagittis\n\n224Metus eget tortor quis, est dui Mauris ipsum\n\n225Pharetra sem. ac tincidunt. scelerisque fringilla metus Mauris Fusce ipsum ac eget fringilla\n\n226Quis, massa sem. eget aliquam in\n\n227Pharetra ut dolor eget Mauris Ut vel amet, Integer consectetur molestie purus\n\n228Semper sagittis efficitur\nLorem eget aliquam\n\n229Pharetra dui et viverra rutrum\nLorem elementum ac sem. dui ligula sit fringilla sagittis\n\n230Ut elit. elit. sit dui Ut sit consectetur Ut posuere ac volutpat\n\n231Molestie Mauris primis in, et faucibus.\n\n232Consectetur in, Sed amet, tincidunt. neque. ipsum bibendum,\n\n233Orci, in et felis. ligula ut rutrum bibendum, Duis scelerisque in\n\n234In est elit. Fusce fames felis. pharetra enim\n\n235Sem. nunc Vivamus ac volutpat sem. in, lorem massa posuere\n\n236Est velit. sagittis pretium efficitur enim eget faucibus. Mauris\n\n237Orci, viverra in viverra sagittis vitae Ut hendrerit faucibus. ac bibendum, malesuada\n\n238Semper. neque. scelerisque In tortor ante semper. molestie bibendum, Interdum elementum efficitur fringilla fames\n\n239Hendrerit amet, Integer pharetra ac condimentum Mauris\n\n240In fames eget neque. massa iaculis. bibendum, in et in, est dolor ac\n\n241Rutrum ante massa ipsum massa pharetra ante massa, lorem ante purus sit primis ac\n\n242Ligula faucibus. dui ipsum ante efficitur dolor efficitur primis ac semper. in, velit.\n\n243Primis Interdum pharetra semper neque. scelerisque primis purus metus fringilla consectetur\n\n244Amet, Sed sit pharetra elementum pharetra ante libero sagittis in, viverra in\n\n245Fames ut lorem fames ac neque. neque. massa,\nLorem vitae\n\n246Enim tortor est Interdum ac ante elementum dui ipsum Sed Ut massa,\n\n247Nec aliquam et Vivamus semper. hendrerit vel ac In ante pretium tortor orci, massa,\n\n248Sed nec consectetur ut elit. consectetur dui In\n\n249Duis consectetur Ut nunc est tortor efficitur elit.\n\n250Sit in eget et tortor fames\n\n251In viverra felis. tortor malesuada semper elementum rutrum in\n\n252Fringilla nec orci, purus ut ante in, amet, orci,\nLorem efficitur fames ut\n\n253Ut iaculis. ipsum enim\nLorem ac orci, sem. metus finibus in, Duis\n\n254In ante iaculis. et massa eget condimentum ligula bibendum,\n\n255Interdum molestie felis. adipiscing vel\n\n256Malesuada sem. Vivamus dui semper.\n\n257Pharetra ante consectetur volutpat et dolor eget Ut lorem viverra ac\n\n258Pretium bibendum, bibendum, dui sagittis Vivamus molestie ac purus elementum et\n\n259Ante ligula Vivamus Mauris ut Duis adipiscing\n\n260Sed efficitur ac ac in,\n\n261Nunc sem. primis posuere Fusce ac in iaculis. ante vel Duis dolor semper. efficitur\n\n262Vivamus Vivamus rutrum elementum bibendum, enim consectetur posuere viverra in dolor et consectetur consectetur\n\n263Orci viverra massa orci, ut\n\n264Lorem posuere dolor tincidunt. viverra eget tortor primis ante\n\n265Fusce Duis fringilla enim in nunc scelerisque sagittis libero est est\n\n266Efficitur Fusce ante Mauris ac enim efficitur eget bibendum, Duis neque. viverra molestie iaculis. malesuada\n\n267Iaculis. est molestie ipsum ac ligula ante sem. posuere\n\n268Et Sed velit. ante vitae aliquam dui ac aliquam eget Ut libero semper.\n\n269Bibendum, eget dui tincidunt. semper. semper pretium aliquam vel iaculis. ipsum lorem semper\n\n270Ac massa sagittis eget libero pretium eget ut enim libero eget\n\n271Ut ut ante In adipiscing et ante\nLorem ac dui ac\n\n272Pretium faucibus. volutpat velit. bibendum, neque. ut semper in, finibus sagittis pretium ac\n\n273\nLorem ut volutpat ipsum amet, libero dui Sed\n\n274Velit. sagittis ac\nLorem faucibus. ipsum nunc\n\n275\nLorem elit. massa semper finibus ut tincidunt. Interdum\n\n276Dolor finibus sagittis eget ac ac Vivamus ligula In Interdum consectetur eget enim\n\n277Nunc orci vitae sem. vitae semper. in\nLorem adipiscing dui\n\n278Faucibus. Mauris ut fringilla in adipiscing\n\n279Rutrum\nLorem elit. sem. iaculis. consectetur\n\n280Rutrum viverra efficitur Sed pharetra in, orci libero viverra Vivamus\n\n281Posuere ut neque. neque. in consectetur ante\n\n282Metus ac Integer posuere sagittis ipsum primis eget ac ac pharetra purus\n\n283Nunc nunc ante ante elementum quis, dolor consectetur Fusce in\n\n284Lorem in Interdum tortor orci, enim\n\n285Massa aliquam orci Fusce efficitur elit. et nunc malesuada ac Duis volutpat\n\n286Eget efficitur scelerisque tortor metus finibus iaculis. tortor viverra nunc pretium\n\n287Iaculis. ac ante nec ante volutpat purus iaculis. efficitur fames aliquam ipsum molestie consectetur\n\n288Pretium faucibus. vitae ac semper. volutpat in faucibus. ante volutpat efficitur faucibus.\n\n289Pretium elit. purus Vivamus rutrum elementum Vivamus ligula ac metus Fusce finibus\n\n290Ac purus posuere fames elit. Integer ante aliquam in\n\n291In semper condimentum bibendum, ac massa, orci consectetur et velit. quis, iaculis. bibendum, ipsum\n\n292Consectetur ut consectetur posuere dolor sagittis massa, semper\n\n293Pretium hendrerit orci, Ut ac tincidunt. elit. iaculis. elementum pretium elementum semper.\n\n294Scelerisque pretium dui dolor in malesuada in primis iaculis. consectetur ac\n\n295Metus orci iaculis. viverra Duis semper. fames iaculis.\n\n296Molestie elit. et eget Fusce\n\n297Purus tincidunt. Ut dolor viverra molestie consectetur massa\n\n298Massa ligula massa, ligula In enim iaculis. Mauris\n\n299Lorem nunc in ac dui in elit.\n\n300Ipsum pharetra ante aliquam elit. amet, efficitur iaculis. amet, ac et\n\n301Nec tincidunt. vitae ante molestie iaculis. ligula molestie pharetra vitae in ac est ipsum iaculis.\n\n302In in semper. Sed nunc enim Vivamus neque. Duis est\n\n303Massa purus et Duis condimentum\nLorem libero In metus sagittis vel sit Fusce\n\n304Ac est semper. scelerisque amet, eget vitae Duis vel tortor eget\n\n305Elit. dolor sem. nunc vel nunc\n\n306Molestie dui velit. Vivamus in sem. velit. massa, fringilla semper. eget elit. libero lorem\n\n307Sit Mauris consectetur posuere ligula vitae Vivamus\n\n308Et sit efficitur malesuada purus nunc\nLorem ante finibus viverra ante aliquam scelerisque\n\n309Eget posuere orci orci, fringilla quis, vitae orci nec neque. pharetra\n\n310Malesuada Ut vel et eget aliquam dui\n\n311Vitae semper in ut sagittis In ac elit. efficitur ac consectetur massa,\n\n312Malesuada In rutrum malesuada Fusce elit. In amet, condimentum Integer neque. tincidunt. Ut\n\n313Velit. felis. nec aliquam adipiscing amet, et\n\n314Ut Ut et Duis vel molestie volutpat ipsum\n\n315Metus tincidunt. posuere viverra condimentum massa, ac elementum in felis. Integer\n\n316Primis amet, metus vel ante orci Integer Vivamus fringilla enim\n\n317Velit. felis. ipsum elit. ante orci rutrum massa, vitae sagittis finibus\n\n318Fringilla dui consectetur volutpat ut purus finibus massa,\n\n319Ante ante finibus sem. ligula vitae Interdum rutrum felis. dolor\n\n320Ante scelerisque quis, pharetra sem. massa, bibendum, ante elit. vitae ante lorem\n\n321Sit posuere finibus Sed adipiscing fringilla purus pretium elit. neque. pharetra felis. lorem\n\n322Velit. elit. nunc faucibus. in, Duis orci, volutpat ipsum felis. velit. nec\n\n323Ac nec condimentum bibendum, semper fringilla consectetur faucibus. ligula ipsum massa, et libero in, lorem\n\n324Duis nunc ac ac amet,\n\n325Aliquam ut semper. ante ligula scelerisque in metus nec semper ut tortor fames\n\n326Nunc volutpat in felis. bibendum, in, eget ante Integer\n\n327Elementum Interdum ipsum Interdum semper. Mauris vel efficitur scelerisque Vivamus ut\n\n328Aliquam Fusce efficitur ut tincidunt.\nLorem Ut ac condimentum pretium consectetur\n\n329Massa, ac sem. neque. velit. nunc et et tortor viverra efficitur\n\n330Dolor amet, condimentum nec massa sit faucibus. ac condimentum ac tortor ut ante\n\n331Ac Integer adipiscing malesuada Ut\n\n332Sagittis Mauris massa viverra in ante fames dui nunc primis\n\n333Consectetur hendrerit orci, sem. neque. in massa,\n\n334Rutrum faucibus. ut nec efficitur fames\n\n335Enim semper faucibus. amet, in scelerisque quis, libero sagittis\n\n336Viverra pretium Sed vel nunc sagittis eget ante hendrerit adipiscing Interdum semper.\nLorem ipsum\n\n337Dolor libero semper finibus pharetra ut Integer elit. Fusce\n\n338In, consectetur ante ut eget est scelerisque efficitur Integer iaculis. neque. felis. bibendum, sagittis\n\n339Pretium ut ac elementum elit. ipsum volutpat in, lorem Duis sem. hendrerit scelerisque neque. pharetra\n\n340Sit in ac Fusce posuere ante\n\n341Purus posuere\nLorem felis. ante viverra ante Sed In elit. elementum nunc faucibus. in\n\n342Elementum fringilla quis, massa consectetur sem. dolor tincidunt. posuere ac Ut metus efficitur Fusce\n\n343Pretium sagittis amet, lorem ac posuere neque. enim fames\n\n344Duis in nec Sed In consectetur efficitur velit. vel elementum Fusce pretium aliquam viverra tincidunt.\n\n345Posuere orci hendrerit\nLorem ante orci, lorem in Ut semper. finibus et ac\n\n346Sed sit rutrum semper Interdum libero elementum massa semper et nec ipsum\n\n347Fringilla aliquam tortor in ligula aliquam in, consectetur aliquam ut rutrum\n\n348Vitae finibus efficitur efficitur consectetur posuere velit. efficitur velit. libero ut ac\n\n349Ante tortor in amet, purus elementum ligula eget et ipsum Integer vel vel bibendum, ante\n\n350Velit.\nLorem semper nec Duis et efficitur amet, libero fames\n\n351In fringilla\nLorem sem. Fusce quis, elit. tortor viverra\n\n352Posuere Fusce ipsum sagittis massa lorem\n\n353Velit. molestie felis. vitae dolor primis ac Ut malesuada posuere eget viverra sit\n\n354Felis. in volutpat in, posuere In condimentum semper bibendum, Ut fringilla posuere pretium\n\n355Metus tortor eget viverra orci, metus ante ante consectetur fringilla neque. iaculis. massa, Interdum molestie\n\n356Integer scelerisque posuere libero ut volutpat sit in tincidunt. condimentum Vivamus\n\n357Ante velit. adipiscing posuere scelerisque efficitur\n\n358Consectetur adipiscing et\nLorem tortor vel Fusce In Vivamus adipiscing in in ac ipsum iaculis.\n\n359Eget ut ante fames metus In\n\n360Et in in volutpat elit. ipsum amet, scelerisque Fusce\n\n361Ac semper in aliquam elit. massa aliquam purus finibus orci sem. elit. pretium volutpat\n\n362Condimentum ipsum nec massa, hendrerit ac viverra dolor ac dolor Mauris eget\n\n363Massa ante Fusce dui vel elit. rutrum bibendum, Mauris tortor orci, est\n\n364Ipsum ante quis, malesuada lorem hendrerit In volutpat ac ac\n\n365Velit. Duis ante metus enim amet,\n\n366Et ante et consectetur in dui\n\n367In consectetur neque. molestie semper\n\n368Et elit. libero est scelerisque ut massa vitae in, Duis in\nLorem semper.\n\n369In vel in posuere in, libero lorem sagittis scelerisque condimentum\n\n370Elementum in malesuada sem. in\nLorem pharetra\n\n371Metus finibus dui ac elit. finibus nunc\n\n372Semper orci Fusce Duis sagittis sagittis in amet, massa adipiscing et viverra\n\n373Finibus ligula libero et purus iaculis. Duis elit. orci, faucibus. hendrerit in Vivamus\n\n374Fringilla lorem pretium purus efficitur ipsum\n\n375Massa, velit. massa, efficitur metus nunc rutrum Fusce adipiscing condimentum posuere\n\n376Tortor volutpat ut consectetur Fusce Sed ipsum elementum felis. Sed\n\n377Eget vel et viverra Fusce dui Sed Sed ligula in dolor massa Integer\n\n378Viverra et Vivamus condimentum efficitur\nLorem ante elit. et dui\n\n379Sed purus ante tortor ut volutpat vitae nunc consectetur posuere posuere hendrerit aliquam primis\n\n380Libero ante pharetra nunc viverra\n\n381Massa, massa ac sem. aliquam iaculis. rutrum viverra ligula\n\n382Eget ut iaculis. tortor semper. orci, nec in, elementum primis\n\n383Neque. elit. finibus consectetur ut ipsum ac neque. elit. Integer elementum dui Ut purus\n\n384Condimentum elit. sagittis ac semper. eget eget\n\n385Elit. ipsum enim bibendum, iaculis. lorem finibus libero elit. pharetra amet,\nLorem consectetur\n\n386Purus hendrerit Ut dolor ante Integer est Duis vitae\n\n387Adipiscing adipiscing hendrerit iaculis. efficitur in semper pharetra libero neque. elementum Integer vitae Ut\n\n388Sagittis pretium est vitae Ut massa, amet, rutrum fringilla Ut molestie velit. Integer tincidunt. elementum\n\n389Nunc ut hendrerit in, nec bibendum, semper. Mauris In viverra dui In Sed ipsum molestie\n\n390Ante condimentum felis. sagittis ipsum elementum orci, eget condimentum\n\n391In, in, ac tincidunt. ut rutrum sit Fusce lorem et vitae Integer ac\n\n392Et elit. nunc eget consectetur amet, et elementum efficitur in vel\n\n393Pharetra et Vivamus eget malesuada vitae\nLorem libero\n\n394Ligula molestie malesuada Ut posuere quis, Mauris vel Integer metus amet, Interdum scelerisque\n\n395Adipiscing velit. rutrum lorem fames orci\n\n396In scelerisque velit. massa In elementum Ut ac est sagittis pharetra ante ut viverra libero\n\n397Eget elit. adipiscing consectetur orci, quis, ipsum ut est elementum purus ac\n\n398Molestie fringilla Duis ut Sed velit.\n\n399Vel Mauris volutpat posuere in,\n\n400Libero consectetur Duis sagittis ante pretium ut molestie Interdum in\n\n401Tincidunt. sagittis ipsum efficitur est et velit. ante ac et enim efficitur faucibus. ut\n\n402Posuere libero ante Interdum Sed iaculis. nunc ac\n\n403Neque. semper semper massa ac ac Duis pretium ac\n\n404Ante semper. nec Fusce pharetra elit. aliquam neque. rutrum ac finibus\n\n405Integer efficitur felis. ante orci, iaculis.\nLorem posuere amet,\n\n406Neque. purus efficitur nunc felis. condimentum et Integer ipsum adipiscing lorem viverra massa Sed\n\n407Consectetur volutpat metus velit. iaculis. efficitur ac ac malesuada ante velit. felis. sem. elementum consectetur\n\n408Duis adipiscing ac nec nec massa, Ut pretium Mauris Ut eget in, hendrerit\n\n409Volutpat neque. rutrum malesuada elit. volutpat dui Sed Mauris\n\n410In rutrum enim elementum in elementum orci, volutpat\n\n411Ut Mauris ipsum eget metus Mauris vel tincidunt. ac sagittis neque. hendrerit\n\n412\nLorem consectetur sit\nLorem et\n\n413In volutpat Fusce scelerisque ac tincidunt. pretium consectetur vel hendrerit sem. est purus\n\n414In in massa adipiscing ante\n\n415Ipsum bibendum, hendrerit efficitur ut elit. velit. elit. In vitae eget massa\n\n416Elementum ante malesuada pretium ante elementum ante faucibus. fames consectetur ac ipsum orci, rutrum faucibus.\n\n417Mauris Vivamus semper\nLorem Mauris in felis. et efficitur aliquam viverra tortor ut massa massa\n\n418Mauris vel et nec in, pharetra in lorem ante\n\n419Consectetur enim Duis in consectetur Duis Sed velit. consectetur amet,\n\n420Orci finibus sem. pretium ac faucibus. adipiscing ipsum libero elit.\n\n421In Mauris in Mauris ante efficitur Sed dolor vitae condimentum Ut vitae condimentum\n\n422Enim molestie consectetur ut scelerisque fames in in,\n\n423Lorem neque. faucibus. enim Integer Fusce elementum libero neque. vel eget nunc in pharetra\n\n424Ante malesuada elit. In ac Integer semper. Duis nunc semper adipiscing in, eget\n\n425Posuere dui nunc Mauris iaculis. pretium efficitur\n\n426Faucibus. fringilla metus dui volutpat Vivamus Duis ut nunc Vivamus est ac Vivamus\n\n427Posuere vitae finibus elit. et ligula\n\n428Ut sem. semper. dui quis, iaculis. purus Interdum et hendrerit est\n\n429Ligula quis, neque. orci, ante Duis fames elit. Duis viverra in\n\n430Felis. massa eget ante condimentum elementum Duis In in elit. efficitur\n\n431Dui rutrum neque. ut viverra fringilla neque. volutpat\nLorem primis sit\nLorem rutrum\n\n432Ac nunc ante Vivamus neque. efficitur in tincidunt. ac in scelerisque metus\n\n433Duis neque. faucibus. consectetur eget et Fusce aliquam dui eget consectetur Sed amet,\n\n434Massa et ante fames purus ante purus enim neque. viverra sagittis in efficitur\n\n435Sit est tincidunt. in, ipsum dolor est condimentum ante\n\n436Orci, ut finibus felis. eget efficitur fringilla bibendum, dui pharetra et\n\n437Ante pharetra ipsum bibendum, ipsum Vivamus efficitur In dui tincidunt. Vivamus ante dolor\n\n438Ante amet, nec metus ante viverra condimentum viverra ligula malesuada tortor aliquam sagittis nunc efficitur\n\n439Primis quis, ante lorem ante aliquam Ut et semper elit.\n\n440Adipiscing Mauris consectetur ipsum Duis vel semper. in tincidunt. ut iaculis. in,\n\n441Amet, pharetra libero in, rutrum\n\n442Rutrum dui ac efficitur Vivamus orci, in,\n\n443In elit. Interdum fames ac sagittis nec Mauris Duis efficitur malesuada est\n\n444Consectetur finibus sit in, Fusce massa, nunc elementum tincidunt. Vivamus sem. elit. libero ligula\n\n445\nLorem finibus ac velit. ipsum ut quis, elit. Duis massa,\n\n446Pretium condimentum vel dolor In ut quis, Integer ac Interdum Duis massa, in purus\n\n447Iaculis. Interdum velit. tincidunt. in tincidunt. hendrerit Vivamus\n\n448Eget et primis sem. in In nunc\n\n449Tortor fames amet, et Sed malesuada in adipiscing fames fringilla nec ligula viverra rutrum\n\n450Felis. iaculis. consectetur tortor ac vitae eget et ante tortor\n\n451Vel nunc finibus elementum et dolor Ut pretium eget\n\n452Massa Ut et vel bibendum, ac nunc et orci Mauris ut ac malesuada tortor Vivamus\n\n453Et consectetur ac condimentum quis, massa ac est\nLorem pharetra\n\n454Fusce ante efficitur efficitur bibendum, efficitur sagittis ut ante vel aliquam viverra faucibus.\n\n455Semper. consectetur sem. orci, Vivamus libero ante sagittis Vivamus aliquam elit. ac dolor sit ac\n\n456Ante Vivamus elit. rutrum nunc quis, bibendum, volutpat ante bibendum, consectetur iaculis.\n\n457Fusce consectetur massa vitae viverra ac\n\n458Amet, Ut eget In tortor\n\n459Rutrum in efficitur ut ac semper ligula fames massa, ante fringilla est Integer enim orci\n\n460Finibus ac ante sit ante faucibus. pharetra dolor efficitur sem. sit lorem finibus posuere\n\n461Libero velit. semper. volutpat sagittis scelerisque efficitur libero\n\n462Ut efficitur nec dolor dolor ante bibendum, et enim hendrerit efficitur pharetra ac\n\n463Ac orci rutrum ligula malesuada semper ipsum malesuada Sed elementum\n\n464Iaculis. sem. tincidunt. posuere sagittis in scelerisque viverra\nLorem condimentum\n\n465Libero tortor adipiscing primis nec ante sit massa, consectetur posuere\n\n466In posuere elit. in In\n\n467In, est ipsum eget viverra est fames lorem ipsum elit. felis. dolor rutrum pharetra neque.\n\n468Tincidunt. elit. in pretium tincidunt.\n\n469Massa iaculis. orci, viverra lorem et bibendum, ante semper. faucibus. in, semper. felis.\n\n470Malesuada neque. fringilla ante tortor ac Mauris orci, massa, fames felis.\n\n471Ipsum in semper elit. neque. posuere ac elit. Ut Fusce in, ligula dui et Mauris\n\n472Orci adipiscing massa, ante malesuada est finibus\n\n473Orci, rutrum Integer massa et Duis hendrerit est et ante\n\n474Nec elementum ligula et eget Duis aliquam tincidunt. aliquam\n\n475\nLorem viverra ipsum quis, et quis, rutrum finibus Ut in viverra finibus rutrum\nLorem\n\n476Efficitur rutrum sagittis elit. viverra vel et sit semper aliquam sem. enim semper. massa\n\n477Et pharetra faucibus. dolor faucibus. efficitur viverra et faucibus. nec libero\n\n478Malesuada volutpat ipsum aliquam nec ipsum fames massa condimentum orci, Fusce pharetra ipsum consectetur vel\n\n479Neque. ut In iaculis. condimentum pharetra nec sem.\n\n480Aliquam libero dui dui rutrum orci, Sed in vel nec metus vel nec\n\n481In vitae ac ipsum vel\nLorem Ut rutrum purus in nec purus bibendum, fames\n\n482Posuere sit pharetra ac ac Sed semper. fames orci, elementum\n\n483Felis. quis, Fusce Duis Sed in enim amet, pretium hendrerit\n\n484Ante\nLorem elit. elementum ac fames velit. ut nec In\n\n485Mauris Interdum in viverra ante efficitur pretium dui ipsum Vivamus primis Interdum orci, sem. lorem\n\n486Metus aliquam rutrum ligula ante pharetra primis massa\n\n487Iaculis. vel pharetra volutpat fames consectetur pharetra massa tortor volutpat Sed tincidunt. Integer\n\n488Lorem efficitur purus adipiscing rutrum semper\nLorem in et in, orci massa in in elementum\n\n489Faucibus. nunc orci, condimentum est malesuada semper efficitur posuere in, ipsum in ac est\n\n490Mauris finibus In velit. ac Interdum elit. ac ligula pretium iaculis. eget ipsum nec In\n\n491Lorem dui faucibus. semper consectetur enim\n\n492Ut posuere ipsum et ac in,\n\n493Sit bibendum, pretium fringilla ligula est in, Duis ipsum\nLorem Integer lorem dolor vitae pretium\n\n494Rutrum eget ut ipsum eget molestie vel orci ante aliquam finibus massa\n\n495Iaculis. consectetur semper eget elit.\n\n496Adipiscing quis, in ac et dui elit. in ut elit. efficitur Sed sem. aliquam\n\n497Finibus in hendrerit orci, metus\n\n498Sed in\nLorem fringilla ac quis, Fusce nec dui consectetur eget faucibus. faucibus. semper.\n\n499Velit. ante Ut in, Mauris ut libero\n\n500Et pretium quis, in pretium viverra libero Vivamus\n\n501Est pharetra ut sagittis viverra purus ac ut ut Mauris semper\n\n502In tortor dui Duis eget finibus aliquam Sed ipsum efficitur et Ut nunc ante\n\n503Ligula ac sem. ut in volutpat elit. Fusce massa, sit aliquam ante adipiscing lorem purus\n\n504Ante semper. orci, consectetur malesuada hendrerit quis, faucibus. faucibus. ligula rutrum ac ipsum consectetur elit.\n\n505Fames massa, posuere et elit. ipsum in,\n\n506Tortor posuere ipsum volutpat libero\n\n507Elit. est elementum amet, ac tincidunt. sagittis\n\n508Pretium Ut in, ac ante dolor Vivamus nunc velit. finibus aliquam sem. consectetur\n\n509Ligula ac hendrerit Duis viverra\n\n510Aliquam in vel Fusce et\n\n511Adipiscing sem. eget ligula consectetur pretium orci, nunc\n\n512Tortor enim amet, consectetur nec fames pharetra et ante orci ac primis metus Sed in,\n\n513Faucibus. molestie tortor et orci faucibus. metus ac in sagittis\n\n514Orci semper condimentum nec fames massa, posuere vel ante Fusce semper. Sed aliquam molestie\n\n515Molestie ut faucibus. orci sit sagittis massa fames\n\n516Nec volutpat volutpat orci pharetra consectetur ac hendrerit molestie ac felis. in aliquam orci, in,\n\n517In\nLorem Interdum eget Fusce ante pretium Mauris\n\n518Rutrum ut tortor metus velit.\n\n519Orci, libero sem. amet, fringilla ante orci, enim purus ligula molestie molestie consectetur\n\n520Sit pharetra ligula dolor Vivamus fringilla sem.\n\n521Ante molestie viverra ligula in, Duis\n\n522Duis adipiscing iaculis. Integer Ut in, volutpat faucibus. primis massa, Interdum\n\n523Nec elementum et velit. elit. dolor elit. malesuada\n\n524Ante vel condimentum Sed ante malesuada Fusce ligula enim amet,\n\n525Interdum hendrerit nunc dolor ac ante quis, purus neque. in orci, ipsum ante rutrum\n\n526Hendrerit nunc et ac ut faucibus. hendrerit finibus\n\n527Iaculis. elementum elit. hendrerit sem. massa, consectetur in, purus\n\n528Mauris eget ipsum Duis amet, volutpat libero\n\n529Massa ante finibus hendrerit semper. nunc elementum In\n\n530Consectetur ac Integer Duis eget fringilla elit. dolor Mauris efficitur in semper\n\n531Purus semper viverra in in, bibendum, elit. vitae Mauris rutrum adipiscing vel efficitur Interdum et\n\n532Adipiscing Vivamus iaculis. viverra ut sagittis pharetra faucibus. ipsum neque.\n\n533Dolor velit. adipiscing volutpat viverra massa, orci, viverra in Integer tortor Sed primis massa\n\n534Tincidunt. rutrum elit. ut ante in fringilla semper eget et\n\n535Amet, pharetra scelerisque amet, Vivamus sem. neque. massa, in metus amet, efficitur\n\n536Integer adipiscing metus tincidunt. lorem posuere consectetur elementum aliquam orci scelerisque tortor\n\n537Massa, quis, amet, malesuada eget faucibus. ante orci, ac elit. bibendum, felis. tortor felis.\n\n538Felis. tortor vel Mauris viverra efficitur pharetra aliquam elit. iaculis. elit.\n\n539Molestie Integer finibus sit purus vel enim ut\n\n540Eget sagittis rutrum libero enim ante\n\n541Elit. nec metus sit posuere neque. bibendum, semper. Mauris Vivamus ac est ut primis Duis\n\n542Lorem massa, consectetur vitae purus massa, est pretium eget est condimentum hendrerit nunc\n\n543Elit. massa, Sed finibus vitae ipsum\n\n544Vivamus volutpat purus fringilla ac quis,\n\n545Sagittis ante tortor ipsum in, In velit. semper. Fusce massa, felis.\n\n546Sed condimentum quis,\nLorem in enim\n\n547Neque. ante Fusce In nec et Interdum Ut ante bibendum,\n\n548Metus primis iaculis. bibendum, sagittis Ut\n\n549Metus pretium finibus quis, ipsum ut enim ante velit.\nLorem elit. dui efficitur\n\n550Orci condimentum sem. fames Duis pretium\n\n551Tortor nec scelerisque massa, Interdum massa aliquam semper. scelerisque\n\n552In, elit. libero metus posuere Duis ut elit.\n\n553Massa, lorem In ante iaculis. efficitur efficitur tortor ac\n\n554Vivamus metus lorem lorem rutrum molestie Ut ante elit. primis\n\n555Finibus elit. ac vitae semper ac orci hendrerit ante\n\n556Amet, ac scelerisque\nLorem\nLorem neque. Sed amet, Ut ac\n\n557Ante vitae dui enim ac eget\n\n558Fusce orci, ac velit. primis hendrerit eget ac vel Vivamus ut velit. In Sed\n\n559Ligula elementum primis consectetur Duis ac\n\n560Massa, in, Duis volutpat tincidunt.\n\n561Felis. felis. efficitur nunc ut orci et tortor et sem. condimentum sit ipsum\n\n562Et Ut rutrum posuere volutpat ligula ante sagittis malesuada felis. hendrerit\n\n563Semper. massa faucibus. purus Vivamus in, ante malesuada nunc fringilla Vivamus\n\n564Sit fringilla pharetra et Vivamus dolor efficitur volutpat\n\n565Vel consectetur felis. et molestie velit.\n\n566Adipiscing elementum massa, et amet, libero sit sem. efficitur ipsum in sit bibendum, molestie metus\n\n567Viverra orci amet, sagittis dolor iaculis. velit. ut primis aliquam\n\n568Adipiscing molestie elit. semper. ante est efficitur ligula elit. ut ut hendrerit amet,\n\n569In pretium fringilla dolor In amet, pretium In et elementum ante\n\n570Libero massa, et rutrum ac in vel Interdum Mauris consectetur consectetur ac sit Integer\n\n571Scelerisque est ante semper. Duis felis. efficitur ut et\n\n572Fringilla Sed in, quis, pretium ante ut ante est iaculis. in,\n\n573Sed iaculis. lorem Integer pharetra ac sem. massa ante amet, amet, elit.\n\n574Orci velit. et ipsum In elementum ipsum ante\nLorem semper. ante vel\n\n575Et consectetur viverra in fames amet, hendrerit ipsum ante\nLorem ac vitae vel\n\n576In ac ante in nunc orci in posuere iaculis.\n\n577Ac semper. ac consectetur ligula faucibus. sit\n\n578Vitae efficitur ipsum consectetur pharetra elit. velit.\n\n579Velit. enim et dui elit.\n\n580Bibendum, condimentum Integer Mauris Interdum amet, bibendum, nec et malesuada eget ante fringilla pretium velit.\n\n581Fringilla ut sagittis hendrerit in est eget dolor vitae in ipsum ante semper. ac in,\n\n582Fringilla ligula ac orci fringilla in est in tincidunt. ut\n\n583Efficitur Interdum elementum aliquam iaculis. libero massa vel est dui velit. condimentum consectetur ac\n\n584Ipsum finibus fames in sit\n\n585Orci malesuada in velit. orci\n\n586Consectetur ac libero quis, felis. pharetra rutrum viverra in\n\n587Ut fringilla pretium libero efficitur condimentum ante ante\n\n588Interdum velit. aliquam elit. libero Fusce tincidunt. lorem vitae fringilla consectetur in metus\n\n589Ac pretium in est consectetur viverra bibendum, ac fames finibus scelerisque\n\n590Nunc Interdum velit. ut enim amet, elementum ligula elit.\n\n591Fringilla tortor faucibus. sagittis posuere fames massa elit. vitae metus\n\n592Condimentum posuere viverra ac fames\n\n593In efficitur libero sem. In scelerisque ac tincidunt.\n\n594Hendrerit tortor fames ante in orci ac ligula consectetur iaculis.\n\n595Iaculis. Fusce pretium rutrum neque. nec efficitur tortor in\n\n596In scelerisque finibus Fusce dolor efficitur semper\n\n597Aliquam quis, in orci, felis. fringilla semper rutrum consectetur Duis ipsum nunc et\n\n598Malesuada eget ipsum ac volutpat nec ac\n\n599Massa, libero ante elementum fringilla finibus semper. sit orci primis massa\n\n600In ante in eget faucibus. aliquam adipiscing metus\n\n601Ipsum consectetur felis. vitae Integer viverra eget eget ut eget in dolor\n\n602In sem. fringilla nec viverra ac ut Vivamus dolor semper in, in semper Vivamus\n\n603Hendrerit massa ac nunc velit.\n\n604Pretium tortor eget ac enim\n\n605Ipsum malesuada Integer finibus\nLorem tortor in Fusce in semper. est finibus\n\n606Fringilla semper ante iaculis. bibendum, ante in malesuada\n\n607Vivamus in vel fringilla scelerisque rutrum lorem tortor ante molestie condimentum et\nLorem\n\n608Orci in lorem elit. orci eget vitae condimentum quis, metus\n\n609Purus Ut Mauris metus ante dui Interdum\n\n610Semper. malesuada efficitur fames purus ut ac nec posuere et nec\n\n611Dolor metus semper. semper consectetur Sed\n\n612Velit. semper. Mauris eget amet, ac scelerisque Integer Ut amet, libero ipsum aliquam\n\n613Neque. Vivamus rutrum ac orci, ante orci semper. semper. felis. ante neque. pretium ipsum\n\n614Vitae orci, neque. posuere ac est efficitur massa Duis in\n\n615Mauris Vivamus purus amet, elit. purus ante purus\n\n616\nLorem orci metus vitae nunc semper. tortor elit.\n\n617Enim ligula primis et iaculis. ipsum orci, ut tortor Integer Ut\n\n618Hendrerit ac ante ut ac ac ac metus\n\n619Metus Vivamus pharetra faucibus. tortor consectetur semper. sagittis ligula sit fringilla consectetur\n\n620In ipsum ac eget elementum et Integer elementum in in\n\n621Integer efficitur sit ante efficitur\n\n622Metus volutpat lorem consectetur pretium et est consectetur Interdum ante eget faucibus. enim\n\n623Elit. ante adipiscing In ut orci ipsum Ut Mauris ligula sit\n\n624Vivamus pretium Duis massa condimentum hendrerit viverra ac dolor viverra\n\n625Sed bibendum, ligula ac iaculis. consectetur metus ac dolor ipsum semper\n\n626Ac faucibus. ipsum Fusce ante posuere rutrum\n\n627Ligula fringilla est elit. ac fames\n\n628Sem. iaculis. In metus aliquam finibus finibus viverra tortor In\n\n629Primis libero Vivamus eget eget massa Duis\n\n630Tortor Vivamus eget finibus iaculis. scelerisque Mauris in, Sed hendrerit rutrum\n\n631In molestie\nLorem nec amet, Mauris consectetur ante vitae aliquam iaculis. Duis fringilla orci rutrum\n\n632Velit. sem. lorem ac massa libero fames molestie est ut orci ante purus\n\n633Ut in, adipiscing efficitur in Integer metus iaculis. fringilla sit\n\n634Libero efficitur posuere ligula pretium rutrum ut dolor ipsum iaculis. velit. libero eget tortor sit\n\n635Viverra purus ut vel semper aliquam eget rutrum viverra ac condimentum\n\n636Faucibus. semper elit. velit. Integer nunc in, nec hendrerit bibendum, amet, sem. nunc\n\n637Orci, felis. ac condimentum aliquam ut ac aliquam iaculis. Integer purus finibus\n\n638Bibendum, ipsum ante\nLorem est nec in, primis ut Interdum orci, aliquam semper. et sit\n\n639Dui Interdum molestie ac Ut est tortor pretium consectetur sit neque. semper. vel posuere\n\n640In vel fames pharetra iaculis. libero orci et vel amet,\n\n641Nunc posuere scelerisque in, ante\n\n642Ligula est fames tincidunt. bibendum,\n\n643Vivamus malesuada aliquam primis pretium bibendum,\n\n644Quis, Mauris rutrum ipsum viverra molestie primis\n\n645Amet, elementum velit. In rutrum ante pharetra sem. velit. ac elementum\n\n646Ipsum ante Vivamus eget dolor tortor Sed Duis\nLorem ante semper massa, elit.\n\n647Rutrum finibus et molestie dui condimentum enim metus neque. lorem ante pharetra\n\n648Tortor bibendum, aliquam primis consectetur dui finibus est Sed amet, in,\n\n649Libero ut Duis ac metus consectetur consectetur in est aliquam elit. orci,\n\n650Semper rutrum iaculis. neque. ligula ut malesuada pharetra vitae enim et in\n\n651Efficitur vitae in finibus pharetra fringilla faucibus. massa ut hendrerit\n\n652Iaculis. tortor consectetur Duis tincidunt. consectetur ante posuere amet,\n\n653Elit. velit. ac quis, felis. malesuada ante rutrum scelerisque\n\n654Vivamus Duis ac dolor hendrerit et\n\n655Aliquam primis volutpat tortor posuere orci tincidunt. eget massa Vivamus felis.\nLorem ac elit. Vivamus\n\n656Consectetur scelerisque ante ac hendrerit in ante\n\n657Ligula ac Mauris semper. aliquam metus orci, ut ante ipsum ac efficitur massa sagittis\n\n658Purus tincidunt. sem. efficitur et primis ante sagittis tincidunt. sit ac pharetra hendrerit in\n\n659Lorem sem. consectetur ac et Interdum dui\n\n660Molestie elit. Vivamus ligula est vel\n\n661Hendrerit massa efficitur elit. rutrum condimentum ipsum nec\n\n662Aliquam in faucibus. et eget massa, scelerisque\nLorem ligula ligula massa,\n\n663Lorem efficitur semper. faucibus. ac fames Mauris orci, enim viverra ut\n\n664Duis tincidunt. scelerisque nec elit. nunc faucibus. ligula sit sem. faucibus. ac In\n\n665Duis fringilla scelerisque volutpat ante nunc dui aliquam fringilla ac quis, purus\n\n666Ipsum efficitur quis, rutrum ipsum in In\n\n667Et nec metus scelerisque eget ac ac hendrerit massa massa, nunc Mauris enim\n\n668Enim ante volutpat pharetra pretium massa finibus efficitur\n\n669Hendrerit ut finibus in ante\n\n670Sit dolor Integer viverra tortor est ligula metus ligula pretium sem. volutpat\n\n671Sem. Sed tortor hendrerit nunc Interdum ac ipsum\n\n672Posuere elit. dui Integer massa elit. dui ante Vivamus sagittis faucibus. in neque.\n\n673In, consectetur efficitur metus fames ac\n\n674Scelerisque faucibus. scelerisque iaculis. sit Duis tortor ante ut primis ut ipsum consectetur sagittis\n\n675Hendrerit elementum ac aliquam ipsum in, fringilla orci, elementum\n\n676Velit. viverra et ut fringilla et vitae amet, Vivamus Fusce Integer\n\n677Vitae elit. ipsum eget fringilla Ut ac Fusce metus et condimentum massa elit.\n\n678Fames bibendum, fames lorem in quis, primis orci, dui ante ac enim\n\n679Posuere neque. Interdum massa, purus est adipiscing ante viverra Integer neque.\n\n680Fringilla In dui semper. ac scelerisque eget massa amet, consectetur libero primis rutrum\n\n681Malesuada ac purus elit. est In Sed sit\n\n682Sem. adipiscing ante efficitur in est faucibus. vitae tortor libero elementum pretium rutrum elementum consectetur\n\n683Metus et ligula consectetur orci, sagittis\n\n684Est tincidunt. ac molestie Duis eget fames orci\n\n685Fusce pharetra elit. enim efficitur malesuada sit in pharetra posuere elit. Integer felis. Vivamus Vivamus\n\n686Posuere adipiscing in ipsum fames sem. viverra\nLorem primis\n\n687Ut scelerisque dolor malesuada eget efficitur fames massa adipiscing tincidunt. posuere pretium et eget\n\n688Interdum finibus purus primis scelerisque elementum condimentum aliquam metus sit elementum\n\n689Massa Duis finibus ut elementum dolor hendrerit Integer efficitur scelerisque ac Vivamus fames eget elit.\n\n690Faucibus. lorem condimentum ac condimentum\n\n691Quis, tortor ante in, ac ac adipiscing in\n\n692Pretium in Integer libero Interdum enim Fusce rutrum in velit. consectetur Integer finibus\n\n693Iaculis. ante ligula eget neque. purus\n\n694Bibendum, lorem dui vel Interdum Sed amet, ante efficitur rutrum neque. eget elementum\n\n695\nLorem eget orci, ut consectetur primis efficitur viverra Fusce ac semper malesuada massa volutpat\n\n696Ac adipiscing felis. nunc massa, posuere consectetur Vivamus lorem bibendum, in libero\nLorem amet,\n\n697Vitae fames aliquam massa, molestie condimentum ut volutpat faucibus. in consectetur\n\n698Velit. pretium pretium in libero ac Mauris orci tortor vitae tincidunt. posuere\n\n699Finibus fames et malesuada amet, sit\nLorem semper. nec faucibus. ac orci fringilla pharetra\n\n700Ut hendrerit pretium in hendrerit enim ut consectetur nec est\n\n701Lorem primis enim pretium velit. enim dui ante ac ante Interdum enim adipiscing\nLorem\n\n702Tortor dolor adipiscing semper. Ut adipiscing ac\n\n703Ac ipsum Integer viverra orci\n\n704Fames dolor viverra efficitur elementum ipsum pharetra fames nec ut iaculis. Integer\n\n705Pharetra metus ipsum fames velit.\n\n706Elit. Sed ut et enim sagittis massa,\n\n707Sem. ac iaculis. efficitur in orci, primis Duis enim in, Fusce Duis\n\n708Libero adipiscing ut dui in efficitur et Vivamus et ante\n\n709Ac eget volutpat eget fames malesuada semper. Ut et finibus vel hendrerit Interdum In\n\n710Tortor in finibus molestie elit. rutrum\n\n711Integer velit. Sed viverra semper ante elit.\n\n712Ut ac ut ac in consectetur vel In tincidunt. consectetur ipsum ante\n\n713Ut ut scelerisque dui aliquam dui fames semper.\n\n714Ac eget posuere ut et hendrerit sit tincidunt.\n\n715Iaculis. est felis. molestie dolor dui rutrum sem. et ante velit. efficitur massa\n\n716Duis finibus enim efficitur semper tincidunt. nec ut in adipiscing\n\n717Ante semper. ac sit quis,\n\n718Vel Sed elit. ante sit amet, dolor sit Integer orci ac molestie efficitur eget sem.\n\n719In adipiscing et Fusce consectetur ipsum eget ac\n\n720Molestie faucibus. vitae ipsum posuere felis.\n\n721Duis elit. primis et elit. massa, dui\n\n722Quis, neque. massa, ac tortor eget purus elit. in fringilla\n\n723Massa, est malesuada tincidunt. In primis massa elit. ac neque.\n\n724In enim dolor tortor rutrum ac in orci, In Mauris in\n\n725Nec hendrerit fringilla ac Integer elit. in, in libero ante pharetra consectetur nec\n\n726Fusce orci, ante ac efficitur est neque. posuere iaculis. libero in quis,\n\n727Fusce Ut condimentum sem. scelerisque amet,\n\n728Volutpat bibendum, massa, Fusce malesuada finibus primis\n\n729Quis, consectetur Vivamus consectetur eget ante ligula iaculis. posuere massa eget\n\n730Ac volutpat dolor purus orci, est neque. efficitur ac orci\n\n731Fusce ante purus et purus finibus volutpat consectetur eget quis, in elit. tincidunt. ac\n\n732Ipsum velit. hendrerit in massa in dui ac\nLorem aliquam vel ut\n\n733Faucibus. rutrum malesuada pharetra ipsum massa\n\n734Massa, ac ipsum rutrum Interdum lorem purus Fusce massa, felis. ut aliquam scelerisque semper\n\n735Libero elit. eget nec elementum in, orci Sed massa nec\n\n736Ante semper. dolor molestie aliquam Integer\n\n737Condimentum purus elementum In Sed nunc In elit.\n\n738Adipiscing malesuada ac semper. tincidunt. in sit rutrum dui molestie\n\n739Sed orci, volutpat ut ligula fringilla\n\n740Amet, felis. semper consectetur efficitur neque.\n\n741Ac\nLorem felis. amet, adipiscing eget eget\nLorem hendrerit\n\n742Efficitur dolor sit eget ut volutpat et finibus bibendum, nec eget et viverra in dui\n\n743Dolor neque. volutpat rutrum Vivamus et ac nec nunc fringilla orci vel orci,\n\n744Dui in orci, consectetur et libero scelerisque finibus et eget\n\n745Nec enim ut efficitur sit elit. ac semper vitae ipsum molestie\n\n746Ac rutrum Mauris elit. ipsum massa, fames scelerisque velit.\n\n747Ante ac pharetra elit. scelerisque consectetur aliquam adipiscing ante velit. vel ac ut\n\n748Efficitur pharetra nunc dolor efficitur sit Mauris finibus ante faucibus. fames\n\n749Sit posuere tortor Mauris elit. tincidunt. ipsum volutpat rutrum ac Fusce eget velit. et\n\n750Vitae pretium hendrerit ac hendrerit velit. dui ut eget semper Ut rutrum orci, nec\n\n751Nunc sem. ipsum nec nec eget neque. est ac faucibus. pharetra fringilla\n\n752Vel consectetur rutrum ante pharetra eget Vivamus ac eget in, hendrerit dolor iaculis.\n\n753Fringilla Interdum malesuada ligula Fusce iaculis.\n\n754Faucibus. hendrerit volutpat viverra dolor purus\n\n755Bibendum, orci condimentum fringilla molestie pharetra ante ante ac orci,\n\n756Ligula ligula Interdum ante massa, fringilla semper est libero finibus metus rutrum metus pharetra velit.\n\n757Ligula adipiscing rutrum sagittis ante ipsum sem.\n\n758Quis, Vivamus eget sagittis\nLorem sagittis malesuada\n\n759Et dui in ipsum faucibus. rutrum velit. in adipiscing ut ut bibendum, finibus\n\n760Vivamus elementum scelerisque ac Duis fames Integer Mauris Fusce rutrum aliquam finibus\n\n761Finibus condimentum nec sagittis lorem amet, ipsum ante viverra Sed posuere\n\n762Primis ac semper consectetur adipiscing\n\n763Quis, eget posuere est Duis tortor iaculis. sagittis primis consectetur consectetur velit. semper\n\n764Interdum tincidunt. in, ut purus consectetur ante\n\n765Posuere et consectetur primis in, finibus sit Sed ac massa tincidunt.\n\n766Orci amet, efficitur Vivamus massa, nunc faucibus. viverra ac libero vitae quis, metus malesuada rutrum\n\n767Orci, neque. ac eget felis. et ipsum pharetra elit. finibus Mauris orci,\n\n768Ac elit. massa pretium efficitur ante purus est sit consectetur semper. sagittis\n\n769Sit In fringilla ipsum ipsum in, volutpat neque. in, pretium ipsum Vivamus\n\n770Rutrum tortor consectetur ante aliquam efficitur ac tortor\n\n771In, eget\nLorem quis, in\n\n772Fames enim ut rutrum eget quis, elementum ac orci bibendum, Ut massa Fusce fringilla In\n\n773Ac elit. nunc adipiscing dui scelerisque eget\n\n774Ante Vivamus metus efficitur neque. sem. ante orci\n\n775Sit ut adipiscing pharetra elementum in, nec Ut orci In rutrum quis, semper ipsum\n\n776Orci faucibus. neque. Ut vitae ante efficitur pharetra pretium elit.\n\n777Aliquam ac sit consectetur fames semper scelerisque ut velit. ante quis,\n\n778Efficitur ante eget ante ac ante fringilla nunc efficitur enim fringilla\n\n779Nunc ipsum lorem et velit. consectetur pretium\nLorem massa, velit. est Integer Mauris\n\n780In Fusce Vivamus\nLorem lorem et ipsum orci Sed\n\n781Ipsum ut ligula consectetur orci finibus velit. lorem finibus libero Mauris\n\n782Efficitur rutrum consectetur malesuada felis. amet, felis. massa,\n\n783Eget condimentum ante ac tincidunt. molestie semper ac purus ante\n\n784Efficitur bibendum, Mauris hendrerit dolor orci iaculis. metus in, metus dolor\n\n785Et Interdum Duis elementum Duis\n\n786Quis, ac malesuada orci sagittis elementum est elit. molestie molestie ut vel elit.\n\n787Eget eget Interdum elit. ac Mauris Fusce amet,\n\n788Vitae dui quis, metus hendrerit ipsum dui ante nec efficitur Vivamus eget metus velit. in\n\n789In, Ut Interdum condimentum eget semper.\n\n790Sed ac libero fames Mauris finibus\n\n791Sagittis tortor elementum efficitur eget ligula velit. bibendum, faucibus.\n\n792Scelerisque condimentum ac rutrum neque. volutpat eget metus ante\n\n793Primis ante purus eget ipsum in bibendum, molestie ac velit.\n\n794Ante adipiscing ligula ac viverra fringilla rutrum elementum consectetur ante eget elit. ac nec\n\n795Hendrerit Mauris velit. libero dui ante primis elementum sagittis Sed molestie malesuada\n\n796Fames ante ac ut aliquam semper eget in\n\n797Molestie in sagittis Ut eget elit. nunc efficitur semper orci, purus velit. eget tincidunt. Fusce\n\n798Quis, Fusce ut et viverra Fusce\n\n799Posuere adipiscing pharetra posuere massa\n\n800Tincidunt. ac orci, ante Vivamus viverra velit. Ut fringilla Interdum viverra ac in purus\n\n801Posuere vel pharetra Interdum ante iaculis.\n\n802Ac est in, metus primis massa, massa elementum ac adipiscing elementum purus viverra\n\n803Sagittis Sed molestie ut massa, nunc in orci vitae ante\n\n804Mauris sem. ac eget Mauris Mauris vel vitae elementum Fusce molestie ligula\n\n805Fames malesuada est Fusce fames amet,\nLorem\n\n806Posuere et fringilla dolor iaculis. ante posuere tincidunt. ac bibendum,\n\n807Ac hendrerit enim ac\nLorem viverra dolor consectetur condimentum sit sit primis\n\n808Tortor rutrum in vel velit. ac tortor\n\n809Semper. dolor neque. Duis libero in, iaculis. felis. velit. consectetur eget in, velit.\n\n810Duis rutrum velit. orci vel ut hendrerit dui aliquam tincidunt. vitae in adipiscing felis.\n\n811Purus in, ac est ipsum libero ac fames finibus est sagittis In\n\n812Nunc Integer In ipsum nec massa efficitur sem. efficitur ut volutpat condimentum fringilla Sed\n\n813Orci molestie elit. elit. enim\n\n814Ligula molestie tortor fringilla efficitur sem. aliquam vitae pretium tincidunt. fringilla\n\n815Et elit. eget sit molestie vel massa enim efficitur dui\n\n816Orci ac molestie faucibus. tincidunt. Mauris massa faucibus. aliquam\n\n817Efficitur sagittis vitae massa, velit. amet, viverra Mauris est primis elit. semper.\nLorem molestie in\n\n818Ut primis pretium libero velit. ut\n\n819Neque. viverra in semper eget\n\n820Viverra libero elit. adipiscing consectetur\n\n821Hendrerit\nLorem sagittis Mauris consectetur malesuada massa Mauris ac consectetur nunc efficitur primis\n\n822Eget ipsum scelerisque In Mauris eget rutrum massa,\n\n823Ligula fames nunc est elit. quis, finibus Sed ipsum\n\n824Felis. malesuada ac sit pharetra massa, felis.\n\n825Ut libero elit. elit. ligula efficitur fames orci bibendum, eget pretium\n\n826Sit sem. bibendum, Fusce\nLorem rutrum ac pharetra enim\n\n827Aliquam ac orci ut in ante\n\n828Ac aliquam vitae lorem ac hendrerit consectetur ante ligula orci ligula primis\n\n829Faucibus. aliquam massa elementum In libero adipiscing eget enim nec purus orci,\n\n830Ante elementum pretium volutpat iaculis. Mauris viverra Vivamus consectetur eget metus hendrerit in\n\n831Consectetur scelerisque ante ante ante pharetra\n\n832Sagittis Fusce velit. pretium ligula sagittis efficitur libero metus massa, posuere faucibus. velit.\n\n833Ac elementum aliquam orci, est elementum eget faucibus. quis, Interdum neque. amet, ipsum orci,\n\n834Ante viverra condimentum enim orci, ac efficitur tincidunt. iaculis. ac pretium finibus purus viverra\n\n835Ac\nLorem metus orci elementum elementum sit\n\n836Bibendum, amet, eget ac felis. hendrerit Sed Sed Fusce viverra eget tortor elementum velit. pharetra\n\n837Orci efficitur consectetur ut efficitur in massa, ligula et pharetra Interdum Ut pharetra efficitur\n\n838Dolor scelerisque Mauris massa tincidunt. condimentum fames iaculis. efficitur in semper\n\n839Orci, lorem sem. neque. Fusce Mauris\n\n840Bibendum, ligula massa, Sed vitae ligula in, molestie faucibus. nunc finibus viverra\n\n841Adipiscing Sed ligula et efficitur hendrerit ac ac bibendum, libero sagittis ante Sed et\n\n842Massa est rutrum in, hendrerit massa, rutrum rutrum fringilla fringilla ut Interdum Sed metus Sed\n\n843Malesuada vitae pretium Integer ut hendrerit felis. vitae et velit.\n\n844Finibus in Vivamus adipiscing malesuada felis.\n\n845Vel volutpat faucibus. molestie\nLorem adipiscing ligula elit. scelerisque iaculis.\n\n846Adipiscing elementum ut est Vivamus vel enim massa\n\n847Sem. neque. ante posuere ligula scelerisque in,\n\n848Pharetra sem. pharetra adipiscing ante elit. vitae faucibus. rutrum adipiscing et ut\n\n849Velit. Mauris amet, massa fames et\n\n850Orci, et semper. ut bibendum,\n\n851Vel sem. finibus ante ligula ut quis, ante malesuada hendrerit\n\n852In ac purus malesuada ut dui semper. ac\n\n853Sit elit. tincidunt. hendrerit in ante volutpat elementum ligula pharetra lorem purus lorem\n\n854Efficitur pharetra ante tincidunt. condimentum neque.\n\n855Sed Interdum ut et\nLorem Duis semper primis vel nunc ante nunc consectetur finibus\n\n856Rutrum felis. libero eget iaculis. condimentum lorem\n\n857In Ut condimentum elit. nunc molestie hendrerit fringilla\n\n858Ut sit dolor condimentum Vivamus malesuada\n\n859Est velit. adipiscing sagittis semper libero\n\n860Ipsum pharetra primis ut ante dui\n\n861Ligula libero nunc vitae fringilla\n\n862Vivamus ante Mauris eget\nLorem ante ac dolor dolor sagittis massa\n\n863Bibendum, Sed orci semper. elit. vel amet, purus orci\n\n864Velit. adipiscing quis, orci efficitur sagittis efficitur efficitur Integer ante faucibus. elit.\n\n865Eget pretium consectetur ut ante ac massa, molestie amet, hendrerit condimentum\n\n866Vel ac elit. ut nec scelerisque ac orci, et\n\n867Velit. nunc felis. in massa fringilla tincidunt. malesuada pretium\n\n868Efficitur enim scelerisque nec condimentum ipsum amet,\n\n869Ut dui vel ante hendrerit amet, in sagittis fames molestie fringilla ac Mauris\n\n870Primis fringilla condimentum ut ante et\n\n871Sem. vel vel in elit. in\nLorem\n\n872Elementum massa in semper quis, metus in semper vel massa massa, volutpat\n\n873Iaculis. orci, In tincidunt. eget tincidunt. vel Ut ac tortor\n\n874Sed Integer massa, ipsum bibendum, fringilla\n\n875Et sagittis\nLorem Sed finibus tortor elementum malesuada quis, Sed Interdum fringilla in quis, Fusce\n\n876Ipsum fringilla semper ante fringilla semper.\nLorem elementum primis vitae\n\n877Volutpat adipiscing dolor hendrerit nunc scelerisque sit volutpat elit. in ac massa, ipsum ipsum\n\n878Tincidunt. ante massa volutpat volutpat iaculis. lorem felis. nunc ipsum volutpat purus\n\n879Bibendum, Vivamus nunc viverra ut purus pharetra velit. rutrum consectetur\n\n880Hendrerit nunc velit. nunc Vivamus et vitae Integer condimentum\n\n881Sed tortor Fusce Fusce Integer vel ante\nLorem et volutpat massa Duis pharetra primis\n\n882Sit faucibus. massa ut elementum vel Mauris finibus\n\n883Eget Integer libero Duis dolor est\nLorem sit faucibus. ante et est\nLorem orci\n\n884Dolor hendrerit Duis Fusce dolor Integer pretium rutrum in,\n\n885Sed ligula primis finibus dolor\n\n886Ut metus finibus neque. tortor ac consectetur metus consectetur quis, Ut rutrum viverra molestie\n\n887Est efficitur libero est ipsum dolor et massa, ac ante ac pretium Duis ac iaculis.\n\n888Et in Sed pretium metus ut enim scelerisque In vel\n\n889Massa ipsum Interdum in Sed ante in massa, enim iaculis. viverra tincidunt. fringilla semper.\n\n890Posuere pretium purus felis. sit scelerisque et condimentum faucibus. velit. in, scelerisque\n\n891Ligula in nec ac molestie fames massa ante\n\n892In ac tortor rutrum ante Integer velit. felis. in condimentum\n\n893Bibendum, in, Sed molestie ipsum\n\n894Viverra vel in\nLorem malesuada efficitur primis sagittis ac ipsum fames in ac ac finibus\n\n895Massa ligula Duis nunc condimentum In eget primis vel purus ac\n\n896Fusce orci consectetur amet, sagittis orci, tincidunt. semper ante efficitur In\n\n897Dui eget viverra scelerisque vel fames nunc semper. hendrerit eget enim semper fringilla\n\n898Dui ante viverra faucibus. Integer ligula ac faucibus. ante\n\n899In faucibus. ante ante adipiscing rutrum semper In in\n\n900Ante adipiscing pretium sit Duis Interdum pretium sem. iaculis.\n\n901Massa, pretium rutrum neque. consectetur est Mauris massa pharetra elit.\n\n902Hendrerit dolor consectetur consectetur ac tincidunt. eget dolor\n\n903Bibendum, ac ut dui Sed in, libero massa fames et aliquam eget\n\n904Fames finibus adipiscing hendrerit faucibus. pretium\n\n905Sem. est molestie ante Integer orci, ante sagittis\n\n906Ut ipsum Duis scelerisque ac adipiscing semper tortor Vivamus orci ipsum massa sem. ac\n\n907Volutpat hendrerit consectetur Sed Integer vitae orci ut posuere eget ut\n\n908Primis Ut scelerisque adipiscing scelerisque et elementum in dui quis, ipsum semper. ipsum Ut\n\n909Velit.\nLorem ante Interdum sem. in in felis. tincidunt.\n\n910Duis Ut sit volutpat viverra condimentum Ut Ut primis sem. est condimentum volutpat eget aliquam\n\n911Eget semper. ac ante ut ante ut orci, dolor ipsum enim\n\n912Fringilla metus ligula ac rutrum est ligula neque. consectetur\n\n913Ac condimentum ut quis, ut sit consectetur felis. sem. bibendum, nunc in\n\n914Fusce faucibus. quis, ante vel ante elit. sit massa Fusce Ut iaculis. massa, finibus metus\n\n915Dolor condimentum massa in pharetra Ut efficitur\n\n916Iaculis. et vel massa adipiscing\n\n917Ligula massa ac Fusce dui semper\n\n918Elementum ut purus efficitur fringilla\n\n919Interdum pretium purus elementum vel felis.\n\n920Nec orci, efficitur vitae massa Vivamus Fusce vel rutrum ac ut sagittis\n\n921Primis ligula condimentum enim dui in\n\n922Ac pharetra ut\nLorem semper. metus vitae purus ac amet, faucibus. finibus Ut ac dolor\n\n923Quis, volutpat viverra metus ac eget Integer ipsum volutpat Duis molestie et in ac hendrerit\n\n924Scelerisque Sed vitae ut amet, rutrum primis condimentum dui bibendum, in\n\n925Finibus in Vivamus iaculis. libero elit. ante aliquam in tortor metus libero purus efficitur\n\n926Amet, elit. tincidunt. ipsum hendrerit pretium condimentum scelerisque neque. nec bibendum, Interdum rutrum\n\n927Sagittis est ipsum ac lorem in,\n\n928Pharetra dui massa, sit primis posuere in ipsum efficitur pretium primis ac in Vivamus condimentum\n\n929Orci, ac semper molestie viverra Vivamus eget dolor ante\n\n930Nunc est purus orci viverra elit. Sed in ante pharetra eget dui\n\n931In, nec sem. neque. consectetur consectetur eget et ut faucibus. in ante efficitur purus\n\n932Bibendum, consectetur scelerisque hendrerit ante orci,\n\n933Fames lorem bibendum, est condimentum nec\n\n934Sed Integer sem. ante ut est eget orci consectetur ac fames vel\n\n935Malesuada massa Duis pharetra ac Mauris metus elementum rutrum faucibus. libero neque. nec primis\n\n936In, semper. faucibus. primis bibendum,\n\n937Primis enim Mauris ut lorem sit dolor consectetur quis, ut sagittis\n\n938Velit. iaculis. efficitur ac condimentum malesuada vel ante condimentum Vivamus neque.\n\n939Vel viverra enim sit hendrerit amet, posuere ac eget elit. scelerisque vel amet,\n\n940Viverra Ut orci orci, Vivamus finibus in, ligula rutrum condimentum Interdum eget\n\n941Tincidunt. posuere massa, pretium lorem In est iaculis. purus ac rutrum\n\n942Elit. et massa, massa, Fusce\n\n943Lorem purus bibendum, et efficitur quis, orci, Integer elit. ipsum\n\n944Neque. Integer sagittis in metus adipiscing\nLorem\n\n945Duis vitae sem. semper. rutrum Mauris Ut adipiscing vitae\n\n946In purus ante consectetur sem. lorem\n\n947In lorem vitae ut In pretium\n\n948Fusce in orci ipsum purus fames pretium tincidunt.\n\n949Fusce condimentum semper semper. est malesuada ac\n\n950Fusce primis Mauris pharetra rutrum rutrum ante ac ut finibus neque. dui\n\n951Viverra aliquam scelerisque hendrerit orci in rutrum viverra in in tortor in\n\n952Bibendum, et ac consectetur efficitur\n\n953Quis, libero lorem Vivamus ut ligula massa,\n\n954In In scelerisque orci posuere Duis ante vitae hendrerit in\n\n955Lorem consectetur consectetur molestie metus adipiscing sagittis felis. consectetur Integer ante\n\n956Faucibus. ac sem. faucibus. posuere Sed ante\n\n957Lorem Interdum iaculis. consectetur molestie sagittis Interdum ante purus malesuada ac ac hendrerit hendrerit condimentum\n\n958Ut semper orci, orci ut ac semper. consectetur consectetur Mauris\n\n959\nLorem ipsum orci ac bibendum, scelerisque bibendum, quis, libero bibendum, nec et dolor\n\n960Ac massa, tortor quis, elit. massa, in amet, est volutpat\n\n961Consectetur ac ac elit. neque. pretium vel ac metus dolor semper.\n\n962Orci, ipsum in, aliquam neque. est viverra est\n\n963Ac ac massa massa, ac\n\n964Iaculis. finibus aliquam velit. ante\n\n965Massa, ipsum molestie est in Fusce efficitur fames velit. nunc\n\n966Integer lorem efficitur condimentum faucibus. ligula dui scelerisque ac Mauris pretium massa aliquam\n\n967Neque. elit. velit. lorem viverra ut\n\n968Ligula vel et volutpat elit. adipiscing in finibus posuere metus Interdum rutrum\n\n969Ac dui primis et tincidunt. vitae\n\n970Orci, In ante Duis elementum dolor malesuada fames ipsum\n\n971Sem. ipsum ante in Sed in elit.\n\n972Semper. eget iaculis. ut et\n\n973Sem. sagittis nec In pharetra efficitur ante Vivamus nunc aliquam felis. Sed faucibus. ac Mauris\n\n974Orci, faucibus. massa est condimentum In efficitur sagittis ac elit. velit. metus purus\n\n975Amet, ac vel scelerisque consectetur Integer viverra faucibus.\n\n976Massa, fames in est in quis, vel dolor pretium semper\n\n977Ligula et Duis in Integer fames ac Duis volutpat et ac ligula\n\n978Elit. ipsum ac pretium volutpat\n\n979Ac hendrerit sem. quis, tortor enim in hendrerit scelerisque primis quis, neque.\n\n980Ante posuere metus semper vel metus faucibus. orci, Sed elementum\n\n981Et efficitur volutpat orci consectetur sagittis In vitae elit. dolor\n\n982Efficitur ante efficitur consectetur Integer eget orci\n\n983Ac sagittis amet, ac aliquam nunc primis Interdum neque. vitae fringilla aliquam eget\n\n984Adipiscing orci, In posuere et aliquam Ut tortor orci iaculis. in scelerisque\n\n985Vivamus ipsum sem. ut faucibus. quis, elit. sagittis consectetur lorem adipiscing pharetra felis. lorem ante\n\n986Finibus ante metus\nLorem elit. adipiscing pharetra scelerisque quis,\n\n987Tincidunt. felis. vitae tincidunt. consectetur hendrerit in in ipsum amet, volutpat\n\n988Tincidunt. in ante ac amet, vitae efficitur posuere sem. scelerisque condimentum\n\n989Vitae fames dui consectetur ante amet, hendrerit\n\n990Molestie in viverra fames ante ante lorem viverra Interdum\n\n991Elementum in quis, primis scelerisque sagittis\n\n992Ut metus Interdum efficitur orci,\n\n993Faucibus. amet, In neque. velit. ante enim scelerisque primis malesuada elit.\n\n994Elementum nec ligula primis massa, In\n\n995Semper Vivamus aliquam efficitur condimentum consectetur\n\n996Fusce Interdum efficitur tincidunt. orci elit. et rutrum in,\n\n997Sit tortor sit hendrerit vitae fames nec elementum nunc malesuada aliquam\n\n998Eget massa in in tincidunt. Sed molestie nunc Ut metus ipsum\n\n999Metus vel condimentum Vivamus neque. quis, ligula in rutrum neque. iaculis. malesuada Mauris\n\n1000Et Fusce ac elit. est est consectetur enim Interdum felis.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\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 | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\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| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |",
     "category": "Components",
     "section": "Selection",
     "boost": "Dropdowns components/dropdowns #components/dropdowns Components Selection"
@@ -439,16 +439,6 @@
     "section": "Content",
     "boost": "FormLabel components/formLabel #components/formLabel Components Content"
   },
-  {
-    "id": "components/fullscreenMap",
-    "title": "components/fullscreenMap",
-    "lead": null,
-    "summary": "- resize: 1",
-    "searchText": "Overview\n- resize: 1",
-    "category": "Components",
-    "section": "Map",
-    "boost": "components/fullscreenMap #components/fullscreenMap Components Map"
-  },
   {
     "id": "components/groupedItemList",
     "title": "GroupedItemList",
@@ -543,8 +533,8 @@
     "id": "components/mapCircle",
     "title": "Circle",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Circle\nCircle\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Circle\nCircle\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
     "category": "Components",
     "section": "Map",
     "boost": "Circle components/mapCircle #components/mapCircle Components Map"
@@ -553,8 +543,8 @@
     "id": "components/mapCluster",
     "title": "Clusters",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Clusters\nClusters\nTerms of use© 1987–2025 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nRegenerate dataToggle cluster\nClusters with POIs\nTerms of use© 1987–2025 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nRegenerate data",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Clusters\nClusters\nTerms of use© 1987–2026 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nRegenerate dataToggle cluster\nClusters with POIs\nTerms of use© 1987–2026 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nRegenerate data",
     "category": "Components",
     "section": "Map",
     "boost": "Clusters components/mapCluster #components/mapCluster Components Map"
@@ -563,8 +553,8 @@
     "id": "components/mapContext",
     "title": "Map",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Map\nMap\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n### ContextMenu\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| onOpen | Function | — | Callback function triggered when the context menu has opened. It returns the coordinates where the map has been clicked: { lat: 48.07182240898762, lng: 11.495482666015647 } |\n| children | List of ContextMenuItem | — | The list of ContextMenuItem to render. Note that the order is important and may not be altered after the first render as the component tries to update the labels directly and relieson the order of items. Also do not omit an item which you want to add later on. Rather disable it. |\n### ContextMenuItem\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | String | — | The actual label text. |\n| disabled | Boolean | — | Defines whether or not the item is disabled. |\n| hasSpinner | Boolean | — | Defines whether or not a spinner is rendered instead of the label. |\n| icon | String | — | The name of the icon added to the label. |\n| callback | Function | — | Callback function that is called when clicking on the item. |\n| labelClassName | String | — | Additional classes added to the label element. |\n| className | String | — | Additional classes added to the wrapper element. |",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Map\nMap\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n### ContextMenu\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| onOpen | Function | — | Callback function triggered when the context menu has opened. It returns the coordinates where the map has been clicked: { lat: 48.07182240898762, lng: 11.495482666015647 } |\n| children | List of ContextMenuItem | — | The list of ContextMenuItem to render. Note that the order is important and may not be altered after the first render as the component tries to update the labels directly and relieson the order of items. Also do not omit an item which you want to add later on. Rather disable it. |\n### ContextMenuItem\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | String | — | The actual label text. |\n| disabled | Boolean | — | Defines whether or not the item is disabled. |\n| hasSpinner | Boolean | — | Defines whether or not a spinner is rendered instead of the label. |\n| icon | String | — | The name of the icon added to the label. |\n| callback | Function | — | Callback function that is called when clicking on the item. |\n| labelClassName | String | — | Additional classes added to the label element. |\n| className | String | — | Additional classes added to the wrapper element. |",
     "category": "Components",
     "section": "Map",
     "boost": "Map components/mapContext #components/mapContext Components Map"
@@ -573,8 +563,8 @@
     "id": "components/mapDraggableMarker",
     "title": "Draggable marker",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Draggable marker\nDraggable marker\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nMarker position{\"lat\":48.16,\"lng\":11.38}",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Draggable marker\nDraggable marker\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nMarker position{\"lat\":48.16,\"lng\":11.38}",
     "category": "Components",
     "section": "Map",
     "boost": "Draggable marker components/mapDraggableMarker #components/mapDraggableMarker Components Map"
@@ -593,8 +583,8 @@
     "id": "components/mapInfoBubble",
     "title": "InfoBubble",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "InfoBubble\nInfoBubble\nTerms of use© 1987–2025 HERE\n\n10 km\n\nAnsicht auswählen\nKartenansicht\nSatellit\n\nVerkehrslage\nVerkehrsstörungen anzeigen\n\nToggle info",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "InfoBubble\nInfoBubble\nTerms of use© 1987–2026 HERE\n\n10 km\n\nAnsicht auswählen\nKartenansicht\nSatellit\n\nVerkehrslage\nVerkehrsstörungen anzeigen\n\nToggle info",
     "category": "Components",
     "section": "Map",
     "boost": "InfoBubble components/mapInfoBubble #components/mapInfoBubble Components Map"
@@ -603,8 +593,8 @@
     "id": "components/mapLayerGroup",
     "title": "MapLayerGroup",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "MapLayerGroup\nMapLayerGroup\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "MapLayerGroup\nMapLayerGroup\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
     "category": "Components",
     "section": "Map",
     "boost": "MapLayerGroup components/mapLayerGroup #components/mapLayerGroup Components Map"
@@ -614,7 +604,7 @@
     "title": "Marker",
     "lead": "Markers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.",
     "summary": "Markers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.",
-    "searchText": "Marker\nMarkers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.\nMarker\nNote: The map zoom level does not affect the size of Markers.\n\nSharing icon between Markers\n\nIt's possible to share icon instances between different markers. This can be used to improve rendering performance of many markers on the map.\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nSingleMapMarker\nVehicle\n\nVehicle\n2\n1\n\nVehicle\n2\n1\n\nThe hover state is triggered on mouse hover or by adding the class hover\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n2\n1\n\nVehicle\n\nVehicle\n\nVehicle\n2\n1\n\nTo activate the active state of any marker you have to add the class active\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\n236km\n\nVehicle\n\nPOI\n\nGeofence\n\nMax height 2.5m\n\n236km\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n\nVehicle\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n\nVehicle\n\nThe animation plays automatically when using the SingleMapMarker prop pinging\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nClusterMapMarker\n100\n\n10\n25\n\n100\n\n10\n25\n\n100\n\n100\n\n100\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| count | Number | — | Number displayed in the center. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence' or 'bg-map-marker-route'. |",
+    "searchText": "Marker\nMarkers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.\nMarker\nNote: The map zoom level does not affect the size of Markers.\n\nSharing icon between Markers\n\nIt's possible to share icon instances between different markers. This can be used to improve rendering performance of many markers on the map.\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nSingleMapMarker\nVehicle\n\nVehicle\n2\n1\n\nVehicle\n2\n1\n\nThe hover state is triggered on mouse hover or by adding the class hover\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n2\n1\n\nVehicle\n\nVehicle\n\nVehicle\n2\n1\n\nTo activate the active state of any marker you have to add the class active\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\n236km\n\nVehicle\n\nPOI\n\nGeofence\n\nMax height 2.5m\n\n236km\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n\nVehicle\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n\nVehicle\n\nThe animation plays automatically when using the SingleMapMarker prop pinging\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nClusterMapMarker\n100\n\n10\n25\n\n100\n\n10\n25\n\n100\n\n100\n\n100\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| count | Number | — | Number displayed in the center. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence' or 'bg-map-marker-route'. |",
     "category": "Components",
     "section": "Map",
     "boost": "Marker components/mapMarker #components/mapMarker Components Map"
@@ -623,8 +613,8 @@
     "id": "components/mapPolygon",
     "title": "Polygon",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Polygon\nPolygon\nTerms of use© 1987–2025 HERE\n\n200 m\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nColorcolor-warmup-salmonColdplay\ncolor-coldplay-wine\ncolor-coldplay-aubergine\ncolor-coldplay-kashmir\ncolor-coldplay-fountain\ncolor-coldplay-turquoise\ncolor-coldplay-bermuda\ncolor-coldplay-moos\ncolor-coldplay-primrose\ncolor-coldplay-khaki\nWarmup\ncolor-warmup-crimson\ncolor-warmup-victoria\ncolor-warmup-cadillac\ncolor-warmup-raspberry\ncolor-warmup-cerise\ncolor-warmup-charm\ncolor-warmup-salmon\ncolor-warmup-cherokee\ncolor-warmup-corn\nGray\ngray-darkest\ngray-darker\ngray-dark\ngray\ngray-light\ngray-lighter\ngray-lightest\ngray-decent\nBrand\nbrand-primary\nbrand-secondary\nbrand-info\nbrand-success\nbrand-warning\nbrand-danger\nStatus\ncolor-status-available\ncolor-status-driving\ncolor-status-resting\ncolor-status-working\nMap Marker\ncolor-map-marker-text\ncolor-map-marker-active\ncolor-map-marker-asset\ncolor-map-marker-poi\ncolor-map-marker-geofence\ncolor-map-marker-route\ncolor-map-marker-info\ncolor-map-marker-success\ncolor-map-marker-warning\ncolor-map-marker-danger\nRating\ncolor-rating-1\ncolor-rating-2\ncolor-rating-3\ncolor-rating-4\ncolor-rating-5\nHighlight\ncolor-highlight-darkest\ncolor-highlight-darker\ncolor-highlight-dark\ncolor-highlight\ncolor-highlight-light\ncolor-highlight-lighter\ncolor-highlight-lightest\ncolor-highlight-decent\n\nTerms of use© 1987–2025 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Polygon\nPolygon\nTerms of use© 1987–2026 HERE\n\n200 m\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nColorcolor-warmup-salmonColdplay\ncolor-coldplay-wine\ncolor-coldplay-aubergine\ncolor-coldplay-kashmir\ncolor-coldplay-fountain\ncolor-coldplay-turquoise\ncolor-coldplay-bermuda\ncolor-coldplay-moos\ncolor-coldplay-primrose\ncolor-coldplay-khaki\nWarmup\ncolor-warmup-crimson\ncolor-warmup-victoria\ncolor-warmup-cadillac\ncolor-warmup-raspberry\ncolor-warmup-cerise\ncolor-warmup-charm\ncolor-warmup-salmon\ncolor-warmup-cherokee\ncolor-warmup-corn\nGray\ngray-darkest\ngray-darker\ngray-dark\ngray\ngray-light\ngray-lighter\ngray-lightest\ngray-decent\nBrand\nbrand-primary\nbrand-secondary\nbrand-info\nbrand-success\nbrand-warning\nbrand-danger\nStatus\ncolor-status-available\ncolor-status-driving\ncolor-status-resting\ncolor-status-working\nMap Marker\ncolor-map-marker-text\ncolor-map-marker-active\ncolor-map-marker-asset\ncolor-map-marker-poi\ncolor-map-marker-geofence\ncolor-map-marker-route\ncolor-map-marker-info\ncolor-map-marker-success\ncolor-map-marker-warning\ncolor-map-marker-danger\nRating\ncolor-rating-1\ncolor-rating-2\ncolor-rating-3\ncolor-rating-4\ncolor-rating-5\nHighlight\ncolor-highlight-darkest\ncolor-highlight-darker\ncolor-highlight-dark\ncolor-highlight\ncolor-highlight-light\ncolor-highlight-lighter\ncolor-highlight-lightest\ncolor-highlight-decent\n\nTerms of use© 1987–2026 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
     "category": "Components",
     "section": "Map",
     "boost": "Polygon components/mapPolygon #components/mapPolygon Components Map"
@@ -634,7 +624,7 @@
     "title": "Route",
     "lead": "There are currently 3 different route styles built-in into the map component.",
     "summary": "There are currently 3 different route styles built-in into the map component.",
-    "searchText": "Route\nThere are currently 3 different route styles built-in into the map component.\nRoute\nThe \"reduced\" style is meant for historic routes and shall indicate that the driver went that route but is ahead of a certain timestamp.\n\nThe \"alternativeRoute\" style is meant for route planning cases and shall show alternate routes.\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with changing geometry\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nChange routeToggle route\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with changing styles\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nToggle reduced styleToggle arrows\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with different colors\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute indicating a range for electric vehicles\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute sandbox\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\n{\n\"segments\": [\n{\n\"points\": [\n{\n\"lat\": 48.17933,\n\"lng\": 11.48731\n},\n{\n\"lat\": 48.17937,\n\"lng\": 11.4875\n},\n{\n\"lat\": 48.17939,\n\"lng\": 11.48767\n},\n{\n\"lat\": 48.17941,\n\"lng\": 11.4879\n},\n{\n\"lat\": 48.17942,\n\"lng\": 11.48826\n},\n{\n\"lat\": 48.17942,\n\"lng\": 11.48867\n},\n{\n\"lat\": 48.17941,\n\"lng\": 11.48924\n},\n{\n\"lat\": 48.1794,\n\"lng\": 11.48959\n},\n{\n\"lat\": 48.17939,\n\"lng\": 11.48999\n},\n{\n\"lat\": 48.17936,\n\"lng\": 11.4904\n},\n{\n\"lat\": 48.17933,\n\"lng\": 11.4906\n},\n{\n\"lat\": 48.17927,\n\"lng\": 11.49095\n},\n{\n\"lat\": 48.17915,\n\"lng\": 11.49154\n},\n{\n\"lat\": 48.17895,\n\"lng\": 11.49235\n},\n{\n\"lat\": 48.1788,\n\"lng\": 11.49283\n},\n{\n\"lat\": 48.17869,\n\"lng\": 11.49314\n},\n{\n\"lat\": 48.17856,\n\"lng\": 11.49346\n},\n{\n\"lat\": 48.17843,\n\"lng\": 11.49376\n},\n{\n\"lat\": 48.17828,\n\"lng\": 11.49413\n},\n{\n\"lat\": 48.17813,\n\"lng\": 11.49445\n},\n{\n\"lat\": 48.17797,\n\"lng\": 11.49479\n},\n{\n\"lat\": 48.1778,\n\"lng\": 11.49521\n},\n{\n\"lat\": 48.17775,\n\"lng\": 11.49538\n},\n{\n\"lat\": 48.17769,\n\"lng\": 11.49551\n},\n{\n\"lat\": 48.17757,\n\"lng\": 11.49576\n},\n{\n\"lat\": 48.17752,\n\"lng\": 11.49586\n},\n{\n\"lat\": 48.17748,\n\"lng\": 11.49595\n},\n{\n\"lat\": 48.17744,\n\"lng\": 11.49604\n},\n{\n\"lat\": 48.17735,\n\"lng\": 11.49622\n},\n{\n\"lat\": 48.17722,\n\"lng\": 11.49649\n},\n{\n\"lat\": 48.17701,\n\"lng\": 11.49692\n},\n{\n\"lat\": 48.177,\n\"lng\": 11.49695\n},\n{\n\"lat\": 48.17698,\n\"lng\": 11.49699\n},\n{\n\"lat\": 48.1767,\n\"lng\": 11.49758\n},\n{\n\"lat\": 48.1758,\n\"lng\": 11.49944\n},\n{\n\"lat\": 48.17572,\n\"lng\": 11.4996\n},\n{\n\"lat\": 48.17538,\n\"lng\": 11.50031\n},\n{\n\"lat\": 48.17523,\n\"lng\": 11.50061\n},\n{\n\"lat\": 48.17519,\n\"lng\": 11.50069\n},\n{\n\"lat\": 48.17513,\n\"lng\": 11.50081\n},\n{\n\"lat\": 48.17495,\n\"lng\": 11.50117\n},\n{\n\"lat\": 48.17468,\n\"lng\": 11.50171\n},\n{\n\"lat\": 48.17449,\n\"lng\": 11.50205\n},\n{\n\"lat\": 48.17431,\n\"lng\": 11.50234\n},\n{\n\"lat\": 48.17418,\n\"lng\": 11.50254\n},\n{\n\"lat\": 48.17405,\n\"lng\": 11.5027\n},\n{\n\"lat\": 48.17346,\n\"lng\": 11.5035\n},\n{\n\"lat\": 48.173,\n\"lng\": 11.50416\n},\n{\n\"lat\": 48.17276,\n\"lng\": 11.50448\n},\n{\n\"lat\": 48.17253,\n\"lng\": 11.50482\n},\n{\n\"lat\": 48.17237,\n\"lng\": 11.50509\n},\n{\n\"lat\": 48.17223,\n\"lng\": 11.50536\n},\n{\n\"lat\": 48.1721,\n\"lng\": 11.50564\n},\n{\n\"lat\": 48.17188,\n\"lng\": 11.50614\n},\n{\n\"lat\": 48.17169,\n\"lng\": 11.50658\n},\n{\n\"lat\": 48.17128,\n\"lng\": 11.50753\n},\n{\n\"lat\": 48.17117,\n\"lng\": 11.50777\n},\n{\n\"lat\": 48.17095,\n\"lng\": 11.50828\n},\n{\n\"lat\": 48.1709,\n\"lng\": 11.50838\n},\n{\n\"lat\": 48.17076,\n\"lng\": 11.50871\n},\n{\n\"lat\": 48.17057,\n\"lng\": 11.50922\n},\n{\n\"lat\": 48.17051,\n\"lng\": 11.50938\n},\n{\n\"lat\": 48.17042,\n\"lng\": 11.50953\n},\n{\n\"lat\": 48.17032,\n\"lng\": 11.50976\n},\n{\n\"lat\": 48.17022,\n\"lng\": 11.50999\n},\n{\n\"lat\": 48.17014,\n\"lng\": 11.51017\n},\n{\n\"lat\": 48.17007,\n\"lng\": 11.51029\n},\n{\n\"lat\": 48.16999,\n\"lng\": 11.51044\n},\n{\n\"lat\": 48.16993,\n\"lng\": 11.51055\n},\n{\n\"lat\": 48.16985,\n\"lng\": 11.51069\n},\n{\n\"lat\": 48.1698,\n\"lng\": 11.51078\n},\n{\n\"lat\": 48.16976,\n\"lng\": 11.51086\n},\n{\n\"lat\": 48.16984,\n\"lng\": 11.5109\n},\n{\n\"lat\": 48.16991,\n\"lng\": 11.51093\n},\n{\n\"lat\": 48.17003,\n\"lng\": 11.51097\n},\n{\n\"lat\": 48.17015,\n\"lng\": 11.51099\n},\n{\n\"lat\": 48.1703,\n\"lng\": 11.511\n},\n{\n\"lat\": 48.17048,\n\"lng\": 11.51104\n},\n{\n\"lat\": 48.17068,\n\"lng\": 11.5111\n},\n{\n\"lat\": 48.17093,\n\"lng\": 11.51118\n},\n{\n\"lat\": 48.17112,\n\"lng\": 11.51124\n},\n{\n\"lat\": 48.17131,\n\"lng\": 11.51131\n},\n{\n\"lat\": 48.1715,\n\"lng\": 11.51139\n},\n{\n\"lat\": 48.17165,\n\"lng\": 11.51147\n},\n{\n\"lat\": 48.17179,\n\"lng\": 11.51156\n},\n{\n\"lat\": 48.17192,\n\"lng\": 11.51166\n},\n{\n\"lat\": 48.17205,\n\"lng\": 11.51178\n},\n{\n\"lat\": 48.17219,\n\"lng\": 11.51192\n},\n{\n\"lat\": 48.17232,\n\"lng\": 11.51206\n},\n{\n\"lat\": 48.17242,\n\"lng\": 11.51219\n},\n{\n\"lat\": 48.17251,\n\"lng\": 11.51234\n},\n{\n\"lat\": 48.17261,\n\"lng\": 11.5125\n},\n{\n\"lat\": 48.1727,\n\"lng\": 11.51268\n},\n{\n\"lat\": 48.17279,\n\"lng\": 11.51287\n},\n{\n\"lat\": 48.17294,\n\"lng\": 11.51328\n},\n{\n\"lat\": 48.17304,\n\"lng\": 11.51362\n},\n{\n\"lat\": 48.17307,\n\"lng\": 11.51373\n},\n{\n\"lat\": 48.17315,\n\"lng\": 11.51402\n},\n{\n\"lat\": 48.17333,\n\"lng\": 11.51476\n},\n{\n\"lat\": 48.17341,\n\"lng\": 11.51511\n},\n{\n\"lat\": 48.17365,\n\"lng\": 11.51612\n},\n{\n\"lat\": 48.17394,\n\"lng\": 11.51727\n},\n{\n\"lat\": 48.1741,\n\"lng\": 11.51791\n},\n{\n\"lat\": 48.17416,\n\"lng\": 11.51819\n},\n{\n\"lat\": 48.17433,\n\"lng\": 11.51893\n},\n{\n\"lat\": 48.17438,\n\"lng\": 11.51911\n},\n{\n\"lat\": 48.17453,\n\"lng\": 11.51968\n},\n{\n\"lat\": 48.17465,\n\"lng\": 11.52003\n},\n{\n\"lat\": 48.17469,\n\"lng\": 11.52013\n},\n{\n\"lat\": 48.17477,\n\"lng\": 11.52031\n},\n{\n\"lat\": 48.17488,\n\"lng\": 11.52056\n},\n{\n\"lat\": 48.17501,\n\"lng\": 11.52084\n},\n{\n\"lat\": 48.17509,\n\"lng\": 11.52099\n},\n{\n\"lat\": 48.1754,\n\"lng\": 11.52154\n},\n{\n\"lat\": 48.17541,\n\"lng\": 11.52171\n},\n{\n\"lat\": 48.17542,\n\"lng\": 11.52198\n},\n{\n\"lat\": 48.17541,\n\"lng\": 11.52245\n},\n{\n\"lat\": 48.17517,\n\"lng\": 11.52292\n},\n{\n\"lat\": 48.17478,\n\"lng\": 11.52371\n},\n{\n\"lat\": 48.17462,\n\"lng\": 11.52403\n},\n{\n\"lat\": 48.17455,\n\"lng\": 11.52416\n},\n{\n\"lat\": 48.17451,\n\"lng\": 11.52425\n},\n{\n\"lat\": 48.17442,\n\"lng\": 11.52442\n},\n{\n\"lat\": 48.17421,\n\"lng\": 11.52483\n},\n{\n\"lat\": 48.17412,\n\"lng\": 11.52499\n},\n{\n\"lat\": 48.17388,\n\"lng\": 11.52544\n},\n{\n\"lat\": 48.17376,\n\"lng\": 11.52567\n},\n{\n\"lat\": 48.17353,\n\"lng\": 11.52614\n},\n{\n\"lat\": 48.17317,\n\"lng\": 11.52684\n},\n{\n\"lat\": 48.17299,\n\"lng\": 11.52719\n},\n{\n\"lat\": 48.17267,\n\"lng\": 11.52782\n},\n{\n\"lat\": 48.17262,\n\"lng\": 11.52792\n},\n{\n\"lat\": 48.17246,\n\"lng\": 11.52824\n},\n{\n\"lat\": 48.17225,\n\"lng\": 11.52861\n},\n{\n\"lat\": 48.17219,\n\"lng\": 11.52872\n},\n{\n\"lat\": 48.17214,\n\"lng\": 11.52882\n},\n{\n\"lat\": 48.17189,\n\"lng\": 11.52926\n},\n{\n\"lat\": 48.17187,\n\"lng\": 11.5293\n},\n{\n\"lat\": 48.1715,\n\"lng\": 11.52995\n},\n{\n\"lat\": 48.17132,\n\"lng\": 11.53026\n},\n{\n\"lat\": 48.17127,\n\"lng\": 11.53034\n},\n{\n\"lat\": 48.17103,\n\"lng\": 11.53075\n},\n{\n\"lat\": 48.17073,\n\"lng\": 11.53125\n},\n{\n\"lat\": 48.17028,\n\"lng\": 11.53194\n},\n{\n\"lat\": 48.17017,\n\"lng\": 11.53211\n},\n{\n\"lat\": 48.16982,\n\"lng\": 11.53266\n},\n{\n\"lat\": 48.16976,\n\"lng\": 11.53277\n},\n{\n\"lat\": 48.16939,\n\"lng\": 11.53331\n},\n{\n\"lat\": 48.16885,\n\"lng\": 11.53418\n},\n{\n\"lat\": 48.16872,\n\"lng\": 11.53437\n},\n{\n\"lat\": 48.16822,\n\"lng\": 11.5351\n},\n{\n\"lat\": 48.16809,\n\"lng\": 11.5353\n},\n{\n\"lat\": 48.16791,\n\"lng\": 11.53554\n},\n{\n\"lat\": 48.16785,\n\"lng\": 11.53562\n},\n{\n\"lat\": 48.16774,\n\"lng\": 11.53577\n},\n{\n\"lat\": 48.16761,\n\"lng\": 11.53593\n},\n{\n\"lat\": 48.16745,\n\"lng\": 11.53612\n},\n{\n\"lat\": 48.16714,\n\"lng\": 11.53644\n},\n{\n\"lat\": 48.167,\n\"lng\": 11.53659\n},\n{\n\"lat\": 48.16695,\n\"lng\": 11.53664\n},\n{\n\"lat\": 48.16688,\n\"lng\": 11.53671\n},\n{\n\"lat\": 48.16653,\n\"lng\": 11.53704\n},\n{\n\"lat\": 48.1659,\n\"lng\": 11.53768\n},\n{\n\"lat\": 48.16578,\n\"lng\": 11.53781\n},\n{\n\"lat\": 48.16564,\n\"lng\": 11.53796\n},\n{\n\"lat\": 48.1655,\n\"lng\": 11.53812\n},\n{\n\"lat\": 48.16513,\n\"lng\": 11.53854\n},\n{\n\"lat\": 48.16487,\n\"lng\": 11.53887\n},\n{\n\"lat\": 48.16472,\n\"lng\": 11.53908\n},\n{\n\"lat\": 48.1644,\n\"lng\": 11.53958\n},\n{\n\"lat\": 48.16432,\n\"lng\": 11.53971\n},\n{\n\"lat\": 48.16369,\n\"lng\": 11.54072\n},\n{\n\"lat\": 48.16354,\n\"lng\": 11.54097\n},\n{\n\"lat\": 48.16328,\n\"lng\": 11.54138\n},\n{\n\"lat\": 48.16281,\n\"lng\": 11.54216\n},\n{\n\"lat\": 48.16231,\n\"lng\": 11.54299\n},\n{\n\"lat\": 48.16185,\n\"lng\": 11.54381\n},\n{\n\"lat\": 48.16127,\n\"lng\": 11.54476\n},\n{\n\"lat\": 48.16115,\n\"lng\": 11.54496\n},\n{\n\"lat\": 48.16097,\n\"lng\": 11.54525\n},\n{\n\"lat\": 48.16073,\n\"lng\": 11.54561\n},\n{\n\"lat\": 48.16056,\n\"lng\": 11.54587\n},\n{\n\"lat\": 48.16029,\n\"lng\": 11.54625\n},\n{\n\"lat\": 48.16014,\n\"lng\": 11.54644\n},\n{\n\"lat\": 48.15994,\n\"lng\": 11.54668\n},\n{\n\"lat\": 48.15979,\n\"lng\": 11.54683\n},\n{\n\"lat\": 48.15969,\n\"lng\": 11.54693\n},\n{\n\"lat\": 48.15958,\n\"lng\": 11.54707\n},\n{\n\"lat\": 48.15947,\n\"lng\": 11.54721\n},\n{\n\"lat\": 48.15933,\n\"lng\": 11.54737\n},\n{\n\"lat\": 48.15902,\n\"lng\": 11.54779\n},\n{\n\"lat\": 48.15882,\n\"lng\": 11.54804\n},\n{\n\"lat\": 48.15811,\n\"lng\": 11.54893\n},\n{\n\"lat\": 48.15794,\n\"lng\": 11.54914\n},\n{\n\"lat\": 48.15734,\n\"lng\": 11.54987\n},\n{\n\"lat\": 48.15605,\n\"lng\": 11.55145\n},\n{\n\"lat\": 48.15531,\n\"lng\": 11.55236\n},\n{\n\"lat\": 48.15523,\n\"lng\": 11.55246\n},\n{\n\"lat\": 48.15422,\n\"lng\": 11.55378\n},\n{\n\"lat\": 48.15389,\n\"lng\": 11.55422\n},\n{\n\"lat\": 48.15342,\n\"lng\": 11.55479\n},\n{\n\"lat\": 48.15274,\n\"lng\": 11.55563\n},\n{\n\"lat\": 48.1521,\n\"lng\": 11.55639\n},\n{\n\"lat\": 48.15167,\n\"lng\": 11.5569\n},\n{\n\"lat\": 48.15153,\n\"lng\": 11.55707\n},\n{\n\"lat\": 48.15131,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15102,\n\"lng\": 11.55766\n},\n{\n\"lat\": 48.1509,\n\"lng\": 11.55778\n},\n{\n\"lat\": 48.15085,\n\"lng\": 11.55771\n},\n{\n\"lat\": 48.15077,\n\"lng\": 11.55763\n},\n{\n\"lat\": 48.15061,\n\"lng\": 11.55751\n},\n{\n\"lat\": 48.15043,\n\"lng\": 11.55736\n},\n{\n\"lat\": 48.15036,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15033,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15029,\n\"lng\": 11.55735\n},\n{\n\"lat\": 48.15026,\n\"lng\": 11.55737\n},\n{\n\"lat\": 48.15023,\n\"lng\": 11.55742\n},\n{\n\"lat\": 48.15021,\n\"lng\": 11.55746\n},\n{\n\"lat\": 48.15021,\n\"lng\": 11.55753\n},\n{\n\"lat\": 48.15024,\n\"lng\": 11.55783\n},\n{\n\"lat\": 48.15027,\n\"lng\": 11.55813\n},\n{\n\"lat\": 48.15028,\n\"lng\": 11.55824\n},\n{\n\"lat\": 48.15028,\n\"lng\": 11.55836\n},\n{\n\"lat\": 48.15027,\n\"lng\": 11.55848\n},\n{\n\"lat\": 48.15023,\n\"lng\": 11.55868\n},\n{\n\"lat\": 48.1502,\n\"lng\": 11.55881\n},\n{\n\"lat\": 48.15017,\n\"lng\": 11.55891\n},\n{\n\"lat\": 48.14997,\n\"lng\": 11.55967\n},\n{\n\"lat\": 48.14985,\n\"lng\": 11.5601\n},\n{\n\"lat\": 48.14919,\n\"lng\": 11.56242\n},\n{\n\"lat\": 48.14908,\n\"lng\": 11.56282\n},\n{\n\"lat\": 48.14906,\n\"lng\": 11.56288\n},\n{\n\"lat\": 48.14873,\n\"lng\": 11.56403\n},\n{\n\"lat\": 48.14858,\n\"lng\": 11.56455\n},\n{\n\"lat\": 48.14845,\n\"lng\": 11.56501\n},\n{\n\"lat\": 48.14833,\n\"lng\": 11.56545\n},\n{\n\"lat\": 48.14821,\n\"lng\": 11.56587\n},\n{\n\"lat\": 48.14804,\n\"lng\": 11.5665\n},\n{\n\"lat\": 48.14793,\n\"lng\": 11.56688\n},\n{\n\"lat\": 48.14791,\n\"lng\": 11.56696\n},\n{\n\"lat\": 48.14782,\n\"lng\": 11.56726\n},\n{\n\"lat\": 48.1476,\n\"lng\": 11.56804\n},\n{\n\"lat\": 48.14755,\n\"lng\": 11.56823\n},\n{\n\"lat\": 48.14752,\n\"lng\": 11.56834\n},\n{\n\"lat\": 48.14725,\n\"lng\": 11.56927\n},\n{\n\"lat\": 48.14702,\n\"lng\": 11.5701\n},\n{\n\"lat\": 48.14695,\n\"lng\": 11.57037\n},\n{\n\"lat\": 48.14689,\n\"lng\": 11.57057\n},\n{\n\"lat\": 48.14631,\n\"lng\": 11.57269\n},\n{\n\"lat\": 48.14623,\n\"lng\": 11.57297\n},\n{\n\"lat\": 48.14607,\n\"lng\": 11.5732\n},\n{\n\"lat\": 48.14596,\n\"lng\": 11.57336\n},\n{\n\"lat\": 48.14587,\n\"lng\": 11.57355\n},\n{\n\"lat\": 48.14585,\n\"lng\": 11.57359\n},\n{\n\"lat\": 48.14577,\n\"lng\": 11.57378\n},\n{\n\"lat\": 48.14566,\n\"lng\": 11.57413\n},\n{\n\"lat\": 48.14562,\n\"lng\": 11.57426\n},\n{\n\"lat\": 48.14555,\n\"lng\": 11.57433\n},\n{\n\"lat\": 48.14552,\n\"lng\": 11.57439\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57447\n},\n{\n\"lat\": 48.14546,\n\"lng\": 11.5746\n},\n{\n\"lat\": 48.14541,\n\"lng\": 11.57482\n},\n{\n\"lat\": 48.14538,\n\"lng\": 11.57501\n},\n{\n\"lat\": 48.14537,\n\"lng\": 11.57518\n},\n{\n\"lat\": 48.14539,\n\"lng\": 11.57552\n},\n{\n\"lat\": 48.14544,\n\"lng\": 11.57592\n},\n{\n\"lat\": 48.14546,\n\"lng\": 11.57626\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57667\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57702\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57722\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57737\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57746\n},\n{\n\"lat\": 48.1455,\n\"lng\": 11.57762\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57768\n},\n{\n\"lat\": 48.14547,\n\"lng\": 11.5778\n},\n{\n\"lat\": 48.14537,\n\"lng\": 11.57825\n},\n{\n\"lat\": 48.14525,\n\"lng\": 11.57878\n},\n{\n\"lat\": 48.14486,\n\"lng\": 11.57861\n},\n{\n\"lat\": 48.14467,\n\"lng\": 11.57852\n},\n{\n\"lat\": 48.14428,\n\"lng\": 11.57833\n},\n{\n\"lat\": 48.14411,\n\"lng\": 11.57825\n},\n{\n\"lat\": 48.14389,\n\"lng\": 11.57814\n},\n{\n\"lat\": 48.14357,\n\"lng\": 11.57799\n},\n{\n\"lat\": 48.1433,\n\"lng\": 11.57787\n},\n{\n\"lat\": 48.14318,\n\"lng\": 11.57782\n},\n{\n\"lat\": 48.14304,\n\"lng\": 11.57776\n},\n{\n\"lat\": 48.14263,\n\"lng\": 11.57752\n},\n{\n\"lat\": 48.14258,\n\"lng\": 11.57772\n},\n{\n\"lat\": 48.14244,\n\"lng\": 11.57771\n},\n{\n\"lat\": 48.14237,\n\"lng\": 11.57791\n},\n{\n\"lat\": 48.14244,\n\"lng\": 11.57771\n},\n{\n\"lat\": 48.14258,\n\"lng\": 11.57772\n},\n{\n\"lat\": 48.14251,\n\"lng\": 11.57804\n},\n{\n\"lat\": 48.14249,\n\"lng\": 11.57811\n},\n{\n\"lat\": 48.14241,\n\"lng\": 11.57837\n},\n{\n\"lat\": 48.14234,\n\"lng\": 11.57869\n},\n{\n\"lat\": 48.14222,\n\"lng\": 11.57923\n},\n{\n\"lat\": 48.14208,\n\"lng\": 11.57917\n},\n{\n\"lat\": 48.14193,\n\"lng\": 11.57996\n},\n{\n\"lat\": 48.14182,\n\"lng\": 11.58051\n},\n{\n\"lat\": 48.14166,\n\"lng\": 11.58118\n},\n{\n\"lat\": 48.14151,\n\"lng\": 11.58122\n},\n{\n\"lat\": 48.14122,\n\"lng\": 11.58107\n},\n{\n\"lat\": 48.1408,\n\"lng\": 11.58089\n},\n{\n\"lat\": 48.14029,\n\"lng\": 11.58068\n},\n{\n\"lat\": 48.1401,\n\"lng\": 11.58061\n},\n{\n\"lat\": 48.13995,\n\"lng\": 11.58055\n},\n{\n\"lat\": 48.13937,\n\"lng\": 11.58033\n},\n{\n\"lat\": 48.1391,\n\"lng\": 11.58025\n},\n{\n\"lat\": 48.13916,\n\"lng\": 11.57996\n},\n{\n\"lat\": 48.13878,\n\"lng\": 11.57965\n},\n{\n\"lat\": 48.13871,\n\"lng\": 11.57983\n},\n{\n\"lat\": 48.13859,\n\"lng\": 11.58013\n}\n],\n\"alternative\": false\n}\n],\n\"markers\": [\n{\n\"id\": \"100\",\n\"position\": {\n\"lat\": 48.17933,\n\"lng\": 11.48731\n},\n\"markerProps\": {\n\"active\": false,\n\"iconNames\": [\n\"start\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"clickable\": false\n}\n},\n{\n\"id\": \"200\",\n\"position\": {\n\"lat\": 48.13859,\n\"lng\": 11.58013\n},\n\"markerProps\": {\n\"active\": false,\n\"iconNames\": [\n\"finish\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"clickable\": false\n}\n},\n{\n\"id\": \"59.70357\",\n\"position\": {\n\"lat\": 48.16745,\n\"lng\": 11.53612\n},\n\"markerProps\": {\n\"active\": true,\n\"iconNames\": [\n\"route\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"name\": \"10 km / 36 min\",\n\"clickable\": false,\n\"fixed\": true\n}\n}\n]\n}\n\nSelect file...\n\nCreate demo routeCreate demo markerToggle route events\nEnter your route data into the input or select a JSON file to render a route with multiple segments and markers. Please note that this will replace all previously existing markers and route segments.\nSegments are separate parts of the route, each containing a list of points, which can be rendered as reduced route (semi-transparent) and with or without arrows (showArrows). A Marker should provide aposition and markerProps to define its shape.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |",
+    "searchText": "Route\nThere are currently 3 different route styles built-in into the map component.\nRoute\nThe \"reduced\" style is meant for historic routes and shall indicate that the driver went that route but is ahead of a certain timestamp.\n\nThe \"alternativeRoute\" style is meant for route planning cases and shall show alternate routes.\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with changing geometry\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nChange routeToggle route\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with changing styles\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nToggle reduced styleToggle arrows\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with different colors\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute indicating a range for electric vehicles\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute sandbox\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\n{\n\"segments\": [\n{\n\"points\": [\n{\n\"lat\": 48.17933,\n\"lng\": 11.48731\n},\n{\n\"lat\": 48.17937,\n\"lng\": 11.4875\n},\n{\n\"lat\": 48.17939,\n\"lng\": 11.48767\n},\n{\n\"lat\": 48.17941,\n\"lng\": 11.4879\n},\n{\n\"lat\": 48.17942,\n\"lng\": 11.48826\n},\n{\n\"lat\": 48.17942,\n\"lng\": 11.48867\n},\n{\n\"lat\": 48.17941,\n\"lng\": 11.48924\n},\n{\n\"lat\": 48.1794,\n\"lng\": 11.48959\n},\n{\n\"lat\": 48.17939,\n\"lng\": 11.48999\n},\n{\n\"lat\": 48.17936,\n\"lng\": 11.4904\n},\n{\n\"lat\": 48.17933,\n\"lng\": 11.4906\n},\n{\n\"lat\": 48.17927,\n\"lng\": 11.49095\n},\n{\n\"lat\": 48.17915,\n\"lng\": 11.49154\n},\n{\n\"lat\": 48.17895,\n\"lng\": 11.49235\n},\n{\n\"lat\": 48.1788,\n\"lng\": 11.49283\n},\n{\n\"lat\": 48.17869,\n\"lng\": 11.49314\n},\n{\n\"lat\": 48.17856,\n\"lng\": 11.49346\n},\n{\n\"lat\": 48.17843,\n\"lng\": 11.49376\n},\n{\n\"lat\": 48.17828,\n\"lng\": 11.49413\n},\n{\n\"lat\": 48.17813,\n\"lng\": 11.49445\n},\n{\n\"lat\": 48.17797,\n\"lng\": 11.49479\n},\n{\n\"lat\": 48.1778,\n\"lng\": 11.49521\n},\n{\n\"lat\": 48.17775,\n\"lng\": 11.49538\n},\n{\n\"lat\": 48.17769,\n\"lng\": 11.49551\n},\n{\n\"lat\": 48.17757,\n\"lng\": 11.49576\n},\n{\n\"lat\": 48.17752,\n\"lng\": 11.49586\n},\n{\n\"lat\": 48.17748,\n\"lng\": 11.49595\n},\n{\n\"lat\": 48.17744,\n\"lng\": 11.49604\n},\n{\n\"lat\": 48.17735,\n\"lng\": 11.49622\n},\n{\n\"lat\": 48.17722,\n\"lng\": 11.49649\n},\n{\n\"lat\": 48.17701,\n\"lng\": 11.49692\n},\n{\n\"lat\": 48.177,\n\"lng\": 11.49695\n},\n{\n\"lat\": 48.17698,\n\"lng\": 11.49699\n},\n{\n\"lat\": 48.1767,\n\"lng\": 11.49758\n},\n{\n\"lat\": 48.1758,\n\"lng\": 11.49944\n},\n{\n\"lat\": 48.17572,\n\"lng\": 11.4996\n},\n{\n\"lat\": 48.17538,\n\"lng\": 11.50031\n},\n{\n\"lat\": 48.17523,\n\"lng\": 11.50061\n},\n{\n\"lat\": 48.17519,\n\"lng\": 11.50069\n},\n{\n\"lat\": 48.17513,\n\"lng\": 11.50081\n},\n{\n\"lat\": 48.17495,\n\"lng\": 11.50117\n},\n{\n\"lat\": 48.17468,\n\"lng\": 11.50171\n},\n{\n\"lat\": 48.17449,\n\"lng\": 11.50205\n},\n{\n\"lat\": 48.17431,\n\"lng\": 11.50234\n},\n{\n\"lat\": 48.17418,\n\"lng\": 11.50254\n},\n{\n\"lat\": 48.17405,\n\"lng\": 11.5027\n},\n{\n\"lat\": 48.17346,\n\"lng\": 11.5035\n},\n{\n\"lat\": 48.173,\n\"lng\": 11.50416\n},\n{\n\"lat\": 48.17276,\n\"lng\": 11.50448\n},\n{\n\"lat\": 48.17253,\n\"lng\": 11.50482\n},\n{\n\"lat\": 48.17237,\n\"lng\": 11.50509\n},\n{\n\"lat\": 48.17223,\n\"lng\": 11.50536\n},\n{\n\"lat\": 48.1721,\n\"lng\": 11.50564\n},\n{\n\"lat\": 48.17188,\n\"lng\": 11.50614\n},\n{\n\"lat\": 48.17169,\n\"lng\": 11.50658\n},\n{\n\"lat\": 48.17128,\n\"lng\": 11.50753\n},\n{\n\"lat\": 48.17117,\n\"lng\": 11.50777\n},\n{\n\"lat\": 48.17095,\n\"lng\": 11.50828\n},\n{\n\"lat\": 48.1709,\n\"lng\": 11.50838\n},\n{\n\"lat\": 48.17076,\n\"lng\": 11.50871\n},\n{\n\"lat\": 48.17057,\n\"lng\": 11.50922\n},\n{\n\"lat\": 48.17051,\n\"lng\": 11.50938\n},\n{\n\"lat\": 48.17042,\n\"lng\": 11.50953\n},\n{\n\"lat\": 48.17032,\n\"lng\": 11.50976\n},\n{\n\"lat\": 48.17022,\n\"lng\": 11.50999\n},\n{\n\"lat\": 48.17014,\n\"lng\": 11.51017\n},\n{\n\"lat\": 48.17007,\n\"lng\": 11.51029\n},\n{\n\"lat\": 48.16999,\n\"lng\": 11.51044\n},\n{\n\"lat\": 48.16993,\n\"lng\": 11.51055\n},\n{\n\"lat\": 48.16985,\n\"lng\": 11.51069\n},\n{\n\"lat\": 48.1698,\n\"lng\": 11.51078\n},\n{\n\"lat\": 48.16976,\n\"lng\": 11.51086\n},\n{\n\"lat\": 48.16984,\n\"lng\": 11.5109\n},\n{\n\"lat\": 48.16991,\n\"lng\": 11.51093\n},\n{\n\"lat\": 48.17003,\n\"lng\": 11.51097\n},\n{\n\"lat\": 48.17015,\n\"lng\": 11.51099\n},\n{\n\"lat\": 48.1703,\n\"lng\": 11.511\n},\n{\n\"lat\": 48.17048,\n\"lng\": 11.51104\n},\n{\n\"lat\": 48.17068,\n\"lng\": 11.5111\n},\n{\n\"lat\": 48.17093,\n\"lng\": 11.51118\n},\n{\n\"lat\": 48.17112,\n\"lng\": 11.51124\n},\n{\n\"lat\": 48.17131,\n\"lng\": 11.51131\n},\n{\n\"lat\": 48.1715,\n\"lng\": 11.51139\n},\n{\n\"lat\": 48.17165,\n\"lng\": 11.51147\n},\n{\n\"lat\": 48.17179,\n\"lng\": 11.51156\n},\n{\n\"lat\": 48.17192,\n\"lng\": 11.51166\n},\n{\n\"lat\": 48.17205,\n\"lng\": 11.51178\n},\n{\n\"lat\": 48.17219,\n\"lng\": 11.51192\n},\n{\n\"lat\": 48.17232,\n\"lng\": 11.51206\n},\n{\n\"lat\": 48.17242,\n\"lng\": 11.51219\n},\n{\n\"lat\": 48.17251,\n\"lng\": 11.51234\n},\n{\n\"lat\": 48.17261,\n\"lng\": 11.5125\n},\n{\n\"lat\": 48.1727,\n\"lng\": 11.51268\n},\n{\n\"lat\": 48.17279,\n\"lng\": 11.51287\n},\n{\n\"lat\": 48.17294,\n\"lng\": 11.51328\n},\n{\n\"lat\": 48.17304,\n\"lng\": 11.51362\n},\n{\n\"lat\": 48.17307,\n\"lng\": 11.51373\n},\n{\n\"lat\": 48.17315,\n\"lng\": 11.51402\n},\n{\n\"lat\": 48.17333,\n\"lng\": 11.51476\n},\n{\n\"lat\": 48.17341,\n\"lng\": 11.51511\n},\n{\n\"lat\": 48.17365,\n\"lng\": 11.51612\n},\n{\n\"lat\": 48.17394,\n\"lng\": 11.51727\n},\n{\n\"lat\": 48.1741,\n\"lng\": 11.51791\n},\n{\n\"lat\": 48.17416,\n\"lng\": 11.51819\n},\n{\n\"lat\": 48.17433,\n\"lng\": 11.51893\n},\n{\n\"lat\": 48.17438,\n\"lng\": 11.51911\n},\n{\n\"lat\": 48.17453,\n\"lng\": 11.51968\n},\n{\n\"lat\": 48.17465,\n\"lng\": 11.52003\n},\n{\n\"lat\": 48.17469,\n\"lng\": 11.52013\n},\n{\n\"lat\": 48.17477,\n\"lng\": 11.52031\n},\n{\n\"lat\": 48.17488,\n\"lng\": 11.52056\n},\n{\n\"lat\": 48.17501,\n\"lng\": 11.52084\n},\n{\n\"lat\": 48.17509,\n\"lng\": 11.52099\n},\n{\n\"lat\": 48.1754,\n\"lng\": 11.52154\n},\n{\n\"lat\": 48.17541,\n\"lng\": 11.52171\n},\n{\n\"lat\": 48.17542,\n\"lng\": 11.52198\n},\n{\n\"lat\": 48.17541,\n\"lng\": 11.52245\n},\n{\n\"lat\": 48.17517,\n\"lng\": 11.52292\n},\n{\n\"lat\": 48.17478,\n\"lng\": 11.52371\n},\n{\n\"lat\": 48.17462,\n\"lng\": 11.52403\n},\n{\n\"lat\": 48.17455,\n\"lng\": 11.52416\n},\n{\n\"lat\": 48.17451,\n\"lng\": 11.52425\n},\n{\n\"lat\": 48.17442,\n\"lng\": 11.52442\n},\n{\n\"lat\": 48.17421,\n\"lng\": 11.52483\n},\n{\n\"lat\": 48.17412,\n\"lng\": 11.52499\n},\n{\n\"lat\": 48.17388,\n\"lng\": 11.52544\n},\n{\n\"lat\": 48.17376,\n\"lng\": 11.52567\n},\n{\n\"lat\": 48.17353,\n\"lng\": 11.52614\n},\n{\n\"lat\": 48.17317,\n\"lng\": 11.52684\n},\n{\n\"lat\": 48.17299,\n\"lng\": 11.52719\n},\n{\n\"lat\": 48.17267,\n\"lng\": 11.52782\n},\n{\n\"lat\": 48.17262,\n\"lng\": 11.52792\n},\n{\n\"lat\": 48.17246,\n\"lng\": 11.52824\n},\n{\n\"lat\": 48.17225,\n\"lng\": 11.52861\n},\n{\n\"lat\": 48.17219,\n\"lng\": 11.52872\n},\n{\n\"lat\": 48.17214,\n\"lng\": 11.52882\n},\n{\n\"lat\": 48.17189,\n\"lng\": 11.52926\n},\n{\n\"lat\": 48.17187,\n\"lng\": 11.5293\n},\n{\n\"lat\": 48.1715,\n\"lng\": 11.52995\n},\n{\n\"lat\": 48.17132,\n\"lng\": 11.53026\n},\n{\n\"lat\": 48.17127,\n\"lng\": 11.53034\n},\n{\n\"lat\": 48.17103,\n\"lng\": 11.53075\n},\n{\n\"lat\": 48.17073,\n\"lng\": 11.53125\n},\n{\n\"lat\": 48.17028,\n\"lng\": 11.53194\n},\n{\n\"lat\": 48.17017,\n\"lng\": 11.53211\n},\n{\n\"lat\": 48.16982,\n\"lng\": 11.53266\n},\n{\n\"lat\": 48.16976,\n\"lng\": 11.53277\n},\n{\n\"lat\": 48.16939,\n\"lng\": 11.53331\n},\n{\n\"lat\": 48.16885,\n\"lng\": 11.53418\n},\n{\n\"lat\": 48.16872,\n\"lng\": 11.53437\n},\n{\n\"lat\": 48.16822,\n\"lng\": 11.5351\n},\n{\n\"lat\": 48.16809,\n\"lng\": 11.5353\n},\n{\n\"lat\": 48.16791,\n\"lng\": 11.53554\n},\n{\n\"lat\": 48.16785,\n\"lng\": 11.53562\n},\n{\n\"lat\": 48.16774,\n\"lng\": 11.53577\n},\n{\n\"lat\": 48.16761,\n\"lng\": 11.53593\n},\n{\n\"lat\": 48.16745,\n\"lng\": 11.53612\n},\n{\n\"lat\": 48.16714,\n\"lng\": 11.53644\n},\n{\n\"lat\": 48.167,\n\"lng\": 11.53659\n},\n{\n\"lat\": 48.16695,\n\"lng\": 11.53664\n},\n{\n\"lat\": 48.16688,\n\"lng\": 11.53671\n},\n{\n\"lat\": 48.16653,\n\"lng\": 11.53704\n},\n{\n\"lat\": 48.1659,\n\"lng\": 11.53768\n},\n{\n\"lat\": 48.16578,\n\"lng\": 11.53781\n},\n{\n\"lat\": 48.16564,\n\"lng\": 11.53796\n},\n{\n\"lat\": 48.1655,\n\"lng\": 11.53812\n},\n{\n\"lat\": 48.16513,\n\"lng\": 11.53854\n},\n{\n\"lat\": 48.16487,\n\"lng\": 11.53887\n},\n{\n\"lat\": 48.16472,\n\"lng\": 11.53908\n},\n{\n\"lat\": 48.1644,\n\"lng\": 11.53958\n},\n{\n\"lat\": 48.16432,\n\"lng\": 11.53971\n},\n{\n\"lat\": 48.16369,\n\"lng\": 11.54072\n},\n{\n\"lat\": 48.16354,\n\"lng\": 11.54097\n},\n{\n\"lat\": 48.16328,\n\"lng\": 11.54138\n},\n{\n\"lat\": 48.16281,\n\"lng\": 11.54216\n},\n{\n\"lat\": 48.16231,\n\"lng\": 11.54299\n},\n{\n\"lat\": 48.16185,\n\"lng\": 11.54381\n},\n{\n\"lat\": 48.16127,\n\"lng\": 11.54476\n},\n{\n\"lat\": 48.16115,\n\"lng\": 11.54496\n},\n{\n\"lat\": 48.16097,\n\"lng\": 11.54525\n},\n{\n\"lat\": 48.16073,\n\"lng\": 11.54561\n},\n{\n\"lat\": 48.16056,\n\"lng\": 11.54587\n},\n{\n\"lat\": 48.16029,\n\"lng\": 11.54625\n},\n{\n\"lat\": 48.16014,\n\"lng\": 11.54644\n},\n{\n\"lat\": 48.15994,\n\"lng\": 11.54668\n},\n{\n\"lat\": 48.15979,\n\"lng\": 11.54683\n},\n{\n\"lat\": 48.15969,\n\"lng\": 11.54693\n},\n{\n\"lat\": 48.15958,\n\"lng\": 11.54707\n},\n{\n\"lat\": 48.15947,\n\"lng\": 11.54721\n},\n{\n\"lat\": 48.15933,\n\"lng\": 11.54737\n},\n{\n\"lat\": 48.15902,\n\"lng\": 11.54779\n},\n{\n\"lat\": 48.15882,\n\"lng\": 11.54804\n},\n{\n\"lat\": 48.15811,\n\"lng\": 11.54893\n},\n{\n\"lat\": 48.15794,\n\"lng\": 11.54914\n},\n{\n\"lat\": 48.15734,\n\"lng\": 11.54987\n},\n{\n\"lat\": 48.15605,\n\"lng\": 11.55145\n},\n{\n\"lat\": 48.15531,\n\"lng\": 11.55236\n},\n{\n\"lat\": 48.15523,\n\"lng\": 11.55246\n},\n{\n\"lat\": 48.15422,\n\"lng\": 11.55378\n},\n{\n\"lat\": 48.15389,\n\"lng\": 11.55422\n},\n{\n\"lat\": 48.15342,\n\"lng\": 11.55479\n},\n{\n\"lat\": 48.15274,\n\"lng\": 11.55563\n},\n{\n\"lat\": 48.1521,\n\"lng\": 11.55639\n},\n{\n\"lat\": 48.15167,\n\"lng\": 11.5569\n},\n{\n\"lat\": 48.15153,\n\"lng\": 11.55707\n},\n{\n\"lat\": 48.15131,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15102,\n\"lng\": 11.55766\n},\n{\n\"lat\": 48.1509,\n\"lng\": 11.55778\n},\n{\n\"lat\": 48.15085,\n\"lng\": 11.55771\n},\n{\n\"lat\": 48.15077,\n\"lng\": 11.55763\n},\n{\n\"lat\": 48.15061,\n\"lng\": 11.55751\n},\n{\n\"lat\": 48.15043,\n\"lng\": 11.55736\n},\n{\n\"lat\": 48.15036,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15033,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15029,\n\"lng\": 11.55735\n},\n{\n\"lat\": 48.15026,\n\"lng\": 11.55737\n},\n{\n\"lat\": 48.15023,\n\"lng\": 11.55742\n},\n{\n\"lat\": 48.15021,\n\"lng\": 11.55746\n},\n{\n\"lat\": 48.15021,\n\"lng\": 11.55753\n},\n{\n\"lat\": 48.15024,\n\"lng\": 11.55783\n},\n{\n\"lat\": 48.15027,\n\"lng\": 11.55813\n},\n{\n\"lat\": 48.15028,\n\"lng\": 11.55824\n},\n{\n\"lat\": 48.15028,\n\"lng\": 11.55836\n},\n{\n\"lat\": 48.15027,\n\"lng\": 11.55848\n},\n{\n\"lat\": 48.15023,\n\"lng\": 11.55868\n},\n{\n\"lat\": 48.1502,\n\"lng\": 11.55881\n},\n{\n\"lat\": 48.15017,\n\"lng\": 11.55891\n},\n{\n\"lat\": 48.14997,\n\"lng\": 11.55967\n},\n{\n\"lat\": 48.14985,\n\"lng\": 11.5601\n},\n{\n\"lat\": 48.14919,\n\"lng\": 11.56242\n},\n{\n\"lat\": 48.14908,\n\"lng\": 11.56282\n},\n{\n\"lat\": 48.14906,\n\"lng\": 11.56288\n},\n{\n\"lat\": 48.14873,\n\"lng\": 11.56403\n},\n{\n\"lat\": 48.14858,\n\"lng\": 11.56455\n},\n{\n\"lat\": 48.14845,\n\"lng\": 11.56501\n},\n{\n\"lat\": 48.14833,\n\"lng\": 11.56545\n},\n{\n\"lat\": 48.14821,\n\"lng\": 11.56587\n},\n{\n\"lat\": 48.14804,\n\"lng\": 11.5665\n},\n{\n\"lat\": 48.14793,\n\"lng\": 11.56688\n},\n{\n\"lat\": 48.14791,\n\"lng\": 11.56696\n},\n{\n\"lat\": 48.14782,\n\"lng\": 11.56726\n},\n{\n\"lat\": 48.1476,\n\"lng\": 11.56804\n},\n{\n\"lat\": 48.14755,\n\"lng\": 11.56823\n},\n{\n\"lat\": 48.14752,\n\"lng\": 11.56834\n},\n{\n\"lat\": 48.14725,\n\"lng\": 11.56927\n},\n{\n\"lat\": 48.14702,\n\"lng\": 11.5701\n},\n{\n\"lat\": 48.14695,\n\"lng\": 11.57037\n},\n{\n\"lat\": 48.14689,\n\"lng\": 11.57057\n},\n{\n\"lat\": 48.14631,\n\"lng\": 11.57269\n},\n{\n\"lat\": 48.14623,\n\"lng\": 11.57297\n},\n{\n\"lat\": 48.14607,\n\"lng\": 11.5732\n},\n{\n\"lat\": 48.14596,\n\"lng\": 11.57336\n},\n{\n\"lat\": 48.14587,\n\"lng\": 11.57355\n},\n{\n\"lat\": 48.14585,\n\"lng\": 11.57359\n},\n{\n\"lat\": 48.14577,\n\"lng\": 11.57378\n},\n{\n\"lat\": 48.14566,\n\"lng\": 11.57413\n},\n{\n\"lat\": 48.14562,\n\"lng\": 11.57426\n},\n{\n\"lat\": 48.14555,\n\"lng\": 11.57433\n},\n{\n\"lat\": 48.14552,\n\"lng\": 11.57439\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57447\n},\n{\n\"lat\": 48.14546,\n\"lng\": 11.5746\n},\n{\n\"lat\": 48.14541,\n\"lng\": 11.57482\n},\n{\n\"lat\": 48.14538,\n\"lng\": 11.57501\n},\n{\n\"lat\": 48.14537,\n\"lng\": 11.57518\n},\n{\n\"lat\": 48.14539,\n\"lng\": 11.57552\n},\n{\n\"lat\": 48.14544,\n\"lng\": 11.57592\n},\n{\n\"lat\": 48.14546,\n\"lng\": 11.57626\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57667\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57702\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57722\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57737\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57746\n},\n{\n\"lat\": 48.1455,\n\"lng\": 11.57762\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57768\n},\n{\n\"lat\": 48.14547,\n\"lng\": 11.5778\n},\n{\n\"lat\": 48.14537,\n\"lng\": 11.57825\n},\n{\n\"lat\": 48.14525,\n\"lng\": 11.57878\n},\n{\n\"lat\": 48.14486,\n\"lng\": 11.57861\n},\n{\n\"lat\": 48.14467,\n\"lng\": 11.57852\n},\n{\n\"lat\": 48.14428,\n\"lng\": 11.57833\n},\n{\n\"lat\": 48.14411,\n\"lng\": 11.57825\n},\n{\n\"lat\": 48.14389,\n\"lng\": 11.57814\n},\n{\n\"lat\": 48.14357,\n\"lng\": 11.57799\n},\n{\n\"lat\": 48.1433,\n\"lng\": 11.57787\n},\n{\n\"lat\": 48.14318,\n\"lng\": 11.57782\n},\n{\n\"lat\": 48.14304,\n\"lng\": 11.57776\n},\n{\n\"lat\": 48.14263,\n\"lng\": 11.57752\n},\n{\n\"lat\": 48.14258,\n\"lng\": 11.57772\n},\n{\n\"lat\": 48.14244,\n\"lng\": 11.57771\n},\n{\n\"lat\": 48.14237,\n\"lng\": 11.57791\n},\n{\n\"lat\": 48.14244,\n\"lng\": 11.57771\n},\n{\n\"lat\": 48.14258,\n\"lng\": 11.57772\n},\n{\n\"lat\": 48.14251,\n\"lng\": 11.57804\n},\n{\n\"lat\": 48.14249,\n\"lng\": 11.57811\n},\n{\n\"lat\": 48.14241,\n\"lng\": 11.57837\n},\n{\n\"lat\": 48.14234,\n\"lng\": 11.57869\n},\n{\n\"lat\": 48.14222,\n\"lng\": 11.57923\n},\n{\n\"lat\": 48.14208,\n\"lng\": 11.57917\n},\n{\n\"lat\": 48.14193,\n\"lng\": 11.57996\n},\n{\n\"lat\": 48.14182,\n\"lng\": 11.58051\n},\n{\n\"lat\": 48.14166,\n\"lng\": 11.58118\n},\n{\n\"lat\": 48.14151,\n\"lng\": 11.58122\n},\n{\n\"lat\": 48.14122,\n\"lng\": 11.58107\n},\n{\n\"lat\": 48.1408,\n\"lng\": 11.58089\n},\n{\n\"lat\": 48.14029,\n\"lng\": 11.58068\n},\n{\n\"lat\": 48.1401,\n\"lng\": 11.58061\n},\n{\n\"lat\": 48.13995,\n\"lng\": 11.58055\n},\n{\n\"lat\": 48.13937,\n\"lng\": 11.58033\n},\n{\n\"lat\": 48.1391,\n\"lng\": 11.58025\n},\n{\n\"lat\": 48.13916,\n\"lng\": 11.57996\n},\n{\n\"lat\": 48.13878,\n\"lng\": 11.57965\n},\n{\n\"lat\": 48.13871,\n\"lng\": 11.57983\n},\n{\n\"lat\": 48.13859,\n\"lng\": 11.58013\n}\n],\n\"alternative\": false\n}\n],\n\"markers\": [\n{\n\"id\": \"100\",\n\"position\": {\n\"lat\": 48.17933,\n\"lng\": 11.48731\n},\n\"markerProps\": {\n\"active\": false,\n\"iconNames\": [\n\"start\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"clickable\": false\n}\n},\n{\n\"id\": \"200\",\n\"position\": {\n\"lat\": 48.13859,\n\"lng\": 11.58013\n},\n\"markerProps\": {\n\"active\": false,\n\"iconNames\": [\n\"finish\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"clickable\": false\n}\n},\n{\n\"id\": \"59.70357\",\n\"position\": {\n\"lat\": 48.16745,\n\"lng\": 11.53612\n},\n\"markerProps\": {\n\"active\": true,\n\"iconNames\": [\n\"route\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"name\": \"10 km / 36 min\",\n\"clickable\": false,\n\"fixed\": true\n}\n}\n]\n}\n\nSelect file...\n\nCreate demo routeCreate demo markerToggle route events\nEnter your route data into the input or select a JSON file to render a route with multiple segments and markers. Please note that this will replace all previously existing markers and route segments.\nSegments are separate parts of the route, each containing a list of points, which can be rendered as reduced route (semi-transparent) and with or without arrows (showArrows). A Marker should provide aposition and markerProps to define its shape.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |",
     "category": "Components",
     "section": "Map",
     "boost": "Route components/mapRoute #components/mapRoute Components Map"
@@ -653,8 +643,8 @@
     "id": "components/mapSettings",
     "title": "Map settings",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Map settings\nMap settings\nTerms of use© 1987–2025 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–2025 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–2025 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–2025 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–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents",
+    "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",
     "category": "Components",
     "section": "Map",
     "boost": "Map settings components/mapSettings #components/mapSettings Components Map"
@@ -854,7 +844,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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It 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| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\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| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | 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 | VoidFunction | — | 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 | VoidFunction | — | 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| 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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It 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| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\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| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | 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 | VoidFunction | — | 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 | VoidFunction | — | 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| 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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It 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| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\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| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | 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 | VoidFunction | — | 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 | VoidFunction | — | 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| 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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It 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| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\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| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | 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 | VoidFunction | — | 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 | VoidFunction | — | 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| 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‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\nControlled - Stay open on invalid (default)\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n03:20\n\nSaved value:\n\nControlled - With error\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹2025›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nSaveableDateInput (disabled)\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n3:20 PM\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 \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It 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 | VoidFunction | — | 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 | VoidFunction | — | 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 | \"default\" \\| \"primary\" | — | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | — | Props passed directly to the date picker 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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It 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| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\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| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | 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 | VoidFunction | — | 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 | VoidFunction | — | 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| 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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It 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| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\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| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | 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 | VoidFunction | — | 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 | VoidFunction | — | 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| 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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It 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| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\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| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | 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 | VoidFunction | — | 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 | VoidFunction | — | 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| 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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It 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| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\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| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | 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 | VoidFunction | — | 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 | VoidFunction | — | 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| 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‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\nControlled - Stay open on invalid (default)\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n01:11\n\nSaved value:\n\nControlled - With error\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nSaveableDateInput (disabled)\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n1:11 PM\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 \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It 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 | VoidFunction | — | 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 | VoidFunction | — | 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 | \"default\" \\| \"primary\" | — | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | — | Props passed directly to the date picker 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"
@@ -1084,7 +1074,7 @@
     "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\nIn ante Sed nunc finibus ante massa, tortor ac In Mauris amet, Vivamus\n\nItem 2\nEfficitur Integer in Mauris Ut ac pretium tincidunt. ipsum elementum enim\n\nItem 3\nLigula ut bibendum, Fusce nunc\n\nItem 4\nNec ac iaculis. In iaculis. massa ante fames Fusce massa, sem. elit. primis ipsum\n\nItem 5\nElit. volutpat sit eget et hendrerit adipiscing nec vel et ut amet, nec\n\nItem 6\nPretium elit. elit. sagittis dui semper amet, hendrerit ipsum\n\nItem 7\nEst eget efficitur sem. ante semper Integer neque. enim condimentum in sit ligula elit.\n\nItem 8\nScelerisque Ut ante et aliquam Mauris pharetra finibus semper. vitae libero efficitur In\n\nItem 9\nEst in ante enim metus Mauris elit. Ut\nLorem elit. vitae hendrerit scelerisque amet,\n\nItem 10\nPosuere dui orci libero et massa, finibus\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\nRutrum quis, ipsum sit tincidunt. semper. libero ac ut tincidunt.\n\nVehicle 2\nLigula Ut tortor in aliquam\n\nVehicle 3\nMauris ut vitae Fusce et et Fusce orci, primis lorem neque. sem. orci In ut\n\nVehicle 4\nPretium est orci ante aliquam\n\nVehicle 5\nNec condimentum enim sagittis quis, quis, fames dolor\n\nVehicle 6\nInterdum eget orci velit. elit. sagittis bibendum, elit. massa ac pretium iaculis.\n\nVehicle 7\nAnte Duis Interdum ut dolor aliquam\nLorem dolor tincidunt. volutpat primis iaculis. iaculis.\n\nVehicle 8\nNec iaculis. et lorem condimentum ac semper. neque. Interdum\n\nVehicle 9\nMetus adipiscing fames orci, consectetur Duis efficitur Integer eget ipsum elit.\n\nVehicle 10\nInterdum vitae Fusce adipiscing tincidunt. hendrerit ac condimentum In in semper\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\nSed ac in vel et in ac\n\nItem 2\nVelit. aliquam ante primis orci dui ipsum amet, nunc Duis ac eget ante pretium in,\n\nItem 3\nAc\nLorem orci, nec primis lorem\n\nItem 4\nEfficitur massa, iaculis. ligula nunc\n\nItem 5\nAc nec iaculis. viverra bibendum, eget hendrerit ac vel Mauris nunc\n\nItem 6\nPretium quis, Ut posuere viverra Sed Mauris in, massa velit. fames rutrum orci amet, semper\n\nItem 7\nInteger dolor faucibus. pretium Mauris viverra Mauris massa Integer aliquam Sed\n\nItem 8\nBibendum, Sed iaculis. consectetur ac dolor in, In fringilla orci,\n\nItem 9\nEt massa ante Fusce hendrerit ipsum consectetur in, ipsum ut Sed volutpat\n\nItem 10\nUt ligula\nLorem lorem tortor primis libero\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\nVel ipsum ac primis hendrerit sem. ipsum sem. Vivamus metus quis, ac\n\nVehicle 2\nFringilla Fusce eget pharetra Vivamus\n\nVehicle 3\nIn felis. dui metus malesuada fames\n\nVehicle 4\nAliquam malesuada amet, ac ac fames orci ligula ante in consectetur in, ipsum primis felis.\n\nVehicle 5\nAnte Sed ligula dolor molestie\n\nVehicle 6\nVolutpat nec fames Duis metus sit bibendum, ligula velit. sagittis Sed vel vel ante\n\nVehicle 7\nDuis et Fusce vitae elit. est sit ac\n\nVehicle 8\nUt sagittis elementum adipiscing iaculis. iaculis.\n\nVehicle 9\nLibero sit Integer ligula nec nunc viverra elementum pretium Duis sagittis hendrerit semper elementum ante\n\nVehicle 10\nDuis viverra massa, scelerisque Vivamus in elit. tortor in, et 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. |",
     "category": "Components",
     "section": "Content",
     "boost": "VirtualList components/virtualList #components/virtualList Components Content"
@@ -1094,7 +1084,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‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\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\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‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\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"
@@ -1103,8 +1093,8 @@
     "id": "start/changelog",
     "title": "Changelog",
     "lead": null,
-    "summary": "- 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.",
-    "searchText": "Changelog\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 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 DatePicker Fixed DatePicker compatibility in ESM builds by unwrapping the CommonJS default export.",
+    "searchText": "Changelog\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 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",
     "category": "Getting started",
     "section": "Welcome",
     "boost": "Changelog start/changelog #start/changelog Getting started Welcome"
@@ -1224,7 +1214,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.0.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.0.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.0.0/vw-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.0/man-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.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.0.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.0.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.0.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.0.1\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.0.1/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.0.1/vw-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.1/man-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.1/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.0.1/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.0.1/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.0.1/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"
@@ -1284,7 +1274,7 @@
     "title": "Feature cards",
     "lead": null,
     "summary": "Lorem ipsum dolor sit amet",
-    "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nAiunt voveo una adnuo apto territo sub.\nVestrum astrum truculenter adhaero tersus vinculum velum angulus adficio.\nPecco nam aliquid compono amo tantum.\nCultura patior aut calcar pariatur depereo sponte sed catena.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nTrado condico tui viduo defungo celo.\nDelectus sequi abeo.\nDeinde suscipit creator defessus abeo est cohors stips voluptates.\nSuspendo voluptatem acquiro voluptatibus crepusculum.\nRead more\nLorem ipsum dolor sit amet\nContra umbra trucido angulus ut eligendi arceo.\nConiecto sufficio ocer.\nDelectus dolores cur.\nVix tempus audacia similique laudantium appositus triduana debitis credo ipsum.\nSuggero thalassinus suscipit omnis.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nTunc valens dolor tabesco.\nSubnecto apostolus callide colligo alter cado supplanto.\nXiphias credo adipiscor venustas aeternus defendo conduco adflicto caries compono.\nTabula vigilo appono comprehendo antiquus cognomen peccatus vergo.\nBeatus cras capillus conduco victus sponte vobis capitulus.\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\nPeccatus speciosus demergo textilis vulticulus agnitio tum thalassinus tristis.\nEa repellat averto crepusculum architecto quas alioqui aestivus anser.\nVelit animus officiis valens laboriosam substantia usus abeo adimpleo desino.\nAer vulgus coma arceo.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nAscit vero atrocitas caveo delinquo torqueo.\nCuro aliquid appositus.\nCapto acsi approbo strues conculco aggero.\nVolup titulus sed claustrum sol vinitor pecus dolorem depopulo degusto.\nRead more\nLorem ipsum dolor sit amet\nTutis aegrus dolores truculenter ulterius molestias.\nCarcer sophismata tumultus vacuus dolores nihil ut vociferor virtus.\nConsectetur vix virgo tamdiu.\nQuisquam subnecto civis adsum terror.\nTabesco architecto decretum ambulo cunae quas curtus thema dens.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nBos temporibus perspiciatis.\nDeficio termes curto dolorum cunae agnitio copiose maiores defero culpa.\nAdipisci tumultus aperio.\nTimor cohibeo vigilo tempore cubitum.\nUtroque voveo accommodo blanditiis clarus curia claro tonsor bardus voluptatibus.\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"
@@ -1294,7 +1284,7 @@
     "title": "Form summary",
     "lead": null,
     "summary": "Request summary",
-    "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact personMisty Doyle\nRequested roleDistrict Infrastructure Representative\nContact emailLorna_Hills97@hotmail.com\nAnnual budget€119,718.00\nProject descriptionAudio velut adeo amo odit speciosus thesaurus.\nContra sumptus ventosus consectetur vivo quis textilis subito.\nDesino alius conscendo enim caute distinctio.\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 personGerardo Osinski\nRequested roleInternational Response Director\nContact emailWerner.Lindgren@hotmail.com\nAnnual budget€162,294.00\nProject descriptionSpeculum terebro ducimus surculus benevolentia fuga tricesimus auctor.\nThema aedificium quod.\nPecto autus vinum adhuc venio.\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"
@@ -1314,7 +1304,7 @@
     "title": "List blocks",
     "lead": null,
     "summary": "Lorem ipsum dolor",
-    "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nVenio beatus volo deputo.\n\nShanahan Inc\nAdhuc tertius truculenter texo vulgus.\n\nConnect\n\nOlson Inc\nSocius ubi barba cado bestia vis.\nVox viscus bene architecto dicta.\n\nConnect\n\nWilliamson, Abshire and Parisian\nTempore illum tonsor certe demens amplitudo.\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\nCurtus speciosus cauda degusto.\n\nCollier - Leannon\nExpedita vomito suppono vicissitudo cupio consectetur compello speculum dedico.\n\nMills and Sons\nSumptus tredecim vulgivagus sodalitas delectus annus tumultus.\nVulgo sint crastinus carpo annus conatus valeo ex vitiosus maiores.\n\nRodriguez - Gottlieb\nCuratio nulla adipiscor tenus terminatio sortitus numquam.\nCupressus culpa umquam caelestis pauci nesciunt cito alter similique.\nLorem ipsum dolor sit amet\nSit ascit calcar cupio acquiro basium deserunt.\nVociferor voluptatum umbra claudeo est ocer adeo volubilis vergo utique.\n\nPacocha, Roberts and Schiller\nAdinventitias thorax nisi sursum labore cursus depereo verecundia.\nNam curso aperte tolero.\nVis sub texo vinitor tabgo.\n\nWunsch LLC\nCursus aspicio defessus apud confero assumenda canis coadunatio.\nApostolus expedita varius curo alo.\nAter atavus quae.\n\nHartmann - Kling\nAlias adficio bos tredecim turpis id.\nTristis suadeo dignissimos delectus tripudio tonsor.\nBellum agnosco ambulo umquam vindico admitto.\n\nVonRueden LLC\nCorpus sollicito tendo vomer pecto.\nCommodo sto assentator trucido tremo cumque articulus.\nAllatus sumo admoneo.\nEnhance your application with powerful add-ons!\n\nLuxurious Plastic Pants\nThe sleek and grim Bacon comes with lime LED lighting for smart functionality\n\n€96.85\nTotal per month\n\nGet Add-on\n\nLicensed Bamboo Salad\nProfessional-grade Cheese perfect for wise training and recreational use\n\n€97.19\nTotal per user / month\n\nGet Add-on\n\nUnbranded Marble Fish\nFeaturing Tennessine-enhanced technology, our Shirt offers unparalleled unruly performance\n\n€57.25\nTotal per month\n\nGet Add-on\n\nSoft Cotton Keyboard\nIntroducing the Kyrgyz Republic-inspired Computer, blending yummy style with local craftsmanship\n\n€92.59\nTotal per user / month\n\nGet Add-on\n\nTasty Granite Hat\nGeneric Towels designed with Metal for weary performance\n\n€16.49\nTotal per user / month\n\nGet Add-on\nFeatures\n\nIntelligent Silk Mouse\nDiscover the lion-like agility of our Table, perfect for well-groomed users\n\nElegant Silk Table\nThe cyan Ball combines Solomon Islands aesthetics with Nitrogen-based durability\n\nRecycled Metal Cheese\nNew Mouse model with 97 GB RAM, 446 GB storage, and ashamed features\n\nLicensed Steel Chicken\nInnovative Fish featuring pleased technology and Granite construction\n\nLuxurious Metal Keyboard\nIntroducing the New Zealand-inspired Mouse, blending handy style with local craftsmanship\n\nModern Aluminum Mouse\nStylish Soap designed to make you stand out with flawless looks",
+    "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nCenaculum aegrus deprimo viriliter autem sumptus paens.\n\nJacobi Group\nSit aeger dedico uxor audax quaerat volaticus sumptus.\n\nConnect\n\nGorczany LLC\nAutus terebro cibus tantillus comitatus consequuntur itaque deporto.\nContego viscus celebrer cetera sopor tres tubineus arguo curso.\n\nConnect\n\nKessler - Reichert\nSol umbra vilis calamitas.\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\nDespecto carbo sonitus tum ambitus necessitatibus vitium.\n\nRomaguera, Prohaska and Predovic\nComminor suppono arbitro cognomen.\n\nWalter LLC\nDebeo vestrum bibo accedo auctus aperiam calamitas reiciendis colo cinis.\nAuctor verumtamen culpo.\n\nProsacco Inc\nDefluo trucido vomer calcar.\nDesidero theologus bonus termes umquam uter deprimo.\nLorem ipsum dolor sit amet\nVorago volutabrum culpo denuo.\nCurvo numquam demulceo cavus stultus.\n\nKoelpin, Schuppe and Mueller\nIllum deleniti nemo colo decor corporis vere soleo advoco.\nSum culpo spectaculum communis deorsum ager somnus.\nReiciendis terga confugo pauci dignissimos decet copia velut.\n\nHomenick, Johnston and Will\nTot adamo nihil deporto.\nStips vallum tenus volup cervus aperte theatrum conspergo capio.\nAbduco spiritus vereor decerno aureus suggero doloribus audentia acervus conscendo.\n\nBlanda, Kessler and Mueller\nTaceo surculus paens non adstringo strues thema solio facere fugit.\nCruentus adipiscor vindico magnam venio tenus cupiditate.\nAdeptio teneo calco calcar veritatis optio succurro ipsam decerno adipiscor.\n\nZemlak Group\nSolum subito speculum.\nAdulescens et tempus utilis.\nDesolo autus cognomen.\nEnhance your application with powerful add-ons!\n\nUnbranded Plastic Chair\nExperience the grey brilliance of our Shirt, perfect for gaseous environments\n\n€91.30\nTotal per month\n\nGet Add-on\n\nSleek Rubber Cheese\nProfessional-grade Chicken perfect for criminal training and recreational use\n\n€41.79\nPer 1000 messages / month\n\nGet Add-on\n\nElegant Silk Towels\nThe Isaiah Shoes is the latest in a series of flashy products from Fahey Group\n\n€38.79\nPer 1000 messages / month\n\nGet Add-on\n\nTasty Rubber Chicken\nInnovative Chair featuring puzzled technology and Ceramic construction\n\n€83.95\nTotal per user / month\n\nGet Add-on\n\nModern Bamboo Ball\nSpencer LLC's most advanced Car technology increases known capabilities\n\n€74.20\nTotal per month\n\nGet Add-on\nFeatures\n\nLuxurious Plastic Tuna\nFeaturing Ytterbium-enhanced technology, our Ball offers unparalleled decent performance\n\nGorgeous Ceramic Chair\nFeaturing Moscovium-enhanced technology, our Cheese offers unparalleled idealistic performance\n\nBespoke Plastic Pizza\nIntroducing the Saint Martin-inspired Soap, blending wilted style with local craftsmanship\n\nFantastic Bamboo Bike\nStylish Pants designed to make you stand out with haunting looks\n\nElegant Silk Keyboard\nInnovative Shirt featuring firm technology and Ceramic construction\n\nBespoke Aluminum Sausages\nThe Organic intangible algorithm Bike offers reliable performance and married design",
     "category": "Templates",
     "section": "Content",
     "boost": "List blocks templates/list-blocks #templates/list-blocks Templates Content"
@@ -1374,7 +1364,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\nExtended national 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\nTexasTexas\nConnecticut\n\nIranIran\nLiechtenstein\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\nIntuitive methodical artificial intelligence\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\nPennsylvaniaPennsylvania\nUtah\n\nTurks and Caicos IslandsTurks and Caicos Islands\nDominican Republic\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"
@@ -1384,7 +1374,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\n812 units\n\n12%from last month\n\nOpen orders\n27\n\n5%from last month\n\nIn transit\n11\n\n-3%from last month\n\nIssues\n0\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\n1405 units\n\n12%from last month\n\nOpen orders\n57\n\n5%from last month\n\nIn transit\n12\n\n-3%from last month\n\nIssues\n4\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"
@@ -1534,7 +1524,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\": 1765549310694\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\": 1767787967247\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"
@@ -1824,7 +1814,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\n1ShaniyaLindgrenMakayla34@hotmail.com\n2FriedaHintzCorbin_Hane4@yahoo.com\n3CamrenHillsRaegan.Feil84@yahoo.com\n4JammieKrisWanda_Roberts35@gmail.com\n5LaurelKeelingEunice_Lynch@gmail.com\n6EbbaGoldnerLauren48@hotmail.com\n7DevonLueilwitzJaydon1@hotmail.com\n8JoanyWillDessie_Shanahan25@yahoo.com\n9RobbieSchadenChad91@hotmail.com\n10BrannonBartellJocelyn.Grimes78@yahoo.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\n1PaxtonHeidenreichBrice.Leannon@yahoo.com\n2CatalinaKihnFrancesco.Ondricka40@yahoo.com\n3FletcherHowellSidney.Abshire4@gmail.com\n4JosefaCartwrightJackeline97@gmail.com\n5RoyLednerLillian_McCullough@hotmail.com\n6ShakiraMillerGene_Bergstrom40@gmail.com\n7LeolaRathThad.Blick@hotmail.com\n8DamonTillmanDonna.Streich@hotmail.com\n9NyahRueckerSterling_Roob@hotmail.com\n10SimoneManteTyrell.Tillman44@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"
@@ -1834,7 +1824,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\n1KentonHermanMeggie_McClure83@hotmail.com\n2AliaKlockoRosemary_Ruecker@yahoo.com\n3CullenWymanFlorence65@gmail.com\n4GunnarLuettgenLorena_Pollich@yahoo.com\n5CharleneWeimannAdella_Robel39@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. |\nMulti-selection\nActive row\n-\n\nSelected rows\n4\n\nDeselect all ItemsSelect some rows\n\nIdFirst nameLast nameE-mail\n\n1BennettRiceKarley74@hotmail.com\n\n2ErnieTorpJessyca12@yahoo.com\n\n3AmaliaGaylordElliot68@yahoo.com\n\n4MoriahBradtkeJoey56@gmail.com\n\n5KeonJohnstonMichele38@yahoo.com\n\n6JettieGleichnerWilford_Hyatt11@hotmail.com\n\n7MalcolmVolkmanCasper.Mraz49@yahoo.com\n\n8ZanderQuigleyAntonette_Fisher@yahoo.com\n\n9PaxtonLeuschkeMacy_Homenick@gmail.com\n\n10AntonioHauckKeyon15@yahoo.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\n1VinniePredovicDorris.Hilpert2@hotmail.com\n2FlorencioRitchieLucius.Walker@gmail.com\n3BennieMetzCatharine35@gmail.com\n4NiaBotsfordDuncan_Kling@gmail.com\n5DennisToyMargot_Schoen@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\n1RayLebsackDonavon70@yahoo.com\n\n2CynthiaKesslerCamron.Heathcote41@hotmail.com\n\n3AlekDenesikTanner3@hotmail.com\n\n4LeifKeelingAkeem85@hotmail.com\n\n5JaredKlockoRupert.Hilll48@hotmail.com\n\n6ShirleyGrahamRuthie_Gorczany9@hotmail.com\n\n7RoxanneBeahanMarion.Shields@gmail.com\n\n8TyraWalterJanae73@gmail.com\n\n9ClintonWeimannAndre_Hoeger@hotmail.com\n\n10OnieChristiansenTristin88@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. |",
     "category": "Utilities",
     "section": "Table & data hooks",
     "boost": "useTableSelection utilities/useTableSelection #utilities/useTableSelection Utilities Table & data hooks"