@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/doc-metadata.json

@@ -0,0 +1,1872 @@
+[
+  {
+    "id": "components/accentBar",
+    "title": "AccentBar",
+    "lead": "The AccentBar component is a small, colored vertical bar (typically a few pixels wide) used to visually highlight or categorize rows in lists, tables, or cards. It helps improve readability by providing a quick visual cue for different statuses, categories, or priorities.",
+    "summary": "The AccentBar component is a small, colored vertical bar (typically a few pixels wide) used to visually highlight or categorize rows in lists, tables, or cards. It helps improve readability by providing a quick visual cue for different statuses, categories, or priorities.",
+    "searchText": "AccentBar\nThe AccentBar component is a small, colored vertical bar (typically a few pixels wide) used to visually highlight or categorize rows in lists, tables, or cards. It helps improve readability by providing a quick visual cue for different statuses, categories, or priorities.\nAccentBar\nUse it to indicate status or priority in a table, as a category marker in list-based layouts where items belong to different groups, or to subtly enhance visual hierarchy in a UI without overwhelming the content. Additionally, it can be used to describe values in a chart, acting as a color-coded reference for data representation.\nLorem ipsum dolor sit amet\n\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.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | string | bg-secondary | Defines the color by setting it to a UIKIT bg-<nameclass name. |\n| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |\n| className | string | — | Additional class names passed to the actual element. |\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | string | bg-secondary | Defines the color by setting it to a UIKIT bg-<nameclass name. |\n| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |\n| className | string | — | Additional class names passed to the actual element. |\nVisualizing rating distribution\n\nCategoryPercentage\n\nPoor15%\n\nBelow Average20%\n\nAverage25%\n\nGood15%\n\nExcellent25%\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | string | bg-secondary | Defines the color by setting it to a UIKIT bg-<nameclass name. |\n| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |\n| className | string | — | Additional class names passed to the actual element. |\nRisk levelReasonSuggested action\n\nLow risk\nStable weather conditionsMonitor\n\nHigh risk\nLabor strike at destinationReroute shipment\n\nCritical risk\nCustoms hold & inspectionExpedite clearance\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | string | bg-secondary | Defines the color by setting it to a UIKIT bg-<nameclass name. |\n| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |\n| className | string | — | Additional class names passed to the actual element. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "AccentBar components/accentBar #components/accentBar Components Misc"
+  },
+  {
+    "id": "components/activity",
+    "title": "Activity",
+    "lead": null,
+    "summary": "Small size:0:24 h",
+    "searchText": "Activity\nActivity\nSmall size:0:24 h\n0:24 h\n0:24 h\n0:24 h\n13\nDefault size:0:24 h\n0:24 h\n0:24 h\n0:24 h\n\nDefault size without duration:\n\nOutdated activities:0:24 h\n0:24 h\n0:24 h\n0:24 h\n\nLarge size:0:24 h\n0:24 h\n0:24 h\n0:24 h\n\nExtra large size:0:24 h\n0:24 h\n0:24 h\n0:24 h\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| activity | String | — | Defines the type of activity. Possible values are: Activity.AVAILABLE, Activity.DRIVING, Activity.RESTING or Activity.WORKING. |\n| duration | String / Node | — | The actual duration value to be shown. |\n| isOutdated | Boolean | false | Indicated whether the activity is outdated. |\n| bsSize | String | — | Define how large the component should be rendered. Possible values are: Activity.SIZESM, Activity.SIZELG or Activity.SIZE_XL. |\n| onClick | Function | () ={} | Callback function for when the component is clicked. |\n| className | String | — | Additional classes for the wrapper element. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "Activity components/activity #components/activity Components Misc"
+  },
+  {
+    "id": "components/animatedNumber",
+    "title": "AnimatedNumber",
+    "lead": null,
+    "summary": "Default AnimatedNumber0",
+    "searchText": "AnimatedNumber\nAnimatedNumber\nDefault AnimatedNumber0\nAnimatedNumber with prefix and unit+0%\nAnimatedNumber as simple timerHurry up! Only60sremaining.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| start | Number | — | The start value. |\n| end | Number | — | The end value. |\n| prefix | String | — | A prefix to be added to the final string. |\n| unit | String | — | A unit suffix to be added to the final string. |\n| speed | Number | 10 | The speed in milliseconds to count up or down. |\n| decreasing | Boolean | false | Enables to count backwards. |\n| onEnd | Function | — | Callback function to be invoked when the end value is reached. |\n| className | String | — | Additional classes to be set on the wrapping element. |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "AnimatedNumber components/animatedNumber #components/animatedNumber Components Content"
+  },
+  {
+    "id": "components/animatedTextReveal",
+    "title": "AnimatedTextReveal",
+    "lead": "AnimatedTextReveal displays text that smoothly reveals from below while a subtle shimmer effect runs across it. It’s designed for attention-grabbing messages or live-updating content, combining a primary reveal motion with an optional continuous shimmer highlight.",
+    "summary": "AnimatedTextReveal displays text that smoothly reveals from below while a subtle shimmer effect runs across it. It’s designed for attention-grabbing messages or live-updating content, combining a primary reveal motion with an optional continuous shimmer highlight.",
+    "searchText": "AnimatedTextReveal\nAnimatedTextReveal displays text that smoothly reveals from below while a subtle shimmer effect runs across it. It’s designed for attention-grabbing messages or live-updating content, combining a primary reveal motion with an optional continuous shimmer highlight.\nAnimatedTextReveal\nUse this component when you want to emphasize text through motion, such as when showing incremental updates or loading states. The reveal motion ensures readability and hierarchy, while the shimmer accent adds a refined sense of activity or focus.\n\nAvoid using it for large paragraphs or static labels — reserve it for short, meaningful text where animation enhances clarity rather than distracts.\nText with automatic cycling and animated gradient\nLive stream\n\nSystem is thinking...\n\nText with animated gradient\nProcessing your request...\n\nText with automatic cycling but without animated gradient\nSystem is thinking...\n\nText with custom styling\nSystem is thinking...\n\nRevealing text on a button\nContinue\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| text | String \\| String[] | — | Text content to display. Accepts a string or an array of phrases that are revealed and cycled through automatically. |\n| duration | Number | 0.4 | Reveal animation duration in seconds. |\n| delay | Number | 0 | Reveal animation delay before starting, in seconds. |\n| interval | Number | 3 | Interval time between phrase transitions when multiple texts are provided, in seconds. |\n| distance | Number | 10 | Vertical offset in pixels from which the text reveals upward. |\n| ease | \"linear\" \\| \"easeIn\" \\| \"easeOut\" \\| \"easeInOut\" | \"easeOut\" | Easing function applied to the reveal motion. |\n| startOnView | Boolean | true | Whether the animation should only start once the component enters the viewport when scrolling. |\n| once | Boolean | false | If true, the reveal animation runs only once per mount when the component enters the viewport. |\n| inViewMargin | String | — | Optional root margin passed to the intersection observer for in-view detection (e.g., \"0px 0px -10% 0px\"). See motion/react for more details |\n| shimmer | Boolean | true | Enables or disables the shimmer highlight effect across the text. |\n| shimmerDuration | Number | 5 | Duration of one shimmer loop in seconds. |\n| shimmerDelay | Number | 0 | Delay before the shimmer effect starts, in seconds. |\n| shimmerSpread | Number | 8 | Multiplier controlling the width of the shimmer highlight band. |\n| shimmerRepeat | Boolean | true | If true, the shimmer animation loops infinitely. |\n| shimmerColor | \"black\" \\| \"darkest\" \\| \"darker\" \\| \"dark\" \\| \"gray\" \\| \"light\" \\| \"lighter\" \\| \"lightest\" \\| \"white\" | — | The color of the shimmer highlight band. |\n| textColor | \"black\" \\| \"darkest\" \\| \"darker\" \\| \"dark\" \\| \"gray\" \\| \"light\" \\| \"lighter\" \\| \"lightest\" \\| \"white\" \\| \"primary\" \\| \"secondary\" \\| \"info\" \\| \"warning\" \\| \"danger\" \\| \"success\" | — | Base color of the text. |\n| innerClassName | String | — | Additional classNames set on the inner element. |\n| className | String | — | Additional class names to apply to the wrapper element. |\nStatus\nIdle\n\nSync now\n\nNo sync yet\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| text | String \\| String[] | — | Text content to display. Accepts a string or an array of phrases that are revealed and cycled through automatically. |\n| duration | Number | 0.4 | Reveal animation duration in seconds. |\n| delay | Number | 0 | Reveal animation delay before starting, in seconds. |\n| interval | Number | 3 | Interval time between phrase transitions when multiple texts are provided, in seconds. |\n| distance | Number | 10 | Vertical offset in pixels from which the text reveals upward. |\n| ease | \"linear\" \\| \"easeIn\" \\| \"easeOut\" \\| \"easeInOut\" | \"easeOut\" | Easing function applied to the reveal motion. |\n| startOnView | Boolean | true | Whether the animation should only start once the component enters the viewport when scrolling. |\n| once | Boolean | false | If true, the reveal animation runs only once per mount when the component enters the viewport. |\n| inViewMargin | String | — | Optional root margin passed to the intersection observer for in-view detection (e.g., \"0px 0px -10% 0px\"). See motion/react for more details |\n| shimmer | Boolean | true | Enables or disables the shimmer highlight effect across the text. |\n| shimmerDuration | Number | 5 | Duration of one shimmer loop in seconds. |\n| shimmerDelay | Number | 0 | Delay before the shimmer effect starts, in seconds. |\n| shimmerSpread | Number | 8 | Multiplier controlling the width of the shimmer highlight band. |\n| shimmerRepeat | Boolean | true | If true, the shimmer animation loops infinitely. |\n| shimmerColor | \"black\" \\| \"darkest\" \\| \"darker\" \\| \"dark\" \\| \"gray\" \\| \"light\" \\| \"lighter\" \\| \"lightest\" \\| \"white\" | — | The color of the shimmer highlight band. |\n| textColor | \"black\" \\| \"darkest\" \\| \"darker\" \\| \"dark\" \\| \"gray\" \\| \"light\" \\| \"lighter\" \\| \"lightest\" \\| \"white\" \\| \"primary\" \\| \"secondary\" \\| \"info\" \\| \"warning\" \\| \"danger\" \\| \"success\" | — | Base color of the text. |\n| innerClassName | String | — | Additional classNames set on the inner element. |\n| className | String | — | Additional class names to apply to the wrapper element. |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "AnimatedTextReveal components/animatedTextReveal #components/animatedTextReveal Components Content"
+  },
+  {
+    "id": "components/animations",
+    "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",
+    "category": "Components",
+    "section": "Content",
+    "boost": "Animations components/animations #components/animations Components Content"
+  },
+  {
+    "id": "components/appHeader",
+    "title": "ApplicationHeader",
+    "lead": "This is the header component for all services. All navigation link components that are passed into the header should be based on react-router",
+    "summary": "This is the header component for all services. All navigation link components that are passed into the header should be based on react-router",
+    "searchText": "ApplicationHeader\nThis is the header component for all services. All navigation link components that are passed into the header should be based on react-router\nApplicationHeader\nApplicationHeader\n\nHeadline 1\nSubline 1\n\nHeadline 2\nSubline 2\n\nHeadline 3\nSubline 3\n\nTest A\nTest B\nTest C\nTest D\nTest E\n\nLoad different nav items\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | Node | — | The service name shown as the navigator dropdown label. |\n| homeRoute | Node | — | The home URL that shall be used for the home button. Pass a react-router-dom NavLink as homeRoute into the header. For example: <NavLink to='https://home.rio.cloud' /|\n| showHomeIcon | Boolean | true | Defines to either show the home icon or the RIO logo as brand logo. |\n| appNavigator | Node | — | The component for the navigation between apps which will be shown inside the main dropdown. Platform apps may use the default AppNavigator but there are also other cases like support apps where it's just a simple list In this case, use the prop appMenuItems. If no appNavigator is defined, the dropdown menu will not be rendered. |\n| appNavigatorClassName | String | — | Additional class names that are added to the appNavigator. |\n| appMenuItems | Array | — | List of application navigation link components. |\n| └key | String | — | Unique key for the navigation component. |\n| └route | Node | — | The navigation link component used for rendering the name and for routing. For example: <NavLink to='/app1'{'App 1'}</NavLink|\n| navItems | Array | — | List of sub-module navigation component of an app. Items collapse into a dropdown if remaining space in the header is not sufficient. |\n| └key | String | — | Unique key for the sub-module navigation component of an app. |\n| └route | Node | — | The navigation link component used for rendering the name and for routing. For example: <NavLink to='/app/ipsum'{'Lorem ipsum'}</NavLink|\n| actionBarItems | Array of Nodes | [] | List of external smart components like the rio-accountmenu or application owned components such as a ServiceInfo icon. These components are based on the ActionBarItem |\n| onToggleAppMenu | (isOpen: boolean) =void | — | Callback function triggered when the application menu is open or closed. |\n| className | String | — | Additional class names that are added to the wrapper component. |\nActionBarItem\nThe ActionBarItem components consists mainly of two sub-components: Icon and Popover. The Icon component is mandatory and is shown in the header. The Popover component is optional and it's content will be shown inside a Popover.\nApplicationHeader\n\n4\n### ActionBarItem\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | The id is used to identify the item in the DOM. If not provided, a random id is used instead. |\n| title | String | — | The title property for the sub component ActionBarItem.Popover. This can be a String or another component as well as a React-Intl component. |\n| className | String | — | Additional class names that are added to the respective component. It can be defined for the parent and all sub components. |\n| mobileDialogBodyClassName | String | — | Additional class names that are added to dialog fallback modal-body element. |\n| hidePopoverOnClick | Boolean | true | Defined if the popover should close when any child element is being clicked. |\n| popoverWidth | Number | 250 | Possible values are: 100, 150, 200, 250, 300, 350, 400, 450 or 500 |\n| useOffscreen | Boolean | — | Set on ActionBarItem.Popover in order to render the Popover content in the offscreen to have it in place and loaded when the Popover is shown. This flag ignored for mobile, in order to save energy. |\n| children | any | — | Any component given to the sub components will be within the respective area. NoteChild elements for ActionItemBar.Icon such as rioglyph or svg icons that shall be shown as icon in the header must have set the class icon |\n### ActionBarItem.List\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the wrapping list item component. |\n### ActionBarItem.ListItem\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| hasLink | Boolean | — | Set it to true when you want to use the item as link item. In case, please use the Link component from react-router-dom instead of an anchor tag to prevent side effects when automatically closing the popover. |\n| icon | String | — | The name of the icon to be used for the item. |\n| onClick | Function | — | Callback function to be triggered when the internal button of a list item is clicked. Note: When no callback function is provided, the children are rendered as is without wrapping them in a button. |\n| className | String | — | Additional class names that are added to the wrapping list item component. |\n### ActionBarItem.ListSeparator\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the wrapping list item component. |\n### ActionBarItem.Popover\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | String / Node | — | The popover title. |\n| useOffscreen | Boolean | false | Define whether the popover content shall be rendered behind the scene to pre-load content or to avoid unmounting the content component |\n| className | String | — | Additional class names that are added to the popover content. |",
+    "category": "Components",
+    "section": "Application",
+    "boost": "ApplicationHeader components/appHeader #components/appHeader Components Application"
+  },
+  {
+    "id": "components/appLayout",
+    "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. |",
+    "category": "Components",
+    "section": "Application",
+    "boost": "ApplicationLayout components/appLayout #components/appLayout Components Application"
+  },
+  {
+    "id": "components/appNavigationBar",
+    "title": "AppNavigationBar",
+    "lead": null,
+    "summary": "Title of content",
+    "searchText": "AppNavigationBar\nAppNavigationBar\nTitle of content\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A ref function assigned to the wrapper element. |\n| title | string \\| ReactNode | — | The title for the content that is shown. |\n| titleSize | 'md' \\| 'lg' | md | Defines the size of the title. Possible values are \"md\" and \"lg\". |\n| subtitle | string \\| ReactNode | — | Adds a subtitle below the title. |\n| right | Node | — | Right side area for additional options or buttons like filter etc. that is relevant for the shown content. |\n| onNavigateBack | Function | () ={} | Callback function for when the back navigation button is clicked. |\n| border | boolean | false | Add a light bottom border to the wrapper element. |\n| className | String | — | Additional classes for the wrapper element. |\nTitle of content\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A ref function assigned to the wrapper element. |\n| title | string \\| ReactNode | — | The title for the content that is shown. |\n| titleSize | 'md' \\| 'lg' | md | Defines the size of the title. Possible values are \"md\" and \"lg\". |\n| subtitle | string \\| ReactNode | — | Adds a subtitle below the title. |\n| right | Node | — | Right side area for additional options or buttons like filter etc. that is relevant for the shown content. |\n| onNavigateBack | Function | () ={} | Callback function for when the back navigation button is clicked. |\n| border | boolean | false | Add a light bottom border to the wrapper element. |\n| className | String | — | Additional classes for the wrapper element. |\nWith more space, a back button label can be shown\nBack\n\nTitle of content\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A ref function assigned to the wrapper element. |\n| title | string \\| ReactNode | — | The title for the content that is shown. |\n| titleSize | 'md' \\| 'lg' | md | Defines the size of the title. Possible values are \"md\" and \"lg\". |\n| subtitle | string \\| ReactNode | — | Adds a subtitle below the title. |\n| right | Node | — | Right side area for additional options or buttons like filter etc. that is relevant for the shown content. |\n| onNavigateBack | Function | () ={} | Callback function for when the back navigation button is clicked. |\n| border | boolean | false | Add a light bottom border to the wrapper element. |\n| className | String | — | Additional classes for the wrapper element. |\nIn some cases a subtitle comes in handy\nBack\n\nTitle of content\nlorem ipsum dolor sit amet\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A ref function assigned to the wrapper element. |\n| title | string \\| ReactNode | — | The title for the content that is shown. |\n| titleSize | 'md' \\| 'lg' | md | Defines the size of the title. Possible values are \"md\" and \"lg\". |\n| subtitle | string \\| ReactNode | — | Adds a subtitle below the title. |\n| right | Node | — | Right side area for additional options or buttons like filter etc. that is relevant for the shown content. |\n| onNavigateBack | Function | () ={} | Callback function for when the back navigation button is clicked. |\n| border | boolean | false | Add a light bottom border to the wrapper element. |\n| className | String | — | Additional classes for the wrapper element. |",
+    "category": "Components",
+    "section": "Navigation",
+    "boost": "AppNavigationBar components/appNavigationBar #components/appNavigationBar Components Navigation"
+  },
+  {
+    "id": "components/areaCharts",
+    "title": "AreaChart",
+    "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": "AreaChart\nAreaChart\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 AreaChart\n\nPage APage BPage CPage DPage EPage FPage G\n### AreaChart\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| 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 | false | 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| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\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| areas | Array of Area | [] | Renders the provided Area components. |\n| gradients | Array of AreaGradient | [] | Renders the provided gradient components. |\n| ... |  | — | Additional props are passed to the underlying AreaChart component. Details can be found here: https://recharts.org/en-US/api/AreaChart |\n### Area\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| strokeColor | String | color-coldplay-fountain | Defines the color for the area component. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the area. |\n| dataUnit | String / Number | — | The unit of data displayed for the area. |\n| gradientId | String | areaGradient | The id of the corresponding gradient component used in the chart. |\n| legendType | String | square | The type of icon in legend. If set to \"none\", no legend item will be rendered. |\n| type | String | monotone | The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area. |\n| isAnimationActive | Boolean | true | If set false, animation of line will be disabled. |\n| ... |  | — | Additional props are passed to the underlying Area component. Details can be found here: https://recharts.org/en-US/api/Area |\n### AreaGradient\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | areaGradient | The id of the gradient referenced by the area component that it is used for. |\n| color | String | color-coldplay-fountain | Defines the color for the gradient component. Take the color name from the charts colors page. |\n### ReferenceLine\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| stroke | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |\n| ... |  | — | Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine |\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 Areas in an AreaChart\n\nAMT\nUV\n\n0900180027003600MaxPage APage BPage CPage DPage EPage FPage G\n### AreaChart\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| 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 | false | 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| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\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| areas | Array of Area | [] | Renders the provided Area components. |\n| gradients | Array of AreaGradient | [] | Renders the provided gradient components. |\n| ... |  | — | Additional props are passed to the underlying AreaChart component. Details can be found here: https://recharts.org/en-US/api/AreaChart |\n### Area\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| strokeColor | String | color-coldplay-fountain | Defines the color for the area component. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the area. |\n| dataUnit | String / Number | — | The unit of data displayed for the area. |\n| gradientId | String | areaGradient | The id of the corresponding gradient component used in the chart. |\n| legendType | String | square | The type of icon in legend. If set to \"none\", no legend item will be rendered. |\n| type | String | monotone | The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area. |\n| isAnimationActive | Boolean | true | If set false, animation of line will be disabled. |\n| ... |  | — | Additional props are passed to the underlying Area component. Details can be found here: https://recharts.org/en-US/api/Area |\n### AreaGradient\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | areaGradient | The id of the gradient referenced by the area component that it is used for. |\n| color | String | color-coldplay-fountain | Defines the color for the gradient component. Take the color name from the charts colors page. |\n### ReferenceLine\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| stroke | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |\n| ... |  | — | Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine |\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": "AreaChart components/areaCharts #components/areaCharts Components Charts"
+  },
+  {
+    "id": "components/aspectRatioPlaceholder",
+    "title": "AspectRatioPlaceholder",
+    "lead": "Use the AspectRatioPlaceholder for having responsive elements with an aspect ratio.",
+    "summary": "Use the AspectRatioPlaceholder for having responsive elements with an aspect ratio.",
+    "searchText": "AspectRatioPlaceholder\nUse the AspectRatioPlaceholder for having responsive elements with an aspect ratio.\nAspectRatioPlaceholder\nDefault (16/9)\n\nCustom (1/1)\n\nCustom - same as image size (1000/600)\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | 16 | Defines the aspect ratio width. |\n| height | Number | 9 | Defines the aspect ratio height. |\n| className | String | — | Additional class names that are added to the wrapping element. |\n| children | Node | — | The elements to be rendered inside. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "AspectRatioPlaceholder components/aspectRatioPlaceholder #components/aspectRatioPlaceholder Components Misc"
+  },
+  {
+    "id": "components/assetTree",
+    "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. |",
+    "category": "Components",
+    "section": "Selection",
+    "boost": "AssetTree components/assetTree #components/assetTree Components Selection"
+  },
+  {
+    "id": "components/autosuggests",
+    "title": "AutoSuggest",
+    "lead": "For a more flexible and smart search we highly recommend using fuse.js as searching algorithm.For more information on how to configure it, see: https://fusejs.io",
+    "summary": "For a more flexible and smart search we highly recommend using fuse.js as searching algorithm.For more information on how to configure it, see: https://fusejs.io",
+    "searchText": "AutoSuggest\nFor a more flexible and smart search we highly recommend using fuse.js as searching algorithm.For more information on how to configure it, see: https://fusejs.io\nAutoSuggest\nSimple examples without searching algorithmBasic use\n\nSuggestion 1\nSuggestion 2\nSuggestion 3\nSuggestion 4\nSuggestion 5\nSuggestion 6\nSuggestion 7\nSuggestion 8\nSuggestion 9\nSuggestion 10\n\nwith loading indicator\n\nwith input-group-addon and no closeOnSelect\n.00\n\nSuggestion 1\nSuggestion 2\nSuggestion 3\nSuggestion 4\nSuggestion 5\nSuggestion 6\nSuggestion 7\nSuggestion 8\nSuggestion 9\nSuggestion 10\n\nDisabled Autosuggest\n\nAutosuggest with error\nSuggestion 1\nSuggestion 2\nSuggestion 3\nSuggestion 4\nSuggestion 5\nSuggestion 6\nSuggestion 7\nSuggestion 8\nSuggestion 9\nSuggestion 10\n\nAutosuggest with warning and addons\n\nSuggestion 1\nSuggestion 2\nSuggestion 3\nSuggestion 4\nSuggestion 5\nSuggestion 6\nSuggestion 7\nSuggestion 8\nSuggestion 9\nSuggestion 10\n\nThere is something wrong here\n\nAutosuggest with drop up and right aligned\nSuggestion 1\nSuggestion 2\nSuggestion 3\nSuggestion 4\nSuggestion 5\nSuggestion 6\nSuggestion 7\nSuggestion 8\nSuggestion 9\nSuggestion 10\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| suggestions | Array | [] | Array of items which will be displayed. Items can be arbitrary objects as long as they have a label defined. |\n| onSuggestionsFetchRequested | Function | () ={} | Callback function which will be called every time you need to recalculate suggestions e.i. when the filter is updates after each input. It will also be called when the input is cleared. The value would be an empty string in this case. |\n| onSuggestionSelected | Function | — | Callback function which will be called when a suggestion is selected from the dropdown menu. |\n| onSuggestionHighlighted | Function | — | Callback function which will be called every time the highlighted selection changes. |\n| renderSuggestion | Function | (suggestion) =suggestion.label | Function that defines how suggestions are rendered on the dropdown-menu.Use this to customize the appearance for instance when you want to show an icon for a suggestion. |\n| getSuggestionValue | Function | (suggestion) =suggestion.label | Function that returns a string which will be displayed inside the input. This is required when a custom render function for suggestions is provided. Overwrite this function to provide the value to be used for a suggestion. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned or not. Set to true additionally disables autoDrop feature. |\n| dropup | Boolean | false | Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle. |\n| autoDropDirection | Boolean | true | Boolean that enables autoDrop feature. |\n| closeOnSelect | Boolean | true | Boolean that enables the selection of an item to close the dropdown or not. |\n| openOnFocus | Boolean | false | Boolean that enables opening the dropdown menu when gaining focus. |\n| noItemMessage | String / Node | — | Text that will be shown when there is not match found. If nothing is defined the dropdown-menu will not be rendered. |\n| dropdownClassName | String | — | Additional class names that are added to the dropdown element. |\n| className | String | — | Additional class names that are added to the wrapping element. |\n| autoComplete | String | — | Sets autocomplete value for autosuggest forms. |\n| isLoading | Boolean | false | Shows a loading spinner instead of the items if set to true. |\n| showSelectedItemsInInput | Boolean | true | Defines whether or not a selected item is shown in the input after it was selected. |\n| leadingInputAddons | Array of Nodes | — | Adds a list of input-addons elements in front of the input. |\n| trailingInputAddons | Array of Nodes | — | Adds a list of input-addons elements after the input. |\n### Additional props to be passed to the underlying ClearableInput component:\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| inputProps | Object | — | Object to define properties for the input component. For the input, the ClearableInput component is used. The following props are part of the inputProps: |\n| └value | String | — | The value to be set for the input. Like this the input can be controlled from the outside. |\n| └onChange | Function | () ={} | DEPRECATED - Callback function which will be called when the input changes. This is usually not needed as the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here for completeness and for certain edge cases. It might be removed in the future when not needed. |\n| └onClear | Function | () ={} | Callback function which will be called when the input is cleared. This is usually not needed as the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here for completeness and for certain edge cases. It might be removed in the future when not needed. |\n| └onBlur | Function | () ={} | Callback function which gets triggered when the input looses the focus. |\n| └onFocus | Function | () ={} | Callback function which gets triggered when the input gaines focus. |\n| └placeholder | String | Start typing ... | String that will be displayed inside the input when nothing is typed in. Default: Start typing ... |\n| └icon | String | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search |\n| └disabled | Boolean | false | Boolean value that disabled the input component. |\n| └hasError | Boolean | false | Boolean value that adds the class has-error to the input component. Use this for validation use cases. The Autosuggest component should be wrapped in a form-group element with the class has-feedback |\n| └tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| └inputRef | Function | — | The React ref for the underlying input. |\n| └className | String | — | Additional class names that are added to the input component. |\nSelecting multiple items\nExample for selecting multiple items\nsuggestion 1\nsuggestion 2\nsuggestion 3\nsuggestion 4\nsuggestion 5\nsuggestion 6\nsuggestion 7\nsuggestion 8\nsuggestion 9\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| suggestions | Array | [] | Array of items which will be displayed. Items can be arbitrary objects as long as they have a label defined. |\n| onSuggestionsFetchRequested | Function | () ={} | Callback function which will be called every time you need to recalculate suggestions e.i. when the filter is updates after each input. It will also be called when the input is cleared. The value would be an empty string in this case. |\n| onSuggestionSelected | Function | — | Callback function which will be called when a suggestion is selected from the dropdown menu. |\n| onSuggestionHighlighted | Function | — | Callback function which will be called every time the highlighted selection changes. |\n| renderSuggestion | Function | (suggestion) =suggestion.label | Function that defines how suggestions are rendered on the dropdown-menu.Use this to customize the appearance for instance when you want to show an icon for a suggestion. |\n| getSuggestionValue | Function | (suggestion) =suggestion.label | Function that returns a string which will be displayed inside the input. This is required when a custom render function for suggestions is provided. Overwrite this function to provide the value to be used for a suggestion. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned or not. Set to true additionally disables autoDrop feature. |\n| dropup | Boolean | false | Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle. |\n| autoDropDirection | Boolean | true | Boolean that enables autoDrop feature. |\n| closeOnSelect | Boolean | true | Boolean that enables the selection of an item to close the dropdown or not. |\n| openOnFocus | Boolean | false | Boolean that enables opening the dropdown menu when gaining focus. |\n| noItemMessage | String / Node | — | Text that will be shown when there is not match found. If nothing is defined the dropdown-menu will not be rendered. |\n| dropdownClassName | String | — | Additional class names that are added to the dropdown element. |\n| className | String | — | Additional class names that are added to the wrapping element. |\n| autoComplete | String | — | Sets autocomplete value for autosuggest forms. |\n| isLoading | Boolean | false | Shows a loading spinner instead of the items if set to true. |\n| showSelectedItemsInInput | Boolean | true | Defines whether or not a selected item is shown in the input after it was selected. |\n| leadingInputAddons | Array of Nodes | — | Adds a list of input-addons elements in front of the input. |\n| trailingInputAddons | Array of Nodes | — | Adds a list of input-addons elements after the input. |\n### Additional props to be passed to the underlying ClearableInput component:\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| inputProps | Object | — | Object to define properties for the input component. For the input, the ClearableInput component is used. The following props are part of the inputProps: |\n| └value | String | — | The value to be set for the input. Like this the input can be controlled from the outside. |\n| └onChange | Function | () ={} | DEPRECATED - Callback function which will be called when the input changes. This is usually not needed as the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here for completeness and for certain edge cases. It might be removed in the future when not needed. |\n| └onClear | Function | () ={} | Callback function which will be called when the input is cleared. This is usually not needed as the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here for completeness and for certain edge cases. It might be removed in the future when not needed. |\n| └onBlur | Function | () ={} | Callback function which gets triggered when the input looses the focus. |\n| └onFocus | Function | () ={} | Callback function which gets triggered when the input gaines focus. |\n| └placeholder | String | Start typing ... | String that will be displayed inside the input when nothing is typed in. Default: Start typing ... |\n| └icon | String | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search |\n| └disabled | Boolean | false | Boolean value that disabled the input component. |\n| └hasError | Boolean | false | Boolean value that adds the class has-error to the input component. Use this for validation use cases. The Autosuggest component should be wrapped in a form-group element with the class has-feedback |\n| └tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| └inputRef | Function | — | The React ref for the underlying input. |\n| └className | String | — | Additional class names that are added to the input component. |\nDetailed example with flexible matching\nFor a more flexible and smart search we highly recommend using fuse.js as searching algorithm. For more information on how to configure it, see: https://fusejs.io\nFull example, with fusejs suggestion rendering\n\nDriver A-47\nDriver B-52\nDriver T-800\nTruck D-800\nTruck Y-ME\nTruck Z-FG\nTruck R-BM\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| suggestions | Array | [] | Array of items which will be displayed. Items can be arbitrary objects as long as they have a label defined. |\n| onSuggestionsFetchRequested | Function | () ={} | Callback function which will be called every time you need to recalculate suggestions e.i. when the filter is updates after each input. It will also be called when the input is cleared. The value would be an empty string in this case. |\n| onSuggestionSelected | Function | — | Callback function which will be called when a suggestion is selected from the dropdown menu. |\n| onSuggestionHighlighted | Function | — | Callback function which will be called every time the highlighted selection changes. |\n| renderSuggestion | Function | (suggestion) =suggestion.label | Function that defines how suggestions are rendered on the dropdown-menu.Use this to customize the appearance for instance when you want to show an icon for a suggestion. |\n| getSuggestionValue | Function | (suggestion) =suggestion.label | Function that returns a string which will be displayed inside the input. This is required when a custom render function for suggestions is provided. Overwrite this function to provide the value to be used for a suggestion. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned or not. Set to true additionally disables autoDrop feature. |\n| dropup | Boolean | false | Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle. |\n| autoDropDirection | Boolean | true | Boolean that enables autoDrop feature. |\n| closeOnSelect | Boolean | true | Boolean that enables the selection of an item to close the dropdown or not. |\n| openOnFocus | Boolean | false | Boolean that enables opening the dropdown menu when gaining focus. |\n| noItemMessage | String / Node | — | Text that will be shown when there is not match found. If nothing is defined the dropdown-menu will not be rendered. |\n| dropdownClassName | String | — | Additional class names that are added to the dropdown element. |\n| className | String | — | Additional class names that are added to the wrapping element. |\n| autoComplete | String | — | Sets autocomplete value for autosuggest forms. |\n| isLoading | Boolean | false | Shows a loading spinner instead of the items if set to true. |\n| showSelectedItemsInInput | Boolean | true | Defines whether or not a selected item is shown in the input after it was selected. |\n| leadingInputAddons | Array of Nodes | — | Adds a list of input-addons elements in front of the input. |\n| trailingInputAddons | Array of Nodes | — | Adds a list of input-addons elements after the input. |\n### Additional props to be passed to the underlying ClearableInput component:\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| inputProps | Object | — | Object to define properties for the input component. For the input, the ClearableInput component is used. The following props are part of the inputProps: |\n| └value | String | — | The value to be set for the input. Like this the input can be controlled from the outside. |\n| └onChange | Function | () ={} | DEPRECATED - Callback function which will be called when the input changes. This is usually not needed as the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here for completeness and for certain edge cases. It might be removed in the future when not needed. |\n| └onClear | Function | () ={} | Callback function which will be called when the input is cleared. This is usually not needed as the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here for completeness and for certain edge cases. It might be removed in the future when not needed. |\n| └onBlur | Function | () ={} | Callback function which gets triggered when the input looses the focus. |\n| └onFocus | Function | () ={} | Callback function which gets triggered when the input gaines focus. |\n| └placeholder | String | Start typing ... | String that will be displayed inside the input when nothing is typed in. Default: Start typing ... |\n| └icon | String | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search |\n| └disabled | Boolean | false | Boolean value that disabled the input component. |\n| └hasError | Boolean | false | Boolean value that adds the class has-error to the input component. Use this for validation use cases. The Autosuggest component should be wrapped in a form-group element with the class has-feedback |\n| └tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| └inputRef | Function | — | The React ref for the underlying input. |\n| └className | String | — | Additional class names that are added to the input component. |",
+    "category": "Components",
+    "section": "Selection",
+    "boost": "AutoSuggest components/autosuggests #components/autosuggests Components Selection"
+  },
+  {
+    "id": "components/avatar",
+    "title": "Avatar",
+    "lead": "The Avatar is a small component designed to render a users image, the initials of the users name or an icon.",
+    "summary": "The Avatar is a small component designed to render a users image, the initials of the users name or an icon.",
+    "searchText": "Avatar\nThe Avatar is a small component designed to render a users image, the initials of the users name or an icon.\nAvatar\nJD\nAAK\nAK\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | string | — | When a name is provided, the Avatar automatically generates and displays the initials of that name. The name also appears in a tooltip when hovered over. |\n| abbr | string | — | The abbreviation can also be defined manually. It is recommended to limit abbreviations to a maximum of 2 to 3 characters. |\n| image | string | — | The image to be shown. When an image is displayed, the abbreviation is not shown. |\n| alt | string | — | The image alt text. If not given, the name will be used. |\n| iconName | string | user | The name of an icon that should be shown instead of initials. If nothing is provided, a default icon will be shown. |\n| size | number | 40 | The height and width of the component. |\n| backgroundColor | string | bg-lighter | The background color for the component. By default, the text and icon color is derived from the background color. |\n| tooltip | string \\| JSX.Element | — | The content of the Avatars tooltip. if nothing is provided, the name is used. |\n| iconClassName | string | — | Additional classes to be set on the icon element. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nAvatarGroup\nJD\nAAK\nAK\n+2\n\n+2\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| maxItemsVisible | number | — | Maximum number of items to be shown. Items that overflow are grouped into a singleAvatar that displays the overflow count. Collapsed names are shown inside a tooltip. By default all items are shown. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "Avatar components/avatar #components/avatar Components Misc"
+  },
+  {
+    "id": "components/banner",
+    "title": "Banner",
+    "lead": "Convey information or prompt action through in-line banners, ideal for educational content, updates, or announcements.",
+    "summary": "Convey information or prompt action through in-line banners, ideal for educational content, updates, or announcements.",
+    "searchText": "Banner\nConvey information or prompt action through in-line banners, ideal for educational content, updates, or announcements.\nBanner\nBanner with multiple pages\nBanner title\nContent highlighting a specific feature or action that users should be aware of or engage with\nButton CTAButton CTA\n\nReset\n### Banner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | true | Defines if the content is shown or not. |\n| dismissible | boolean | true | Defines if a close button is shown or not. You can still add a custom CTA button to the content that handles visibility. |\n| initialAnimation | boolean | true | Enables or disables initial animation. |\n| onClose | () =void | — | Callback when the close button is clicked. |\n| pageTimeout | number | 20_000 | Defines the time when the next page is shown in milliseconds. |\n| showPageNavigation | boolean | true | Defines if the page navigation buttons shall be shown or not. |\n| border | boolean | true | Defines if a border is shown or not. When placed on a white background, please disable the border so it looks better. |\n| className | string | — | Additional classes for the wrapper element. |\n| children | ReactNode \\| ReactNode[] | — | The actual banner content. Wrap your content in a <Banner.Pagecomponent. When having multiple pages, usa an array of <Banner.Pagecomponents. |\n### Banner.Page\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional classes for the wrapper element. |\n### Banner.Icon\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional classes for the wrapper element. |\n### Banner.Content\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | string \\| React.ReactElement | — | The title for the banner. |\n| actions | React.ReactElement | — | Use this to add the banner call-to-action buttons. Wrap them in a <Banner.Actionscomponent. |\n| minWidthBreakpoint | number | 400 | Breakpoint in pixels where the action buttons are placed under the banner text. On larger screens, the buttons are next to the text. |\n| className | string | — | Additional classes for the wrapper element. |\n### Banner.Actions\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional classes for the wrapper element. |\nCustomize your experience\nUpdate your preferences in settings for a tailored experience\nGot it\n\nReset\n### Banner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | true | Defines if the content is shown or not. |\n| dismissible | boolean | true | Defines if a close button is shown or not. You can still add a custom CTA button to the content that handles visibility. |\n| initialAnimation | boolean | true | Enables or disables initial animation. |\n| onClose | () =void | — | Callback when the close button is clicked. |\n| pageTimeout | number | 20_000 | Defines the time when the next page is shown in milliseconds. |\n| showPageNavigation | boolean | true | Defines if the page navigation buttons shall be shown or not. |\n| border | boolean | true | Defines if a border is shown or not. When placed on a white background, please disable the border so it looks better. |\n| className | string | — | Additional classes for the wrapper element. |\n| children | ReactNode \\| ReactNode[] | — | The actual banner content. Wrap your content in a <Banner.Pagecomponent. When having multiple pages, usa an array of <Banner.Pagecomponents. |\n### Banner.Page\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional classes for the wrapper element. |\n### Banner.Icon\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional classes for the wrapper element. |\n### Banner.Content\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | string \\| React.ReactElement | — | The title for the banner. |\n| actions | React.ReactElement | — | Use this to add the banner call-to-action buttons. Wrap them in a <Banner.Actionscomponent. |\n| minWidthBreakpoint | number | 400 | Breakpoint in pixels where the action buttons are placed under the banner text. On larger screens, the buttons are next to the text. |\n| className | string | — | Additional classes for the wrapper element. |\n### Banner.Actions\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional classes for the wrapper element. |\nPay attention to borders\nOn white background, disable the border prop so the component is more pleasing for the eye\n\nReset\n### Banner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | true | Defines if the content is shown or not. |\n| dismissible | boolean | true | Defines if a close button is shown or not. You can still add a custom CTA button to the content that handles visibility. |\n| initialAnimation | boolean | true | Enables or disables initial animation. |\n| onClose | () =void | — | Callback when the close button is clicked. |\n| pageTimeout | number | 20_000 | Defines the time when the next page is shown in milliseconds. |\n| showPageNavigation | boolean | true | Defines if the page navigation buttons shall be shown or not. |\n| border | boolean | true | Defines if a border is shown or not. When placed on a white background, please disable the border so it looks better. |\n| className | string | — | Additional classes for the wrapper element. |\n| children | ReactNode \\| ReactNode[] | — | The actual banner content. Wrap your content in a <Banner.Pagecomponent. When having multiple pages, usa an array of <Banner.Pagecomponents. |\n### Banner.Page\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional classes for the wrapper element. |\n### Banner.Icon\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional classes for the wrapper element. |\n### Banner.Content\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | string \\| React.ReactElement | — | The title for the banner. |\n| actions | React.ReactElement | — | Use this to add the banner call-to-action buttons. Wrap them in a <Banner.Actionscomponent. |\n| minWidthBreakpoint | number | 400 | Breakpoint in pixels where the action buttons are placed under the banner text. On larger screens, the buttons are next to the text. |\n| className | string | — | Additional classes for the wrapper element. |\n### Banner.Actions\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional classes for the wrapper element. |\nTip 1\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\nReset\n### Banner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | true | Defines if the content is shown or not. |\n| dismissible | boolean | true | Defines if a close button is shown or not. You can still add a custom CTA button to the content that handles visibility. |\n| initialAnimation | boolean | true | Enables or disables initial animation. |\n| onClose | () =void | — | Callback when the close button is clicked. |\n| pageTimeout | number | 20_000 | Defines the time when the next page is shown in milliseconds. |\n| showPageNavigation | boolean | true | Defines if the page navigation buttons shall be shown or not. |\n| border | boolean | true | Defines if a border is shown or not. When placed on a white background, please disable the border so it looks better. |\n| className | string | — | Additional classes for the wrapper element. |\n| children | ReactNode \\| ReactNode[] | — | The actual banner content. Wrap your content in a <Banner.Pagecomponent. When having multiple pages, usa an array of <Banner.Pagecomponents. |\n### Banner.Page\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional classes for the wrapper element. |\n### Banner.Icon\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional classes for the wrapper element. |\n### Banner.Content\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | string \\| React.ReactElement | — | The title for the banner. |\n| actions | React.ReactElement | — | Use this to add the banner call-to-action buttons. Wrap them in a <Banner.Actionscomponent. |\n| minWidthBreakpoint | number | 400 | Breakpoint in pixels where the action buttons are placed under the banner text. On larger screens, the buttons are next to the text. |\n| className | string | — | Additional classes for the wrapper element. |\n### Banner.Actions\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional classes for the wrapper element. |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "Banner components/banner #components/banner Components Content"
+  },
+  {
+    "id": "components/barCharts",
+    "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 |",
+    "category": "Components",
+    "section": "Charts",
+    "boost": "BarChart components/barCharts #components/barCharts Components Charts"
+  },
+  {
+    "id": "components/barList",
+    "title": "BarList",
+    "lead": null,
+    "summary": "BarList",
+    "searchText": "BarList\nBarList\nBarList\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%\n\nBarList reversed\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%\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| data | BarListRow<T[] | — | Array of bar row data to be rendered. |\n| valueFormatter | (value: number) =string \\| React.ReactElement | — | Optional function to format the numeric value displayed on the right side of each bar. |\n| referenceValue | number | max(data.value) | A reference value used to calculate relative widths. If not provided, the maximum value in the data array will be used. |\n| showAnimation | boolean | false | Whether to animate the bar width transitions using Framer Motion. |\n| onSelectRow | (payload: BarListRow<T) =void | — | Callback fired when a bar is clicked. Receives the full data object of the selected bar. |\n| sortOrder | 'asc' \\| 'desc' \\| 'none' | 'none' | The sort order for the bars. |\n| rowHeight | number | 32 | Height of each bar row in pixels. |\n| opacity | number | 0.5 | Opacity applied to non-hovered bars. Value should be between 0 and 1. |\n| barColor | string | 'bg-highlight-light' | CSS class or color string used for the active/progress portion of each bar. |\n| labelColor | string | 'text-color-darker' | CSS class or color string used for the text labels. |\n| background | string | 'bg-transparent' | CSS class or color string used for the bar background. |\n| className | string | — | Additional classes for the wrapper element. |\nDamaged packages\n\nReturned packages\n\nIn transit\n\nStored in warehouse\n\nShipped packages\n\n95\n\n320\n\n1200\n\n4200\n\n8500\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| data | BarListRow<T[] | — | Array of bar row data to be rendered. |\n| valueFormatter | (value: number) =string \\| React.ReactElement | — | Optional function to format the numeric value displayed on the right side of each bar. |\n| referenceValue | number | max(data.value) | A reference value used to calculate relative widths. If not provided, the maximum value in the data array will be used. |\n| showAnimation | boolean | false | Whether to animate the bar width transitions using Framer Motion. |\n| onSelectRow | (payload: BarListRow<T) =void | — | Callback fired when a bar is clicked. Receives the full data object of the selected bar. |\n| sortOrder | 'asc' \\| 'desc' \\| 'none' | 'none' | The sort order for the bars. |\n| rowHeight | number | 32 | Height of each bar row in pixels. |\n| opacity | number | 0.5 | Opacity applied to non-hovered bars. Value should be between 0 and 1. |\n| barColor | string | 'bg-highlight-light' | CSS class or color string used for the active/progress portion of each bar. |\n| labelColor | string | 'text-color-darker' | CSS class or color string used for the text labels. |\n| background | string | 'bg-transparent' | CSS class or color string used for the bar background. |\n| className | string | — | Additional classes for the wrapper element. |",
+    "category": "Components",
+    "section": "Progress",
+    "boost": "BarList components/barList #components/barList Components Progress"
+  },
+  {
+    "id": "components/basicMap",
+    "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",
+    "category": "Components",
+    "section": "Map",
+    "boost": "Map components/basicMap #components/basicMap Components Map"
+  },
+  {
+    "id": "components/bottomSheet",
+    "title": "BottomSheet",
+    "lead": "The TimedBottomSheet is a wrapper component for the BottomSheet that allows to control it's visibility via timers and to use the localStorage to save user interaction for handling it's visibility.",
+    "summary": "The TimedBottomSheet is a wrapper component for the BottomSheet that allows to control it's visibility via timers and to use the localStorage to save user interaction for handling it's visibility.",
+    "searchText": "BottomSheet\nThe TimedBottomSheet is a wrapper component for the BottomSheet that allows to control it's visibility via timers and to use the localStorage to save user interaction for handling it's visibility.\nBottomSheet\nThis demonstrates a small bottom sheet use case on desktop. This can be used for providing additional information, upselling, feedback etc.\nTrigger small BottomSheet\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |\n| onClose | Function | () ={}) | Callback for when the sheet closes. |\n| width | Number / String | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a \"max-width-xxx\" via className to control it better. |\n| height | Number / String | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |\n| title | Node / String | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |\n| showCloseButton | Boolean | true | Defines whether or not the close button is shown. |\n| showMaximizeButton | Boolean | false | Defines whether or not the maximize button in the header is shown. |\n| onHeightChange | Function | () ={} | The callback function triggered when the maximize button is clicked and the height changes. |\n| detach | Boolean | false | Set to \"true\" to detach the bottom sheet from the left side and the bottom and create a little offset. |\n| detachOffset | Number | 15 | Defines the amount of pixels for the sheet. |\n| hasBackdrop | Boolean | false | Set to \"true\" to render a modal like backdrop to emphasize the bottom sheet. |\n| onBackdropClick | Function | () ={} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |\n| bodyRef | React Ref | — | A react ref added to the bottom sheet body. |\n| bodyClassName | String | — | Additional classes to be set on the body element. |\n| className | String | — | Additional classes to be set on the wrapping element. |\nThis demonstrates a bottom sheet use case on mobile. This can be used for providing additional information on mobile instead of using a sidebar, onboarding, alternative for dialogs etc.\nNoteThis example does not make sense on desktop with wider screens. Handle responsive modes and use a dialog or sidebar on desktop instead.\nTrigger mobile BottomSheet\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |\n| onClose | Function | () ={}) | Callback for when the sheet closes. |\n| width | Number / String | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a \"max-width-xxx\" via className to control it better. |\n| height | Number / String | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |\n| title | Node / String | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |\n| showCloseButton | Boolean | true | Defines whether or not the close button is shown. |\n| showMaximizeButton | Boolean | false | Defines whether or not the maximize button in the header is shown. |\n| onHeightChange | Function | () ={} | The callback function triggered when the maximize button is clicked and the height changes. |\n| detach | Boolean | false | Set to \"true\" to detach the bottom sheet from the left side and the bottom and create a little offset. |\n| detachOffset | Number | 15 | Defines the amount of pixels for the sheet. |\n| hasBackdrop | Boolean | false | Set to \"true\" to render a modal like backdrop to emphasize the bottom sheet. |\n| onBackdropClick | Function | () ={} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |\n| bodyRef | React Ref | — | A react ref added to the bottom sheet body. |\n| bodyClassName | String | — | Additional classes to be set on the body element. |\n| className | String | — | Additional classes to be set on the wrapping element. |\nThis demonstrates a bottom sheet use case on mobile. It demonstrates a bottom sheet for smartphones to perform an action.\nTrigger mobile BottomSheet\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |\n| onClose | Function | () ={}) | Callback for when the sheet closes. |\n| width | Number / String | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a \"max-width-xxx\" via className to control it better. |\n| height | Number / String | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |\n| title | Node / String | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |\n| showCloseButton | Boolean | true | Defines whether or not the close button is shown. |\n| showMaximizeButton | Boolean | false | Defines whether or not the maximize button in the header is shown. |\n| onHeightChange | Function | () ={} | The callback function triggered when the maximize button is clicked and the height changes. |\n| detach | Boolean | false | Set to \"true\" to detach the bottom sheet from the left side and the bottom and create a little offset. |\n| detachOffset | Number | 15 | Defines the amount of pixels for the sheet. |\n| hasBackdrop | Boolean | false | Set to \"true\" to render a modal like backdrop to emphasize the bottom sheet. |\n| onBackdropClick | Function | () ={} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |\n| bodyRef | React Ref | — | A react ref added to the bottom sheet body. |\n| bodyClassName | String | — | Additional classes to be set on the body element. |\n| className | String | — | Additional classes to be set on the wrapping element. |\nThis demonstrates a bottom sheet use case on mobile. It demonstrates a bottom sheet for an example of how you could do onboarding on smartphones.\nTrigger mobile onboarding BottomSheet\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |\n| onClose | Function | () ={}) | Callback for when the sheet closes. |\n| width | Number / String | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a \"max-width-xxx\" via className to control it better. |\n| height | Number / String | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |\n| title | Node / String | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |\n| showCloseButton | Boolean | true | Defines whether or not the close button is shown. |\n| showMaximizeButton | Boolean | false | Defines whether or not the maximize button in the header is shown. |\n| onHeightChange | Function | () ={} | The callback function triggered when the maximize button is clicked and the height changes. |\n| detach | Boolean | false | Set to \"true\" to detach the bottom sheet from the left side and the bottom and create a little offset. |\n| detachOffset | Number | 15 | Defines the amount of pixels for the sheet. |\n| hasBackdrop | Boolean | false | Set to \"true\" to render a modal like backdrop to emphasize the bottom sheet. |\n| onBackdropClick | Function | () ={} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |\n| bodyRef | React Ref | — | A react ref added to the bottom sheet body. |\n| bodyClassName | String | — | Additional classes to be set on the body element. |\n| className | String | — | Additional classes to be set on the wrapping element. |\nTimedBottomSheet\nShowcase of a timed bottom sheet used for requesting feedback from the user after a major feature was released or updated.\nTrigger timed bottom sheet\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| dismissed | Boolean | false | The \"dismissed\" flag can be used to tell this component that the user has clicked on the content of the component like a button or a link. In this case, the bottom sheet will store a flag in the localStorage to hide the bottom sheet for the next time and it will close the sheet right away. |\n| featureName | String | 0 | The \"featureName\" prop is used to name the localStorage flag that is used to control the visibility. It should be unique to avoid conflicts with other timed bottom sheets. |\n| localStoragePrefix | String | — | A prefix that will be used for the local storage flag to store whether the bottom sheet should be hidden. Use this prefix for your service name for instance. |\n| showAfter | Number | 0 | Defines the time in milliseconds when the bottom sheet shall be shown. Default value is 0 to show it right away. |\n| hideAfter | Number | 3600000 | Defines the time in milliseconds when the bottom sheet hides itself automatically. Default value is 3600000 to hide it after 1 hour. In this case, the localStorage flag is not set and the bottom sheet will be shown on the next page load. |\n| alwaysOn | Boolean | false | With this enabled, the BottomSheet will not hide automatically. |\n| showCloseButton | Boolean | true | Enables or disabled the close button. |\n| width | Number | — | Optional width of the bottom sheet. Alternatively, you can set a max-width-xxx via className instead. |\n| cleanupLocalStorage | Boolean | false | Flag to allow to remove the localStorage flag again once the component is not needed anymore. |\n| onClose | () =void | — | Callback function that gets triggered when the user closed the bottom sheet with the close button. |\n| bodyClassName | String | — | Optional className to be set on the body. |\n| className | String | — | Optional className to be set on the component. Use this to define a max-width value. |",
+    "category": "Components",
+    "section": "Application",
+    "boost": "BottomSheet components/bottomSheet #components/bottomSheet Components Application"
+  },
+  {
+    "id": "components/button",
+    "title": "Button",
+    "lead": "The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons",
+    "summary": "The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons",
+    "searchText": "Button\nThe button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons\nButton\nStandard buttons\nDefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted\nDisabled buttons\nDefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted\nButton sizes\nExtra SmallSmallMediumLarge\nIcon only buttons\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | Boolean | false | Set the button disabled. |\n| active | Boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| asToggle | Boolean | false | Use the button as a toggle button. The toggle state can be controlled viw the \"active\" prop. |\n| iconOnly | Boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconName | String | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| iconRight | Boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| multiline | Boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | Boolean | false | Defines whether the button takes up the full width of the parent element. |\n| onClick | Function | () ={} | Callback function triggered when clicking the button. |\n| bsStyle | String | default | Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTEDFILLED and Button.MUTED |\n| bsSize | String | — | Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG |\n| variant | String | — | Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANTLINK, Button.VARIANTLINKINLINE, Button.VARIANTOUTLINE and Button.VARIANTACTION |\n| className | String | — | Additional classes to be set on the button element. |\n| children | any | — | Any element to be rendered on the button. |\nLink buttons\nPrimarySuccessInfoWarningDanger\nLink inline buttons\n\nThis is an example for an Inline link button.\nNote Link buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | Boolean | false | Set the button disabled. |\n| active | Boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| asToggle | Boolean | false | Use the button as a toggle button. The toggle state can be controlled viw the \"active\" prop. |\n| iconOnly | Boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconName | String | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| iconRight | Boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| multiline | Boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | Boolean | false | Defines whether the button takes up the full width of the parent element. |\n| onClick | Function | () ={} | Callback function triggered when clicking the button. |\n| bsStyle | String | default | Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTEDFILLED and Button.MUTED |\n| bsSize | String | — | Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG |\n| variant | String | — | Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANTLINK, Button.VARIANTLINKINLINE, Button.VARIANTOUTLINE and Button.VARIANTACTION |\n| className | String | — | Additional classes to be set on the button element. |\n| children | any | — | Any element to be rendered on the button. |\nButton group\n\nButton with tooltips\nButton with TooltipDisabled Button with Tooltip\nBlock button\nBlock button\nMultiline button\nThis is a multiline button with a lot of Text\nToggle button\nToggle me\nAdd something / take picture button example\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | Boolean | false | Set the button disabled. |\n| active | Boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| asToggle | Boolean | false | Use the button as a toggle button. The toggle state can be controlled viw the \"active\" prop. |\n| iconOnly | Boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconName | String | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| iconRight | Boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| multiline | Boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | Boolean | false | Defines whether the button takes up the full width of the parent element. |\n| onClick | Function | () ={} | Callback function triggered when clicking the button. |\n| bsStyle | String | default | Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTEDFILLED and Button.MUTED |\n| bsSize | String | — | Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG |\n| variant | String | — | Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANTLINK, Button.VARIANTLINKINLINE, Button.VARIANTOUTLINE and Button.VARIANTACTION |\n| className | String | — | Additional classes to be set on the button element. |\n| children | any | — | Any element to be rendered on the button. |\nOutlined buttons (transparent)\nDefaultPrimarySuccessInfoWarningDangerMuted filledMuted\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | Boolean | false | Set the button disabled. |\n| active | Boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| asToggle | Boolean | false | Use the button as a toggle button. The toggle state can be controlled viw the \"active\" prop. |\n| iconOnly | Boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconName | String | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| iconRight | Boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| multiline | Boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | Boolean | false | Defines whether the button takes up the full width of the parent element. |\n| onClick | Function | () ={} | Callback function triggered when clicking the button. |\n| bsStyle | String | default | Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTEDFILLED and Button.MUTED |\n| bsSize | String | — | Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG |\n| variant | String | — | Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANTLINK, Button.VARIANTLINKINLINE, Button.VARIANTOUTLINE and Button.VARIANTACTION |\n| className | String | — | Additional classes to be set on the button element. |\n| children | any | — | Any element to be rendered on the button. |\nAction buttons\nClick me!Click me!Click me!Click me!Click me!Click me!\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | Boolean | false | Set the button disabled. |\n| active | Boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| asToggle | Boolean | false | Use the button as a toggle button. The toggle state can be controlled viw the \"active\" prop. |\n| iconOnly | Boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconName | String | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| iconRight | Boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| multiline | Boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | Boolean | false | Defines whether the button takes up the full width of the parent element. |\n| onClick | Function | () ={} | Callback function triggered when clicking the button. |\n| bsStyle | String | default | Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTEDFILLED and Button.MUTED |\n| bsSize | String | — | Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG |\n| variant | String | — | Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANTLINK, Button.VARIANTLINKINLINE, Button.VARIANTOUTLINE and Button.VARIANTACTION |\n| className | String | — | Additional classes to be set on the button element. |\n| children | any | — | Any element to be rendered on the button. |",
+    "category": "Components",
+    "section": "Interaction",
+    "boost": "Button components/button #components/button Components Interaction"
+  },
+  {
+    "id": "components/buttonToolbar",
+    "title": "ButtonToolbar",
+    "lead": "The ButtonToolbar is a utility component designed to simplify usage and alignment. Its purpose is to ensure consistent spacing.",
+    "summary": "The ButtonToolbar is a utility component designed to simplify usage and alignment. Its purpose is to ensure consistent spacing.",
+    "searchText": "ButtonToolbar\nThe ButtonToolbar is a utility component designed to simplify usage and alignment. Its purpose is to ensure consistent spacing.\nButtonToolbar\nButtonToolbar\nButtonButton\n\nButtonToolbar centered\nCancelSave changes\n\nButtonToolbar right aligned\nCancelSave changes\n\nButtonToolbar space between\nPreviousNext\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| alignment | 'left' \\| 'right' \\| 'center' \\| 'space-between' | — | Align buttons to e defined side or set them apart. |\n| className | String | — | Additional classes to be set on the wrapper element. |",
+    "category": "Components",
+    "section": "Interaction",
+    "boost": "ButtonToolbar components/buttonToolbar #components/buttonToolbar Components Interaction"
+  },
+  {
+    "id": "components/calendarStripe",
+    "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. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "CalendarStripe components/calendarStripe #components/calendarStripe Components Misc"
+  },
+  {
+    "id": "components/card",
+    "title": "Card",
+    "lead": "The Card is a utility component designed to simplify usage of default card styling.",
+    "summary": "The Card is a utility component designed to simplify usage of default card styling.",
+    "searchText": "Card\nThe Card is a utility component designed to simplify usage of default card styling.\nCard\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.\nLorem ipsum\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nLorem\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| shadow | 'subtle' \\| 'muted' \\| 'accent' \\| 'default' \\| 'smooth' \\| 'muted-down' \\| 'default-down' \\| 'none' | default | The shadow class. |\n| shadow | 0 \\| 5 \\| 10 \\| 15 \\| 20 \\| 25 \\| 50 | 15 | The card padding. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "Card components/card #components/card Components Content"
+  },
+  {
+    "id": "components/carousel",
+    "title": "Carousel",
+    "lead": null,
+    "summary": "First slide label",
+    "searchText": "Carousel\nCarousel\nFirst slide label\nNulla vitae elit libero, a pharetra augue mollis interdum.\n\nSecond slide label\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\n\nThird slide label\nPraesent commodo cursus magna, vel scelerisque nisl consectetur.\n\nNext",
+    "category": "Components",
+    "section": "Content",
+    "boost": "Carousel components/carousel #components/carousel Components Content"
+  },
+  {
+    "id": "components/chartColors",
+    "title": "Chart Colors",
+    "lead": "The colors listed below are exposed via the colors.json file and can also be used with other charting libraries to achieve a common look and feel.",
+    "summary": "The colors listed below are exposed via the colors.json file and can also be used with other charting libraries to achieve a common look and feel.",
+    "searchText": "Chart Colors\nThe colors listed below are exposed via the colors.json file and can also be used with other charting libraries to achieve a common look and feel.\nChart Colors\nNote: The warmup and coldplay colors are to be preferred. Other colors may be used as fallback.\nWarmup colors\ncolor-warmup-crimson\n\ncolor-warmup-victoria\n\ncolor-warmup-cadillac\n\ncolor-warmup-raspberry\n\ncolor-warmup-cerise\n\ncolor-warmup-charm\n\ncolor-warmup-salmon\n\ncolor-warmup-cherokee\n\ncolor-warmup-corn\n\nColdplay colors\ncolor-coldplay-wine\n\ncolor-coldplay-aubergine\n\ncolor-coldplay-kashmir\n\ncolor-coldplay-fountain\n\ncolor-coldplay-turquoise\n\ncolor-coldplay-bermuda\n\ncolor-coldplay-moos\n\ncolor-coldplay-primrose\n\ncolor-coldplay-khaki\n\nSpectrum colors\ncolor-spectrum-indigo\n\ncolor-spectrum-violet\n\ncolor-spectrum-purple\n\ncolor-spectrum-fuchsia\n\ncolor-spectrum-pink\n\ncolor-spectrum-rose\n\nBrand colors\nbrand-primary\n\nbrand-secondary\n\nbrand-primary-decent\n\nbrand-secondary-decent\n\nbrand-info\n\nbrand-success\n\nbrand-warning\n\nbrand-danger\n\nbrand-info-decent\n\nbrand-success-decent\n\nbrand-warning-decent\n\nbrand-danger-decent\n\nHighlight colors\ncolor-highlight-darkest\n\ncolor-highlight-darker\n\ncolor-highlight-dark\n\ncolor-highlight\n\ncolor-highlight-light\n\ncolor-highlight-lighter\n\ncolor-highlight-lightest\n\ncolor-highlight-decent\n\nBase colors\ngray-darkest\n\ngray-darker\n\ngray-dark\n\ngray\n\ngray-light\n\ngray-lighter\n\ngray-lightest\n\ngray-decent\n\nMap marker colors\ncolor-map-marker-text\n\ncolor-map-marker-active\n\ncolor-map-marker-asset\n\ncolor-map-marker-poi\n\ncolor-map-marker-geofence\n\ncolor-map-marker-route\n\ncolor-map-marker-info\n\ncolor-map-marker-success\n\ncolor-map-marker-warning\n\ncolor-map-marker-danger\n\ncolor-map-marker-restrictions\n\nDriving status colors\ncolor-status-available\n\ncolor-status-driving\n\ncolor-status-resting\n\ncolor-status-working\n\nRating colors\ncolor-rating-1\n\ncolor-rating-2\n\ncolor-rating-3\n\ncolor-rating-4\n\ncolor-rating-5",
+    "category": "Components",
+    "section": "Charts",
+    "boost": "Chart Colors components/chartColors #components/chartColors Components Charts"
+  },
+  {
+    "id": "components/chartsGettingStarted",
+    "title": "Prerequisites",
+    "lead": "The UIKIT chart components are simple wrapper components for the Recharts charting library.",
+    "summary": "The UIKIT chart components are simple wrapper components for the Recharts charting library.",
+    "searchText": "Prerequisites\nThe UIKIT chart components are simple wrapper components for the Recharts charting library.\nPrerequisites\nThe goal is to provide an abstraction of low-level charting api's for simple usage without digging too much into D3 details and to provide a common look and feel for charts.\n\nHowever, this does not mean you have to use it. If you need further customization not covered by the UIKIT, feel free to use the library directly or to use any other visualization library.\nHow to use the chart components\nThe RIO UIKIT does include the recharts dependency, means you do not have to add it for your project separately.\n\nHowever, we recommend tree-shaking the UIKIT, which means the components you do not use are not ending up in your bundle. That means you should import only ES modules into your project. To do so, import components as follows:\n\nimport PieChart from '@rio-cloud/rio-uikit/PieChart';\n\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.\nIdeas for better data visualization\nConsider some of the ideas and tips listed on that article: https://uxdesign.cc/20-ideas-for-better-data-visualization-73f7e3c2782d",
+    "category": "Components",
+    "section": "Charts",
+    "boost": "Prerequisites components/chartsGettingStarted #components/chartsGettingStarted Components Charts"
+  },
+  {
+    "id": "components/chat",
+    "title": "Chat",
+    "lead": "The chat component is a pure CSS component.",
+    "summary": "The chat component is a pure CSS component.",
+    "searchText": "Chat\nThe chat component is a pure CSS component.\nChat\nHi! I'd like to get an ice cream, but I don't really like many flavors.\n10:01\n\nIce cream vendor\n\nNo worries! We have some simple flavors. What do you usually enjoy?\n10:02\nTranslate\n\nI’m not a fan of chocolate, strawberry, or anything with nuts.\n10:03\n\nIce cream vendor\n\nGot it. How about vanilla? It’s classic and not too overwhelming.\n10:04\nTranslate\n\nYeah, vanilla works for me. Do you have anything else that’s mild?\n10:05\n\nIce cream vendor\n\nWe have a nice plain mango sorbet and a simple caramel ice cream as well.\n10:06\nTranslate\n\nThe mango is refreshing, while caramel is a bit richer but still simple.\n10:07\nTranslate\n\nI’ll take a scoop of vanilla and mango sorbet, please.\n10:08\n\nIce cream vendor\n\nGreat choice! That’ll be ready in a moment.\n10:09\nTranslate\n\nToday\n\nHey, yesterday's vanilla was great! I'd love to try something different today.\n10:01\n\nIce cream vendor\n\nGlad to hear it! We’ve got some new flavors in. What are you in the mood for?\n10:02\nTranslate\n\nMaybe something fruity. What do you recommend?\n10:03\n\nIce cream vendor\n\nOur mango sorbet is a solid choice. Or if you want something lighter, we have a lemon sorbet.\n10:04\nTranslate\n\n😍\n\nThe lemon’s tangy and refreshing, perfect for a warm day.\n10:05\nTranslate\n\nI’ll go with the lemon sorbet today. Thanks!\n10:06\n\n❤️\n\nIce cream vendor\n\nComing right up!\n10:07\nTranslate",
+    "category": "Components",
+    "section": "CSS Only",
+    "boost": "Chat components/chat #components/chat Components CSS Only"
+  },
+  {
+    "id": "components/checkbox",
+    "title": "Checkbox",
+    "lead": null,
+    "summary": "Note: When using the custom option, make sure to wrap the children with the class name checkbox-text-wrapper. For using the checkbox tick, use an element with class name checkbox-text.",
+    "searchText": "Checkbox\nCheckbox\nSelect multipleSome custom text\nThis one is initially checked\nIndeterminate state\nDisabled checkboxesDisabled checkbox\nDisabled checked checkbox\nVarious propsCheckbox with provided label\nCheckbox with error state\nRequired Checkbox *\nRequired submit test\n\nSome text containing a link to Terms and Condition which need to be read.\n\nOption 1Option 2Option 3\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.\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\nLarge checkbox\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.\nCheckbox inside grid layout\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |\n| name | String | — | Passed through as HTML attribute to the underlying inputname. |\n| label | String / Node | — | Define some text as a label. |\n| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |\n| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |\n| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |\n| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |\n| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |\n| right | Boolean | false | Defines whether the checkbox is on the right side. |\n| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |\n| onClick | Function | () ={} | Callback function that is invoked when the checkbox is checked or unchecked. |\n| onChange | Function | () ={} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |\n| error | Boolean | false | Use \"error\" to change color of the checkbox. |\n| required | Boolean | false | Defines whether the checkbox is required or not. |\n| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| className | String | — | Additional classes to be set on the input field. |\n| children | any | — | Any element to be rendered next to the checkbox. |\n| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like \"rioglyph-truck\". |\n| iconSize | Number | — | The icon size in pixel. |\n| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: \"horizontal\" or \"vertical\". |\n| inputRef | Ref | — | A react ref assigned to the input itself. |\nControlled example\nOption 1Option 2Option 3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |\n| name | String | — | Passed through as HTML attribute to the underlying inputname. |\n| label | String / Node | — | Define some text as a label. |\n| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |\n| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |\n| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |\n| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |\n| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |\n| right | Boolean | false | Defines whether the checkbox is on the right side. |\n| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |\n| onClick | Function | () ={} | Callback function that is invoked when the checkbox is checked or unchecked. |\n| onChange | Function | () ={} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |\n| error | Boolean | false | Use \"error\" to change color of the checkbox. |\n| required | Boolean | false | Defines whether the checkbox is required or not. |\n| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| className | String | — | Additional classes to be set on the input field. |\n| children | any | — | Any element to be rendered next to the checkbox. |\n| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like \"rioglyph-truck\". |\n| iconSize | Number | — | The icon size in pixel. |\n| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: \"horizontal\" or \"vertical\". |\n| inputRef | Ref | — | A react ref assigned to the input itself. |\nCustom card example\nNote: When using the custom option, make sure to wrap the children with the class name checkbox-text-wrapper. For using the checkbox tick, use an element with class name checkbox-text.\nCustom checkbox listOption 1\nThis option is a first option\n\nOption 2\nThis option is a second option\n\nOption 3\nThis option is a third option\n\nCustom checkbox list as pick list without tickBanana\nPeach\nPear\nStrawberry\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |\n| name | String | — | Passed through as HTML attribute to the underlying inputname. |\n| label | String / Node | — | Define some text as a label. |\n| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |\n| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |\n| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |\n| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |\n| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |\n| right | Boolean | false | Defines whether the checkbox is on the right side. |\n| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |\n| onClick | Function | () ={} | Callback function that is invoked when the checkbox is checked or unchecked. |\n| onChange | Function | () ={} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |\n| error | Boolean | false | Use \"error\" to change color of the checkbox. |\n| required | Boolean | false | Defines whether the checkbox is required or not. |\n| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| className | String | — | Additional classes to be set on the input field. |\n| children | any | — | Any element to be rendered next to the checkbox. |\n| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like \"rioglyph-truck\". |\n| iconSize | Number | — | The icon size in pixel. |\n| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: \"horizontal\" or \"vertical\". |\n| inputRef | Ref | — | A react ref assigned to the input itself. |\nCustom list example\nCustom checkbox list\nOption 1\nThis option is a first option\n\nOption 2\nThis option is a second option\n\nOption 3\nThis option is a third option\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |\n| name | String | — | Passed through as HTML attribute to the underlying inputname. |\n| label | String / Node | — | Define some text as a label. |\n| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |\n| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |\n| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |\n| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |\n| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |\n| right | Boolean | false | Defines whether the checkbox is on the right side. |\n| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |\n| onClick | Function | () ={} | Callback function that is invoked when the checkbox is checked or unchecked. |\n| onChange | Function | () ={} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |\n| error | Boolean | false | Use \"error\" to change color of the checkbox. |\n| required | Boolean | false | Defines whether the checkbox is required or not. |\n| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| className | String | — | Additional classes to be set on the input field. |\n| children | any | — | Any element to be rendered next to the checkbox. |\n| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like \"rioglyph-truck\". |\n| iconSize | Number | — | The icon size in pixel. |\n| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: \"horizontal\" or \"vertical\". |\n| inputRef | Ref | — | A react ref assigned to the input itself. |\nCheckbox with custom icon\nOption 1Option 2Option 3\nOption 1Option 2Option 3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |\n| name | String | — | Passed through as HTML attribute to the underlying inputname. |\n| label | String / Node | — | Define some text as a label. |\n| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |\n| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |\n| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |\n| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |\n| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |\n| right | Boolean | false | Defines whether the checkbox is on the right side. |\n| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |\n| onClick | Function | () ={} | Callback function that is invoked when the checkbox is checked or unchecked. |\n| onChange | Function | () ={} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |\n| error | Boolean | false | Use \"error\" to change color of the checkbox. |\n| required | Boolean | false | Defines whether the checkbox is required or not. |\n| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| className | String | — | Additional classes to be set on the input field. |\n| children | any | — | Any element to be rendered next to the checkbox. |\n| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like \"rioglyph-truck\". |\n| iconSize | Number | — | The icon size in pixel. |\n| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: \"horizontal\" or \"vertical\". |\n| inputRef | Ref | — | A react ref assigned to the input itself. |",
+    "category": "Components",
+    "section": "Interaction",
+    "boost": "Checkbox components/checkbox #components/checkbox Components Interaction"
+  },
+  {
+    "id": "components/clearableInput",
+    "title": "ClearableInput",
+    "lead": "Control, which can be cleared when it has a value.",
+    "summary": "Control, which can be cleared when it has a value.",
+    "searchText": "ClearableInput\nControl, which can be cleared when it has a value.\nClearableInput\nCan be used as either a controlled or uncontrolled component, depending on your use case. https://facebook.github.io/react/docs/uncontrolled-components.html\nDefault\n\nWith a default value\n\nWith a button addon\n\nWith many button addons\n\nWith addons\nButton\n\nWith addons on both sides\n\nKM\n\nWith type password\n\nWith type email\n\nWith limited amount of characters\n\nSmall input\n\nLarge input\n\nKM\n\nWith feedback\n\nDisabled input\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| children | Function | — | Providing a function enables the \"render props\" approach. The function gets the inputProps passed and is responsible for rendering the custom <inputcomponent. |\n| defaultValue | String | — | Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component. |\n| value | String | — | Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component. |\n| onChange | Function | () ={} | Callback function for when the value changes. Receives new value as an argument. |\n| onClear | Function | () ={} | Callback function for when the value is cleared via the clear button |\n| onKeyPress | Function | () ={} | Callback function for every key pressed including \"Enter\" key |\n| onBlur | Function | () ={} | Callback function which gets triggered when the input looses the focus |\n| onFocus | Function | () ={} | Callback function which gets triggered when the input gains the focus |\n| className | String | — | Additional classes to be set on the wrapper element |\n| inputClassName | String | — | Additional classes to be set on the input element |\n| placeholder | String | — | The translated text that shall be shown when the input is empty |\n| inputRef | Function | — | The callback ref for the underlying input. Alternatively, use can use a forward ref. |\n| autoComplete | String | — | Sets autocomplete value for autosuggest forms |\n| type | String | \"text\" | Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password' |\n| maxLength | Number | — | Defines the maximum amount of characters that can be entered |\n| disabled | Boolean | false | Disables the input component |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | — | Defined whether or not the input has the error styling |\n| mask | string \\| (string \\| RegExp)[] | — | The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: \"0\" = allowed input: \"0-9\" (digit) Character: \"a\" = allowed input: \"a-z, A-Z\" (letter) Character: \"\" = allowed input: any character Character: \"#\" = allowed input: \"0-9, a-z, A-Z\" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\\\ (E.g. \\\\0). Additionally you can provide custom definitions. Examples: \"--   **\" \"+49 00 000 00\" |\n| maskPlaceholder | string \\| null | _ | Placeholder to cover unfilled parts of the mask |\n| maskVisibility | 'always' \\| 'onFocus' \\| 'never' | onFocus | Controls when the mask pattern is visible. |\n| maskOverwrite | boolean \\| 'shift' \\| undefined | true | Enable characters overwriting. |\n| maskDefinitions | Record<string, string \\| RegExp| — | Custom definitions to have more control over your mask. The defined character will be replaced in your mask. |\n| maskDispatch | (appended: string, dynamicMasked: any) =any | — | Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work. |\n| min | string \\| number \\| undefined \\| Date | — | Minimum value to be entered. This prop is extended to accept a Date when used with an input mask. |\n| max | string \\| number \\| undefined \\| Date | — | Maximum value to be entered. This prop is extended to accept a Date when used with an input mask. |\n| Additional props |  | — | All additional properties are passed down to the underlying input like the autoComplete prop |\nControlled example\n\nSet random value\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| children | Function | — | Providing a function enables the \"render props\" approach. The function gets the inputProps passed and is responsible for rendering the custom <inputcomponent. |\n| defaultValue | String | — | Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component. |\n| value | String | — | Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component. |\n| onChange | Function | () ={} | Callback function for when the value changes. Receives new value as an argument. |\n| onClear | Function | () ={} | Callback function for when the value is cleared via the clear button |\n| onKeyPress | Function | () ={} | Callback function for every key pressed including \"Enter\" key |\n| onBlur | Function | () ={} | Callback function which gets triggered when the input looses the focus |\n| onFocus | Function | () ={} | Callback function which gets triggered when the input gains the focus |\n| className | String | — | Additional classes to be set on the wrapper element |\n| inputClassName | String | — | Additional classes to be set on the input element |\n| placeholder | String | — | The translated text that shall be shown when the input is empty |\n| inputRef | Function | — | The callback ref for the underlying input. Alternatively, use can use a forward ref. |\n| autoComplete | String | — | Sets autocomplete value for autosuggest forms |\n| type | String | \"text\" | Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password' |\n| maxLength | Number | — | Defines the maximum amount of characters that can be entered |\n| disabled | Boolean | false | Disables the input component |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | — | Defined whether or not the input has the error styling |\n| mask | string \\| (string \\| RegExp)[] | — | The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: \"0\" = allowed input: \"0-9\" (digit) Character: \"a\" = allowed input: \"a-z, A-Z\" (letter) Character: \"\" = allowed input: any character Character: \"#\" = allowed input: \"0-9, a-z, A-Z\" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\\\ (E.g. \\\\0). Additionally you can provide custom definitions. Examples: \"--   **\" \"+49 00 000 00\" |\n| maskPlaceholder | string \\| null | _ | Placeholder to cover unfilled parts of the mask |\n| maskVisibility | 'always' \\| 'onFocus' \\| 'never' | onFocus | Controls when the mask pattern is visible. |\n| maskOverwrite | boolean \\| 'shift' \\| undefined | true | Enable characters overwriting. |\n| maskDefinitions | Record<string, string \\| RegExp| — | Custom definitions to have more control over your mask. The defined character will be replaced in your mask. |\n| maskDispatch | (appended: string, dynamicMasked: any) =any | — | Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work. |\n| min | string \\| number \\| undefined \\| Date | — | Minimum value to be entered. This prop is extended to accept a Date when used with an input mask. |\n| max | string \\| number \\| undefined \\| Date | — | Maximum value to be entered. This prop is extended to accept a Date when used with an input mask. |\n| Additional props |  | — | All additional properties are passed down to the underlying input like the autoComplete prop |\nControlled component with restriction and used with custom input\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| children | Function | — | Providing a function enables the \"render props\" approach. The function gets the inputProps passed and is responsible for rendering the custom <inputcomponent. |\n| defaultValue | String | — | Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component. |\n| value | String | — | Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component. |\n| onChange | Function | () ={} | Callback function for when the value changes. Receives new value as an argument. |\n| onClear | Function | () ={} | Callback function for when the value is cleared via the clear button |\n| onKeyPress | Function | () ={} | Callback function for every key pressed including \"Enter\" key |\n| onBlur | Function | () ={} | Callback function which gets triggered when the input looses the focus |\n| onFocus | Function | () ={} | Callback function which gets triggered when the input gains the focus |\n| className | String | — | Additional classes to be set on the wrapper element |\n| inputClassName | String | — | Additional classes to be set on the input element |\n| placeholder | String | — | The translated text that shall be shown when the input is empty |\n| inputRef | Function | — | The callback ref for the underlying input. Alternatively, use can use a forward ref. |\n| autoComplete | String | — | Sets autocomplete value for autosuggest forms |\n| type | String | \"text\" | Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password' |\n| maxLength | Number | — | Defines the maximum amount of characters that can be entered |\n| disabled | Boolean | false | Disables the input component |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | — | Defined whether or not the input has the error styling |\n| mask | string \\| (string \\| RegExp)[] | — | The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: \"0\" = allowed input: \"0-9\" (digit) Character: \"a\" = allowed input: \"a-z, A-Z\" (letter) Character: \"\" = allowed input: any character Character: \"#\" = allowed input: \"0-9, a-z, A-Z\" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\\\ (E.g. \\\\0). Additionally you can provide custom definitions. Examples: \"--   **\" \"+49 00 000 00\" |\n| maskPlaceholder | string \\| null | _ | Placeholder to cover unfilled parts of the mask |\n| maskVisibility | 'always' \\| 'onFocus' \\| 'never' | onFocus | Controls when the mask pattern is visible. |\n| maskOverwrite | boolean \\| 'shift' \\| undefined | true | Enable characters overwriting. |\n| maskDefinitions | Record<string, string \\| RegExp| — | Custom definitions to have more control over your mask. The defined character will be replaced in your mask. |\n| maskDispatch | (appended: string, dynamicMasked: any) =any | — | Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work. |\n| min | string \\| number \\| undefined \\| Date | — | Minimum value to be entered. This prop is extended to accept a Date when used with an input mask. |\n| max | string \\| number \\| undefined \\| Date | — | Maximum value to be entered. This prop is extended to accept a Date when used with an input mask. |\n| Additional props |  | — | All additional properties are passed down to the underlying input like the autoComplete prop |\nClearableInput with input mask\nInput with input mask\n\nInput with input mask that reveals itself on focus\n\nInput with input mask that is never shown\n\nInput with custom mask definition\n\nInput with Date mask\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| children | Function | — | Providing a function enables the \"render props\" approach. The function gets the inputProps passed and is responsible for rendering the custom <inputcomponent. |\n| defaultValue | String | — | Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component. |\n| value | String | — | Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component. |\n| onChange | Function | () ={} | Callback function for when the value changes. Receives new value as an argument. |\n| onClear | Function | () ={} | Callback function for when the value is cleared via the clear button |\n| onKeyPress | Function | () ={} | Callback function for every key pressed including \"Enter\" key |\n| onBlur | Function | () ={} | Callback function which gets triggered when the input looses the focus |\n| onFocus | Function | () ={} | Callback function which gets triggered when the input gains the focus |\n| className | String | — | Additional classes to be set on the wrapper element |\n| inputClassName | String | — | Additional classes to be set on the input element |\n| placeholder | String | — | The translated text that shall be shown when the input is empty |\n| inputRef | Function | — | The callback ref for the underlying input. Alternatively, use can use a forward ref. |\n| autoComplete | String | — | Sets autocomplete value for autosuggest forms |\n| type | String | \"text\" | Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password' |\n| maxLength | Number | — | Defines the maximum amount of characters that can be entered |\n| disabled | Boolean | false | Disables the input component |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | — | Defined whether or not the input has the error styling |\n| mask | string \\| (string \\| RegExp)[] | — | The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: \"0\" = allowed input: \"0-9\" (digit) Character: \"a\" = allowed input: \"a-z, A-Z\" (letter) Character: \"\" = allowed input: any character Character: \"#\" = allowed input: \"0-9, a-z, A-Z\" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\\\ (E.g. \\\\0). Additionally you can provide custom definitions. Examples: \"--   **\" \"+49 00 000 00\" |\n| maskPlaceholder | string \\| null | _ | Placeholder to cover unfilled parts of the mask |\n| maskVisibility | 'always' \\| 'onFocus' \\| 'never' | onFocus | Controls when the mask pattern is visible. |\n| maskOverwrite | boolean \\| 'shift' \\| undefined | true | Enable characters overwriting. |\n| maskDefinitions | Record<string, string \\| RegExp| — | Custom definitions to have more control over your mask. The defined character will be replaced in your mask. |\n| maskDispatch | (appended: string, dynamicMasked: any) =any | — | Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work. |\n| min | string \\| number \\| undefined \\| Date | — | Minimum value to be entered. This prop is extended to accept a Date when used with an input mask. |\n| max | string \\| number \\| undefined \\| Date | — | Maximum value to be entered. This prop is extended to accept a Date when used with an input mask. |\n| Additional props |  | — | All additional properties are passed down to the underlying input like the autoComplete prop |",
+    "category": "Components",
+    "section": "Interaction",
+    "boost": "ClearableInput components/clearableInput #components/clearableInput Components Interaction"
+  },
+  {
+    "id": "components/collapse",
+    "title": "Collapse",
+    "lead": "The Collapse component folds and unfolds given content. It is used in some other components such as the ExpanderPanel and ExpanderList.",
+    "summary": "The Collapse component folds and unfolds given content. It is used in some other components such as the ExpanderPanel and ExpanderList.",
+    "searchText": "Collapse\nThe Collapse component folds and unfolds given content. It is used in some other components such as the ExpanderPanel and ExpanderList.\nCollapse\nNote: In case the content element you pass in as child has margins, wrap it within another div to smoothen the animation.\nContent will stay in the DOM even when it is collapsed\nHide content\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.\nDropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| open | Boolean | false | Show the component and triggers the expand or collapse animation. |\n| timeout | Number | 270 | Duration of the collapse animation in milliseconds. |\n| appear | Boolean | false | Run the expand animation when the component mounts, if it is initially shown. |\n| unmountOnExit | Boolean | false | Unmount the component (remove it from the DOM) when it is collapsed. |\n| onEntered | () =void | — | Callback fired after the component has expanded. |\n| onExited | () ={} | — | Callback fired after the component has collapsed. |\n| onAnimationStart | () ={} | — | Callback fired when the animation starts for either expand or collapse. |\n| children | any | — | Any component given to be expanded or collapsed. |\nContent will be removed from the DOM when it is collapsed and mounted again on show\nHide content\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| open | Boolean | false | Show the component and triggers the expand or collapse animation. |\n| timeout | Number | 270 | Duration of the collapse animation in milliseconds. |\n| appear | Boolean | false | Run the expand animation when the component mounts, if it is initially shown. |\n| unmountOnExit | Boolean | false | Unmount the component (remove it from the DOM) when it is collapsed. |\n| onEntered | () =void | — | Callback fired after the component has expanded. |\n| onExited | () ={} | — | Callback fired after the component has collapsed. |\n| onAnimationStart | () ={} | — | Callback fired when the animation starts for either expand or collapse. |\n| children | any | — | Any component given to be expanded or collapsed. |",
+    "category": "Components",
+    "section": "Show/Hide",
+    "boost": "Collapse components/collapse #components/collapse Components Show/Hide"
+  },
+  {
+    "id": "components/composedCharts",
+    "title": "ComposedChart",
+    "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": "ComposedChart\nComposedChart\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 ComposedChart\n\namt\npv\nuv\n\nPage APage BPage CPage DPage EPage F\n### ComposedChart\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| 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 | false | 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| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\n| areas | Array of Area | [] | Renders the provided Area components. |\n| lines | Array of Line | [] | Renders the provided Line components. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying ComposedChart component. Details can be found here: https://recharts.org/en-US/api/ComposedChart |",
+    "category": "Components",
+    "section": "Charts",
+    "boost": "ComposedChart components/composedCharts #components/composedCharts Components Charts"
+  },
+  {
+    "id": "components/contentLoader",
+    "title": "ContentLoader",
+    "lead": "The content loader is based on the react-content-loader which can be found here: https://github.com/danilowoz/react-content-loader",
+    "summary": "The content loader is based on the react-content-loader which can be found here: https://github.com/danilowoz/react-content-loader",
+    "searchText": "ContentLoader\nThe content loader is based on the react-content-loader which can be found here: https://github.com/danilowoz/react-content-loader\nContentLoader\nThis UIKIT component is simple wrapper to make it easier to use with a predefined look and feel. It still allows for more complex configurations as all additional props are passed down to the third-party ContentLoader component. For individual customization, it allows passing svg components as rect or circle directly as children.\nLoading...\nLoading...Loading...Loading...Loading...\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| speed | Number | 2 | Sets the animation speed. |\n| height | Number / String | 14 | Sets the height of the svg element. |\n| width | Number / String | 100% | Sets the width of the svg element. |\n| radius | Number | 16 | Sets the radius of the svg element. Only relevant for circle elements. |\n| type | String | ContentLoader.RECT | Renders either a rectangle or circle. Possible values are: rect, circle or ContentLoader.RECT, ContentLoader.CIRCLE |\n| className | String | — | Additional class names to ab added to the wrapping svg element. |\n| children | Node | — | Pass any svg elements for when you need further customizations. |\nLoading...\nLoading...Loading...\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| speed | Number | 2 | Sets the animation speed. |\n| height | Number / String | 14 | Sets the height of the svg element. |\n| width | Number / String | 100% | Sets the width of the svg element. |\n| radius | Number | 16 | Sets the radius of the svg element. Only relevant for circle elements. |\n| type | String | ContentLoader.RECT | Renders either a rectangle or circle. Possible values are: rect, circle or ContentLoader.RECT, ContentLoader.CIRCLE |\n| className | String | — | Additional class names to ab added to the wrapping svg element. |\n| children | Node | — | Pass any svg elements for when you need further customizations. |\nColumn 1Column 2Column 3Column 4\n\nLoading...Loading...Loading...Loading...\nLoading...Loading...Loading...Loading...\nLoading...Loading...Loading...Loading...\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| speed | Number | 2 | Sets the animation speed. |\n| height | Number / String | 14 | Sets the height of the svg element. |\n| width | Number / String | 100% | Sets the width of the svg element. |\n| radius | Number | 16 | Sets the radius of the svg element. Only relevant for circle elements. |\n| type | String | ContentLoader.RECT | Renders either a rectangle or circle. Possible values are: rect, circle or ContentLoader.RECT, ContentLoader.CIRCLE |\n| className | String | — | Additional class names to ab added to the wrapping svg element. |\n| children | Node | — | Pass any svg elements for when you need further customizations. |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "ContentLoader components/contentLoader #components/contentLoader Components Content"
+  },
+  {
+    "id": "components/dataTabs",
+    "title": "DataTabs",
+    "lead": "Passing a single tab content component via commonTabContent prop into the DataTabs component allows to update that single component when switching tabs. This comes in handy for instance when you want to animate a graph with different values from each tab.",
+    "summary": "Passing a single tab content component via commonTabContent prop into the DataTabs component allows to update that single component when switching tabs. This comes in handy for instance when you want to animate a graph with different values from each tab.",
+    "searchText": "DataTabs\nPassing a single tab content component via commonTabContent prop into the DataTabs component allows to update that single component when switching tabs. This comes in handy for instance when you want to animate a graph with different values from each tab.\nDataTabs\nHorizontal layout\nØ - Consumption\n13,5 km/l\n\nØ - C02 Emission\n12,2 kg\n\nØ - Range\n32,8 l/100\n\nØ - Route type\nABCDEF\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### DataTabs\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| activeKey | String | \"\" | Sets key and id. |\n| onSelectTab | boolean | () ={} | Called when a tab is being activated. |\n| commonTabContent | ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |\n| vertical | boolean | false | Whether the layout should be vertical. |\n| bordered | boolean | true | Whether the component should add a border. |\n| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |\n| className | string | — | Additional classes to be set on the wrapper element. |\n| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |\n| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |\n| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |\n| tabClassName | string | bg-white | Additional classes to be set on the tab element. |\n| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |\n| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |\n### DataTab\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tabKey | string | — | Used to identify the tab. |\n| title | string \\| ReactNode | — | The content for the tab. |\n| active | boolean | — | Whether this tab is the one currently active. |\n| disableTransition | boolean | — | Whether the transition effect should be disabled. |\n| onAnimationStart | VoidFunction | — | Callback for when the animation starts. |\n| onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |\n| className | String | — | Additional classes to be set on the element. |\nVertical layout\nØ - Consumption\n13,5 km/l\n\nØ - C02 Emission\n12,2 kg\n\nØ - Range\n32,8 l/100\n\nØ - Route type\nABCDEF\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### DataTabs\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| activeKey | String | \"\" | Sets key and id. |\n| onSelectTab | boolean | () ={} | Called when a tab is being activated. |\n| commonTabContent | ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |\n| vertical | boolean | false | Whether the layout should be vertical. |\n| bordered | boolean | true | Whether the component should add a border. |\n| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |\n| className | string | — | Additional classes to be set on the wrapper element. |\n| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |\n| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |\n| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |\n| tabClassName | string | bg-white | Additional classes to be set on the tab element. |\n| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |\n| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |\n### DataTab\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tabKey | string | — | Used to identify the tab. |\n| title | string \\| ReactNode | — | The content for the tab. |\n| active | boolean | — | Whether this tab is the one currently active. |\n| disableTransition | boolean | — | Whether the transition effect should be disabled. |\n| onAnimationStart | VoidFunction | — | Callback for when the animation starts. |\n| onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |\n| className | String | — | Additional classes to be set on the element. |\nDataTabs inside an ExpanderPanel and custom color\nDataTabs inside an ExpanderPanel\nØ - Consumption\n13,5 km/l\n\nØ - C02 Emission\n12,2 kg\n\nØ - Range\n32,8 l/100\n\nØ - Route Type\nABCDEF\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### DataTabs\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| activeKey | String | \"\" | Sets key and id. |\n| onSelectTab | boolean | () ={} | Called when a tab is being activated. |\n| commonTabContent | ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |\n| vertical | boolean | false | Whether the layout should be vertical. |\n| bordered | boolean | true | Whether the component should add a border. |\n| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |\n| className | string | — | Additional classes to be set on the wrapper element. |\n| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |\n| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |\n| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |\n| tabClassName | string | bg-white | Additional classes to be set on the tab element. |\n| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |\n| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |\n### DataTab\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tabKey | string | — | Used to identify the tab. |\n| title | string \\| ReactNode | — | The content for the tab. |\n| active | boolean | — | Whether this tab is the one currently active. |\n| disableTransition | boolean | — | Whether the transition effect should be disabled. |\n| onAnimationStart | VoidFunction | — | Callback for when the animation starts. |\n| onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |\n| className | String | — | Additional classes to be set on the element. |\nDataTabs with shared common tab content and custom styling\nDataTabs inside an ExpanderPanel with one common tab content\nØ - Consumption\n13,5 km/l\n\nØ - C02 Emission\n12,2 kg\n\nØ - Range\n32,8 l/100\n\nØ - Route type\nABCDEF\n\nPage APage BPage CPage DPage EPage FPage G\n\nThe padding can be changes on demand by passing in util classes via \"tabContentClassName\" prop.\n\nHide last tab\n### DataTabs\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| activeKey | String | \"\" | Sets key and id. |\n| onSelectTab | boolean | () ={} | Called when a tab is being activated. |\n| commonTabContent | ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |\n| vertical | boolean | false | Whether the layout should be vertical. |\n| bordered | boolean | true | Whether the component should add a border. |\n| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |\n| className | string | — | Additional classes to be set on the wrapper element. |\n| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |\n| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |\n| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |\n| tabClassName | string | bg-white | Additional classes to be set on the tab element. |\n| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |\n| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |\n### DataTab\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tabKey | string | — | Used to identify the tab. |\n| title | string \\| ReactNode | — | The content for the tab. |\n| active | boolean | — | Whether this tab is the one currently active. |\n| disableTransition | boolean | — | Whether the transition effect should be disabled. |\n| onAnimationStart | VoidFunction | — | Callback for when the animation starts. |\n| onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |\n| className | String | — | Additional classes to be set on the element. |\nData Set 1Data Set 2\nØ - Consumption\n13,5 km/l\n\nØ - C02 Emission\n12,2 kg\n\nØ - Range\n32,8 l/100\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### DataTabs\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| activeKey | String | \"\" | Sets key and id. |\n| onSelectTab | boolean | () ={} | Called when a tab is being activated. |\n| commonTabContent | ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |\n| vertical | boolean | false | Whether the layout should be vertical. |\n| bordered | boolean | true | Whether the component should add a border. |\n| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |\n| className | string | — | Additional classes to be set on the wrapper element. |\n| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |\n| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |\n| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |\n| tabClassName | string | bg-white | Additional classes to be set on the tab element. |\n| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |\n| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |\n### DataTab\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tabKey | string | — | Used to identify the tab. |\n| title | string \\| ReactNode | — | The content for the tab. |\n| active | boolean | — | Whether this tab is the one currently active. |\n| disableTransition | boolean | — | Whether the transition effect should be disabled. |\n| onAnimationStart | VoidFunction | — | Callback for when the animation starts. |\n| onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |\n| className | String | — | Additional classes to be set on the element. |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "DataTabs components/dataTabs #components/dataTabs Components Content"
+  },
+  {
+    "id": "components/datepickers",
+    "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)",
+    "category": "Components",
+    "section": "Pickers",
+    "boost": "DatePicker components/datepickers #components/datepickers Components Pickers"
+  },
+  {
+    "id": "components/dialogs",
+    "title": "Dialog",
+    "lead": "This component allows the user to create a generic modal dialog.",
+    "summary": "This component allows the user to create a generic modal dialog.",
+    "searchText": "Dialog\nThis component allows the user to create a generic modal dialog.\nDialog\nYou can create React nodes and pass those as title, body or footer props to the Dialog component.\nDialogSubtitle dialogLong dialogLong dialog with overflowDialog with overflow and light background\nDialog sizesSize xs (320px)Size sm (480px)Size md (768px - default)Size lg (1280px)Size xl (1440px)Size fullwidthSize fullheightSize fullheight lgSize fullheight xlSize fullscreen\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Opens the dialog when set to true |\n| title | Node | — | The dialog title (can also be a FormattedMessage component) |\n| subtitle | Node | — | The subtitle content |\n| body | Node | — | The dialog body content |\n| footer | Node | — | The dialog footer content |\n| onClose | Function | () ={} | A callback function invoked when the dialog closes |\n| onCloseValidation | Function | () =true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |\n| showCloseButton | Boolean | true | Shows a close button when set to true |\n| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |\n| onEsc | Function | () ={} | A callback fired when esc key is pressed and the dialog is about to close |\n| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray. |\n| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZEXS, Dialog.SIZESM, Dialog.SIZELG, Dialog.SIZEXL, Dialog.SIZEFULLWIDTH, Dialog.SIZEFULLHEIGHT, Dialog.SIZEFULLSCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |\n| headerButtons | ReactNode | — | Allows to add additional buttons to the dialog header |\n| className | String | — | Additional classes for the modal element |\n| bodyClassName | String | — | Additional classes for the modal-body element |\n| footerClassName | String | — | Additional classes for the modal-footer element |\nDialog compound components\nTo accommodate forms within the dialog body and have the submit button in the footer or wrapping individual parts of the dialog, a more flexible approach to rendering its individual components is needed. In this scenario, you can make use of the dialog compound components.\nDialog with form\n### Dialog.Title\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | Node | — | The dialog title (can also be a FormattedMessage component) |\n| subtitle | Node | — | The subtitle content |\n| headerButtons | ReactNode | — | Allows to add additional buttons to the dialog header |\n### Dialog.Body\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional classes set on the wrapper element |\n### Dialog.Footer\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional classes set on the wrapper element |\nDialogs with validation\nOpen dialog\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Opens the dialog when set to true |\n| title | Node | — | The dialog title (can also be a FormattedMessage component) |\n| subtitle | Node | — | The subtitle content |\n| body | Node | — | The dialog body content |\n| footer | Node | — | The dialog footer content |\n| onClose | Function | () ={} | A callback function invoked when the dialog closes |\n| onCloseValidation | Function | () =true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |\n| showCloseButton | Boolean | true | Shows a close button when set to true |\n| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |\n| onEsc | Function | () ={} | A callback fired when esc key is pressed and the dialog is about to close |\n| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray. |\n| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZEXS, Dialog.SIZESM, Dialog.SIZELG, Dialog.SIZEXL, Dialog.SIZEFULLWIDTH, Dialog.SIZEFULLHEIGHT, Dialog.SIZEFULLSCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |\n| headerButtons | ReactNode | — | Allows to add additional buttons to the dialog header |\n| className | String | — | Additional classes for the modal element |\n| bodyClassName | String | — | Additional classes for the modal-body element |\n| footerClassName | String | — | Additional classes for the modal-footer element |\nValidation with separate validation error dialog\nOpen dialog\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Opens the dialog when set to true |\n| title | Node | — | The dialog title (can also be a FormattedMessage component) |\n| subtitle | Node | — | The subtitle content |\n| body | Node | — | The dialog body content |\n| footer | Node | — | The dialog footer content |\n| onClose | Function | () ={} | A callback function invoked when the dialog closes |\n| onCloseValidation | Function | () =true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |\n| showCloseButton | Boolean | true | Shows a close button when set to true |\n| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |\n| onEsc | Function | () ={} | A callback fired when esc key is pressed and the dialog is about to close |\n| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray. |\n| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZEXS, Dialog.SIZESM, Dialog.SIZELG, Dialog.SIZEXL, Dialog.SIZEFULLWIDTH, Dialog.SIZEFULLHEIGHT, Dialog.SIZEFULLSCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |\n| headerButtons | ReactNode | — | Allows to add additional buttons to the dialog header |\n| className | String | — | Additional classes for the modal element |\n| bodyClassName | String | — | Additional classes for the modal-body element |\n| footerClassName | String | — | Additional classes for the modal-footer element |\nSimpleDialog\nThis component allows the user to create a simple dialog. It uses the dialog component described above.\nSimple dialog button\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Opens the dialog when set to true |\n| title | Node | — | The dialog title (can also be a FormattedMessage component) |\n| subtitle | Node | — | The subtitle content |\n| content | Node | — | The content of the dialog body itself |\n| footer | Node | — | The dialog footer content |\n| footerClassName | String | — | Additional classes for the modal-footer element |\n| bodyClassName | String | — | Additional classes for the modal-body element |\n| onClose | Function | () ={} | A callback function invoked when the dialog closes |\n| onCloseValidation | Function | () =true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |\n| showCloseButton | Boolean | true | Shows a close button when set to true |\n| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |\n| onEsc | Function | () ={} | A callback fired when esc key is pressed and the dialog is about to close |\n| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray. |\n| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZEXS, Dialog.SIZESM, Dialog.SIZELG, Dialog.SIZEXL, Dialog.SIZEFULLWIDTH, Dialog.SIZEFULLHEIGHT, Dialog.SIZEFULLSCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |\n| className | String | — | Additional classes for the modal element |\nConfirmationDialog\nThis component allows the user to create a confirmation dialog. It uses the dialog component described above.\nConfirmation dialog\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Opens the dialog when set to true |\n| title | Node | — | The dialog title (can also be a FormattedMessage component) |\n| subtitle | Node | — | The subtitle content |\n| content | Node | — | The content of the dialog body itself |\n| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray. |\n| onClickConfirm | Function | () ={} | A callback fired when the confirmation button is clicked. |\n| onClickCancel | Function | () ={} | A callback fired when the cancel button is clicked or the dialog is closed. |\n| cancelButtonText | Node | — | The content of the cancel button. (Usually a text, can also be a FormattedMessage component). |\n| confirmButtonText | Node | — | The content of the confirmation button. Since it is a node, it can be a simple text or any JSX node like a div element with an icon and a text. |\n| disableConfirm | Boolean | — | When set to true the confirmation button will be disabled |\n| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZEXS, Dialog.SIZESM, Dialog.SIZELG, Dialog.SIZEXL, Dialog.SIZEFULLWIDTH, Dialog.SIZEFULLHEIGHT, Dialog.SIZEFULLSCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |\nSaveDialog\nThis component allows the user to create a save dialog. It uses the dialog component described above.\nSave dialog\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Opens the dialog when set to true |\n| title | Node | — | The dialog title (can also be a FormattedMessage component) |\n| subtitle | Node | — | The subtitle content |\n| content | Node | — | The content of the dialog body itself |\n| onClickCancel | Function | () ={} | A callback fired when the cancel button is clicked or the dialog is closed. |\n| onClickDiscard | Function | () ={} | A callback fired when the discard button is clicked. |\n| onClickConfirm | Function | () ={} | A callback fired when the confirmation button is clicked. |\n| discardButtonText | Node | — | The content of the discard button. (Usually a text, can also be a FormattedMessage component). |\n| cancelButtonText | Node | — | The content of the cancel button. (Usually a text, can also be a FormattedMessage component). |\n| confirmButtonText | Node | — | The content of the confirmation button. Since it is a node, it can be a simple text or any JSX node like a div element with an icon and a text. |\n| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZEXS, Dialog.SIZESM, Dialog.SIZELG, Dialog.SIZEXL, Dialog.SIZEFULLWIDTH, Dialog.SIZEFULLHEIGHT, Dialog.SIZEFULLSCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |\n| onClose | Function | () ={} | A callback function invoked when the dialog closes |\n| onCloseValidation | Function | () =true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |\n| showCloseButton | Boolean | true | Shows a close button when set to true |\n| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray. |\n| className | String | — | Additional classes for the modal element |\nSplitDialog\nThis component allows the user to create a split dialog. It uses the dialog component described above.\nSplit dialogSplit dialog large\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Opens the dialog when set to true |\n| title | Node | — | The dialog title (can also be a FormattedMessage component) |\n| subtitle | Node | — | The subtitle content |\n| leftContent | Node | — | The content to be shown on the left side. |\n| leftContentClassName | String | — | Additional classes for the left content element. |\n| rightContent | Node | — | The content to be shown on the right side. |\n| rightContentClassName | String | — | Additional classes for the right content element. |\n| onClose | Function | () ={} | A callback function invoked when the dialog closes |\n| onCloseValidation | Function | () =true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |\n| showCloseButton | Boolean | true | Shows a close button when set to true |\n| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |\n| onEsc | Function | () ={} | A callback fired when esc key is pressed and the dialog is about to close |\n| useOverflow | Boolean | true | Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray. |\n| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZEXS, Dialog.SIZESM, Dialog.SIZELG, Dialog.SIZEXL, Dialog.SIZEFULLWIDTH, Dialog.SIZEFULLHEIGHT, Dialog.SIZEFULLSCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |\n| className | String | — | Additional classes for the modal element |\n| footerClassName | String | — | Additional classes for the modal-footer element |\n| footer | Node | — | The dialog footer content |\nInfoDialog\nThis component allows the user to create a dialog without title and footer. It uses the dialog component described above.\nInfo dialog\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Opens the dialog when set to true |\n| title | Node | — | The dialog title (can also be a FormattedMessage component) |\n| subtitle | Node | — | The subtitle content |\n| content | Node | — | The content of the dialog body itself |\n| footer | Node | — | The dialog footer content |\n| footerClassName | String | — | Additional classes for the modal-footer element |\n| bodyClassName | String | — | Additional classes for the modal-body element |\n| onClose | Function | () ={} | A callback function invoked when the dialog closes |\n| onCloseValidation | Function | () =true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |\n| showCloseButton | Boolean | true | Shows a close button when set to true |\n| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |\n| onEsc | Function | () ={} | A callback fired when esc key is pressed and the dialog is about to close |\n| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray. |\n| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZEXS, Dialog.SIZESM, Dialog.SIZELG, Dialog.SIZEXL, Dialog.SIZEFULLWIDTH, Dialog.SIZEFULLHEIGHT, Dialog.SIZEFULLSCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |\n| className | String | — | Additional classes for the modal element |\nFeature info dialog\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Opens the dialog when set to true |\n| title | Node | — | The dialog title (can also be a FormattedMessage component) |\n| subtitle | Node | — | The subtitle content |\n| content | Node | — | The content of the dialog body itself |\n| footer | Node | — | The dialog footer content |\n| footerClassName | String | — | Additional classes for the modal-footer element |\n| bodyClassName | String | — | Additional classes for the modal-body element |\n| onClose | Function | () ={} | A callback function invoked when the dialog closes |\n| onCloseValidation | Function | () =true | A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed. |\n| showCloseButton | Boolean | true | Shows a close button when set to true |\n| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |\n| onEsc | Function | () ={} | A callback fired when esc key is pressed and the dialog is about to close |\n| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray. |\n| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZEXS, Dialog.SIZESM, Dialog.SIZELG, Dialog.SIZEXL, Dialog.SIZEFULLWIDTH, Dialog.SIZEFULLHEIGHT, Dialog.SIZEFULLSCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |\n| className | String | — | Additional classes for the modal element |\nOnboardingDialog\nThe OnboardingDialog component is a customizable dialog designed to guide users through the initial steps of an onboarding tour. It displays a welcome message, a brief description of the onboarding process, and action buttons to either start the tour or skip it.\nOnboarding dialog\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Opens the dialog when set to true |\n| imageSrc | string | — | The source URL of the image to be displayed in the dialog. |\n| imageAlt | string | — | Alternative text for the image, used for accessibility. |\n| title | string \\| React.ReactNode | — | The title of the dialog. A welcome message. |\n| description | string \\| React.ReactNode | — | A short description of the service and its onboarding. |\n| onboardingRestartHint | string \\| React.ReactNode | — | Hint text for restarting the onboarding process. |\n| onboardingRestartDescription | string \\| React.ReactNode | — | Detailed description for restarting the onboarding process. |\n| skipButtonText | string \\| React.ReactNode | — | Text for the skip button. |\n| tourButtonText | string \\| React.ReactNode | — | Text for the button to start the tour. |\n| onStartTour | () =void | — | Callback function to be called when the tour starts. |\n| onClose | Function | () ={} | A callback function invoked when the dialog closes |\n| className | String | — | Additional classes for the modal element |\nMediaDialog\nThis component allows the user to show media inside a dialog like a set of images or a video. It uses the dialog component described above.\nMedia dialog with multiple imagesMedia dialog with single imageMedia dialog with video\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | false | Opens the dialog when set to true |\n| title | Node | — | The dialog title (can also be a FormattedMessage component) |\n| subtitle | Node | — | The subtitle content |\n| useOverflow | Boolean | false | Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray. |\n| onClose | Function | () ={} | A callback function invoked when the dialog closes |\n| disableEsc | Boolean | false | Enables or disabled closing the dialog via esc key |\n| bsSize | String | md | Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZEXS, Dialog.SIZESM, Dialog.SIZELG, Dialog.SIZEXL, Dialog.SIZEFULLWIDTH, Dialog.SIZEFULLHEIGHT, Dialog.SIZEFULLSCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen' |\n| previousButtonText | String / Node | — | The button text for switching to the previous media if there are multiple. |\n| previousButtonCallback | Function | () ={} | Callback function for when the previous button is clicked. |\n| nextButtonText | String / Node | — | The button text for switching to the next media if there are multiple. |\n| nextButtonCallback | Function | () ={} | Callback function for when the next button is clicked. |\n| media | Array of Objects | — | List of media objects. |\n| └type | String | — | Defines the media type that is going to be displayed. Possible values are: MediaDialog.MEDIATYPEIMAGE, MediaDialog.MEDIATYPEVIDEO or 'image', 'video' |\n| └src | String | — | The source location for the media data. |\n| └aspectRatio | String | — | Only relevant for videos where the aspect of the video is defined. Possible values are: ResponsiveVideo.ASPECTRATIO4BY3, ResponsiveVideo.ASPECTRATIO16BY9 or '4by3', '16by9' |\n| └className | String | — | Additional classes for the image element. |\nFrameDialog\nThis component allows the user to create a dialog in a parent window triggered and controlled by a widget iframe.\n\nFor more details, please visit iframe guidlines\nReleaseNotesDialog\nThe ReleaseNotesDialog component is meant to be used for the release notes of a service.Note there exists also a separate ReleaseNotes component.\nService\n\n1",
+    "category": "Components",
+    "section": "Content",
+    "boost": "Dialog components/dialogs #components/dialogs Components Content"
+  },
+  {
+    "id": "components/divider",
+    "title": "Divider",
+    "lead": null,
+    "summary": "Default divider",
+    "searchText": "Divider\nDivider\nDefault divider\n\nCustom spacing value\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. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nVertical divider\nSome button\n\nSome button\n\nUsed as spacer without a line\n\nWith a title\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\nSome kind of title\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\nWith a customized title\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.\n2024-01-01\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| spacing | number | 15 | The amount of space to either side |\n| dividerWidth | 1 \\| 2 \\| 3 | 1 | Defines the width of the divider line |\n| dividerColor | 'darkest' \\| 'darker' \\| 'dark' \\| 'gray' \\| 'light' \\| 'lighter' \\| 'lightest'3' | light | Defines the color of the divider line |\n| asSpacer | boolean | false | Use the component as a spacer element without the divider line |\n| vertical | boolean | false | Set the orientation for the divider line to vertical. This may be useful for button toolbars or elements on a single row. |\n| titleAlignment | 'left' \\| 'center' \\| 'right' | center | Defines where the children are aligned on the divider line |\n| className | string | — | Additional classes to be set on the wrapper element. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "Divider components/divider #components/divider Components Misc"
+  },
+  {
+    "id": "components/dropdowns",
+    "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. |",
+    "category": "Components",
+    "section": "Selection",
+    "boost": "Dropdowns components/dropdowns #components/dropdowns Components Selection"
+  },
+  {
+    "id": "components/editableContent",
+    "title": "EditableContent",
+    "lead": "The EditableContent component allows for inline editing text or other values. To make sure the user can recognize such an element, it's best to mark the text or content with a dotted line depending on the situation and where it is placed. Alternatively, you can place the \"pencil\" icon next to the content. Especially on mobile where no hover is available, the editable content must be marked permanently.",
+    "summary": "The EditableContent component allows for inline editing text or other values. To make sure the user can recognize such an element, it's best to mark the text or content with a dotted line depending on the situation and where it is placed. Alternatively, you can place the \"pencil\" icon next to the content. Especially on mobile where no hover is available, the editable content must be marked permanently.",
+    "searchText": "EditableContent\nThe EditableContent component allows for inline editing text or other values. To make sure the user can recognize such an element, it's best to mark the text or content with a dotted line depending on the situation and where it is placed. Alternatively, you can place the \"pencil\" icon next to the content. Especially on mobile where no hover is available, the editable content must be marked permanently.\nEditableContent\nPlease also check out the usage guidelines below.\nSimple editable content\nClick Me!\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | — | Visibility flag used to control edit mode from outside. |\n| onSave | (value: string) =void | — | Callback function triggered when the save button is clicked. |\n| onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |\n| onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |\n| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |\n| onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |\n| onSaveValidation | (value: string) =boolean | — | Validation function to intercept saving and prevent save on error. |\n| isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |\n| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |\n| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |\n| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |\n| size | String | md | Defines the input and button size. Use \"lg\" for headlines. |\n| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |\n| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |\n| inputClassName | String | — | Additional classes to be set on the editor input itself. |\n| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |\n| className | String | — | Additional classes to be set on the text wrapper element. |\nEditable headline - like dialog or panel header\nHeadline that can change\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | — | Visibility flag used to control edit mode from outside. |\n| onSave | (value: string) =void | — | Callback function triggered when the save button is clicked. |\n| onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |\n| onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |\n| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |\n| onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |\n| onSaveValidation | (value: string) =boolean | — | Validation function to intercept saving and prevent save on error. |\n| isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |\n| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |\n| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |\n| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |\n| size | String | md | Defines the input and button size. Use \"lg\" for headlines. |\n| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |\n| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |\n| inputClassName | String | — | Additional classes to be set on the editor input itself. |\n| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |\n| className | String | — | Additional classes to be set on the text wrapper element. |\nEditable content using a resizable textarea\nThis text can be edited on multiple lines\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | — | Visibility flag used to control edit mode from outside. |\n| onSave | (value: string) =void | — | Callback function triggered when the save button is clicked. |\n| onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |\n| onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |\n| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |\n| onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |\n| onSaveValidation | (value: string) =boolean | — | Validation function to intercept saving and prevent save on error. |\n| isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |\n| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |\n| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |\n| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |\n| size | String | md | Defines the input and button size. Use \"lg\" for headlines. |\n| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |\n| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |\n| inputClassName | String | — | Additional classes to be set on the editor input itself. |\n| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |\n| className | String | — | Additional classes to be set on the text wrapper element. |\nFocusable editable content with input validationThis content must not contain numbers.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | — | Visibility flag used to control edit mode from outside. |\n| onSave | (value: string) =void | — | Callback function triggered when the save button is clicked. |\n| onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |\n| onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |\n| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |\n| onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |\n| onSaveValidation | (value: string) =boolean | — | Validation function to intercept saving and prevent save on error. |\n| isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |\n| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |\n| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |\n| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |\n| size | String | md | Defines the input and button size. Use \"lg\" for headlines. |\n| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |\n| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |\n| inputClassName | String | — | Additional classes to be set on the editor input itself. |\n| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |\n| className | String | — | Additional classes to be set on the text wrapper element. |\nEditable text inside of another textLorem 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. This text can be edited 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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | — | Visibility flag used to control edit mode from outside. |\n| onSave | (value: string) =void | — | Callback function triggered when the save button is clicked. |\n| onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |\n| onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |\n| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |\n| onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |\n| onSaveValidation | (value: string) =boolean | — | Validation function to intercept saving and prevent save on error. |\n| isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |\n| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |\n| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |\n| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |\n| size | String | md | Defines the input and button size. Use \"lg\" for headlines. |\n| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |\n| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |\n| inputClassName | String | — | Additional classes to be set on the editor input itself. |\n| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |\n| className | String | — | Additional classes to be set on the text wrapper element. |\nRender NumberControl as custom editor component\n234\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | — | Visibility flag used to control edit mode from outside. |\n| onSave | (value: string) =void | — | Callback function triggered when the save button is clicked. |\n| onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |\n| onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |\n| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |\n| onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |\n| onSaveValidation | (value: string) =boolean | — | Validation function to intercept saving and prevent save on error. |\n| isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |\n| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |\n| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |\n| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |\n| size | String | md | Defines the input and button size. Use \"lg\" for headlines. |\n| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |\n| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |\n| inputClassName | String | — | Additional classes to be set on the editor input itself. |\n| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |\n| className | String | — | Additional classes to be set on the text wrapper element. |\nRender NumberInput as custom editor component with input validation\n234\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | — | Visibility flag used to control edit mode from outside. |\n| onSave | (value: string) =void | — | Callback function triggered when the save button is clicked. |\n| onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |\n| onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |\n| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |\n| onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |\n| onSaveValidation | (value: string) =boolean | — | Validation function to intercept saving and prevent save on error. |\n| isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |\n| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |\n| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |\n| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |\n| size | String | md | Defines the input and button size. Use \"lg\" for headlines. |\n| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |\n| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |\n| inputClassName | String | — | Additional classes to be set on the editor input itself. |\n| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |\n| className | String | — | Additional classes to be set on the text wrapper element. |\nUsage guidelines\nDon't\nAvoid overuse in lists or tables. Avoid many repetitions of edit icons.\nLorem ipsum dolor\n\nLorem ipsum dolor\n\nLorem ipsum dolor\n\nLorem ipsum dolor\n\nLorem ipsum dolor\n\nLorem ipsum dolor\n\nLorem ipsum dolor\n\nDo\nUse an underline to indicate editable text and use a hover icon on Desktop if possible.\nLorem ipsum dolor\n\nLorem ipsum dolor\n\nLorem ipsum dolor\n\nLorem ipsum dolor\n\nLorem ipsum dolor\n\nLorem ipsum dolor\n\nLorem ipsum dolor\n\nDo\nUsing the editable field in isolation like inside a panel header or a like, you can permanently show a edit icon.\nLorem ipsum dolor\nLorem ipsum dolor\n\nNote\nIn general, don't make every cell in a table editable. The indication style would be too repetitive and the user does not expect this behavior as it is not implemented in other services like so. Strive for a common look and feel with regards to other services.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | — | Visibility flag used to control edit mode from outside. |\n| onSave | (value: string) =void | — | Callback function triggered when the save button is clicked. |\n| onCancel | VoidFunction | — | Callback function triggered when the cancel button is clicked. |\n| onFocus | VoidFunction | — | Callback function triggered when the input gets focused. |\n| onBlur | VoidFunction | — | Callback function triggered when input looses the focus. |\n| onEditMode | VoidFunction | — | Callback function triggered when entering the edit mode. |\n| onSaveValidation | (value: string) =boolean | — | Validation function to intercept saving and prevent save on error. |\n| isValid | boolean | true | Controls the error message visibility from outside. This is useful when using a custom input where the validation happens outside of this component. |\n| errorMessage | ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | ReactNode | — | Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker. Handling input state changes of a custom editor need to be handled outside of this component. By default the EditableContent uses a built-in textarea to allow resizing for larger text. the text element has borders, spacings different text sizes. |\n| editorOffsetTop | Number | 0 | Offset value to control the vertical position for the editor in case the text element has borders, spacings different text sizes. |\n| editorOffsetLeft | Number | 0 | Offset value to control the horizontal position for the editor in case the text element has borders, spacings different text sizes. |\n| size | String | md | Defines the input and button size. Use \"lg\" for headlines. |\n| allowResize | Boolean | false | Defines if the internal textarea is allowed to resize vertically. This comes in handy for larger text and when using multiple input rows. |\n| inputRows | Number | 1 | Defines the number of rows to use by the internal textarea component. |\n| inputClassName | String | — | Additional classes to be set on the editor input itself. |\n| editorClassName | String | — | Additional classes to be set on the editor wrapper element. |\n| className | String | — | Additional classes to be set on the text wrapper element. |",
+    "category": "Components",
+    "section": "Interaction",
+    "boost": "EditableContent components/editableContent #components/editableContent Components Interaction"
+  },
+  {
+    "id": "components/expander",
+    "title": "ExpanderPanel",
+    "lead": "A simple panel component where the \"panel-body\" can be expanded.",
+    "summary": "A simple panel component where the \"panel-body\" can be expanded.",
+    "searchText": "ExpanderPanel\nA simple panel component where the \"panel-body\" can be expanded.\nExpanderPanel\nToggle expanderOpen expanderClose expander\nClick me to toggle my state\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | String / Node | — | The title to be shown in the expander header. |\n| bsStyle | String | 'blank' | Component visual or contextual style variants. Possible values are: 'default' 'separator' 'blank' 'primary' 'secondary' 'info' 'warning' 'danger' 'success' |\n| iconLeft | Boolean | false | Defines if the icon will be align left, otherwise it is aligned right. |\n| open | Boolean | false | Defines if the panel will be opened or closed by default. The open/closed state will be handled internally |\n| unmountOnExit | Boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |\n| className | String | — | Additional classes to be set on the wrapper element. |\n| iconClassName | String | — | Additional classes added to the chevron icon |\n| headerClassName | String | — | Additional classes to be set on the panel header. |\n| titleClassName | String | — | Additional classes to be set on the header title. |\n| bodyClassName | String | — | Additional classes to be set on the panel body. |\n| onToggle | (isOpen: boolean) =void | — | Callback function for when the header is clicked and the expander toggles. |\n| onEntered | VoidFunction | — | Callback fired after the component has expanded. |\n| onExited | VoidFunction | — | Callback fired after the component has collapsed. |\n| onAnimationStart | VoidFunction | — | Callback fired when the animation starts for either expand or collapse. |\n| children | Node | — | Any element to be rendered inside the panel body. |\n| children | Function | — | Providing a function enables the \"render props\" approach. The function gets the isOpen state passed and is responsible for rendering the custom content. |\nDefaultLorem ipsum\nSome content\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet\n\nBlankLorem ipsum\nSome content\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet\n\nSeparatorSeparator with icon left\n\nLorem ipsum dolor sit amet\nconsetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\n\nSeparatorSeparator right aligned\n\nLorem ipsum dolor sit amet\nconsetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\n\nPrimaryLorem ipsum\n\nPrimaryHeader with icon left\n\nSecondaryLorem ipsum\n\nInfoLorem ipsum\n\nWarningLorem ipsum\n\nDangerLorem ipsum\n\nsuccessLorem ipsum\n\nDynamic table content\nItem 1\nItem 2\nItem 3\n\nAdd new table row\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | String / Node | — | The title to be shown in the expander header. |\n| bsStyle | String | 'blank' | Component visual or contextual style variants. Possible values are: 'default' 'separator' 'blank' 'primary' 'secondary' 'info' 'warning' 'danger' 'success' |\n| iconLeft | Boolean | false | Defines if the icon will be align left, otherwise it is aligned right. |\n| open | Boolean | false | Defines if the panel will be opened or closed by default. The open/closed state will be handled internally |\n| unmountOnExit | Boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |\n| className | String | — | Additional classes to be set on the wrapper element. |\n| iconClassName | String | — | Additional classes added to the chevron icon |\n| headerClassName | String | — | Additional classes to be set on the panel header. |\n| titleClassName | String | — | Additional classes to be set on the header title. |\n| bodyClassName | String | — | Additional classes to be set on the panel body. |\n| onToggle | (isOpen: boolean) =void | — | Callback function for when the header is clicked and the expander toggles. |\n| onEntered | VoidFunction | — | Callback fired after the component has expanded. |\n| onExited | VoidFunction | — | Callback fired after the component has collapsed. |\n| onAnimationStart | VoidFunction | — | Callback fired when the animation starts for either expand or collapse. |\n| children | Node | — | Any element to be rendered inside the panel body. |\n| children | Function | — | Providing a function enables the \"render props\" approach. The function gets the isOpen state passed and is responsible for rendering the custom content. |\nExpanderList\nA simple list component based on the \"list-group\" where items can be expanded individually.\nClick me\nSome content\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet\n\nClick me\n\nClick me\n\nWith custom classes for header and body\n\nGrid column 1\nGrid column 2\nGrid column 3\n\nClick me42\n\nClick me\n\nNot expandable since there is no body\n\nToggle first\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | Array of Objects | [] | List of items to be rendered |\n| └id | String / Number | — | The \"id\" property is used to know which item is expanded. It will also be used to control the component from the outside. It can be a number or a string. If there is no \"id\" provided, a unique id is internally generated which will be used internally for the uncontrolled case. |\n| └header | String / Node | — | The header content. |\n| └body | String / Node | — | The body content. If there is no \"body\" provided, the list item is not expandable. |\n| └open | Boolean | — | Defines if the item will be expanded or closed by default. |\n| └className | String | — | Additional classes to be set on list item node. |\n| └headerClassName | String | — | Additional classes to be set on \"expander-list-header\" node. |\n| └bodyClassName | String | — | Additional classes to be set on \"expander-list-body\" node. |\n| rounded | Boolean | true | Defines whether the \"expander-list-body\" is rounded or not. |\n| border | Boolean | true | Defines whether the \"expander-list-body\" has a border or not. |\n| unmountOnExit | Boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |\n| className | String | — | Additional classes to be set on the unordered list itself. |",
+    "category": "Components",
+    "section": "Show/Hide",
+    "boost": "ExpanderPanel components/expander #components/expander Components Show/Hide"
+  },
+  {
+    "id": "components/fade",
+    "title": "Fade",
+    "lead": "The Fade component fades in and out content with a given animation style.",
+    "summary": "The Fade component fades in and out content with a given animation style.",
+    "searchText": "Fade\nThe Fade component fades in and out content with a given animation style.\nFade\nAnimation styles:fade (default)fromLeftfromRightfromTopfromBottom\n\nToggle content\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | true | Defines whether to show the content or not. |\n| duration | Number | 0.2 | Duration of the fade animation in seconds. |\n| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |\n| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |\n| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |\n| onExitComplete | Function | () ={} | Fires when all exiting nodes have completed animating out. |\n| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |\n| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.divcomponent. Use this for additional customizations. |\nFading tab content:\nWhen using tabs or pills to switch between content, please us the fade style 'tabs'. It's the default so you don't have to explicitly set it.\nTab 1\nTab 2\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | true | Defines whether to show the content or not. |\n| duration | Number | 0.2 | Duration of the fade animation in seconds. |\n| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |\n| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |\n| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |\n| onExitComplete | Function | () ={} | Fires when all exiting nodes have completed animating out. |\n| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |\n| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.divcomponent. Use this for additional customizations. |\nFading pills content:\nWhen using tabs or pills to switch between content, please us the fade style 'tabs'. It's the default so you don't have to explicitly set it.\nTab 1\nTab 2\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | true | Defines whether to show the content or not. |\n| duration | Number | 0.2 | Duration of the fade animation in seconds. |\n| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |\n| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |\n| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |\n| onExitComplete | Function | () ={} | Fires when all exiting nodes have completed animating out. |\n| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |\n| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.divcomponent. Use this for additional customizations. |\nPage transition fade:\nYou may want to use 'page' or 'pageBack' style when you want to animate content as page transition. Example usage would be in a dialog, when showing onboarding screens or for steps.\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\nPrevious\n\nNext\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | true | Defines whether to show the content or not. |\n| duration | Number | 0.2 | Duration of the fade animation in seconds. |\n| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |\n| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |\n| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |\n| onExitComplete | Function | () ={} | Fires when all exiting nodes have completed animating out. |\n| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |\n| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.divcomponent. Use this for additional customizations. |\nThis demonstrates how transitions can be used to create a more engaging user experience.\nSelecting an item from this list takes you to a second view that provides detailed information specific to the chosen item.\nThis approach is particularly beneficial when dealing with limited space, such as narrow sidebars or dialog boxes with multiple steps. By utilizing transitions in these scenarios, you can effectively guide users through the process without cluttering the interface.\n\nLorem ipsum\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nDolor\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nSit amet\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nConsetetur sadipscing\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | true | Defines whether to show the content or not. |\n| duration | Number | 0.2 | Duration of the fade animation in seconds. |\n| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |\n| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |\n| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |\n| onExitComplete | Function | () ={} | Fires when all exiting nodes have completed animating out. |\n| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |\n| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.divcomponent. Use this for additional customizations. |",
+    "category": "Components",
+    "section": "Show/Hide",
+    "boost": "Fade components/fade #components/fade Components Show/Hide"
+  },
+  {
+    "id": "components/fadeExpander",
+    "title": "FadeExpander",
+    "lead": "The FadeExpander component fades in and expands when the content.",
+    "summary": "The FadeExpander component fades in and expands when the content.",
+    "searchText": "FadeExpander\nThe FadeExpander component fades in and expands when the content.\nFadeExpander\nLorem ipsum dolor sit amet\n\nEnable lorem ipsum dolor sit amet\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | false | Defines if the content is shown or not. |\n| delay | Number | 0 | Defines the time the animation should wait until it starts. |\n| duration | Number | 0.2 | Defines the duration in seconds of the expand animation. |\n| className | String | — | Additional classes names added to the motion div wrapper. |",
+    "category": "Components",
+    "section": "Show/Hide",
+    "boost": "FadeExpander components/fadeExpander #components/fadeExpander Components Show/Hide"
+  },
+  {
+    "id": "components/fadeUp",
+    "title": "FadeUp",
+    "lead": "The FadeUp component fades in when the content appears on the screen. After it faded in, the element will stay on screen. This can be used in a scrolling scenario where elements should fade up when they scroll into view. Using the delay helps to stagger the animation.",
+    "summary": "The FadeUp component fades in when the content appears on the screen. After it faded in, the element will stay on screen. This can be used in a scrolling scenario where elements should fade up when they scroll into view. Using the delay helps to stagger the animation.",
+    "searchText": "FadeUp\nThe FadeUp component fades in when the content appears on the screen. After it faded in, the element will stay on screen. This can be used in a scrolling scenario where elements should fade up when they scroll into view. Using the delay helps to stagger the animation.\nFadeUp\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.\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| delay | Number | 0 | Defines the time the animation should wait until it starts. |\n| duration | Number | 0.4 | Defines the duration in seconds of the fade up animation. |\n| offset | number | 15 | Defines the y offset from the bottom where the element starts to fade in. |\n| className | String | — | Additional classes names added to the motion div wrapper. |\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.\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. 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. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| delay | Number | 0 | Defines the time the animation should wait until it starts. |\n| duration | Number | 0.4 | Defines the duration in seconds of the fade up animation. |\n| offset | number | 15 | Defines the y offset from the bottom where the element starts to fade in. |\n| className | String | — | Additional classes names added to the motion div wrapper. |",
+    "category": "Components",
+    "section": "Show/Hide",
+    "boost": "FadeUp components/fadeUp #components/fadeUp Components Show/Hide"
+  },
+  {
+    "id": "components/feedback",
+    "title": "FeedbackRating",
+    "lead": null,
+    "summary": "How do you feel about this feature",
+    "searchText": "FeedbackRating\nFeedbackRating\nHow do you feel about this feature\n12345678910\nExtremely dissatisfiedExtremely satisfied\n\nRate your experience with this feature\n\n12345\n\nGive us feedback\n\nRate your experience with our product\n12345\n\nStars\n\nHow likely is it that you would recommend us to a friend or colleague?\n12345678910\nNot likely at allVery likely\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| headline | ReactNode | — | Optional headline |\n| circleButtons | Boolean | false | Defines whether the buttons are round. |\n| buttonClassName | String | — | Optional class names applied to the individual buttons. |\n| buttonLabels | ReactNode[] | — | Array of button labels that will be used instead of the index. There needs to be a label for each button defined. |\n| buttonStyles | { bsSize?: BUTTONSIZE; bsStyle?: BUTTONSTYLE; variant?: BUTTON_VARIANT, className?: string }[] | — | Array of button styles to individually define the button size, style and variant. There needs to be a item for each button defined. See Button component. |\n| leftLabel | ReactNode | — | Left aligned label to name the lowest rating option. |\n| rightLabel | ReactNode | — | Right aligned label to name the highest rating option. |\n| leadingIcon | ReactNode | — | Additional icon placed in front of the rating buttons. |\n| trailingIcon | ReactNode | — | Additional icon placed after the rating buttons. |\n| onRatingChanged | (rating: number \\| undefined) =void | — | Callback triggered when the rating changes. |\nFeedbackInlineButtons\nSubtle request for usefulness\nWas this helpful?\nNot reallyKind ofYes, it was\n\nReset\n\nAnother variation of inline request for usefulness\n\nHelpful\n\nNot helpful\n\nReset\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| headline | ReactNode | — | Optional headline |\n| buttons | ReactNode[] | — | List of buttons to be shown. |\nFeedbackReactions\nSimple reaction without labels\n\nSimple reaction without labels and hover colors\n\nSmall filled reaction with labels right\nBad\n\nGood\n\nAnimated reaction with labels\nNicht interessant für mich\n\nIch möchte mehr erfahren\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| headline | ReactNode | — | Optional headline |\n| size | \"sm\" \\| \"md\" | — | Size of the reaction buttons. |\n| labelPosition | \"bottom\" \\| \"right\" | bottom | Position of the reaction button labels. |\n| labelUp | ReactNode | — | Label for the up button. |\n| labelDown | ReactNode | — | Label for the down button. |\n| colorFillUp | string | bg-lightest | Custom fill color for the up button. |\n| colorFillDown | string | bg-lightest | Custom fill color for the down button. |\n| colorHoverUp | string | primary | Custom hover color for the up button. |\n| colorHoverDown | string | primary | Custom hover color for the down button. |\n| onVoteUp | VoidFunction | — | Callback function triggered on up vote. |\n| onVoteDown | VoidFunction | — | Callback function triggered on down vote. |\n| itemClassName | string | — | Additional classes applied to the individual reaction item (button and label). |\n| animated | boolean | false | Defines whether the reaction icon is animated. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "FeedbackRating components/feedback #components/feedback Components Misc"
+  },
+  {
+    "id": "components/filePickers",
+    "title": "FilePicker",
+    "lead": null,
+    "summary": "FilePicker for single imagesSelect image",
+    "searchText": "FilePicker\nFilePicker\nFilePicker for single imagesSelect image\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| displayMode | String | button | Defines the file picker display mode. Possible values are: button for a single button, dropzone for a custom dropzone passed as child function or full for showing both. |\n| multiple | Boolean | true | Indicating if multiple files may be selected. |\n| label | String / Node | Select Files | Text to display on Button if displayMode is set to \"button\". |\n| accept | Object | — | Object list of accepted Mime Types as keys and file extensions array as value. |\n| maxSize | Number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |\n| onPick | (files: FileList \\| null) =void | () ={} | Callback function after one or multiple files have been picked. |\n| fullHeight | boolean | false | 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| className | String | — | Additional classes for the select button. |\n| children | ({ isDragActive }: FilePickerRenderProps) =any | — | Pass a custom dropzone element as function receiving some render props. |\nFilePicker for multiple images and with dropzoneSelect multiple ImagesDrag & drop files here, or click to select files\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| displayMode | String | button | Defines the file picker display mode. Possible values are: button for a single button, dropzone for a custom dropzone passed as child function or full for showing both. |\n| multiple | Boolean | true | Indicating if multiple files may be selected. |\n| label | String / Node | Select Files | Text to display on Button if displayMode is set to \"button\". |\n| accept | Object | — | Object list of accepted Mime Types as keys and file extensions array as value. |\n| maxSize | Number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |\n| onPick | (files: FileList \\| null) =void | () ={} | Callback function after one or multiple files have been picked. |\n| fullHeight | boolean | false | 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| className | String | — | Additional classes for the select button. |\n| children | ({ isDragActive }: FilePickerRenderProps) =any | — | Pass a custom dropzone element as function receiving some render props. |\nFilePicker for all files and with dropzone onlyDrag & drop PDF files here or click to select\n\nYou have no file selected yet\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| displayMode | String | button | Defines the file picker display mode. Possible values are: button for a single button, dropzone for a custom dropzone passed as child function or full for showing both. |\n| multiple | Boolean | true | Indicating if multiple files may be selected. |\n| label | String / Node | Select Files | Text to display on Button if displayMode is set to \"button\". |\n| accept | Object | — | Object list of accepted Mime Types as keys and file extensions array as value. |\n| maxSize | Number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |\n| onPick | (files: FileList \\| null) =void | () ={} | Callback function after one or multiple files have been picked. |\n| fullHeight | boolean | false | 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| className | String | — | Additional classes for the select button. |\n| children | ({ isDragActive }: FilePickerRenderProps) =any | — | Pass a custom dropzone element as function receiving some render props. |",
+    "category": "Components",
+    "section": "Pickers",
+    "boost": "FilePicker components/filePickers #components/filePickers Components Pickers"
+  },
+  {
+    "id": "components/formLabel",
+    "title": "FormLabel",
+    "lead": "A small convenience component for a form label or just a label style used without a form element.",
+    "summary": "A small convenience component for a form label or just a label style used without a form element.",
+    "searchText": "FormLabel\nA small convenience component for a form label or just a label style used without a form element.\nFormLabel\nA label for a form element\nA label for a form element with additional infoSupporting text\nA label for a form element with additional info as icon\nA label for another form elementSupporting text\n\nLorem ipsum dolor\n\nA label for some other elements\nButtonButton\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| htmlFor | string | — | Used for form elements. If given the tag will be set to \"label\", otherwise it uses a \"div\". |\n| supportingText | String / Node | — | Additional supporting text displayed next to the label. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nLabels for various sized elements using the form-group-sm and form-group-lg class on the parent element.\nA label for a small form elementLorem ipsum\nA label for a large form elementLorem ipsum\nA label for some large buttons\nButtonButton\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| htmlFor | string | — | Used for form elements. If given the tag will be set to \"label\", otherwise it uses a \"div\". |\n| supportingText | String / Node | — | Additional supporting text displayed next to the label. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
+    "category": "Components",
+    "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",
+    "lead": null,
+    "summary": "Grouped by name (default)",
+    "searchText": "GroupedItemList\nGroupedItemList\nGrouped by name (default)\nA\n\nAaron\nbar2\n\nAlice\nbar1\n\nAmelia\nbar3\n\nB\n\nBarbara\nbar5\n\nBob\nbar4\n\nC\n\nCarl\nbar7\n\nCatherine\nbar8\n\nCharlie\nbar6\n\nD\n\nDaniel\nbar10\n\nDavid\nbar9\n\nDiana\nbar11\n\nE\n\nEdward\nbar12\n\nEleanor\nbar14\n\nEve\nbar13\n\nF\n\nFred\nbar15\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | Array | — | The list of items to be grouped and rendered. By default, the component assumes an item object containing an \"id\" and \"name\" property plus some other attributes. |\n| groupBy | String / Function | — | The property of the items to group by, either as a string (e.g., \"name\") or a custom grouping function. If not provided, it defaults to grouping by \"name\". |\n| groupSortOrder | String | asc | Defines the sort order for groups. Accepts \"asc\" for ascending or \"desc\" for descending order. |\n| itemSortOrder | String | asc | Defines the sort order for items within each group. Accepts \"asc\" for ascending or \"desc\" for descending order. |\n| groupSortFunction | Function | — | Optional sorting function for the groups. It takes an array of groups and returns them in the desired order. |\n| itemSortFunction | Function | — | Optional sorting function for items within each group. It takes an array of items and returns them in the desired order. |\n| renderDivider | Function | — | Custom render function for the group divider. Receives the group key as a parameter and should return a React node to render as the divider. |\n| renderItem | Function | — | Custom render function for individual list items. Receives an item as a parameter and should return a React node representing the item. |\n| listElement | \"div\" \\| \"ul\" | div | Specifies the HTML element to use for the list inside each group. Defaults to \"div\", but \"ul\" can be used if rendering list items as <lielements. |\n| listElementClassName | String | — | Optional class name for the list element inside each group (applies to the div or ul wrapping the items). |\n| dividerElementClassName | String | — | Optional class name for the divider element in each group (applies to the div wrapping each group divider). |\n| className | String | — | Optional class name for the outer wrapper element (applies to the outer div wrapping the entire component). |\nGrouped by date\nSwitch group sort orderSwitch item sort order\n2024-09-07\n\nParcel O\n(Pending)\n\n2024-09-06\n\nTruck N\n(Delivered)\n\nTruck M\n(In Transit)\n\n2024-09-05\n\nFreight L\n(Pending)\n\nFreight K\n(Delivered)\n\n2024-09-04\n\nPallet J\n(In Transit)\n\nPallet I\n(Pending)\n\n2024-09-03\n\nContainer H\n(Delivered)\n\nContainer G\n(In Transit)\n\nContainer F\n(Pending)\n\n2024-09-02\n\nPackage E\n(Delivered)\n\nPackage D\n(In Transit)\n\n2024-09-01\n\nShipment C\n(Pending)\n\nShipment B\n(Delivered)\n\nShipment A\n(In Transit)\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | Array | — | The list of items to be grouped and rendered. By default, the component assumes an item object containing an \"id\" and \"name\" property plus some other attributes. |\n| groupBy | String / Function | — | The property of the items to group by, either as a string (e.g., \"name\") or a custom grouping function. If not provided, it defaults to grouping by \"name\". |\n| groupSortOrder | String | asc | Defines the sort order for groups. Accepts \"asc\" for ascending or \"desc\" for descending order. |\n| itemSortOrder | String | asc | Defines the sort order for items within each group. Accepts \"asc\" for ascending or \"desc\" for descending order. |\n| groupSortFunction | Function | — | Optional sorting function for the groups. It takes an array of groups and returns them in the desired order. |\n| itemSortFunction | Function | — | Optional sorting function for items within each group. It takes an array of items and returns them in the desired order. |\n| renderDivider | Function | — | Custom render function for the group divider. Receives the group key as a parameter and should return a React node to render as the divider. |\n| renderItem | Function | — | Custom render function for individual list items. Receives an item as a parameter and should return a React node representing the item. |\n| listElement | \"div\" \\| \"ul\" | div | Specifies the HTML element to use for the list inside each group. Defaults to \"div\", but \"ul\" can be used if rendering list items as <lielements. |\n| listElementClassName | String | — | Optional class name for the list element inside each group (applies to the div or ul wrapping the items). |\n| dividerElementClassName | String | — | Optional class name for the divider element in each group (applies to the div wrapping each group divider). |\n| className | String | — | Optional class name for the outer wrapper element (applies to the outer div wrapping the entire component). |\nGrouped by custom key with basic styling\n\nA\nAir Freight: The transportation of goods via air\nAir Waybill (AWB): A document for air shipments detailing the goods and their destination\n\nB\nBill of Lading (B/L): A contract between the shipper and the carrier for ocean transport\nBulk Cargo: Unpackaged goods shipped in large quantities, like grains or coal\n\nC\nCargo: Goods transported by a vehicle such as a ship, truck, or aircraft\nCarrier: A company that transports goods via road, rail, sea, or air\nConsignee: The person or company receiving the shipment\nCustoms: Government agency responsible for regulating shipments entering a country\n\nD\nDangerous Goods: Items that require special handling due to safety concerns, like chemicals\nDemurrage: A charge for delaying the return of a container beyond the allowed time\n\nF\nFreight Forwarder: A company that organizes shipments on behalf of shippers\nFull Container Load (FCL): A shipment that fills an entire container\n\nL\nLogistics: The management of the flow of goods between the point of origin and consumption\nLTL (Less than Truckload): A shipment that doesn’t require a full truckload\n\nV\nVessel: A large ship used to transport goods across seas and oceans\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | Array | — | The list of items to be grouped and rendered. By default, the component assumes an item object containing an \"id\" and \"name\" property plus some other attributes. |\n| groupBy | String / Function | — | The property of the items to group by, either as a string (e.g., \"name\") or a custom grouping function. If not provided, it defaults to grouping by \"name\". |\n| groupSortOrder | String | asc | Defines the sort order for groups. Accepts \"asc\" for ascending or \"desc\" for descending order. |\n| itemSortOrder | String | asc | Defines the sort order for items within each group. Accepts \"asc\" for ascending or \"desc\" for descending order. |\n| groupSortFunction | Function | — | Optional sorting function for the groups. It takes an array of groups and returns them in the desired order. |\n| itemSortFunction | Function | — | Optional sorting function for items within each group. It takes an array of items and returns them in the desired order. |\n| renderDivider | Function | — | Custom render function for the group divider. Receives the group key as a parameter and should return a React node to render as the divider. |\n| renderItem | Function | — | Custom render function for individual list items. Receives an item as a parameter and should return a React node representing the item. |\n| listElement | \"div\" \\| \"ul\" | div | Specifies the HTML element to use for the list inside each group. Defaults to \"div\", but \"ul\" can be used if rendering list items as <lielements. |\n| listElementClassName | String | — | Optional class name for the list element inside each group (applies to the div or ul wrapping the items). |\n| dividerElementClassName | String | — | Optional class name for the divider element in each group (applies to the div wrapping each group divider). |\n| className | String | — | Optional class name for the outer wrapper element (applies to the outer div wrapping the entire component). |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "GroupedItemList components/groupedItemList #components/groupedItemList Components Content"
+  },
+  {
+    "id": "components/iconList",
+    "title": "IconList",
+    "lead": "The timeline component is a pure CSS component.",
+    "summary": "The timeline component is a pure CSS component.",
+    "searchText": "IconList\nThe timeline component is a pure CSS component.\nIconList\nIcon list\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\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\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\nIcon list\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\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\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.\nTree list\n\nLorem ipsum\nLorem ipsumLorem ipsumLorem ipsum\nLorem ipsum\nLorem ipsum\n\nLorem ipsumLorem ipsum\nLorem ipsum\nLorem ipsum\n\nLorem ipsumLorem ipsumLorem ipsum\nLorem ipsum\nLorem ipsum\n\nLorem ipsumLorem ipsum\nLorem ipsum\nLorem ipsum\n\nLorem Ipsum\n\nTree list with panels\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\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\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\nTree list with icons\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\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\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.",
+    "category": "Components",
+    "section": "CSS Only",
+    "boost": "IconList components/iconList #components/iconList Components CSS Only"
+  },
+  {
+    "id": "components/imagePreloader",
+    "title": "ImagePreloader",
+    "lead": "Use the preloader for controlling the various states when fetching the image. It allows to handle the failure case as well.",
+    "summary": "Use the preloader for controlling the various states when fetching the image. It allows to handle the failure case as well.",
+    "searchText": "ImagePreloader\nUse the preloader for controlling the various states when fetching the image. It allows to handle the failure case as well.\nImagePreloader\nWith Image tag\n\nAs background image without spinner\n\nFallback case\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| src | String | — | The source location for the image to load. |\n| onLoaded | (image: HTMLImageElement) =void | () ={} | Invoked when the image is loaded. The image object will be passed as argument. |\n| onFailed | (image: HTMLImageElement) =void | () ={} | Invoked when the image failed to load. The image object will be passed as argument. |\n| isAnonymous | Boolean | false | Defines whether to set \"crossOrigin\" to \"Anonymous\" or not. |\n| children | (props: { status: ImagePreloaderStatus; image: HTMLImageElement }) =JSX.Element \\| null | — | A render function can be used to access both the current state and the image element. Using this, you can decide how to render the different states and/or the loaded image. The function will receive props containing the status and image properties. status will be one of 'PENDING', 'FAILED' or 'LOADED'. image is the Image element. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "ImagePreloader components/imagePreloader #components/imagePreloader Components Misc"
+  },
+  {
+    "id": "components/labeledElement",
+    "title": "LabeledElement",
+    "lead": "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 by using the FormLabelcomponent internally. For more flexibility, you can also use it directly when needed.",
+    "summary": "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 by using the FormLabelcomponent internally. For more flexibility, you can also use it directly when needed.",
+    "searchText": "LabeledElement\nA 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 by using the FormLabelcomponent internally. For more flexibility, you can also use it directly when needed.\nLabeledElement\nLabel for a form element\nLabel for other elements\nButtonButton\n\nLabel for a value\nSome value with default gap\n\nLabel with no gap\nLorem ipsum dolor\nLabel for styled value\nLorem ipsum dolor\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | string \\| React.ReactElement | — | The text to display for the label. |\n| labelProps | FormLabelProps | — | Additional props for the FormLabel, excluding children and htmlFor. |\n| noGap | boolean | false | If true, removes the bottom margin from the label. |\n| className | String | — | Additional classes to be set on the wrapper element. |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "LabeledElement components/labeledElement #components/labeledElement Components Content"
+  },
+  {
+    "id": "components/licensePlate",
+    "title": "LicensePlate",
+    "lead": "The LicensePlate component is designed to display license plate information with various customization options. It is built with container queries, which ensure that design elements are shown or hidden based on the available space.",
+    "summary": "The LicensePlate component is designed to display license plate information with various customization options. It is built with container queries, which ensure that design elements are shown or hidden based on the available space.",
+    "searchText": "LicensePlate\nThe LicensePlate component is designed to display license plate information with various customization options. It is built with container queries, which ensure that design elements are shown or hidden based on the available space.\nLicensePlate\nTest with your own data\n\nEnter demo data for countryCode and LicensePlate\n\nD\nM-TB-1234\n\nDK\nAF 12 3456\n\nSLO\nLJ 12-ABC\n\nD\nM-TB-1234\n\nDK\nAF 12 3456\n\nSLO\nLJ 12-ABC\n\nD\nM-TB-1234\n\nDK\nAF 12 3456\n\nSLO\nLJ 12-ABC\n\nD\nM-TB-1234\n\nDK\nAF 12 3456\n\nSLO\nLJ 12-ABC\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| countryCode | string | — | The country code. Should be a string with 1-3 capital letters. |\n| hideStars | boolean | false | Whether the EU stars should be hidden. |\n| className | string | — | Additional classes added to the wrapping element. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "LicensePlate components/licensePlate #components/licensePlate Components Misc"
+  },
+  {
+    "id": "components/lineCharts",
+    "title": "LineChart",
+    "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": "LineChart\nLineChart\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 LineChart\n\nPage APage BPage CPage DPage EPage FPage G\n### LineChart\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| 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 | false | 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| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\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| lines | Array of Line | [] | Renders the provided Line components. |\n| ... |  | — | Additional props are passed to the underlying LineChart component. Details can be found here: https://recharts.org/en-US/api/LineChart |\n### Line\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| strokeColor | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the line. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the line. |\n| legendType | String | square | The type of icon in legend. If set to \"none\", no legend item will be rendered. |\n| type | String | monotone | The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area. |\n| isAnimationActive | Boolean | true | If set false, animation of line will be disabled. |\n| ... |  | — | Additional props are passed to the underlying Line component. Details can be found here: https://recharts.org/en-US/api/Line |\n### ReferenceLine\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| stroke | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |\n| ... |  | — | Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine |\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 |\nLineChart with ReferenceLine\nCustom labelPage APage BPage CPage DPage EPage FPage GMaxSegment\n### LineChart\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| 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 | false | 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| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\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| lines | Array of Line | [] | Renders the provided Line components. |\n| ... |  | — | Additional props are passed to the underlying LineChart component. Details can be found here: https://recharts.org/en-US/api/LineChart |\n### Line\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| strokeColor | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the line. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the line. |\n| legendType | String | square | The type of icon in legend. If set to \"none\", no legend item will be rendered. |\n| type | String | monotone | The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area. |\n| isAnimationActive | Boolean | true | If set false, animation of line will be disabled. |\n| ... |  | — | Additional props are passed to the underlying Line component. Details can be found here: https://recharts.org/en-US/api/Line |\n### ReferenceLine\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| stroke | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |\n| ... |  | — | Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine |\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 lines in a LineChart with a brush for range selection\n\nuv\npv\namt\n\nPage APage BPage CPage DPage EPage FPage G025005000750010000\n### LineChart\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| 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 | false | 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| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\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| lines | Array of Line | [] | Renders the provided Line components. |\n| ... |  | — | Additional props are passed to the underlying LineChart component. Details can be found here: https://recharts.org/en-US/api/LineChart |\n### Line\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| strokeColor | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the line. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the line. |\n| legendType | String | square | The type of icon in legend. If set to \"none\", no legend item will be rendered. |\n| type | String | monotone | The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area. |\n| isAnimationActive | Boolean | true | If set false, animation of line will be disabled. |\n| ... |  | — | Additional props are passed to the underlying Line component. Details can be found here: https://recharts.org/en-US/api/Line |\n### ReferenceLine\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| stroke | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |\n| ... |  | — | Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine |\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 axes in a LineChart with a brush for range selection\n\nExtreme\nModerate\nNominal\n\nNow00:1500:4501:1501:4502:1502:4503:1503:4504:1504:450306090120PlannedChargingDischargingInterruption\n### LineChart\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| 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 | false | 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| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\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| lines | Array of Line | [] | Renders the provided Line components. |\n| ... |  | — | Additional props are passed to the underlying LineChart component. Details can be found here: https://recharts.org/en-US/api/LineChart |\n### Line\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| strokeColor | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the line. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the line. |\n| legendType | String | square | The type of icon in legend. If set to \"none\", no legend item will be rendered. |\n| type | String | monotone | The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area. |\n| isAnimationActive | Boolean | true | If set false, animation of line will be disabled. |\n| ... |  | — | Additional props are passed to the underlying Line component. Details can be found here: https://recharts.org/en-US/api/Line |\n### ReferenceLine\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| stroke | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |\n| ... |  | — | Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine |\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": "LineChart components/lineCharts #components/lineCharts Components Charts"
+  },
+  {
+    "id": "components/listMenu",
+    "title": "ListMenu",
+    "lead": "A simple list menu that supports grouping and filter.",
+    "summary": "A simple list menu that supports grouping and filter.",
+    "searchText": "ListMenu\nA simple list menu that supports grouping and filter.\nListMenu\nListMenu (default)\nGroup\nLorem\nDisabled Ipsum\nDolor\nSit amet\nNo Link Sample\n\nListMenu with optional name filter\n\nGroup5 items\nLorem\nDisabled Ipsum\nDolor\nSit amet\nNo Link Sample\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| menuItems | Array of Objects | — | List of menu item groups to be shown. |\n| └group | String \\| Node | — | The optional group header to be shown. This can also be a component such as aFormattedMessage. |\n| └badge | String \\| Node | — | The optional badge displayed alongside the group or nav items. This can be a string or a React node for additional flexibility. |\n| └badgeType | \"muted\" \\| \"success\" \\| \"info\" \\| \"warning\" \\| \"danger\" | — | Determines the visual style of the badge. Available types include:muted, success, info, warning, and danger. |\n| └groupNavItem | String \\| Node | — | The optional group header link to be shown. This can be a link component such asNavLink orLink. This way, the header can be a link itself. In this case, the propgroupcan be omitted. |\n| └navItems | Array of Objects | — | The list of all menu items of a group. |\n| └navItems.key | String | — | The name or key of the menu nav item. This key will be used for filtering, hence it should match the translated menu item name. |\n| └navItems.item | Node | — | The menu nav item itself. This can be a simple<a, <NavLink, <Linkor a <spanor even a <FormattedMessage|\n| └navItems.disabled | Boolean | false | Disables the list item. |\n| enableFilter | Boolean | false | Enables the filter. |\n| focusFilter | Boolean | false | Focus the filter input. |\n| filterKey | String | key | Define the attribute key for filter for. |\n| filterPlaceholder | String | — | The placeholder text for the input. |\n| notFoundMessage | String / Node | — | A localized message to be shown when filter result is empty. |\n| responsive | Boolean | true | The menu uses collapses on smaller screens using an expander panel. |\n| autoClose | Boolean | true | Enables automatic close of the expander panel. Only relevant when using the responsive flag. Note: make sure to not stop the events from bubbling up when clicking on an list item. Using \"event.stopPropagation()\" will not work for the panel to close. |\n| trailingInputAddon | ReactNode | — | Additional addon for the input group. |\n| groupClassName | String | — | Additional classes to be set on the menu group element. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nListMenu with NavLinks\nIn case you want to navigate routes you can also use NavLink components.\n\nIn this example, all NavLinks are pointing to this ListMenu page.\nListMenu with NavLinks\nGroup\nLorem\nLipsum\nDolor\nSit amet\nNo Link Sample\n\nAnother group\nLorem\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| menuItems | Array of Objects | — | List of menu item groups to be shown. |\n| └group | String \\| Node | — | The optional group header to be shown. This can also be a component such as aFormattedMessage. |\n| └badge | String \\| Node | — | The optional badge displayed alongside the group or nav items. This can be a string or a React node for additional flexibility. |\n| └badgeType | \"muted\" \\| \"success\" \\| \"info\" \\| \"warning\" \\| \"danger\" | — | Determines the visual style of the badge. Available types include:muted, success, info, warning, and danger. |\n| └groupNavItem | String \\| Node | — | The optional group header link to be shown. This can be a link component such asNavLink orLink. This way, the header can be a link itself. In this case, the propgroupcan be omitted. |\n| └navItems | Array of Objects | — | The list of all menu items of a group. |\n| └navItems.key | String | — | The name or key of the menu nav item. This key will be used for filtering, hence it should match the translated menu item name. |\n| └navItems.item | Node | — | The menu nav item itself. This can be a simple<a, <NavLink, <Linkor a <spanor even a <FormattedMessage|\n| └navItems.disabled | Boolean | false | Disables the list item. |\n| enableFilter | Boolean | false | Enables the filter. |\n| focusFilter | Boolean | false | Focus the filter input. |\n| filterKey | String | key | Define the attribute key for filter for. |\n| filterPlaceholder | String | — | The placeholder text for the input. |\n| notFoundMessage | String / Node | — | A localized message to be shown when filter result is empty. |\n| responsive | Boolean | true | The menu uses collapses on smaller screens using an expander panel. |\n| autoClose | Boolean | true | Enables automatic close of the expander panel. Only relevant when using the responsive flag. Note: make sure to not stop the events from bubbling up when clicking on an list item. Using \"event.stopPropagation()\" will not work for the panel to close. |\n| trailingInputAddon | ReactNode | — | Additional addon for the input group. |\n| groupClassName | String | — | Additional classes to be set on the menu group element. |\n| className | String | — | Additional classes to be set on the wrapper element. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "ListMenu components/listMenu #components/listMenu Components Misc"
+  },
+  {
+    "id": "components/loadMore",
+    "title": "LoadMoreButton",
+    "lead": null,
+    "summary": "50/150",
+    "searchText": "LoadMoreButton\nLoadMoreButton\n50/150\n\nLoad more\n\nReset\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| loaded | Number | 0 | The number of already loaded elements. If set to 0 the progress bar will not be shown. |\n| total | Number | 100 | The number of all elements. If set to 0 the progress bar will not be shown. |\n| loadMoreMessage | String / Node | — | The text for the load more button. |\n| noMoreMessage | String / Node | — | The message that will be shown when everything is loaded. |\n| isInteractive | Boolean | true | If set to \"false\", the button will not be rendered. The loadMoreMessage will be shown as text. |\n| progressBarStyle | String | white | In case the component is used on white background, set the progress bar style to \"gray\". |\n| onLoadMore | Function | () ={} | Callback fired when clicking on the load more button. |\n| className | String | — | Additional classes to be set on the wrapper element. |\n20/100\n\nShowing limited result.\nUse filters to narrow down the result.\n\nResetLoad more\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| loaded | Number | 0 | The number of already loaded elements. If set to 0 the progress bar will not be shown. |\n| total | Number | 100 | The number of all elements. If set to 0 the progress bar will not be shown. |\n| loadMoreMessage | String / Node | — | The text for the load more button. |\n| noMoreMessage | String / Node | — | The message that will be shown when everything is loaded. |\n| isInteractive | Boolean | true | If set to \"false\", the button will not be rendered. The loadMoreMessage will be shown as text. |\n| progressBarStyle | String | white | In case the component is used on white background, set the progress bar style to \"gray\". |\n| onLoadMore | Function | () ={} | Callback fired when clicking on the load more button. |\n| className | String | — | Additional classes to be set on the wrapper element. |",
+    "category": "Components",
+    "section": "Interaction",
+    "boost": "LoadMoreButton components/loadMore #components/loadMore Components Interaction"
+  },
+  {
+    "id": "components/mainNavigation",
+    "title": "MainNavigation",
+    "lead": null,
+    "summary": "There is no dedicated MainNavigation Component. The navigation items are part of the ApplicationHeader",
+    "searchText": "MainNavigation\nMainNavigation\nThere is no dedicated MainNavigation Component. The navigation items are part of the ApplicationHeader\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3",
+    "category": "Components",
+    "section": "Navigation",
+    "boost": "MainNavigation components/mainNavigation #components/mainNavigation Components Navigation"
+  },
+  {
+    "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",
+    "category": "Components",
+    "section": "Map",
+    "boost": "Circle components/mapCircle #components/mapCircle Components Map"
+  },
+  {
+    "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",
+    "category": "Components",
+    "section": "Map",
+    "boost": "Clusters components/mapCluster #components/mapCluster Components Map"
+  },
+  {
+    "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. |",
+    "category": "Components",
+    "section": "Map",
+    "boost": "Map components/mapContext #components/mapContext Components Map"
+  },
+  {
+    "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}",
+    "category": "Components",
+    "section": "Map",
+    "boost": "Draggable marker components/mapDraggableMarker #components/mapDraggableMarker Components Map"
+  },
+  {
+    "id": "components/mapGettingStarted",
+    "title": "components/mapGettingStarted",
+    "lead": "HERE Maps credentials used in the UIKIT demo are not allowed to be used in any production environment!",
+    "summary": "HERE Maps credentials used in the UIKIT demo are not allowed to be used in any production environment!",
+    "searchText": "HERE Maps credentials used in the UIKIT demo are not allowed to be used in any production environment!\nPrerequisites\nNote: HERE Maps credentials used in the UIKIT demo are not allowed to be used in any production environment!Please make sure you get your own \"dev\" and \"prod\" credentials!\nHERE Maps credentials\nPlease note that the usage of HERE Maps is not free. If you have any questions regarding license costs, please contact us.\n\nIn case you want to use HERE Maps in production, please contact finance@rio.cloud.\n\nAdd HERE Maps dependencies\n\nMap Imports\n\nAs the UIKIT Map component relies on the map scripts from Here, we need to add them to the index.html as shown below.\n\nhtml\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-core.js\" type=\"text/javascript\"</script\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js\" type=\"text/javascript\"</script\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-service.js\" type=\"text/javascript\"</script\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js\" type=\"text/javascript\"</script\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-mapevents.js\" type=\"text/javascript\"</script\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-ui.js\" type=\"text/javascript\"</script\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-harp.js\" type=\"text/javascript\"</script\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-clustering.js\" type=\"text/javascript\"</script\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://js.api.here.com/v3/3.1/mapsjs-ui.css\" /\n\nMap API VersionBy default, the map imports use the map version 3.1. However, this version is not a fixed version as it will be resolved to an internal version by Here. This means version 3.1 is treated as an evergreen version.If you encounter any instability or even bugs with the map itself, it is recommended to set the version fixed in the imports and check for a newer version on demand.More details can be found on the Here Developer PlatformFor example<script src=\"https://js.api.here.com/v3/3.1.11.2/mapsjs-core.js\"</script",
+    "category": "Components",
+    "section": "Map",
+    "boost": "components/mapGettingStarted #components/mapGettingStarted Components Map"
+  },
+  {
+    "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",
+    "category": "Components",
+    "section": "Map",
+    "boost": "InfoBubble components/mapInfoBubble #components/mapInfoBubble Components Map"
+  },
+  {
+    "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",
+    "category": "Components",
+    "section": "Map",
+    "boost": "MapLayerGroup components/mapLayerGroup #components/mapLayerGroup Components Map"
+  },
+  {
+    "id": "components/mapMarker",
+    "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'. |",
+    "category": "Components",
+    "section": "Map",
+    "boost": "Marker components/mapMarker #components/mapMarker Components Map"
+  },
+  {
+    "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",
+    "category": "Components",
+    "section": "Map",
+    "boost": "Polygon components/mapPolygon #components/mapPolygon Components Map"
+  },
+  {
+    "id": "components/mapRoute",
+    "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. |",
+    "category": "Components",
+    "section": "Map",
+    "boost": "Route components/mapRoute #components/mapRoute Components Map"
+  },
+  {
+    "id": "components/mapRouteGenerator",
+    "title": "components/mapRouteGenerator",
+    "lead": null,
+    "summary": "Documentation entry for components/mapRouteGenerator",
+    "searchText": "",
+    "category": "Components",
+    "section": "Map",
+    "boost": "components/mapRouteGenerator #components/mapRouteGenerator Components Map"
+  },
+  {
+    "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",
+    "category": "Components",
+    "section": "Map",
+    "boost": "Map settings components/mapSettings #components/mapSettings Components Map"
+  },
+  {
+    "id": "components/mapUtils",
+    "title": "Map utils",
+    "lead": null,
+    "summary": "import { useRef, useState } from 'react';",
+    "searchText": "Map utils\nMap utils\nimport { useRef, useState } from 'react';\nimport { isEqual } from 'es-toolkit/compat';\n\n// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>\nimport Map from '@rio-cloud/rio-uikit/Map';\nimport EventUtils from '@rio-cloud/rio-uikit/EventUtils';\nimport type { MapApi, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\n\nexport default () => {\nconst [zoom, setZoom] = useState(10);\nconst [center, setCenter] = useState<Position>({ lat: 48.5, lng: 12.1 });\nconst mapApiRef = useRef<MapApi>();\n\nconst eventListenerMap = {\n[EventUtils.MAP_VIEW_CHANGE_END]: (event: MapEvent) => {\n// Access the Map ViewModel to retrieve its' LookAtData\n// The View model contains all relevant map data like zoom, position or bounding box.\n// Note: Working with the ViewModel directly requires to round zoom values or to exclude\n// other props from position object. Better, use map utils instead.\nconst target = event.currentTarget;\nconst lookAtData = target.getViewModel().getLookAtData();\n\nconsole.log({ lookAtData });\n\n// Accessing map utils to retrieve map position, zoom and bounding box.\n// This way, you don't have to deal with here map internals or round zoom values etc.\nconst api = mapApiRef.current;\nconst mapCenter = api?.utils?.getCenter();\nconst mapZoom = api?.utils?.getZoom();\nconst mapBoundingBox = api?.utils?.getBounds();\n\nconsole.log({ mapCenter, mapZoom, mapBoundingBox });\n\n// Check for changed values to update local state or to perform other actions\nconst isEqualZoom = isEqual(zoom, mapZoom);\nconst isEqualPosition = isEqual(center.lat, mapCenter?.lat) && isEqual(center.lng, mapCenter?.lng);\n\nif (!(isEqualPosition && isEqualZoom)) {\n// ... perform some actions\n}\n},\n};\n\nreturn (\n<Map\neventListenerMap={eventListenerMap}\ncredentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n// ... other map properties\n>\n{api => {\nmapApiRef.current = api;\n\n// if needed, render cluster or marker layer here or return null\nreturn null;\n}}\n</Map>\n);\n};",
+    "category": "Components",
+    "section": "Map",
+    "boost": "Map utils components/mapUtils #components/mapUtils Components Map"
+  },
+  {
+    "id": "components/multiselects",
+    "title": "Multiselect",
+    "lead": "The Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.",
+    "summary": "The Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.",
+    "searchText": "Multiselect\nThe Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.\nMultiselect\nThis component allows the selection of multiple items from a list.\n\nIf no item is selected in the list a default placeholder text is displayed in the box. Otherwise the items are listed in the box. If the item list is too long for the box, it is truncated and an ellipsis is displayed.\n\nA maximum of seven items is displayed in the list at a time. If the list contains more that 6 items, a scrollbar is added in order to limit the height of the list.\n\nThis component supports items with icons and labels.\nDefault MultiselectOption 1Option 4Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\n\nDisabledOption 1Option 4Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\n\nwith external error feedbackOption 1Option 4Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\n\nThis is an error message\nwith built-in error feedback\nOption 1Option 4This is an error message\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nWith label component\nPlease select vehicles\n\nTruck\nVan\nBus\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nMultiline with wrapping items\nOption 1Option 2Option 3Option 4Option 5Option 6Option 8\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\nOption 10\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nWith selected item counterPlease selectOption 1\nOption 2\nOption 3\n\nWith selected item counter render function - Note: \"counterMessage\" should be favoredPlease selectOption 1\nOption 2\nOption 3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nInline:Please select vehiclesOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nPlease select vehiclesOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nFull width:Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nPlease selectOption 1\nOption 2\nOption 3\nOption 4\n\nPlease selectOption 1\nOption 2\nOption 3\nOption 4\n\nOption 1\nOption 2\nOption 3\nOption 4\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |",
+    "category": "Components",
+    "section": "Selection",
+    "boost": "Multiselect components/multiselects #components/multiselects Components Selection"
+  },
+  {
+    "id": "components/noData",
+    "title": "NoData",
+    "lead": null,
+    "summary": "Simple NoData elementNo data",
+    "searchText": "NoData\nNoData\nSimple NoData elementNo data\nSimple NoData element with lager textNo data\nNoData with tooltipNo data\nNoData with tooltip rightNo data\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| text | String / Node | — | The actual translated \"No data\" text. |\n| tooltip | String / Node | — | Additional explanation shown inside a tooltip. |\n| tooltipPlacement | String | bottom | Sets the direction the Tooltip is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |\n| tooltipWidth | String | auto | Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |\n| className | String | — | Additional class names to be added to the wrapping element. |\nNoData in tablesColumn 1Column 2Column 3\n\nLoremNo dataNo data\nIpsumNo dataNo data\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| text | String / Node | — | The actual translated \"No data\" text. |\n| tooltip | String / Node | — | Additional explanation shown inside a tooltip. |\n| tooltipPlacement | String | bottom | Sets the direction the Tooltip is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |\n| tooltipWidth | String | auto | Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |\n| className | String | — | Additional class names to be added to the wrapping element. |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "NoData components/noData #components/noData Components Content"
+  },
+  {
+    "id": "components/notifications",
+    "title": "Notification",
+    "lead": "Hint:Notifications need to be wrapped by a NotificationsContainer inside your application layout body.",
+    "summary": "Hint:Notifications need to be wrapped by a NotificationsContainer inside your application layout body.",
+    "searchText": "Notification\nHint:Notifications need to be wrapped by a NotificationsContainer inside your application layout body.\nNotification\nHint: Notifications need to be wrapped by a NotificationsContainer inside your application layout body.\n\nPlease check out the notifications guidelines here.\nNotifications\nDefault notification\nInfo notificationSuccess notificationWarning notificationError notification\n\nNotifications with options\nInfoSuccessWarningError\nNote\n\nUse notifications with a progress bar only when the user should interact with the notification for example when adding a link or a button.\nCopy to clipboard notification example",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "Notification components/notifications #components/notifications Components Misc"
+  },
+  {
+    "id": "components/numbercontrol",
+    "title": "NumberInput",
+    "lead": null,
+    "summary": "No default values",
+    "searchText": "NumberInput\nNumberInput\nNo default values\n\nNumberInput in various sizes:\n\nNumberInput with unit and inputAddon in various sizes:\n\nm\n\nm\n\nm\n\nNumberInput with limits:\n\ndays\n\nDisabled NumberInput\nm\n\nWith warning feedbackShort warning message\nunit\n\nFixed 'noDefault'\nPcs\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| min | Number | 0 | The minimum value of the input. |\n| max | Number | Number.MAX_VALUE | The maximum value of the input. |\n| value | Number | 0 | The initial value of the input. |\n| step | Number | 1 | The size of increment or decrement (only works with number type). |\n| digitPrecision | Number | 3 | Number of digits after the comma the value should be fixed to. |\n| disabled | Boolean | false | Enables or disabled the input. |\n| onChange | (value?: number) =void | — | Callback function fired when the value of the input changes. |\n| onKeyDown | (event: React.KeyboardEvent<HTMLInputElement) =void | — | Callback function that gets triggered after filtering out invalid key strokes. |\n| bsSize | 'sm' \\| 'md' \\| 'lg' | 'md' | Defines the size of the input to be rendered. Possible values are: 'sm' 'md'or 'lg' |\n| unit | String / Node | — | A unit for this value. This will be shown in a dedicated input addon. |\n| errorMessage | String | — | Optional error message. |\n| warningMessage | String | — | Optional warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space. |\n| inputAddon | String | — | A rioglyph icon tio be shown in front of the input. |\n| placeholder | String | — | The input placeholder if no value is given. |\n| noDefault | Boolean | false | Lets you omit the default value of \"0\" when the vale is not defined. The input will be empty in this case. |\n| ref | React.ref | — | A ref function assigned to the wrapper element. |\n| className | String | — | Additional classes to be set on the component. |\nNumberControl\nNumberControl with limits and various step sizes:\n\nm\n\nNumberControl without default value\n\nNumberControl in large and small:\n\ndays\n\nm\n\nNumberControl with error feedbackVery long error message with nowrap messageWhiteSpace prop\nunit\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| min | Number | 0 | The minimum value of the input. |\n| max | Number | Number.MAX_VALUE | The maximum value of the input. |\n| value | Number | 0 | The initial value of the input. |\n| step | Number | 1 | The size of increment or decrement (only works with number type). |\n| digitPrecision | Number | 3 | Number of digits after the comma the value should be fixed to. |\n| disabled | Boolean | false | Enables or disabled the input. |\n| onChange | (value?: number) =void | — | Callback function fired when the value of the input changes. |\n| onKeyDown | (event: React.KeyboardEvent<HTMLInputElement) =void | — | Callback function that gets triggered after filtering out invalid key strokes. |\n| bsSize | 'sm' \\| 'md' \\| 'lg' | 'md' | Defines the size of the input to be rendered. Possible values are: 'sm' 'md'or 'lg' |\n| unit | String / Node | — | A unit for this value. This will be shown in a dedicated input addon. |\n| errorMessage | String | — | Optional error message. |\n| warningMessage | String | — | Optional warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space. |\n| inputAddon | String | — | A rioglyph icon tio be shown in front of the input. |\n| placeholder | String | — | The input placeholder if no value is given. |\n| noDefault | Boolean | false | Lets you omit the default value of \"0\" when the vale is not defined. The input will be empty in this case. |\n| ref | React.ref | — | A ref function assigned to the wrapper element. |\n| className | String | — | Additional classes to be set on the component. |",
+    "category": "Components",
+    "section": "Interaction",
+    "boost": "NumberInput components/numbercontrol #components/numbercontrol Components Interaction"
+  },
+  {
+    "id": "components/onboarding",
+    "title": "Onboarding",
+    "lead": "Useful when you want to control a single tooltip that highlights a portion of the UI.",
+    "summary": "Useful when you want to control a single tooltip that highlights a portion of the UI.",
+    "searchText": "Onboarding\nUseful when you want to control a single tooltip that highlights a portion of the UI.\nOnboarding\nSingle onboarding tip\nReveal feature with onboarding tipReset\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | The id of the DOM element. |\n| show | Boolean | false | Indicates whether the onboarding tip is shown. |\n| showCloseIcon | Boolean | true | Defines whether to show a close icon. |\n| textAlignment | String | OnboardingTip.TEXTALIGNMENTLEFT | Define how the text should be aligned. Possible values are: OnboardingTip.TEXTALIGNMENTLEFT OnboardingTip.TEXTALIGNMENTCENTER OnboardingTip.TEXTALIGNMENTRIGHT |\n| width | Number | — | Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450 or 500 |\n| onHide | Function | () ={} | Callback function for when the component shall be hidden. |\n| useInDialog | Boolean | false | Changes the z-index. |\n| className | String | — | Additional classes to be set on the wrapper element. |\n| title | String / Node | — | The title of the onboarding tip. |\n| content | String / Node | — | The content of the onboarding tip. |\n| preventOverflow | Boolean | true | Prevents Onboarding tips from being cut off horizontally at screen borders. |\n| popperConfig | Object | — | A Popper.js config object passed to the the underlying popper instance. |\n| placement | String | OnboardingTip.BOTTOM | Define how the component should be placed. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |\nOnboarding tour\nWhen you want to guide the user through a \"tour\" with multiple steps explaining individual features or UI elements. The behavior of the whole tour and individual steps can be controlled declaratively.\nStart walkthroughReset\n\nNotifications\nKeep track of important alerts and messages.\nClick here\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| steps | OnboardingStep[] | — | Array of steps to highlight. This should be passed when setting up a product tour. |\n| └element | String | — | The target element to highlight. This can be a DOM element (ref), a function that returns a DOM element, or a CSS selector (most likely, you want to go with a selector as it's the easiest one to implement). If no element is given, the popover will simply be centered on the screen. |\n| └popover | Object | — | Defines the content and appearance of the popover using those properties: title: Title text to be shown. description: Description text to be shown. side: The position of the popover relative to the target element. align: Where the popover is anchored to the target element. showButtons: The buttons that should be shown in the popover - for this step only. disableButtons: The buttons that should be disabled in the popover - for this step only. disableActiveInteraction: Whether to disable interaction with the highlighted element. popoverClass: Custom class to add to the popover element. prevBtnText: Text to use for the \"previous\" button - specific for this step only. nextBtnText: Text to use for the \"next\" button - specific for this step only. doneBtnText: Text to use for the \"done\" (a.k.a. the final \"next\") button - specific for this step only. |\n| └onHighlightStarted | Function | — | Callback triggered when the highlighting is about to become visible. |\n| └onHighlighted | Function | — | Callback triggered when the highlight is visible. |\n| └onDeselected | Function | — | Callback triggered when the highlight is about to become invisible. |\n| showButtons | AllowedButtons[] | [\"next\", \"previous\", \"close\"] | Array of buttons to show in the popover. Defaults to [\"next\", \"previous\", \"close\"] for product tours and [] for single element highlighting. |\n| disableButtons | AllowedButtons[] | — | Array of buttons to disable. Useful when you want to show some buttons but disable others. |\n| prevBtnText | String | Previous | Text to use for the \"previous\" buttons. |\n| nextBtnText | String | Next | Text to use for the \"next\" buttons. |\n| doneBtnText | String | Done | Text to use for the \"done\" button. |\n| showProgress | Boolean | true | Indicates whether to show progress in the onboarding popover. |\n| allowClose | Boolean | false | Whether to allow closing the popover by clicking on the backdrop. |\n| stagePadding | Number | 10 | Distance between the highlighted element and the cutout. |\n| stageRadius | Number | 5 | Radius of the cutout around the highlighted element. |\n| allowKeyboardControl | Boolean | true | Whether to allow keyboard navigation. |\n| disableActiveInteraction | Boolean | false | Whether to disable interaction with the highlighted element. Can be configured at the step level as well |\n| noBackdrop | Boolean | false | Option to disable the backdrop. The backdrop element is still there but with 100% opacity and the close on the backdrop is disabled. |\n| popoverClass | String | — | Additional classes set on the popover itself. |\n| onPopoverRender | Function | — | Callback triggered when the onboarding popover renders. |\n| onDestroyed | Function | — | Callback triggered when the onboarding tour is \"destroyed\" (dismissed). |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "Onboarding components/onboarding #components/onboarding Components Misc"
+  },
+  {
+    "id": "components/page",
+    "title": "Page",
+    "lead": null,
+    "summary": "A4",
+    "searchText": "Page\nPage\nA4\n\nLorem ipsum dolor\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page.Please make sure the element does not get stretched when using flexbox. |\n| orientation | 'portrait' \\| 'landscape' | portrait | Defines the layout of the page |\n| shadow | Boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |\n| border | Boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |\n| className | String | — | Additional classes to be set on the wrapper element |\nPage 1\n\nPage 2\n\nPage 3\n\nPage 4\n\nPage 5\n\nPage 6\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page.Please make sure the element does not get stretched when using flexbox. |\n| orientation | 'portrait' \\| 'landscape' | portrait | Defines the layout of the page |\n| shadow | Boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |\n| border | Boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |\n| className | String | — | Additional classes to be set on the wrapper element |\nPortrait\n\nLandscape\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page.Please make sure the element does not get stretched when using flexbox. |\n| orientation | 'portrait' \\| 'landscape' | portrait | Defines the layout of the page |\n| shadow | Boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |\n| border | Boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |\n| className | String | — | Additional classes to be set on the wrapper element |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "Page components/page #components/page Components Content"
+  },
+  {
+    "id": "components/pager",
+    "title": "Pager",
+    "lead": null,
+    "summary": "Pager with label",
+    "searchText": "Pager\nPager\nPager with label\n\nPrevious\nThe previous chapter\n\nNext\nThe next chapter\n\nCompact Pager without label\n\nPrevious\n\nNext\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | String / Node | — | The title or name of the section next/previous section. |\n| label | String / Node | — | The optional label for the full variant. |\n| alignRight | Boolean | false | Set right alignment for \"previous\" pager content to be aligned to the right side of the pager and the arrow on the left side. |\n| disabled | Boolean | false | Sets the pager disabled. |\n| variant | String | full | Define how large the component should be rendered. Possible values are: Pager.VARIANTFULL, Pager.VARIANTCOMPACT, full, compact |\n| onClick | Function | () ={} | Callback function for when the component is clicked. |\n| className | String | — | Additional classes for the wrapper element. |",
+    "category": "Components",
+    "section": "Navigation",
+    "boost": "Pager components/pager #components/pager Components Navigation"
+  },
+  {
+    "id": "components/pieCharts",
+    "title": "PieChart",
+    "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": "PieChart\nPieChart\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 PieChartBasistarif\nDiesel\nMaut\nZuschläge\n### PieChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| innerRadius | String \\| Number | 60 | The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 80 | The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the PieChart. |\n| dataUnit | String \\| Number | — | The unit of data displayed in the PieChart. |\n| nameKey | String | name | The key of each sector name. |\n| color | Function | — | Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page. |\n| filled | Boolean | false | Set to \"true\" if the chart should be filled. This will set the \"innerRadius\" and the \"paddingAngle\" to 0. |\n| labels | Function \\| Boolean | true | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label. |\n| innerLabels | Boolean | false | Set to \"true\" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0. |\n| paddingAngle | Number | 3 | The angle between two sectors. |\n| pieOptions | Object | — | Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart |\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 |\nPieChart with custom colorBasistarif\nDiesel\nMaut\nZuschläge\n\nFilled PieChart with inner labelsBasistarif\nDiesel\nMaut\n### PieChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| innerRadius | String \\| Number | 60 | The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 80 | The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the PieChart. |\n| dataUnit | String \\| Number | — | The unit of data displayed in the PieChart. |\n| nameKey | String | name | The key of each sector name. |\n| color | Function | — | Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page. |\n| filled | Boolean | false | Set to \"true\" if the chart should be filled. This will set the \"innerRadius\" and the \"paddingAngle\" to 0. |\n| labels | Function \\| Boolean | true | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label. |\n| innerLabels | Boolean | false | Set to \"true\" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0. |\n| paddingAngle | Number | 3 | The angle between two sectors. |\n| pieOptions | Object | — | Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart |\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 |\nPieChart with custom legendBasistarif\nDiesel\nMaut\nZuschläge\n### PieChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| innerRadius | String \\| Number | 60 | The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 80 | The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the PieChart. |\n| dataUnit | String \\| Number | — | The unit of data displayed in the PieChart. |\n| nameKey | String | name | The key of each sector name. |\n| color | Function | — | Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page. |\n| filled | Boolean | false | Set to \"true\" if the chart should be filled. This will set the \"innerRadius\" and the \"paddingAngle\" to 0. |\n| labels | Function \\| Boolean | true | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label. |\n| innerLabels | Boolean | false | Set to \"true\" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0. |\n| paddingAngle | Number | 3 | The angle between two sectors. |\n| pieOptions | Object | — | Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart |\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 |\nPieChart with a needle\n\nCustomer Satisfaction\n### PieChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| innerRadius | String \\| Number | 60 | The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 80 | The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the PieChart. |\n| dataUnit | String \\| Number | — | The unit of data displayed in the PieChart. |\n| nameKey | String | name | The key of each sector name. |\n| color | Function | — | Overwrite the way the color is taken from the data input array. Use this, if you had to rename the color prop in your data or if you want to provide the corresponding color in another way. Take the color name from the charts colors page. |\n| filled | Boolean | false | Set to \"true\" if the chart should be filled. This will set the \"innerRadius\" and the \"paddingAngle\" to 0. |\n| labels | Function \\| Boolean | true | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If set a function, the function will be called to render customized label. |\n| innerLabels | Boolean | false | Set to \"true\" if the built in inner label shall be used. This makes only sense when labels are enabled, and the chart is filled or the inner radius is set to 0. |\n| paddingAngle | Number | 3 | The angle between two sectors. |\n| pieOptions | Object | — | Detailed options passed to the underlying Pie component. Details can be found here: https://recharts.org/en-US/api/Pie |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying PieChart component. Details can be found here: https://recharts.org/en-US/api/PieChart |\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": "PieChart components/pieCharts #components/pieCharts Components Charts"
+  },
+  {
+    "id": "components/popover",
+    "title": "Popover",
+    "lead": "In order to use a Popover on an element, wrap it with the OverlayTrigger component.",
+    "summary": "In order to use a Popover on an element, wrap it with the OverlayTrigger component.",
+    "searchText": "Popover\nIn order to use a Popover on an element, wrap it with the OverlayTrigger component.\nPopover\nFor positioning Popovers and Tooltips we use Popper.js that is integrated into the OverlayTrigger. For controlling the position or behavior use the popperConfig attribute.\nPopover on top\nPopover on right\nPopover on bottom\nPopover on left\n### Popover\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An html id attribute, necessary for accessibility. |\n| placement | 'auto' \\| 'top' \\| 'right' \\| 'bottom' \\| 'left' | — | Sets the direction the Popover is positioned towards. This is generally provided by the OverlayTrigger component positioning the Popover. Possible values are: auto, top, bottom, right orleft |\n| title | String / Node | — | Any element to be rendered as the title of the Popover. It creates a Popover.Title inside the Popover passing the title directly into it. |\n| titleClassName | String | — | Additional classes to be set on the Popover.Title element. |\n| contentClassName | String | — | Additional classes to be set on the Popover.Content element. |\n### OverlayTrigger\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| trigger | 'click' \\| 'hover' \\| 'focus' | hover | Specify which action or actions trigger Overlay visibility. Possible values are: OverlayTrigger.TRIGGERCLICK , OverlayTrigger.TRIGGERHOVER, OverlayTrigger.TRIGGER_HOVER or 'click', 'hover', 'focus' |\n| delay | Number / Object | — | A millisecond delay amount to show and hide the Overlay once triggered. |\n| └show | Number | — | A millisecond delay amount before showing the Overlay once triggered. |\n| └hide | Number | — | A millisecond delay amount before hiding the Overlay once triggered. |\n| defaultShow | Boolean | — | The initial visibility state of the Overlay. For more nuanced visibility control, consider using the Overlay component directly. |\n| overlay | Node | — | An element or text to overlay next to the target. |\n| placement | String | — | Sets the direction the overlay is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |\n| popperConfig | Object | — | A Popper.js config object passed to the the underlying popper instance. |\nExtended example\nClick Me\n### Popover\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An html id attribute, necessary for accessibility. |\n| placement | 'auto' \\| 'top' \\| 'right' \\| 'bottom' \\| 'left' | — | Sets the direction the Popover is positioned towards. This is generally provided by the OverlayTrigger component positioning the Popover. Possible values are: auto, top, bottom, right orleft |\n| title | String / Node | — | Any element to be rendered as the title of the Popover. It creates a Popover.Title inside the Popover passing the title directly into it. |\n| titleClassName | String | — | Additional classes to be set on the Popover.Title element. |\n| contentClassName | String | — | Additional classes to be set on the Popover.Content element. |\n### OverlayTrigger\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| trigger | 'click' \\| 'hover' \\| 'focus' | hover | Specify which action or actions trigger Overlay visibility. Possible values are: OverlayTrigger.TRIGGERCLICK , OverlayTrigger.TRIGGERHOVER, OverlayTrigger.TRIGGER_HOVER or 'click', 'hover', 'focus' |\n| delay | Number / Object | — | A millisecond delay amount to show and hide the Overlay once triggered. |\n| └show | Number | — | A millisecond delay amount before showing the Overlay once triggered. |\n| └hide | Number | — | A millisecond delay amount before hiding the Overlay once triggered. |\n| defaultShow | Boolean | — | The initial visibility state of the Overlay. For more nuanced visibility control, consider using the Overlay component directly. |\n| overlay | Node | — | An element or text to overlay next to the target. |\n| placement | String | — | Sets the direction the overlay is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |\n| popperConfig | Object | — | A Popper.js config object passed to the the underlying popper instance. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "Popover components/popover #components/popover Components Misc"
+  },
+  {
+    "id": "components/position",
+    "title": "Position",
+    "lead": "A helper component to format a latitude / longitude position.",
+    "summary": "A helper component to format a latitude / longitude position.",
+    "searchText": "Position\nA helper component to format a latitude / longitude position.\nPosition\nN48° 8.246′ E11° 34.529′N52° 7.394′ W12° 14.054′\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| latitude | Number | — |  |\n| longitude | Number | — |  |\n| address | String | — | Can be used to override the default output |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "Position components/position #components/position Components Misc"
+  },
+  {
+    "id": "components/radialBarCharts",
+    "title": "RadialBarChart",
+    "lead": null,
+    "summary": "Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.",
+    "searchText": "RadialBarChart\nRadialBarChart\nNote: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.\nMultiple RadialBarChart barsAge 18-24\nAge 25-29\nAge 30-34\nAge 35-39\n\n67%Registrations\n56%Logins\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nCircle RadialBarChart with built-in text82%\n\n82\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nFull circle RadialBarChart with custom text\n\nFuel level\n24%\n\nCharge level\n38%\n\nOpen RadialBarChart with custom text\n\nLorem ipsum\n80\n\nLorem ipsum dolor sit amet\n67\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nExample for error visualizationMost reported problems\n\n43%\n\nApp\n\n37%\n\nWebsite\n\n20%\n\nServer Connection\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nRadialBarChart with a needle\n\nFuel level\n24%\n\nCharge level\n38%\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nCircle RadialBarChart as progress steps\n\nNot Started\nLorem ipsum dolor sit amet\n\nInitial Step\nLorem ipsum dolor sit amet\n\nSecond Step\nLorem ipsum dolor sit amet\n\nFinal Step\nLorem ipsum dolor sit amet\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nRadialBarChart with changing data1%\n\nStart\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |",
+    "category": "Components",
+    "section": "Charts",
+    "boost": "RadialBarChart components/radialBarCharts #components/radialBarCharts Components Charts"
+  },
+  {
+    "id": "components/radiobutton",
+    "title": "RadioButton",
+    "lead": "NoteWhen using the custom option, make sure to wrap the children with the class name radio-text-wrapper. For using the radio tick, use an element with class name radio-text.",
+    "summary": "NoteWhen using the custom option, make sure to wrap the children with the class name radio-text-wrapper. For using the radio tick, use an element with class name radio-text.",
+    "searchText": "RadioButton\nNoteWhen using the custom option, make sure to wrap the children with the class name radio-text-wrapper. For using the radio tick, use an element with class name radio-text.\nRadioButton\nOption one is selected by default\nOption two can be something else and selecting it will deselect option one\nOption three is disabled\n123\nKm\nMiles\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | String / Node | — | Defines the label text. |\n| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |\n| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |\n| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |\n| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith other radio buttons. |\n| right | Boolean | false | Displays the icon on the right side of the text. |\n| custom | Boolean | false | Allows for rendering a completely different layout with or without a radio tick. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| inputRef | Ref | — | Ref which is added to the input element. |\n| onClick | Function | () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | Function | () ={} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |\n| className | String | — | Additional classes to be set on the input element. |\n| children | any | — | Any element to be rendered inside the text element. |\n| icon | String | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconSize | Number | — | The icon Size in px. |\n| name | String | — | Name to be given to the input element. |\n| iconLabelPosition | String | — | The label position. Possible values are: \"horizontal\" or \"vertical\". |\nControlled example\nOption 1Option 2Option 3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | String / Node | — | Defines the label text. |\n| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |\n| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |\n| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |\n| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith other radio buttons. |\n| right | Boolean | false | Displays the icon on the right side of the text. |\n| custom | Boolean | false | Allows for rendering a completely different layout with or without a radio tick. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| inputRef | Ref | — | Ref which is added to the input element. |\n| onClick | Function | () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | Function | () ={} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |\n| className | String | — | Additional classes to be set on the input element. |\n| children | any | — | Any element to be rendered inside the text element. |\n| icon | String | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconSize | Number | — | The icon Size in px. |\n| name | String | — | Name to be given to the input element. |\n| iconLabelPosition | String | — | The label position. Possible values are: \"horizontal\" or \"vertical\". |\nRadioButton with FormData\nPlease contact me viaEmailPhone\nSubmit selectionSelected value-\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | String / Node | — | Defines the label text. |\n| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |\n| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |\n| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |\n| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith other radio buttons. |\n| right | Boolean | false | Displays the icon on the right side of the text. |\n| custom | Boolean | false | Allows for rendering a completely different layout with or without a radio tick. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| inputRef | Ref | — | Ref which is added to the input element. |\n| onClick | Function | () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | Function | () ={} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |\n| className | String | — | Additional classes to be set on the input element. |\n| children | any | — | Any element to be rendered inside the text element. |\n| icon | String | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconSize | Number | — | The icon Size in px. |\n| name | String | — | Name to be given to the input element. |\n| iconLabelPosition | String | — | The label position. Possible values are: \"horizontal\" or \"vertical\". |\nCustom cards example\nNote: When using the custom option, make sure to wrap the children with the class name radio-text-wrapper. For using the radio tick, use an element with class name radio-text.\nOption 1\nThis option is a first option\n\nOption 2\nThis option is a second option\n\nOption 3\nThis option is a third option\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | String / Node | — | Defines the label text. |\n| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |\n| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |\n| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |\n| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith other radio buttons. |\n| right | Boolean | false | Displays the icon on the right side of the text. |\n| custom | Boolean | false | Allows for rendering a completely different layout with or without a radio tick. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| inputRef | Ref | — | Ref which is added to the input element. |\n| onClick | Function | () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | Function | () ={} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |\n| className | String | — | Additional classes to be set on the input element. |\n| children | any | — | Any element to be rendered inside the text element. |\n| icon | String | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconSize | Number | — | The icon Size in px. |\n| name | String | — | Name to be given to the input element. |\n| iconLabelPosition | String | — | The label position. Possible values are: \"horizontal\" or \"vertical\". |\nCustom stacked example\nOption 1\nThis option is a first option\n\nOption 2 (disabled)\nThis option is a second option\n\nOption 3\nThis option is a third option\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | String / Node | — | Defines the label text. |\n| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |\n| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |\n| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |\n| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith other radio buttons. |\n| right | Boolean | false | Displays the icon on the right side of the text. |\n| custom | Boolean | false | Allows for rendering a completely different layout with or without a radio tick. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| inputRef | Ref | — | Ref which is added to the input element. |\n| onClick | Function | () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | Function | () ={} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |\n| className | String | — | Additional classes to be set on the input element. |\n| children | any | — | Any element to be rendered inside the text element. |\n| icon | String | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconSize | Number | — | The icon Size in px. |\n| name | String | — | Name to be given to the input element. |\n| iconLabelPosition | String | — | The label position. Possible values are: \"horizontal\" or \"vertical\". |\nCustom list example\nVehicle type\nTruck\n\nTrailer\n\nBus\n\nVan\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | String / Node | — | Defines the label text. |\n| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |\n| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |\n| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |\n| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith other radio buttons. |\n| right | Boolean | false | Displays the icon on the right side of the text. |\n| custom | Boolean | false | Allows for rendering a completely different layout with or without a radio tick. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| inputRef | Ref | — | Ref which is added to the input element. |\n| onClick | Function | () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | Function | () ={} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |\n| className | String | — | Additional classes to be set on the input element. |\n| children | any | — | Any element to be rendered inside the text element. |\n| icon | String | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconSize | Number | — | The icon Size in px. |\n| name | String | — | Name to be given to the input element. |\n| iconLabelPosition | String | — | The label position. Possible values are: \"horizontal\" or \"vertical\". |\nCustom example without the tick\n4 GB\n8 GB\n16 GB\n32 GB\n64 GB\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | String / Node | — | Defines the label text. |\n| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |\n| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |\n| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |\n| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith other radio buttons. |\n| right | Boolean | false | Displays the icon on the right side of the text. |\n| custom | Boolean | false | Allows for rendering a completely different layout with or without a radio tick. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| inputRef | Ref | — | Ref which is added to the input element. |\n| onClick | Function | () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | Function | () ={} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |\n| className | String | — | Additional classes to be set on the input element. |\n| children | any | — | Any element to be rendered inside the text element. |\n| icon | String | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconSize | Number | — | The icon Size in px. |\n| name | String | — | Name to be given to the input element. |\n| iconLabelPosition | String | — | The label position. Possible values are: \"horizontal\" or \"vertical\". |\nRadioButton with custom icon\nTruckBusTrailer\nTruckBusVanTrailer\n6 Month\n\n12 Month\nSave 15%\n\n24 Month\nSave 25%\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | String / Node | — | Defines the label text. |\n| defaultChecked | Boolean | — | Defines whether the radio is initially checked or not (state can be changed on click). |\n| checked | Boolean | — | Defines whether the radio is checked or not (for controlled usage). |\n| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |\n| inline | Boolean | false | Defines whether the radio button is applying an inline style. Use this in combinationwith other radio buttons. |\n| right | Boolean | false | Displays the icon on the right side of the text. |\n| custom | Boolean | false | Allows for rendering a completely different layout with or without a radio tick. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| inputRef | Ref | — | Ref which is added to the input element. |\n| onClick | Function | () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | Function | () ={} | Callback function that is invoked when the radio button is clicked and the state changes (for controlled usage). |\n| className | String | — | Additional classes to be set on the input element. |\n| children | any | — | Any element to be rendered inside the text element. |\n| icon | String | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconSize | Number | — | The icon Size in px. |\n| name | String | — | Name to be given to the input element. |\n| iconLabelPosition | String | — | The label position. Possible values are: \"horizontal\" or \"vertical\". |",
+    "category": "Components",
+    "section": "Interaction",
+    "boost": "RadioButton components/radiobutton #components/radiobutton Components Interaction"
+  },
+  {
+    "id": "components/releaseNotes",
+    "title": "ReleaseNotes",
+    "lead": "Component to render release notes in a standardized manner.",
+    "summary": "Component to render release notes in a standardized manner.",
+    "searchText": "ReleaseNotes\nComponent to render release notes in a standardized manner.\nReleaseNotes\n1.1.023.07.2018\n\nMap view within the tour history table\n• Modern map design as used in the Beta of the fleet monitor\n• Works with all event types\n• Event specific map marker\n• Map size adjustable via slider\n\n1.0.027.06.2018\n\nNew feature XYZ has been added ...\n\nfixed bugs in ...\n\nAnother feature has been added",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "ReleaseNotes components/releaseNotes #components/releaseNotes Components Misc"
+  },
+  {
+    "id": "components/resizer",
+    "title": "Resizer",
+    "lead": "A helper component to allow elements to resize.",
+    "summary": "A helper component to allow elements to resize.",
+    "searchText": "Resizer\nA helper component to allow elements to resize.\nResizer\nNote: When the resizer position is set to left or top you also need to position your elements on screen accordingly. Otherwise, the browser will set the height or width and expands in the opposite direction\nHorizontal (default):\n\nVertical (with child element as handle):\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| direction | String | Resizer.HORIZONTAL | Defines on which axis to resize. Possible values are: Resizer.HORIZONTAL Resizer.VERTICAL or 'x' 'y' |\n| position | String | Resizer.RIGHT | Defines where the resize handle is positioned relative to the element to resize. Possible values are: Resizer.LEFT Resizer.RIGHT Resizer.TOP Resizer.BOTTOM or 'left' 'right' 'top' 'bottom' |\n| onResizeStart | Function | — | Callback when the resize starts, means when the handle is pressed. It returns the respective event. |\n| onResizeEnd | Function | — | Callback when the resize ends, means when the handle is released. It returns the respective event. |\n| onResize | Function | — | Callback when the resize handle is moved. The function returns the distant between the last position and the mouse movement. Means you can either subtract or add this diff to the elements width you want to change. |\n| className | String | — | Additional classes to be set on the wrapper element. |\n| children | any | — | Any element to be rendered inside the resizer handle. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "Resizer components/resizer #components/resizer Components Misc"
+  },
+  {
+    "id": "components/responsiveColumnStripe",
+    "title": "ResponsiveColumnStripe",
+    "lead": "The ResponsiveColumnStripe component is designed to work with any list of items. The individual items are spread equally according to the available space. The component is totally customizable and does not style the individual items to give maximum flexibility.",
+    "summary": "The ResponsiveColumnStripe component is designed to work with any list of items. The individual items are spread equally according to the available space. The component is totally customizable and does not style the individual items to give maximum flexibility.",
+    "searchText": "ResponsiveColumnStripe\nThe ResponsiveColumnStripe component is designed to work with any list of items. The individual items are spread equally according to the available space. The component is totally customizable and does not style the individual items to give maximum flexibility.\nResponsiveColumnStripe\nNote: It is mandatory to set the key attribute for the individual items. If they are not set or when they are not unique the calculation of how many items to show on which page wont work. In case a custom component is used as item, wrap it in a native DOM element and set the key to the wrapping element.\nResponsiveColumnStripe with minColumns 2 and maxColumns 5\nItem 1\nItem 2\nItem 3\nItem 4\nItem 5\n\nResponsiveColumnStripe as \"ul\" with minColumns 1 and maxColumns 4\nItem 1\nItem 2\nItem 3\nItem 4\n\nResponsiveColumnStripe as \"ul\" with minColumns 1, maxColumns 5, and no animation\nFriday\n14.01.2023\n\nShipments4\nPlanned0\n\nMonday\n17.01.2023\n\nShipments4\nPlanned0\n\nThuesday\n18.01.2023\n\nShipments4\nPlanned0\n\nWednesday\n19.01.2023\n\nShipments4\nPlanned0\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minColumnWith | Number | 300 | The minimum width in pixel of a single column. This value determines how many columns are shown per page depending on the parent width. |\n| minColumns | Number | 1 | The minimum amount of columns that should be shown per page. |\n| maxColumns | Number | 5 | The maximum amount of columns that should be shown per page. |\n| stretchLastItems | Boolean | false | Defines whether the items on the last page are stretched out to fill the space. |\n| activePage | Number | 0 | The page that shall be shown. This can be used to control the pages from outside. |\n| asType | String | div | The DOM element type of the wrapping column element. If you need a list, this might be set to \"ul\". |\n| disableAnimation | Boolean | false | Set to true to skip animating pages. |\n| onPreviousClick | (pageNumber: number, columnsPerPage: number) =void | — | Callback function for when the previous page is clicked. |\n| onNextClick | (pageNumber: number, columnsPerPage: number) =void | — | Callback function for when the next page is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| columnsWrapperClassName | String | — | Additional classes set to the component wrapper element. |\n| className | String | — | Additional classes set to the column wrapper element. |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "ResponsiveColumnStripe components/responsiveColumnStripe #components/responsiveColumnStripe Components Content"
+  },
+  {
+    "id": "components/responsiveVideo",
+    "title": "Responsive Video",
+    "lead": null,
+    "summary": "Responsive Video 16x9",
+    "searchText": "Responsive Video\nResponsive Video\nResponsive Video 16x9\n\nResponsive Video 4x3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| src | String | — | The link to the source of the video file. |\n| aspectRatio | String | ResponsiveVideo.ASPECTRATIO16BY9 | Defined the aspect ratio of the video. Possible values are: ResponsiveVideo.ASPECTRATIO4BY3, ResponsiveVideo.ASPECTRATIO16BY9 or '4by3', '16by9' |\n| allowFullScreen | Boolean | true | Allows the fullscreen feature of the underlying embedded iframe. |\n| className | String | — | Additional classes added to the wrapping element. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "Responsive Video components/responsiveVideo #components/responsiveVideo Components Misc"
+  },
+  {
+    "id": "components/rioglyph",
+    "title": "Rioglyph",
+    "lead": "The Rioglyph component is a React wrapper for the Rioglyph icon set. It provides a convenient and type-safe way to render icons without directly dealing with the utility classnames.",
+    "summary": "The Rioglyph component is a React wrapper for the Rioglyph icon set. It provides a convenient and type-safe way to render icons without directly dealing with the utility classnames.",
+    "searchText": "Rioglyph\nThe Rioglyph component is a React wrapper for the Rioglyph icon set. It provides a convenient and type-safe way to render icons without directly dealing with the utility classnames.\nRioglyph\nIn addition to rendering a single icon, the component supports built-in features such as spinning and pulsing animations, as well as paired icons for combining multiple glyphs into one semantic symbol.\n\nThe complete list of available icons and their names can be found in the icon library.\nSingle rioglyph icon\n\nSingle rioglyph icon with custom styles\n\nSingle rioglyph icon with spinning animation\n\nSingle rioglyph icon with pulsing animation\n\nPaired rioglyph icon\n\nDisabled styling\n\nCustom external svg icon\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | string | — | The rioglyph icon string OR an external .svg link |\n| iconClassName | string | — | Additional classes set to the icon. |\n| size | string | — | The possible values are: h1, h2, h3, h4, h5, h6 as well as the following size values 10, 11, 12, 14, 16, 18, 20 |\n| spinning | boolean | — | Uses the spinning animation. |\n| pulsing | boolean | — | Uses the pulsing animation. |\n| pairIcon | string | — | The rioglyph icon string OR an external .svg link |\n| pairIconClassName | string | — | Additional classes set to the pairIcon. |\n| filled | boolean | — | Add a round background to the icon |\n| disabled | boolean | — | Add a disabled line |\n| disabledInverse | boolean | — | Flip the disabled line |\n| disabledDanger | boolean | — | Recolor the disabled line to the danger color |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "Rioglyph components/rioglyph #components/rioglyph Components Misc"
+  },
+  {
+    "id": "components/rules",
+    "title": "RulesWrapper, RuleContainer and RuleConnector",
+    "lead": null,
+    "summary": "Default Example (interactive)Why should the rule be triggered?",
+    "searchText": "RulesWrapper, RuleContainer and RuleConnector\nRulesWrapper, RuleContainer and RuleConnector\nDefault Example (interactive)Why should the rule be triggered?\nMileage\n\nSpeed\n\nEngine Speed\n\nWhen should the rule be triggered?\nImmediately\n\nWhen all conditions apply for at least\n### RuleContainer\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | true | Defines whether the container is shown. |\n| unchecked | Boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |\n| background | String | bg-lightest | The box background class name. |\n| borderColor | String | — | The border color class name. |\n| hideConnector | Boolean | false | Defines whether the connector is shown. |\n| customConnector | String \\| Node | — | Overwrites the default connector. |\n| className | String | — | Additional classes for the wrapper element. |\n### RuleConnector\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placement | String | center | The placement for the connector. Possible values are \"start\", \"center\" and \"end\". |\n| icon | String | rioglyph-plus | The rioglyph icon name. |\n| hidden | Boolean | false | Defines whether the connector is shown. |\n| background | String | bg-lightest | Background color of the connector itself. |\n| pageBackground | String | bg-white | Background color of the surrounding area where the rule containers are placed. |\n| contentClassName | String | text-color-light | Classes to be set on the connector content. |\n| hasBorder | Boolean | false | Defines whether the connector has a border. |\n| borderColor | String | — | The border color class name. |\n| className | String | — | Additional classes for the wrapper element. |\nDefault Example with morde conditions - (static)Mileage is greater than\nkm\n\nWhich additional conditions should count for this rule?\n\nWhy should the rule be triggered?\nCategory AMileage\n\nFuel Level\n\nEngine speed\n\nDriving/standing\n\nCategory BRemaining daily driving time\n\nRemaining weekly driving time\n\nDaily driving time\n\nWeekly driving time\n\nCategory CDriver Card\n\nPower take-off\n\nInside/Outside geofence\n\nInside/Outside Country\n\nWhen should the rule be triggered?Immediately\n\nWhen all conditions apply for at least\n### RuleContainer\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | true | Defines whether the container is shown. |\n| unchecked | Boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |\n| background | String | bg-lightest | The box background class name. |\n| borderColor | String | — | The border color class name. |\n| hideConnector | Boolean | false | Defines whether the connector is shown. |\n| customConnector | String \\| Node | — | Overwrites the default connector. |\n| className | String | — | Additional classes for the wrapper element. |\n### RuleConnector\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placement | String | center | The placement for the connector. Possible values are \"start\", \"center\" and \"end\". |\n| icon | String | rioglyph-plus | The rioglyph icon name. |\n| hidden | Boolean | false | Defines whether the connector is shown. |\n| background | String | bg-lightest | Background color of the connector itself. |\n| pageBackground | String | bg-white | Background color of the surrounding area where the rule containers are placed. |\n| contentClassName | String | text-color-light | Classes to be set on the connector content. |\n| hasBorder | Boolean | false | Defines whether the connector has a border. |\n| borderColor | String | — | The border color class name. |\n| className | String | — | Additional classes for the wrapper element. |\nCustom Example\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\nAND\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\nOR\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### RuleContainer\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | Boolean | true | Defines whether the container is shown. |\n| unchecked | Boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |\n| background | String | bg-lightest | The box background class name. |\n| borderColor | String | — | The border color class name. |\n| hideConnector | Boolean | false | Defines whether the connector is shown. |\n| customConnector | String \\| Node | — | Overwrites the default connector. |\n| className | String | — | Additional classes for the wrapper element. |\n### RuleConnector\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placement | String | center | The placement for the connector. Possible values are \"start\", \"center\" and \"end\". |\n| icon | String | rioglyph-plus | The rioglyph icon name. |\n| hidden | Boolean | false | Defines whether the connector is shown. |\n| background | String | bg-lightest | Background color of the connector itself. |\n| pageBackground | String | bg-white | Background color of the surrounding area where the rule containers are placed. |\n| contentClassName | String | text-color-light | Classes to be set on the connector content. |\n| hasBorder | Boolean | false | Defines whether the connector has a border. |\n| borderColor | String | — | The border color class name. |\n| className | String | — | Additional classes for the wrapper element. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "RulesWrapper, RuleContainer and RuleConnector components/rules #components/rules Components Misc"
+  },
+  {
+    "id": "components/saveableInput",
+    "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. |",
+    "category": "Components",
+    "section": "Interaction",
+    "boost": "SaveableInput components/saveableInput #components/saveableInput Components Interaction"
+  },
+  {
+    "id": "components/selects",
+    "title": "Select",
+    "lead": "The Select and Multiselect components are form controls and are intended to be used within forms. They are designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.",
+    "summary": "The Select and Multiselect components are form controls and are intended to be used within forms. They are designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.",
+    "searchText": "Select\nThe Select and Multiselect components are form controls and are intended to be used within forms. They are designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.\nSelect\nThis component allows the selection of a single element from provided list.\nNotification callbackPlease selectOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nwith pre-selected itemOption 3Option 1\nOption 2\nOption 3\n\nwith disabled item and group headerPlease selectOption 1\nOption 2\nHeader\nOption 4\n\nwith filterTruckTruck\nVan\nBus\n\nwith labelVehicle:TruckTruck\nVan\nBus\n\nwith inputOption 3Option 1\nOption 2\nOption 3\n\nwith clear buttonOption 3Option 1\nOption 2\nOption 3\n\nwith \"dropup\"Option 3Option 1\nOption 2\nOption 3\n\nDisabledPlease select\n\nWith icon rendered in an inputAddon\nPlease select\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nwith truncated labelSelect with a very long label to demonstrate truncating inner text with ellipsisSelect with a very long label to demonstrate truncating inner text with ellipsis\nLabel 1\nLabel 2\n\nwith \"pullRight\" on small selectsOption 1Option 1\nOption 2\nOption 3 with a very long label for demonstration\n\nOption 1Option 1\nOption 2\nOption 3 with a very long label for demonstration\n\nwith \"pullRight\" and \"width-auto\"Option 1Option 1\nOption 2\nOption 3 with a very long label for demonstration\n\nwith custom sizesOption 1Option 1\nOption 2\nOption 3\nOption 4\n\nOption 1Option 1\nOption 2\nOption 3\nOption 4\n\nOption 1Option 1\nOption 2\nOption 3\nOption 4\n\nwith external error feedbackOption 3Option 1\nOption 2\nOption 3\n\nThis is an error message\nwith built-in error feedback\nOption 3This is an error message\n\nOption 1\nOption 2\nOption 3\n\nwith custom button classesOption 3Option 1\nOption 2\nOption 3\n\nOption 3Option 1\nOption 2\nOption 3\n\nOption 3Option 1\nOption 2\nOption 3\n\nwith icons onlyOption 1\nOption 2\nOption 3\nOption 4\n\nOption 1\nOption 2\nOption 3\nOption 4\n\nwith loading spinnerPlease select\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| label | String / Node | — | The label in front of the selected text. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| useClear | Boolean | false | Set to show a clear button |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| selectedOptionText | String / Node | — | Text or node to be rendered on the toggle select instead of the selected item label. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nSelect with controlled valuePlease selectOption 1\nOption 2\nOption 3\n\nSelect option 3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| label | String / Node | — | The label in front of the selected text. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| useClear | Boolean | false | Set to show a clear button |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| selectedOptionText | String / Node | — | Text or node to be rendered on the toggle select instead of the selected item label. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nSelect with deferred loaded optionsPlease select\n\nLoad options\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| label | String / Node | — | The label in front of the selected text. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| useClear | Boolean | false | Set to show a clear button |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| selectedOptionText | String / Node | — | Text or node to be rendered on the toggle select instead of the selected item label. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |",
+    "category": "Components",
+    "section": "Selection",
+    "boost": "Select components/selects #components/selects Components Selection"
+  },
+  {
+    "id": "components/sidebar",
+    "title": "Sidebar",
+    "lead": "There are 2 kinds of Sidebars. The default fluid and the fly variant.",
+    "summary": "There are 2 kinds of Sidebars. The default fluid and the fly variant.",
+    "searchText": "Sidebar\nThere are 2 kinds of Sidebars. The default fluid and the fly variant.\nSidebar\nSidebars have to be wrapped in ApplicationLayout.Sidebar and for floating reasons they have to be placed before ApplicationLayout.Body.\n\nYou can add the class right to the ApplicationLayout.Sidebar to have the sidebars rendered on the right side of the screen.\n\nFor more information about the ApplicationLayout see here\nLeft sidebars\nResizable fly Sidebar:Toggle Sidebar\n\nRight sidebars\nResizable fluid Sidebar with resize limits and custom header button:Toggle Sidebar\nFly Sidebar which overlays content:Toggle Sidebar\nFly Sidebar with custom width and visible backdrop:Toggle Sidebar\nSidebar which switches mode automatically on defined breakpoint between fly and fluid:Toggle Sidebar\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| closed | boolean | false | Defines whether the component is hidden or not. |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | false | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| position | string | Sidebar.LEFT | Tells the sidebar where it is positioned. This will affect the resizing behavior respectively. Possible values are: Sidebar.LEFT, Sidebar.RIGHT or 'left''right' |\n| width | number | 350 | Defines the width of the component. The value is set as pixel value as inline style. |\n| minWidth | number | 100 | Defines the minimum width in px of the component that will take effect when resizing. |\n| maxWidth | number | 800 | Defines the maximum width in px of the component that will take effect when resizing. |\n| switchModeBreakpoint | number | 0 | Defines the breakpoint in pixel when the sidebar mode shall be changed. If the window width is lower than the given breakpoint the mode is set to fly. If the window width is higher the mode is set to fluid. This functionality is disabled by default and will be enabled when defining a breakpoint higher than 0. |\n| title | string \\| ReactNode | — | Content that will be displayed in the components header. |\n| footer | string \\| ReactNode | — | The Footer content. For example a save button. |\n| onClose | VoidFunction | () ={} | Callback function triggered when clicking the close icon. |\n| disableClose | boolean | false | Hides the close button. This may be used when the sidebar is always visible and may not be closed. |\n| openInFullscreen | boolean | false | Opens Sidebar in fullscreen, means 100vw. |\n| onFullScreenChange | (newFullscreenState: boolean) =void | () ={} | Callback for when the fullscreen is toggled. |\n| enableFullscreenToggle | boolean | false | Enables the fullscreen functionality and shows the fullscreen toggle. |\n| fullscreenToggleTooltip | string | — | Translated tooltip text for the fullscreen toggle button. |\n| disableEsc | boolean | false | By default the fullscreen mode can be left with \"esc\". If this is unwanted it can be disabled. |\n| className | string | — | Additional classes added on the wrapper element. |\n| headerClassName | string | — | Additional classes added to the Sidebar header. |\n| showHeaderBorder | boolean | — | Shows a sidebar header border |\n| titleClassName | string | — | Additional classes added to the Sidebar title. |\n| bodyClassName | string | — | Additional classes added to the Sidebar body. |\n| footerClassName | string | — | Additional classes added to the Sidebar footer. |\n| bodyRef | React.MutableRefObject<object| — | Additional ref added to the Sidebar body. |\n| hasBackdrop | boolean | false | Defined whether or not a backdrop will be rendered behind the Sidebar to avoid clicks outside. |\n| hasSmoothScrollbar | boolean | false | Defined whether or not the UIKIT SmoothScrollbar is active |\n| makeBackdropVisible | boolean | false | Defined whether or not the backdrop is visible similar to the backdrop for modal dialogs. |\n| onBackdropClick | VoidFunction | () ={} | Callback for when the backdrop is clicked. This comes in handy when handling transient data from the sidebar which need to be saved first and handle clicks outside. |\n| backdropClassName | string | — | Additional classes added to the Sidebar backdrop. |\n| headerButtons | Node | — | Additional buttons to be rendered in the header. |\n| children | any | — | Any element to be rendered inside the body element. |",
+    "category": "Components",
+    "section": "Application",
+    "boost": "Sidebar components/sidebar #components/sidebar Components Application"
+  },
+  {
+    "id": "components/sliders",
+    "title": "Slider",
+    "lead": null,
+    "summary": "Standard Slider",
+    "searchText": "Slider\nSlider\nStandard Slider\n\nColored Slider\n\nSlider with value label\n17\n\nDisabled Slider\n\nUsing the onCange callback\n\nLarge value labels and a hidden bar\n50 %\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | Number | 0 | The current value. |\n| minValue | Number | 0 | The lower limit. |\n| maxValue | Number | Number.MAX_VALUE | The upper limit. |\n| valueLabels | Boolean | false | Whether to show the value labels. |\n| largeValueLabels | Boolean | false | Whether to show larger value labels instead of the normal ones. |\n| valueLabelUnit | String | — | Additional unit used for the slider value label. |\n| hideValueBar | Boolean | false | Whether to hide the dark-colored value bar. |\n| step | Number | 1 | Selector step value. |\n| color | String | 'primary' | Defines the color of the slider. Possible values are:'primary', 'secondary', 'info', 'success', 'warning' or 'danger'. |\n| disabled | Boolean | false | Disables all pointer-events. |\n| onChange | (newValue: number) =void | () ={} | Callback to get the new value every time it changes. |\n| onDragEnd | (newValue: number) =void | () ={} | Callback to get the value after the slider ended dragging. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nRangeSlider\nStandard RangeSlider\n\nRangeSlider with value labels\n150 €\n400 €\n\nDisabled RangeSlider\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| leftValue | Number | — | The current left value of the selected range. |\n| rightValue | Number | — | The current right value of the selected range. |\n| minValue | Number | 0 | The lower limit. |\n| maxValue | Number | Number.MAX_VALUE | The upper limit. |\n| valueLabels | Boolean | false | Whether to show the value labels. |\n| valueLabelUnit | String | — | Additional unit used for the slider value label. |\n| step | Number | 1 | Selector step value. |\n| color | String | 'primary' | Defines the color of the slider. Possible values are:'primary', 'secondary', 'info', 'success', 'warning' or 'danger'. |\n| disabled | Boolean | false | Disables all pointer-events. |\n| onChange | (newLeft: number, newRight: number) =void | () ={} | Callback to get the new value every time it changes. |\n| onDragEnd | (newLeft: number, newRight: number) =void | () ={} | Callback to get the value after the slider ended dragging. |\n| className | String | — | Additional classes to be set on the wrapper element. |",
+    "category": "Components",
+    "section": "Interaction",
+    "boost": "Slider components/sliders #components/sliders Components Interaction"
+  },
+  {
+    "id": "components/smoothScrollbars",
+    "title": "SmoothScrollbars",
+    "lead": null,
+    "summary": "Note: SmoothScrollbars only work for elements with a certain height.Padding cannot be part of the SmoothScrollbars element and must be added to the child.Mac scrollbars are only visible if a hardware mouse is connected.",
+    "searchText": "SmoothScrollbars\nSmoothScrollbars\nNote: SmoothScrollbars only work for elements with a certain height.Padding cannot be part of the SmoothScrollbars element and must be added to the child.Mac scrollbars are only visible if a hardware mouse is connected.\nAlways visible\ndefault\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.\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| slideIn | Boolean | false | Defines whether the scrollbars should slide in on hover |\n| largeTrack | Boolean | false | Defines whether the scrollbars should be slightly larger |\n| trackOffset | Boolean | false | Defines whether the scrollbars should have an offset |\n| className | String | — | Additional classes to be set on the wrapper element |\nSlide in on hover\nslideIn\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.\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| slideIn | Boolean | false | Defines whether the scrollbars should slide in on hover |\n| largeTrack | Boolean | false | Defines whether the scrollbars should be slightly larger |\n| trackOffset | Boolean | false | Defines whether the scrollbars should have an offset |\n| className | String | — | Additional classes to be set on the wrapper element |\nLarger track\nlargeTrack\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.\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| slideIn | Boolean | false | Defines whether the scrollbars should slide in on hover |\n| largeTrack | Boolean | false | Defines whether the scrollbars should be slightly larger |\n| trackOffset | Boolean | false | Defines whether the scrollbars should have an offset |\n| className | String | — | Additional classes to be set on the wrapper element |\nTrack with offset\ntrackOffset\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.\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| slideIn | Boolean | false | Defines whether the scrollbars should slide in on hover |\n| largeTrack | Boolean | false | Defines whether the scrollbars should be slightly larger |\n| trackOffset | Boolean | false | Defines whether the scrollbars should have an offset |\n| className | String | — | Additional classes to be set on the wrapper element |\nHorizontal Example\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| slideIn | Boolean | false | Defines whether the scrollbars should slide in on hover |\n| largeTrack | Boolean | false | Defines whether the scrollbars should be slightly larger |\n| trackOffset | Boolean | false | Defines whether the scrollbars should have an offset |\n| className | String | — | Additional classes to be set on the wrapper element |\nFull Example\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| slideIn | Boolean | false | Defines whether the scrollbars should slide in on hover |\n| largeTrack | Boolean | false | Defines whether the scrollbars should be slightly larger |\n| trackOffset | Boolean | false | Defines whether the scrollbars should have an offset |\n| className | String | — | Additional classes to be set on the wrapper element |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "SmoothScrollbars components/smoothScrollbars #components/smoothScrollbars Components Misc"
+  },
+  {
+    "id": "components/spinners",
+    "title": "Spinner",
+    "lead": null,
+    "summary": "Default Spinner",
+    "searchText": "Spinner\nSpinner\nDefault Spinner\n\nDouble sized Spinner\n\nWith loading text\n\nLoading\n\nFull sized Spinner (doesn't render without \"show\")\nInline Spinner\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isInverse | Boolean | false | Defines whether the spinner is shown on bright or dark background. |\n| isDoubleSized | Boolean | false | If set to \"true\" the spinner will be rendered twice as big. |\n| isFullSized | Boolean | false | Renders the spinner as overlay in full-size mode, relative to the parent container. Set the parent element to \"position-relative\" in this case. |\n| isFullScreen | Boolean | false | Renders the spinner in fullscreen mode, relative to the body. |\n| isInline | Boolean | false | Renders the spinner without centered wrapper. |\n| show | Boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen to animate the appearance. |\n| text | String / Node | — | The text shown next to the spinner icon. |\nSpinner in Buttons\nSpinner and text in button .btn-loading\nDefault ButtonPrimary ButtonButton textButton text\n\nColored Buttons\nInfo ButtonSuccess ButtonWarning ButtonDanger Button\n\nOutline Buttons\nInfo ButtonSuccess ButtonWarning ButtonDanger Button\n\nSpinner with same width as the button text .btn-loading-overlay\nButton textButton textButton textButton text\n\nSpinner in icon only button .btn-loading .btn-icon-only\nSpinner inverse\nLoading\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isInverse | Boolean | false | Defines whether the spinner is shown on bright or dark background. |\n| isDoubleSized | Boolean | false | If set to \"true\" the spinner will be rendered twice as big. |\n| isFullSized | Boolean | false | Renders the spinner as overlay in full-size mode, relative to the parent container. Set the parent element to \"position-relative\" in this case. |\n| isFullScreen | Boolean | false | Renders the spinner in fullscreen mode, relative to the body. |\n| isInline | Boolean | false | Renders the spinner without centered wrapper. |\n| show | Boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen to animate the appearance. |\n| text | String / Node | — | The text shown next to the spinner icon. |\nSpinner fullsized\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.\n\nToggle loading spinner\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isInverse | Boolean | false | Defines whether the spinner is shown on bright or dark background. |\n| isDoubleSized | Boolean | false | If set to \"true\" the spinner will be rendered twice as big. |\n| isFullSized | Boolean | false | Renders the spinner as overlay in full-size mode, relative to the parent container. Set the parent element to \"position-relative\" in this case. |\n| isFullScreen | Boolean | false | Renders the spinner in fullscreen mode, relative to the body. |\n| isInline | Boolean | false | Renders the spinner without centered wrapper. |\n| show | Boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen to animate the appearance. |\n| text | String / Node | — | The text shown next to the spinner icon. |\nSpinner fullscreen\nToggle fullscreen loading spinnerexit fullscreen with esc key\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isInverse | Boolean | false | Defines whether the spinner is shown on bright or dark background. |\n| isDoubleSized | Boolean | false | If set to \"true\" the spinner will be rendered twice as big. |\n| isFullSized | Boolean | false | Renders the spinner as overlay in full-size mode, relative to the parent container. Set the parent element to \"position-relative\" in this case. |\n| isFullScreen | Boolean | false | Renders the spinner in fullscreen mode, relative to the body. |\n| isInline | Boolean | false | Renders the spinner without centered wrapper. |\n| show | Boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen to animate the appearance. |\n| text | String / Node | — | The text shown next to the spinner icon. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "Spinner components/spinners #components/spinners Components Misc"
+  },
+  {
+    "id": "components/states",
+    "title": "ErrorState",
+    "lead": "A simple component to show an error to the user.",
+    "summary": "A simple component to show an error to the user.",
+    "searchText": "ErrorState\nA simple component to show an error to the user.\nErrorState\nSomething went wrong\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.\nTry again\n\nCondensed version example\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.\nTry again\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | String | — | The icon to be shown. Default icons are defined for all states. |\n| icons | Array of Objects | [] | List of icons to show instead a single icon. |\n| └name | String | — | The name of the icon |\n| └color | String | — | Optional color class name for the icon |\n| └className | String | — | Optional class names for this icon. |\n| headline | String / Node | — | The headline to be shown. |\n| message | String / Node | — | The text to display. |\n| buttons | Array of Objects | [] | Definitions for the buttons to show. |\n| bsStyle | String | default | Allows to define various button styles. |\n| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | Function | () ={} | Callback fired after the component starts to collapse. |\n| └href | String | — | Instead of a callback for the button you can specify an \"href\". This way it will render a link instead. |\n| └className | String | — | Optional class names for this button. |\n| condensed | Boolean | false | Smaller icon and headline size. |\n| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |\n| image | Node | — | Custom Image if needed. |\n| alignment | String | center | Defines where the panel is aligned. Possible values are: left center right |\n| outerClassName | String | — | Optional class names for the wrapper. |\n| innerClassName | String | — | Optional class names for the content. |\n| children | Node | — | Additional elements that are rendered below the headline and text. |\nNotFoundState\nA simple component to show a message when something could not be found when searching or filtering data.\nNothing found\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.\nRefresh\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | String | — | The icon to be shown. Default icons are defined for all states. |\n| icons | Array of Objects | [] | List of icons to show instead a single icon. |\n| └name | String | — | The name of the icon |\n| └color | String | — | Optional color class name for the icon |\n| └className | String | — | Optional class names for this icon. |\n| headline | String / Node | — | The headline to be shown. |\n| message | String / Node | — | The text to display. |\n| buttons | Array of Objects | [] | Definitions for the buttons to show. |\n| bsStyle | String | default | Allows to define various button styles. |\n| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | Function | () ={} | Callback fired after the component starts to collapse. |\n| └href | String | — | Instead of a callback for the button you can specify an \"href\". This way it will render a link instead. |\n| └className | String | — | Optional class names for this button. |\n| condensed | Boolean | false | Smaller icon and headline size. |\n| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |\n| image | Node | — | Custom Image if needed. |\n| alignment | String | center | Defines where the panel is aligned. Possible values are: left center right |\n| outerClassName | String | — | Optional class names for the wrapper. |\n| innerClassName | String | — | Optional class names for the content. |\n| children | Node | — | Additional elements that are rendered below the headline and text. |\nEmptyState\nA simple component to show a message when there is no data yet. The user may perform a task first in order to see some data in that view..\nThere is no free lunch\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.\nAdd something\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | String | — | The icon to be shown. Default icons are defined for all states. |\n| icons | Array of Objects | [] | List of icons to show instead a single icon. |\n| └name | String | — | The name of the icon |\n| └color | String | — | Optional color class name for the icon |\n| └className | String | — | Optional class names for this icon. |\n| headline | String / Node | — | The headline to be shown. |\n| message | String / Node | — | The text to display. |\n| buttons | Array of Objects | [] | Definitions for the buttons to show. |\n| bsStyle | String | default | Allows to define various button styles. |\n| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | Function | () ={} | Callback fired after the component starts to collapse. |\n| └href | String | — | Instead of a callback for the button you can specify an \"href\". This way it will render a link instead. |\n| └className | String | — | Optional class names for this button. |\n| condensed | Boolean | false | Smaller icon and headline size. |\n| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |\n| image | Node | — | Custom Image if needed. |\n| alignment | String | center | Defines where the panel is aligned. Possible values are: left center right |\n| outerClassName | String | — | Optional class names for the wrapper. |\n| innerClassName | String | — | Optional class names for the content. |\n| children | Node | — | Additional elements that are rendered below the headline and text. |\nForbiddenState\nA simple component to show a message when the access to a certain area is restricted.\nAccess not allowed\nYou are not allowed to access this resource. Please contact your manager or administrator to gain access.\nRequest access\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | String | — | The icon to be shown. Default icons are defined for all states. |\n| icons | Array of Objects | [] | List of icons to show instead a single icon. |\n| └name | String | — | The name of the icon |\n| └color | String | — | Optional color class name for the icon |\n| └className | String | — | Optional class names for this icon. |\n| headline | String / Node | — | The headline to be shown. |\n| message | String / Node | — | The text to display. |\n| buttons | Array of Objects | [] | Definitions for the buttons to show. |\n| bsStyle | String | default | Allows to define various button styles. |\n| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | Function | () ={} | Callback fired after the component starts to collapse. |\n| └href | String | — | Instead of a callback for the button you can specify an \"href\". This way it will render a link instead. |\n| └className | String | — | Optional class names for this button. |\n| condensed | Boolean | false | Smaller icon and headline size. |\n| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |\n| image | Node | — | Custom Image if needed. |\n| alignment | String | center | Defines where the panel is aligned. Possible values are: left center right |\n| outerClassName | String | — | Optional class names for the wrapper. |\n| innerClassName | String | — | Optional class names for the content. |\n| children | Node | — | Additional elements that are rendered below the headline and text. |\nMaintenanceState\nA simple component to show a message when a service is in maintenance.\nService in maintenance\nWe are sorry for the inconvenience. The interruption will be resolved shortly.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | String | — | The icon to be shown. Default icons are defined for all states. |\n| icons | Array of Objects | [] | List of icons to show instead a single icon. |\n| └name | String | — | The name of the icon |\n| └color | String | — | Optional color class name for the icon |\n| └className | String | — | Optional class names for this icon. |\n| headline | String / Node | — | The headline to be shown. |\n| message | String / Node | — | The text to display. |\n| buttons | Array of Objects | [] | Definitions for the buttons to show. |\n| bsStyle | String | default | Allows to define various button styles. |\n| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | Function | () ={} | Callback fired after the component starts to collapse. |\n| └href | String | — | Instead of a callback for the button you can specify an \"href\". This way it will render a link instead. |\n| └className | String | — | Optional class names for this button. |\n| condensed | Boolean | false | Smaller icon and headline size. |\n| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |\n| image | Node | — | Custom Image if needed. |\n| alignment | String | center | Defines where the panel is aligned. Possible values are: left center right |\n| outerClassName | String | — | Optional class names for the wrapper. |\n| innerClassName | String | — | Optional class names for the content. |\n| children | Node | — | Additional elements that are rendered below the headline and text. |\nCustomState\nAll state components above are based on the more flexible CustomState component. Use this if you need something to be shown which cannot be accomplished otherwise.\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.\nDo something buttonPrimary call to action\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | String | — | The icon to be shown. Default icons are defined for all states. |\n| icons | Array of Objects | [] | List of icons to show instead a single icon. |\n| └name | String | — | The name of the icon |\n| └color | String | — | Optional color class name for the icon |\n| └className | String | — | Optional class names for this icon. |\n| headline | String / Node | — | The headline to be shown. |\n| message | String / Node | — | The text to display. |\n| buttons | Array of Objects | [] | Definitions for the buttons to show. |\n| bsStyle | String | default | Allows to define various button styles. |\n| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | Function | () ={} | Callback fired after the component starts to collapse. |\n| └href | String | — | Instead of a callback for the button you can specify an \"href\". This way it will render a link instead. |\n| └className | String | — | Optional class names for this button. |\n| condensed | Boolean | false | Smaller icon and headline size. |\n| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |\n| image | Node | — | Custom Image if needed. |\n| alignment | String | center | Defines where the panel is aligned. Possible values are: left center right |\n| outerClassName | String | — | Optional class names for the wrapper. |\n| innerClassName | String | — | Optional class names for the content. |\n| children | Node | — | Additional elements that are rendered below the headline and text. |\nYou don't have access to this issue\nMake sure the issue exists in this project. If it does, ask a project admin for permission to see the project's issues.\nView permissionsRequest access\nLearn more\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | String | — | The icon to be shown. Default icons are defined for all states. |\n| icons | Array of Objects | [] | List of icons to show instead a single icon. |\n| └name | String | — | The name of the icon |\n| └color | String | — | Optional color class name for the icon |\n| └className | String | — | Optional class names for this icon. |\n| headline | String / Node | — | The headline to be shown. |\n| message | String / Node | — | The text to display. |\n| buttons | Array of Objects | [] | Definitions for the buttons to show. |\n| bsStyle | String | default | Allows to define various button styles. |\n| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | Function | () ={} | Callback fired after the component starts to collapse. |\n| └href | String | — | Instead of a callback for the button you can specify an \"href\". This way it will render a link instead. |\n| └className | String | — | Optional class names for this button. |\n| condensed | Boolean | false | Smaller icon and headline size. |\n| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |\n| image | Node | — | Custom Image if needed. |\n| alignment | String | center | Defines where the panel is aligned. Possible values are: left center right |\n| outerClassName | String | — | Optional class names for the wrapper. |\n| innerClassName | String | — | Optional class names for the content. |\n| children | Node | — | Additional elements that are rendered below the headline and text. |\nNotBookedState\nA simple component to show a message when Service content requires a Marketplace booking.\nPremium feature\nBook Timed now and get access to the following and many more special features\nResidual driving times and break periods are clearly displayed. This enables you to avoid costly driving time violations.\nThe driver’s activities are transmitted automatically and archived on the platform for 90 days.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | String | — | The icon to be shown. Default icons are defined for all states. |\n| icons | Array of Objects | [] | List of icons to show instead a single icon. |\n| └name | String | — | The name of the icon |\n| └color | String | — | Optional color class name for the icon |\n| └className | String | — | Optional class names for this icon. |\n| buttons | Array of Objects | [] | Definitions for the buttons to show. |\n| bsStyle | String | default | Allows to define various button styles. |\n| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | Function | () ={} | Callback fired after the component starts to collapse. |\n| └href | String | — | Instead of a callback for the button you can specify an \"href\". This way it will render a link instead. |\n| └className | String | — | Optional class names for this button. |\n| headline | String / Node | — | The headline to be shown. |\n| message | String / Node | — | The text to display. |\n| features | Array of Objects | [] | List of features. |\n| condensed | Boolean | false | Smaller icon and headline size. |\n| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |\n| image | Node | — | Custom Image if needed. |\n| alignment | String | center | Defines where the panel is aligned. Possible values are: left center right |\n| outerClassName | String | — | Optional class names for the wrapper. |\n| innerClassName | String | — | Optional class names for the content. |\n| children | Node | — | Additional elements that are rendered below the headline and text. |\nFully customized state\nStay tuned\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | String | — | The icon to be shown. Default icons are defined for all states. |\n| icons | Array of Objects | [] | List of icons to show instead a single icon. |\n| └name | String | — | The name of the icon |\n| └color | String | — | Optional color class name for the icon |\n| └className | String | — | Optional class names for this icon. |\n| headline | String / Node | — | The headline to be shown. |\n| message | String / Node | — | The text to display. |\n| buttons | Array of Objects | [] | Definitions for the buttons to show. |\n| bsStyle | String | default | Allows to define various button styles. |\n| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | Function | () ={} | Callback fired after the component starts to collapse. |\n| └href | String | — | Instead of a callback for the button you can specify an \"href\". This way it will render a link instead. |\n| └className | String | — | Optional class names for this button. |\n| condensed | Boolean | false | Smaller icon and headline size. |\n| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |\n| image | Node | — | Custom Image if needed. |\n| alignment | String | center | Defines where the panel is aligned. Possible values are: left center right |\n| outerClassName | String | — | Optional class names for the wrapper. |\n| innerClassName | String | — | Optional class names for the content. |\n| children | Node | — | Additional elements that are rendered below the headline and text. |\nEnd User Licence Agreement\nCurrently, there is no vehicle in your fleet that requires acceptance of the EULA. However, you may still choose to accept it voluntarily.\n\nBack to homeProceed with EULA\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | String | — | The icon to be shown. Default icons are defined for all states. |\n| icons | Array of Objects | [] | List of icons to show instead a single icon. |\n| └name | String | — | The name of the icon |\n| └color | String | — | Optional color class name for the icon |\n| └className | String | — | Optional class names for this icon. |\n| headline | String / Node | — | The headline to be shown. |\n| message | String / Node | — | The text to display. |\n| buttons | Array of Objects | [] | Definitions for the buttons to show. |\n| bsStyle | String | default | Allows to define various button styles. |\n| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | Function | () ={} | Callback fired after the component starts to collapse. |\n| └href | String | — | Instead of a callback for the button you can specify an \"href\". This way it will render a link instead. |\n| └className | String | — | Optional class names for this button. |\n| condensed | Boolean | false | Smaller icon and headline size. |\n| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |\n| image | Node | — | Custom Image if needed. |\n| alignment | String | center | Defines where the panel is aligned. Possible values are: left center right |\n| outerClassName | String | — | Optional class names for the wrapper. |\n| innerClassName | String | — | Optional class names for the content. |\n| children | Node | — | Additional elements that are rendered below the headline and text. |\nTable with State\nNotFoundState when search or filter don't return any matching item\nHead ColumnHead ColumnHead ColumnHead ColumnHead Column\n\nWe couldn't find anything that matches your search\nPlease refine your search and check spelling and spacing.\n\nEmptyState when no item has been created yet\nHead ColumnHead ColumnHead ColumnHead ColumnHead Column\n\nNo tracked events for this order\nEvents appear when when the order is shared with other users and the order state is active.\nLearn how to start tracking order events\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | String | — | The icon to be shown. Default icons are defined for all states. |\n| icons | Array of Objects | [] | List of icons to show instead a single icon. |\n| └name | String | — | The name of the icon |\n| └color | String | — | Optional color class name for the icon |\n| └className | String | — | Optional class names for this icon. |\n| headline | String / Node | — | The headline to be shown. |\n| message | String / Node | — | The text to display. |\n| buttons | Array of Objects | [] | Definitions for the buttons to show. |\n| bsStyle | String | default | Allows to define various button styles. |\n| └text | String / Node | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | Function | () ={} | Callback fired after the component starts to collapse. |\n| └href | String | — | Instead of a callback for the button you can specify an \"href\". This way it will render a link instead. |\n| └className | String | — | Optional class names for this button. |\n| condensed | Boolean | false | Smaller icon and headline size. |\n| fullWidth | Boolean | false | Defines whether to use 100% width or default width. NoteOnly to be used for special cases on the CustomState component. |\n| image | Node | — | Custom Image if needed. |\n| alignment | String | center | Defines where the panel is aligned. Possible values are: left center right |\n| outerClassName | String | — | Optional class names for the wrapper. |\n| innerClassName | String | — | Optional class names for the content. |\n| children | Node | — | Additional elements that are rendered below the headline and text. |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "ErrorState components/states #components/states Components Content"
+  },
+  {
+    "id": "components/statsWidgets",
+    "title": "StatsWidgets",
+    "lead": null,
+    "summary": "StatsWidget with another body component and additional footer",
+    "searchText": "StatsWidgets\nStatsWidgets\nStatsWidget with another body component and additional footer\n\nInteractive StatsWidget with filter option\nFleet\n23\n\nTrucks\n\n14\n\nTrailer\n\n111\n\nDriver\n\nNotifications\n45\n\nExceptions\n\n144\n\nWarnings\n\nActivity\n15\n30\n\nAvailability\n\n12\n\nDriving\n\n12\n\nWorking\n\n9\n\nResting\n\nFull width widget\n\n23\n\nTrucks\n\n14\n\nTrailer\n\n111\n\nDriver\n### StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Addional class names to be added to the element. |\n### StatsWidget\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| hasFilter | Boolean | false | Defines whether a filter is active for this stats widget. |\n| onFilterReset | Function | — | Callback to reset the filter. |\n### StatsWidgetBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fullWidth | Boolean | — | Whether to use flex space-between for StatsWidgetNumbers. |\n### StatsWidgetNumber\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String / Number / Node | — | The value to be shown. |\n| total | String / Number / Node | — | The total value to be shown i.e. in combination with an active filter. |\n| label | String / Node | — | The label shown below the number. |\n| clickable | Boolean | false | Defines whether or not the number is clickable i.e. in combination with a filter. |\n| onClick | Function | — | Callback for when the user clicks the number widget. |\nCurrent activity\n\n42 min resting\n\nLast update 2 minutes ago\n### StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Addional class names to be added to the element. |\n### StatsWidget\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| hasFilter | Boolean | false | Defines whether a filter is active for this stats widget. |\n| onFilterReset | Function | — | Callback to reset the filter. |\n### StatsWidgetBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fullWidth | Boolean | — | Whether to use flex space-between for StatsWidgetNumbers. |\n### StatsWidgetNumber\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String / Number / Node | — | The value to be shown. |\n| total | String / Number / Node | — | The total value to be shown i.e. in combination with an active filter. |\n| label | String / Node | — | The label shown below the number. |\n| clickable | Boolean | false | Defines whether or not the number is clickable i.e. in combination with a filter. |\n| onClick | Function | — | Callback for when the user clicks the number widget. |\nNotifications\n45\n\nExceptions\n\n144\n\nWarnings\n### StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Addional class names to be added to the element. |\n### StatsWidget\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| hasFilter | Boolean | false | Defines whether a filter is active for this stats widget. |\n| onFilterReset | Function | — | Callback to reset the filter. |\n### StatsWidgetBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fullWidth | Boolean | — | Whether to use flex space-between for StatsWidgetNumbers. |\n### StatsWidgetNumber\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String / Number / Node | — | The value to be shown. |\n| total | String / Number / Node | — | The total value to be shown i.e. in combination with an active filter. |\n| label | String / Node | — | The label shown below the number. |\n| clickable | Boolean | false | Defines whether or not the number is clickable i.e. in combination with a filter. |\n| onClick | Function | — | Callback for when the user clicks the number widget. |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "StatsWidgets components/statsWidgets #components/statsWidgets Components Content"
+  },
+  {
+    "id": "components/statusBar",
+    "title": "StatusBar",
+    "lead": "Flexible component to showcase various states based on progress bars.",
+    "summary": "Flexible component to showcase various states based on progress bars.",
+    "searchText": "StatusBar\nFlexible component to showcase various states based on progress bars.\nStatusBar\nUsage: Use these components only on light backgrounds and limit the width of the wrapping element to avoid extreme long progress bars.\nV1\nTop label with icon left\n\n42 min resting\n\nV2\nTop label with icon right\n\n42 min resting\n\nV3\nSplit whith icon left and label right\n\n1:45 h\n\nV4\nSplit whith icon right and label left\n\n1:45 h\n\nV5\nBoth icon and label left\n\n13 min\n\nV6\nBoth icon and label right\n\n13 min\n\nV7\nLabel left\n\n42 min\n\nV8\nThin label right\n\n42 min\n\nV9\nLarge progress with large icon left\n\nV10\nLarge progress with large icon right\n\nV11\nLarge progress with large icon and label\n\n44%\n\nV12\nLarge progress only\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | Object | — | The icon to be shown next to the progress bar. |\n| └name | String | — | The class name of the icon i.e. \"rioglyph-cruise-control\". |\n| └alignment | String | 'left' | The position of the icon. Possible values are: left or right |\n| └color | String | 'text-color-gray' | The text color class name for the icon. |\n| └className | String | — | Optional class names for the icon. |\n| label | Object | — | The label to be shown for the progress bar. |\n| └value | String / Node | — | The label content. |\n| └alignment | String | 'right' | The position of the icon. Possible values are: left top right |\n| └weight | String | 'bold' | The text weight of the label. Possible values are: light or bold |\n| └color | String | 'text-color-gray' | The text color class name for the label. |\n| └className | String | — | Optional class names for the label. |\n| progress | list of Objects | — | List of progress bars which will be stacked in given order if there are multiple. |\n| └percentage | Number | 0 | The percentage of the progress. |\n| └color | String | 'progress-bar-info' | The color class name for the label. |\n| └tooltip | String / Node | — | Optional tooltip content to be shown for the progress bar. |\n| └tooltipPosition | String | 'top' | The position of the tooltip for the progress bar. Possible values are: top bottom left right |\n| └tooltipDelay | Number | 50 | The delay in milliseconds for when the tooltip is shown when hovering the progress bar. |\n| └className | String | — | Optional class names for the progress bar. |\n| size | String | 'small' | The size of the icon and progress bar. Possible values are: small or large |\n| useProgressDivider | Boolean | true | Uses a divider for multiple progress bars when defined. |\n| className | String | — | Optional class names for the wrapper element. |",
+    "category": "Components",
+    "section": "Progress",
+    "boost": "StatusBar components/statusBar #components/statusBar Components Progress"
+  },
+  {
+    "id": "components/stepButton",
+    "title": "StepButton",
+    "lead": "The StepButton is a convenient component designed to simplify usage and alignment of buttons with chevrons.",
+    "summary": "The StepButton is a convenient component designed to simplify usage and alignment of buttons with chevrons.",
+    "searchText": "StepButton\nThe StepButton is a convenient component designed to simplify usage and alignment of buttons with chevrons.\nStepButton\nStep buttons\nPreviousNext\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| direction | 'next' \\| 'previous' | next | Defines the chevron icon for the respective direction. |",
+    "category": "Components",
+    "section": "Interaction",
+    "boost": "StepButton components/stepButton #components/stepButton Components Interaction"
+  },
+  {
+    "id": "components/steppedProgressBars",
+    "title": "SteppedProgressBar - Circle",
+    "lead": null,
+    "summary": "1",
+    "searchText": "SteppedProgressBar - Circle\nSteppedProgressBar - Circle\n1\nLabel for step 1\n\n2\nLabel for step 2\n\nLabel for final step\n\nContent of page 2\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.\nClick here to complete this step. There is no other way forward.PreviousNext\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| labels | Array of Objects | — | Objects to define the icon and the label of the navigation items. The icon can be a string or an icon. |\n| └icon | String / Node | — | The element shown in the step element. This can be a single step number or an icon element. |\n| └label | String / Node | — | The label shown below the step element. |\n| └labelClassName | String | — | Additional classes to be set on the label element. |\n| └labelWrapperClassName | String | — | Additional classes to be set on the label wrapping element. |\n| selectedStepNumber | Number | — | Index of the selected navigation item. |\n| onSelectedChanged | Function | () ={} | Called with the new selected index after the user clicked a nav item. |\n| variant | String | circle | The SteppedProgressBar Variant. One of \"circle\", \"rectangle\" or \"roadsign\". |\n| disableFollowingPages | Number | — | All navigation items with a higher index than this will be disabled. |\n| mobileBreakpoint | Boolean | true | Deactivating the Wrapping of bubbles on mobile |\n| className | String | — | Additional classes to be set on the wrapper element. |\nSteppedProgressBar - Rectangle\nLabel for step 1\n\nLabel for step 2\n\nLabel for final step\n\nContent of page 2\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.\nClick here to complete this step. There is no other way forward.PreviousNext\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| labels | Array of Objects | — | Objects to define the icon and the label of the navigation items. The icon can be a string or an icon. |\n| └icon | String / Node | — | The element shown in the step element. This can be a single step number or an icon element. |\n| └label | String / Node | — | The label shown below the step element. |\n| └labelClassName | String | — | Additional classes to be set on the label element. |\n| └labelWrapperClassName | String | — | Additional classes to be set on the label wrapping element. |\n| selectedStepNumber | Number | — | Index of the selected navigation item. |\n| onSelectedChanged | Function | () ={} | Called with the new selected index after the user clicked a nav item. |\n| variant | String | circle | The SteppedProgressBar Variant. One of \"circle\", \"rectangle\" or \"roadsign\". |\n| disableFollowingPages | Number | — | All navigation items with a higher index than this will be disabled. |\n| mobileBreakpoint | Boolean | true | Deactivating the Wrapping of bubbles on mobile |\n| className | String | — | Additional classes to be set on the wrapper element. |\nSteppedProgressBar - Rectangle with custom content\nInitial step\nLorem ipsum dolor\n\nSecond step\nLorem ipsum dolor\n\nFinal step\nLorem ipsum dolor\n\nContent of page 2\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.\nClick here to complete this step. There is no other way forward.PreviousNext\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| labels | Array of Objects | — | Objects to define the icon and the label of the navigation items. The icon can be a string or an icon. |\n| └icon | String / Node | — | The element shown in the step element. This can be a single step number or an icon element. |\n| └label | String / Node | — | The label shown below the step element. |\n| └labelClassName | String | — | Additional classes to be set on the label element. |\n| └labelWrapperClassName | String | — | Additional classes to be set on the label wrapping element. |\n| selectedStepNumber | Number | — | Index of the selected navigation item. |\n| onSelectedChanged | Function | () ={} | Called with the new selected index after the user clicked a nav item. |\n| variant | String | circle | The SteppedProgressBar Variant. One of \"circle\", \"rectangle\" or \"roadsign\". |\n| disableFollowingPages | Number | — | All navigation items with a higher index than this will be disabled. |\n| mobileBreakpoint | Boolean | true | Deactivating the Wrapping of bubbles on mobile |\n| className | String | — | Additional classes to be set on the wrapper element. |\nSteppedProgressBar - Road Sign\nLabel for step 1\n\nLabel for step 2\n\nLabel for final step\n\nContent of page 2\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.\nClick here to complete this step. There is no other way forward.PreviousNext\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| labels | Array of Objects | — | Objects to define the icon and the label of the navigation items. The icon can be a string or an icon. |\n| └icon | String / Node | — | The element shown in the step element. This can be a single step number or an icon element. |\n| └label | String / Node | — | The label shown below the step element. |\n| └labelClassName | String | — | Additional classes to be set on the label element. |\n| └labelWrapperClassName | String | — | Additional classes to be set on the label wrapping element. |\n| selectedStepNumber | Number | — | Index of the selected navigation item. |\n| onSelectedChanged | Function | () ={} | Called with the new selected index after the user clicked a nav item. |\n| variant | String | circle | The SteppedProgressBar Variant. One of \"circle\", \"rectangle\" or \"roadsign\". |\n| disableFollowingPages | Number | — | All navigation items with a higher index than this will be disabled. |\n| mobileBreakpoint | Boolean | true | Deactivating the Wrapping of bubbles on mobile |\n| className | String | — | Additional classes to be set on the wrapper element. |",
+    "category": "Components",
+    "section": "Progress",
+    "boost": "SteppedProgressBar - Circle components/steppedProgressBars #components/steppedProgressBars Components Progress"
+  },
+  {
+    "id": "components/subNavigation",
+    "title": "SubNavigation",
+    "lead": null,
+    "summary": "Subnavigation 1",
+    "searchText": "SubNavigation\nSubNavigation\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| navItems | Array | — | List of navigation items with key and route prop. The route prop is a react-router NavLink component with an \"active\" style. |\n| className | String | — | Additional classes for the wrapper element. |\nSubNavigation with offset\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\nSubNavigation without offset\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3",
+    "category": "Components",
+    "section": "Navigation",
+    "boost": "SubNavigation components/subNavigation #components/subNavigation Components Navigation"
+  },
+  {
+    "id": "components/supportMarker",
+    "title": "SupportMarker",
+    "lead": "You can add the support-marker class along with the data-support attribute to any HTML element - even divs wrapping around iframes, for example!",
+    "summary": "You can add the support-marker class along with the data-support attribute to any HTML element - even divs wrapping around iframes, for example!",
+    "searchText": "SupportMarker\nYou can add the support-marker class along with the data-support attribute to any HTML element - even divs wrapping around iframes, for example!\nSupportMarker\nBy default, support markers are invisible. Adding the show-support-marker class to the html tag will cause all support markers to show up.\n\nYou can use the utility functions provided by the UIKIT for easily adding / removing that class. Either simply toggle support markers on and off with toggleSupportMarker, or manage the state whether to show support markers manually and use enableSupportMarker.\nToggle Support MarkersLorem Ipsum\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet\nShow support markers\n\nLorem Ipsum\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "SupportMarker components/supportMarker #components/supportMarker Components Misc"
+  },
+  {
+    "id": "components/svgImage",
+    "title": "SvgImage",
+    "lead": "This component helps to render SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes. It uses the defined UIKIT CSS variables to automatically adapt to dark mode. When customizing colors, make sure to use existing CSS color variable names.",
+    "summary": "This component helps to render SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes. It uses the defined UIKIT CSS variables to automatically adapt to dark mode. When customizing colors, make sure to use existing CSS color variable names.",
+    "searchText": "SvgImage\nThis component helps to render SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes. It uses the defined UIKIT CSS variables to automatically adapt to dark mode. When customizing colors, make sure to use existing CSS color variable names.\nSvgImage\nYou can find an overview of all available SVG images here: https://cdn.rio.cloud/riosvg/index.html\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | string | — | The name of the image file without extension. |\n| size | number | 150 | The height and width of the SVG image in pixels. |\n| baseUrl | string | https://cdn.rio.cloud/riosvg | The CDN base URL where the images are located. |\n| colorMap | ColorOverridesMap | — | Customize color using the color map and define the CSS variable name that shall be used. |\n| className | string | — | Additional class names added to the SVG element. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "SvgImage components/svgImage #components/svgImage Components Misc"
+  },
+  {
+    "id": "components/switch",
+    "title": "Switch",
+    "lead": null,
+    "summary": "Switch",
+    "searchText": "Switch\nSwitch\nSwitch\n\nDisabled Switch & disabled active Switch\n\nColored Switch\n\nSwitch with label\n\nLabel\n\nSwitch with label left\n\nLabel\n\nSwitch with text and min-width\n\nSwitch with single text and label\n\nBeta feature toggle\n\nSwitch in panels\n\nSwitch in alerts\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| keyName | String | — | Optional key that is used as key and as the id on the internal input. |\n| checked | Boolean | false | Set active / inactive state. |\n| disabled | Boolean | false | Disables the component. |\n| onChange | Function | — | Callback function triggered when clicking the button. |\n| minWidth | Number | — | The min-width of the switch. |\n| enabledText | String | — | ON text |\n| disabledText | String | — | OFF text |\n| className | string | — | Additional class names added |\n| labelPosition | String | — | Possible values are: left, right |\n| color | String | 'primary' | Defines the color of the switch. Possible values are:'primary', 'secondary', 'info', 'success', 'warning' or 'danger'. |",
+    "category": "Components",
+    "section": "Interaction",
+    "boost": "Switch components/switch #components/switch Components Interaction"
+  },
+  {
+    "id": "components/tables",
+    "title": "Table Toolbar",
+    "lead": "The toolbar and its content has to be implemented by each team itself. Please use the following sample as a reference and adapt it accordingly.",
+    "summary": "The toolbar and its content has to be implemented by each team itself. Please use the following sample as a reference and adapt it accordingly.",
+    "searchText": "Table Toolbar\nThe toolbar and its content has to be implemented by each team itself. Please use the following sample as a reference and adapt it accordingly.",
+    "category": "Components",
+    "section": "Content",
+    "boost": "Table Toolbar components/tables #components/tables Components Content"
+  },
+  {
+    "id": "components/tagManager",
+    "title": "TagManager",
+    "lead": "The TagManager allows to select and filter for existing tags as well as adding and removing them from a list of tags.",
+    "summary": "The TagManager allows to select and filter for existing tags as well as adding and removing them from a list of tags.",
+    "searchText": "TagManager\nThe TagManager allows to select and filter for existing tags as well as adding and removing them from a list of tags.\nTagManager\nWithout adding custom tag option\n\nIn Combination with state component\nType in new fleet group name above\nChoose existing fleet group\nLorem\nIpsum\nDolor sit amet\nConnectivity Test\n\nFoo\n\nBar\n\nSave\nLorem\nIpsum\nDolor sit amet\n\nSave\nFleet groups\nSelect an already created fleet group or create a new one and save it immediately.\n\nType in new fleet group name above\nChoose existing fleet group\nLorem\nIpsum\nDolor sit amet\n\nFoo\n\nBar\n\nSave",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "TagManager components/tagManager #components/tagManager Components Misc"
+  },
+  {
+    "id": "components/tags",
+    "title": "Tag",
+    "lead": null,
+    "summary": "Tags",
+    "searchText": "Tag\nTag\nTags\nLink\n\nText\n\nIcon\n\nClickable\n\nRevertable\n\nActive\n\nDisabled\n\nDeletable\n\nSelectable\n\nSelectable active\n\nNot round\n\nSmall Tags\nLink\n\nText\n\nIcon\n\nClickable\n\nRevertable active\n\nActive\n\nDisabled\n\nDeletable\n\nSelectable\n\nSelectable\n\nNot round\n\nMultiline Tags\nSome long multiline text\n\nSome long multiline text\n\nSmall Multiline Tags\nSome long multiline text\n\nSome long multiline text\n\nMuted Tags\nText Tag\n\nIcon Tag\n\nSelectable Tag\n\nMuted Tags with context links\nLink Tag\n\nLink Tag\n\nLink Tag\n\nLink Tag\n\nLink Tag\n\nVertical TagList\nLink\n\nText\n\nIcon\n\nClickable\n\nRevertable\n\nActive\n\nDisabled\n\nDeletable\n\nSelectable\n\nSelectable active\n\nNot round\n\nVertical TagList (autoTagWidth)\nLink\n\nText\n\nIcon\n\nClickable\n\nRevertable\n\nActive\n\nDisabled\n\nDeletable\n\nSelectable\n\nSelectable active\n\nNot round\n\nColumn TagList\nTruck A\n\nTruck B\n\nTruck C\n\nTruck D\n\nTruck E\n\nTruck F\n\nTruck G\n### TagList\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| autoTagWidth | Boolean | false | Defines if the tag has the same with as it`s parent container. |\n| inline | Boolean | true | Defines if the taglist is rendered inline or vertically. |\n| tagsPerRow | Number | — | Possible values are: 1, 2, 3, 4, 6 |\n### Tag\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| size | String | — | Defines if you want to render the tag in a different size. Possible values are: 'small' |\n| icon | String | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| active | Boolean | false | Defines if the tag is active. |\n| clickable | Boolean | false | Defines if the tag is clickable. |\n| selectable | Boolean | false | Defines if the tag is selectable. |\n| deletable | Boolean | false | Defines if the tag is deletable. |\n| revertable | Boolean | false | Defines if the tag is revertable. |\n| disabled | Boolean | false | Defines if the tag is disabled. |\n| round | Boolean | true | Defines if the tag is round. |\n| muted | Boolean | false | Sets a more subtle style for border and background. |\n| className | String | — | Additional classes to be set on the wrapper element. |\n| children | any | — | Any element to be rendered inside the tag. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "Tag components/tags #components/tags Components Misc"
+  },
+  {
+    "id": "components/teaser",
+    "title": "Teaser",
+    "lead": "The teaser component was built to create all kinds of landing and/or single pages. for example, be used in dialogs or sidebars.",
+    "summary": "The teaser component was built to create all kinds of landing and/or single pages. for example, be used in dialogs or sidebars.",
+    "searchText": "Teaser\nThe teaser component was built to create all kinds of landing and/or single pages. for example, be used in dialogs or sidebars.\nTeaser\nThe demo page should only provide an insight into the combination possibilities.\n\nNote: Because of larger screens a wrapping container-fluid fluid-default should be added if you are not using the component within smaller container.\nBox headline\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\nBox headline\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\nButton text\n\nBox headline\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\nButton text\n\nBox headline\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nButton text\n\nBox headline\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\nButton text\n\nBox headline\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\nButton text\n\nBox headline\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\nButton text\n\nBox headline\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\nButton text\n\nBox headline\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nButton text\n\nText\n\nText\n\nText\n\nText\n\nText\n\nText\n\nBox 1\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\nButton text\n\nBox 2\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\nButton text\n\nBox 3\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nButton text\n\nBox 4\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nButton text\n\nBox 1\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\nButton text\n\nBox 2\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\nButton text\n\nBox 3\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nButton text\n\nBox 4\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nButton text\n\nBox headline\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nButton textButton text\n### TeaserContainer\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| children | any | — | The individual Teaser components. |\n| teaserPerRow | Number | — | Defines how many children are rendered into a row. If \"teaserPerRow\" is not defined the container tries to put all children in a row with regards to the Bootstrap grid. This is done by dividing the amount of children by 12 in order to figure out the col grid classes. It is recommended to define the teaser per row when having more than 4 teaser. Possible values are: 1 2 3 4 6 and 12 |\n| columnClassName | String | — | Optional string for additional classes added to each column of a child. |\n| className | String | — | Optional string for additional classes added to the row. |\n### Teaser\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| headline | String / Node | — | The headline for the teaser. |\n| content | String / Node | — | The actual content to show e.g. some kind of text. |\n| image | Object | — | Defines an image to render with the following props. |\n| └src | String | — | The src URL for the image. |\n| └alt | String | — | The alternate text for the image. |\n| └aspectRatio | String | — | Ratio of the transparent image placeholder. Possible value ares: '1:1' '3:1' '3:2' '16:9' |\n| └align | String | — | Defines whether the image is on the left or right side of the component. Possible value ares: 'left' 'right' |\n| └onClick | Function | — | Callback function for the image. |\n| └className | String | — | Additional classes added to the image wrapper. |\n| button | Object | — | Defines a button to render with the following props. |\n| └text | String / Node | — | The text content for the button. |\n| └bsStyle | String | 'primary' | The button style. Please see the Button component definition for possible values. |\n| └onClick | Function | — | Callback function for the button. |\n| └className | String | — | Additional classes added to the button. |\n| verticalAlignment | String | 'top' | Defines where the teaser content is aligned including headerline and image. Possible values are: 'top' 'center' |\n| segmentation | String | — | Defines how the teaser content is segmented. Possible value ares: '50' '25:75' '75:25' '100' |\n| footer | String / Node | — | Optional content for footer in case the prop \"button\" is not sufficient. |\n| className | String | — | Additional classes added to the wrapper. |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "Teaser components/teaser #components/teaser Components Content"
+  },
+  {
+    "id": "components/timeline",
+    "title": "Timeline",
+    "lead": "The timeline component is a pure CSS component.",
+    "summary": "The timeline component is a pure CSS component.",
+    "searchText": "Timeline\nThe timeline component is a pure CSS component.\nTimeline\nCSS Timeline\nDefault\n01-2024\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\n02-2024\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\n03-2024\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\nWith UI elements\n\nStart today\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\n2\n02/2025\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\nOngoing\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\nFinish\n\nEvents\n\nleeroy marked an answer 4m\n\nleeroy unmarked an answer 4m\n\nleeroy marked an answer 7m\n\nAndre reopened answer 10m\n\nAndre closed answer 1y\n\nInventory replenishment triggered\n\nCross-Docking initiated\n\nCustoms clearance completed\n\nCold chain integrity maintained\n\nLast-Mile delivery assigned\n\nStream style\nJanuary\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\nFebruary\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\nMarch\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.\nPackage details\nShipment\n\n34563456\n\nWeight\n\n1.3 Kg\n\nDimensions\n\n34 x 26 x 17 cm\n\nThe shipment is delivered to the recipient\nMay 31th at 11:00 PM - 10117 Berlin, Germany\n\nThe shipment is loaded onto a truck for delivery\nMay 30 at 1:45 PM - 75001 Paris, France\n\nThe shipment is sorted and prepared for further transport\nMay 30 at 12:10 PM - 75001 Paris, France\n\nThe consignment has been picked up and is now at the terminal for further processing\nMay 29 at 2:15 PM - 75001 Paris, France\n\nWe've received the first update on your shipment. While it's currently with the sender or on its way to the terminal, we'll be able to provide more detailed tracking information once it arrives in the receiving country.\nMay 28 at 4:00 AM - SW1A 1AA London, United Kingdom",
+    "category": "Components",
+    "section": "CSS Only",
+    "boost": "Timeline components/timeline #components/timeline Components CSS Only"
+  },
+  {
+    "id": "components/timepicker",
+    "title": "TimePicker",
+    "lead": null,
+    "summary": "Uncontrolled component",
+    "searchText": "TimePicker\nTimePicker\nUncontrolled component\n\nWith icon\n\nControlled component without initial value\n\nSet current timeClear time\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |\n| onChange | Function | () ={} | Callback function when the value changes and is a valid time format. If not it handles the state internally until the time is valid and filled. |\n| alwaysShowMask | Boolean | true | Defines whether to always show the input mask placeholder. |\n| showIcon | Boolean | false | Defines whether or not to show the input icon. |\n| className | String | — | Additional classes to be set on the wrapper element. |\n| inputProps | Object | — | Additional props to be passed on to the underlying input component. |\n| └className | String | — | Additional classes to be set on the input element. |\nDefaultPlease insert a valid time\n\nWith iconJust a normal warning message\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |\n| onChange | Function | () ={} | Callback function when the value changes and is a valid time format. If not it handles the state internally until the time is valid and filled. |\n| alwaysShowMask | Boolean | true | Defines whether to always show the input mask placeholder. |\n| showIcon | Boolean | false | Defines whether or not to show the input icon. |\n| className | String | — | Additional classes to be set on the wrapper element. |\n| inputProps | Object | — | Additional props to be passed on to the underlying input component. |\n| └className | String | — | Additional classes to be set on the input element. |",
+    "category": "Components",
+    "section": "Pickers",
+    "boost": "TimePicker components/timepicker #components/timepicker Components Pickers"
+  },
+  {
+    "id": "components/toggleButton",
+    "title": "ToggleButton",
+    "lead": "This toggle button is based on the button component that can be used directly.",
+    "summary": "This toggle button is based on the button component that can be used directly.",
+    "searchText": "ToggleButton\nThis toggle button is based on the button component that can be used directly.\nToggleButton\nDefault ToggleButtons\nbtn-default (untoggled)btn-default (toggled)btn-primary (untoggled)\nOther Styles\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | Boolean | false | Set the button disabled. |\n| active | Boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| asToggle | Boolean | false | Use the button as a toggle button. The toggle state can be controlled viw the \"active\" prop. |\n| iconOnly | Boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconName | String | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| iconRight | Boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| multiline | Boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | Boolean | false | Defines whether the button takes up the full width of the parent element. |\n| onClick | Function | () ={} | Callback function triggered when clicking the button. |\n| bsStyle | String | default | Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTEDFILLED and Button.MUTED |\n| bsSize | String | — | Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG |\n| variant | String | — | Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANTLINK, Button.VARIANTLINKINLINE, Button.VARIANTOUTLINE and Button.VARIANTACTION |\n| className | String | — | Additional classes to be set on the button element. |\n| children | any | — | Any element to be rendered on the button. |\nControlled ToggleButton\n\nControl the toggle\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | Boolean | false | Set the button disabled. |\n| active | Boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| asToggle | Boolean | false | Use the button as a toggle button. The toggle state can be controlled viw the \"active\" prop. |\n| iconOnly | Boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconName | String | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| iconRight | Boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| multiline | Boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | Boolean | false | Defines whether the button takes up the full width of the parent element. |\n| onClick | Function | () ={} | Callback function triggered when clicking the button. |\n| bsStyle | String | default | Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTEDFILLED and Button.MUTED |\n| bsSize | String | — | Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG |\n| variant | String | — | Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANTLINK, Button.VARIANTLINKINLINE, Button.VARIANTOUTLINE and Button.VARIANTACTION |\n| className | String | — | Additional classes to be set on the button element. |\n| children | any | — | Any element to be rendered on the button. |",
+    "category": "Components",
+    "section": "Interaction",
+    "boost": "ToggleButton components/toggleButton #components/toggleButton Components Interaction"
+  },
+  {
+    "id": "components/tooltip",
+    "title": "Tooltips",
+    "lead": "In order to use a Tooltip on an element, wrap it with the OverlayTrigger component or use the SimpleTooltip component.",
+    "summary": "In order to use a Tooltip on an element, wrap it with the OverlayTrigger component or use the SimpleTooltip component.",
+    "searchText": "Tooltips\nIn order to use a Tooltip on an element, wrap it with the OverlayTrigger component or use the SimpleTooltip component.\nTooltips\nNote: By default Tooltips are not rendered on touch devices. This might lead to issues for test environments where the check for mobile evaluate to true simply because the required class name is not set on the document element.To fix that, simply set the class in your test as follows:document.documentElement.classList.add('ua-desktop');\nHoverHoverHover\nHoverHover\nHoverHoverHover\n\nClickClickClick\nClickClick\nClickClickClick\n### Tooltip\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String / Number | — | An HTML id attribute, necessary for accessibility. |\n| placement | String | — | Sets the direction the Tooltip is positioned towards. This is generally provided by the OverlayTrigger component positioning the tooltip. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |\n| tooltipStyle | String | default | Defines the look of the tooltip. Possible values are: default, onboarding |\n| textAlignment | String | center | Defines the position of the text content. Possible values are: left, right, center |\n| width | String | — | Defines the width of the tooltip. Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |\n| allowOnTouch | bool | false | Render Tooltips on mobile devices. |\n| className | String | — | Additional classes to be set on the wrapper element. |\n| innerClassName | String | — | Additional classes to be set on the inner element. |\n| children | any | — | Any element to be rendered inside the tooltip. |\n### OverlayTrigger\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| trigger | 'click' \\| 'hover' \\| 'focus' | hover | Specify which action or actions trigger Overlay visibility. Possible values are: OverlayTrigger.TRIGGERCLICK , OverlayTrigger.TRIGGERHOVER, OverlayTrigger.TRIGGER_HOVER or 'click', 'hover', 'focus' |\n| delay | Number / Object | — | A millisecond delay amount to show and hide the Overlay once triggered. |\n| └show | Number | — | A millisecond delay amount before showing the Overlay once triggered. |\n| └hide | Number | — | A millisecond delay amount before hiding the Overlay once triggered. |\n| defaultShow | Boolean | — | The initial visibility state of the Overlay. For more nuanced visibility control, consider using the Overlay component directly. |\n| overlay | Node | — | An element or text to overlay next to the target. |\n| placement | String | — | Sets the direction the overlay is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |\n| popperConfig | Object | — | A Popper.js config object passed to the the underlying popper instance. |\nSimpleTooltip\nSimple tooltip with auto placement:Hover me\nSimple tooltip with bottom placement:Hover me\n\nHover me\n\nSimple tooltip within text:Lorem 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 etmalesuada 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### SimpleTooltip\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| trigger | String | hover | Specify which action or actions trigger Overlay visibility. Possible values are: 'click', 'hover', 'focus' |\n| placement | String | AUTO | Sets the direction the Tooltip is positioned towards. This is generally provided by the OverlayTrigger component positioning the tooltip. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |\n| content | String / Node | — | The tooltip content. |\n| targetRef | Ref | — | The react ref object assigned to the target of the tooltip. |\n| delay | Number / Object | — | A millisecond delay amount to show the Overlay once triggered. |\n| └show | Number | — | A millisecond delay amount before showing the Overlay once triggered. |\n| └hide | Number | — | A millisecond delay amount before hiding the Overlay once triggered. |\n| textAlignment | String | center | Defines the position of the text content. Possible values are: left, right, center |\n| width | String | — | Defines the width of the tooltip. Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |\n| className | String | — | Additional classes to be set on the wrapper element. |\n| innerClassName | String | — | Additional classes to be set on the inner element. |\n| popperConfig | Object | — | A Popper.js config object passed to the the underlying popper instance. |\n| children | Node | — | The target node. |",
+    "category": "Components",
+    "section": "Misc",
+    "boost": "Tooltips components/tooltip #components/tooltip Components Misc"
+  },
+  {
+    "id": "components/virtualList",
+    "title": "VirtualList",
+    "lead": "The VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.",
+    "summary": "The VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.",
+    "searchText": "VirtualList\nThe VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.\nVirtualList\nIt allows a specified number of items outside the viewport for smoother scrolling. It optimizes performance by minimizing DOM updates and provides a customizable rendering function for each item, making it ideal for applications that require dynamic and responsive list displays.\nVirtual list with 100 itemsItem 1\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. |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "VirtualList components/virtualList #components/virtualList Components Content"
+  },
+  {
+    "id": "foundations",
+    "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",
+    "category": "Foundations",
+    "section": "Interaction",
+    "boost": "Foundations foundations #foundations Foundations Interaction"
+  },
+  {
+    "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",
+    "category": "Getting started",
+    "section": "Welcome",
+    "boost": "Changelog start/changelog #start/changelog Getting started Welcome"
+  },
+  {
+    "id": "start/goodtoknow",
+    "title": "Good to know",
+    "lead": null,
+    "summary": "Note: Hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defined in the lang attribute of a html element. Not all languages are supported yet, and support depends on the specific browser.",
+    "searchText": "Good to know\nGood to know\nIntelliSense for CSS class names in HTML\nCSS Hyphens\nNote: Hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defined in the lang attribute of a html element. Not all languages are supported yet, and support depends on the specific browser.",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "boost": "Good to know start/goodtoknow #start/goodtoknow Getting started Guidelines"
+  },
+  {
+    "id": "start/guidelines/color-combinations",
+    "title": "Color combinations",
+    "lead": "For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color. This contrast ensures people with moderately low vision can tell the colors apart and see your content.",
+    "summary": "For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color. This contrast ensures people with moderately low vision can tell the colors apart and see your content.",
+    "searchText": "Color combinations\nFor accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color. This contrast ensures people with moderately low vision can tell the colors apart and see your content.\nColor combinations\nWhite text on brand backgrounds\n\nwhite text on bg-primary\n\nwhite text on bg-secondary\n\nBlack text on highlight backgrounds\n\nblack text on bg-primary\n\nblack text on bg-secondary\nWhite text on gray backgrounds\n\nwhite text on bg-decent\n\nwhite text on bg-lightest\n\nwhite text on bg-lighter\n\nwhite text on bg-light\n\nwhite text on bg-gray\n\nwhite text on bg-dark\n\nwhite text on bg-darker\n\nwhite text on bg-darkest\n\nBlack text on gray backgrounds\n\nblack text on bg-decent\n\nblack text on bg-lightest\n\nblack text on bg-lighter\n\nblack text on bg-light\n\nblack text on bg-gray\n\nblack text on bg-dark\n\nblack text on bg-darker\n\nblack text on bg-darkest\nWhite text on status backgrounds\n\nwhite text on bg-info\n\nwhite text on bg-success\n\nwhite text on bg-warning\n\nwhite text on bg-danger\n\nBlack text on status backgrounds\n\nblack text on bg-info\n\nblack text on bg-success\n\nblack text on bg-warning\n\nblack text on bg-danger\nWhite text on driving status backgrounds\n\nwhite text on bg-status-available\n\nwhite text on bg-status-driving\n\nwhite text on bg-status-resting\n\nwhite text on bg-status-working\n\nBlack text on driving status backgrounds\n\nblack text on bg-status-available\n\nblack text on bg-status-driving\n\nblack text on bg-status-resting\n\nblack text on bg-status-working\nWhite text on highlight backgrounds\n\nwhite text on bg-highlight-decent\n\nwhite text on bg-highlight-lightest\n\nwhite text on bg-highlight-lighter\n\nwhite text on bg-highlight-light\n\nwhite text on bg-highlight\n\nwhite text on bg-highlight-dark\n\nwhite text on bg-highlight-darker\n\nwhite text on bg-highlight-darkest\n\nBlack text on highlight backgrounds\n\nblack text on bg-highlight-decent\n\nblack text on bg-highlight-lightest\n\nblack text on bg-highlight-lighter\n\nblack text on bg-highlight-light\n\nblack text on bg-highlight\n\nblack text on bg-highlight-dark\n\nblack text on bg-highlight-darker\n\nblack text on bg-highlight-darkest\nGray text on gray backgrounds\n\ndecent text on bg-decent\n\nlightest text on bg-decent\n\nlighter text on bg-decent\n\nlight text on bg-decent\n\ngray text on bg-decent\n\ndark text on bg-decent\n\ndarker text on bg-decent\n\ndarkest text on bg-decent\n\ndecent text on bg-lightest\n\nlightest text on bg-lightest\n\nlighter text on bg-lightest\n\nlight text on bg-lightest\n\ngray text on bg-lightest\n\ndark text on bg-lightest\n\ndarker text on bg-lightest\n\ndarkest text on bg-lightest\n\ndecent text on bg-lighter\n\nlightest text on bg-lighter\n\nlighter text on bg-lighter\n\nlight text on bg-lighter\n\ngray text on bg-lighter\n\ndark text on bg-lighter\n\ndarker text on bg-lighter\n\ndarkest text on bg-lighter\n\ndecent text on bg-light\n\nlightest text on bg-light\n\nlighter text on bg-light\n\nlight text on bg-light\n\ngray text on bg-light\n\ndark text on bg-light\n\ndarker text on bg-light\n\ndarkest text on bg-light\n\ndecent text on bg-gray\n\nlightest text on bg-gray\n\nlighter text on bg-gray\n\nlight text on bg-gray\n\ngray text on bg-gray\n\ndark text on bg-gray\n\ndarker text on bg-gray\n\ndarkest text on bg-gray\n\ndecent text on bg-dark\n\nlightest text on bg-dark\n\nlighter text on bg-dark\n\nlight text on bg-dark\n\ngray text on bg-dark\n\ndark text on bg-dark\n\ndarker text on bg-dark\n\ndarkest text on bg-dark\n\ndecent text on bg-darker\n\nlightest text on bg-darker\n\nlighter text on bg-darker\n\nlight text on bg-darker\n\ngray text on bg-darker\n\ndark text on bg-darker\n\ndarker text on bg-darker\n\ndarkest text on bg-darker\n\ndecent text on bg-darkest\n\nlightest text on bg-darkest\n\nlighter text on bg-darkest\n\nlight text on bg-darkest\n\ngray text on bg-darkest\n\ndark text on bg-darkest\n\ndarker text on bg-darkest\n\ndarkest text on bg-darkest\nStatus text on highlight backgrounds\n\ninfo text on bg-highlight-decent\n\nsuccess text on bg-highlight-decent\n\nwarning text on bg-highlight-decent\n\ndanger text on bg-highlight-decent\n\ninfo text on bg-highlight-lightest\n\nsuccess text on bg-highlight-lightest\n\nwarning text on bg-highlight-lightest\n\ndanger text on bg-highlight-lightest\n\ninfo text on bg-highlight-lighter\n\nsuccess text on bg-highlight-lighter\n\nwarning text on bg-highlight-lighter\n\ndanger text on bg-highlight-lighter\n\ninfo text on bg-highlight-light\n\nsuccess text on bg-highlight-light\n\nwarning text on bg-highlight-light\n\ndanger text on bg-highlight-light\n\ninfo text on bg-highlight\n\nsuccess text on bg-highlight\n\nwarning text on bg-highlight\n\ndanger text on bg-highlight\n\ninfo text on bg-highlight-dark\n\nsuccess text on bg-highlight-dark\n\nwarning text on bg-highlight-dark\n\ndanger text on bg-highlight-dark\n\ninfo text on bg-highlight-darker\n\nsuccess text on bg-highlight-darker\n\nwarning text on bg-highlight-darker\n\ndanger text on bg-highlight-darker\n\ninfo text on bg-highlight-darkest\n\nsuccess text on bg-highlight-darkest\n\nwarning text on bg-highlight-darkest\n\ndanger text on bg-highlight-darkest",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "boost": "Color combinations start/guidelines/color-combinations #start/guidelines/color-combinations Getting started Guidelines"
+  },
+  {
+    "id": "start/guidelines/custom-css",
+    "title": "Avoid writing custom CSS",
+    "lead": "Maintaining CSS will become harder over time due to various reasons like growing amount of styles, old and unknown overwrites, exchange of Team members etc.",
+    "summary": "Maintaining CSS will become harder over time due to various reasons like growing amount of styles, old and unknown overwrites, exchange of Team members etc.",
+    "searchText": "Avoid writing custom CSS\nMaintaining CSS will become harder over time due to various reasons like growing amount of styles, old and unknown overwrites, exchange of Team members etc.\nAvoid writing custom CSS\nGetting more familiar with Bootstrap and the UIKIT will speed up your development and keep the maintenance of custom styles low.\n\nTherefore, avoid writing custom CSS where possible and try to achieve the desired results by using\nCustom CSS\nIf the UIKIT colors do not fit your needs, you have the option to use 5 additional custom color vars.\n\nYou just have to add those css vars to the index.html head and than you can use the following classes. bg-custom-a, text-color-custom-a, fill-custom-a.\n\nhtml\n<head\n<style\n:root {\n--custom-color-a: #5eff1e;\n--custom-color-b: #e51eff;\n--custom-color-c: #1e90ff;\n--custom-color-d: #ff4b1e;\n--custom-color-e: #ffcb1e;\n}\n</style\n</head\n\nhtml\n<div class=\"bg-custom-a\"\n<p class=\"text-color-custom-b\"\n<svg class=\"fill-custom-c\"</svg\n</p\n</div",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "boost": "Avoid writing custom CSS start/guidelines/custom-css #start/guidelines/custom-css Getting started Guidelines"
+  },
+  {
+    "id": "start/guidelines/custom-rioglyph",
+    "title": "Custom RIOglyph icon",
+    "lead": "To use a custom Rioglyph icon, there are two different approaches:",
+    "summary": "To use a custom Rioglyph icon, there are two different approaches:",
+    "searchText": "Custom RIOglyph icon\nTo use a custom Rioglyph icon, there are two different approaches:\nCustom RIOglyph icon\n1. Use an inline style with a CSS variable\n2. Define a CSS class that applies an SVG as a mask-image\n\nBelow is an example of both approaches:\n\nApproach 1: Inline style\n\nhtml\n<span class=\"rioglyph\" style=\"--i: url(https://cdn.rio.cloud/images/uikit/reactlogo.svg);\"</span\n\nApproach 2: Custom CSS class\n\nhtml\n<style\n.rioglyph-custom-xxx {\n--i: url('https://cdn.rio.cloud/images/uikit/reactlogo.svg');\n}\n</style\n\nhtml\n<span class=\"rioglyph rioglyph-custom\"</span",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "boost": "Custom RIOglyph icon start/guidelines/custom-rioglyph #start/guidelines/custom-rioglyph Getting started Guidelines"
+  },
+  {
+    "id": "start/guidelines/formatting",
+    "title": "Formatting guide",
+    "lead": "Having a common date formatting guide is crucial to ensure consistency, clarity, and accuracy in documentation, making it easier to understand and interpret dates correctly across different contexts.",
+    "summary": "Having a common date formatting guide is crucial to ensure consistency, clarity, and accuracy in documentation, making it easier to understand and interpret dates correctly across different contexts.",
+    "searchText": "Formatting guide\nHaving a common date formatting guide is crucial to ensure consistency, clarity, and accuracy in documentation, making it easier to understand and interpret dates correctly across different contexts.\nFormatting guide\nHere's what you will find in the formatting guide\n- Date formats\n- Date formats overview If nothing else is specified use the default date format: YYYY-MM-DD Avoid the American date format: MM/DD/YYYY Use the Intl.DateTimeFormat to format dates for all locales Date and time format Format durations Formatting dates for headlines and sections Relative date and time Time format including timezones\n- Number formats\n- Number formats overview Omit unused or meaningless decimals Formatting numbers with units\n\n- Date formats overview\n- If nothing else is specified use the default date format: YYYY-MM-DD\n- Avoid the American date format: MM/DD/YYYY\n- Use the Intl.DateTimeFormat to format dates for all locales\n- Date and time format\n- Format durations\n- Formatting dates for headlines and sections\n- Relative date and time\n- Time format including timezones\n\n- Number formats overview\n- Omit unused or meaningless decimals\n- Formatting numbers with units\nDate formats\nDate formats overview\nThis is a list of all supported langues and their respective date format showcasing also similar locales sharing the same format.\nIf nothing else is specified use the default date format: YYYY-MM-DD\nThis format is defined in the ISO 8601 standard, which is maintained by the International Organization for Standardization (ISO). It's widely used for data exchange and communication because it:\n\n- Sorts chronologically: Dates appear in order when sorted alphabetically (e.g., 2023-12-31 comes before 2024-01-01).\n- Avoids ambiguity: The clear separation between year, month, and day eliminates confusion, especially when dealing with different cultural date order preferences.\n\nWhile some countries have their own preferred date formats for everyday use, YYYY-MM-DD is often the chosen format for:\n\n- International communication\n- Data storage and exchange\n- Software applications\n\nIn the table above, Swedish (sv-SE) is the only locale listed that uses YYYY-MM-DD as the standard format. However, the international nature of the internet and technology has made YYYY-MM-DD increasingly familiar in many regions.\n\nIf nothing else is specified use the default date format otherwise use the date format according the selected locale.\nAvoid the American date format: MM/DD/YYYY\nWhile there's nothing inherently wrong with the American date format (MM/DD/YYYY), it's recommended to avoid it as the default for the following reasons:\n\n- Non-standard: It's not the international standard format defined by ISO 8601 (YYYY-MM-DD). This can lead to confusion and potential errors when exchanging data or collaborating with international teams.\n- Ambiguity: MM/DD/YYYY can be misinterpreted, especially when dealing with unfamiliar dates. For example, 05/07/2024 could be May 7th or July 5th.\n- Sorting Issues: Dates in MM/DD/YYYY format don't sort chronologically by default. This can be problematic when handling lists or data sets involving dates.\n- Limited Reach: The American date format is primarily used in the United States, Canada, and a few other countries. Using a more widely recognized format like YYYY-MM-DD promotes better international understanding.\n\nHint for Date Pickers\n\nBe aware that some date picker components might default to the American format (MM/DD/YYYY) if no locale is explicitly defined. Double-check your date picker's settings to ensure it aligns with these guidelines.\nUse the Intl.DateTimeFormat to format dates for all locales\nWhen formatting dates in React applications, you have two choices:\n\n- Vanilla Intl.DateTimeFormat: Use the standard function.\n- ReactIntl (recommended): Utilize ReactIntl's formatDate function or the FormattedDate component for a more convenient and potentially reusable approach.\n\nRegardless of the chosen method (direct function or ReactIntl), you'll have access to the same set of formatting options for customizing the date output with Intl.DateTimeFormat.\n\nThe default date and time format for the default locale \"en-GB\" looks like this: 27/05/2024\n\njsx\n<FormattedDate value={new Date()} year='numeric' month='2-digit' day='2-digit' /\n\njavascript\nconst formatDate = (date, locale) ={\nconst options = {\nyear: 'numeric',\nmonth: '2-digit',\nday: '2-digit'\n};\n\nconst formatter = new Intl.DateTimeFormat(locale, options);\nreturn formatter.format(date);\n}\n\nconst locales = [\n'bg-BG', 'cs-CZ', 'da-DK', 'el-GR', 'es-ES', 'et-EE', 'fi-FI', 'fr-FR',\n'hr-HR', 'hu-HU', 'it-IT', 'lt-LT', 'lv-LV', 'nb-NO', 'nl-NL', 'pl-PL',\n'pt-PT', 'ro-RO', 'sk-SK', 'sl-SI', 'sv-SE', 'de-DE', 'pt-BR', 'en-GB'\n];\n\nconst today = new Date();\n\nlocales.forEach(locale ={\nconst formattedDate = formatDate(today, locale);\nconsole.log(Locale: ${locale}, Formatted date: ${formattedDate});\n});\n\nFormatting a date range\n\nFor formatting a time range use the ReactIntl FormattedDateTimeRange component. Note that for dates in headlines or in sections, there is a dedicated format rule listed below.\n\njsx\n() ={\nconst yesterday = new Date();\nyesterday.setDate(new Date().getDate() - 1);\n\nreturn <FormattedDateTimeRange from={yesterday} to={new Date()} /;\n})\nDate and time format\nNone of the mentioned locales use a 12-hour format by default according to common usage. Here's a breakdown:\n\n- All the listed locales (including en-GB) typically use the 24-hour format for displaying time.\n- While some countries might use a 12-hour format in informal contexts, the 24-hour format is generally preferred for official communication and technical applications.\n\nThe default date and time format looks like this: 27/05/2024, 11:17\n\njsx\n<FormattedDate value={new Date()} year='numeric' month='2-digit' day='2-digit' hour='2-digit' minute='2-digit' /\n\njavascript\nconst formatDateTime = (date, locale) ={\nconst options = {\nyear: 'numeric',\nmonth: '2-digit',\nday: '2-digit',\nhour: '2-digit',\nminute: '2-digit'\n};\n\nconst dateTimeFormatter = new Intl.DateTimeFormat(locale, options);\nreturn dateTimeFormatter.format(date);\n}\n\nconst locales = [\n'bg-BG', 'cs-CZ', 'da-DK', 'el-GR', 'es-ES', 'et-EE', 'fi-FI', 'fr-FR',\n'hr-HR', 'hu-HU', 'it-IT', 'lt-LT', 'lv-LV', 'nb-NO', 'nl-NL', 'pl-PL',\n'pt-PT', 'ro-RO', 'sk-SK', 'sl-SI', 'sv-SE', 'de-DE', 'pt-BR', 'en-GB'\n];\n\nconst today = new Date();\n\nlocales.forEach(locale ={\nconst formattedDateTime = formatDateTime(today, locale);\nconsole.log(Locale: ${locale}, Formatted date time: ${formattedDateTime});\n});\nFormatting dates for headlines and sections\nWhen formatting a date or a date range for a headline or a section, use the following format including the weekday if it's not today. If the date is today, add the word \"today\" instead of the weekday.\n\n- Today, 24 May 2024\n- Thursday, 23 May 2024\n- 12 Feb - 16 Feb 2024\n\njsx\n() ={\nconst yesterday = new Date();\nyesterday.setDate(new Date().getDate() - 1);\n\nreturn (\n<\n{'Today, '}\n<FormattedDate value={new Date()} year='numeric' month='short' day='numeric' /\n<br /\n<FormattedDate value={yesterday} year='numeric' month='short' day='numeric' weekday='long' /\n</\n);\n})\n\njavascript\nfunction formatDateWithWeekday(date) {\nconst today = new Date();\nconst isToday =\ntoday.getDate() === date.getDate() &&\ntoday.getMonth() === date.getMonth() &&\ntoday.getFullYear() === date.getFullYear();\n\nconst options = {\nday: 'numeric',\nmonth: 'short',\nyear: 'numeric',\nweekday: isToday ? undefined : 'long',\n};\n\nconst dateTimeFormatter = new Intl.DateTimeFormat('en-GB', options);\nreturn isToday ? Today, ${dateTimeFormatter.format(date)} : dateTimeFormatter.format(date);\n}\n\n// Example for today\nconst today = new Date();\nconst formattedDate = formatDateWithWeekday(today);\nconsole.log(formattedDate);\n\n// Example for yesterday\nconst yesterday = new Date();\nyesterday.setDate(today.getDate() - 1); // Subtract 1 day from today\nconst formattedDateYesterday = formatDateWithWeekday(yesterday);\nconsole.log(formattedDateYesterday);\n\nFormatting a date range for headlines\n\nWhen the date rage has the same year for both dates, omit the year for the first date so it looks like this: 27 May - 28 May 2024\n\njsx\n() ={\nconst yesterday = new Date();\nyesterday.setDate(new Date().getDate() - 1);\n\nreturn (\n<\n<FormattedDate value={yesterday} month='short' day='numeric' /\n{' - '}\n<FormattedDate value={new Date()} year='numeric' month='short' day='numeric' /\n</\n);\n})\n\njavascript\nfunction formatDateRange(startDate, endDate) {\nif (!(startDate instanceof Date) || !(endDate instanceof Date)) {\nthrow new Error(\"Invalid input. Please provide valid Date objects.\");\n}\n\nconst startDateFormatter = new Intl.DateTimeFormat('en-GB', {\nday: 'numeric',\nmonth: 'short'\n});\n\nconst endDateFormatter = new Intl.DateTimeFormat('en-GB', {\nday: 'numeric',\nmonth: 'short',\nyear: 'numeric'\n});\n\nconst formattedStartDate = startDateFormatter.format(startDate);\nconst formattedEndDate = endDateFormatter.format(endDate);\n\nreturn ${formattedStartDate} - ${formattedEndDate};\n}\n\n// Example usage\nconst startDate = new Date(2024, 1, 12); // Feb 12, 2024\nconst endDate = new Date(2024, 1, 16); // Feb 16, 2024\n\nconst formattedRange = formatDateRange(startDate, endDate);\nconsole.log(\"Formatted Date Range:\", formattedRange);\nFormat durations\nUse relative date and time formatting to help the understand quickly when an event happened or when a message has been sent:\n\n- 3 days\n- 2h 32min\n- 45min\n\nBest for: Short durations where hours and minutes are the most relevant unit.\n\n- 3d\n- 3m 20s\n- 10s\n\nBest for: When space is limited, and clarity is still maintained. Example: In a compact playlist view displaying track lengths.\n\njsx\n<FormattedNumber value={2} /h <FormattedNumber value={45} /min\nRelative date and time\n- \"5 minutes ago\"\n- \"1 month ago\"\n- \"7 days ago\"\n- \"In 2 hours\"\n- \"Now\" or \"Just now\" (for events within the last minute)\n\n- Displaying when a notification arrived or a message was sent\n- Counting down to an upcoming event\n- Indicating how recently an item was updated\n- Benefits\n- Clear and concise for recent events Easy for users to understand the time difference\n\n- Clear and concise for recent events\n- Easy for users to understand the time difference\n\nUsing a relative time is simple by using the ReactIntl FormattedRelativeTime component.\n\nExample: now\n\njsx\n<FormattedRelativeTime value={0} numeric='auto' updateIntervalInSeconds={1} /\n\n- \"Yesterday\"\n- \"Yesterday, 10:39\"\n- \"Today, 12:17\"\n- \"Tomorrow\"\n- \"Last week\"\n- \"Next Friday\"\n- \"In 3 days\"\n\n- Displaying upcoming or past calendar events\n- Highlighting recent activity within a timeframe (e.g., \"Top posts from the past week\")\n- Providing deadlines or due dates in a user-friendly way\n- Benefits\n- Intuitive understanding for users familiar with common timeframes Reduces mental calculations for interpreting absolute dates\n\n- Intuitive understanding for users familiar with common timeframes\n- Reduces mental calculations for interpreting absolute dates\n\nThe choice between relative and absolute formats depends on the context and desired level of precision:\n\n- Use relative formats: When the time difference or date proximity is more important than the exact timestamp. Example: \"Your flight departs in 2 hours\" is more relevant than \"Your flight departs at 14:30\".\n- Use absolute formats: When precise timestamps are crucial, or for long time spans where relative terms become ambiguous.\n\nExample for an upcoming event using ReactIntl: In 3 Days\n\njsx\n<FormattedRelativeTime value={0} numeric='auto' updateIntervalInSeconds={1} /\n\n- Locale and cultural context: Relative terms like \"yesterday\" or \"next week\" might vary across languages and cultures. Consider user locale when implementing these formats.\n- Level of detail: You might need to adjust the granularity of relative formats. For example, \"3 weeks ago\" might be more appropriate than \"21 days ago\" depending on the context.\nTime format including timezones\nUnderstanding time zones can be challenging\n\nWhile time zones are essential for global coordination, navigating them can be complex. Most users naturally think and schedule their activities in their local time zone. Concepts like Coordinated Universal Time (UTC) and daylight saving time (DST) can add layers of complexity.\n\nThis table lists the main timezones used across Europe, including their standard times and any daylight saving times. Note that some regions do not observe daylight saving time.\n\nStudies show that users think in their local time - users often don’t think about UTC at all. Nor do they understand time zones, or the difference between UTC and GMT, or when and where daylight saving times are. But GMT is a more familiar time standard than UTC (even though UTC is the correct time standard). Since the UTC and GMT have the same offset and is widely more common in user interfaces, it is recommended to show GTM to the user instead of UTC.\n\nFor optimal clarity and consistency, it's best to display time zone offsets like GMT+1:00 without a blank space before the \"+\" symbol.\n\nPrioritize the user's local time\n\nTo simplify the user's experience, we prioritize displaying times in your local time zone. This eliminates the need for manual conversions or deciphering time zone differences.\n\nTime zone transparency\n\nWhile we present times in the user's local time zone by default, we understand the importance of transparency. If needed, you can display information regarding the corresponding GMT time.\n\n- Primary display: Show times in the user's local timezone for ease of use\n- Secondary display: Include the GMT offset in smaller text or tooltips to provide additional context\n\nTotal duration matters\n\nFor situations with multiple locations and time zones, providing a clear \"total travel time\" or \"duration\" alongside the individual departure and arrival times is incredibly helpful. This provides a comprehensive picture of the overall journey, just like the best travel itineraries do.\n\nEvent-Based timezones\n\nFor events, show both the local time and the event's original timezone. For example, \"Meeting scheduled for 15:00 (CEST) / 16:00 (EEST)\n\nLocalizing time displays for various European countries\n\nWhen localizing time displays for German-speaking users, remember to append the term \"Uhr\" (with a blank separator) after the hour when displaying times in a 24-hour format to ensure accurate and culturally appropriate representation.\n\nThis table provides a comprehensive overview of how to handle time display formats across various European countries, ensuring localized and accurate time representations.\n\n- Constitution Day 23/05/2024, 3 days ago\n- Assumption Day 15/08/2024, in 64 days\nNumber formats\nNumber formats overview\nThis is a list of all supported langues and their respective country, decimal separator, thousand separator, and an example of a formatted number.\n\nBest practices for number formatting\n\n- Locale awareness Always format numbers based on the user’s locale settings to ensure familiarity and reduce errors\n- Consistent use of delimiters Ensure the consistent use of decimal and thousand separators as per the locale’s conventions\n- Handling edge cases Be aware of edge cases like negative numbers, very large numbers, and numbers with many decimal places\n- Use libraries Utilize libraries like ReactIntl to handle number formatting, which provides built-in support for multiple locales and ensures correctness\n\njsx\nconst NumberFormattingExample = () ={\nconst number = 1234567.89;\n\nreturn (\n<IntlProvider locale=\"de-DE\"\n<FormattedNumber value={number} /\n</IntlProvider\n);\n};\n\nIn this example, the number 1234567.89 will be formatted as 1.234.567,89 in the German locale.\nOmit unused or meaningless decimals\nWhen displaying numbers with units, it's often more readable and professional to omit unnecessary trailing zeros in decimal places. For instance, displaying \"123 km\" instead of \"123.0 km\" when the value is a whole number.\n\nAdditionally, decimals should be omitted in cases where they do not add meaningful information, such as in a fuel level \"74,87 %\".\n\njsx\n<FormattedNumber\nvalue={123.0}\nminimumFractionDigits={0}\nmaximumFractionDigits={2}\nstyle='unit'\nunit='kilometer'\n/\n\n123 km 1,234 km Fuel level: 75%\n\n123.0 km 1234.0 km Fuel level: 74,87 %\nFormatting numbers with units\nReactIntl also supports formatting units like currency, percentages, and other measurements. Here are some examples on how to format numbers with units.\n\n* Note: kilowatt-hour and megawatt-hour are not yet supported byIntl.NumberFormat(). Please append the unit manually. For more details, see here\n\njsx\nconst NumberExample = () ={\nconst value = 1234.56;\nreturn (\n<table className='table table-condensed'\n<tbody\n<tr\n<tdKilograms</td\n<td\n<FormattedNumber value={value} style='unit' unit='kilogram' /\n</td\n</tr\n<tr\n<tdKilometer</td\n<td\n<FormattedNumber value={value} style='unit' unit='kilometer' /\n</td\n</tr\n<tr\n<tdKilometer (long)</td\n<td\n<FormattedNumber value={value} style='unit' unit='kilometer' unitDisplay='long' /\n</td\n</tr\n<tr\n<tdMeters</td\n<td\n<FormattedNumber value={value} style='unit' unit='meter' /\n</td\n</tr\n<tr\n<tdSeconds (long)</td\n<td\n<FormattedNumber value={45} style='unit' unit='second' unitDisplay='long' /\n</td\n</tr\n<tr\n<tdMinutes (long)</td\n<td\n<FormattedNumber value={12} style='unit' unit='minute' unitDisplay='long' /\n</td\n</tr\n<tr\n<tdCentimeters</td\n<td\n<FormattedNumber value={34} style='unit' unit='centimeter' /\n</td\n</tr\n<tr\n<tdPercent</td\n<td\n<FormattedNumber value={0.1234} style='percent' /\n</td\n</tr\n<tr\n<tdEuro</td\n<td\n<FormattedNumber value={value} style='currency' currency='EUR' /\n</td\n</tr\n<tr\n<tdKilobyte</td\n<td\n<FormattedNumber value={1000} style='unit' unit='kilobyte' unitDisplay='narrow' /\n</td\n</tr\n<tr\n<tdCelsius</td\n<td\n<FormattedNumber value={27} style='unit' unit='celsius' unitDisplay='narrow' /\n</td\n</tr\n<tr\n<tdDuration</td\n<td\n<FormattedNumber value={2} /h <FormattedNumber value={45} /\nmin\n</td\n</tr\n</tbody\n</table\n)\n};\n\nIn Germany, the correct unit format for kilogram is \"kg\" with a lowercase \"k\" and \"g\". It follows the international standard for unit symbols defined by the International System of Units (SI).\n\nHere's an example of the correct usage:\n\n- Correct: 1.234,56 kg\n- Incorrect: 1.234,56 Kg\n\nThe unit symbol should always be in lowercase and a space should be used between the number and the unit symbol\n\nNote: When formatting durations in a short format, ReactIntl does not follow the more common style defined in the section \"Format durations\" especially for locales like de-DE. In this case we need to combine the FormattedNumber with a custom unit.\n\njsx\n<FormattedNumber value={2} /h <FormattedNumber value={45} /min\n\ntsx\ntype FormattedDuration = {\nhours?: number,\nminutes?: number,\nseconds?: number,\n};\n\nconst FormattedDuration = ({ hours, minutes, seconds }) ={\nconst hasHours = hours 0;\nconst hasMinutes = minutes 0;\nconst hasSeconds = seconds 0;\n\nreturn (\n<div\n{hasHours && (\n<\n<FormattedNumber value={hours} /h\n{hasMinutes && ' '}\n</\n)}\n{hasMinutes && (\n<\n<FormattedNumber value={minutes} /min\n{hasSeconds && ' '}\n</\n)}\n{hasSeconds && (\n<\n<FormattedNumber value={seconds} /s\n</\n)}\n</div\n);\n};\n\n// Example Usage\nconst App = () ={\nconst duration1 = { hours: 8, minutes: 45 };\nconst duration2 = { hours: 0, minutes: 56 };\nconst duration3 = { hours: 1, minutes: 23 };\n\nreturn (\n<div\n<FormattedDuration {...duration1} /\n<FormattedDuration {...duration2} /\n<FormattedDuration {...duration3} /\n</div\n);\n};",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "boost": "Formatting guide start/guidelines/formatting #start/guidelines/formatting Getting started Guidelines"
+  },
+  {
+    "id": "start/guidelines/iframe",
+    "title": "Iframe guidelines",
+    "lead": "When having a widget, the widget class is-iframe-widget needs to be added to the document HTML element <html class=\"is-iframe-widget\">",
+    "summary": "When having a widget, the widget class is-iframe-widget needs to be added to the document HTML element <html class=\"is-iframe-widget\">",
+    "searchText": "Iframe guidelines\nWhen having a widget, the widget class is-iframe-widget needs to be added to the document HTML element <html class=\"is-iframe-widget\">\nIframe guidelines\nWorking with iframes\nThe window-iframe class will be added by the RIO UIKIT automatically, but you have to add the RIO Pageloader to your SPA for that.\n\nTo integrate a widget iframe seamlessly and to avoid scrolling within an iframe, we use the 3rd party lib iframe-resizer-react from https://www.npmjs.com/package/iframe-resizer-react. Both views, the parent (which displays the iframe) and the child (which is the iframe content) needs to import the iframe-resizer.\n\nParent application\n\nUse this if you want to embed an iframe into your application.\n\njs\nimport IframeResizer from 'iframe-resizer-react';\n\nChild application\n\nUse this if your application is a widget and will be embedded into other applications via an iframe.\n\njs\nnpm install iframe-resizer --save\n\nFor more information vist https://github.com/davidjbradshaw/iframe-resizer\n\njs\nimport iframeResizerContentWindow from 'iframe-resizer/js/iframeResizer.contentWindow';\n\nor simply\n\njs\nimport 'iframe-resizer/js/iframeResizer.contentWindow';\n\nAlternatively, you can add the iframe contentWindow script from a public CDN into yourindex.html\n\nhtml\n<script\ndefer\ntype='text/javascript'\nsrc='https://cdn.rio.cloud/libs/iframeResizer/4.2.8/iframeResizer.contentWindow.min.js'\n</script\niframe in Fullscreen Dialog\nWhen having an iframe within a Dialog, for example to display a full fledged SPA, there are two ways to hide the SPA navigation. The best and cleanest way is to hide the navigation in the SPA, when it is loaded in an iframe. Another way is to use our no-application-header class. The iframe then has to be wrapped in a iframe-wrapper element.\n\nRIO iframes are transparent by default, also the SPA itself. Because of that you have to add the class \"bg-lighter\" to the iframe.\nAdditional iframe classes\n- Use unstyled to remove default iframe styling (Not necessary for widgets when using the iframe-resizer)\n- Use full-width for a full width iframe (Not necessary for widgets when using the iframe-resizer)\n- Use full-window for a full window (height/width) iframe based in the parent container\n- Use no-application-header for adding a -50px offset to hide the SPA navigation. Better solution is to not render the navigation within the iframe!\n- Use bg-XXX for having a iframe background color, as the default is transparent\nOpen fullscreen dialog\nOpen a widget dialog in the parent application\nWhen it comes to opening a modal dialog from within an iframe, there's flexibility in how it can be presented. Depending on the context, the dialog might overlay the iframe content itself or seamlessly cover the entire parent application.\n\nFor opening a dialog in the parent application, the process typically involves sending a postMessage event from the iframe to the parent window. Upon receiving this event, the parent application responds by rendering a simple dialog, such as an InfoDialog, which includes another iframe pointing to a specific route within the widget. This embedded view then displays the dialog content and manages the dialog's close events. When it's time to close the dialog, the embedded view sends another postMessage to the parent application. This event allows the dialog view to send any necessary data back to the originating iframe.",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "boost": "Iframe guidelines start/guidelines/iframe #start/guidelines/iframe Getting started Guidelines"
+  },
+  {
+    "id": "start/guidelines/obfuscate-data",
+    "title": "Obfuscate data",
+    "lead": "This demo demonstrates how sensitive data marked with the data-pii=\"visible\" attribute can be obfuscated directly in the frontend.",
+    "summary": "This demo demonstrates how sensitive data marked with the data-pii=\"visible\" attribute can be obfuscated directly in the frontend.",
+    "searchText": "Obfuscate data\nThis demo demonstrates how sensitive data marked with the data-pii=\"visible\" attribute can be obfuscated directly in the frontend.\nObfuscate data\nYou can enable the feature either by using the keyboard shortcut Ctrl / CMD + Shift + U or by adding the data-hide-pii=\"shuffle\" attribute to the <htmlelement.\n\nPressing the shortcut once will shuffle the data. Pressing it again will apply a text mask. If you want to enforce one variant on page load, you can add data-hide-pii=\"shuffle\" or data-hide-pii=\"mask\" to the <htmlelement. By pressing the shortcut a third time, the original value will be visible again.\n\nDynamically added elements will immediately be obfuscated as long as the HTML attribute is available.\n\nWhat happens in detail:\n\n- Names: Non-letter characters are removed, the token is padded to at least 6 characters, shuffled, and returned in title-case. Pure-digit or non-letter tokens remain unchanged.\n- Emails: Punctuation is removed, each part is padded to 6 characters, shuffled and suffixed with .xx based on the browser locale.\n- Phone numbers: International prefixes (after +) are preserved, the remaining digits are shuffled, and original separators (spaces, dashes, parentheses) are kept.\n\nThis is useful for:\n\n- Debug or demo environments, where you want realistic data structure but no real identities.\n- Screenshot or recording safety, ensuring you don’t leak PII in support sessions or analytics.\n- QA/testing, to verify UI behavior without showing live customer data.\n\nTip: Use the \"Load more\" button to dynamically reveal additional obfuscated employees.",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "boost": "Obfuscate data start/guidelines/obfuscate-data #start/guidelines/obfuscate-data Getting started Guidelines"
+  },
+  {
+    "id": "start/guidelines/print-css",
+    "title": "Print CSS",
+    "lead": "The UIKIT supports simple print stylings in order to have printable content. Those print styles are supposed to do basic printing and should not replace server side PDF`s.",
+    "summary": "The UIKIT supports simple print stylings in order to have printable content. Those print styles are supposed to do basic printing and should not replace server side PDF`s.",
+    "searchText": "Print CSS\nThe UIKIT supports simple print stylings in order to have printable content. Those print styles are supposed to do basic printing and should not replace server side PDF`s.\nPrint CSS\nUtility classes\nA lot of our utility classes are available for different breakpoints and are already marked with aRESPONSIVElabel.\n\nNow those classes also are available forPRINT media queries.Example: display-inline-lsdisplay-block-print\n\nDo not forget to include the needed print css file. See \"How to\" for more information.\nPrint area\nActivate the UIKIT print styles by adding printable-content to any wrapping container of ApplicationLayoutBody or\n\nApplicationLayoutSidebarin combination with the class print-area to one of them for having scoped printable content.\n\nhtml\n<body class=\"printable-content\"\n<div class=\"ApplicationLayoutSidebar print-area\"</div\n</body\n\nWe suggest to add the class temporarily (1 second) when clicking a button and then trigger window.print()\nPrint content\nBy adding the class non-printable to any element, you can hide it while printing.",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "boost": "Print CSS start/guidelines/print-css #start/guidelines/print-css Getting started Guidelines"
+  },
+  {
+    "id": "start/guidelines/spinner",
+    "title": "Loading guidelines",
+    "lead": "There are various approaches when it comes to loading data and showing the user the different stages of the loading process.",
+    "summary": "There are various approaches when it comes to loading data and showing the user the different stages of the loading process.",
+    "searchText": "Loading guidelines\nThere are various approaches when it comes to loading data and showing the user the different stages of the loading process.\nLoading guidelines\nHere are some examples of using a Spinner to achieve a loading text and displaying loading results, either alone or in combination with other elements.\n\nLoading state in buttons\n\nUsing spinner as part of a button. This is useful to show an ongoing operation without removing the current UI or closing a form dialog and to show errors when operation failed.\n\nLoading state in buttons within tables\n\nThere are two ways to display a spinner inside a button when a long-running task is initiated. If the initial button doesn't have an icon, you can utilize the .btn-loading-overlay class to prevent the button size from changing. However, if the button already has an icon, you can substitute it with a spinner.\n\nIt is not recommended to use a button as .btn-block or to set it to 100% width as this can result in excessively large buttons when the column size is not specified or is too wide.\n\nLoading state in tables\n\nInstead of showing a spinner floating underneath an empty table, put it in a row at least. Don't show a table header alone without a tbody.\n\nIn some cases it is better to use placeholder for content to show the layout and some structure. Here you can use the ContentLoader to render the component without actual real values.\nLoading\nNo trucks to show\nNo trucks to show\nAdd truck\nClick meGenerating sunshine\nGenerating foobar\nColumn 1Column 2\n\nLorem ipsumFoobar\nColumn 1Column 2\n\nLorem ipsumFoobar\nColumn 1Column 2Column 3Column 4\nColumn 1Column 2Column 3Column 4\nLoading...\nLoading...Loading...Loading...\nColumn 1Column 2Column 3Column 4\n\nLoading...Loading...Loading...Loading...\nLoading...Loading...Loading...Loading...\nLoading...Loading...Loading...Loading...",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "boost": "Loading guidelines start/guidelines/spinner #start/guidelines/spinner Getting started Guidelines"
+  },
+  {
+    "id": "start/guidelines/supported-browsers",
+    "title": "Supported Browsers",
+    "lead": "We currently support the following browsers:",
+    "summary": "We currently support the following browsers:",
+    "searchText": "Supported Browsers\nWe currently support the following browsers:\nSupported Browsers",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "boost": "Supported Browsers start/guidelines/supported-browsers #start/guidelines/supported-browsers Getting started Guidelines"
+  },
+  {
+    "id": "start/guidelines/writing",
+    "title": "Writing style guide",
+    "lead": "UX writing doesn't receive as much attention as it should. In the past, digital experiences featured words written by different individuals - ranging from designers to engineers — at various times and in diverse styles, all without a centralized guide.",
+    "summary": "UX writing doesn't receive as much attention as it should. In the past, digital experiences featured words written by different individuals - ranging from designers to engineers — at various times and in diverse styles, all without a centralized guide.",
+    "searchText": "Writing style guide\nUX writing doesn't receive as much attention as it should. In the past, digital experiences featured words written by different individuals - ranging from designers to engineers — at various times and in diverse styles, all without a centralized guide.\nWriting style guide\nConsequently, the language sometimes proves to be confusing, lacking consistency from one screen to another, and occasionally feels robotic or overly enthusiastic when a more conversational tone is needed.\n\nA good understanding of UX writing plays a pivotal role in creating better digital experiences. If the language within your product is intricate, uninspiring, or unfriendly, it’s likely that users will perceive your product in the same way — complex, uninspiring, and unfriendly.\n\n- Microsoft Writing Style Guide\n- Intuit content design\n- Google’s content design\n- Adobe Spectrum\nHere's what you will find in the RIO’s writing style guide\n- Voice and tone\n- Write like you speak Project friendliness with contractions Get to the point fast Be brief Addressing the user clearly Active and passive voice Focus your message\n- Capitalization\n- Title case vs. sentence case Sentence case rules When in doubt, don’t capitalize Use ALL CAPS only when you should\n- Punctuation\n- Skip periods and unnecessary punctuation Skip colons in headings Use exclamation points sparingly Remember the last comma\n- UI elements\n- Buttons Links Forms Input placeholder Form labels and placeholders Dialogs Error states Notifications\n- Error messages\n- Errors in general Avoid showing a message whenever possible Have the system automatically resolve errors Use plain language, and avoid jargon\n- Commonly misspelled or misformatted words\n\n- Write like you speak\n- Project friendliness with contractions\n- Get to the point fast\n- Be brief\n- Addressing the user clearly\n- Active and passive voice\n- Focus your message\n\n- Title case vs. sentence case\n- Sentence case rules\n- When in doubt, don’t capitalize\n- Use ALL CAPS only when you should\n\n- Skip periods and unnecessary punctuation\n- Skip colons in headings\n- Use exclamation points sparingly\n- Remember the last comma\n\n- Buttons\n- Links\n- Forms\n- Input placeholder\n- Form labels and placeholders\n- Dialogs\n- Error states\n- Notifications\n\n- Errors in general\n- Avoid showing a message whenever possible\n- Have the system automatically resolve errors\n- Use plain language, and avoid jargon\nVoice and tone\n- Clear and understandable\n- Friendly, honest, and responsible\n- Concise and simple\nWrite like you speak\nRead your text aloud. Does it sound like something a real person would say? Be friendly and conversational. No. Robot. Words.\n\nYou need an ID that looks like this: \"someone@example.com\"\n\nInvalid ID\n\nTurn on location service\n\nEnable location service\n\nPreparing video…\n\nBuffering…\n\nThis command isn't supported on your phone\n\nThis command is only supported on dual-core devices\nProject friendliness with contractions\nUse contractions: it’s, you’ll, you’re, we’re, let’s To sound more conversational and natural. Use commonly understood contractions to keep sentences from feeling out-of-touch, robotic, or overly formal.\n\nHowever, sometimes \"do not\" can give more emphasis than \"don't” when caution is needed.\n\n- Avoid contracting nouns with is, does, has, or was. This might make it look like the noun is possessive.\n- Be mindful of how many contractions you use in a sentence. Too many contractions can make things difficult to read.\n- Avoid using contractions when dealing with legal concerns, payment processing, and account security. Casual isn’t always the best style when handling sensitive information.\n\nTo help you avoid traffic, remember anniversaries, and in general do more, RIO needs to know what you’re interested in, what’s on your calendar, and who you’re doing things with. The business is closed\n\nTo help you avoid traffic, remember anniversaries, and in general do more, RIO needs to know what you are interested in, what is on your calendar, and who you are doing things with. The business's closed\nGet to the point fast\nLead with what’s most important. Front-load keywords for scanning. Make customer choices and next steps obvious.\n\nSave time by creating a document template that includes the styles, formats, and page layouts you use most often. Then use the template whenever you create a new document.\n\nTemplates provide a starting point for creating new documents. A template can include the styles, formats, and page layouts you use frequently. Consider creating a template if you often use the same page layout and style for documents.\nBe brief\nGive customers just enough information to make decisions confidently. Prune every excess word.\n\nCreate a chart that's just right for your data by using the Recommended Charts command on the Insert tab.\n\nThe Recommended Charts command on the Insert tab recommends charts that are likely to represent your data well. Use the command when you want to visually present data, and you're not sure how to do it.\n\nRead the instructions that came with your device.\n\nConsult the documentation that came with your device for further instructions.\nAddressing users clearly\nWhen addressing the user directly, it's important to use the second person pronouns 'you' or 'your'' rather than 'my' or 'I.' This choice of words, utilizing 'you,' creates trust and mutual understanding, whereas 'my' can potentially cause confusion among our users. I is also helping the user to feel like the UI is talking to them and referring to their actions.\n\nDon’t combine first and second person. Avoid mixing 'me' or 'my' with 'you' or 'your.'\n\nAn exception to this rule are found in agreements or acknowledgments. For example, “I agree to the terms of service.”\n\nProfile and settings Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam velit commodi sunt nostrum nisi? Voluptas eos dolorum error amet esse. Fugit consequatur obcaecati deleniti! Corrupti praesentium molestiae voluptate a rem.\n\nMy profile & settings Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam velit commodi sunt nostrum nisi? Voluptas eos dolorum error amet esse. Fugit consequatur obcaecati deleniti! Corrupti praesentium molestiae voluptate a rem.\n\nYou seem to be offline Your data isn't available. Try checking your internet connection.\n\nOffline Data not available\nActive and passive voice\nUse active voice in most cases and use passive voice sparingly.\n\n- With active voice, sentences are simpler, shorter, clearer, and more conversational.\n- With passive voice, you can soften and provide distance in select situations (e.g., notification of a disabled account).\n\nActive voice means the subject of the sentence performs the action. With passive voice, the subject receives the action. For avoiding passive voice it often helps to rephrase a message and center it around the object or the actions that someone could undertake.\n\nUsing present tense and an active voice shortens and simplifies our sentences. Past and future tenses, along with passive voice, make our users read more words to convey the same message. Additionally, the active voice ensures we take responsibility for our actions.\n\nOne exception is when you want to specifically emphasize the action over the subject. In some cases, this is fine: Your account was flagged by our Abuse team.\n\nJohn Doe resolved your comment Your payment has been declined Something went wrong\n\nYour comment was resolved by John Doe We declined your payment An error happened\n\nQuickly categorize your transactions The team conducted usability tests with customers We couldn’t save your changes. Try again in a moment. Changes saved 34 invoices sent\n\nYour transactions can quickly be categorized Usability tests were conducted with customers Your changes weren’t saved The system saved your changes You sent 34 invoices\n\nMessage sent\n\nMessage has been sent\nFocus your message\nCreate a hierarchy of information. Lead with the main point or the most important content, in sentences, paragraphs, sections, and pages.\n\nTo remove a photo from this album, drag it to the trash.\n\nDrag a photo to the trash to remove it from this album.\nCapitalization\nTitle case vs. sentence case\nIn most products and websites today, there are two ways to capitalize words:\n\n- Title case: Capitalize every word. This Is Title Case.\n- Sentence case: Capitalize the first word. This is sentence case.\n\nEven though title case looks more formal, serious and provides symmetry especially on buttons or short headlines, it is also harder to implement. Many rules and exceptions behind it are sometimes not easy to understand or to grasp.\n\nSentence case on the other hand is much easier to read especially when the text gets long. It is also easier to define and easier to explain to designers and engineers. No rules for what to capitalize and what no. Sentence case also looks more friendly and casual. It feels more natural and approachable.\nSentence case rules\nUse sentence case, even in headings and titles, labels and buttons.\n\nSentence case is friendly. It helps support the approachable RIO style and brand personality. It also makes translation a bit easier.\n\nSentence case tends to be easier to read and comprehend, especially when CTA labels are more than three words. Also, breadcrumb labels in sentence case are easier to scan.\n\nSentence case improves consistency. In an environment of many independent teams, it’s a lot easier to implement the sentence case.\n\nProper nouns, Products, and branded terms may also be capitalized.\n\nCreate new partner Company name of the partner Cancel Add partner\n\nCreate New Partner Company Name of the Partner Cancel Add Partner\n\nOrder date Transport type Total weight Total volume Dangerous goods Lorem ipsum 1 Kg\n\nOrder Date Transport Type Total Weight Total Volume Dangerous Goods Lorem ipsum 1 Kg\nWhen in doubt, don’t capitalize\nDefault to sentence-style capitalization. Capitalize only the first word of a heading or phrase and any proper nouns or names. Never Use Title Capitalization (Like This).\n\nFind a RIO partner New RIO customer Limited-time offer Join us online\n\nFind a RIO Partner New RIO Customer Limited-Time Offer Join Us Online\n\nA proper noun is a specific name used for an individual person, place, organization, or sometimes thing, which is always capitalized in English. Proper nouns differ from common nouns, which are general names for a class of objects or concepts.\n\nExamples of proper nouns include:\n\n- People: \"John Smith,\" \"Marie Curie\"\n- Places: \"New York,\" \"Mount Everest,\" \"The Nile River\"\n- Organizations: \"Microsoft,\" \"United Nations\"\n- Titles: \"The Great Gatsby,\" \"Time Magazine\"\n\nIn contrast, examples of common nouns include:\n\n- People: \"man,\" \"woman\"\n- Places: \"city,\" \"mountain,\" \"river\"\n- Organizations: \"company,\" \"club\"\n- Titles: \"book,\" \"magazine\"\nUse ALL CAPS only when you should\nAvoid using ALL CAPITAL LETTERS. It’s like screaming, and it may present additional difficulty for reading longer texts. We occasionally display all capital letters in headings on marketing pages, badges (such as NEW, PLUS, or FREE), or navigation labels but of these uses are exceptions.\n\nThere are capitalization exceptions on some marketing pages. To attract new customers and encourage action, marketers might capitalize the word free or some catch phrases. Research proves that the capitals are effective for conversion, but the promotional tone of the capital letters is out of place in the in-product conversation.\nPunctuation\nSkip periods and unnecessary punctuation (\" : ! ?\")\nSkip end punctuation on titles, headings, subheads, UI titles, and items in a list that are three or fewer words. Save the periods for paragraphs and body text. This helps readers scan text more easily.\n\n- Labels\n- Single sentence tooltip text\n- Bulleted lists\n- Dialog headlines and single sentence dialog body\n\n- Multiple sentences\n- Long or complex sentences, if it suits the context\n- Any sentence followed by a link. Links themselves should not be full sentences.\n\nMove a tile 1. Press and hold the tile.\n\nMove a tile. 1. Press and hold the tile.\nSkip colons in headings\nFor headings on lists of items, do not use colons. For lists within body text, use a colon.\nUse exclamation points sparingly\nExclamation points can come across as shouting or overly friendly.\n\nCongratulations! You created your first connection\n\nNo contracts! Save a contract and it’ll appear here\nRemember the last comma\nIn a list of three or more items, include a comma before the conjunction. Don't use it followed by an ampersand. The comma that comes before the conjunction is known as the Oxford or serial comma.\n\nAndroid, iOS, and Windows\n\nAndroid, iOS and Windows\nUI elements\nButtons\nButton texts should always include verbs. Keep things clear and concise, and use sentence case. It’s OK to use an ampersand in button text.\n\nPair action verbs with nouns. Is the user saving details, downloading an invoice, or editing an order? Pairing tells the user exactly what will happen.\n\nIn general, follow these guidelines\n\n- Use chevron icons (left and right) to indicate directions\n- Use the plus and delete icons for creation and deletion respectively\n- Explain what’s going to happen next\n- Be concise\n\nBack Remove component Add new vehicle\n\nBack Remove Add New Vehicle\n\nExplain what’s going to happen next\n\nAmbiguous button labels, such as yes/no, submit/cancel, or abort/continue provide minimal information to the user. This requires the user to read the dialog text in order to complete the task, making them prone to misinterpretation and adding extra effort for users.\n\nEdit order? Are you sure you want to edit this existing order? Never mind Edit order\n\nEdit order? Are you sure you want to edit this existing order? Cancel Edit\n\nConsider this: If you remove all the text around your buttons, could the user still accomplish the task? If not, change your button labels. Use words that motivate immediate action.\n\nDon’t cancel the cancellation\n\nWhen you have buttons for actions that could cause problems, like deleting something or stopping a service, it's important to make sure people understand what the buttons do.\n\nFor example, if one button says confirm and another says cancel, it might not be clear which one actually cancels the action. This can lead to people making mistakes.\n\nTo help users, always use clear words on buttons that tell them exactly what will happen when they click them.\n\nIf you use the same words on the buttons as you do in the title or header, it makes everything easier to understand and encourages users to take the right action. This way, you avoid confusing labels like confirm/cancel. Also, if you use a word like 'keep' on the second button, it makes it really easy for users to not accidentally cancel something.\n\nCancel your order? Keep order Cancel order\n\nCancel your order? Cancel Confirm\n\nDon’t truncate button text\n\nAvoid truncating button text, as it can confuse users about the buttons intention.\n\nStrive for concise button text, and consider using labels if needed.\n\nIf your buttons have longer text that doesn't fit due to limited space, stack them to ensure clarity, especially in narrow containers with multiple buttons.\n\nSave & continue Submit application\n\nSave and continue editing Submit application for review\n\nUpdate profile information Generate & download PDF\n\nUpdate profile information Generate report and download PDF\nForms\nGeneral form guidelines\n\nPlease follow these rules when implementing and designing form in your service\n\n- Mark optional or required fields. Add the \" Fields are required\" legend.\n- Group the label and the respective form element and separate them visually from other form elements\n- Use placeholders to provide users a hint to avoid input mistakes\n- In case explain what you want the data for\n\nWhen to validate\n\n- Validate on submit and re-validate on change\n- Validate on blur\n- Don’t validate on first input click and avoid showing errors immediately when the user starts typing\n- If realtime validation is needed, use a debounce mechanism to delay validation until the user pauses typing for a short period (e.g., 300-500 milliseconds). This reduces the number of validations and prevents overwhelming the user.\n- For input length validation, display a character counter instead of an error message\n- Use default values or limit options, no validation is needed\n- Disable the submit button, if possible, to avoid errors when using multiple required fields\n- Never rely on a red input border alone in case of an error\n\nBy using techniques like debouncing, on-blur validation, and friendly error messages, you can provide a balanced and user-friendly validation experience.\n\nName Email address Password Phone number (optional) In case we need to call you for further details\n\nName Email address Password Phone number\n\nIn case there is only one or just a few optional fields, rather mark the optional fields than marking all other fields required.\n\nFirst name Last name Date of birth We want to give you a special treat on your birthday Country Comments  Fields are required\n\nFirst name Last name Date of birth Country Comments\n\nWhen using the  character to mark required fields, please add the explanation for the user even though it is common to use.\nInput placeholder\nPlaceholder text for form inputs generally should not contain a trailing \"...\" (ellipsis). The purpose of a placeholder is to provide a short hint to the user about what to enter in the field, and adding an ellipsis can create unnecessary visual clutter and may be confusing.\n\nBest practices for placeholder text\n\n- Clear and concise Keep placeholder text short and to the point. Long placeholder text gets cropped making it inaccessible. Use longer text as help text instead.\n- Descriptive Ensure the placeholder text clearly describes the expected input\n- Avoid ellipses Do not use trailing ellipses for placeholders in inputs, for inputs with autocomplete, selects, or dropdowns. Ellipsis are typically used to indicate truncation or continuation, which is not the purpose of placeholder text. It can create ambiguity and doesn't provide clear guidance on what to enter.\n\nExamples of good placeholder text\n\n- \"Search by name\"\n- \"Search for products\"\n- \"Search in table\"\n- \"Find a vehicle by name\"\n- \"Add comment\"\n- \"New message\"\n- \"Enter keywords (e.g., documentation, examples)\"\n\nPassword Your password must include 1 lowercase letter and 1 uppercase letter as well as a special character\n\nPassword\nForm labels and placeholders\nWhen designing forms, it is crucial to use labels and placeholders effectively to ensure a clear and user-friendly experience.\n\nDifferentiating labels and placeholders\n\n- Avoid redundancy Using both a label and a placeholder with the same value is redundant and unhelpful. Each element serves a distinct purpose.\n- Label usage Labels should clearly describe the input field's purpose. They are persistent and help users understand what information is required, even after they begin typing.\n- Placeholder usage Placeholders should provide an example of the expected input format, not a call-to-action (CTA). For example, use \"example@mail.com\" for an email input field.\n- Special cases for placeholders In most cases, search fields can use a placeholder with CTA text instead of a label. This approach simplifies the form and enhances usability. It can also be applied to other input fields where a label would be unnecessary and would complicate the design, such as message inputs, comment sections, and chat windows.\n- Appropriate styling Form labels should not be styled as headlines. Headline styles are generally too prominent and can distract from the form's usability. Labels should be clear and readable, ensuring they complement the form design without overwhelming it. Headlines should be used for an entire form or a form section to provide clear grouping and structure. For more detailed grouping within a form, you may use the <fieldsetelement with a <legendto create a clearly defined section, which helps users understand the organization and purpose of different parts of the form. This approach enhances readability and navigability, making the form more user-friendly.\n\nEmail Form section using fieldset Lorem ipsum\n\nName Email Search features\nDialogs\nAvoid presenting users with unclear choices. “Cancel” doesn't make sense here because no clear action is proposed.\n\nNot part of your order The selected item is not part of you order and cannot be assigned Ok\n\nNot part of your order The selected item is not part of you order and cannot be assigned Cancel Ok\nError states\nAlways use the header and the description of a state when using components like ErrorState, NotFoundState, EmptyState, or any other state.\n\nLeaving out the message and using the headline for the user action feels like shouting to the user.\n\nYou have no vehicle selected Please select a single vehicle from the list of your vehicles on the left hand side of your screen\n\nPlease select exactly one vehicle\nNotifications\nThis guide outlines the best practices for crafting notification messages. The aim is to ensure consistency, clarity, and brevity across all notification messages.\n\nGeneral notification guideline\n\nNaming the subject first in notifications is a common and effective best practice. Here’s why this approach is beneficial:\n\n1. Clarity It immediately informs the user about what the notification is regarding. This is particularly useful when multiple notifications are displayed at once or when users are multitasking.\n2. Consistency Maintaining a consistent structure helps users quickly understand the nature of the notification. If the subject is always mentioned first, users will become accustomed to scanning for that information first.\n3. Prioritization In notifications where users might need to take action or understand the context quickly, presenting the subject first allows them to prioritize their attention effectively.\n4. Readability It can improve readability and user experience by clearly separating the notification's subject from its outcome or details.\n\nConsiderations\n\n- Keep the message consistent in structure across different contexts\n- Use a period at the end of the message only if part of a full sentence in a larger context but omit it in standalone notifications.\n- Keep the message short and to the point\n- The tone should be professional and neutral\n- Use simple and straightforward language. Don’t use technical terms that may not be familiar to all users.\n- Don’t use exclamation marks (e.g., \"Address copied to clipboard!\")\n\n- Name copied to clipboard\n- Tour published successfully\n- Appointment created successfully\n- Failed to create the appointment\n- The file could not be uploaded\n- Your changes could not be saved\n\nYour request has been submitted Data load error Something went wrong while loading your data. Please refresh the page. Invalid input Please check your email address and try again Appointment not scheduled There’s a conflict with your calendar. Please choose a different time. New feature: Order tracking You can now easily track your orders directly from your account. Check it out today! Account review completed Your account details are up to date. No further action is required.\n\nCompleted successfully The form has been submitted Error JSON parse error: Unexpected token < in JSON at position 0 Invalid Input was incorrect Error The appointment wasn’t scheduled because of a conflict with your calendar. Scheduling failed. We’ve added a new feature that lets you track your orders more easily. Try it out today and see how it can improve your experience! Account info: Your account details were recently reviewed, and everything seems to be in order. There’s nothing you need to do at this time.\n\nUsage guide for notifications\n\nA comprehensive guide to using default, info, success, warning, and error notifications effectively.\n\nNeutral or low-priority updates that don’t fit into other categories.\n\n- Best for: General feedback or updates, non-urgent information, or messages without special emphasis.\n- Examples: \"Your report is being generated\" \"This feature is in beta\"\n\n- \"Your report is being generated\"\n- \"This feature is in beta\"\n\nProvide actionable or helpful information to the user.\n\n- Best for: Announcements, tips, or non-urgent details users should know.\n- Examples: \"A new version of the app is available\" \"This vehicle has no position data\" \"Pro tip: Use filters to narrow your search results.\"\n\n- \"A new version of the app is available\"\n- \"This vehicle has no position data\"\n- \"Pro tip: Use filters to narrow your search results.\"\n\nCelebrate or confirm that an action was successfully completed.\n\n- Best for: Positive feedback for completed tasks or goals.\n- Examples: \"Your profile has been updated successfully\" \"Your message has been sent\" \"Payment processed successfully\"\n\n- \"Your profile has been updated successfully\"\n- \"Your message has been sent\"\n- \"Payment processed successfully\"\n\nAlert users about potential risks or actions they should take to avoid issues.\n\n- Best for: Situations requiring user action to prevent problems or risks.\n- Examples: \"Your password will expire soon. Update it now.\" \"Your account is approaching its storage limit\" \"Some items in your cart are no longer available\"\n\n- \"Your password will expire soon. Update it now.\"\n- \"Your account is approaching its storage limit\"\n- \"Some items in your cart are no longer available\"\n\nNotify users of problems or issues that require immediate attention.\n\n- Best for: Failed actions, critical issues, or situations blocking progress.\n- Examples: \"Failed to save changes. Please try again.\" \"Unable to process your payment\" \"Something went wrong. Contact support for assistance.\"\n\n- \"Failed to save changes. Please try again.\"\n- \"Unable to process your payment\"\n- \"Something went wrong. Contact support for assistance.\"\n\n\"Copy to clipboard\" notification guidelines\n\nAll success notifications for clipboard actions should follow this structure: \"<Itemcopied to clipboard\"\n\n- <Item: The specific content that has been copied (e.g., Address, Coordinates, Link, Name)\n- copied to clipboard: A fixed phrase that confirms the action and its result\n- Omit the close button as this message should be shown with the default timeout and disappear automatically\n\n- Address copied to clipboard\n- Coordinates copied to clipboard\n- Name copied to clipboard\n- Text copied to clipboard\n\nCoordinates copied to clipboard\n\n48.11293, 11.53486 Copied to clipboard.\nError messages\nErrors in general\nErrors can cause frustration, confusion, a loss of data, or more work for the user. These moments make it harder for them to finish their task.\n\nNo matter the design component or the length of the message, the most thorough error messages consist of three clear communication elements\n\n- What happened\n- The underlying cause (if possible)\n- How to fix it\nAvoid showing a message whenever possible\nThe best error message is no error happening at all.\n\nFind ways to avoid the error altogether, like by using in-line validation, visual cues, and disabled states to guide users.\n\nDescription (required) Submit\n\nDescription (required) Description required Submit\nHave the system automatically resolve errors\nAvoid using error messages as the first solution. Instead, design things so that the user interface doesn't need to show errors or ask users to fix problems whenever you can.\n\nFor instance, if a user types \"101\" into a field that should only allow numbers up to 100, like percentages, the system should automatically change the value to 100.\n\nInput that auto-corrects %\n\nInput that allows invalid data Invalid input. Please enter a maximum of 100% %\nUse plain language, and avoid jargon\nYour Users may not understand \"server architecture\" or \"client-side queries\". Know your audience, and write your error messages in plain, usable language so that your user will understand what went wrong and how it’s being resolved.\n\nTechnical terms are different than jargon. If you’re confident that your audience would be readily familiar with technical terms, and if such terms are relevant to the message, you can include them.\n\nWe had trouble processing your request because the server's pathway to the data was slow. We're working to fix it.\n\nYour request encountered a server-side bottleneck due to inefficient API endpoint routing\nCommonly misspelled or misformatted words\nList of commonly misspelled words\nThere are quite a few words that are commonly written incorrectly or inconsistently in software and UI texts. Here are some frequent ones\n\n- Login vs. log in ✅ Correct: Log in (verb) / Login (noun, adjective) ❌ Incorrect: Login to your account (should be Log in to your account)\n- Sign up vs. signup ✅ Correct: Sign up (verb) / Signup (noun, adjective) ❌ Incorrect: Create a sign up (should be Create a signup)\n- Log out vs. logout ✅ Correct: Log out (verb) / Logout (noun, adjective) ❌ Incorrect: Please logout (should be Please log out)\n- Cancel vs. abort ✅ Preferred: Cancel (stop an action before it completes, more user friendly) ✅ Correct but technical: Abort (To forcefully stop a process. Used in more technical contexts, like system failures - e.g., \"Process aborted due to an error\") ❌ Incorrect in general UI: Abort (too harsh for standard user actions)\n- Email vs. e-mail ✅ Correct: Email (correct and widely used in software, more modern, should be capitalized at the start of a sentence) ✅ Correct within copy: email (standard when it's in the middle of a sentence, as it's a common noun, e.g., \"Please enter your email address.\") ❌ Incorrect: E-mail (technically correct but outdated)\n- Email vs. e-mail in German context 🇩🇪 ✅ Correct in German UI: E-Mail (official and correct) ❌ Incorrect: Email (while gaining popularity, \"Email\" is still considered incorrect in formal German writing) ❌ Incorrect: email without capitalization in German ✅ Correct: E-Mail-Adresse (official and correct) ❌ Incorrect: Email-Adresse without capitalization in German\n- Username vs. user name ✅ Correct: Username ❌ Incorrect: User name (though some older UIs still use this)\n- Last name vs. surname 🟢 Preferred: Last name (even in en-GB UI) ✅ Formal: Surname (less common in UI, more in official documents) ❌ Incorrect: Lastname (should be two words: Last name)\n- Last name vs. surname in German context 🇩🇪 🟢 German UI: Nachname ✅ Official forms: Familienname (but avoid in casual UI)\n- Ok vs. okay ✅ Correct: OK (most common in UI) ❌ Incorrect: Okay (too informal for UI)\n- Home page vs. homepage ✅ Correct: Home page (two words) ❌ Incorrect: Homepage (often used but technically incorrect)\n- 2FA vs. two-factor authentication ✅ Correct: Two-factor authentication (2FA) ❌ Incorrect: 2FA authentication (redundant)\n- Wi-fi vs. wifi vs. WiFi ✅ Correct: Wi-Fi ❌ Incorrect: WiFi (often seen but not the official spelling)\n\n- ✅ Correct: Log in (verb) / Login (noun, adjective)\n- ❌ Incorrect: Login to your account (should be Log in to your account)\n\n- ✅ Correct: Sign up (verb) / Signup (noun, adjective)\n- ❌ Incorrect: Create a sign up (should be Create a signup)\n\n- ✅ Correct: Log out (verb) / Logout (noun, adjective)\n- ❌ Incorrect: Please logout (should be Please log out)\n\n- ✅ Preferred: Cancel (stop an action before it completes, more user friendly)\n- ✅ Correct but technical: Abort (To forcefully stop a process. Used in more technical contexts, like system failures - e.g., \"Process aborted due to an error\")\n- ❌ Incorrect in general UI: Abort (too harsh for standard user actions)\n\n- ✅ Correct: Email (correct and widely used in software, more modern, should be capitalized at the start of a sentence)\n- ✅ Correct within copy: email (standard when it's in the middle of a sentence, as it's a common noun, e.g., \"Please enter your email address.\")\n- ❌ Incorrect: E-mail (technically correct but outdated)\n\n- ✅ Correct in German UI: E-Mail (official and correct)\n- ❌ Incorrect: Email (while gaining popularity, \"Email\" is still considered incorrect in formal German writing)\n- ❌ Incorrect: email without capitalization in German\n\n- ✅ Correct: E-Mail-Adresse (official and correct)\n- ❌ Incorrect: Email-Adresse without capitalization in German\n\n- ✅ Correct: Username\n- ❌ Incorrect: User name (though some older UIs still use this)\n\n- 🟢 Preferred: Last name (even in en-GB UI)\n- ✅ Formal: Surname (less common in UI, more in official documents)\n- ❌ Incorrect: Lastname (should be two words: Last name)\n\n- 🟢 German UI: Nachname\n- ✅ Official forms: Familienname (but avoid in casual UI)\n\n- ✅ Correct: OK (most common in UI)\n- ❌ Incorrect: Okay (too informal for UI)\n\n- ✅ Correct: Home page (two words)\n- ❌ Incorrect: Homepage (often used but technically incorrect)\n\n- ✅ Correct: Two-factor authentication (2FA)\n- ❌ Incorrect: 2FA authentication (redundant)\n\n- ✅ Correct: Wi-Fi\n- ❌ Incorrect: WiFi (often seen but not the official spelling)",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "boost": "Writing style guide start/guidelines/writing #start/guidelines/writing Getting started Guidelines"
+  },
+  {
+    "id": "start/howto",
+    "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\"",
+    "category": "Getting started",
+    "section": "Welcome",
+    "boost": "How to use the UIKIT start/howto #start/howto Getting started Welcome"
+  },
+  {
+    "id": "start/intro",
+    "title": "Getting started with our UI Library",
+    "lead": "Welcome! This UI library is designed to help you build beautiful, consistent, and maintainable user interfaces with minimal effort. Here’s how you can make the most of it:",
+    "summary": "Welcome! This UI library is designed to help you build beautiful, consistent, and maintainable user interfaces with minimal effort. Here’s how you can make the most of it:",
+    "searchText": "Getting started with our UI Library\nWelcome! This UI library is designed to help you build beautiful, consistent, and maintainable user interfaces with minimal effort. Here’s how you can make the most of it:\nGetting started with our UI Library\nUse atomic CSS classes for styling\n- Consistency By using our predefined classes, your UI will have a common look and feel across all components\n- Maintainability When design updates occur, changes to the utility classes automatically propagate across the entire project, making updates easy and seamless\n- No custom styles needed Avoid the overhead of writing custom CSS. Use the tools we’ve already created to keep your codebase lean and manageable.\n\nFor example, instead of writing custom CSS for a flex container:\n\ncss\n.my-container {\ndisplay: flex;\njustify-content: center;\n}\n\nSimply apply the atomic classes:\n\nhtml\n<div class=\"display-flex justify-content-center\"...</div\nUse React components for structure\n- Quickly build UIs using pre-built components like the buttons, selects, and dialogs\n- Combine React components with CSS classes to create complex layouts with minimal custom code\n- Extend your layouts by composing React components while using utility classes to tweak the design where necessary\nWhy stick to our CSS classes and components?\n- Efficiency Our library is optimized to reduce the need for custom styling and component creation. You’ll spend less time on UI design and more time on functionality.\n- Design flexibility When design changes occur, updating the UIKIT, a single CSS class or React component ensures that your entire project is updated without manual intervention\n- Better collaboration By sticking to the predefined patterns, your team will maintain consistency across projects, making it easier for multiple developers to collaborate without the risk of style mismatches",
+    "category": "Getting started",
+    "section": "Welcome",
+    "boost": "Getting started with our UI Library start/intro #start/intro Getting started Welcome"
+  },
+  {
+    "id": "start/responsiveness",
+    "title": "Responsiveness - for all platforms",
+    "lead": "The UIKIT considers all platforms — both desktop and mobile. We recognize that people work across many different products and often need to support multiple platforms and the UIKIT is a foundation for that with its many responsive building blocks and responsive components.",
+    "summary": "The UIKIT considers all platforms — both desktop and mobile. We recognize that people work across many different products and often need to support multiple platforms and the UIKIT is a foundation for that with its many responsive building blocks and responsive components.",
+    "searchText": "Responsiveness - for all platforms\nThe UIKIT considers all platforms — both desktop and mobile. We recognize that people work across many different products and often need to support multiple platforms and the UIKIT is a foundation for that with its many responsive building blocks and responsive components.\nResponsiveness - for all platforms\nPrincipal\nTo build for all platforms, there are a lot of options and tools that can be used.\nLayout\nFluid container\n\nResponsive grid systems\n\nA responsive grid system allows a layout to change dynamically based on the size of the screen or the surrounding element. This also guarantees consistent layouts across all products.\nSpacings & sizing\nThe UIKIT offers also responsive padding and margin classes that allow reducing or increasing the spacing around elements depending on a certain breakpoint. This for example enables to set a smaller margin on mobile devices than on desktops.\n\nWith our flexible and responsive width and height classes, you have the freedom to define different sizes for different breakpoints or use our min- and max classes.\nContainer queries\nWhile the traditional responsive utilities mentioned above (e.g., --sm--, --md--, --lg--) adapt components based on the viewport width, container queries take a different approach by allowing components to respond to the size of their parent container instead. This enables a more context-aware and flexible design system—especially useful when components live in dynamic or nested layouts (like sidebars, cards, or split views).\n\nWhy use container queries?\n\nSometimes, the screen size alone is not enough to decide how a component should behave. For example:\n\n- A card inside a wide layout may want to show content side-by-side.\n- The same card inside a sidebar should stack the content vertically.\n\nContainer queries let components adapt to these situations without relying on global breakpoints.\n\nUsage\n\nThe RIO UIKIT introduces container query utility classes using the following format:\n\nhtml\ncq-[cq-breakpoint]:[utility-class]\n\nWhere cq-breakpoint is the container width in pixels that triggers the style, such as:\n\n- cq-300:padding-10\n- cq-500:flex-column\n- cq-600:grid-cols-2\n\nThe utility is applied only when the container width is greater than or equal to the breakpoint.\n\nAvailable utility classes\n\nContainer queries support not all, but many of the same utility categories as responsive viewport classes:\n\n- Spacing: margin, padding, etc.\n- Layout: display-flex, flex-row, flex-column, gap, display-grid, grid-cols, col-span, etc.\n- Text sizes: text-size, line-height\n- Custom responsive behaviors based on your layout context\n\nSee the full list of container query utilities in the Container queries section.\n\nExample\n\nhtml\n<div className=\"cq-container\"\n<div className=\"cq-300:flex-column cq-600:flex-row cq-300:padding-10\"\n<!-- content --\n</div\n</div\n\nIn this example:\n\n- The inner element uses a column layout when its container is at least 300px wide.\n- It switches to a row layout when the container is at least 600px wide.\n- Padding is also conditionally applied based on container size.\n\nNote: Make sure the container element has cq-container applied, as it sets up the container context required for the styles to react correctly.\nDevice utils\nWe also offer a set of device utility functions such as hasTouch, isMobile, and isDesktop. This allows to hide or show elements for mobile or to switch settings for some components how to behave. For instance, you might want to show the table card view when a page is rendered on mobile. Or you might want to expand or collapse information depending on your device.\n\nFurthermore, we offer some hooks like the useWindowResize hook that helps to react to the user changing his window size and to react accordingly. The useOnlineStatus lets you show a message to the user when his device is offline or online again or to react to that event.\nThere is more...\nMany of our atomic classes are also available for different breakpoints. All classes are listed below the individual demos in the \"CLASSES\" section of the Design page.\n\nWe constantly strive to improve the UIKIT to make it easier to use. If you have questions about the correct usage of these classes or feedback on components, please ask them in the UIKIT Slack channel.",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "boost": "Responsiveness - for all platforms start/responsiveness #start/responsiveness Getting started Guidelines"
+  },
+  {
+    "id": "templates/common-table",
+    "title": "Common table",
+    "lead": null,
+    "summary": "NewButton",
+    "searchText": "Common table\nCommon table\nNewButton\n\nFilter\n\nLabel\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",
+    "category": "Templates",
+    "section": "Tables",
+    "boost": "Common table templates/common-table #templates/common-table Templates Tables"
+  },
+  {
+    "id": "templates/detail-views",
+    "title": "Detail views",
+    "lead": null,
+    "summary": "VoltPoint",
+    "searchText": "Detail views\nDetail views\nVoltPoint\nIsarweg 22, 81830 München\nCoordinates\n51.339695, 12.373075\n\nNetwork operator\nEnerCharge GmbH\n\nSupport contact\n089 9876543\n\nAdditional information\nBoost your experience\nBook Lorem Ipsum to get more information, advanced settings and preferred prices.\n\nPrices\n\nOpening hours\n\nConnectors\nAmenities\nVehicle access\n\n180 kW6/6\n\n300 kW3/4\nJD\nJohn Doe\nInternal Directives Administrator\nNot Working\n\nGeneral\n\nGraduations\n\nObjectives\nShipment details\nOptions\nShipment ID\n982-457-ABX\n\nStatus\nOut for delivery\n\nLast update\nJuly 23, 2025 – 10:31\n\nShipping type\nExpress\n\nOrigin\nHamburg, DE\n\nDestination\nVerona, IT\n\nVehicle information\n\nVehicle type\nTruck with trailer\n\nLicense plate\nM-TD 3456\n\nDriver\nM. Schubert\n\nCurrent load\n19.4 t\n\nTemperature\n6 °C\n\nTime & distanceEstimated arrival\nJuly 24, 2025 – 08:00\n\nCurrent position\nNear Munich\n\nDistance to destination\n498 km\n\nAverage speed\n72 km/h\n\nLast stop\nRegensburg (Shell)",
+    "category": "Templates",
+    "section": "Content",
+    "boost": "Detail views templates/detail-views #templates/detail-views Templates Content"
+  },
+  {
+    "id": "templates/expandable-details",
+    "title": "Expandable details",
+    "lead": null,
+    "summary": "Warehouse EU-Central",
+    "searchText": "Expandable details\nExpandable details\nWarehouse EU-Central\n#458712839104 | eu-central-warehouse@logistics.cloud\n\nDistribution hub west\n\n#778944220011 | delivery-north-team@logistics.cloud\n\nLocal delivery north\n#778944220011 | delivery-north-team@logistics.cloud",
+    "category": "Templates",
+    "section": "Content",
+    "boost": "Expandable details templates/expandable-details #templates/expandable-details Templates Content"
+  },
+  {
+    "id": "templates/feature-cards",
+    "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",
+    "category": "Templates",
+    "section": "Content",
+    "boost": "Feature cards templates/feature-cards #templates/feature-cards Templates Content"
+  },
+  {
+    "id": "templates/form-summary",
+    "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",
+    "category": "Templates",
+    "section": "Forms",
+    "boost": "Form summary templates/form-summary #templates/form-summary Templates Forms"
+  },
+  {
+    "id": "templates/form-toggle",
+    "title": "Form toggle",
+    "lead": null,
+    "summary": "Size by form-group",
+    "searchText": "Form toggle\nForm toggle\nSize by form-group\nNote\nDifferent form-group sizes come with different bottom spacing\n\nWrapped by sized form-groups\nform-group-sm + form-group-not-editableLorem Ipsum Dolor\n\nform-group + form-group-not-editableLorem Ipsum Dolor\n\nform-group-lg + form-group-not-editableLorem Ipsum Dolor\n\nEdit\n\nSize by input-group\nNote\nNo form-group size results in the same bottom spacing\n\nWrapped only by form-group\ninput-group-sm input-group-not-editableLorem Ipsum Dolor\n\ninput-group input-group-not-editableLorem Ipsum Dolor\n\ninput-group-lg input-group-not-editableLorem Ipsum Dolor\n\nEdit",
+    "category": "Templates",
+    "section": "Forms",
+    "boost": "Form toggle templates/form-toggle #templates/form-toggle Templates Forms"
+  },
+  {
+    "id": "templates/list-blocks",
+    "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",
+    "category": "Templates",
+    "section": "Content",
+    "boost": "List blocks templates/list-blocks #templates/list-blocks Templates Content"
+  },
+  {
+    "id": "templates/loading-progress",
+    "title": "Loading progress",
+    "lead": null,
+    "summary": "Label",
+    "searchText": "Loading progress\nLoading progress\nLabel\n\n0%\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula magna quis ante tincidunt, at volutpat nunc facilisis. Sed auctor.",
+    "category": "Templates",
+    "section": "Progress",
+    "boost": "Loading progress templates/loading-progress #templates/loading-progress Templates Progress"
+  },
+  {
+    "id": "templates/options-panel",
+    "title": "Options panel",
+    "lead": null,
+    "summary": "Add transport order",
+    "searchText": "Options panel\nOptions panel\nAdd transport order\nYou have two options for uploading a transport order to the system.\n\nWhere is your transport order stored?\nFrom onboard unit\nUpload the .xml order file from your vehicle.\n\nManual entry\nCreate a new transport order in the interface.\n\nNeed help uploading your order?Cancel upload",
+    "category": "Templates",
+    "section": "Content",
+    "boost": "Options panel templates/options-panel #templates/options-panel Templates Content"
+  },
+  {
+    "id": "templates/panel-variants",
+    "title": "Panel variants",
+    "lead": null,
+    "summary": "Lorem ipsum",
+    "searchText": "Panel variants\nPanel variants\nLorem ipsum\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus\n\nLorem ipsum\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus\n\nLorem ipsum\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus\n\nLorem ipsum\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus\n\nLorem ipsum\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus\n\nLorem ipsum\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus\n\nLorem ipsum\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus",
+    "category": "Templates",
+    "section": "Content",
+    "boost": "Panel variants templates/panel-variants #templates/panel-variants Templates Content"
+  },
+  {
+    "id": "templates/progress-cards",
+    "title": "Progress cards",
+    "lead": null,
+    "summary": "Weekly report",
+    "searchText": "Progress cards\nProgress cards\nWeekly report\nOrders processed\n\n80%\n\n12% more than last week\n\nOpen rate\n\n3.1%\n\n3.1% more than last week\n\nError rate\n\n2.01%\n\n2.01% more than last week\nShipment volume by region\n\nRegionShipments\n\nGermany3,550\n\nFrance1,798\n\nItaly1,245\n\nPoland986\n\nNetherlands854\n\nAustria650\n\nSwitzerland420\nProgress\nSend reminder\n56\nParticipants\n\nSigned\n12\n\nWaiting signature\n17\n\nManager review\n22\n\nSelf review\n5",
+    "category": "Templates",
+    "section": "Progress",
+    "boost": "Progress cards templates/progress-cards #templates/progress-cards Templates Progress"
+  },
+  {
+    "id": "templates/progress-success",
+    "title": "Progress success",
+    "lead": null,
+    "summary": "Lorem ipsum dolor sit amet",
+    "searchText": "Progress success\nProgress success\nLorem ipsum dolor sit amet\nDiam nonummy\nConsetetur sadipscing\nVoluptua\nEirmod tempor\nEum iriure\n500\nSanctus\nNo sea takimata\nVulputate\nTempor invidunt\nDuis autem vel eum",
+    "category": "Templates",
+    "section": "Progress",
+    "boost": "Progress success templates/progress-success #templates/progress-success Templates Progress"
+  },
+  {
+    "id": "templates/settings-form",
+    "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",
+    "category": "Templates",
+    "section": "Forms",
+    "boost": "Form blocks templates/settings-form #templates/settings-form Templates Forms"
+  },
+  {
+    "id": "templates/stats-blocks",
+    "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%",
+    "category": "Templates",
+    "section": "Content",
+    "boost": "Stats blocks templates/stats-blocks #templates/stats-blocks Templates Content"
+  },
+  {
+    "id": "templates/table-panel",
+    "title": "Combined tables in ExpandablePanel",
+    "lead": null,
+    "summary": "Panel header tableLorem ipsum dolor",
+    "searchText": "Combined tables in ExpandablePanel\nCombined tables in ExpandablePanel\nPanel header tableLorem ipsum dolor\nDolor sitAmet\n\nHead columnHead columnHead columnHead columnHead column\n\nLorem ipsum2 Lorems\n\nDolor sit amet1 Lorem",
+    "category": "Templates",
+    "section": "Tables",
+    "boost": "Combined tables in ExpandablePanel templates/table-panel #templates/table-panel Templates Tables"
+  },
+  {
+    "id": "templates/table-row-animation",
+    "title": "Table row animation",
+    "lead": null,
+    "summary": "Remove rowReset table",
+    "searchText": "Table row animation\nTable row animation\nRemove rowReset table\n\nIdNameVINStatus\n\n1Lorem7354Active\n2Ipsum456457Inactive\n3Dolor895Active\n4Sit3456Active\n5Amet2445Active\n6Consectetur878Active\n\n70/100\n\nLoad more",
+    "category": "Templates",
+    "section": "Tables",
+    "boost": "Table row animation templates/table-row-animation #templates/table-row-animation Templates Tables"
+  },
+  {
+    "id": "templates/usage-cards",
+    "title": "Data usage cards",
+    "lead": null,
+    "summary": "Data used for shipment tracking",
+    "searchText": "Data usage cards\nData usage cards\nData used for shipment tracking\n\nThe following data may be used to track shipments across carriers and systems:\nVehicle ID\nCurrent location\nShipment status\nTimestamps\nDriver ID\nRoute info\n\nEdit shipment settings\n\nData linked to your company profile\n\nThis information may be associated with your identity or company profile:\nCustomer ID\nDelivery address\nShipping docs\nUsage metrics\nFreight costs\nOther data\n\nEdit profile settings",
+    "category": "Templates",
+    "section": "Content",
+    "boost": "Data usage cards templates/usage-cards #templates/usage-cards Templates Content"
+  },
+  {
+    "id": "utilities/deviceUtils",
+    "title": "Device Utils",
+    "lead": "Set of utility functions which helps detecting certain devices or functionality.",
+    "summary": "Set of utility functions which helps detecting certain devices or functionality.",
+    "searchText": "Device Utils\nSet of utility functions which helps detecting certain devices or functionality.\nDevice Utils\nNo touch support\nisMobileScreen: false\nisMobile: false\nisDesktop: true\nisRetinaDevice: false\nisMac: true\nLoaded in iFrame: false\nZoom is: enabled\nNote\nBecause Apple does not allow to disable zoom on touch devices, isZoomDisabled has no effect when using iOS.",
+    "category": "Utilities",
+    "section": "Helper",
+    "boost": "Device Utils utilities/deviceUtils #utilities/deviceUtils Utilities Helper"
+  },
+  {
+    "id": "utilities/featureToggles",
+    "title": "URL feature toggles",
+    "lead": "URL-based feature toggles (also known as feature flags) are a powerful development technique that allows you to enable or disable features in your application dynamically, without deploying new code.",
+    "summary": "URL-based feature toggles (also known as feature flags) are a powerful development technique that allows you to enable or disable features in your application dynamically, without deploying new code.",
+    "searchText": "URL feature toggles\nURL-based feature toggles (also known as feature flags) are a powerful development technique that allows you to enable or disable features in your application dynamically, without deploying new code.\nURL feature toggles\nFeature toggles detection\nThe feature toggle detection system in your application is designed to handle the dynamic activation and retrieval of feature toggles from two primary sources:\n\n- URL Query Parameters Toggles can be passed through the URL as query parameters (e.g., ?ft_demo=true), allowing for easy testing or overriding of features without modifying code\n- LocalStorage If a toggle is not present in the URL, the system falls back to using stored values in the browser's localStorage, ensuring that user preferences or feature states are preserved across sessions\nDefining feature toggles\nFeature toggles are defined in a centralized configuration map, with each toggle specifying its corresponding query parameter name, its data type (boolean, string, or number) and an optional default value. This allows you to easily configure new toggles.\n\nType transformers\n\n- asBoolean and asBooleanWithDefault: Interprets the parameter as a boolean (e.g., true, false, 1, 0)\n- asString and asStringWithDefault: Treats the parameter as a string\n- asNumber and asNumberWithDefault: Converts the parameter into a number\n\nThe detectFeatureToggles function first checks if the specified toggle exists in the URL by extracting and parsing the query string (i.e., everything after the ? in the URL). If the parameter is found, its value is transformed using the appropriate type transformer (boolean, string, number), saved in localStorage, and returned.\n\ntypescript\nimport { detectFeatureToggles, asString, asBoolean, asNumber } from '@rio-cloud/rio-uikit/urlFeatureToggles';\n\n// Define old toggles to clean up\nconst oldToggles = ['fteventTeaser', 'ftsurvey', 'ftmenu'];\n\n// Define toggle transformation functions with their respective names and\n// export the detected feature toggles as a singleton\nexport const featureToggles = detectFeatureToggles(\n{\nenforcedLocale: asString('ftenforceLocale'),\ntracing: asBoolean('fttracing'),\ndemo: asBooleanWithDefault('ftdemo', false),\nmaxItems: asNumberWithDefault('ftmaxItems', 10),\n},\noldToggles\n);\n\nDefault values\n\nFor each type of transformer there is a *WithDefault variant. This function accepts a default value as second parameter. The default value is only returned if neither the query parameter nor the local storage contain a value for the feature toggle. A feature toggle with a default value will never be null. This fact is also reflected in the type of the feature toggle properties in the object returned by detectFeatureToggles.\n\nCustomizable prefix\n\nFeature toggles are stored in localStorage with a predefined prefix (default: featureToggle.), which can be customized as needed. This prefix helps to avoid naming collisions with other items stored in localStorage and makes it clear which items are related to feature toggles.\n\ntypescript\nexport const featureToggles = detectFeatureToggles(\n{ demo: asBoolean('ftdemo') },\noldToggles,\n'myCustomPrefix.'\n);\nUsage\nSuppose you want to enable or disable a demo mode in your application. You can pass ?ftdemo=true in the URL or rely on the value previously stored in localStorage.\n\n- URL: http://example.com/#?ftdemo=true&ftenforceLocale=de-DE\n- Expected behavior: The system detects the ftdemo parameter and interprets it as true (boolean) The ftenforceLocale is stored as a string (\"de-DE\") If a value like ftmaxItems is not provided in the URL, the system will try to fetch it from localStorage\n\n- The system detects the ftdemo parameter and interprets it as true (boolean)\n- The ftenforceLocale is stored as a string (\"de-DE\")\n- If a value like ft_maxItems is not provided in the URL, the system will try to fetch it from localStorage\n\nTo use a feature toggle, simply reference it in your code\n\ntypescript\nif (featureToggles.demo) {\n// Render demo feature\n}\nBenefits\n- Flexibility This approach allows toggles to be easily overridden via URL for testing or debugging purposes without changing the codebase\n- Persistence By leveraging localStorage, feature toggles persist across browser sessions, ensuring a consistent experience for users\n- Type safety Type transformation functions (asBoolean, asString, asNumber) ensure that toggles are correctly interpreted based on the expected data type\n- Clean state management Unused toggles can be cleaned up from localStorage, ensuring there is no unnecessary buildup of outdated data",
+    "category": "Utilities",
+    "section": "Helper",
+    "boost": "URL feature toggles utilities/featureToggles #utilities/featureToggles Utilities Helper"
+  },
+  {
+    "id": "utilities/fuelTypeUtils",
+    "title": "Fuel type utils",
+    "lead": "There is a wide variety of standardized fuel types, and on top of that, some projects or systems introduce their own custom definitions. While the naming can differ, many of these values carry the same semantic meaning. To avoid confusion and ensure consistent visual representation, we provide a centralized mapping of fuel types to icons.",
+    "summary": "There is a wide variety of standardized fuel types, and on top of that, some projects or systems introduce their own custom definitions. While the naming can differ, many of these values carry the same semantic meaning. To avoid confusion and ensure consistent visual representation, we provide a centralized mapping of fuel types to icons.",
+    "searchText": "Fuel type utils\nThere is a wide variety of standardized fuel types, and on top of that, some projects or systems introduce their own custom definitions. While the naming can differ, many of these values carry the same semantic meaning. To avoid confusion and ensure consistent visual representation, we provide a centralized mapping of fuel types to icons.\nFuel type utils\nIn this mapping, multiple values may point to the same icon when they represent equivalent or very similar fuel types. This guarantees that the UI remains consistent across the application and that users always see the correct symbol, regardless of the data source.\ngetFuelIcon\nThe getFuelIcon function offers a single, reliable way to retrieve the correct icon:\n\n- It accepts any known fuel type value.\n- It returns the corresponding Rioglyph icon.\n- Unknown or unsupported values automatically fall back to the unknown icon, preventing broken or missing visuals.\n\nThis approach ensures that developers don’t need to decide individually which icon to use. Instead, all mappings are maintained in one place, making the system easier to understand, maintain, and extend. Adding new fuel types or adjusting existing mappings can be done centrally without requiring changes throughout the codebase.\nFuel type utils\nThese utilities help group, filter, and render fuel types based on predefined semantic categories such as liquid, gas, electric, hydrogen, or hybrid.\n\n- you need to filter items by fuel type group,\n- show fuel group filter buttons with icons and counters,\n- or render the appropriate icon for a specific fuel type or group.\n\nOverview\n\n- fuelTypeGroupIcons Maps each fuel type group to its representative icon (e.g. for use in UI filter buttons or legends).\n- fuelTypeGroups List of all defined fuel type groups (excluding unknown). Useful to iterate over filterable groups.\n- getFuelTypeGroupIcon(fuelTypeGroup) Returns the icon associated with a given fuel group.\n- filterByFuelTypeGroup(items, groups, getFuelType) Filters a list of items by their fuel group, using a custom fuel type extractor function.\n- countFuelTypeGroups(items, getFuelType) Counts how many items belong to each fuel group, useful for showing badge counters on group filter buttons.\nSingle rioglyph fuel iconThis is a diesel truck\nThis is a gasoline truck\nThis is an electric bus\n\nPaired rioglyph fuel icon\n\nUnknown paired fuel icon\n### getFuelIcon\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fuelType | FuelType | unknown | The specific fuel type of the item. This will be resolved to a fuel group icon. Supported values include: gas, diesel, electric, hydrogen, cng, and more. |\n### getFuelTypeGroupIcon\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fuelTypeGroup | FuelTypeGroup | — | The fuel group identifier used to resolve the corresponding icon. |\n### filterByFuelTypeGroup\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The list of items to filter by fuel type group. |\n| activeGroups | FuelTypeGroup[] | — | Array of selected fuel groups to include in the filtered result. |\n| getFuelType | (item: T) =FuelType \\| undefined | — | Function used to extract the fuel type from each item. |\n### countFuelTypeGroups\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The list of items to count by fuel group. |\n| getFuelType | (item: T) =FuelType \\| undefined | — | Function used to extract the fuel type from each item. |",
+    "category": "Utilities",
+    "section": "Helper",
+    "boost": "Fuel type utils utilities/fuelTypeUtils #utilities/fuelTypeUtils Utilities Helper"
+  },
+  {
+    "id": "utilities/routeUtils",
+    "title": "Route Utils",
+    "lead": "Set of utility functions which helps parsing and stringify state into and from the URL.",
+    "summary": "Set of utility functions which helps parsing and stringify state into and from the URL.",
+    "searchText": "Route Utils\nSet of utility functions which helps parsing and stringify state into and from the URL.\nRoute Utils\nThese functions will combine sort props like sort order and sort direction and map table settings into a compact comma separated list where hidden columns have a leading \"-\" and the width of a column will be attached to the column name if it it different from the default.\n\nExample: http:/my-url/#demoService/table?sort=+userNickName&columns=itemId,userImageStatus,userNickName:278,userFirstName,userLastName,userActivity,userJobTitle,userEmail,userPhoneNumber\n// Note: this sample uses the \"qs\" library to parse and stringify data\n\nimport qs from 'qs';\nimport { get } from 'es-toolkit/compat';\n\nimport { tableConfig, BASE_PATH } from './yourTableConfig';\n\nimport {\nparseColumnsSettingsStrings,\nmapColumnsSettingsToStrings,\ngetSortDirShort,\nparseSorting,\ntype ColumnsSettings,\n} from '@rio-cloud/rio-uikit/routeUtils';\n\n// Options for the \"qs\" library\nconst OPTIONS = {\ncomma: true, // required to parse comma separated string into array\narrayFormat: 'comma', // required to stringify arrays into comma separated strings\nindices: false, // don't use array indices\nencode: false, // don't encode the entire string as it will be done individually for certain params\ndecode: false,\nskipNulls: true, // required to remove empty params\n};\n\n// Sample code for parsing the route just for illustration how to use the utils functions\n// Feel free to modify this to your needs.\n// Note: the \"parseRoute\" and \"makeRoute\" functions may contain more props which are left out in this demo\nexport const parseRoute = (router: any) => {\nconst location = get(router, 'location', {}) as Location;\nconst searchParams = location.search ? location.search.replace('?', '') : location.search;\n\nconst { sort, columns } = qs.parse(searchParams, OPTIONS);\n\nconst sorting = sort && parseSorting(sort);\n\nreturn {\nsortBy: sorting?.sortBy,\nsortDir: sorting?.sortDir,\ncolumns: columns && parseColumnsSettingsStrings(columns, tableConfig.defaultColumnsDetails),\n};\n};\n\ntype mapRouteProps = {\nsortBy: string;\nsortDir: string;\ncolumns: ColumnsSettings;\n};\n\nexport const makeRoute = ({ sortBy, sortDir, columns }: mapRouteProps) => {\n// Set props to undefined or null in order to remove it from the URL when not defined\nconst params = {\nsort: sortBy && `${getSortDirShort(sortDir)}${sortBy}`,\ncolumns: columns && mapColumnsSettingsToStrings(columns),\n};\nconst queryParams = qs.stringify(params, OPTIONS);\nconst searchFragment = queryParams && `?${queryParams}`;\nreturn `${BASE_PATH}/${searchFragment}`;\n};",
+    "category": "Utilities",
+    "section": "Helper",
+    "boost": "Route Utils utilities/routeUtils #utilities/routeUtils Utilities Helper"
+  },
+  {
+    "id": "utilities/useAfterMount",
+    "title": "useAfterMount",
+    "lead": "The useAfterMount hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.",
+    "summary": "The useAfterMount hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.",
+    "searchText": "useAfterMount\nThe useAfterMount hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.\nuseAfterMount\nCount: 0\nIncrement\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| callback | Function | — | The effect callback function to be used after the component has been mounted. |\n| deps | Array | — | The effect dependencies that trigger the effect. |",
+    "category": "Utilities",
+    "section": "Lifecycle & execution hooks",
+    "boost": "useAfterMount utilities/useAfterMount #utilities/useAfterMount Utilities Lifecycle & execution hooks"
+  },
+  {
+    "id": "utilities/useAutoAnimate",
+    "title": "useAutoAnimate",
+    "lead": "The useAutoAnimate hook is a thin re-export of the @formkit/auto-animate utility to quickly add enter/leave animations to a container. This page shows a simple example; for full configuration options, check the official documentation.",
+    "summary": "The useAutoAnimate hook is a thin re-export of the @formkit/auto-animate utility to quickly add enter/leave animations to a container. This page shows a simple example; for full configuration options, check the official documentation.",
+    "searchText": "useAutoAnimate\nThe useAutoAnimate hook is a thin re-export of the @formkit/auto-animate utility to quickly add enter/leave animations to a container. This page shows a simple example; for full configuration options, check the official documentation.\nuseAutoAnimate\nAdd shipmentChange layoutDisable animation\n\nShipment #1001\nReady for pickup\n\nShipment #1002\nIn transit\n\nShipment #1003\nDelivered\n### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| options | AutoAnimateOptions (optional) | — | Forwarded to @formkit/auto-animate to configure duration, easing, animations, etc. |\n### Returns\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| parent | RefCallback<HTMLElement| — | Attach to the container whose children should animate. |\n| enableAnimations | (enabled?: boolean) =void | — | Toggle animations on or off; pass false to disable temporarily. |",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "boost": "useAutoAnimate utilities/useAutoAnimate #utilities/useAutoAnimate Utilities DOM behavior hooks"
+  },
+  {
+    "id": "utilities/useAverage",
+    "title": "useAverage",
+    "lead": "Calculates the arithmetic mean of numeric values extracted from a list of objects using a dot-separated path. Supports localized number formats through optional locale configuration.",
+    "summary": "Calculates the arithmetic mean of numeric values extracted from a list of objects using a dot-separated path. Supports localized number formats through optional locale configuration.",
+    "searchText": "useAverage\nCalculates the arithmetic mean of numeric values extracted from a list of objects using a dot-separated path. Supports localized number formats through optional locale configuration.\nuseAverage\nAverage weight deliveries 1: 982,69 kg\nAverage weight deliveries 2: 982,69 kg\n### Options for the useAverage hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | unknown[] | — | The array of objects to extract numeric values from. |\n| path | string | — | Dot-separated path to the numeric value inside each object. |\n| options | object | — | Optional configuration for number parsing. |\n| └locale | string | \"en-GB\" | Locale string used for parsing localized number formats. Affects grouping and decimal separator interpretation. |\n### Return value of the useAverage hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | number | — | The average of all valid numeric values found at the given path in the item list. |",
+    "category": "Utilities",
+    "section": "Data aggregation hooks",
+    "boost": "useAverage utilities/useAverage #utilities/useAverage Utilities Data aggregation hooks"
+  },
+  {
+    "id": "utilities/useClickOutside",
+    "title": "useClickOutside",
+    "lead": "The useClickOutside hook allows to easily detect events outside a referenced element.",
+    "summary": "The useClickOutside hook allows to easily detect events outside a referenced element.",
+    "searchText": "useClickOutside\nThe useClickOutside hook allows to easily detect events outside a referenced element.\nuseClickOutside\nClick outside the box\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| callback | (event: MouseEvent \\| TouchEvent) =void | — | The callback function to be triggered when click or touch events happen outside the referenced element. |\n| eventTypes | keyof DocumentEventMap | ['mousedown', 'touchstart'] | Customize list of events to listen on. |\n| isActive | boolean | true | Flag to only listen for clicks when target element active. This comes in handy for dropdowns where the event can be registered only when the dropdown is open. |",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "boost": "useClickOutside utilities/useClickOutside #utilities/useClickOutside Utilities DOM behavior hooks"
+  },
+  {
+    "id": "utilities/useClipboard",
+    "title": "useClipboard",
+    "lead": "The useClipboard hook allows to easily copy something to the browsers clipboard.",
+    "summary": "The useClipboard hook allows to easily copy something to the browsers clipboard.",
+    "searchText": "useClipboard\nThe useClipboard hook allows to easily copy something to the browsers clipboard.\nuseClipboard\nRandom UUID\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| options.timeout | Number | 2000 | The copied status timeout duration in milliseconds. |",
+    "category": "Utilities",
+    "section": "Browser & device hooks",
+    "boost": "useClipboard utilities/useClipboard #utilities/useClipboard Utilities Browser & device hooks"
+  },
+  {
+    "id": "utilities/useCount",
+    "title": "useCount",
+    "lead": "useCount is a utility hook for counting how many objects in a list contain a specific value or match a custom condition at a given property path. It supports exact value matching (e.g. true, 0, 'PENDING') or predicate-based logic using a match function. By default, all values that are not null or undefined are counted.",
+    "summary": "useCount is a utility hook for counting how many objects in a list contain a specific value or match a custom condition at a given property path. It supports exact value matching (e.g. true, 0, 'PENDING') or predicate-based logic using a match function. By default, all values that are not null or undefined are counted.",
+    "searchText": "useCount\nuseCount is a utility hook for counting how many objects in a list contain a specific value or match a custom condition at a given property path. It supports exact value matching (e.g. true, 0, 'PENDING') or predicate-based logic using a match function. By default, all values that are not null or undefined are counted.\nuseCount\nDeliveries marked as delivered:3\nDeliveries marked as not delivered:2\nDeliveries with status \"PENDING\":2\nDeliveries with quantity 0:2\nDeliveries with a written note:2\nDeliveries with at least one item:3\n### Options for the useCount hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | unknown[] | — | The array of objects to evaluate. |\n| path | string | — | Dot-separated path to the field that should be checked in each object. |\n| options | object | — | Optional configuration for counting logic. |\n| └equals | unknown | — | The exact value to match against. Only values that strictly equal this will be counted. Ignored if match is defined. |\n| └match | (value: unknown) =boolean | — | Custom predicate function that determines whether a value should be counted. Overrides equals if defined. |\n### Return value of the useCount hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| count | number | — | The number of objects where the target value matches the given condition. |",
+    "category": "Utilities",
+    "section": "Data aggregation hooks",
+    "boost": "useCount utilities/useCount #utilities/useCount Utilities Data aggregation hooks"
+  },
+  {
+    "id": "utilities/useDarkMode",
+    "title": "useDarkMode",
+    "lead": "The useDarkMode hook enables you to listen for the color scheme change and react accordingly.",
+    "summary": "The useDarkMode hook enables you to listen for the color scheme change and react accordingly.",
+    "searchText": "useDarkMode\nThe useDarkMode hook enables you to listen for the color scheme change and react accordingly.\nuseDarkMode\nisDarkMode:false\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |",
+    "category": "Utilities",
+    "section": "Browser & device hooks",
+    "boost": "useDarkMode utilities/useDarkMode #utilities/useDarkMode Utilities Browser & device hooks"
+  },
+  {
+    "id": "utilities/useDebugInfo",
+    "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. |",
+    "category": "Utilities",
+    "section": "UI state & input hooks",
+    "boost": "useDebugInfo utilities/useDebugInfo #utilities/useDebugInfo Utilities UI state & input hooks"
+  },
+  {
+    "id": "utilities/useEffectOnce",
+    "title": "useEffectOnce",
+    "lead": "The useEffectOnce hook allows to use a side effect only once after the component has been mounted.",
+    "summary": "The useEffectOnce hook allows to use a side effect only once after the component has been mounted.",
+    "searchText": "useEffectOnce\nThe useEffectOnce hook allows to use a side effect only once after the component has been mounted.\nuseEffectOnce\n0\nIncrement\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| callback | Function | — | The effect callback function to be used after the component has been mounted. |",
+    "category": "Utilities",
+    "section": "Lifecycle & execution hooks",
+    "boost": "useEffectOnce utilities/useEffectOnce #utilities/useEffectOnce Utilities Lifecycle & execution hooks"
+  },
+  {
+    "id": "utilities/useElapsedTime",
+    "title": "useElapsedTime",
+    "lead": null,
+    "summary": "Get elapsed timeElapsed time sind mount: 0 ms",
+    "searchText": "useElapsedTime\nuseElapsedTime\nGet elapsed timeElapsed time sind mount: 0 ms\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| startTime | Function | Date.now() | The start time in milliseconds from which to measure the elapsed time. |",
+    "category": "Utilities",
+    "section": "Lifecycle & execution hooks",
+    "boost": "useElapsedTime utilities/useElapsedTime #utilities/useElapsedTime Utilities Lifecycle & execution hooks"
+  },
+  {
+    "id": "utilities/useElementSize",
+    "title": "useElementSize",
+    "lead": "The useElementSize hook allows to easily detect an elements dimension.",
+    "summary": "The useElementSize hook allows to easily detect an elements dimension.",
+    "searchText": "useElementSize\nThe useElementSize hook allows to easily detect an elements dimension.\nuseElementSize\nResize box to see it's width updating\n\nWidth: 50, Height: 50\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | Function | — | Pass a ref of the target element as parameter to the hook to get its height and width. |\n| [width, height] | Number | — | Returns height and width values of the referenced element. |",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "boost": "useElementSize utilities/useElementSize #utilities/useElementSize Utilities DOM behavior hooks"
+  },
+  {
+    "id": "utilities/useEsc",
+    "title": "useEsc",
+    "lead": "The useEsc hook allows to easily detect keydown events for escape key to to react on. This comes in handy when closing something or aborting some operation on esc.",
+    "summary": "The useEsc hook allows to easily detect keydown events for escape key to to react on. This comes in handy when closing something or aborting some operation on esc.",
+    "searchText": "useEsc\nThe useEsc hook allows to easily detect keydown events for escape key to to react on. This comes in handy when closing something or aborting some operation on esc.\nuseEsc\nPress \"esc\" key\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| callback | Function | — | The callback function to be triggered. It passes the key event as argument. |",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "boost": "useEsc utilities/useEsc #utilities/useEsc Utilities DOM behavior hooks"
+  },
+  {
+    "id": "utilities/useEvent",
+    "title": "useEvent",
+    "lead": "The useEvent hook allows to easily detect given events registered on the document.",
+    "summary": "The useEvent hook allows to easily detect given events registered on the document.",
+    "searchText": "useEvent\nThe useEvent hook allows to easily detect given events registered on the document.\nuseEvent\nMouse position:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| callback | Function | — | The callback function to be triggered. It passes the key event as argument. |\n| eventType | String | — | The event type to listen on. |\n| options | Boolean | false | Flag for event listener options. |\n| target | Node | document | The target the event shall be registered for. Use \"window\" for \"resize\" events. |",
+    "category": "Utilities",
+    "section": "UI state & input hooks",
+    "boost": "useEvent utilities/useEvent #utilities/useEvent Utilities UI state & input hooks"
+  },
+  {
+    "id": "utilities/useFocusTrap",
+    "title": "useFocusTrap",
+    "lead": "This custom hook allows to keep the focus inside a defined wrapper element. This might be a dialog or a custom overlay.",
+    "summary": "This custom hook allows to keep the focus inside a defined wrapper element. This might be a dialog or a custom overlay.",
+    "searchText": "useFocusTrap\nThis custom hook allows to keep the focus inside a defined wrapper element. This might be a dialog or a custom overlay.\nuseFocusTrap\n- When you have a external component that will be re-rendered after the overlay opens, you can use the built-in ref. This ref will be returned from this hook and can be set on the respective wrapper element.\n- When you have an element that does not re-render, use a local state setter function to be set as the ref. This element can then be passed as a parameter to this hook and it will be used instead of the built-in ref.const [focusTrapRef, setFocusTrapRef] = useState<HTMLDivElement | null(null); useFocusTrap(focusTrapRef); <div ref={setFocusTrapRef}...</div\nOpen Dialog\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| element | HTMLDivElement \\| null | — | The wrapper element that traps the focus. Use this if your component does not rerender, otherwise use the internal ref that gets returned from the hook. |",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "boost": "useFocusTrap utilities/useFocusTrap #utilities/useFocusTrap Utilities DOM behavior hooks"
+  },
+  {
+    "id": "utilities/useFullscreen",
+    "title": "useFullscreen",
+    "lead": "The cross-browser useFullscreen hook allows to easily switch to fullscreen mode for the document or a dedicated element like a map or a certain part of a service.",
+    "summary": "The cross-browser useFullscreen hook allows to easily switch to fullscreen mode for the document or a dedicated element like a map or a certain part of a service.",
+    "searchText": "useFullscreen\nThe cross-browser useFullscreen hook allows to easily switch to fullscreen mode for the document or a dedicated element like a map or a certain part of a service.\nuseFullscreen\nFullscreen on dedicated element\nFullscreen enabled: false\nIs Fullscreen active: false\nRequest Fullscreen\nExit Fullscreen\nToggle Fullscreen\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| element | HTMLElement | — | The target element other than document. Note, the element need to be existing in the DOM when initializing the hook. Otherwise pass the element as argument to the \"requestFullscreen\" function. |\n| onChange | (callback: OnChangeEventCallback) =void | () ={} | Custom callback function for acting on the fullscreen change. |\n| onError | (callback: EventCallback) =void | () ={} | Custom callback function for acting on an error when the fullscreen fails. |\n| requestFullscreenOptions | { navigationUI?: string \\| \"auto\" \\| \"hide\" \\| \"show\" } | {} | Define additional options for requesting the fullscreen. |\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| requestFullscreen | (targetElement: HTMLElement) =void | — | This function requests the fullscreen to the browser. It takes an optional argument to define the target element later than on init. |\n| exitFullscreen | Function | — | This function exits the fullscreen. |\n| toggleFullscreen | Function | — | This function requests or exists the fullscreen depending on the fullscreen state. |\n| isFullscreen | Boolean | — | Defines whether the browser is in fullscreen mode. Note, the can only be on element in fullscreen at a time, either the document or a dedicated element. |\n| isEnabled | Boolean | — | Tells you if the browser allows the fullscreen mode. |\nExample - click on expand icon to use fullscreen\n\nSample content.\nHere you can have arbitrary content like a map or charts etc.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| element | HTMLElement | — | The target element other than document. Note, the element need to be existing in the DOM when initializing the hook. Otherwise pass the element as argument to the \"requestFullscreen\" function. |\n| onChange | (callback: OnChangeEventCallback) =void | () ={} | Custom callback function for acting on the fullscreen change. |\n| onError | (callback: EventCallback) =void | () ={} | Custom callback function for acting on an error when the fullscreen fails. |\n| requestFullscreenOptions | { navigationUI?: string \\| \"auto\" \\| \"hide\" \\| \"show\" } | {} | Define additional options for requesting the fullscreen. |\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| requestFullscreen | (targetElement: HTMLElement) =void | — | This function requests the fullscreen to the browser. It takes an optional argument to define the target element later than on init. |\n| exitFullscreen | Function | — | This function exits the fullscreen. |\n| toggleFullscreen | Function | — | This function requests or exists the fullscreen depending on the fullscreen state. |\n| isFullscreen | Boolean | — | Defines whether the browser is in fullscreen mode. Note, the can only be on element in fullscreen at a time, either the document or a dedicated element. |\n| isEnabled | Boolean | — | Tells you if the browser allows the fullscreen mode. |",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "boost": "useFullscreen utilities/useFullscreen #utilities/useFullscreen Utilities DOM behavior hooks"
+  },
+  {
+    "id": "utilities/useHover",
+    "title": "useHover",
+    "lead": null,
+    "summary": "Lorem ipsum dolor sit amet",
+    "searchText": "useHover\nuseHover\nLorem ipsum dolor sit amet\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.Ref | — | The reference to the element that shall be hovered. |",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "boost": "useHover utilities/useHover #utilities/useHover Utilities DOM behavior hooks"
+  },
+  {
+    "id": "utilities/useIncomingPostMessages",
+    "title": "useIncomingPostMessages",
+    "lead": "For handling postMessage events in React components.",
+    "summary": "For handling postMessage events in React components.",
+    "searchText": "useIncomingPostMessages\nFor handling postMessage events in React components.\nuseIncomingPostMessages\nYou can either handle \"vanilla\" events yourself or declaratively listen to \"action-style\" events. The latter are inspired by Redux actions, as the event data is an object with a type property and an optional payload.\n\nThe payload does not have to be a simple string, but can be a complex object, as well.\nSend raw message (\"hello, world\")Send action: EVENT_WIDGET_READYSend action: EVENT_WIDGET_DATA\nNote that in this simple example, we're not really sending messages across windows. The origin-filtering handlers are in place, though. You can experiment by opening this page in an iframe inside a page with a different origin and try sending the same events as in the example code.\nSimple events\nShows every incoming postMessage as-is (no origin filter or type parsing). Useful for quick debugging of any messages your page receives.\n\nSimple events with origin filter\nSame raw view, but driven by the origin+handler object form (instead of a single callback) and only for messages whose origin matches this page.\n\nAction events\nOnly shows action-style messages (objects with a `type` field) and extracts their payload. Handy when you control the sender and use message types to route logic.\n\nAction events with origin filter\nAction messages constrained by origin. Use this to route typed messages while still protecting against unexpected origins.\n### Simple event handler\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| handler | (event: MessageEvent<unknown) =void | — | A callback function triggered when a message is received. |\n### Simple handler with origin filtering\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| options | object | — | An object holding the handler and the expected event origin. |\n| └origin | string | — | The origin for which events are accepted. All other events are ignored. |\n| └handler | (event: MessageEvent<unknown) =void | — | A callback function triggered when a message is received. |\n### Declarative, action-style handlers\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| options | object | — | An object holding the handlers and the expected event origin. |\n| └origin | string | \"\" | The origin for which events are accepted. All other events are ignored. Optional; defaults to \"\". |\n| └handlers | Record<string, (payload: unknown) =void| — | Map of callbacks to be registered. Object keys describe the event action \"type\". The handler will be called with the payload. |",
+    "category": "Utilities",
+    "section": "Browser & device hooks",
+    "boost": "useIncomingPostMessages utilities/useIncomingPostMessages #utilities/useIncomingPostMessages Utilities Browser & device hooks"
+  },
+  {
+    "id": "utilities/useInterval",
+    "title": "useInterval",
+    "lead": "The useInterval hook allows for executing some code after a specified amount of time.",
+    "summary": "The useInterval hook allows for executing some code after a specified amount of time.",
+    "searchText": "useInterval\nThe useInterval hook allows for executing some code after a specified amount of time.\nuseInterval\nCount:0\n\nStop\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| callback | Function | — | The callback function to be triggered. |\n| delay | Number | — | The time to wait until the callback function gets invoked. |",
+    "category": "Utilities",
+    "section": "Lifecycle & execution hooks",
+    "boost": "useInterval utilities/useInterval #utilities/useInterval Utilities Lifecycle & execution hooks"
+  },
+  {
+    "id": "utilities/useIsFocusWithin",
+    "title": "useIsFocusWithin",
+    "lead": "The useIsFocusWithin hook allows you to detect whether the focus is currently within a specific element or any of its children. This is useful for managing focus-based behavior like showing or hiding UI elements, styling active areas, or triggering accessibility behavior.",
+    "summary": "The useIsFocusWithin hook allows you to detect whether the focus is currently within a specific element or any of its children. This is useful for managing focus-based behavior like showing or hiding UI elements, styling active areas, or triggering accessibility behavior.",
+    "searchText": "useIsFocusWithin\nThe useIsFocusWithin hook allows you to detect whether the focus is currently within a specific element or any of its children. This is useful for managing focus-based behavior like showing or hiding UI elements, styling active areas, or triggering accessibility behavior.\nuseIsFocusWithin\nIt provides a boolean flag isFocusedWithin and a ref you can attach to any container. Optionally, you can provide callbacks for when focus enters or leaves the container, and configure a delay for blur detection.\nClick inside or outside\nSimple input 1\n\nSimple input 2\n\nFocus is outside the block\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.RefObject<HTMLElement| — | Optional ref to an existing DOM element. If not provided, the hook will return its own ref. |\n| onFocusWithin | Function | — | Callback triggered when focus enters the target element or any of its children. |\n| onBlurWithin | Function | — | Callback triggered when focus leaves the target element and all of its children. |\n| delay | number | — | Optional delay in milliseconds before calling onBlurWithin. Useful when focus quickly shifts inside the container. |",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "boost": "useIsFocusWithin utilities/useIsFocusWithin #utilities/useIsFocusWithin Utilities DOM behavior hooks"
+  },
+  {
+    "id": "utilities/useKey",
+    "title": "useKey",
+    "lead": "The useKey hook allows to easily detect key events. It can be used in two ways, either to specify a specific key to listen for or with a callback to listen for all keys.",
+    "summary": "The useKey hook allows to easily detect key events. It can be used in two ways, either to specify a specific key to listen for or with a callback to listen for all keys.",
+    "searchText": "useKey\nThe useKey hook allows to easily detect key events. It can be used in two ways, either to specify a specific key to listen for or with a callback to listen for all keys.\nuseKey\nKey\n\npressed\n\nKey\n\npressed\n\nKey\n\npressed\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| keyOrCallback | string \\| ((event: KeyboardEvent) =void) | — | Either a key string (e.g., \"Enter\") or a callback function |\n| callbackOrEventTypes | (event: KeyboardEvent) =void \\| KeyboardEventType[] | — | If the first argument is a key, this should be the callback function. If the first argument is a callback, this is an optional array of event types. |\n| eventTypesOrNode | KeyboardEventType[] \\| Document | [keydown] | If the first argument is a key, this should be an array of event types. If the first argument is a callback, this is the node (defaults to document). |\n| node | Node | document | Optional DOM node to attach the event listener to (defaults to document). |",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "boost": "useKey utilities/useKey #utilities/useKey Utilities DOM behavior hooks"
+  },
+  {
+    "id": "utilities/useLocalStorage",
+    "title": "useLocalStorage / useSessionStorage",
+    "lead": "The useLocalStorage and the useSessionStorage hook allows to save custom data in the respective storage locations.",
+    "summary": "The useLocalStorage and the useSessionStorage hook allows to save custom data in the respective storage locations.",
+    "searchText": "useLocalStorage / useSessionStorage\nThe useLocalStorage and the useSessionStorage hook allows to save custom data in the respective storage locations.\nuseLocalStorage / useSessionStorage\nTom - 26\n{\n\"enableBuyOption\": true\n}\n\nSet NameSet AgeRemove NameRemove AgeToggle Settings\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| key | string | — | The key used for storing and retrieving values from the storage. |\n| defaultValue | any | — | The initial default value to be stored. If passed a function, it gets executed. |\n| [value, setValue, removeValue] | [any, Function, Function] | — | Returns the stored value and two functions for setting and removing the value from the storage. |",
+    "category": "Utilities",
+    "section": "Browser & device hooks",
+    "boost": "useLocalStorage / useSessionStorage utilities/useLocalStorage #utilities/useLocalStorage Utilities Browser & device hooks"
+  },
+  {
+    "id": "utilities/useLocationSuggestions",
+    "title": "useLocationSuggestions",
+    "lead": "The useLocationSuggestions hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.",
+    "summary": "The useLocationSuggestions hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.",
+    "searchText": "useLocationSuggestions\nThe useLocationSuggestions hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.\nuseLocationSuggestions\nHere map location search\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| query | string | — | The user input string to search for location suggestions. |\n| options | object | — | Optional configuration for the hook. |\n| └apiKey | string | — | Your HERE Maps API key. Defaults to \"YOURAPIKEY\" if not provided. |\n| └fetchUrl | string | — | Optional override for the autocomplete endpoint URL. Defaults to HERE Maps API URL. |\n| └limit | number | 5 | Optional value to define the result limit (between 5 and 20). |\n| └...additionalOptions | unknown | — | Pass in any additional option for the fetch API. |\n### Returns\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| suggestions | LocationSuggestion[] | — | An array of suggestion objects containing an id and label. |\n| loading | boolean | — | Indicates whether the suggestions are currently being fetched. |\n| error | Error \\| null | — | Error object if the fetch fails, otherwise null. |",
+    "category": "Utilities",
+    "section": "UI state & input hooks",
+    "boost": "useLocationSuggestions utilities/useLocationSuggestions #utilities/useLocationSuggestions Utilities UI state & input hooks"
+  },
+  {
+    "id": "utilities/useMax",
+    "title": "useMax",
+    "lead": "Returns the largest valid numeric value found at the specified path within a list of objects. Supports localized formats and gracefully skips unparsable values.",
+    "summary": "Returns the largest valid numeric value found at the specified path within a list of objects. Supports localized formats and gracefully skips unparsable values.",
+    "searchText": "useMax\nReturns the largest valid numeric value found at the specified path within a list of objects. Supports localized formats and gracefully skips unparsable values.\nuseMax\nLongest duration: 1440 min\n### Options for the useMax hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | unknown[] | — | The array of objects to evaluate. |\n| path | string | — | Dot-separated path to the numeric value inside each object. |\n| options | object | — | Optional configuration for number parsing. |\n| └locale | string | \"en-GB\" | Locale string used for parsing localized number formats. Affects grouping and decimal separator interpretation. |\n### Return value of the useMax hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | number | — | The largest valid numeric value found at the given path, or 0 if none could be parsed. |",
+    "category": "Utilities",
+    "section": "Data aggregation hooks",
+    "boost": "useMax utilities/useMax #utilities/useMax Utilities Data aggregation hooks"
+  },
+  {
+    "id": "utilities/useMin",
+    "title": "useMin",
+    "lead": "Returns the smallest valid numeric value found at the specified path within a list of objects. Handles localized number strings and safely ignores invalid values.",
+    "summary": "Returns the smallest valid numeric value found at the specified path within a list of objects. Handles localized number strings and safely ignores invalid values.",
+    "searchText": "useMin\nReturns the smallest valid numeric value found at the specified path within a list of objects. Handles localized number strings and safely ignores invalid values.\nuseMin\nLowest shipment value: 850 €\n### Options for the useMin hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | unknown[] | — | The array of objects to evaluate. |\n| path | string | — | Dot-separated path to the numeric value inside each object. |\n| options | object | — | Optional configuration for number parsing. |\n| └locale | string | \"en-GB\" | Locale string used for parsing localized number formats. Affects grouping and decimal separator interpretation. |\n### Return value of the useMin hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | number | — | The smallest valid numeric value found at the given path, or 0 if none could be parsed. |",
+    "category": "Utilities",
+    "section": "Data aggregation hooks",
+    "boost": "useMin utilities/useMin #utilities/useMin Utilities Data aggregation hooks"
+  },
+  {
+    "id": "utilities/useMutationObserver",
+    "title": "useMutationObserver",
+    "lead": "The useMutationObserver hook enables you to listen for changes on the given element or on its children. For more details, check out https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver",
+    "summary": "The useMutationObserver hook enables you to listen for changes on the given element or on its children. For more details, check out https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver",
+    "searchText": "useMutationObserver\nThe useMutationObserver hook enables you to listen for changes on the given element or on its children. For more details, check out https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver\nuseMutationObserver\nDemo callout\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nSet Default StyleSet Primary StyleSet Secondary StyleSet Warning StyleSet Danger Style\nElement Changes:-\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| targetElement | HTMLElement \\| React.MutableRefObject<object\\| null \\| undefined | — | The ref or target element to observe changes for. |\n| callback | MutationCallback | — | The callback to execute when mutations are observed. |\n| options | { attributes?: boolean; childList?: boolean; subtree?: boolean; } | — | Options passed to the mutation observer. |",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "boost": "useMutationObserver utilities/useMutationObserver #utilities/useMutationObserver Utilities DOM behavior hooks"
+  },
+  {
+    "id": "utilities/useOnlineStatus",
+    "title": "useOnlineStatus",
+    "lead": "The useOnlineStatus hook tells you when there is a network connection or not.",
+    "summary": "The useOnlineStatus hook tells you when there is a network connection or not.",
+    "searchText": "useOnlineStatus\nThe useOnlineStatus hook tells you when there is a network connection or not.\nuseOnlineStatus\nYou are online",
+    "category": "Utilities",
+    "section": "Browser & device hooks",
+    "boost": "useOnlineStatus utilities/useOnlineStatus #utilities/useOnlineStatus Utilities Browser & device hooks"
+  },
+  {
+    "id": "utilities/useOnScreen",
+    "title": "useOnScreen",
+    "lead": "The useOnScreen hook tells you when an element is visible on screen.",
+    "summary": "The useOnScreen hook tells you when an element is visible on screen.",
+    "searchText": "useOnScreen\nThe useOnScreen hook tells you when an element is visible on screen.\nuseOnScreen\nHeader 2 is not visible\nHeader\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta? Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto, eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto, unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos, tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a, inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos, nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus cumque nobis iste asperiores illum fugit\nHeader 2\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta? Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto, eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto, unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos, tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a, inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos, nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus cumque nobis iste asperiores illum fugit veritatis fugiat quia voluptates cupiditate vel rerum eligendi facere sint nostrum quam, maiores dolorem repellat voluptas! Magnam ullam quis quas aut consequuntur quo doloremque, earum sint soluta vero iste quasi voluptates labore rerum aspernatur illum esse maxime laudantium? Tempore perspiciatis perferendis ea dolorem et quasi eos illo beatae consectetur maxime, enim ducimus corrupti, accusantium quisquam rem dolorum itaque iste velit. Amet similique accusamus doloribus expedita modi a architecto accusantium labore unde non, dolore totam quaerat sit laboriosam quae ullam impedit, pariatur repudiandae quisquam debitis repellendus nihil. Cumque blanditiis ut recusandae illum! Maiores eveniet nulla exercitationem natus delectus est minus a architecto pariatur molestias quo nihil maxime quasi facere magnam neque dolorem ad, doloribus hic! Qui corporis perspiciatis dolores rem minima tenetur. Fugit ipsa consectetur ad reiciendis, quia iste, sapiente rerum exercitationem reprehenderit laborum eligendi cumque? Quia porro modi repudiandae nostrum accusamus! Corporis eum fugit nihil facilis placeat ab est obcaecati consequuntur qui atque tempore soluta aliquid saepe ducimus, at sed modi illo ipsa numquam ratione vero eos reprehenderit! Sapiente nesciunt consequatur labore iste quas possimus rem cumque, fugit laborum repellendus nisi adipisci officia temporibus quaerat! Beatae doloribus veritatis at, maiores suscipit debitis reiciendis cum impedit non aut modi iste? Placeat illo quisquam assumenda esse cum ipsum quasi perspiciatis voluptatem rerum itaque, similique quidem molestias exercitationem ullam eum amet tempore dolor aliquid unde deserunt dolore excepturi. Aut dolore rerum sequi nihil soluta eum expedita consequatur aliquid consequuntur saepe esse necessitatibus repudiandae, natus, officia enim odit rem nobis adipisci, voluptates autem dolor blanditiis ipsam animi a. Illo accusantium iure qui aperiam commodi, quidem, dolorem error eum animi, id nam? Corporis, non adipisci!\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.MutableRefObject<HTMLElement| — | The react ref to the element to observe visibility for. |\n| options | Object | { rootMargin: \"0px\" } | Additional IntersectionObserver options. See https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverAPI |",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "boost": "useOnScreen utilities/useOnScreen #utilities/useOnScreen Utilities DOM behavior hooks"
+  },
+  {
+    "id": "utilities/usePostMessage",
+    "title": "usePostMessage",
+    "lead": "The usePostMessage hook allows to easily exchange events and data between the parent window and embedded iframes.",
+    "summary": "The usePostMessage hook allows to easily exchange events and data between the parent window and embedded iframes.",
+    "searchText": "usePostMessage\nThe usePostMessage hook allows to easily exchange events and data between the parent window and embedded iframes.\nusePostMessage\nDeprecated hookThis hook is deprecated and no longer maintained. Please switch to the dedicated sender usePostMessageSender and receiver useIncomingPostMessages hooks instead.\nParent window\nSend message to widget iframe\nMessage from widget:-\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| messagePrefix | string | — | A custom prefix to limit the event listener for these events. |\n| onReceiveMessage | (eventData: any) =void | — | A callback function triggered when a message is received. |\n### Returns\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| sendMessageToParent | (message: RemoteAction) =void | — | Function to send an event with payload to the parent window. |\n| sendMessageToWidget | (message: RemoteAction, targetFrames: HTMLIFrameElement[]) | — | Function to send an event with payload to a list of iframes. |",
+    "category": "Utilities",
+    "section": "Browser & device hooks",
+    "boost": "usePostMessage utilities/usePostMessage #utilities/usePostMessage Utilities Browser & device hooks"
+  },
+  {
+    "id": "utilities/usePostMessageSender",
+    "title": "usePostMessageSender",
+    "lead": "Helper hook to fire postMessage events to other windows: a specific target (including yourself), the parent or top window, or every iframe on the page. It uses the wildcard target origin (*) and no-ops when a target window is missing, so it is safe to call even when an iframe or parent is not present.",
+    "summary": "Helper hook to fire postMessage events to other windows: a specific target (including yourself), the parent or top window, or every iframe on the page. It uses the wildcard target origin (*) and no-ops when a target window is missing, so it is safe to call even when an iframe or parent is not present.",
+    "searchText": "usePostMessageSender\nHelper hook to fire postMessage events to other windows: a specific target (including yourself), the parent or top window, or every iframe on the page. It uses the wildcard target origin (*) and no-ops when a target window is missing, so it is safe to call even when an iframe or parent is not present.\nusePostMessageSender\nUse the buttons below to dispatch messages using usePostMessageSender. The gray box below is a real <iframe> that listens for your messages and sends an IFRAME_ECHO back.\nSend to Self (Window)Send to Iframe (Ref)Broadcast to All IframesSend to Parent\nTarget Iframe\nThis iframe acts as a separate window context. It runs a script to display what it receives.\n\nActivity Log\nShows outgoing confirmations and incoming \"Echos\" from the iframe.\n### Returns\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| sendMessage | (message: unknown, targetWindow: WindowProxy \\| null \\| undefined) =void | — | Send a message to the provided window (or to yourself if you pass window). Does nothing if target is null/undefined. |\n| sendMessageToParent | (message: unknown) =void | — | Send a message to the parent window (no-op when already top-level). |\n| sendMessageToTop | (message: unknown) =void | — | Send a message to the top window (no-op when already top-level). |\n| sendMessageToAllIframes | (message: unknown) =void | — | Broadcast a message to every iframe found on the page. |",
+    "category": "Utilities",
+    "section": "Browser & device hooks",
+    "boost": "usePostMessageSender utilities/usePostMessageSender #utilities/usePostMessageSender Utilities Browser & device hooks"
+  },
+  {
+    "id": "utilities/usePrevious",
+    "title": "usePrevious",
+    "lead": "The usePrevious hook allows to easily access state from previous component render. Instead of using a React.ref and a useEffect, this hook uses a useState internally to keep track of the previous state value.",
+    "summary": "The usePrevious hook allows to easily access state from previous component render. Instead of using a React.ref and a useEffect, this hook uses a useState internally to keep track of the previous state value.",
+    "searchText": "usePrevious\nThe usePrevious hook allows to easily access state from previous component render. Instead of using a React.ref and a useEffect, this hook uses a useState internally to keep track of the previous state value.\nusePrevious\n- If the value you need can be computed entirely from the current props or other state, remove that redundant state altogether. If you’re worried about recomputing too often, the useMemo Hook can help.\n- If you want to reset the entire component tree’s state, pass a different key to your component.\n- If you can, update all the relevant state in the event handlers.\n\njsx\nfunction List({ items }) {\nconst [isReverse, setIsReverse] = useState(false);\nconst [selection, setSelection] = useState(null);\n\n// Better: Adjust the state while rendering\nconst [prevItems, setPrevItems] = useState(items);\nif (items !== prevItems) {\nsetPrevItems(items);\nsetSelection(null);\n}\n// ...\n}\n\nNote: If you want to use this to update the internal state due to a prop change, you might run into a loop. Therefore, use the following snippet suggested by the React team here: https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes\n{ count: 1, previousCount: 1 }\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| state | any | — | The value of the current state to keep track of. |\n|  | any | — | Returns the previous value of the state to keep track of. |",
+    "category": "Utilities",
+    "section": "Lifecycle & execution hooks",
+    "boost": "usePrevious utilities/usePrevious #utilities/usePrevious Utilities Lifecycle & execution hooks"
+  },
+  {
+    "id": "utilities/useResizeObserver",
+    "title": "useResizeObserver",
+    "lead": "The useResizeObserver hook allows to react on resize changes of a given element.",
+    "summary": "The useResizeObserver hook allows to react on resize changes of a given element.",
+    "searchText": "useResizeObserver\nThe useResizeObserver hook allows to react on resize changes of a given element.\nuseResizeObserver\nNote: that is important to consider the padding of the element to observe and to take it into consideration when working with its width and height. When using the contentRect from the observerEntry, keep in mind that this will not include the paddings.\n\nTo include the target elements padding, please use the borderBoxSize instead.\nBox with padding200x50\nBox without padding200x50",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "boost": "useResizeObserver utilities/useResizeObserver #utilities/useResizeObserver Utilities DOM behavior hooks"
+  },
+  {
+    "id": "utilities/useScrollPosition",
+    "title": "useScrollPosition",
+    "lead": "The useScrollPosition hook allows to react on a desired scroll position of a given target. Use it when showing or hiding content based on the scroll position.",
+    "summary": "The useScrollPosition hook allows to react on a desired scroll position of a given target. Use it when showing or hiding content based on the scroll position.",
+    "searchText": "useScrollPosition\nThe useScrollPosition hook allows to react on a desired scroll position of a given target. Use it when showing or hiding content based on the scroll position.\nuseScrollPosition\nDefault example for scroll position of the ApplicationBody module-content0 px\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\nMauris sed blandit nisi. In tellus sem, auctor ut porttitor eget, dictum et eros. Integer in sem nec lacus hendrerit cursus. Nulla mattis nisi et tincidunt tincidunt. Fusce ullamcorper nunc in quam euismod mattis et dignissim nulla. Ut tincidunt sodales felis, id feugiat ligula suscipit vel. Suspendisse ullamcorper commodo maximus.\n\nNam in dapibus eros, eget tristique enim. Vivamus non neque at elit cursus tempus vel vitae neque. Aenean pellentesque aliquet lorem, commodo ornare dolor tempus id. Curabitur efficitur nulla eu libero consectetur, at ultricies nisi condimentum. Nam imperdiet ac magna ut congue. Vivamus id aliquet turpis, quis suscipit nulla. Nunc placerat pulvinar neque. Donec ullamcorper vel ante ac iaculis. Phasellus eget dapibus turpis. Nam interdum enim at bibendum faucibus. Nunc ipsum urna, finibus ut hendrerit at, laoreet sit amet eros. Morbi ligula arcu, eleifend et dictum egestas, consequat vitae nunc.\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\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\nMauris sed blandit nisi. In tellus sem, auctor ut porttitor eget, dictum et eros. Integer in sem nec lacus hendrerit cursus. Nulla mattis nisi et tincidunt tincidunt. Fusce ullamcorper nunc in quam euismod mattis et dignissim nulla. Ut tincidunt sodales felis, id feugiat ligula suscipit vel. Suspendisse ullamcorper commodo maximus.\n\nNam in dapibus eros, eget tristique enim. Vivamus non neque at elit cursus tempus vel vitae neque. Aenean pellentesque aliquet lorem, commodo ornare dolor tempus id. Curabitur efficitur nulla eu libero consectetur, at ultricies nisi condimentum. Nam imperdiet ac magna ut congue. Vivamus id aliquet turpis, quis suscipit nulla. Nunc placerat pulvinar neque. Donec ullamcorper vel ante ac iaculis. Phasellus eget dapibus turpis. Nam interdum enim at bibendum faucibus. Nunc ipsum urna, finibus ut hendrerit at, laoreet sit amet eros. Morbi ligula arcu, eleifend et dictum egestas, consequat vitae nunc.\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| target | Window \\| HTMLBodyElement \\| React.ReactElement \\| React.MutableRefObject<object\\| undefined | — | The target element to get the scroll position for. |\n| return | Number | — | The hook returns the scroll position as a number |\nExample for scroll position of a certain element0 px\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\nMauris sed blandit nisi. In tellus sem, auctor ut porttitor eget, dictum et eros. Integer in sem nec lacus hendrerit cursus. Nulla mattis nisi et tincidunt tincidunt. Fusce ullamcorper nunc in quam euismod mattis et dignissim nulla. Ut tincidunt sodales felis, id feugiat ligula suscipit vel. Suspendisse ullamcorper commodo maximus.\n\nNam in dapibus eros, eget tristique enim. Vivamus non neque at elit cursus tempus vel vitae neque. Aenean pellentesque aliquet lorem, commodo ornare dolor tempus id. Curabitur efficitur nulla eu libero consectetur, at ultricies nisi condimentum. Nam imperdiet ac magna ut congue. Vivamus id aliquet turpis, quis suscipit nulla. Nunc placerat pulvinar neque. Donec ullamcorper vel ante ac iaculis. Phasellus eget dapibus turpis. Nam interdum enim at bibendum faucibus. Nunc ipsum urna, finibus ut hendrerit at, laoreet sit amet eros. Morbi ligula arcu, eleifend et dictum egestas, consequat vitae nunc.\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\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\nMauris sed blandit nisi. In tellus sem, auctor ut porttitor eget, dictum et eros. Integer in sem nec lacus hendrerit cursus. Nulla mattis nisi et tincidunt tincidunt. Fusce ullamcorper nunc in quam euismod mattis et dignissim nulla. Ut tincidunt sodales felis, id feugiat ligula suscipit vel. Suspendisse ullamcorper commodo maximus.\n\nNam in dapibus eros, eget tristique enim. Vivamus non neque at elit cursus tempus vel vitae neque. Aenean pellentesque aliquet lorem, commodo ornare dolor tempus id. Curabitur efficitur nulla eu libero consectetur, at ultricies nisi condimentum. Nam imperdiet ac magna ut congue. Vivamus id aliquet turpis, quis suscipit nulla. Nunc placerat pulvinar neque. Donec ullamcorper vel ante ac iaculis. Phasellus eget dapibus turpis. Nam interdum enim at bibendum faucibus. Nunc ipsum urna, finibus ut hendrerit at, laoreet sit amet eros. Morbi ligula arcu, eleifend et dictum egestas, consequat vitae nunc.\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| target | Window \\| HTMLBodyElement \\| React.ReactElement \\| React.MutableRefObject<object\\| undefined | — | The target element to get the scroll position for. |\n| return | Number | — | The hook returns the scroll position as a number |",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "boost": "useScrollPosition utilities/useScrollPosition #utilities/useScrollPosition Utilities DOM behavior hooks"
+  },
+  {
+    "id": "utilities/useSearch",
+    "title": "useSearch",
+    "lead": "The useSearch hook is a custom hook to filter a list of objects by a search value. Supports field-based filtering, custom filtering logic, debounce, and case sensitivity.",
+    "summary": "The useSearch hook is a custom hook to filter a list of objects by a search value. Supports field-based filtering, custom filtering logic, debounce, and case sensitivity.",
+    "searchText": "useSearch\nThe useSearch hook is a custom hook to filter a list of objects by a search value. Supports field-based filtering, custom filtering logic, debounce, and case sensitivity.\nuseSearch\nSearch a list of objects\n\nAppleBananaFigPearMango\n### Options for the useSearch hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| list | T[] | — | The array of objects to search through. |\n| options | object | — | Configuration options for the search behavior. |\n| └fields | (keyof T \\| string)[] | — | Fields to search through. If omitted, all top-level string/number fields are used. |\n| └customFilter | (item: T, query: string) =boolean | — | Optional custom filter function overriding field-based filtering. |\n| └debounceMs | number | — | Debounce time in milliseconds. If omitted, debounce is disabled. |\n| └caseSensitive | boolean | false | Whether the search should be case-sensitive. |\n### Return value of the useSearch hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| searchValue | string | — | The current search input string. |\n| setSearchValue | Function | — | A setter function to update the search query. |\n| filteredList | T[] | — | The list of items matching the current search query. |\nSearch a list of objects for multiple fields\n\nAlice - 30 | Berlin\nBob - 25 | Munich\nCharlie - 35 |\n### Options for the useSearch hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| list | T[] | — | The array of objects to search through. |\n| options | object | — | Configuration options for the search behavior. |\n| └fields | (keyof T \\| string)[] | — | Fields to search through. If omitted, all top-level string/number fields are used. |\n| └customFilter | (item: T, query: string) =boolean | — | Optional custom filter function overriding field-based filtering. |\n| └debounceMs | number | — | Debounce time in milliseconds. If omitted, debounce is disabled. |\n| └caseSensitive | boolean | false | Whether the search should be case-sensitive. |\n### Return value of the useSearch hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| searchValue | string | — | The current search input string. |\n| setSearchValue | Function | — | A setter function to update the search query. |\n| filteredList | T[] | — | The list of items matching the current search query. |",
+    "category": "Utilities",
+    "section": "UI state & input hooks",
+    "boost": "useSearch utilities/useSearch #utilities/useSearch Utilities UI state & input hooks"
+  },
+  {
+    "id": "utilities/useSorting",
+    "title": "useSorting",
+    "lead": "The useSorting hook provides an easy way to sort any list by a specified key using natural sort order. It offers flexible control over sorting direction and key selection, making it ideal for dynamic sorting use cases.",
+    "summary": "The useSorting hook provides an easy way to sort any list by a specified key using natural sort order. It offers flexible control over sorting direction and key selection, making it ideal for dynamic sorting use cases.",
+    "searchText": "useSorting\nThe useSorting hook provides an easy way to sort any list by a specified key using natural sort order. It offers flexible control over sorting direction and key selection, making it ideal for dynamic sorting use cases.\nuseSorting\nNameQuantity\n\nBox20\nContainer1\nCrate15\nDrum12\nPallet10\nParcel8\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be sorted. |\n| initialKey | SortKey<T= keyof T \\| [keyof T, keyof T] | — | The initial key or keys to sort by. Must be a property of the items in the array. It can be either a single string or a tuple like ['name', 'date'] |\n| initialDirection | SortDirectionType | SortDirection.ASCENDING | The initial sort direction. Can be SortDirection.ASCENDING or SortDirection.DESCENDING. |\n| enableNaturalSort | boolean | true | Whether to use natural sort order. Defaults to false. |\n| { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection, toggleDirection } | Object | — | Returns an object containing: \"sortedItems\" - the sorted array \"sortKey\" - the key(s) to sort the data for \"sortDirection\" - the current direction that the data is sorted \"setSortKey\" - function to change the sorting key(s) afterwards \"setSortDirection\" - function to change the sorting order afterwards \"toggleDirection\" - function to toggle sort direction |\nSort by a primary column. Hold shift key to sort by a secondary column\nCategoryNameQuantity\n\nShippingParcel8\nShippingBox20\nShippingEnvelope50\nShippingBag30\nStoragePallet10\nStorageContainer1\nStorageCrate15\nStorageDrum12\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be sorted. |\n| initialKey | SortKey<T= keyof T \\| [keyof T, keyof T] | — | The initial key or keys to sort by. Must be a property of the items in the array. It can be either a single string or a tuple like ['name', 'date'] |\n| initialDirection | SortDirectionType | SortDirection.ASCENDING | The initial sort direction. Can be SortDirection.ASCENDING or SortDirection.DESCENDING. |\n| enableNaturalSort | boolean | true | Whether to use natural sort order. Defaults to false. |\n| { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection, toggleDirection } | Object | — | Returns an object containing: \"sortedItems\" - the sorted array \"sortKey\" - the key(s) to sort the data for \"sortDirection\" - the current direction that the data is sorted \"setSortKey\" - function to change the sorting key(s) afterwards \"setSortDirection\" - function to change the sorting order afterwards \"toggleDirection\" - function to toggle sort direction |",
+    "category": "Utilities",
+    "section": "Table & data hooks",
+    "boost": "useSorting utilities/useSorting #utilities/useSorting Utilities Table & data hooks"
+  },
+  {
+    "id": "utilities/useStateWithValidation",
+    "title": "useStateWithValidation",
+    "lead": "The useStateWithValidation hook allows to easily validate state. This comes in handy when validating form inputs.",
+    "summary": "The useStateWithValidation hook allows to easily validate state. This comes in handy when validating form inputs.",
+    "searchText": "useStateWithValidation\nThe useStateWithValidation hook allows to easily validate state. This comes in handy when validating form inputs.\nuseStateWithValidation\nUsername\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| validationFn | Function | — | The validation function that gets invoked when the passed state changes. |\n| initialValue | Any | — | The initial state value. |\n| [state, onChange, isValid] | Array | — | Returns the actual \"state\", the \"onChange\" function that will be invoked when the state changes, and the \"isValid\" flag. |",
+    "category": "Utilities",
+    "section": "UI state & input hooks",
+    "boost": "useStateWithValidation utilities/useStateWithValidation #utilities/useStateWithValidation Utilities UI state & input hooks"
+  },
+  {
+    "id": "utilities/useSum",
+    "title": "useSum",
+    "lead": "The useSum hook is a versatile utility for calculating the total of numeric, localized values within a list of objects—particularly useful for rendering totals in table footers, dashboards, or KPIs.",
+    "summary": "The useSum hook is a versatile utility for calculating the total of numeric, localized values within a list of objects—particularly useful for rendering totals in table footers, dashboards, or KPIs.",
+    "searchText": "useSum\nThe useSum hook is a versatile utility for calculating the total of numeric, localized values within a list of objects—particularly useful for rendering totals in table footers, dashboards, or KPIs.\nuseSum\nIt supports locale-aware number parsing (e.g. 1.234,50 € or 2 500,75 kg)\n3.930,75 km\n5.197 €\n1860min\n31h\n185 km\n### Options for the useSum hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | unknown[] | — | The array of objects to aggregate values from. |\n| path | string | — | Dot-separated path to the numeric value in each object. |\n| options | object | — | Optional configuration for parsing behavior. |\n| └locale | string | \"en-GB\" | Locale string used to parse localized number formats. Affects how grouping and decimal separators are interpreted. |\n### Return value of the useSum hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| sum | number | — | The total sum of all parsed values from the provided path in the given item list. |",
+    "category": "Utilities",
+    "section": "Data aggregation hooks",
+    "boost": "useSum utilities/useSum #utilities/useSum Utilities Data aggregation hooks"
+  },
+  {
+    "id": "utilities/useTableExport",
+    "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). |",
+    "category": "Utilities",
+    "section": "Table & data hooks",
+    "boost": "useTableExport utilities/useTableExport #utilities/useTableExport Utilities Table & data hooks"
+  },
+  {
+    "id": "utilities/useTableSelection",
+    "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. |",
+    "category": "Utilities",
+    "section": "Table & data hooks",
+    "boost": "useTableSelection utilities/useTableSelection #utilities/useTableSelection Utilities Table & data hooks"
+  },
+  {
+    "id": "utilities/useTimeout",
+    "title": "useTimeout",
+    "lead": "The useTimeout hook allows for executing some code after a specified amount of time.",
+    "summary": "The useTimeout hook allows for executing some code after a specified amount of time.",
+    "searchText": "useTimeout\nThe useTimeout hook allows for executing some code after a specified amount of time.\nuseTimeout\nMessage:...\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| callback | Function | — | The callback function to be triggered. |\n| delay | Number | — | The time to wait until the callback function gets invoked. |",
+    "category": "Utilities",
+    "section": "Lifecycle & execution hooks",
+    "boost": "useTimeout utilities/useTimeout #utilities/useTimeout Utilities Lifecycle & execution hooks"
+  },
+  {
+    "id": "utilities/useToggle",
+    "title": "useToggle",
+    "lead": "The useToggle hook is a custom React hook for managing a boolean state. It provides an intuitive API to toggle, enable, or disable the value. You can optionally initialize it with a default state. Use it to handle toggle-based logic like switches, modals, or content visibility in your React components.",
+    "summary": "The useToggle hook is a custom React hook for managing a boolean state. It provides an intuitive API to toggle, enable, or disable the value. You can optionally initialize it with a default state. Use it to handle toggle-based logic like switches, modals, or content visibility in your React components.",
+    "searchText": "useToggle\nThe useToggle hook is a custom React hook for managing a boolean state. It provides an intuitive API to toggle, enable, or disable the value. You can optionally initialize it with a default state. Use it to handle toggle-based logic like switches, modals, or content visibility in your React components.\nuseToggle\nUsage on buttonsToggle is OFF\nToggleEnableDisable\nUsage on a Switch component\n\nUsage for hiding contentHide content\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| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| initialValue | Boolean | — | The initial state of the toggle. Defaults to false. |\n| toggle | Function | — | Toggles the current state between true and false. Accepts an optional callback function that executes after the state changes, receiving the new state as an argument. |\n| enable | Function | — | Sets the toggle state to true. |\n| disable | Function | — | Sets the toggle state to false. |",
+    "category": "Utilities",
+    "section": "Lifecycle & execution hooks",
+    "boost": "useToggle utilities/useToggle #utilities/useToggle Utilities Lifecycle & execution hooks"
+  },
+  {
+    "id": "utilities/useWindowResize",
+    "title": "useWindowResize",
+    "lead": "The useWindowResize hook allows to react on window size changes.",
+    "summary": "The useWindowResize hook allows to react on window size changes.",
+    "searchText": "useWindowResize\nThe useWindowResize hook allows to react on window size changes.\nuseWindowResize\nWidth is more than 1024px\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| callback | Function | — | The callback function to be triggered. The callback will be throttled by default. |\n| timeout | Number | 300 | The time in milliseconds to throttle the callback. |",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "boost": "useWindowResize utilities/useWindowResize #utilities/useWindowResize Utilities DOM behavior hooks"
+  }
+]