@rio-cloud/uikit-mcp 1.1.2 → 1.1.4

package/dist/doc-metadata.json

@@ -4,7 +4,7 @@
     "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. |",
+    "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.\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\nVisualizing rating distribution\n\nCategoryPercentage\n\nPoor15%\n\nBelow Average20%\n\nAverage25%\n\nGood15%\n\nExcellent25%\nRisk levelReasonSuggested action\n\nLow risk\nStable weather conditionsMonitor\n\nHigh risk\nLabor strike at destinationReroute shipment\n\nCritical risk\nCustoms hold & inspectionExpedite clearance",
     "category": "Components",
     "section": "Misc",
     "boost": "AccentBar components/accentBar #components/accentBar Components Misc"
@@ -14,7 +14,7 @@
     "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. |",
+    "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",
     "category": "Components",
     "section": "Misc",
     "boost": "Activity components/activity #components/activity Components Misc"
@@ -24,7 +24,7 @@
     "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. |",
+    "searchText": "AnimatedNumber\nAnimatedNumber\nDefault AnimatedNumber0\nAnimatedNumber with prefix and unit+0%\nAnimatedNumber as simple timerHurry up! Only60sremaining.",
     "category": "Components",
     "section": "Content",
     "boost": "AnimatedNumber components/animatedNumber #components/animatedNumber Components Content"
@@ -34,7 +34,7 @@
     "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. |",
+    "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\nStatus\nIdle\n\nSync now\n\nNo sync yet",
     "category": "Components",
     "section": "Content",
     "boost": "AnimatedTextReveal components/animatedTextReveal #components/animatedTextReveal Components Content"
@@ -44,7 +44,7 @@
     "title": "Animations",
     "lead": "The UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.",
     "summary": "The UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.",
-    "searchText": "Animations\nThe UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.\nAnimations\nThe official documentation can be found here https://motion.dev/docs/react\nSome Data\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nAdd ItemItem B5WVP1454N\n\nItem B2NSH3LST8\n\nItem U0X067T8JOG\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam 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 38PP430D6M\n\nItem RPNOB6D411\n\nItem AQQ4M0ZVKXI\n\nItem KTZKI295U1\n\nItem 5DTMWYDMLFH\n\nItem Z5EJ4VMHJ1H",
+    "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 52KRTXSG4PL\n\nItem SXRN323D9IL\n\nItem O8SH8KFUWG\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam 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 B0A73GATAR\n\nItem GMKA93SKRQ\n\nItem 2E9PXOO6CNJ\n\nItem QDB3LPYVNB\n\nItem ZACAR9DD3H\n\nItem D27NQVDPHK",
     "category": "Components",
     "section": "Content",
     "boost": "Animations components/animations #components/animations Components Content"
@@ -54,7 +54,7 @@
     "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. |",
+    "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\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",
     "category": "Components",
     "section": "Application",
     "boost": "ApplicationHeader components/appHeader #components/appHeader Components Application"
@@ -64,7 +64,7 @@
     "title": "ApplicationLayout",
     "lead": "The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar",
     "summary": "The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar",
-    "searchText": "ApplicationLayout\nThe ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar\nApplicationLayout\nThe ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.\n\nNote: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragmentinstead\n\nNote: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <bodynode.\nDefault example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nSubNavigation example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nBody banner example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nBottom bar example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nSidebar Example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSidebar Right\n\nSidebar components may be added here...\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n3\n1\n2\n1\n\nAsset Group5\nVehicle-2702Asset 1002\nVehicle-2861Asset 1006\nVehicle-3712Asset 1001\nVehicle-6558Asset 1000\nVehicle-9897Asset 1003\n\nUngrouped2\n\n200\n\nSidebar Right\n\nSidebar components may be added here...\n\nClose\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\nSample Service Content\nOpen Sidebar\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nBottom Button\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |",
+    "searchText": "ApplicationLayout\nThe ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar\nApplicationLayout\nThe ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.\n\nNote: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragmentinstead\n\nNote: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <bodynode.\nDefault example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\nSubNavigation example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\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.\nBottom bar example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nButton\nSidebar Example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSidebar Right\n\nSidebar components may be added here...\n\nButton\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n1\n1\n1\n2\n\nAsset Group3\nVehicle-3474Asset 1001\nVehicle-4057Asset 1004\nVehicle-7625Asset 1002\n\nUngrouped2\n\n200\n\nSidebar Right\n\nSidebar components may be added here...\n\nClose\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\nSample Service Content\nOpen Sidebar\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nBottom Button",
     "category": "Components",
     "section": "Application",
     "boost": "ApplicationLayout components/appLayout #components/appLayout Components Application"
@@ -74,7 +74,7 @@
     "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. |",
+    "searchText": "AppNavigationBar\nAppNavigationBar\nTitle of content\nTitle of content\nWith more space, a back button label can be shown\nBack\n\nTitle of content\nIn some cases a subtitle comes in handy\nBack\n\nTitle of content\nlorem ipsum dolor sit amet",
     "category": "Components",
     "section": "Navigation",
     "boost": "AppNavigationBar components/appNavigationBar #components/appNavigationBar Components Navigation"
@@ -94,7 +94,7 @@
     "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. |",
+    "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)",
     "category": "Components",
     "section": "Misc",
     "boost": "AspectRatioPlaceholder components/aspectRatioPlaceholder #components/aspectRatioPlaceholder Components Misc"
@@ -102,9 +102,9 @@
   {
     "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\n5413\n4\n\nGroup - Abel Botsford - 848515\n\nGroup - Ada O'Keefe IV - 40215\n\nGroup - Albert Kulas - 345412\n\nGroup - Alberta Runolfsdottir - 878116\n\nGroup - Alexander Johns - 72049\n\nGroup - Alexandra Jenkins Jr. - 462611\n\nGroup - Alfonso Runte - 64749\n\nGroup - Alice Ferry Jr. - 32587\n\nGroup - Alison Luettgen - 641912\n\nGroup - Alonzo Ratke - 810014\n\nGroup - Alton Mueller - 81233\n\nGroup - Alyssa Walsh - 25789\n\nGroup - Amanda Heaney - 34019\n\nGroup - Amanda Klocko - 940415\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\n7\n3\n10\n\nMy Empty Group4\n\nTruck Group East5\n\nTruck Group North8\nN18-G101 / M-AN 1020\nN18-G103 / M-AN 1023\nN18-G324 / M-AN 1025\nN18-G330 / M-AN 1000\nN18-G508 / M-AN 1005\nN18-G609 / M-AN 1024\nN18-G747 / M-AN 1003\nN18-G997 / M-AN 1010\n\nTruck Group South3\n\nTruck Group West6\n\nAll my unassigned Trucks4\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.\n8\n6\n2\n4\n\n8\n5\n4\n2\n1\n\nMixed Vehicles7\nVehicle-1093Debug: electric\nVehicle-1580Debug: heavy_fuel_oil\nVehicle-3686Debug: gas\nVehicle-4687Debug: gas\nVehicle-6053Debug: diesel\nVehicle-6103Debug: cng\nVehicle-6758Debug: hydrogen\n\nUngrouped13\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 036\n\nFolder 044\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 028\n\nFolder 035\n\nFolder 043\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\nTreeSummary with assetCounts\n12\n7\n2\n2\n10\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\nTreeSummary with TypeCounter\n9\n15\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |",
+    "lead": null,
+    "summary": "Filter",
+    "searchText": "AssetTree\nAssetTree\nFilter\n\n5495\n4\n\nGroup - Aaron Mohr - 86039\n\nGroup - Adrian O'Hara - 439811\n\nGroup - Adrienne Schaden - 479210\n\nGroup - Al Goldner - 873914\n\nGroup - Albert King - 98799\n\nGroup - Alberta Hilpert-Walter - 88645\n\nGroup - Alberta Shields - 35378\n\nGroup - Alberto Kohler - 649411\n\nGroup - Alberto O'Keefe-Connelly - 37468\n\nGroup - Alberto Schultz Jr. - 66257\n\nGroup - Alex Johnson - 42376\n\nGroup - Alexandra Smith - 303812\n\nGroup - Alexandra Volkman-Huels - 20898\n\nGroup - Alonzo Runte - 23058\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[]\nAssetTree with single select\n6\n11\n7\n6\n\nMy Empty Group2\n\nTruck Group East5\n\nTruck Group North9\nN18-G262 / M-AN 1028\nN18-G300 / M-AN 1018\nN18-G399 / M-AN 1005\nN18-G458 / M-AN 1026\nN18-G467 / M-AN 1013\nN18-G489 / M-AN 1011\nN18-G728 / M-AN 1019\nN18-G796 / M-AN 1022\nN18-G815 / M-AN 1016\n\nTruck Group South4\n\nTruck Group West4\n\nAll my unassigned Trucks6\n\nCurrent category:\nassets\nSelected tree groups:\n\nSelected assets:\n\nExpanded tree groups:\nTruck Group North\nAssetTree with multiple asset filter in summary\n5\n4\n4\n7\n\n8\n5\n2\n2\n3\n\nMixed Vehicles9\nVehicle-2340Debug: cng\nVehicle-3222Debug: electric\nVehicle-3383Debug: heavy_fuel_oil\nVehicle-3519Debug: lpg\nVehicle-3837Debug: gas\nVehicle-4670Debug: dual_fuel_diesel_cng\nVehicle-6233Debug: cng\nVehicle-7297Debug: electric\nVehicle-8794Debug: dual_fuel_diesel_cng\n\nUngrouped11\n\nSelected groups:\n\nSelected vehicles:\n\nExpanded groups:\nMixed Vehicles\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\nTree with custom icons\nTree with header and search\n\n20\n\nGroup 019\n\nGroup 028\n\nGroup 033\nTree\nTree with header and search\n\n20\n\nFolder 018\n\nFolder 023\n\nFolder 035\n\nFolder 044\n\nSelected items:\n\nExpanded folders:\nTree without header and search\n\nFolder 012\n\nFolder 028\n\nFolder 036\n\nFolder 044\n\nSelected items:\n\nExpanded folders:\nTreeSummary with assetCounts\n12\n7\n2\n2\n10\nTreeSummary with TypeCounter\n9\n15",
     "category": "Components",
     "section": "Selection",
     "boost": "AssetTree components/assetTree #components/assetTree Components Selection"
@@ -114,7 +114,7 @@
     "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. |",
+    "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(deprecated) | 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(deprecated) | 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(deprecated) | 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"
@@ -124,7 +124,7 @@
     "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. |",
+    "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\nAvatarGroup\nJD\nAAK\nAK\n+2\n\n+2",
     "category": "Components",
     "section": "Misc",
     "boost": "Avatar components/avatar #components/avatar Components Misc"
@@ -144,7 +144,7 @@
     "title": "BarChart",
     "lead": null,
     "summary": "Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.",
-    "searchText": "BarChart\nBarChart\nNote: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.\nSimple horizontal BarChart\n\nJanuaryFebruaryMarchAprilMayJune\n### BarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | String \\| Number \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nHorizontal BarChart\n\nJanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €Costs\n### BarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | String \\| Number \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nMultiple Bars BarChart\n\npv\nuv\n\nPage APage BPage CPage DPage EPage FPage G025005000750010000\n### BarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | String \\| Number \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nStacked BarChart\n\npv\nuv\n\nPage APage BPage CPage DPage EPage FPage G030006000900012000\n### BarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | String \\| Number \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nVertical BarChart\n\nBasistarif\nDiesel\nMaut\nZuschläge\n\n015304560BasistarifDieselMautZuschläge\n### BarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | String \\| Number \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nBarChart with custom Tooltips\npv\nuv\n\nTruck ATruck BTruck CTruck DTruck ETruck FTruck G030006000900012000\n### BarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | String \\| Number \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nMultiple axis BarChart\n\nJanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €CostsQ1Q1Q1Q2Q2Q2\n### BarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | String \\| Number \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |",
+    "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\nMarchJune\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\nJuneTimerange15 €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 G250010000\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 G300012000\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\n60DieselZuschläge\n### BarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | String \\| Number \\| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |\n| dataUnit | string | — | The unit of data displayed in the chart. |\n| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |\n| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |\n| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |\n| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |\n| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |\n| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |\n| additionalAxes | React.ReactElement<XAxisProps \\| YAxisProps[] | — | Render a list of additional axes. This includes YAxis and XAxis. |\n| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |\n| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |\n| brush | Boolean | false | Defines whether or not the brush component shall be used. |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | false | Shows the provided Legend component otherwise shows nothing. |\n| bars | Array of Bar | [] | Renders the provided Bar components. |\n| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |\n### Bar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the bar. |\n| dataUnit | String \\| Number | — | The unit of data displayed for the bar. |\n| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nBarChart with custom Tooltips\npv\nuv\n\nTruck G300012000\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\nJuneTimerange60 €CostsQ1Q2\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"
@@ -154,7 +154,7 @@
     "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. |",
+    "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%\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",
     "category": "Components",
     "section": "Progress",
     "boost": "BarList components/barList #components/barList Components Progress"
@@ -164,7 +164,7 @@
     "title": "Map",
     "lead": "The following map shows labels for locale de",
     "summary": "The following map shows labels for locale de",
-    "searchText": "Map\nThe following map shows labels for locale de\nMap\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nMap with ScaleBar\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nMap localization\nTerms of use© 1987–2025 HERE\n\n10 km\n\nAnsicht auswählen\nKartenansicht\nSatellit\n\nVerkehrslage\nVerkehrsstörungen anzeigen",
+    "searchText": "Map\nThe following map shows labels for locale de\nMap\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nMap with ScaleBar\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nMap localization\nTerms of use© 1987–2026 HERE\n\n10 km\n\nAnsicht auswählen\nKartenansicht\nSatellit\n\nVerkehrslage\nVerkehrsstörungen anzeigen",
     "category": "Components",
     "section": "Map",
     "boost": "Map components/basicMap #components/basicMap Components Map"
@@ -174,7 +174,7 @@
     "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. |",
+    "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\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\nThis demonstrates a bottom sheet use case on mobile. It demonstrates a bottom sheet for smartphones to perform an action.\nTrigger mobile BottomSheet\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\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",
     "category": "Components",
     "section": "Application",
     "boost": "BottomSheet components/bottomSheet #components/bottomSheet Components Application"
@@ -184,7 +184,7 @@
     "title": "Button",
     "lead": "The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons",
     "summary": "The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons",
-    "searchText": "Button\nThe button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons\nButton\nStandard buttons\nDefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted\nDisabled buttons\nDefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted\nButton sizes\nExtra SmallSmallMediumLarge\nIcon only buttons\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | Boolean | false | 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. |",
+    "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| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\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| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\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| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\nOutlined buttons (transparent)\nDefaultPrimarySuccessInfoWarningDangerMuted filledMuted\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\nAction buttons\nClick me!Click me!Click me!Click me!Click me!Click me!\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |",
     "category": "Components",
     "section": "Interaction",
     "boost": "Button components/button #components/button Components Interaction"
@@ -194,7 +194,7 @@
     "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. |",
+    "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",
     "category": "Components",
     "section": "Interaction",
     "boost": "ButtonToolbar components/buttonToolbar #components/buttonToolbar Components Interaction"
@@ -204,7 +204,7 @@
     "title": "CalendarStripe",
     "lead": "A headless component where you provide a function that renders the UI for every day to be displayed.",
     "summary": "A headless component where you provide a function that renders the UI for every day to be displayed.",
-    "searchText": "CalendarStripe\nA headless component where you provide a function that renders the UI for every day to be displayed.\nCalendarStripe\nTuesday\n16 December 2025\n\nWednesday\n17 December 2025\n\nThursday\n18 December 2025\n\nFriday\n19 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\n16\n2025\n\nDec\n17\n2025\n\nDec\n18\n2025\n\nDec\n19\n2025\n\nDec\n20\n2025\n\nDec\n21\n2025\n\nDec\n22\n2025\n\nSet to JanuaryToggle Weekends\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |\n| minDays | Number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |\n| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |",
+    "searchText": "CalendarStripe\nA headless component where you provide a function that renders the UI for every day to be displayed.\nCalendarStripe\nThursday\n15 January 2026\n\nFriday\n16 January 2026\n\nSaturday\n17 January 2026\n\nSunday\n18 January 2026\nJan\n15\n2026\n\nJan\n16\n2026\n\nJan\n17\n2026\n\nJan\n18\n2026\n\nJan\n19\n2026\n\nJan\n20\n2026\n\nJan\n21\n2026\n\nJan\n22\n2026\n\nSet to JanuaryToggle Weekends",
     "category": "Components",
     "section": "Misc",
     "boost": "CalendarStripe components/calendarStripe #components/calendarStripe Components Misc"
@@ -214,7 +214,7 @@
     "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. |",
+    "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",
     "category": "Components",
     "section": "Content",
     "boost": "Card components/card #components/card Components Content"
@@ -264,7 +264,7 @@
     "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. |",
+    "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| iconLabelPosition | 'horizontal' \\| 'vertical | — | — |\n| tabIndex |  | — | 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 |\nControlled example\nOption 1Option 2Option 3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconLabelPosition | 'horizontal' \\| 'vertical | — | — |\n| tabIndex |  | — | 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 |\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| iconLabelPosition | 'horizontal' \\| 'vertical | — | — |\n| tabIndex |  | — | 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 |\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| iconLabelPosition | 'horizontal' \\| 'vertical | — | — |\n| tabIndex |  | — | 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 |\nCheckbox with custom icon\nOption 1Option 2Option 3\nOption 1Option 2Option 3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconLabelPosition | 'horizontal' \\| 'vertical | — | — |\n| tabIndex |  | — | 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 |",
     "category": "Components",
     "section": "Interaction",
     "boost": "Checkbox components/checkbox #components/checkbox Components Interaction"
@@ -274,7 +274,7 @@
     "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 |",
+    "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| tabIndex |  | — | 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 |\nControlled example\n\nSet random value\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tabIndex |  | — | 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 |\nControlled component with restriction and used with custom input\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tabIndex |  | — | 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 |\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| tabIndex |  | — | 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 |",
     "category": "Components",
     "section": "Interaction",
     "boost": "ClearableInput components/clearableInput #components/clearableInput Components Interaction"
@@ -284,7 +284,7 @@
     "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. |",
+    "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\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.",
     "category": "Components",
     "section": "Show/Hide",
     "boost": "Collapse components/collapse #components/collapse Components Show/Hide"
@@ -304,7 +304,7 @@
     "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. |",
+    "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| type | 'rect' \\| 'circle' | — | — |\nLoading...\nLoading...Loading...\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | 'rect' \\| 'circle' | — | — |\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| type | 'rect' \\| 'circle' | — | — |",
     "category": "Components",
     "section": "Content",
     "boost": "ContentLoader components/contentLoader #components/contentLoader Components Content"
@@ -314,7 +314,7 @@
     "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. |",
+    "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.\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.\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.\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\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.",
     "category": "Components",
     "section": "Content",
     "boost": "DataTabs components/dataTabs #components/dataTabs Components Content"
@@ -324,7 +324,7 @@
     "title": "DatePicker",
     "lead": "A wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.",
     "summary": "A wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.",
-    "searchText": "DatePicker\nA wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.\nDatePicker\nIt can be used in two ways, as a controlled or uncontrolled component. If you want to use it as a controlled component, pass a value, which you need to provide the DatePicker even after a user selects a new date. If you want to use it as an uncontrolled component, simply omit the value prop (for read-only use cases).\n\nNote: The DatePicker component uses the default format for the given locale. If you specify a locale, make sure you have imported the moment locale file like import 'moment/dist/locale/de';\nDefaultFormat: YYYY-MM-DD HH:mm\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00\n\nNo timeFormat: YYYY-MM-DD\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\nOnly month\n\n‹2025›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nOnly time\n\n▲12\n▼\n:\n▲00\n▼\n▲AM\n▼\n\nNot closing when selecting\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nWith min-width\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nClearableInput and optional value\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n04:02\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nTo:\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nUnspecified localeFormat: MM/DD/YYYY\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nNote\nWatch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our writing guidelines.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nReset\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\nSelects are a simple alternative for choosing dates0101\n02\n03\n04\n05\n06\n07\n08\n09\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n\nJanuaryJanuary\nFebruary\nMarch\nApril\nMay\nJune\nJuly\nAugust\nSeptember\nOctober\nNovember\nDecember\n\n20222022\n2023\n2024\n2025\n2026\n2027\n\nSat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)",
+    "searchText": "DatePicker\nA wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.\nDatePicker\nIt can be used in two ways, as a controlled or uncontrolled component. If you want to use it as a controlled component, pass a value, which you need to provide the DatePicker even after a user selects a new date. If you want to use it as an uncontrolled component, simply omit the value prop (for read-only use cases).\n\nNote: The DatePicker component uses the default format for the given locale. If you specify a locale, make sure you have imported the moment locale file like import 'moment/dist/locale/de';\nDefaultFormat: YYYY-MM-DD HH:mm\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00\n\nNo timeFormat: YYYY-MM-DD\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\nOnly month\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nOnly time\n\n▲12\n▼\n:\n▲00\n▼\n▲AM\n▼\n\nNot closing when selecting\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nWith min-width\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nClearableInput and optional value\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n10:07\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nTo:\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nUnspecified localeFormat: MM/DD/YYYY\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nNote\nWatch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our writing guidelines.\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nReset\nSelects are a simple alternative for choosing dates0101\n02\n03\n04\n05\n06\n07\n08\n09\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n\nJanuaryJanuary\nFebruary\nMarch\nApril\nMay\nJune\nJuly\nAugust\nSeptember\nOctober\nNovember\nDecember\n\n20222022\n2023\n2024\n2025\n2026\n2027\n\nSat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)",
     "category": "Components",
     "section": "Pickers",
     "boost": "DatePicker components/datepickers #components/datepickers Components Pickers"
@@ -334,7 +334,7 @@
     "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",
+    "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\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\nDialogs with validation\nOpen dialog\nValidation with separate validation error dialog\nOpen dialog\nSimpleDialog\nThis component allows the user to create a simple dialog. It uses the dialog component described above.\nSimple dialog button\nConfirmationDialog\nThis component allows the user to create a confirmation dialog. It uses the dialog component described above.\nConfirmation dialog\nSaveDialog\nThis component allows the user to create a save dialog. It uses the dialog component described above.\nSave dialog\nSplitDialog\nThis component allows the user to create a split dialog. It uses the dialog component described above.\nSplit dialogSplit dialog large\nInfoDialog\nThis component allows the user to create a dialog without title and footer. It uses the dialog component described above.\nInfo dialog\nFeature info dialog\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### OnboardingDialog\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | false | Opens the dialog when set to true. |\n| onClose | () =void | — | 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\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"
@@ -344,7 +344,7 @@
     "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. |",
+    "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.",
     "category": "Components",
     "section": "Misc",
     "boost": "Divider components/divider #components/divider Components Misc"
@@ -352,9 +352,9 @@
   {
     "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\n1Massa efficitur quis, felis. in iaculis. Integer iaculis. elit. tortor eget\n\n2Elit. consectetur purus vitae in, felis. ligula velit. ante iaculis.\n\n3Ante ac massa In efficitur faucibus. efficitur dui metus scelerisque\n\n4Posuere molestie\nLorem ac Integer\n\n5Vitae Fusce felis. quis, ligula orci, Integer consectetur fringilla\n\n6Elementum aliquam sagittis ligula tortor elementum efficitur vel vel dui aliquam ut pharetra condimentum pharetra\n\n7In rutrum aliquam pharetra nec viverra malesuada efficitur consectetur enim scelerisque elit. efficitur\n\n8Ipsum dolor dolor in ut elit. elit. ligula felis. Sed ligula volutpat pretium faucibus. in\n\n9In ante In\nLorem eget eget efficitur massa, iaculis.\nLorem finibus\nLorem lorem lorem\n\n10Viverra velit. purus viverra hendrerit Interdum ante Interdum est posuere In\n\n11Sed nunc In finibus vel In consectetur ante ac Fusce\n\n12Sit Interdum sem. in, ante consectetur massa ut sem.\n\n13Ac Mauris pretium elementum ligula fringilla velit. ut iaculis. pretium faucibus.\n\n14Nunc semper. efficitur elementum ante velit. purus libero dolor ac posuere\n\n15Eget Sed elit. massa, fames consectetur ipsum iaculis. orci, faucibus. nunc velit. quis, Duis posuere\n\n16Sit hendrerit ante ipsum sem. quis, semper consectetur ac efficitur ac molestie\nLorem\n\n17In velit. elit. et ipsum enim tortor bibendum,\n\n18In eget orci, vitae tortor primis semper. fames orci,\n\n19Vitae malesuada massa fames consectetur hendrerit posuere efficitur Sed pharetra massa, efficitur\n\n20Elementum neque. iaculis. dui eget metus amet, eget fringilla scelerisque metus Sed Sed velit.\n\n21Nec aliquam condimentum enim ante neque. Vivamus rutrum\n\n22Et dui est consectetur orci, in, consectetur fringilla\n\n23Lorem neque. velit. bibendum, ante ante felis. felis. condimentum dolor\n\n24Sit\nLorem faucibus. ut et Fusce sit sagittis est in Sed neque.\n\n25Pretium velit. semper metus rutrum vitae faucibus. pretium consectetur\n\n26Bibendum, efficitur ac finibus Interdum est faucibus. ac fringilla Vivamus\n\n27Massa fames elementum Vivamus dui\n\n28In in elementum In Sed orci ipsum\nLorem\n\n29Ac ac ut fringilla est dolor quis, in hendrerit Ut\n\n30Nunc efficitur dui et purus elit. consectetur in, sem. elit. elit. dui efficitur viverra ante\n\n31Eget viverra felis. scelerisque Sed\n\n32Felis. efficitur in ac velit. ante neque. orci ac ante semper.\n\n33Malesuada consectetur ac ligula massa efficitur condimentum finibus\n\n34Aliquam ac et semper ut tortor tincidunt. nunc tortor in vel faucibus. ac dui bibendum,\n\n35Nunc malesuada volutpat ligula vel felis. lorem\n\n36Velit. ante Sed massa, ut finibus in et\n\n37Velit. semper eget ac Vivamus nunc libero ac\n\n38Efficitur dui nunc bibendum, primis ante ligula consectetur\n\n39Tortor In fames Integer vitae eget ante faucibus. eget primis ac ante\n\n40Neque. ante in felis. tortor ipsum faucibus. ante bibendum, posuere in efficitur velit. iaculis. bibendum,\n\n41Libero\nLorem metus ante adipiscing in semper. condimentum nec iaculis. orci quis,\n\n42Massa, pharetra et Fusce In quis, quis, ante neque. est\n\n43Et sit fringilla in, dolor hendrerit Duis fames adipiscing consectetur adipiscing malesuada adipiscing volutpat\n\n44Primis vel eget semper ante molestie Fusce nec\n\n45Fames ac ipsum faucibus. libero sem. ante Ut elementum\n\n46Fusce quis, fringilla hendrerit et pharetra adipiscing viverra ante ac Mauris\n\n47Nec nunc in ac in\n\n48Ligula nunc ut scelerisque ante efficitur velit.\n\n49Efficitur viverra ipsum rutrum pretium amet, ipsum est efficitur\n\n50Fringilla in, pretium hendrerit aliquam sagittis elit. neque. adipiscing\n\n51Molestie ante amet, nec ut hendrerit purus amet, Ut ante velit. elit. molestie ac\n\n52Velit. semper ac Ut\nLorem Sed primis et\n\n53In Interdum pretium ante ipsum adipiscing vitae in Duis velit. amet, adipiscing nunc\n\n54Nunc purus faucibus. nec lorem consectetur lorem ligula ante in condimentum Ut\n\n55Dui purus tortor\nLorem ipsum massa, massa, elementum felis. in Ut\n\n56Posuere tincidunt. libero Mauris scelerisque volutpat ac Duis\n\n57Ante vitae sagittis vel ac In ut semper primis semper. nec\n\n58Ac in, massa, rutrum molestie dui felis. quis, Integer\n\n59Dui tortor ante faucibus. ipsum\n\n60Pharetra vitae nec pharetra metus nunc malesuada\n\n61Sit libero efficitur consectetur In sit vitae\n\n62Fusce consectetur\nLorem ipsum vitae Fusce Vivamus est iaculis. purus pharetra Integer ac in, nec\n\n63Primis fames condimentum semper. hendrerit Interdum ac scelerisque Ut elit. in pharetra\n\n64Ipsum ipsum viverra efficitur pharetra Duis in\n\n65Rutrum lorem ipsum sagittis nec Vivamus ligula Ut ipsum fringilla vel ligula Interdum neque. sem.\n\n66Vel fringilla fringilla ut finibus faucibus. semper ac semper in lorem primis lorem libero\n\n67Elementum massa tincidunt. sagittis enim ut iaculis. ante metus fames ante efficitur\n\n68Aliquam viverra molestie est sit dolor et semper nec semper. ipsum malesuada\n\n69Metus molestie ac semper consectetur ante est libero consectetur Mauris Sed malesuada\n\n70Metus nec semper. In pretium Vivamus in In neque. ante pretium adipiscing ipsum\n\n71Aliquam et In Mauris metus vel ac ante finibus bibendum,\nLorem iaculis.\n\n72Sed ac ante semper malesuada amet, ante fringilla ac in Mauris\n\n73Ligula ante condimentum fringilla Sed aliquam ac iaculis. enim amet,\n\n74Ac finibus est molestie amet, ac ac ac elit.\n\n75Ipsum elit. elit. posuere ut efficitur dolor sem. pretium Ut vitae vitae\n\n76In Fusce hendrerit Fusce ac lorem primis in posuere bibendum, metus nunc vitae Duis\n\n77Eget massa in fringilla est ipsum efficitur elit. lorem sagittis neque. elit. Duis nunc adipiscing\n\n78Adipiscing quis, ipsum Interdum velit. velit. ut fringilla ac\nLorem metus posuere\n\n79Elit. semper. pretium ante est et dui fringilla elit. vitae pretium Mauris ut consectetur efficitur\n\n80Massa, lorem eget et In Fusce amet,\n\n81Iaculis. sagittis ac lorem sit elit. ipsum ipsum In\nLorem bibendum, pretium condimentum dui in\n\n82Et enim amet, in velit. ligula In sagittis orci, neque. sit Fusce\nLorem et nec\n\n83\nLorem ante metus fringilla tortor semper. efficitur efficitur quis, semper ipsum massa, ut iaculis.\n\n84Vivamus primis ut ac amet, iaculis. Mauris Fusce Mauris\n\n85Condimentum ante ac elit. iaculis. Ut ut ut et finibus\n\n86In, Vivamus adipiscing consectetur enim fames primis tincidunt.\nLorem quis, nec Interdum fames condimentum ut\n\n87In, sit ac dui consectetur finibus\n\n88Sem. condimentum ante elementum elit. ac ante faucibus. sit massa, vitae\n\n89Rutrum elit. ipsum Ut libero felis. consectetur dolor tincidunt. enim massa in,\n\n90Tincidunt. pharetra et ipsum in est\n\n91Ante massa, et orci elementum\n\n92Fringilla dolor enim pretium vitae pharetra ac bibendum,\n\n93Ac libero sem. tincidunt. primis iaculis.\n\n94Ac quis, et nec rutrum in, volutpat semper.\n\n95Consectetur faucibus. hendrerit vitae consectetur lorem efficitur ac et vitae adipiscing pretium orci fringilla in\n\n96Vel orci sem. efficitur hendrerit sit massa malesuada massa ante ligula In massa Mauris\n\n97Finibus in, faucibus. Sed\nLorem vitae sem. bibendum,\n\n98Elementum et tortor\nLorem ac fringilla massa semper ac Mauris nunc et Duis primis primis\n\n99Vel scelerisque et bibendum, Vivamus nec lorem\n\n100Eget purus in ut dui Ut Integer volutpat ante\n\n101Sem. efficitur elit. scelerisque ipsum primis fames hendrerit Mauris pretium\n\n102Dolor aliquam massa, faucibus. efficitur ipsum malesuada tortor felis. dui quis, eget Interdum orci et\n\n103Hendrerit molestie finibus in velit. ac sagittis finibus ac velit.\nLorem in\n\n104Elit. hendrerit amet, ante volutpat nunc ante Mauris\n\n105Mauris posuere\nLorem enim in scelerisque\n\n106Faucibus. posuere ante scelerisque finibus\n\n107Semper enim In elit. consectetur\n\n108Ante fringilla iaculis. tincidunt. viverra rutrum enim ante ligula efficitur consectetur\n\n109Fames metus in Fusce semper sagittis condimentum semper. purus elit.\n\n110Vivamus massa, Vivamus volutpat nunc nunc\n\n111Fusce efficitur efficitur rutrum pharetra in tincidunt.\n\n112Eget velit. condimentum condimentum finibus ipsum in eget faucibus. faucibus. viverra\n\n113Eget tortor in ligula massa, ac condimentum massa, pharetra in fames malesuada sit ante\n\n114Neque. elit. in ac efficitur aliquam malesuada ac aliquam Fusce molestie pharetra Ut\n\n115Ante sagittis molestie volutpat in ut Duis nec orci eget ipsum efficitur nec\n\n116Ante pretium Ut iaculis. In iaculis.\n\n117Eget ac consectetur ut aliquam sagittis pretium in\n\n118Massa efficitur In viverra fames bibendum, ac ut\n\n119Iaculis. in consectetur Mauris viverra bibendum, in pretium rutrum ac\n\n120Malesuada metus purus efficitur pretium libero Fusce in Interdum velit. In quis, in, Mauris malesuada\n\n121Ut fames bibendum, pretium consectetur elit. In sem.\n\n122Ac ut in tincidunt. aliquam efficitur bibendum, felis. Vivamus volutpat scelerisque\n\n123Metus Interdum orci, ipsum fringilla ante efficitur hendrerit neque. efficitur hendrerit quis, Integer ut dolor\n\n124Ac quis, Ut ac semper. massa, Fusce ac scelerisque tincidunt. Mauris Mauris semper iaculis. ut\n\n125Elit. bibendum, neque. ac semper. pretium quis, Fusce\n\n126Elementum sit finibus et consectetur Vivamus ipsum hendrerit In bibendum, ut posuere\n\n127Iaculis. massa, consectetur faucibus. bibendum, volutpat\n\n128In eget semper. adipiscing sagittis lorem ante\n\n129Eget molestie metus purus in, fringilla orci\n\n130Velit. enim amet, finibus quis,\n\n131Sagittis ante eget iaculis. ac\n\n132Ac nunc massa, iaculis. fringilla\n\n133Libero volutpat ante vel neque. vel ut Duis ipsum\n\n134Sagittis enim et eget dui tincidunt. aliquam scelerisque purus\n\n135Fringilla Ut elementum aliquam ac elit. rutrum ante consectetur fames\n\n136Dolor nec primis posuere primis ligula volutpat\n\n137Ante sagittis massa hendrerit ac aliquam vitae\n\n138Ante ante purus aliquam tincidunt. efficitur pharetra semper.\n\n139Mauris ac posuere faucibus. ipsum viverra Integer felis. Fusce felis. adipiscing orci,\n\n140Ac ipsum bibendum, iaculis. purus elit. elementum semper rutrum ac consectetur\n\n141Enim metus pharetra finibus semper in purus adipiscing ac ipsum ac\n\n142Fringilla eget sem. massa, malesuada ante ipsum ac Ut\n\n143Duis ipsum iaculis. aliquam sit bibendum, felis. in est Fusce finibus enim nunc\n\n144Vel pharetra eget rutrum viverra enim orci, bibendum, Duis efficitur consectetur elit. in, eget\n\n145Bibendum, et scelerisque libero bibendum, ac orci, fames et\nLorem orci\n\n146Quis, amet, quis, et et viverra nec\n\n147Sed elementum tincidunt. semper eget Ut vitae\n\n148Massa hendrerit ac in purus ac Ut vel primis\n\n149Elementum primis et velit. Integer lorem molestie pharetra Duis pharetra ipsum massa,\n\n150Massa Sed elit. enim sem. bibendum, Sed in, in et consectetur et ligula ac\n\n151Fames tincidunt. pharetra orci pretium et viverra\n\n152Scelerisque hendrerit in, massa, ipsum posuere\n\n153Quis, neque. ut nunc Mauris pharetra ante neque.\n\n154Tortor in, enim Integer elit. massa scelerisque Vivamus\n\n155Pretium ac tincidunt. dolor massa faucibus. in pharetra molestie adipiscing libero finibus sagittis elementum\n\n156Ante tortor Interdum consectetur volutpat elit. felis. primis sit sit faucibus. efficitur purus posuere\n\n157Finibus hendrerit Fusce elementum ac viverra fames massa, rutrum Duis\n\n158Elementum ante viverra iaculis. in, scelerisque\n\n159Enim Mauris eget ut posuere ac nunc in, aliquam scelerisque\n\n160Massa enim quis, in lorem consectetur ut quis, felis. ac pretium Sed velit. eget\n\n161Fusce Sed consectetur amet, aliquam In\n\n162Ligula in sit ac quis, primis velit. malesuada ligula elementum eget orci\n\n163Semper. ligula adipiscing consectetur amet,\n\n164In lorem amet, ut felis.\n\n165Semper condimentum sem. nec sit semper lorem ac\n\n166Et nec elit.\nLorem\nLorem efficitur\n\n167Ante dolor efficitur dui eget In\n\n168Efficitur fames efficitur massa, fames ante massa, vel elementum semper dui Vivamus viverra neque.\n\n169\nLorem ante efficitur bibendum, aliquam massa, felis. aliquam fames tincidunt. aliquam\n\n170Ac efficitur orci ac eget ac in orci fringilla pharetra in, pretium nec Ut bibendum,\n\n171Primis vel ipsum lorem et semper ac ante ante est sit\n\n172Scelerisque metus libero Duis semper Sed posuere ipsum sem. efficitur volutpat pretium\n\n173Rutrum nec ipsum iaculis. semper. Ut massa, adipiscing ac eget Duis et in quis, tincidunt.\n\n174Dui pretium scelerisque ante consectetur eget nec ipsum\n\n175Sem. est Duis est faucibus. vel orci ac et In\n\n176Tincidunt. elementum in malesuada orci, metus ut viverra neque. massa posuere Interdum elit. ac\n\n177Molestie consectetur tincidunt. condimentum ac ac et et ante Integer massa\n\n178Semper. vitae in condimentum scelerisque finibus posuere amet, ante semper purus\n\n179Ante ac eget finibus consectetur ipsum aliquam ligula ante tincidunt.\n\n180Scelerisque velit. sem. dui Mauris eget\n\n181Velit. consectetur rutrum vitae ante\n\n182Rutrum amet, bibendum, semper Duis\n\n183Metus consectetur viverra nec massa consectetur lorem Interdum ac ut\n\n184Adipiscing eget tortor est In rutrum vitae aliquam ac\n\n185Aliquam fames dolor massa, neque. quis, in nec faucibus. semper. ut\nLorem eget consectetur\n\n186Malesuada Fusce bibendum, Mauris ante fames ante faucibus. Ut aliquam in eget malesuada amet,\n\n187Ligula adipiscing purus Mauris ac elementum elementum pharetra In amet, vel ante sem.\nLorem adipiscing\n\n188Faucibus. massa, In ac ac neque. Integer quis, efficitur semper. primis elit. neque. ac\n\n189Semper. metus velit. consectetur iaculis.\n\n190Purus vel quis, sit ac\n\n191Lorem eget nec molestie ut felis. ac ligula ac viverra\n\n192Ac quis, dui hendrerit ipsum Ut vitae eget metus amet,\nLorem hendrerit ut metus semper.\n\n193Rutrum amet, semper. tincidunt. ante ipsum\n\n194Faucibus. Vivamus hendrerit faucibus. ante ipsum sem. enim in fringilla sagittis eget vel Interdum\n\n195Ut condimentum et vitae ut\n\n196Semper. hendrerit fames\nLorem bibendum, malesuada ante pharetra posuere finibus ipsum hendrerit posuere est semper.\n\n197Elementum dui pretium in scelerisque viverra vitae tincidunt. fringilla\n\n198Condimentum in elit. adipiscing elit.\n\n199Mauris vitae massa ligula ut ac\nLorem ante bibendum, ut hendrerit ante purus\n\n200Et quis, finibus Ut sagittis est orci,\n\n201Vivamus fames Duis consectetur est velit.\n\n202Tortor vel ante in Sed quis, rutrum amet,\n\n203Scelerisque ut elit. in, dolor orci ante In vitae tincidunt. Ut\n\n204Pharetra orci iaculis. primis molestie Fusce viverra vel\nLorem sem. purus\n\n205Fames primis massa semper ut in, purus neque. finibus eget elit. condimentum\n\n206Tortor ante Mauris ligula semper. consectetur In ipsum orci, metus\n\n207Ipsum volutpat enim nunc faucibus. velit. est condimentum et condimentum velit. Duis Fusce\n\n208Sagittis est in hendrerit adipiscing ante enim hendrerit eget Interdum neque. scelerisque\n\n209Velit. Vivamus bibendum, rutrum elementum\n\n210Ut consectetur molestie iaculis. quis, vitae Vivamus nec fringilla bibendum, elit. nec\n\n211Pharetra sem. sagittis Sed consectetur in nec Vivamus et ac semper quis, sagittis\nLorem\n\n212In orci aliquam quis, felis. vel pretium Fusce ligula\n\n213Tortor pharetra hendrerit est felis. posuere semper dui massa in\n\n214Semper. ante condimentum neque. fames rutrum felis. ac finibus In\n\n215Felis. Vivamus Ut semper. quis, scelerisque ac Duis ante ipsum metus\n\n216Viverra elementum ut Fusce ante finibus bibendum, vitae ante iaculis.\n\n217Ac eget orci, elit. molestie nec bibendum, est sagittis purus libero\n\n218Ac elit. Duis semper. dolor adipiscing quis, primis in fames eget consectetur\nLorem semper\n\n219Finibus scelerisque metus faucibus. posuere nec scelerisque ante\n\n220Sit molestie volutpat sagittis hendrerit finibus fringilla ac ut ut metus\n\n221Finibus elementum\nLorem ante pretium Interdum volutpat adipiscing nec elit.\n\n222Ante malesuada sagittis ligula adipiscing molestie elit. fames massa\n\n223Interdum enim Mauris ligula massa Mauris Mauris Duis Vivamus in consectetur pharetra\n\n224Viverra amet, ac ut ac ipsum lorem dui\n\n225Molestie in Sed et rutrum ac elementum tincidunt. efficitur volutpat\n\n226Eget aliquam bibendum, In massa, dolor posuere ipsum iaculis. volutpat massa Sed\n\n227Felis. neque. orci fames Vivamus consectetur elementum tortor\n\n228Vivamus Ut hendrerit efficitur ac semper nunc Integer orci, velit. orci\n\n229Vivamus libero posuere finibus dolor in primis elit. Mauris nunc eget Vivamus dui semper. adipiscing\n\n230Purus consectetur massa efficitur ut eget molestie semper. Sed semper. dolor\n\n231Ipsum ac est molestie dolor Mauris bibendum, hendrerit orci, lorem nunc orci,\n\n232Ante quis, hendrerit orci ac orci sem. vitae ante posuere Sed vel et\n\n233Nec neque. ut\nLorem nunc lorem ut\n\n234Velit. faucibus. fringilla ante consectetur molestie nunc in Ut ut volutpat vitae finibus lorem vitae\n\n235Ac ipsum In scelerisque volutpat aliquam ante finibus condimentum ut\n\n236Tortor malesuada vel orci in et\n\n237Tincidunt. in nunc et pretium in adipiscing et dolor semper metus amet, Integer Mauris\n\n238Dolor sit pretium ipsum eget scelerisque bibendum, sagittis pharetra sagittis scelerisque\n\n239Ac finibus volutpat Interdum Vivamus dui dolor faucibus. Duis efficitur\n\n240Interdum Interdum Mauris dolor elit. malesuada Ut tortor aliquam efficitur iaculis. semper\n\n241Vel et et Vivamus aliquam purus et est ligula in, semper et lorem nec in\n\n242In nec nec amet, fringilla rutrum ante ante finibus in viverra ac massa,\n\n243Amet, Interdum velit. Vivamus efficitur bibendum, Integer massa amet, vitae finibus in, faucibus.\n\n244Ac ante Sed viverra Duis in ante vel velit. ac ac\n\n245Finibus Interdum semper. quis, Interdum nec fringilla\nLorem orci tortor ac molestie\n\n246Consectetur enim libero consectetur eget et in Vivamus adipiscing posuere\n\n247In et molestie sit sagittis elit.\n\n248Iaculis. condimentum Duis efficitur hendrerit\n\n249Ac elit. pharetra pretium malesuada vitae aliquam consectetur velit. amet,\n\n250Ac quis, enim in, In iaculis. enim ligula neque. dolor Sed ac efficitur ut\n\n251Finibus est hendrerit ac Sed est consectetur In ac fringilla\n\n252In, semper faucibus. in velit. et ipsum primis adipiscing ante ipsum orci,\n\n253Semper in massa, amet, felis. fames sagittis velit.\n\n254Bibendum, sem. viverra\nLorem orci, faucibus. Mauris metus tortor posuere finibus\n\n255Aliquam pharetra molestie Mauris posuere amet, efficitur semper. amet, orci,\n\n256Rutrum et ipsum In amet, consectetur in massa, in elit. in\n\n257Efficitur ligula pharetra est efficitur ac consectetur\n\n258Ac felis. eget ligula condimentum\n\n259Efficitur adipiscing Fusce ac ante ac Ut libero orci, Duis quis, vitae Sed hendrerit\n\n260Ante ipsum ac posuere ut\n\n261Sit posuere massa aliquam eget ante semper. scelerisque elementum ante eget tortor ac\n\n262Primis fringilla molestie ac vitae rutrum fames ipsum bibendum, libero quis, Vivamus libero in bibendum,\n\n263Vivamus orci, purus molestie aliquam Sed libero efficitur felis. Integer\n\n264Efficitur rutrum ac faucibus. nec ac Fusce malesuada\n\n265Semper fringilla Interdum elementum ac\n\n266Fames Interdum nunc ligula ante pretium faucibus. ut ipsum ac consectetur\n\n267Et fringilla ac nec posuere Duis ante posuere faucibus. dui nunc velit. est\n\n268In vel iaculis. ipsum sem. sagittis viverra nec eget quis, ipsum felis. dui iaculis.\n\n269Purus In sem. lorem viverra Integer\n\n270Ut In Fusce Vivamus vitae amet,\nLorem pharetra condimentum massa fames\n\n271Iaculis. iaculis. ut ut neque. ante purus tortor ante molestie dui\n\n272Lorem Sed Mauris et et\n\n273Velit. faucibus. ac viverra ut massa, enim molestie eget viverra pretium ipsum\n\n274In hendrerit vel volutpat rutrum primis enim vel ac dolor Sed\n\n275Massa, ac iaculis. orci dolor efficitur pharetra massa, Ut nec eget Fusce elementum consectetur\n\n276Ipsum sit hendrerit lorem nec semper. ac consectetur dolor sem. viverra tortor ac malesuada purus\n\n277Integer scelerisque viverra\nLorem aliquam neque. efficitur primis\n\n278Rutrum iaculis. consectetur scelerisque faucibus. dolor Duis nec\n\n279Semper. massa efficitur orci scelerisque vel ante\n\n280Iaculis. rutrum lorem libero Duis\n\n281Volutpat in Sed dui nec\n\n282Hendrerit orci semper. iaculis. in faucibus. finibus enim In quis, bibendum,\n\n283Efficitur Interdum nec purus Sed enim efficitur ac\n\n284Dui est efficitur rutrum et ac Duis posuere pretium faucibus. malesuada\n\n285Ipsum volutpat ante elit. fames\n\n286Nunc finibus orci Sed scelerisque ante ipsum lorem posuere ut Sed ac\n\n287Vitae finibus faucibus. vitae consectetur finibus sit\n\n288Ac libero Mauris aliquam adipiscing In in ut nunc scelerisque aliquam sem.\n\n289Quis, viverra sit ipsum semper. orci et ut\nLorem elit. libero in ut ac\n\n290Massa, orci, ligula ac Ut ante eget hendrerit ac\n\n291\nLorem Integer Fusce ante ante ipsum ut lorem et semper fringilla\n\n292Sed viverra Duis velit. in fringilla bibendum, Ut ipsum nec Vivamus\n\n293Sit hendrerit Vivamus eget ligula purus ligula pretium ut eget\n\n294Viverra ante semper. orci posuere libero semper\n\n295Eget ipsum eget libero est pharetra sagittis ac\n\n296Dolor efficitur vel ante ac molestie sem. dui volutpat ipsum fringilla ac ac\n\n297Efficitur vel ipsum tincidunt. fames nunc Interdum ante volutpat ante in scelerisque dui fames elit.\n\n298Scelerisque Ut semper eget pretium et eget malesuada sem. nunc tincidunt.\n\n299Velit. ac libero velit. consectetur Mauris consectetur efficitur quis, massa, Integer ante\n\n300Ut efficitur Integer ac sagittis felis. ac tincidunt.\nLorem vel adipiscing\n\n301Sit eget posuere neque. nunc Sed massa tortor volutpat finibus vitae tincidunt. eget\n\n302Efficitur malesuada felis. neque. consectetur\n\n303Vel vel Integer Vivamus faucibus. pretium viverra elementum in volutpat\n\n304Tincidunt. tincidunt. rutrum vel pharetra hendrerit in hendrerit nec faucibus. ac ipsum efficitur\n\n305Elit. elementum fames ut eget\n\n306Velit. viverra in, elit. Ut massa, aliquam est purus velit. semper. semper. in volutpat sit\n\n307Pharetra ipsum vitae\nLorem dui posuere dolor\n\n308Fusce Interdum ac metus ante massa aliquam\n\n309Ante Ut fringilla fringilla elementum et amet, Duis nunc ipsum vitae fringilla vel viverra\n\n310Viverra iaculis. et et scelerisque velit. est semper est tincidunt. ante\n\n311Duis amet, efficitur in, pharetra Mauris elit. purus aliquam et Interdum\n\n312Ac malesuada massa, fames elit. Interdum posuere nunc Fusce ante sit nunc in, rutrum\n\n313Semper. vel semper posuere finibus pretium Fusce primis efficitur condimentum nunc\n\n314Finibus ante est felis. scelerisque rutrum efficitur tincidunt. vel adipiscing\n\n315Duis Interdum nunc consectetur et elit. eget hendrerit eget dolor in hendrerit ante\n\n316Scelerisque malesuada elementum dolor purus lorem condimentum adipiscing volutpat est tortor finibus Ut\n\n317Orci Fusce ipsum nec dui dui ipsum in eget metus molestie semper.\n\n318Vel viverra Ut enim posuere tortor molestie ante semper rutrum viverra Interdum faucibus. velit.\n\n319Ut elementum scelerisque ante\nLorem sagittis\n\n320Pharetra eget est felis. ac\n\n321Hendrerit ut in enim sem. pretium massa, ante\n\n322Ac semper vel scelerisque eget aliquam volutpat felis. elementum libero semper est\n\n323Efficitur ut iaculis. eget Fusce aliquam et ipsum\nLorem\n\n324Orci, condimentum ut metus ipsum ipsum Duis metus Vivamus hendrerit aliquam adipiscing fames Interdum\n\n325Viverra velit. sem. enim Fusce dolor ac vel neque. scelerisque\n\n326Elit. consectetur orci, ante adipiscing libero orci felis. Fusce massa, in,\n\n327Neque. finibus purus ut Sed purus Duis amet, malesuada in,\n\n328In amet, faucibus. ante pretium Interdum efficitur eget metus Mauris neque. fringilla metus nec\n\n329Quis, aliquam lorem sagittis\nLorem in, elementum ligula libero semper. tortor\n\n330Iaculis. in in, felis. neque. pretium efficitur consectetur vitae\n\n331Vivamus vel elit. Interdum sem. aliquam metus hendrerit rutrum elit. sagittis\n\n332Vitae ipsum consectetur condimentum malesuada viverra ac libero semper. viverra purus consectetur finibus\n\n333Vel nunc ac massa semper rutrum posuere Sed pretium\n\n334Eget in, sagittis ligula consectetur est sem. in massa, Fusce felis. in lorem\n\n335Ipsum neque. elementum orci dui ligula amet, in eget eget et eget sagittis molestie Mauris\n\n336Dui In pretium lorem sem. rutrum sagittis orci, consectetur elit.\n\n337Malesuada ac condimentum nec orci sit posuere\n\n338Libero vitae ut consectetur sem. nec purus dui posuere finibus eget felis.\n\n339In viverra fringilla elit. pretium faucibus. Duis in\n\n340Efficitur est nunc faucibus. tortor\n\n341Elit. semper Integer In in Ut Ut orci, felis. elementum sagittis et vel\n\n342Et finibus volutpat Vivamus hendrerit Vivamus aliquam est consectetur ante dolor vel\n\n343Enim ac lorem in amet, bibendum, in viverra felis. molestie orci, in neque. ac\n\n344\nLorem in primis ac volutpat ac Sed Mauris ac enim ut rutrum sagittis\n\n345Mauris ut pretium semper. semper. libero scelerisque eget\n\n346Posuere pretium semper Mauris aliquam metus ac ac primis finibus rutrum in lorem felis. quis,\n\n347Faucibus. fringilla tincidunt. ut tincidunt. ante massa\n\n348Volutpat neque. orci massa, primis posuere est metus est condimentum elit. scelerisque viverra vel ac\n\n349Ligula semper. elementum ut dolor\n\n350Mauris ut consectetur vel elit. semper\nLorem quis, felis. ac\nLorem dolor faucibus.\n\n351Ante pharetra Interdum dolor elit. iaculis.\n\n352In elit. dolor Vivamus aliquam metus enim\n\n353Enim elementum posuere ante ac et Ut efficitur\n\n354Posuere est ut nunc posuere efficitur velit. in, dui metus Vivamus posuere\n\n355Scelerisque felis. elit. molestie felis. ante eget\n\n356Elit. amet, consectetur scelerisque efficitur orci\n\n357Efficitur scelerisque consectetur orci, sagittis Ut velit.\n\n358Orci sagittis ac Ut orci\nLorem efficitur ac\n\n359Metus sit\nLorem est amet, Sed sem. massa,\n\n360Libero fames primis In pharetra Duis vitae volutpat ac tortor scelerisque Sed Vivamus et finibus\n\n361Rutrum molestie in, enim hendrerit et ipsum fames sagittis rutrum massa, Interdum nec eget metus\n\n362Semper. Integer semper. enim iaculis. efficitur ut\n\n363Amet, eget finibus et elit. neque. in, condimentum\n\n364Hendrerit amet, ligula ipsum fames fringilla ac in dolor ante dolor sit fames eget Ut\n\n365Posuere consectetur dolor orci, ligula\nLorem elementum primis felis. sagittis primis\n\n366Ut orci et ac Sed finibus semper.\n\n367Ante efficitur volutpat vel ut pharetra In elit. condimentum est elementum vitae aliquam et fringilla\n\n368Dolor sagittis Fusce orci, Mauris dui eget pharetra fames condimentum scelerisque ac\n\n369Sit lorem ante ante sagittis massa hendrerit enim felis.\n\n370Tincidunt. tortor ut ut tincidunt. quis,\n\n371Consectetur fames Duis orci bibendum,\n\n372Aliquam pretium hendrerit massa quis, metus faucibus. massa Interdum fames ipsum\nLorem ante\n\n373Tortor Mauris purus Vivamus malesuada ac sit rutrum et\n\n374Ligula neque. ante Vivamus sit faucibus. ipsum in elit. enim sagittis est aliquam\n\n375In, pharetra condimentum orci, eget\n\n376Malesuada nunc tincidunt. ligula et dolor in sagittis tincidunt.\n\n377Elit. in, Duis Ut orci, rutrum\n\n378Neque. fringilla ante Interdum amet, libero semper libero\n\n379Enim bibendum, aliquam tincidunt. efficitur ac\n\n380Viverra fames orci, Vivamus nunc massa, eget vel ante In Ut Mauris\n\n381Enim dolor condimentum est nunc elementum ut Vivamus massa et sit massa,\n\n382Felis. lorem\nLorem iaculis. posuere orci iaculis. ipsum ac hendrerit condimentum ac\n\n383Elementum libero In elit. elementum quis, eget sem. eget libero sagittis hendrerit ante fames primis\n\n384Dolor dolor rutrum in ante velit. tortor ante elit. pretium iaculis.\n\n385Sem. nunc tortor ut elementum\n\n386Enim bibendum, elit. scelerisque velit. dui\n\n387Amet, adipiscing orci, consectetur consectetur consectetur eget\n\n388Tincidunt. semper finibus fames metus ipsum\n\n389Consectetur sit viverra neque. In in ante elementum pretium neque. ipsum ac\n\n390Est in in aliquam condimentum metus ante ante pharetra tortor in fringilla ac Ut\n\n391In In enim Fusce ac In elementum\n\n392Felis. felis. ligula ac efficitur vel semper. ante\n\n393Duis orci elementum viverra in ac In semper. purus tincidunt. primis ante Duis ipsum bibendum,\n\n394Ligula viverra volutpat enim ut volutpat vel elementum efficitur libero\n\n395Ac amet, sem. In condimentum ac metus vel Sed lorem rutrum amet,\n\n396Ut orci sem. in semper amet,\n\n397Iaculis. Integer rutrum in, ac molestie Interdum enim Sed\n\n398Semper. faucibus. consectetur orci, in Ut\n\n399Orci, metus rutrum dui sit bibendum, elit. sem. elit. Interdum ut\n\n400In efficitur est ac In orci elit. ut adipiscing\n\n401Efficitur Fusce Integer vel sit ut tortor amet, libero posuere purus felis.\n\n402In nunc ligula consectetur dolor\n\n403Vel orci ligula Interdum neque. velit. fames massa, velit. ac\nLorem eget\n\n404Efficitur faucibus. ac nunc ipsum sem. neque. libero efficitur fames faucibus. fringilla dui ac lorem\n\n405Semper massa et ut\nLorem metus velit. quis, nec velit. felis. in, in\n\n406Semper. posuere ac efficitur eget\n\n407Tincidunt. finibus tincidunt. sem. ac sem. et elit. efficitur In eget primis\n\n408Fringilla orci finibus condimentum felis. eget elit. Duis\n\n409Consectetur et elementum est finibus Interdum\n\n410Ligula sem. massa est iaculis. velit.\nLorem tincidunt. fringilla Integer semper\n\n411Enim felis. ac vel velit. in viverra semper. aliquam\n\n412Aliquam et hendrerit dui adipiscing Duis faucibus. purus Duis nunc in, In\n\n413Posuere ante ac neque. dui volutpat primis efficitur rutrum Interdum\n\n414Iaculis. Fusce Mauris ac scelerisque elit. Ut lorem Vivamus tincidunt. est ut\n\n415Et neque. Fusce rutrum velit. vitae tincidunt. fames aliquam vitae aliquam nec ante\n\n416Scelerisque rutrum ante orci faucibus. nunc in vitae libero malesuada semper dolor purus fringilla In\n\n417Ac vel ante ac semper. vel\n\n418Volutpat libero\nLorem Sed efficitur est sit et Mauris\n\n419Condimentum efficitur semper ac nec adipiscing malesuada massa, scelerisque et\n\n420In Vivamus Interdum in, ac nec in ante tortor\n\n421Hendrerit elit. eget Integer ac Fusce dui in, vitae fames ante viverra molestie ac\n\n422Sem. purus ante semper. ante rutrum ut finibus ante purus\n\n423Consectetur massa orci velit. ante ante scelerisque amet,\n\n424Vel orci in eget primis vitae rutrum\n\n425Malesuada quis, orci nunc\nLorem massa, ligula posuere\n\n426Semper orci, malesuada Sed orci, Fusce finibus lorem Duis elit. dui vitae ligula ante Duis\n\n427Ligula bibendum, nunc dui Vivamus\n\n428Scelerisque Fusce dui nunc tortor pretium ipsum dolor libero et\n\n429Vel viverra nunc Mauris massa massa semper bibendum, sagittis in scelerisque nunc sem. iaculis. hendrerit\n\n430Et efficitur felis. hendrerit ligula in\n\n431In, in, Mauris elit. viverra in bibendum, hendrerit tortor consectetur metus adipiscing ac\n\n432Hendrerit efficitur orci sit elementum malesuada iaculis. felis. semper quis, in ante et pretium\n\n433Purus elit. ligula consectetur sit elit. ligula purus condimentum in\n\n434Fringilla Vivamus et in Sed ante\n\n435Ac Duis in Fusce in pretium semper ipsum in, elit.\n\n436Sagittis est et faucibus. condimentum rutrum libero sit sit ante\nLorem elementum sit ac\n\n437Nec aliquam efficitur Duis elit.\n\n438Semper massa bibendum, Vivamus tincidunt. amet, finibus malesuada massa,\n\n439Posuere In orci, tincidunt. primis Vivamus posuere elit. lorem Sed\n\n440Et in dui et et velit. vel\n\n441Ante malesuada enim ac sit enim felis. tortor\nLorem volutpat ac in, posuere metus Interdum\n\n442Enim viverra sem. In in molestie fringilla dolor semper. Interdum\n\n443Ac ante dui ipsum ut rutrum\n\n444Eget ac viverra vitae fringilla ac massa, efficitur efficitur ac ligula\n\n445Ut in, adipiscing fames Fusce ipsum eget ut ut molestie purus consectetur elementum\n\n446Ligula consectetur dui iaculis. efficitur et Fusce\n\n447Efficitur Duis Duis Interdum vitae purus amet,\n\n448Nunc neque. Duis volutpat felis. sit in, iaculis. scelerisque sem. ipsum posuere ac\n\n449Sem. et vitae massa consectetur semper. dolor in et scelerisque ipsum fringilla iaculis.\n\n450Semper. adipiscing felis. sagittis nunc in dui hendrerit in in quis,\n\n451Bibendum, sagittis ante ipsum massa,\nLorem semper.\n\n452Ipsum eget ac elementum eget adipiscing libero purus fames\n\n453Mauris in ipsum finibus ut nunc Ut Fusce Fusce dolor bibendum, Fusce volutpat quis, bibendum,\n\n454Semper efficitur efficitur vel scelerisque volutpat felis. tincidunt. sem.\n\n455Efficitur efficitur primis Duis ac scelerisque dui Interdum massa in, ac ante in consectetur hendrerit\n\n456Et est efficitur Ut rutrum Ut neque. aliquam fames molestie orci nec in consectetur\n\n457Quis, ante posuere in orci Fusce dui iaculis. eget tincidunt. quis, primis ac ut\n\n458Massa, in in dui Duis\n\n459Ante velit. ante elit. posuere efficitur tortor Interdum faucibus. lorem consectetur massa, tortor\n\n460Metus ante dolor semper. ac ut ante ac elementum et ac et est Integer\n\n461Et finibus amet, dolor quis, posuere fames sem. semper.\n\n462Bibendum, est ac volutpat efficitur sit\n\n463Consectetur in quis, tincidunt. orci, est orci, felis. iaculis. massa, massa, ac vel\n\n464Primis ante eget ac massa, rutrum\n\n465Pharetra aliquam ac semper posuere ac ante iaculis. fringilla\n\n466Neque. condimentum ac in enim orci, amet, velit.\n\n467Bibendum, nunc semper ligula efficitur ipsum amet, enim\n\n468Ipsum ligula pharetra sem. orci, Fusce est in massa est bibendum, in amet, eget tortor\n\n469Elementum elit. ac tortor iaculis. in elit. nec\n\n470Metus velit. eget massa, viverra\n\n471Faucibus.\nLorem condimentum efficitur velit. et aliquam iaculis. amet, vel\n\n472Sed pretium eget elementum velit. ac ipsum velit. et\n\n473Tincidunt. ante massa, quis, enim elementum et ante\n\n474Consectetur Interdum Vivamus enim in\n\n475Integer aliquam Fusce condimentum malesuada malesuada\n\n476Faucibus. ac libero bibendum, in, nunc Integer Interdum volutpat faucibus. malesuada pretium ante vitae Ut\n\n477Purus et aliquam rutrum Integer ante aliquam Fusce ligula adipiscing rutrum eget\n\n478Malesuada consectetur viverra iaculis. libero Interdum purus aliquam eget in, Interdum ante metus\n\n479Tincidunt. volutpat et elit. ut tortor bibendum, faucibus.\n\n480Fusce in adipiscing ac vel ac Interdum consectetur efficitur tortor ante Duis ipsum\n\n481Efficitur\nLorem amet, elit. neque. ipsum in Fusce\n\n482Ligula posuere lorem velit. consectetur metus consectetur iaculis. ante primis malesuada pretium sagittis eget felis.\n\n483Sagittis Duis felis. efficitur in fames elit. primis dui\n\n484Et volutpat iaculis. pretium nec Mauris In\n\n485Condimentum malesuada tincidunt. Duis sem. Fusce neque. ipsum ut semper. sem. Fusce\n\n486Ante fringilla Interdum ac fringilla\n\n487Ac elementum ut amet, orci, ipsum ac Sed quis, massa\n\n488Amet, elit. dolor ante fames enim metus massa ipsum elit. elit. molestie\n\n489In ut tortor purus orci, iaculis. malesuada\n\n490Efficitur metus aliquam Fusce consectetur faucibus. adipiscing et\n\n491Velit. pretium felis. efficitur sagittis elit. ac felis.\n\n492Sagittis scelerisque massa, sem. elit. efficitur fames In metus ipsum\n\n493In fames aliquam aliquam purus Ut\n\n494Vel quis, orci enim felis. amet, bibendum, massa, Vivamus nunc\n\n495Posuere volutpat fringilla sagittis tortor est dolor aliquam Vivamus ligula Sed primis elementum ut ligula\n\n496Mauris sem. sagittis in elit.\nLorem\n\n497In bibendum, tortor enim faucibus. massa rutrum sit elit.\n\n498Viverra volutpat consectetur velit. ac quis, scelerisque malesuada\n\n499In enim ante in, libero aliquam libero et amet, iaculis. efficitur scelerisque sit fames\n\n500Integer purus adipiscing eget faucibus. pharetra tincidunt. adipiscing tortor libero velit. fringilla libero in, viverra\n\n501Ipsum Duis condimentum libero in in, hendrerit libero elementum scelerisque ac sagittis Sed hendrerit\n\n502Semper. et ac rutrum elit. ac ac sem. et hendrerit dui nec sem. ut metus\n\n503Iaculis. ante in bibendum, Duis elementum quis,\nLorem ante efficitur\n\n504Ipsum tincidunt. finibus Fusce amet, ac viverra ipsum Sed in pretium adipiscing\n\n505Lorem purus consectetur velit. quis, efficitur libero ipsum ipsum volutpat massa ut nec iaculis. neque.\n\n506Et efficitur Duis sem. In\n\n507Interdum ac dolor lorem enim ac massa libero Duis ut efficitur\n\n508Sed neque. faucibus. Sed ipsum massa ante neque. ac Interdum pretium eget elit.\n\n509Ante efficitur bibendum, felis. et et\n\n510Consectetur scelerisque volutpat ante rutrum elit. ante tincidunt.\n\n511Integer volutpat elit. Sed lorem quis, efficitur felis. consectetur vel tortor efficitur In\n\n512Malesuada massa pharetra eget viverra rutrum est elementum orci, tortor est\n\n513Tincidunt. molestie sem. vitae efficitur eget in neque.\n\n514Sem. quis, pretium sem. pretium elit. molestie primis Fusce volutpat\n\n515Interdum elit. scelerisque ac ut Interdum est molestie lorem ac dui vel\n\n516Pretium scelerisque ac scelerisque Mauris viverra in, metus\n\n517Elit. ante faucibus. vel purus\nLorem massa,\nLorem amet, nec pretium\n\n518Adipiscing iaculis. nec iaculis. enim in hendrerit enim ipsum\n\n519Eget\nLorem ante efficitur et fames finibus\nLorem Duis primis aliquam elit. massa,\n\n520Ut In felis. ac fames Sed In malesuada rutrum felis.\n\n521In molestie massa, Vivamus Interdum et\n\n522Vel massa eget in libero malesuada bibendum, Fusce purus\n\n523Mauris sit massa massa metus tincidunt. faucibus. lorem ligula elit.\n\n524In Vivamus eget eget ac fames Sed massa hendrerit volutpat in adipiscing\n\n525Elit. fringilla ac eget nec massa massa, fringilla hendrerit et Vivamus ipsum primis\n\n526Ut semper. posuere Sed malesuada Fusce\n\n527Vivamus sagittis ante adipiscing eget bibendum,\n\n528Iaculis. eget condimentum tincidunt. aliquam neque.\n\n529Semper dui orci,\nLorem ante velit. eget volutpat amet, lorem\nLorem eget\n\n530Elementum felis. semper in elementum Duis Mauris scelerisque faucibus. et\n\n531In enim malesuada ipsum Mauris fringilla\n\n532Et Ut elementum elementum dui finibus tortor\n\n533Fusce nec Ut Duis efficitur ac consectetur faucibus. ipsum primis fringilla\n\n534Ac et tincidunt. massa, massa, purus in, hendrerit elit. felis. massa,\n\n535Vivamus efficitur amet, ipsum Integer In eget in consectetur\n\n536Consectetur orci ante neque. Fusce tincidunt. in orci,\n\n537Pharetra neque. felis. iaculis. fames malesuada fames in nunc in ac ut Interdum\n\n538Semper. bibendum, Fusce et Interdum pretium vel Ut consectetur primis ac purus\n\n539Ut in ut scelerisque malesuada fringilla eget vitae efficitur orci, viverra hendrerit\n\n540Viverra est posuere velit. fringilla massa, libero\n\n541Malesuada in volutpat fringilla Fusce fringilla massa ligula\n\n542Massa consectetur amet, Vivamus purus Mauris Vivamus ac adipiscing ante\n\n543Ante sit nunc aliquam pretium posuere nec Fusce Interdum metus Fusce massa vitae\n\n544Primis bibendum, sem. pharetra viverra efficitur nec et ac sit\nLorem et in et\n\n545Ante nec rutrum semper finibus elit.\n\n546Ante efficitur ante faucibus. aliquam amet, efficitur Mauris ante pharetra nec\n\n547Ut elit. sagittis enim vel efficitur pretium dolor pharetra\n\n548Iaculis. Sed ac est sem. libero molestie ut finibus aliquam sit ac\nLorem ac\n\n549Viverra Duis neque. malesuada semper. efficitur pharetra ipsum dui Ut ac\n\n550Nunc condimentum massa amet, sit velit. enim\n\n551Integer in amet, vitae efficitur eget efficitur scelerisque malesuada in\n\n552Libero eget enim molestie vel in Integer faucibus. orci amet, primis elit. sit orci\n\n553Pharetra ac in, malesuada tincidunt.\n\n554Amet, in, orci lorem et in, et metus ipsum\n\n555Ut ac semper. ac semper bibendum, Integer finibus quis, fames\nLorem\n\n556Ligula pharetra Integer pretium est et in\nLorem tincidunt. massa, tincidunt. est dui ligula iaculis.\n\n557Et dolor massa, elementum elit.\n\n558Ac est malesuada pretium vel adipiscing dui et consectetur\n\n559Ac Vivamus ligula bibendum, efficitur In semper. dui In et amet, ut\n\n560Massa Vivamus molestie vel viverra neque. efficitur felis. ante nunc primis orci quis, ac\n\n561In hendrerit enim semper. Interdum molestie bibendum, consectetur ac\n\n562Bibendum, efficitur ac ante ac nec aliquam efficitur hendrerit pretium Fusce volutpat Interdum elit.\n\n563Felis. quis, velit. primis Mauris in neque. Vivamus pharetra\n\n564Vivamus hendrerit ut molestie est ut Vivamus enim elit.\n\n565Fames lorem Duis aliquam faucibus. ac ac ut ac\n\n566Ac eget volutpat eget faucibus. malesuada\n\n567Primis molestie viverra rutrum et bibendum, ante iaculis.\n\n568Molestie scelerisque et ante orci eget Fusce Vivamus hendrerit\n\n569Sed ligula posuere viverra fames vitae Vivamus massa, consectetur bibendum, aliquam fames\n\n570Lorem ac consectetur vitae ac semper Sed sagittis finibus\n\n571Ac vel in vel massa nec Vivamus purus metus ante iaculis. ac vitae finibus consectetur\n\n572Finibus scelerisque eget elit. purus ante ac elit. Fusce et ut pretium\n\n573Ac molestie in, Sed ante viverra lorem ligula ante hendrerit sem. efficitur ut quis, faucibus.\n\n574Adipiscing iaculis. massa, fringilla felis. massa elit. in ipsum Mauris\n\n575Sed Ut elementum Sed dui et fames consectetur scelerisque in\n\n576Faucibus. massa, elit. ac condimentum Integer hendrerit vitae pharetra\nLorem\n\n577Ut posuere efficitur Mauris viverra ante et libero sem. fames neque. fames\n\n578Efficitur In eget enim pharetra in in orci Mauris sem. ac\n\n579Duis ante ac semper. lorem vitae In sit est ac consectetur nec et semper finibus\n\n580Scelerisque in fames primis ipsum elit. nunc neque. bibendum, vitae consectetur\n\n581Ac velit. eget lorem efficitur ipsum\n\n582Neque. molestie orci, ac ante efficitur eget orci Sed in, elit. malesuada et velit. aliquam\n\n583Integer molestie est aliquam adipiscing sagittis enim finibus libero scelerisque\n\n584Purus Fusce enim libero volutpat massa Vivamus Interdum Sed orci Sed elit.\n\n585Elementum molestie adipiscing ac volutpat\nLorem elit. faucibus. semper. rutrum est faucibus. molestie lorem\n\n586Bibendum, ipsum iaculis. eget Ut ac massa, molestie semper massa faucibus. sem. Interdum orci,\n\n587Ante finibus molestie finibus fringilla ac et eget malesuada semper consectetur dui ante iaculis. tincidunt.\n\n588Sit dolor ac libero purus orci, lorem Integer\n\n589Finibus massa pretium nec nunc tincidunt. ac Vivamus\n\n590Ac nec efficitur ligula velit. orci,\n\n591Sem. massa neque. ante massa felis. Duis bibendum, nec\nLorem neque. dui adipiscing efficitur ac\n\n592In ipsum elit. Sed et scelerisque ipsum sit purus scelerisque\n\n593In nec neque. Duis Sed\n\n594Pretium ipsum consectetur purus ac vel\n\n595Eget molestie faucibus. faucibus. semper. amet, in dui est in lorem elit. ipsum Mauris\n\n596Eget molestie libero in scelerisque malesuada ipsum\n\n597Eget ipsum in tortor In elit. ut rutrum\n\n598Fames rutrum in sem. Integer elementum orci scelerisque lorem\n\n599Molestie sit consectetur elit. eget\n\n600Eget et orci, sem. ante finibus ante ante\n\n601Tincidunt. viverra elit. metus iaculis. vitae\n\n602Efficitur orci, dolor sit enim semper ac consectetur bibendum, bibendum,\n\n603In ut orci, ante metus finibus aliquam rutrum purus fames purus\n\n604Nunc elementum molestie quis, eget rutrum ac eget vel Vivamus velit. in, condimentum elementum In\n\n605Et elit. Mauris Sed in consectetur Vivamus nec\nLorem consectetur Ut sit orci,\nLorem\n\n606Et ipsum elit. Mauris in sit velit. faucibus. consectetur dolor in, ac ipsum\n\n607Molestie massa neque. consectetur In vel iaculis. hendrerit\n\n608Semper. efficitur elit. sit massa, pretium amet, posuere massa massa elit. eget in efficitur\n\n609Fames in scelerisque Interdum Interdum malesuada in, elit.\n\n610Integer libero Mauris ac ante nunc fringilla eget ut\n\n611Ut est consectetur Interdum et enim malesuada et malesuada sit felis. efficitur In vel faucibus.\n\n612Ante adipiscing hendrerit semper lorem fringilla dolor In in ante massa dui\n\n613Et ut ut aliquam in, ut amet, Mauris viverra sagittis viverra elit. faucibus. hendrerit vitae\n\n614Quis, velit. finibus\nLorem dui rutrum vel molestie finibus\n\n615Quis, ut viverra massa, in Sed ante dui elit. ac ac in pharetra in primis\n\n616Finibus posuere et primis dui Interdum Integer Fusce volutpat\n\n617Felis. Sed libero ac posuere scelerisque amet, pharetra massa, hendrerit\n\n618Velit. tortor ut semper ante massa, efficitur Integer ante Fusce et Integer eget Mauris\n\n619Efficitur et orci orci eget ac dolor enim purus libero fringilla ante\n\n620Ac condimentum efficitur quis, ac primis sit tortor primis massa, felis. est consectetur eget iaculis.\n\n621Consectetur pharetra orci et adipiscing elit.\n\n622Dui elementum elementum aliquam ac\n\n623Dolor massa, in, pretium tortor viverra est enim\n\n624Duis pharetra\nLorem semper. ac et est efficitur ac dolor quis, bibendum, ipsum\n\n625Et finibus elit. massa, enim ante nunc ligula Sed elementum sem. adipiscing\n\n626Fames fringilla Interdum Interdum ac ipsum posuere ipsum quis, faucibus. molestie in iaculis. lorem vel\n\n627Lorem ac rutrum ut\nLorem Fusce orci, Sed semper quis,\n\n628Elit. ac tortor fringilla malesuada dolor orci, Mauris fames ac fames neque. molestie sit\n\n629Viverra iaculis. eget ipsum neque. amet, Integer sem.\n\n630Metus eget ipsum in elementum elementum quis,\n\n631Fringilla ac nec ut ante consectetur orci, sagittis In fringilla et\n\n632Ligula ac malesuada elementum orci consectetur condimentum ipsum posuere ligula in,\n\n633Vel ut neque. eget pharetra aliquam\n\n634Interdum dui elementum rutrum eget dui sit sem. eget condimentum Ut elit.\n\n635Fringilla Vivamus fringilla ipsum purus tortor tincidunt. purus fames velit. ut Integer\n\n636Interdum in, fringilla efficitur vitae\n\n637Libero sit enim lorem volutpat elit. posuere malesuada Vivamus sem. ac\n\n638Elit. semper. Ut adipiscing in semper efficitur efficitur ligula velit. Interdum in, Interdum rutrum in\n\n639Ut felis. efficitur ac felis. sagittis orci, condimentum efficitur ac metus orci, eget dolor consectetur\n\n640Pharetra hendrerit posuere volutpat ante ut quis, aliquam Interdum viverra\n\n641Ut enim metus iaculis. velit. quis, adipiscing lorem\n\n642Ipsum Sed ut orci fames ante elit. ante nunc Fusce in adipiscing Vivamus Interdum\n\n643Ante\nLorem lorem sagittis Vivamus consectetur pretium pharetra et Sed velit. ut tortor pretium\n\n644Efficitur in enim lorem massa amet, primis\n\n645Primis ante fringilla aliquam est fames consectetur sagittis ac\n\n646Sem. in Vivamus velit. Interdum ac ipsum orci, dolor posuere ligula et ut\n\n647Ipsum ante ut elit. orci, felis. consectetur elementum malesuada orci, elit. ipsum in ac\n\n648In condimentum felis. Vivamus elit. in ipsum\n\n649Est Mauris sem. metus faucibus. in semper Duis in aliquam\n\n650Enim pharetra condimentum ante in dui ac sagittis\nLorem purus ut condimentum\n\n651Ante ac ante elementum viverra ipsum tortor ac condimentum in\n\n652Felis. Sed metus amet, ac efficitur efficitur elementum ante ac sagittis nec neque. nec\n\n653Ante Duis tortor ac efficitur\n\n654Condimentum\nLorem elit. ac massa, ipsum efficitur vel nunc elit. molestie tincidunt. condimentum condimentum\n\n655Purus amet, elementum in, ut Mauris ut in amet, massa, fringilla viverra scelerisque Sed\n\n656Ante Vivamus eget neque. ut adipiscing iaculis. Fusce pretium dolor\n\n657Nec ut libero Duis purus elit. aliquam velit. scelerisque dolor fames fringilla molestie condimentum\n\n658Vel elementum et fames ac tincidunt. ipsum viverra ipsum aliquam efficitur nunc neque.\n\n659Malesuada sit dui\nLorem ut\n\n660Ut tincidunt. Ut ante et faucibus. primis lorem ac efficitur libero iaculis. neque. dui consectetur\n\n661Fusce pharetra enim massa nunc massa massa,\n\n662Est felis. est massa semper Mauris tortor lorem\n\n663Ut elit. pharetra ante primis\n\n664Ipsum ac faucibus. consectetur In massa, elementum elementum consectetur consectetur Integer\n\n665Eget sem. pretium volutpat finibus Integer vel Mauris ante ligula In et metus\n\n666Ante fringilla Mauris eget scelerisque est malesuada Mauris eget efficitur vel scelerisque dui Integer\n\n667Ante ipsum nec iaculis. Integer\nLorem massa, sem. ac pharetra sem. ante\n\n668Ipsum felis. eget massa amet, quis, iaculis. ut Integer sagittis quis, metus\n\n669Scelerisque massa scelerisque felis. In eget neque. faucibus.\n\n670Nunc in ut adipiscing Mauris ac sagittis felis. fringilla ante\n\n671Metus consectetur ipsum Mauris in pharetra hendrerit\n\n672Fringilla orci Ut sem. ac in amet,\n\n673In, enim volutpat in vitae et pharetra viverra consectetur\n\n674Primis neque. elit. viverra orci ante tincidunt. est\n\n675Duis eget faucibus. eget Mauris nunc vitae ac Interdum primis molestie\n\n676Dui pretium pretium et vitae ac condimentum semper. vitae In ac Interdum ante elit. Fusce\n\n677Et faucibus. orci massa, scelerisque sit ipsum adipiscing ante viverra orci dui sagittis\n\n678In purus finibus libero dui tincidunt.\n\n679Primis consectetur molestie consectetur orci, nec velit. in bibendum,\n\n680Metus ante metus rutrum ipsum dui massa,\n\n681Semper ac ac elit. Fusce dolor iaculis. et quis, condimentum fames est dolor\n\n682Ligula semper eget et felis. Ut\n\n683Efficitur orci primis tortor rutrum iaculis. purus iaculis. consectetur eget\n\n684Dui orci faucibus. efficitur ipsum eget In in ligula volutpat nunc vitae eget scelerisque primis\n\n685Ac Ut ante velit. massa primis libero ante Interdum dolor ut et\n\n686Dolor pharetra ante Ut Sed nec sagittis posuere efficitur consectetur malesuada nec ut ante\n\n687Ac Fusce nec ante pretium scelerisque enim Duis velit. fames sit volutpat\n\n688Ac In est eget efficitur volutpat bibendum, vitae libero ipsum\n\n689Nec et ante amet, sagittis elit. et\n\n690Efficitur molestie eget massa, Vivamus felis. massa, ante efficitur velit. felis.\n\n691Et scelerisque\nLorem ac orci purus semper pharetra rutrum ante velit. libero ut elit. metus\n\n692Efficitur Fusce velit. amet, ut tincidunt.\n\n693Ipsum adipiscing malesuada nec orci, posuere ac\n\n694Eget enim Ut Sed ante posuere ac in, fringilla\n\n695Sem. posuere dui primis sagittis sagittis felis. purus tincidunt. massa, nec efficitur orci Interdum\n\n696Fringilla elementum in adipiscing eget bibendum, fringilla in est pharetra in,\n\n697Orci sagittis Mauris fringilla primis pharetra consectetur semper eget semper quis, massa,\n\n698Duis purus pretium neque. felis. ligula hendrerit aliquam velit. dui Mauris elit.\nLorem\n\n699Ipsum Integer ac elit. libero velit.\n\n700Sem. quis, libero volutpat ac velit. fringilla tortor Interdum ante\n\n701Posuere consectetur elit.\nLorem vel velit.\n\n702Elit. Vivamus massa, In ipsum orci orci, sagittis in libero Interdum aliquam\n\n703Viverra fames volutpat in, adipiscing ut Mauris vitae vel massa lorem dolor massa ante\n\n704Fames adipiscing scelerisque est eget adipiscing orci neque. pharetra quis, ut Vivamus ante\n\n705Purus elit. amet, amet, Ut metus in\n\n706Purus nunc Ut est vitae\n\n707Pretium orci, massa, elit. pretium ante quis, In nunc posuere pretium in, Interdum velit. ante\n\n708In dui ac eget vitae posuere vel ut ac Integer fames\n\n709Eget Ut ante nec ligula\n\n710Mauris felis. consectetur finibus ipsum massa, fringilla\n\n711Orci fames Vivamus ante sagittis felis. in, adipiscing vel molestie amet,\n\n712Est Ut fringilla fringilla vitae In volutpat\n\n713Efficitur volutpat in ipsum sem. eget enim\n\n714In ac ante Sed Interdum enim quis, consectetur libero ac\n\n715Iaculis. ante et massa massa consectetur in, nunc fames\n\n716Rutrum est in\nLorem ut ac adipiscing ut ligula\n\n717Aliquam adipiscing rutrum Mauris est Vivamus finibus ac ac neque. massa, In dolor ac\n\n718Vel hendrerit pharetra ac eget in ac faucibus. velit. eget bibendum,\n\n719Semper primis semper. iaculis. Mauris sit Integer metus semper. hendrerit Integer ac Mauris\n\n720Viverra ac iaculis. semper ut scelerisque tortor volutpat\n\n721Neque. ut malesuada molestie ac Fusce eget rutrum finibus metus in ut ante in, pretium\n\n722Scelerisque viverra ipsum semper in malesuada fringilla sagittis dolor molestie fringilla purus sagittis in\n\n723Pharetra In pretium libero libero elit. malesuada ante massa scelerisque ante dui efficitur in\n\n724Nec ligula ac primis et Integer quis, efficitur amet, libero\n\n725Orci amet, scelerisque ante scelerisque in ligula consectetur tortor\n\n726Volutpat ac consectetur purus aliquam et efficitur Duis\n\n727Lorem sit consectetur aliquam semper primis tortor sagittis elit.\n\n728Tincidunt. vel et semper. primis Fusce Fusce Fusce bibendum, lorem Vivamus volutpat massa\n\n729Dolor hendrerit faucibus. in, posuere condimentum semper. est quis, Fusce vitae\n\n730Pharetra massa, sem. velit. eget primis neque. dui Ut et In fringilla semper scelerisque\n\n731Ligula et dui hendrerit Integer posuere ac orci et\n\n732Massa, orci, ligula adipiscing in, et eget condimentum tincidunt. elementum\n\n733Rutrum Interdum elit. nec Duis velit. massa, ante\n\n734Semper. orci, tortor Sed dolor elit. finibus\n\n735Ut viverra in fames Integer Vivamus Vivamus nec vitae posuere lorem\n\n736Velit. vel ante sem. Interdum semper\n\n737Orci, pretium et Integer ante efficitur elit. malesuada neque. faucibus. elit.\n\n738Vivamus Ut malesuada sagittis in, consectetur orci,\n\n739Fames adipiscing metus velit. fringilla faucibus. ac lorem velit. In felis. ipsum\n\n740Vitae et Sed dolor rutrum\n\n741Condimentum semper. fringilla pharetra viverra libero purus in\n\n742Volutpat ac in tincidunt. enim\n\n743Primis volutpat malesuada orci massa,\n\n744Ut quis, et Vivamus et consectetur faucibus. dui primis elit. eget amet, elit. orci, Ut\n\n745Et enim molestie ante orci, eget bibendum,\n\n746Efficitur tortor neque. sem. et malesuada\n\n747In scelerisque nec iaculis. ante pharetra ante condimentum semper purus nunc finibus in,\n\n748Ipsum Sed sem. viverra enim posuere\n\n749Ut consectetur velit. in, elit. iaculis. eget\n\n750Tincidunt. elit. sit primis Sed posuere Interdum massa sit orci, ac sit dui velit. et\n\n751Est eget sagittis\nLorem eget Vivamus\n\n752Duis molestie ante pretium massa, primis ante amet,\n\n753Ut dolor malesuada efficitur sagittis ac orci vel ut ipsum dolor\n\n754Enim orci eget est et sit scelerisque adipiscing neque.\n\n755Posuere semper viverra pharetra eget efficitur fames\n\n756Integer elementum ipsum massa, felis. ligula volutpat ante scelerisque efficitur semper. aliquam consectetur\n\n757Consectetur vel purus posuere orci, Mauris Integer in, efficitur primis malesuada\nLorem\n\n758Adipiscing velit. efficitur Vivamus in, consectetur\n\n759Rutrum adipiscing bibendum, efficitur fames purus fringilla metus nunc vitae libero\n\n760Ac felis. in est consectetur ac in metus condimentum libero felis.\n\n761Efficitur eget est Mauris semper neque. faucibus.\n\n762Sit vitae ante efficitur et massa vitae sit enim ante in eget ipsum metus ante\n\n763Interdum ac ante tincidunt. massa vitae\n\n764Adipiscing finibus lorem ac sagittis sem. ac In elit. ipsum et et molestie\n\n765Vel velit. Interdum ante viverra elementum tortor libero In pretium In fringilla in primis dui\n\n766Metus fringilla Mauris lorem Fusce massa\n\n767Ac in semper nunc fames ac et Fusce\n\n768Metus primis lorem ipsum elit.\n\n769Molestie Sed ac semper Duis consectetur purus semper amet,\n\n770Enim dolor ante in, finibus consectetur ipsum condimentum ante In\n\n771In in, in finibus sem.\n\n772Condimentum nec primis eget adipiscing ut\n\n773Ac sem. ante ante Vivamus\n\n774Ipsum semper. vitae ipsum Ut orci tincidunt. in Ut vel aliquam ut Vivamus\n\n775Adipiscing fames elit. posuere neque. amet, tincidunt.\n\n776Malesuada pretium purus tortor dui tincidunt. sem. Sed ante\n\n777Felis. vitae purus enim pretium dolor sit tincidunt. metus libero\n\n778Purus posuere Fusce malesuada quis, fringilla eget ut\n\n779Ante adipiscing posuere finibus quis, efficitur consectetur ac ante dolor ipsum tincidunt. Fusce consectetur\n\n780In primis pharetra rutrum purus Duis\n\n781Amet, in, dolor vel ante felis. efficitur ac enim ante neque.\n\n782Mauris in bibendum, ipsum primis est aliquam fringilla in, Sed semper Mauris\n\n783Viverra ac molestie posuere Vivamus nec malesuada pharetra Fusce ipsum finibus elit. ligula Vivamus hendrerit\n\n784Hendrerit pharetra Interdum Interdum ipsum sit dui ac eget in finibus finibus dui eget velit.\n\n785Neque. dolor neque. et tincidunt. molestie dolor consectetur\n\n786Consectetur sem. ac est neque. efficitur quis, fringilla in sem. in ac fringilla elit.\n\n787Ipsum ac Mauris nunc et ante Ut scelerisque nec ante molestie Duis elit. fames In\n\n788Volutpat Interdum aliquam finibus tincidunt.\n\n789Integer ac dui finibus ut Ut efficitur fringilla ac semper. viverra orci ipsum lorem\n\n790Scelerisque massa, purus\nLorem ipsum\n\n791Sed ac massa, metus orci, et Integer\n\n792Fames in volutpat ante et efficitur volutpat\n\n793Ipsum ut ipsum sem. ut in Sed condimentum ante\nLorem Duis\n\n794Consectetur ligula tortor purus orci, molestie efficitur pretium efficitur in\n\n795Neque. ipsum et ac sit ac Ut tortor orci vitae orci, libero massa\n\n796Sem. Mauris in, sit ac orci dui quis, primis et nec tortor molestie volutpat\n\n797\nLorem eget felis. sem. malesuada massa,\n\n798Adipiscing dolor et semper orci fames vitae dolor\n\n799Vivamus scelerisque ipsum elementum quis, ac\n\n800Ante dui consectetur ante eget finibus ante Fusce ac vitae in semper. ipsum\n\n801Adipiscing hendrerit orci, massa lorem sagittis est bibendum, nunc metus ut efficitur elementum\n\n802In ipsum tincidunt. felis. libero\n\n803Tincidunt. condimentum sit posuere in,\n\n804Sed aliquam tortor finibus Mauris ipsum ac metus massa,\n\n805Et sem. ante semper. in, iaculis. Vivamus\n\n806Et ut est tincidunt. ac dolor In neque. Interdum et semper semper est adipiscing ligula\n\n807Est bibendum, sem. felis. velit. tortor finibus ante In faucibus. nunc malesuada rutrum\n\n808Fringilla Vivamus ac primis ac aliquam vel rutrum molestie rutrum eget\n\n809Ligula efficitur elit. ligula sit orci, scelerisque amet, metus sagittis finibus quis, orci ipsum\n\n810Condimentum ut molestie Integer enim bibendum,\n\n811Tincidunt. lorem volutpat molestie nec quis, ipsum Duis elementum lorem ut faucibus. semper\n\n812Velit. ante lorem ante volutpat In Ut primis pharetra rutrum et sem. in\n\n813Primis consectetur sagittis Sed malesuada amet, vitae ipsum neque.\n\n814Ante elementum finibus in et tincidunt. tortor massa, Fusce posuere\nLorem volutpat nec\n\n815Et Interdum libero malesuada faucibus. condimentum fringilla Integer In ipsum eget amet,\n\n816Ipsum Sed et enim dui consectetur ante dui nec\n\n817Faucibus. orci pretium sem. aliquam nunc sagittis pretium dolor dui sit condimentum purus\n\n818Fames enim hendrerit ac elit. vitae ligula sit velit. eget ligula Fusce massa,\n\n819Bibendum, volutpat ante libero nunc orci, fames metus Vivamus\n\n820Ac velit. ac eget massa ac consectetur et tincidunt. fringilla orci,\n\n821Felis. finibus et pharetra elementum Fusce vel\n\n822Tortor condimentum sagittis et pharetra hendrerit elementum Mauris orci dui sit\n\n823Tortor elit. ac rutrum ac primis\n\n824Consectetur primis ac ligula ac vitae In molestie\nLorem tortor\nLorem Mauris fames\n\n825Finibus neque. posuere tortor libero iaculis. libero efficitur ut\n\n826Faucibus. viverra malesuada finibus massa,\n\n827Et Sed aliquam scelerisque molestie ut aliquam felis. Sed elit. posuere eget\n\n828Neque. in finibus quis, orci, tortor libero ante primis Interdum scelerisque eget Mauris vitae orci\n\n829\nLorem tortor Sed vitae ante elit. nunc elementum et est in, Sed metus ut\n\n830Malesuada tincidunt. eget dui velit. consectetur In orci, consectetur volutpat pretium massa\n\n831Iaculis. enim sem. condimentum elementum consectetur eget sagittis in finibus molestie\n\n832Molestie Fusce viverra Ut elit. dolor nec lorem metus ac semper elit. lorem vel Interdum\n\n833Ipsum dui massa, scelerisque dui neque. adipiscing malesuada\n\n834Amet, ac semper eget felis. eget sit Duis ipsum tortor Sed velit. sit finibus quis,\n\n835Ipsum efficitur elementum in, viverra molestie consectetur ante\n\n836Scelerisque tincidunt. scelerisque elit. faucibus. rutrum elit. ante aliquam aliquam velit. nec sem. in primis\n\n837Massa Ut ac hendrerit Ut bibendum, eget\n\n838Ut iaculis. primis Sed consectetur enim fames elementum consectetur\n\n839Pretium amet, semper sagittis\nLorem ligula pretium elementum ante ac ipsum ipsum Duis in malesuada\n\n840Pharetra et neque. ut ipsum faucibus. Interdum elementum tortor ante Interdum rutrum\n\n841Semper. elit. ipsum semper primis\n\n842Elit. In ante semper primis ipsum adipiscing et ac massa velit. hendrerit ac malesuada quis,\n\n843Et hendrerit In velit. in primis orci libero ac Interdum sem.\n\n844Vivamus neque. faucibus. Interdum ante adipiscing fames Sed ipsum efficitur purus aliquam ligula est\n\n845Quis, in, tortor elit. elit. ac est Vivamus sit elementum Vivamus in, massa\n\n846Purus tincidunt. purus ligula eget pretium pharetra est\n\n847Pretium\nLorem et ac in, adipiscing semper. faucibus. ipsum aliquam posuere sit\n\n848Faucibus. Fusce ac viverra\nLorem eget Fusce ante finibus metus ac Mauris dui\n\n849Viverra aliquam massa dolor Interdum malesuada vitae\n\n850Ut sagittis in vitae orci ante faucibus. posuere dolor\nLorem in massa ac\n\n851Aliquam amet, pretium nec metus ac et volutpat elit. efficitur nunc condimentum Interdum libero\n\n852Posuere ligula efficitur malesuada consectetur finibus\n\n853Ut ac ut vel enim finibus et posuere vitae\n\n854Finibus quis, et dolor massa ut Vivamus felis. iaculis.\n\n855Rutrum ipsum nunc viverra ut consectetur felis. Integer ac semper ac hendrerit neque.\n\n856Consectetur malesuada pharetra molestie ut in semper.\nLorem sit massa Vivamus et aliquam ligula dui\n\n857Neque. scelerisque massa, tortor adipiscing eget primis Fusce\n\n858Finibus eget in neque. Integer Integer sit massa, malesuada posuere\n\n859Elit. ac massa, nunc quis, Fusce orci, Interdum ut\n\n860Ut Fusce consectetur purus sem. massa consectetur molestie tortor purus ante\n\n861Dolor semper efficitur ipsum semper. nunc bibendum, lorem\n\n862Viverra velit. in semper nec vitae scelerisque faucibus. adipiscing sem. volutpat\n\n863Ipsum finibus tortor tincidunt. viverra ac Ut\n\n864Tincidunt. Vivamus Integer Vivamus eget vitae in volutpat viverra Sed ut scelerisque elit. Duis ante\n\n865Amet, ac dui pharetra ut malesuada neque. ligula consectetur in\n\n866Lorem lorem rutrum Sed felis. volutpat pharetra lorem posuere felis. tincidunt. in, tincidunt. libero\n\n867Felis. Ut ac pretium pharetra ac scelerisque malesuada consectetur amet,\n\n868Felis. consectetur ipsum Vivamus consectetur sagittis massa ipsum\nLorem est hendrerit semper.\n\n869Et eget ac hendrerit Sed efficitur ipsum molestie Ut\n\n870Dolor ligula ac ante\nLorem fames semper. molestie vel est Fusce aliquam\n\n871Velit. in rutrum molestie fringilla enim efficitur sit nunc\n\n872Hendrerit efficitur viverra vel libero Mauris eget ac\n\n873Nec neque. ante libero rutrum posuere tincidunt. velit. sem. et elit.\n\n874Fames scelerisque purus condimentum aliquam ipsum faucibus. fringilla condimentum libero tortor hendrerit Ut\n\n875Vivamus ut et Mauris ipsum bibendum, libero consectetur In ante\n\n876Est tincidunt. aliquam orci, viverra nec efficitur scelerisque orci, ante\nLorem purus nec nec\n\n877Ante purus adipiscing ante elementum\nLorem in condimentum condimentum pretium ipsum\n\n878Ac scelerisque semper vitae in, bibendum, eget semper. amet, Mauris quis, faucibus. elit.\n\n879Efficitur in eget felis. tortor elementum primis\n\n880Ut Fusce pharetra faucibus. in faucibus. sagittis et semper posuere fames Integer consectetur\n\n881Vivamus consectetur Duis pretium semper. metus in nec Duis hendrerit in dui eget\n\n882Rutrum felis. adipiscing amet, ipsum viverra fringilla finibus Vivamus eget et et bibendum,\nLorem sagittis\n\n883Scelerisque ante primis Interdum condimentum ante condimentum semper In fringilla in finibus felis. et nunc\n\n884Malesuada Vivamus est ligula fames Duis dolor ac\n\n885Malesuada consectetur bibendum, sit Ut Ut\n\n886Integer primis et felis. neque. ante ac ante condimentum\n\n887Elementum efficitur condimentum bibendum, hendrerit in, et in\n\n888Ante finibus Sed elementum ac consectetur Sed lorem scelerisque iaculis.\n\n889Fringilla nunc tortor condimentum eget massa faucibus. sem. bibendum, ac sem. nunc primis\n\n890Sit in, elementum aliquam elit. ac bibendum, velit. volutpat malesuada scelerisque\n\n891Fringilla condimentum faucibus. ante quis, orci, felis. nec Integer eget tincidunt.\n\n892In ligula aliquam Vivamus orci, Vivamus Fusce aliquam faucibus. eget\n\n893Eget et consectetur rutrum condimentum Vivamus tincidunt. Mauris ut rutrum in, felis. semper dolor ipsum\n\n894Sit eget viverra est bibendum, libero bibendum, ac ante in Interdum Fusce sagittis faucibus.\n\n895Mauris Integer primis ante sem. quis, eget ante consectetur ut\n\n896Purus massa, consectetur in vel et\n\n897In vitae efficitur quis, ipsum Interdum ante lorem Vivamus consectetur ante\n\n898Ut vitae et massa et elit. in vel pretium primis enim ipsum in massa orci,\n\n899Efficitur finibus eget efficitur pharetra scelerisque ut dui\n\n900Nec vitae aliquam ligula est consectetur sit sagittis\n\n901Primis ac pretium ac dui vitae vel lorem pharetra\n\n902Sit tincidunt. ipsum lorem quis, lorem neque. aliquam posuere massa, felis. Fusce ac ligula\n\n903Fringilla velit. molestie in massa, eget semper\n\n904Elit. dui molestie ut eget ac efficitur ac orci posuere efficitur tortor\n\n905Ut elit. elit.\nLorem ac rutrum Vivamus ac ante molestie\n\n906In, ut in semper Interdum massa fames amet, velit. quis, quis,\n\n907Posuere sem. elit. eget enim Mauris in semper. Ut\n\n908Nunc lorem ante ante condimentum bibendum, sem. finibus massa, libero\n\n909Sem. orci condimentum Mauris malesuada\n\n910Iaculis. dolor faucibus. purus massa, metus orci Fusce et ac nunc\n\n911Faucibus. felis. lorem malesuada fringilla ante viverra sem. in eget scelerisque ipsum in In ut\n\n912Sit Integer in viverra fringilla\n\n913Fames ac nunc sit volutpat\n\n914\nLorem efficitur ipsum scelerisque nunc in sit\n\n915Orci, et vel volutpat posuere dui elit. In sit metus Vivamus\n\n916Lorem condimentum purus condimentum consectetur ac Mauris Sed\n\n917Bibendum, in Duis sagittis Integer enim scelerisque metus amet, ipsum elit.\n\n918Fringilla consectetur dui tortor quis, hendrerit rutrum dui Fusce aliquam ac massa est\n\n919In sagittis ante ut Fusce Vivamus\n\n920Massa libero nunc sagittis in eget neque. Ut in\nLorem\n\n921Ante hendrerit Ut velit. volutpat amet, est ut ac ut Duis Vivamus\n\n922Semper. in, ante neque. rutrum enim adipiscing sagittis pretium in elementum ut consectetur et Integer\n\n923Condimentum vitae ante Vivamus hendrerit efficitur orci, malesuada bibendum, ipsum vitae\n\n924Malesuada ac Mauris massa consectetur ipsum sagittis pretium\n\n925Semper. sem. ante pharetra dui ligula posuere nunc massa elementum\n\n926Et ut libero orci, Interdum ipsum ac neque. ut\n\n927Massa\nLorem Duis et est Fusce vel volutpat ligula\n\n928Interdum bibendum, ante ac massa, viverra et tortor bibendum, et eget sit viverra efficitur efficitur\n\n929Est Fusce In Duis bibendum, purus\n\n930Est metus ac neque. scelerisque Vivamus\n\n931Neque. eget vitae in tortor vel orci vel\n\n932Quis, malesuada felis. faucibus. felis. eget ac massa est velit. faucibus. nec\n\n933Pretium nec ut vitae finibus ante\n\n934Malesuada ut ipsum eget pharetra nunc Ut condimentum\n\n935Vel elementum purus condimentum vel condimentum in eget efficitur elementum ipsum viverra vitae ac Ut\n\n936Ante enim nec purus eget semper. metus massa, Sed hendrerit elit. pharetra malesuada Vivamus\n\n937Fusce et posuere Integer\nLorem felis. est volutpat fames efficitur Interdum\n\n938In elit. pharetra ante in massa, ante in, pretium ac primis\n\n939Vivamus scelerisque pretium ut primis in quis, fames ac ut malesuada pretium In\n\n940Mauris in Vivamus pharetra et nunc\n\n941Adipiscing in pretium sagittis in in, rutrum\nLorem et ut elit.\n\n942Fames felis. lorem ante orci, vel\n\n943Mauris adipiscing neque. amet, hendrerit pharetra lorem libero Sed est semper. ante primis\n\n944Volutpat sagittis et ac libero nec quis, eget ac purus velit. elementum tortor ac libero\n\n945Et adipiscing ac viverra in\n\n946Ante faucibus. Integer in purus tincidunt. Interdum in\n\n947Pharetra ante ipsum Integer ligula ut fames sagittis consectetur ac amet, adipiscing semper. vel in\n\n948Semper vel ipsum semper sit Interdum eget ac sagittis est nec\n\n949Pharetra rutrum aliquam Fusce ligula ipsum velit. semper. quis, consectetur Mauris\n\n950Ligula et in ipsum rutrum ut sit ut\n\n951Elit. dui massa ac nunc dolor Duis in hendrerit\n\n952Condimentum eget rutrum in molestie sit Interdum efficitur fringilla elit. ac ipsum fringilla\n\n953In, bibendum, elementum et ac primis rutrum ante ac in, pretium ac\n\n954Ut vel neque. posuere ante velit. Mauris In hendrerit\n\n955Aliquam in finibus in malesuada velit.\n\n956Efficitur Integer rutrum eget Duis consectetur finibus\n\n957Nunc condimentum tincidunt. aliquam dui eget lorem efficitur ipsum\n\n958Tortor nunc Vivamus rutrum massa, enim vitae efficitur nec felis. rutrum est massa\n\n959Malesuada massa pharetra posuere ligula iaculis. rutrum orci, elementum pretium rutrum\n\n960Amet, elementum nunc consectetur purus viverra ipsum dolor pharetra ut faucibus. dui in in\n\n961Tortor et et Duis elementum\nLorem\n\n962Scelerisque neque. in, faucibus. in malesuada felis. in primis Ut eget\n\n963Ut dui elit. fames molestie consectetur adipiscing in felis. dui elit. Mauris condimentum massa massa\n\n964Ut libero pharetra ac ut velit. pretium rutrum enim malesuada enim\n\n965Ante eget dolor ut aliquam volutpat nunc nunc ipsum felis. ante ipsum\n\n966Consectetur Duis ac fames ac massa consectetur fringilla scelerisque ante\n\n967Ipsum in, lorem in elit. ut Fusce est\n\n968Duis in et in neque. semper semper. elit.\n\n969Semper. orci, elit. tortor malesuada\n\n970Mauris in aliquam volutpat hendrerit\n\n971Bibendum, ipsum faucibus. ac rutrum ut scelerisque eget ligula vel\n\n972In In sagittis nec ut pretium orci, Mauris et ut ligula vel\n\n973Nec consectetur Sed elementum vitae\n\n974Efficitur pretium iaculis. lorem elementum volutpat massa, libero volutpat faucibus. Integer\n\n975Pharetra scelerisque ac hendrerit sem. semper. pretium dolor iaculis. libero aliquam in\n\n976Malesuada condimentum ut ante fringilla Vivamus nec\n\n977Vivamus sit felis. nec libero in ante in quis, condimentum sem. ipsum vel\n\n978Ac nunc purus molestie nec ac in velit. in eget eget adipiscing primis\n\n979Vitae fames ipsum eget in ac pretium enim enim semper. nunc\n\n980Fames vel vitae Interdum ante tortor\n\n981Et scelerisque consectetur elit. elementum eget ligula faucibus. viverra sit massa, quis, viverra\n\n982Ut fames Interdum in ante metus efficitur\n\n983Felis. In fringilla molestie molestie felis. elit. primis velit. consectetur fames efficitur orci In\n\n984Finibus Interdum tortor velit. quis, efficitur aliquam in, eget sit ligula\n\n985Rutrum ante dolor ante neque.\n\n986Et ipsum amet, Ut sem. nec fames efficitur in eget\n\n987Felis. efficitur ac volutpat pretium ac et ipsum posuere consectetur\n\n988Finibus finibus dui iaculis. libero tincidunt. Sed ipsum orci,\n\n989Tortor hendrerit hendrerit Vivamus massa primis rutrum\n\n990Ac ut Ut semper sagittis orci vitae consectetur semper. orci, semper ante\n\n991Vivamus eget et ipsum\nLorem eget volutpat elementum\n\n992Vel iaculis. semper. condimentum orci semper. purus eget pharetra consectetur fringilla ante\n\n993Iaculis. et fringilla Integer in, Sed massa, efficitur semper. pretium Interdum bibendum, efficitur\n\n994Ante posuere sit metus amet, rutrum in massa,\n\n995Purus vitae ut Mauris Vivamus in metus et ac in efficitur Integer\n\n996Mauris posuere est hendrerit viverra Duis pretium\n\n997Posuere dolor fringilla elit. semper Fusce felis. ac Sed pretium ac libero iaculis. quis, et\n\n998Semper. felis. ut lorem orci consectetur Interdum velit. ut scelerisque Sed massa consectetur enim aliquam\n\n999Ante In pharetra enim amet, est fringilla ipsum condimentum ante in consectetur\n\n1000Lorem libero et felis. finibus fames in est tortor\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. |",
+    "lead": "Dropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.",
+    "summary": "Dropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.",
+    "searchText": "Dropdowns\nDropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.\nDropdowns\nButtonDropdown\nNormal Button\nnoCaret\nDropup\nSplitButton\n\nSplitButton\n\nLarge button\nDefault button\nSmall button\nMini button\n\nDropdown with max-height\nDropdown with dopup\nDropdown with pullRight\nControlled Dropdown\n\nDropdown variantsText dropdown\n\nCustom dropdowns for filter tagsTag dropdown\n\nTag small dropdown\n\nCustom dropdowns for labelsActive\n\nActive\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | — | — |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | — | — |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | — |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | — | — |\nSimpleButtonDropdown\nWrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.\nSingleButtonDropdown\nWrapper component for ButtonDropdown, kept for backwards compatibility.\nSingleButtonDropdown\nSplitButtonDropdown\nWrapper component for ButtonDropdown where prop \"splitButton\" is set automatically.\nSplitButton\n\nSplitButton ButtonDropdown\nDropdownSubmenu\nNormal ButtonDropdown\nnoCaret ButtonDropdown\nSplitButton ButtonDropdown\n\nNormal ButtonDropdown\nCustom Dropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | — | — |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | — | — |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | — |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | — | — |\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| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | — | — |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | — | — |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | — |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | — | — |\nLarge amount of dropdowns in a list or table\nIDContentAction\n\n1Libero In pharetra sagittis in dolor nec in,\n\n2Elementum ac iaculis. faucibus. viverra rutrum volutpat Interdum libero ante dui bibendum, finibus posuere faucibus.\n\n3Tincidunt. ante et sagittis purus ut in ut primis dolor consectetur fames\n\n4Velit. rutrum iaculis. iaculis. volutpat condimentum molestie molestie ac libero\n\n5Vitae Fusce bibendum, condimentum ac hendrerit metus purus\n\n6Semper. massa, enim neque. purus posuere Ut tincidunt. ac ut libero in\n\n7Scelerisque ut ipsum metus fringilla volutpat Mauris elit. elementum consectetur et viverra Mauris orci, condimentum\n\n8Primis neque. Vivamus velit. ut\n\n9Mauris amet, ac ac orci ac posuere vel adipiscing ac Fusce fringilla elit.\n\n10Enim in efficitur enim pretium orci elementum elementum consectetur nec consectetur sit bibendum, sit\n\n11Nec elit. in, efficitur massa fames ante aliquam eget ipsum efficitur In pretium in\n\n12Consectetur metus sem. condimentum nec aliquam orci, ac Sed libero\n\n13Quis, nec ipsum bibendum, lorem purus iaculis. tortor ligula Fusce metus est\n\n14In, sit elit. tincidunt. Vivamus Duis\nLorem eget in elementum\n\n15Adipiscing malesuada velit. sit ac hendrerit ante semper. metus ac libero\n\n16Finibus aliquam pretium dui ipsum aliquam elit. in posuere ac semper. et Sed orci, orci,\n\n17Duis adipiscing efficitur Vivamus iaculis. orci, pretium massa\n\n18Semper eget hendrerit ac felis. Fusce pretium quis,\n\n19Ac pretium ut aliquam ut\n\n20Elit. eget libero est scelerisque orci, ac\n\n21In semper In aliquam in, eget bibendum, finibus finibus hendrerit\n\n22Primis dui est ipsum pharetra vitae ipsum tortor ut dui\n\n23Vitae ipsum in pretium\nLorem pretium molestie vitae pharetra quis, fringilla\n\n24Molestie tincidunt. ipsum efficitur tincidunt. metus Mauris consectetur iaculis. Integer ipsum\n\n25Pretium massa, purus hendrerit sagittis posuere iaculis. vel orci, iaculis. ante ut felis. ante\n\n26Faucibus. libero Vivamus elementum sit neque. metus tincidunt. ac posuere elit. ligula fringilla\n\n27Elit. massa in, Interdum rutrum Mauris ipsum et elit. rutrum\n\n28Ante Fusce\nLorem et elementum consectetur vel posuere fringilla pharetra ac\n\n29Lorem ut ipsum metus eget fames velit. elit. rutrum ipsum velit. In neque. iaculis. faucibus.\n\n30Fringilla ipsum et efficitur Interdum\n\n31Molestie consectetur\nLorem ante elit. metus in purus Vivamus ac massa\n\n32Semper semper purus faucibus. nec ante\n\n33Lorem Fusce sem. eget Integer massa vitae\n\n34Faucibus. felis. viverra iaculis. enim fames in orci et ipsum nec fames ligula\n\n35Adipiscing ac adipiscing in, nec semper. et hendrerit\n\n36Duis condimentum efficitur massa, orci quis, ipsum quis, ac\n\n37Efficitur ligula Sed Duis metus elit. eget sem. velit. Ut ipsum volutpat sit massa, et\n\n38Ante elementum orci, Vivamus neque. in et\n\n39Et ac dui consectetur ante libero orci, ante\n\n40\nLorem semper elit. fringilla neque. aliquam\n\n41Rutrum semper ut condimentum molestie libero sem.\n\n42Iaculis. massa, posuere malesuada massa, in iaculis. efficitur vel fames efficitur nec lorem purus massa\n\n43In, malesuada aliquam eget volutpat orci primis fringilla semper. vel elit. aliquam neque.\n\n44Ac rutrum Interdum ante elementum iaculis. sem. consectetur neque. Vivamus ipsum sit aliquam orci, efficitur\n\n45Elit. eget efficitur fringilla dolor Duis sagittis dui finibus hendrerit Integer efficitur in, ante\n\n46Semper in aliquam posuere dolor primis pretium finibus vitae massa, ipsum ante adipiscing efficitur iaculis.\n\n47Amet, Mauris eget in elit. pretium orci, Integer Duis Duis\n\n48Et ipsum ante tortor tortor ac in vel finibus sem. malesuada\n\n49Metus sagittis condimentum massa, Duis\n\n50Sed felis. Fusce neque. massa, in eget et finibus ac ac massa finibus\n\n51Ipsum et semper ac Fusce Fusce dolor molestie ipsum Interdum neque. ac enim in, rutrum\n\n52Ut in dolor tortor primis in metus aliquam nunc\n\n53Purus faucibus. ipsum pretium Ut sagittis pretium Ut\n\n54Et semper nunc fames elit. quis, tincidunt.\n\n55Eget velit. adipiscing tortor nec semper. est ante Duis\n\n56Scelerisque fames libero molestie ipsum nunc condimentum ante tincidunt.\n\n57Eget ante neque. vel eget\n\n58Amet, Fusce consectetur lorem nunc\n\n59Ante ac ligula ac metus ante aliquam aliquam in, ante elit. ipsum\n\n60Amet, tortor In viverra libero molestie sem. pharetra consectetur Duis et adipiscing consectetur\n\n61In ligula consectetur elementum malesuada malesuada pharetra Duis Sed Duis sem.\n\n62Purus metus felis. ligula quis, Interdum elementum scelerisque semper. faucibus. volutpat fringilla pharetra\n\n63Metus metus dolor dui eget condimentum eget orci\n\n64In, Duis iaculis. ut amet, lorem eget et et\n\n65Ante sit purus ac rutrum vitae\n\n66Sit consectetur bibendum, ante Sed efficitur dui felis. bibendum, fringilla neque. massa\n\n67Orci, massa ante bibendum, bibendum, semper elit. consectetur vel\n\n68Et posuere bibendum, nec pharetra dolor molestie primis\nLorem dui\n\n69Lorem nec Sed sagittis efficitur aliquam efficitur Vivamus\n\n70Ut viverra condimentum aliquam orci, et volutpat felis. ut eget elit. in, elit.\n\n71Ac massa in, molestie Mauris bibendum, dolor metus ligula lorem in sagittis ipsum\n\n72Ante purus ante in ipsum lorem metus sit\n\n73Lorem molestie adipiscing sagittis eget ante ante Fusce orci tincidunt. ligula pharetra viverra ipsum efficitur\n\n74Ac ac hendrerit elit. ligula Duis\nLorem consectetur efficitur est Integer finibus tincidunt. hendrerit\n\n75Elit. est iaculis. bibendum, in fames adipiscing Integer ipsum\n\n76Felis. enim Ut pharetra amet,\n\n77In, iaculis. ante ut ante sagittis malesuada\n\n78Et adipiscing eget vel condimentum viverra finibus posuere vitae nec\n\n79Sit et\nLorem nec massa, bibendum, Fusce elementum malesuada Mauris sit sem. Sed pretium\n\n80Metus ac in massa Fusce Duis Fusce elit. purus consectetur purus massa, volutpat\n\n81Ipsum Interdum ligula consectetur\nLorem Vivamus vel sit condimentum Ut ipsum tortor\n\n82Efficitur finibus ac velit. volutpat quis, Duis scelerisque orci ac Vivamus\n\n83Pretium molestie fringilla volutpat faucibus. dolor iaculis. sit est ante\n\n84Vel posuere massa, eget ipsum consectetur est enim ut ac\n\n85In condimentum aliquam neque. dui orci primis ante\n\n86Vivamus in quis, consectetur hendrerit\n\n87Posuere dui fringilla volutpat Ut malesuada consectetur Ut pretium in,\n\n88Est efficitur est dui sit Integer vel bibendum, dui efficitur\nLorem eget rutrum tortor ut\n\n89Velit. purus velit. vitae adipiscing adipiscing ut Sed ac nec ipsum massa orci,\n\n90Condimentum tincidunt. in, Mauris ut orci,\n\n91Scelerisque Interdum malesuada in ac efficitur aliquam semper.\n\n92Eget posuere ac\nLorem tortor\n\n93Sem. libero pretium ante ac in felis.\n\n94Ligula ligula felis. Ut malesuada elit.\n\n95Sagittis orci Fusce in, efficitur ante elit. in ac ut eget ante semper scelerisque posuere\n\n96Et hendrerit Vivamus Integer in sagittis eget lorem molestie eget fringilla bibendum, volutpat orci neque.\n\n97Faucibus. ac In velit. ante molestie ac in, posuere Mauris finibus\n\n98Ut in felis. Vivamus pretium ante adipiscing pretium ut primis eget elit. scelerisque enim\n\n99Felis. est scelerisque tortor Ut malesuada eget elementum semper vel\n\n100Neque. et bibendum, viverra elit.\n\n101Est eget ut vel ac elit. Sed iaculis. Interdum purus\n\n102Purus fringilla\nLorem tortor neque. aliquam viverra bibendum, metus amet, sit primis tortor dolor\n\n103Sed adipiscing in, massa, Duis semper vitae semper. purus dui purus vel consectetur Interdum ante\n\n104Sed hendrerit dolor hendrerit in Integer aliquam condimentum nunc viverra condimentum orci, elementum\n\n105Semper ligula semper ut libero nunc sit Interdum ante est\n\n106Libero nunc massa orci, ante\n\n107Dui et eget adipiscing malesuada aliquam semper massa, metus ante Duis\n\n108Tincidunt. ante semper molestie metus et Integer nunc consectetur posuere ipsum ipsum Interdum in,\n\n109Semper enim finibus Sed in\n\n110Elit. consectetur felis. consectetur viverra iaculis. consectetur fringilla neque. ante vitae ac sagittis Sed amet,\n\n111Interdum massa, elit. nunc sem. scelerisque velit. fames semper hendrerit ac consectetur ac orci\n\n112Quis, eget Sed Mauris Interdum fames elit. libero consectetur finibus rutrum eget neque. est\n\n113Consectetur aliquam eget posuere In ipsum lorem\n\n114Elementum lorem hendrerit nunc libero\nLorem est nec ut in massa, condimentum\n\n115Sem. Ut dui dolor nec efficitur ut orci,\n\n116In efficitur consectetur felis. rutrum viverra orci, Interdum pharetra nec eget eget hendrerit fringilla et\n\n117Viverra vitae pharetra iaculis. consectetur ac\n\n118Posuere semper. posuere volutpat metus bibendum, nunc massa, molestie lorem et Ut sem.\n\n119Nec ipsum sem. felis. hendrerit eget\nLorem ac\n\n120Sagittis Fusce ac elit. eget ac ligula eget tincidunt.\nLorem libero metus viverra\n\n121Fringilla massa Mauris\nLorem amet, bibendum, elit. ac orci orci, et consectetur lorem\n\n122Molestie condimentum Integer faucibus. ante rutrum sem. amet, et lorem finibus\n\n123Semper fringilla efficitur nunc nec\n\n124Bibendum, elit. efficitur consectetur posuere ac quis, scelerisque amet, Ut amet, Vivamus efficitur\n\n125Viverra Vivamus scelerisque finibus ligula ante et\n\n126Elit. condimentum Vivamus et dolor vitae lorem massa, in adipiscing ante\n\n127Ac Interdum efficitur consectetur vel Vivamus tincidunt. sagittis\n\n128In massa Mauris et Interdum neque. malesuada\n\n129Adipiscing vel Duis Fusce metus aliquam aliquam vitae massa vel ante libero ac et\n\n130Ut eget metus vel enim metus semper aliquam fringilla\n\n131Sem. tincidunt. sagittis elit. massa consectetur fringilla nunc adipiscing elit. massa nec ac Duis\n\n132Rutrum et molestie Interdum nunc sem. dui massa, ante felis.\n\n133Ac ipsum massa, Ut Mauris condimentum efficitur orci, lorem Ut ac\n\n134Ut ac ac faucibus. ante\nLorem lorem Vivamus ut fames vel Fusce elit. pharetra\n\n135Sem. massa, neque. Sed condimentum faucibus. iaculis. In vitae Interdum ante finibus\n\n136Aliquam posuere molestie metus orci dui Sed bibendum,\n\n137In Duis tortor massa, eget Ut\n\n138Condimentum in, eget Fusce nunc posuere consectetur ac ipsum ante velit. enim\n\n139Orci ipsum et massa orci purus pharetra ante elementum elementum condimentum pretium massa, pretium viverra\n\n140Viverra sit in nec ut ligula in, neque. Fusce eget condimentum ante Duis quis, scelerisque\n\n141Dui semper Duis efficitur tincidunt. Duis eget enim ante ante In amet,\n\n142Faucibus. orci, pharetra in felis. molestie ante efficitur condimentum posuere elementum quis, et\n\n143Et rutrum ac In quis, condimentum semper ac amet, sagittis ac primis Ut volutpat\n\n144Ut vitae et consectetur elit. enim\n\n145Malesuada iaculis. quis, in lorem nunc primis Vivamus massa\n\n146Finibus tortor felis. tincidunt. rutrum Integer neque. vitae enim posuere Vivamus viverra Integer ante\n\n147Libero ac elementum in\nLorem\n\n148Semper est faucibus. ut bibendum,\n\n149Pharetra orci rutrum volutpat ipsum ut rutrum condimentum sit fames viverra Fusce eget\n\n150Elit. nec dolor in pretium felis. nec neque. vel consectetur sagittis purus scelerisque Sed neque.\n\n151Malesuada semper. rutrum enim quis, ipsum quis, viverra elit.\n\n152Massa In consectetur Fusce pharetra nec vel fringilla vel Duis sit eget pharetra enim finibus\n\n153Interdum scelerisque velit. semper. hendrerit tortor faucibus. in\n\n154Enim Mauris massa volutpat condimentum in ac condimentum viverra orci in faucibus. lorem eget\n\n155\nLorem tincidunt. consectetur viverra posuere\n\n156Eget finibus iaculis. et condimentum ante Integer Integer in\n\n157Sem. malesuada aliquam in tincidunt. libero faucibus. orci, Sed malesuada dolor condimentum ut semper ipsum\n\n158Neque. amet, consectetur sit ac ut lorem in, metus condimentum elementum\n\n159Pretium hendrerit ipsum ac bibendum, in, et\n\n160Lorem condimentum efficitur ut scelerisque eget\n\n161Finibus dui aliquam est ante pretium nunc ac quis, tortor in efficitur velit.\nLorem elementum\n\n162Pretium amet, fringilla vel massa, Sed condimentum primis vel aliquam ante\n\n163Sagittis elit. neque. dolor Interdum bibendum, libero ut malesuada ut nec ac fames libero elit.\n\n164Tincidunt. orci hendrerit Integer efficitur In elit. scelerisque Ut Vivamus ut est velit. Fusce consectetur\n\n165Eget amet, primis ante orci, elit. nec massa, Ut in, libero consectetur iaculis.\n\n166Neque. Mauris Ut elementum iaculis. in nunc velit. fames ligula posuere dui iaculis. efficitur\n\n167Posuere Interdum ante ante ligula consectetur adipiscing Mauris\n\n168Interdum efficitur est hendrerit molestie et amet, tincidunt. est nec ac dui\n\n169In efficitur quis, in et pharetra sagittis massa, elit. libero enim lorem\n\n170Ante pretium hendrerit lorem dolor ac semper orci,\n\n171Interdum molestie hendrerit finibus adipiscing in\n\n172Semper condimentum sit ante vel et velit. in tincidunt. aliquam\n\n173In massa viverra bibendum, consectetur neque.\n\n174Elit. purus et Sed In pretium aliquam dolor vel metus bibendum, Interdum\n\n175Nunc consectetur faucibus. vitae sit molestie lorem sem. fames efficitur\n\n176Quis, condimentum Interdum sem. hendrerit consectetur felis.\n\n177Mauris in, ut Sed eget elit. eget ut In libero Mauris bibendum,\n\n178Sem. tincidunt. Vivamus neque. ligula in, fames finibus condimentum ante aliquam finibus volutpat\n\n179\nLorem Duis scelerisque In hendrerit lorem ac Vivamus dui\n\n180Sit sem. ac semper lorem Integer semper. vitae ligula dui In est\n\n181Malesuada orci ipsum consectetur pretium sagittis\nLorem scelerisque ipsum viverra nunc elit.\n\n182Massa, vel In pharetra bibendum, Sed nec faucibus. scelerisque\nLorem faucibus. massa, ligula in\n\n183Velit. purus quis, dui condimentum volutpat libero vel\n\n184Dolor orci iaculis. condimentum orci,\n\n185Fusce pretium libero vel est\n\n186Et tincidunt. elit. orci sagittis Ut efficitur\n\n187Fringilla neque. Ut Vivamus ut\n\n188Consectetur pharetra consectetur posuere Interdum ac scelerisque\n\n189In fames nec purus in Vivamus eget sem.\n\n190Posuere eget primis orci, Fusce et primis elit. tortor nec ligula felis.\n\n191In condimentum tortor et molestie ante quis, metus ante Sed Duis ac ipsum\n\n192Elit. Integer pharetra ac quis, fames quis, in tincidunt. massa ut malesuada in Sed bibendum,\n\n193Primis iaculis. vitae et semper ac efficitur malesuada elit. volutpat dolor\n\n194Elit. adipiscing ipsum eget massa\n\n195Bibendum, elementum et et felis. iaculis.\n\n196Ac In molestie Fusce scelerisque\n\n197Volutpat libero semper. pretium semper. Mauris ipsum ante dolor volutpat efficitur sagittis in adipiscing et\n\n198Ut consectetur Ut ut elit. purus\n\n199In, et\nLorem amet, fringilla efficitur efficitur in volutpat malesuada\n\n200Ligula eget et ac vel condimentum Vivamus\n\n201Fames lorem eget nec fringilla posuere vitae ac velit.\n\n202Efficitur consectetur aliquam massa, tortor est velit. est molestie in nunc volutpat\n\n203Semper amet, efficitur eget Integer ac condimentum\n\n204\nLorem rutrum ac libero faucibus. consectetur purus elementum nunc\n\n205Ut quis, sagittis pretium ac volutpat eget neque.\n\n206Molestie ut libero ipsum Integer Fusce massa in, tincidunt. Fusce vitae massa molestie Fusce eget\n\n207Ut in primis in tincidunt.\n\n208Vivamus rutrum semper. lorem eget semper. ac consectetur orci,\n\n209Ipsum velit. ac volutpat Sed massa, nunc elementum bibendum, ante pretium lorem\n\n210Ut massa orci sagittis elit. dolor orci, metus\nLorem est elit. ac bibendum,\n\n211Tincidunt. faucibus. Ut efficitur pretium primis vel semper Integer eget viverra sit ac neque.\n\n212Elementum purus fames massa ligula in metus Duis volutpat ut dui hendrerit quis,\n\n213Ut tincidunt. elementum eget semper faucibus. condimentum et consectetur ac massa, bibendum, consectetur\n\n214Posuere Vivamus Ut posuere enim in posuere ipsum hendrerit eget sem.\n\n215Ut ante efficitur orci Integer bibendum, in ac\n\n216Ut dolor elit. Mauris tincidunt. dolor posuere orci condimentum tincidunt.\n\n217Nec semper Mauris tortor consectetur semper. semper nec ut volutpat Duis\n\n218Integer nec neque. tortor in Sed efficitur ipsum Integer iaculis. tortor Interdum\n\n219Elit. velit. scelerisque pretium in Vivamus nunc amet, orci tincidunt. faucibus. ac vitae\n\n220Semper.\nLorem Sed in elit. ipsum scelerisque vitae malesuada sagittis in, ac orci orci,\n\n221Fusce Fusce dolor pharetra hendrerit malesuada\n\n222Efficitur semper. tincidunt. fringilla ac\n\n223Fames sagittis consectetur amet, velit. vel elit. condimentum vitae ligula ipsum lorem amet, posuere et\n\n224Vel finibus orci, fringilla volutpat ut massa, ante in, ante metus consectetur neque. et faucibus.\n\n225Neque. ac malesuada efficitur nunc in, ligula malesuada adipiscing\n\n226Elit. felis. Integer adipiscing molestie ante Mauris enim fames est posuere ut In purus ipsum\n\n227Posuere nec semper. elementum ante ac semper Vivamus ipsum\n\n228In iaculis. dolor dolor et consectetur enim ac Fusce nunc Vivamus dolor finibus efficitur pretium\n\n229Bibendum, eget in eget fames ipsum\n\n230Consectetur molestie viverra pretium\nLorem amet, velit. massa dolor ut vitae neque.\n\n231Condimentum Ut velit. efficitur ac malesuada pretium\n\n232Iaculis. massa, iaculis. viverra quis, ac\n\n233Libero efficitur aliquam sagittis ipsum aliquam In Duis fames vitae pretium ac et\n\n234Primis molestie in eget est hendrerit elit.\n\n235Vivamus bibendum, Interdum in, tincidunt. finibus\n\n236Efficitur Duis volutpat Sed et in\n\n237Integer aliquam consectetur ut ante\n\n238Metus dolor est orci quis, consectetur fames consectetur semper faucibus. amet, molestie\n\n239Interdum orci in ut ante tincidunt. sem.\n\n240Condimentum vitae amet, consectetur tortor orci ut Interdum iaculis. pretium massa,\n\n241Volutpat semper. dolor quis, et fames consectetur Mauris elementum massa, semper. ac Fusce\n\n242Vitae Ut in enim bibendum, Mauris ac orci, pharetra libero\n\n243Lorem tortor eget in massa, nec faucibus.\n\n244Aliquam tincidunt. est hendrerit orci tincidunt. malesuada et enim\n\n245Faucibus. molestie in, efficitur aliquam In elementum dui eget ante efficitur in nec dui posuere\n\n246Efficitur ut viverra condimentum elementum elit. nunc faucibus. bibendum,\n\n247In efficitur nec Sed bibendum, ac elementum\n\n248Fames metus fames tincidunt. purus et velit. Duis ac semper. aliquam In pretium\n\n249Ipsum Duis eget Integer pretium ut in\n\n250Integer condimentum Sed quis, massa amet, Fusce et tortor\n\n251Mauris sagittis massa, amet, fringilla massa massa Integer elit. ipsum orci ac\n\n252Finibus sit nunc sagittis semper pretium\n\n253Ac consectetur rutrum in quis, adipiscing velit. elit. tincidunt. tincidunt. primis sagittis\n\n254Hendrerit fringilla libero tortor eget eget faucibus. et\nLorem\n\n255Ipsum ante sagittis neque. faucibus.\n\n256Nunc enim fringilla ipsum primis\n\n257Purus elit. vitae neque. finibus nec\n\n258Nec ac velit. consectetur quis, purus\n\n259\nLorem Vivamus semper tortor ut finibus viverra tortor Vivamus sagittis in, adipiscing\n\n260Eget massa enim sit ac orci ac tincidunt. ut molestie semper. purus\n\n261Pharetra primis tortor Ut nec finibus posuere nec\n\n262Duis bibendum, pretium scelerisque posuere in, amet, tortor vitae in, iaculis. fringilla elit. semper. orci\n\n263Rutrum eget efficitur et tortor et\n\n264Neque. scelerisque Integer consectetur efficitur Fusce malesuada\n\n265In iaculis. ac nunc dolor neque. tincidunt.\n\n266Orci purus ligula in in fringilla\n\n267Elit. dolor molestie Ut semper. molestie ante pretium dolor\n\n268Quis, ipsum in, molestie Duis In Integer consectetur ac faucibus. nec in ac\n\n269\nLorem consectetur bibendum, elit. ante Ut ac\n\n270Mauris semper. quis, fames viverra neque. Fusce fames Interdum aliquam hendrerit ante\n\n271In Integer metus in finibus\n\n272Ipsum et orci efficitur neque. semper\nLorem velit.\n\n273Elit. scelerisque dolor ac semper. consectetur in, eget faucibus. Duis elit. Vivamus ante\n\n274Eget aliquam enim ut ac et molestie primis orci semper. ut ut in nunc\n\n275Consectetur amet, dui molestie efficitur Mauris orci ipsum molestie adipiscing vitae\n\n276Duis massa, hendrerit libero dolor in et orci faucibus. ipsum elit. ut libero dui\n\n277In posuere ante condimentum dolor massa, in\n\n278Neque. dui nec enim bibendum, est bibendum, bibendum, ac\n\n279Libero enim Vivamus volutpat orci,\nLorem\n\n280Mauris amet, posuere in Fusce\n\n281Neque. In volutpat ante est et primis semper. In in elementum in semper. Vivamus finibus\n\n282Vitae adipiscing nunc ligula et malesuada efficitur eget in, Interdum pretium neque.\n\n283Purus sagittis iaculis. fames vel ac\n\n284Bibendum, nec Sed ipsum ac fames quis, felis. efficitur dui scelerisque massa, dolor adipiscing\n\n285Fames faucibus. scelerisque in sit orci elit. libero elit.\n\n286Tortor efficitur viverra Integer massa, ac molestie in\n\n287Condimentum tincidunt. finibus aliquam molestie efficitur semper. velit. ut neque. felis. nec\n\n288Scelerisque in, elementum finibus hendrerit\n\n289Massa, faucibus. in in faucibus. posuere est\n\n290Integer dui primis ac orci semper. nec massa, molestie sagittis lorem malesuada Integer\n\n291Nec tortor posuere efficitur amet,\n\n292Scelerisque ante eget efficitur iaculis. amet, quis, ac dolor tortor pharetra pharetra Interdum velit. nec\n\n293Eget Ut amet, Vivamus ligula aliquam Interdum in\n\n294Dui et primis bibendum, metus efficitur eget ac Vivamus ac Vivamus et tincidunt. ac semper.\n\n295Metus aliquam Interdum pretium dolor ac ipsum libero Interdum In\n\n296Ac sem. in elit. ligula efficitur In bibendum, rutrum\nLorem\n\n297Est rutrum ipsum sagittis velit. Vivamus molestie\n\n298Scelerisque ante amet, in iaculis. ipsum purus malesuada in malesuada efficitur Vivamus\n\n299Elementum Duis neque. fringilla elit.\nLorem orci Integer iaculis. in condimentum pretium Mauris\n\n300Eget\nLorem posuere malesuada bibendum,\n\n301Fames hendrerit pharetra bibendum, massa, ligula est nec In dolor orci iaculis.\n\n302Molestie molestie consectetur Sed ante et in pharetra orci et velit. efficitur\n\n303\nLorem et lorem ac Interdum consectetur\n\n304Volutpat in dui Duis purus ac Vivamus et finibus in, nec elit.\n\n305Semper. Fusce efficitur ac sagittis\n\n306Et fames finibus ante dolor pretium\n\n307Hendrerit dui nec semper. orci consectetur sit vitae elit. elementum fames ac faucibus.\n\n308In vitae semper Vivamus ac pretium ante\n\n309Semper amet, sit vel aliquam\n\n310Efficitur semper. dui dui felis. fringilla ante\n\n311Metus metus enim amet, orci\n\n312Pharetra tincidunt. et ut ac purus efficitur in consectetur Duis in\n\n313Ac sagittis ipsum et vel Vivamus viverra efficitur in ac ante sit Integer eget finibus\n\n314Semper. neque. elit. eget sit Interdum\n\n315Finibus vel purus ac semper dolor purus\n\n316Bibendum, ante vitae est posuere condimentum\n\n317Neque. et et\nLorem est sagittis in, in nunc ipsum metus\n\n318Dolor efficitur eget felis. volutpat efficitur fames elit. efficitur eget pretium nunc\n\n319Orci, Duis nec Mauris felis. semper. dui libero ligula ipsum amet, Sed\n\n320In semper neque. metus elementum consectetur Ut et Duis malesuada orci, dolor orci\n\n321Nec posuere fames volutpat viverra sit ante ante massa efficitur tincidunt. In eget vitae nunc\n\n322Fames ante et sagittis est et volutpat felis. metus ac semper. ante massa, faucibus.\n\n323Efficitur sit neque. fames efficitur eget\n\n324Nec orci, adipiscing eget lorem faucibus. adipiscing Sed hendrerit semper\n\n325In vel massa, viverra in metus volutpat\n\n326Scelerisque elit. faucibus. dolor pretium Vivamus ac\n\n327Sem. sem. viverra purus et ante posuere amet, vel est dolor adipiscing\n\n328Malesuada Sed ante vel rutrum fames efficitur Vivamus eget\n\n329Semper primis vitae ligula scelerisque hendrerit Mauris orci, et et in\n\n330Nec condimentum Integer libero Vivamus et est dui Mauris orci eget fames\n\n331Orci, Vivamus semper. In aliquam quis, consectetur tortor sagittis\n\n332\nLorem in ipsum elementum ut\n\n333Eget vitae ante finibus posuere finibus Integer Vivamus Ut dolor efficitur in\n\n334Quis, hendrerit et primis Fusce Sed\n\n335Ipsum nec sit libero consectetur scelerisque\n\n336Elit. Duis primis posuere semper volutpat enim\n\n337Vitae dolor orci adipiscing efficitur et consectetur Ut malesuada primis\n\n338Ac primis viverra scelerisque pretium ut sagittis Interdum Integer\n\n339Nec semper. massa, Interdum orci, orci, ut\nLorem ante dui ante\n\n340Ipsum ipsum ante rutrum in Sed consectetur adipiscing ut ac Ut\n\n341Molestie efficitur ac ligula aliquam ante sit In fames rutrum scelerisque\nLorem elementum faucibus. pharetra\n\n342Malesuada Ut orci, finibus condimentum Sed\n\n343Et In neque. elementum tortor ante sem. bibendum, ac ac viverra posuere bibendum, elementum\n\n344Primis ante ante orci, eget nec scelerisque efficitur viverra purus\nLorem Duis ut malesuada Sed\n\n345Elementum in nunc primis ipsum\n\n346Sagittis eget sem. consectetur quis, et molestie neque. adipiscing dui\n\n347Elit. pharetra ac consectetur faucibus. massa efficitur dui Interdum vel ipsum et\n\n348Amet, efficitur iaculis. rutrum efficitur Duis ante ante ligula massa,\n\n349Ut nec vitae in, sit purus\n\n350Ante elementum Fusce fames posuere velit. ipsum purus semper\n\n351Ut molestie enim elit. aliquam ipsum elit. pharetra volutpat elit. vitae Integer ac\n\n352Sagittis ut condimentum efficitur primis sit ante ipsum metus hendrerit ante lorem elit.\n\n353Sed malesuada ligula fringilla hendrerit ac ac Vivamus\n\n354Condimentum nec amet, semper. iaculis. efficitur\n\n355Pretium orci, hendrerit consectetur volutpat orci\n\n356Amet, finibus sem. Integer vitae Duis rutrum viverra elit.\n\n357Interdum libero volutpat vel orci in, ante orci, pharetra Fusce\n\n358Viverra adipiscing dui ac semper eget amet, fringilla dolor volutpat rutrum volutpat ut vel\n\n359Aliquam ac et sagittis posuere ante elementum sagittis Vivamus pharetra\nLorem volutpat\n\n360Lorem metus efficitur primis ac dolor nec\n\n361Metus in bibendum, ipsum ut\n\n362Ipsum enim elementum ipsum felis. scelerisque et\n\n363Semper. ut adipiscing ipsum in Vivamus semper ac consectetur vel ante finibus in,\n\n364Interdum velit. sit Ut sagittis tortor dolor finibus Integer Vivamus\n\n365Semper consectetur bibendum, consectetur Sed volutpat Integer in,\n\n366Consectetur ac efficitur iaculis. ante orci in Interdum\n\n367Malesuada adipiscing semper nunc fames consectetur orci aliquam ante Sed volutpat neque. ante nunc\n\n368Aliquam bibendum, purus bibendum, fringilla sit orci eget et\n\n369Bibendum, In fringilla\nLorem Sed\n\n370Ac sagittis ac ac primis pharetra\nLorem consectetur dui molestie\n\n371Velit. elit. nec adipiscing eget velit. sit volutpat malesuada vitae metus nec in\n\n372Tincidunt. ante ante Sed elit. Ut tortor tincidunt. in,\n\n373\nLorem amet, nec libero\nLorem aliquam consectetur in, efficitur ante\n\n374Orci ligula velit. scelerisque viverra elit. ac\n\n375Elit. massa, ipsum in rutrum fames dui Sed bibendum, neque. consectetur pharetra ac bibendum, ac\n\n376Faucibus. efficitur metus hendrerit elementum eget ut vitae primis est ante molestie hendrerit enim\n\n377Ut ut iaculis. amet, fames\n\n378Ligula Vivamus sem. rutrum ac ante Duis ante ipsum finibus\n\n379Vel ac aliquam et elementum faucibus. ac\n\n380Lorem massa, ac ipsum elit. tortor dolor efficitur dui volutpat\n\n381Semper. Sed nec ac Mauris et In massa in\n\n382Viverra vitae faucibus. fringilla Interdum ipsum\n\n383Nunc vitae condimentum ac aliquam Sed ut sagittis vel\n\n384Ante ac elit. dolor tortor posuere dui semper rutrum\n\n385Finibus sagittis Sed vitae rutrum ante lorem ipsum purus Sed enim quis, dui\n\n386Eget nunc Duis et In eget fringilla ante ligula ante ac massa, in metus\n\n387Malesuada semper ante massa sem.\n\n388Fames ac pharetra quis, ac\n\n389Aliquam Interdum ante quis, ipsum ac semper. condimentum faucibus.\n\n390Tincidunt. ante ipsum ipsum ante\n\n391Fames faucibus. Fusce ac ac in, In Interdum in\nLorem ante elit. eget\n\n392Iaculis. in, orci, fames purus ante adipiscing quis, posuere\n\n393Orci In Interdum viverra hendrerit tortor sit efficitur primis faucibus.\n\n394Condimentum orci, hendrerit elit. et massa sem. ac et orci ligula ut libero efficitur\n\n395Malesuada neque. purus ac quis, viverra elementum quis, Integer enim massa, orci rutrum in quis,\n\n396Vel elementum ac neque. Integer faucibus. rutrum ac vel metus massa elit. vel\n\n397Sagittis posuere ut nunc nec\n\n398Consectetur sem. scelerisque Duis quis, ligula hendrerit ligula ante tincidunt. ac metus\n\n399Tincidunt. enim et vitae bibendum, ante rutrum malesuada ante ac eget Interdum\n\n400Ac scelerisque ante ac\nLorem in, sem. ipsum dui elementum Duis aliquam amet, bibendum, malesuada\n\n401Massa pharetra Integer malesuada lorem efficitur scelerisque Mauris in Fusce hendrerit purus\n\n402Eget semper vel ac sit rutrum orci ut Fusce fames vitae elementum\n\n403Fames in, dolor tincidunt. In hendrerit bibendum, enim vel elit.\n\n404Faucibus. vel dolor scelerisque orci semper.\n\n405Finibus iaculis. massa volutpat adipiscing metus ante ac dui purus\n\n406Sagittis velit. sagittis eget eget viverra rutrum elit. Integer rutrum\n\n407Interdum velit. tincidunt. eget molestie ac neque. ac\n\n408In Ut massa, rutrum ante in libero orci, finibus dui efficitur\n\n409\nLorem primis efficitur et quis, tincidunt. ante vel est felis. elementum ligula\n\n410Elit. ac in vel felis. sagittis Ut efficitur pharetra pharetra rutrum quis,\n\n411Sagittis Sed tincidunt. dolor amet, libero\n\n412Finibus elit. iaculis. eget pharetra vel elementum metus vel elit. condimentum aliquam Mauris primis ac\n\n413Ac Integer Sed quis, sit Interdum efficitur consectetur consectetur felis. ante pretium orci consectetur bibendum,\n\n414Ipsum hendrerit vitae metus ante posuere fames elementum\n\n415Orci Interdum sit nec efficitur in, ante rutrum purus ac libero malesuada\n\n416Condimentum tincidunt. nec molestie ac hendrerit malesuada tortor iaculis. lorem sagittis consectetur malesuada ante\n\n417Elit. sem. In orci semper. ac ac massa\n\n418Ante ac ac sit elit. adipiscing in\n\n419Orci, libero ac elit. Ut ligula massa Duis nunc vel molestie purus massa dolor\n\n420In, lorem in metus elit.\n\n421Eget Interdum Duis primis aliquam vitae in adipiscing\n\n422Molestie Fusce Ut massa vitae et lorem enim semper. Fusce Sed bibendum, ligula rutrum molestie\n\n423Vel fames tortor quis, elit.\n\n424Ipsum Ut nunc posuere hendrerit nunc efficitur nunc ipsum est in, ac efficitur ante\n\n425Ipsum Vivamus Vivamus Sed orci orci neque. Mauris ipsum dui neque. aliquam elit. in\n\n426Sagittis velit. Ut ante Duis elementum consectetur metus velit. vitae vel aliquam adipiscing\n\n427Mauris semper. finibus eget ac Sed ut eget Ut tortor Duis malesuada Vivamus dui ut\n\n428Pharetra finibus In scelerisque tortor faucibus. in sem. neque. libero ac nec\n\n429Quis, rutrum finibus ut efficitur ante neque. et dui vitae orci, ac\n\n430Dui tortor libero felis. condimentum orci orci, Interdum ut massa bibendum,\n\n431Faucibus. primis et velit. purus ante eget fames elementum ipsum nec tortor est hendrerit nunc\n\n432Ut consectetur tincidunt. Ut ligula orci, libero ut in et semper. ut posuere ac\n\n433Tortor Duis adipiscing Mauris ipsum ante Fusce viverra est semper enim\n\n434Sit In ante sem. tincidunt. eget metus consectetur ante Sed ac pharetra nec\n\n435Volutpat Integer malesuada libero malesuada efficitur elit. elit. consectetur ac\n\n436Felis. semper. finibus sit enim primis\n\n437Molestie ut et velit. Duis neque. fames in iaculis. metus volutpat primis ante dolor dolor\n\n438Velit. iaculis. primis ut elit. orci\n\n439Et consectetur massa, metus ac quis,\n\n440Aliquam ipsum ac pretium fames massa, velit.\n\n441Consectetur sit purus et adipiscing massa, Ut et ut Fusce Fusce ac pretium\n\n442Condimentum et dolor ante ipsum posuere ante pretium ac libero et\n\n443Consectetur eget lorem molestie volutpat ipsum neque. pharetra ligula neque.\n\n444Vivamus posuere lorem malesuada sagittis\n\n445Finibus consectetur Fusce velit. molestie\n\n446Rutrum fames et libero quis, hendrerit Integer semper. dui tincidunt. tortor sem.\n\n447Vel in, ante primis malesuada massa, sit ante ac ac semper. velit. bibendum, elementum lorem\n\n448Tincidunt. consectetur massa eget ante est massa, rutrum Sed quis,\n\n449Sagittis hendrerit bibendum, bibendum, faucibus. elit. amet, velit.\n\n450Fringilla dui in In neque. sagittis tincidunt. viverra\n\n451Consectetur purus consectetur eget efficitur elit. in,\n\n452Eget in ipsum elit. nunc Ut\n\n453Faucibus. vel\nLorem tortor felis. dui vel Vivamus consectetur Fusce ac scelerisque libero\n\n454Mauris semper efficitur faucibus. ut ac bibendum, posuere\n\n455Elit. eget orci ut efficitur orci\n\n456Sagittis nunc in, sem. semper. enim bibendum, hendrerit\n\n457Orci, in, ligula libero scelerisque posuere Fusce\n\n458Sit vel faucibus. ante pharetra Integer sem. et posuere felis.\n\n459Fringilla Fusce est efficitur Duis molestie consectetur pretium elit. metus malesuada finibus scelerisque\n\n460Elit. ante velit.\nLorem adipiscing elit. ac elit. Duis efficitur sem. Vivamus neque. Ut ut\n\n461Vitae neque. In Vivamus orci ut In dolor\n\n462Ante malesuada fringilla pharetra nunc nunc sit faucibus. felis. Mauris\n\n463Ante In ut dolor molestie\n\n464Felis. orci ut est est ac Ut massa efficitur viverra massa Interdum Fusce in\n\n465Viverra ut Mauris sagittis fringilla in semper ac dolor massa viverra\n\n466Nunc eget semper. ipsum in\n\n467In, volutpat eget Interdum ligula Sed Mauris\n\n468Consectetur elit. ac eget finibus felis. Vivamus in, massa finibus\n\n469Posuere ac ac volutpat ut ante orci ac condimentum posuere fames ut\n\n470Massa quis, volutpat et ipsum quis, scelerisque sem. dui Mauris dui iaculis. dui\n\n471Ante elit. scelerisque eget quis, est\n\n472Nec pharetra ac Mauris condimentum scelerisque ac ante posuere Interdum\n\n473Efficitur iaculis. aliquam ligula elementum amet, Sed enim primis ipsum viverra elementum\n\n474Ac dolor Integer elit. ut Duis hendrerit bibendum, libero faucibus. rutrum ligula in elit. enim\n\n475Quis, nunc ac elit. fames nunc\n\n476Et Mauris purus hendrerit iaculis. semper. ac malesuada finibus ut eget condimentum lorem in primis\n\n477Molestie primis adipiscing tortor semper tincidunt. in sagittis posuere In felis. ut elit. sit semper.\n\n478Posuere primis molestie scelerisque in sem. ipsum Fusce nec consectetur eget In\n\n479Tortor Mauris faucibus. bibendum, quis,\n\n480Et tortor semper efficitur lorem in est purus ut velit. fringilla semper sem. ac pretium\n\n481Ligula in ante ante consectetur finibus malesuada nunc massa, aliquam\n\n482Et sagittis Sed hendrerit faucibus.\n\n483Est iaculis. pretium malesuada malesuada primis primis nunc\n\n484Eget In sem. in eget felis. tortor hendrerit pretium\nLorem In nec\n\n485Massa viverra pretium aliquam lorem dolor\n\n486Elit. posuere ac bibendum, felis. nec velit. lorem semper. est ante ipsum massa, elit. tincidunt.\n\n487Velit. Sed primis amet, in elementum enim purus in iaculis. semper.\n\n488Vitae elementum quis, bibendum, ante neque.\n\n489Enim orci dolor pharetra Mauris sem.\n\n490Neque. sem. pharetra malesuada Vivamus malesuada\n\n491Efficitur posuere tincidunt. posuere Vivamus ac ante neque. et hendrerit\nLorem ante elementum orci,\nLorem\n\n492Vel finibus primis quis, velit. sem. pharetra in\n\n493Metus viverra quis, Mauris est Fusce eget\n\n494Amet, adipiscing metus felis. ligula\n\n495Vel ante ligula ante Sed ligula ligula\n\n496Orci pharetra eget massa elit.\n\n497Fringilla sem. in et primis tortor Mauris ante ac nunc Ut Ut Interdum felis.\n\n498Aliquam et sit fames Vivamus neque. malesuada iaculis. ac\n\n499Bibendum, tincidunt. ipsum Sed tortor Vivamus et\n\n500Ac molestie Fusce ipsum neque. eget est eget tortor\n\n501Fringilla in lorem molestie adipiscing dui libero lorem\n\n502Finibus ligula ligula faucibus. et posuere est viverra ante\n\n503Efficitur tincidunt. elit. eget adipiscing ac orci est\n\n504Pretium enim sem. fames hendrerit in ligula orci,\n\n505Ac faucibus. Fusce ac tincidunt. semper In Mauris metus sagittis primis ante efficitur efficitur\n\n506Lorem massa, purus Interdum quis,\n\n507Ipsum eget iaculis. nunc elit. volutpat Fusce eget eget Fusce in molestie sem. molestie sem.\n\n508Efficitur ante in libero quis, pretium posuere vel iaculis. Vivamus sagittis massa, fringilla\n\n509Tortor Sed scelerisque lorem in vel posuere et elit. ac malesuada\n\n510Neque. consectetur et felis. adipiscing ante neque. ac Ut pharetra Duis ac\n\n511Neque. Ut ac elementum ipsum rutrum aliquam ante consectetur\n\n512Dolor ante purus Fusce orci, semper. sem.\n\n513Dolor nec Sed ac posuere volutpat ante Integer sem. ante\n\n514Ante rutrum elit. ante consectetur fames\n\n515Tincidunt. finibus adipiscing ac Mauris consectetur purus nec finibus dolor consectetur hendrerit bibendum,\nLorem ut\n\n516Iaculis. sem. rutrum In efficitur et ante malesuada sagittis\n\n517In, ut elementum lorem Vivamus massa, scelerisque nec ac elit. quis, molestie Duis\n\n518Faucibus. ac bibendum, scelerisque scelerisque Integer ligula ipsum quis, viverra sagittis rutrum ante consectetur\n\n519Sem. faucibus. libero enim ante Sed scelerisque in, Fusce malesuada sem.\n\n520Vivamus elementum bibendum, bibendum, ac eget\nLorem amet, ut\n\n521In fringilla In ac ipsum in, volutpat massa dui Vivamus velit. ut faucibus. sit\n\n522Amet, semper vitae Vivamus et\n\n523Semper Fusce pharetra metus consectetur in, dui dolor\n\n524Elementum scelerisque finibus adipiscing consectetur massa, primis eget In pretium\n\n525Quis, Integer fringilla posuere eget ac purus semper fringilla libero massa, hendrerit amet,\n\n526Consectetur Fusce sem. amet, Fusce ligula posuere lorem\n\n527Metus ut orci metus ante\n\n528Est pharetra purus condimentum dolor ac purus semper pretium Ut velit. neque. semper. dolor\n\n529Mauris scelerisque efficitur condimentum lorem\nLorem\n\n530Vitae nec et et dolor ac et in, purus Interdum ipsum ipsum aliquam Integer primis\n\n531Vitae consectetur molestie ut libero Sed ac nec in, elementum primis orci, enim\n\n532Rutrum Vivamus efficitur In malesuada\n\n533Ac ac iaculis. ut felis. finibus consectetur pretium ac\n\n534In aliquam malesuada massa Sed malesuada libero pharetra ipsum efficitur\n\n535Sed dolor enim scelerisque libero dui semper. tincidunt. massa est Sed volutpat ac faucibus.\n\n536Sem. felis. posuere ipsum efficitur vitae massa purus ac faucibus. ac\n\n537Ligula posuere consectetur ligula purus quis, ac primis ipsum fames elementum\n\n538Ut ut ipsum sit eget quis, nunc elit. finibus molestie\n\n539Ligula elit. finibus Integer dolor sit In Vivamus\n\n540Efficitur libero Integer massa malesuada posuere posuere Duis\n\n541Est hendrerit libero primis sagittis efficitur\n\n542Adipiscing Ut amet, enim semper. condimentum In sagittis libero ante In sit Duis In\n\n543Ligula metus massa, ipsum elit. fringilla In sit\n\n544Efficitur condimentum ante consectetur ac in, tortor fames est\n\n545Pharetra felis. ante condimentum in et amet,\n\n546Pharetra ligula ac et velit. finibus amet, velit. rutrum Vivamus nec elit.\n\n547Scelerisque felis. aliquam elit. faucibus. metus nunc metus Vivamus et rutrum In ut\n\n548Sed sem. iaculis. sagittis Sed fringilla primis semper posuere sit ut felis.\n\n549Ac fames in elit. consectetur malesuada Integer tortor lorem volutpat primis\n\n550Orci volutpat molestie malesuada elementum condimentum neque. sit\n\n551Lorem neque. ante orci, metus in semper.\n\n552Bibendum, vitae sem. in efficitur ante fames tincidunt. Vivamus enim\n\n553Libero semper. fringilla pretium ac ante Vivamus posuere metus\n\n554Dolor sit finibus adipiscing neque.\n\n555Ac metus ante posuere Duis\n\n556Ante malesuada neque. purus faucibus. fringilla et eget malesuada in, hendrerit aliquam ipsum Ut\n\n557Sem. orci, ante malesuada neque. tincidunt. dolor ante ante semper Fusce in Sed ut tincidunt.\n\n558Faucibus. semper volutpat orci, adipiscing ac efficitur efficitur volutpat Duis\n\n559Velit. fames ante dui purus\nLorem fames vel massa, Ut\n\n560Velit. molestie nec finibus sagittis ut pharetra neque. et tortor ac\n\n561Hendrerit pretium efficitur nunc Mauris eget condimentum sem. ut\n\n562Eget et consectetur condimentum tincidunt.\n\n563Ut malesuada dui Ut metus In ut ipsum\n\n564In Integer Integer massa est nunc et hendrerit\nLorem pretium ante\n\n565Ante Sed consectetur metus elementum lorem velit. pharetra rutrum ante ac condimentum velit. ac\n\n566Consectetur adipiscing faucibus. quis, ligula nunc vitae\n\n567Purus in Ut viverra ut in adipiscing enim ligula Interdum et Duis consectetur\n\n568In elit. In ante ipsum Vivamus adipiscing neque. consectetur\n\n569Enim elit. ac quis, consectetur malesuada tortor ac velit. purus Ut fames efficitur iaculis.\n\n570Quis, faucibus. in ipsum in efficitur elit. vel sem. posuere semper neque.\n\n571Fringilla Mauris scelerisque et Mauris Integer est posuere quis,\n\n572Faucibus. in eget efficitur tortor adipiscing tortor bibendum, efficitur ut neque. hendrerit\n\n573Orci, ligula tincidunt. purus nunc bibendum, sit aliquam ut Interdum libero consectetur Ut\n\n574Orci, faucibus. felis. neque. malesuada aliquam dolor consectetur pharetra\n\n575Sem. quis, et ante fames tincidunt. sem. massa, pharetra massa enim dolor posuere quis, ac\n\n576Elit. in ipsum ipsum Mauris Vivamus elementum libero\n\n577Semper ac purus Integer semper. fames amet,\n\n578Ac viverra in, massa,\nLorem Fusce\n\n579Fringilla Vivamus eget tincidunt. Ut Mauris ac malesuada sagittis ipsum Integer dui ipsum\n\n580Ipsum massa, orci, elit. ipsum semper. est ante libero nec orci, nunc hendrerit consectetur\n\n581Scelerisque vitae scelerisque ligula enim nec amet,\n\n582Ac ligula volutpat Ut\nLorem\n\n583Dui orci aliquam hendrerit vitae Mauris efficitur consectetur aliquam orci,\n\n584Efficitur pretium hendrerit ligula adipiscing tortor\n\n585Ut pretium Interdum sagittis Fusce et ac in, ante\n\n586Ante Interdum in ac in\n\n587Posuere ipsum Integer orci, Vivamus molestie ante in, efficitur dui ut elementum libero\n\n588In faucibus. ut ac purus semper. In nunc ante\n\n589Ipsum pretium velit. adipiscing in tincidunt.\n\n590Massa in, sem. libero elit. pretium semper. sem. dolor Ut fames In eget et\n\n591Ut ut faucibus. ante faucibus. dolor dolor finibus sit hendrerit semper\n\n592Efficitur ac in, faucibus. sem. adipiscing\n\n593In malesuada Duis tincidunt. enim consectetur elementum eget vitae ante\n\n594Semper. ac ut semper. ipsum et molestie felis. bibendum, scelerisque massa\n\n595Metus bibendum, rutrum fringilla eget sagittis sagittis Sed eget Mauris\nLorem Vivamus enim\n\n596Interdum ac nunc velit. Vivamus massa, ante semper efficitur viverra in, volutpat Mauris sagittis\n\n597Fringilla tincidunt. In hendrerit ipsum vitae\n\n598In nunc elementum ante in ligula lorem\n\n599Ipsum dolor fringilla in sagittis\n\n600Sagittis ac nec sagittis volutpat enim velit.\n\n601Sem. fringilla dui condimentum enim et efficitur\n\n602In efficitur massa metus finibus iaculis. bibendum, condimentum ac et ante\n\n603Vitae molestie malesuada fames sem. dui ac quis, orci Interdum purus elit.\nLorem consectetur\n\n604Ipsum bibendum, sem. massa elementum metus vitae et Vivamus scelerisque vitae vel\n\n605Sed in hendrerit elementum malesuada ac fames\n\n606Libero hendrerit primis nec eget elit. sagittis ante consectetur massa condimentum orci ipsum In rutrum\n\n607Ac Vivamus orci, orci, sit iaculis. condimentum velit. tincidunt. hendrerit hendrerit tincidunt.\n\n608Duis elit. adipiscing tortor rutrum Duis ut amet,\n\n609Orci, In et sit vel primis ante consectetur rutrum libero\n\n610Iaculis. aliquam eget dolor massa, hendrerit bibendum, in,\n\n611Primis ut ipsum tortor rutrum in ac dolor et vel\n\n612Ut sit dui quis, condimentum\n\n613Sem. adipiscing iaculis. pretium ac sit efficitur ipsum neque. metus\n\n614Condimentum metus aliquam efficitur tortor consectetur Interdum in ante lorem\n\n615Ante libero fringilla in, Sed elit. orci adipiscing Mauris\n\n616Condimentum pharetra bibendum, in tincidunt. purus quis, tortor aliquam ante semper. condimentum Sed massa\n\n617Consectetur ligula elit. elementum massa, sit ante consectetur\n\n618Hendrerit Interdum consectetur Fusce lorem In fringilla eget vitae quis, consectetur in quis, ac\n\n619Efficitur aliquam lorem elit. ut primis pretium scelerisque\n\n620Purus massa, Fusce ut amet, Fusce molestie efficitur dui\n\n621Massa Interdum posuere adipiscing elit. et ante purus quis, felis.\n\n622Finibus\nLorem neque. faucibus. purus\n\n623Mauris eget finibus massa sagittis\n\n624Aliquam ante Vivamus elementum Duis neque. fames molestie et posuere metus iaculis. ac\n\n625Primis fringilla in, aliquam Vivamus ut Duis malesuada adipiscing finibus posuere Integer metus Duis fringilla\n\n626Rutrum Sed vel amet, faucibus. efficitur massa, ac aliquam est ipsum sit scelerisque eget\n\n627Ante enim aliquam\nLorem bibendum,\n\n628Integer ac elementum vitae sit finibus scelerisque elementum elit. malesuada scelerisque Fusce vel ac quis,\n\n629Efficitur pharetra vel ante massa, velit.\n\n630Duis iaculis. eget pharetra pharetra nunc ac iaculis. massa, ligula ante\n\n631Lorem elit. Duis dolor viverra in\n\n632Neque. semper orci ante enim efficitur in, molestie malesuada efficitur bibendum, ante quis, libero\n\n633Ut in est faucibus. quis, ante et pretium sit volutpat semper orci, elementum bibendum, elit.\n\n634Ac faucibus. bibendum, Integer molestie fringilla neque. Fusce massa, consectetur sit in ac dui\n\n635Ac ut efficitur orci Duis posuere purus posuere et ante velit.\n\n636Ut\nLorem pharetra metus nec In ac primis consectetur\n\n637Tortor orci, ante fames libero in, aliquam ante volutpat\n\n638Efficitur hendrerit libero primis vitae Interdum primis\n\n639Tincidunt. bibendum, sem. purus elementum\n\n640\nLorem aliquam velit. eget Duis elementum in\n\n641Posuere in orci, scelerisque Integer in, ut pharetra\n\n642Mauris iaculis. felis. sagittis In adipiscing vitae Fusce consectetur elementum ut Fusce felis. in nunc\n\n643Consectetur consectetur neque. eget ac vel Ut ante ipsum viverra orci, finibus\n\n644Fringilla Interdum efficitur purus sagittis ac tincidunt. consectetur ante fringilla efficitur Fusce efficitur\n\n645Viverra orci enim condimentum vitae scelerisque\n\n646In ut orci eget ante consectetur malesuada ipsum tortor adipiscing libero\n\n647Eget sagittis lorem ac Mauris orci, Integer Fusce bibendum, est ut ligula\n\n648Ipsum sem. scelerisque nunc ut dolor ac semper In orci, Integer quis, rutrum\n\n649Ut amet, Fusce ligula ipsum eget molestie ante fames posuere Mauris faucibus. viverra ac eget\n\n650Ante semper eget sit et orci, massa Sed fringilla\n\n651Iaculis. massa in fames ipsum lorem\n\n652Sem. Duis efficitur primis molestie ac neque. pharetra fringilla et\n\n653Neque. rutrum semper. aliquam est posuere neque. in primis fringilla\n\n654Velit. in ac vitae Integer scelerisque\n\n655Adipiscing sem. ut Duis elit.\n\n656Hendrerit finibus Duis et Mauris in rutrum bibendum, in, dolor purus\n\n657Malesuada sit molestie orci orci Integer fames consectetur rutrum amet, Vivamus et neque.\n\n658Eget felis. ipsum ante Vivamus sagittis Sed ligula quis, sit aliquam\n\n659Ac orci, Interdum sit est massa\n\n660Tincidunt. ac in, vel ante sagittis massa, ac ligula vel consectetur massa amet, volutpat rutrum\n\n661Aliquam quis, pretium nunc hendrerit vitae\n\n662Bibendum, massa\nLorem lorem in, vitae\n\n663Hendrerit elit. Mauris volutpat lorem primis primis volutpat nec purus Integer posuere ut viverra libero\n\n664Iaculis. elit. In scelerisque amet,\n\n665Bibendum, est et iaculis. scelerisque\n\n666Efficitur ligula primis ligula orci rutrum Ut ante metus rutrum felis. Sed ipsum\n\n667Semper ac Sed Mauris scelerisque enim sagittis metus\n\n668Felis. viverra fringilla consectetur Sed sit metus molestie semper.\n\n669In in, tincidunt. volutpat scelerisque\n\n670Viverra nunc viverra ac ac vitae\n\n671Sagittis orci pharetra rutrum Fusce orci rutrum tincidunt. in, vel\n\n672Pretium quis, in enim nunc ante felis. semper. pharetra sagittis sagittis eget Integer est\n\n673Ante metus sit ligula fames felis. efficitur enim ante ipsum pharetra ipsum felis.\n\n674Orci neque. semper faucibus. eget Fusce et iaculis. elit. aliquam libero\n\n675Ante ut in viverra viverra\n\n676Pretium amet, nec volutpat In est tincidunt. elit. consectetur in malesuada malesuada\n\n677Eget ante semper. enim in sagittis ac Integer pharetra molestie felis. elit. eget\n\n678Est sem. semper. Integer ut in, fringilla\n\n679Adipiscing semper in sem. Sed massa massa,\nLorem massa, nec vel bibendum, elit.\n\n680Rutrum tortor ac ac in elit. ac volutpat metus et\nLorem dui in, tincidunt.\n\n681\nLorem in Duis felis. vel semper. neque. elit. efficitur ante metus Duis\n\n682Metus massa enim iaculis. condimentum\n\n683Aliquam malesuada Mauris elit. ligula\n\n684Eget ac viverra Interdum nunc vitae viverra iaculis. amet, semper fringilla\n\n685Amet, condimentum ac elit. sem. ante sit semper. ac iaculis. metus bibendum,\n\n686Ante pharetra tortor ipsum condimentum velit. enim in elit. efficitur in\n\n687\nLorem elit. orci aliquam semper bibendum, sit ut massa, In condimentum neque. in\n\n688Sit Mauris sit efficitur\nLorem semper. elit.\n\n689Tincidunt. enim quis, finibus pretium eget ut In est aliquam\n\n690Elit. Interdum elit. consectetur efficitur metus ligula sem. consectetur orci, ante\n\n691Efficitur Interdum lorem ac In semper condimentum felis.\n\n692Faucibus. orci ante Mauris ante efficitur In pharetra felis.\n\n693Primis In in, orci, dolor pretium Duis elementum Sed ipsum fringilla in ac\n\n694Sit nec ipsum Duis eget Mauris Duis rutrum sagittis\n\n695Est massa Integer purus massa, elit. Duis finibus malesuada efficitur metus ante\nLorem molestie tincidunt.\n\n696Ante orci, sem. dui finibus ipsum elementum eget adipiscing\nLorem vel nunc\n\n697Fringilla est consectetur scelerisque Interdum dui ante iaculis. condimentum elit.\n\n698Nec fringilla Duis purus enim malesuada nec viverra\n\n699Massa, ac ut purus nec finibus posuere quis, In felis.\n\n700Et pretium ante ante scelerisque condimentum ac ante eget In ante\n\n701Bibendum, In consectetur semper. pretium consectetur iaculis. faucibus. bibendum, eget\n\n702Purus ut efficitur ante eget ac massa et ante lorem dolor Interdum aliquam\n\n703Eget molestie Integer Vivamus ipsum\n\n704Massa semper. pretium eget vitae pretium\n\n705Ac ligula consectetur elit. bibendum, tincidunt. faucibus. pharetra in bibendum,\n\n706Consectetur in aliquam iaculis. elit. ac ipsum purus est ante vitae\n\n707Fringilla finibus volutpat ac ac pharetra pretium sem. rutrum ipsum Fusce\n\n708Et dolor massa fringilla sit\n\n709Dolor ac Ut ac hendrerit eget lorem libero massa, molestie metus Interdum vel\n\n710Fames dui in ligula semper tincidunt.\n\n711Sagittis massa Mauris in, Vivamus consectetur neque.\nLorem\nLorem nec ac Sed ut\n\n712Orci dolor pharetra Fusce ipsum iaculis. efficitur in et consectetur molestie ipsum purus\n\n713Scelerisque est semper lorem Mauris enim\n\n714Neque. ante aliquam enim elit. fringilla semper velit.\n\n715Volutpat fames Fusce enim semper volutpat nec\n\n716Massa, pharetra pharetra condimentum metus vitae ipsum Ut tincidunt. lorem ut posuere\n\n717Quis, neque. nunc orci, fringilla viverra ac eget\n\n718Dolor bibendum, eget molestie ante volutpat elementum nec quis, Mauris\n\n719Orci iaculis. pretium tincidunt. ac sagittis in, efficitur Mauris amet, ante\n\n720Vivamus purus libero ligula fames\n\n721In, Vivamus et in, nunc ipsum efficitur felis. massa, tincidunt. ac Integer nec\n\n722Iaculis. libero tortor tincidunt. Integer primis massa et fames finibus ipsum\n\n723Efficitur orci, fringilla orci, Sed lorem Duis ac consectetur condimentum sit in\n\n724Semper. ac\nLorem aliquam Fusce fames finibus\n\n725Volutpat ipsum eget posuere tincidunt.\nLorem ac dolor fames\n\n726Volutpat et consectetur et finibus orci vel\n\n727Integer ante sem. est libero massa, tortor ac enim semper ligula neque.\n\n728Iaculis. felis. tincidunt. velit. molestie\n\n729In Interdum in semper. viverra rutrum consectetur ipsum\n\n730Ligula neque. amet, eget aliquam enim felis. Interdum in, purus\n\n731Enim scelerisque enim quis, ac dui\n\n732Massa, orci, Interdum orci fames ante efficitur eget consectetur\n\n733Quis, nunc vel sit faucibus. felis. ligula ut lorem velit. in tincidunt. aliquam\n\n734In finibus consectetur in lorem massa consectetur orci, posuere viverra Vivamus volutpat velit. enim et\n\n735Sem. consectetur semper vel neque. massa, quis, fringilla ante eget posuere libero bibendum, malesuada sit\n\n736Fames vel molestie molestie ac elit.\n\n737Amet, metus elementum metus consectetur orci adipiscing\n\n738Condimentum condimentum eget et lorem Sed massa eget\n\n739Tortor lorem Interdum dui In lorem Fusce ligula faucibus. sagittis Duis in in Mauris metus\n\n740Ac semper. tortor ante lorem Mauris Mauris scelerisque dolor\n\n741Ac vel sagittis in malesuada consectetur dolor efficitur consectetur massa, ac iaculis.\n\n742Viverra iaculis. tortor est et in eget posuere rutrum dolor scelerisque tortor\n\n743Mauris et massa condimentum Interdum elementum pretium rutrum vitae Duis in Vivamus sit In\n\n744Aliquam iaculis. dui tortor in viverra ac consectetur iaculis.\n\n745Velit. neque. ut consectetur adipiscing\n\n746Efficitur nec massa, est Sed eget in Duis ipsum ligula\n\n747Volutpat in, orci, massa, Fusce ante posuere scelerisque nec scelerisque\n\n748Integer semper lorem nec molestie ac fringilla viverra est\n\n749Tincidunt. elementum ante Fusce amet, libero\n\n750Lorem orci elit. Sed faucibus. ante consectetur metus ante fringilla massa,\n\n751Massa quis, Duis vel ipsum massa adipiscing dolor elit. consectetur ipsum\n\n752Vitae ac posuere velit. faucibus. enim felis. sit orci ligula purus consectetur semper\n\n753Pretium Vivamus tortor rutrum iaculis. dolor Duis scelerisque dolor amet,\n\n754Purus Vivamus sagittis consectetur bibendum, tortor elit. felis. scelerisque lorem ac et\n\n755Ac faucibus. ac ante ligula neque. libero tincidunt. ipsum metus nunc sagittis Sed Sed\n\n756Ipsum In ac ipsum molestie lorem orci, aliquam aliquam\nLorem molestie metus\n\n757Elit. Integer libero malesuada faucibus. faucibus.\n\n758Fringilla dui Fusce dui vel fringilla orci eget\n\n759Massa Sed ac condimentum fames sem. Fusce amet, ac Interdum consectetur orci, Duis\n\n760Efficitur vitae iaculis. Duis scelerisque aliquam amet, enim efficitur hendrerit ut ipsum pharetra\n\n761Consectetur elit. volutpat orci, sit\n\n762Ac ante neque. hendrerit amet, pretium hendrerit efficitur quis, sagittis\n\n763Orci, Ut sit sit malesuada ante\n\n764Primis iaculis. velit. semper. sit enim pretium elit.\n\n765Fames fames vel Integer hendrerit et vel ipsum fames in ut semper. In Mauris scelerisque\n\n766Tortor Integer aliquam elit. quis, sagittis Integer ligula neque. vitae dui rutrum\nLorem ante vitae\n\n767Interdum nec Fusce condimentum felis. felis.\n\n768Est consectetur condimentum dui in metus semper adipiscing\n\n769In ligula efficitur adipiscing ut ligula tortor viverra\n\n770Pharetra Interdum efficitur iaculis.\nLorem consectetur\n\n771Orci, Ut Ut adipiscing velit. felis. ac est faucibus. faucibus. elit.\n\n772Velit. malesuada Vivamus sit efficitur eget faucibus. efficitur\n\n773Duis efficitur ut molestie sagittis in semper\n\n774Ante efficitur amet, enim neque. Sed\n\n775Ut libero neque. ut volutpat Interdum efficitur in tortor Sed sem. efficitur tortor\n\n776Et hendrerit in ligula felis. elit. semper sagittis orci,\n\n777Semper. massa Interdum bibendum, orci rutrum molestie fames molestie bibendum, est efficitur semper nunc\n\n778Duis Ut Ut scelerisque\nLorem massa\n\n779Dui Sed fringilla est massa adipiscing bibendum, in semper. primis rutrum condimentum semper. in orci\n\n780Duis orci, viverra elementum ante hendrerit adipiscing velit. finibus orci ipsum hendrerit\n\n781Vitae ac vel In ac pretium et ipsum Integer dui aliquam rutrum elit. hendrerit\n\n782Sit ante Ut scelerisque ante adipiscing ligula est orci,\n\n783Felis. efficitur velit. Sed massa, et est scelerisque massa ac consectetur\n\n784Iaculis. in Mauris rutrum ut tortor tincidunt. molestie viverra orci, enim\n\n785Elit. et consectetur fames sagittis molestie Integer elit. ante massa, vitae efficitur ipsum dui\n\n786Quis, malesuada ipsum nunc ac sem. Fusce quis, vitae felis. eget in finibus massa\n\n787Purus elementum tortor Interdum consectetur amet, et elit. metus et neque. ante\n\n788Ac nec ac adipiscing sem. semper. sagittis fringilla nunc ut nunc sit lorem\n\n789Quis, orci, fames ante Interdum Ut hendrerit vitae ante libero\n\n790Vel ut pretium semper. fames massa Duis metus Ut elit. ante\n\n791Scelerisque ac vel fringilla malesuada elit. ipsum ante semper ante ut\n\n792Efficitur finibus sem. et massa\n\n793Aliquam ante amet, semper. condimentum\n\n794Posuere faucibus. iaculis. fames ut massa, malesuada\n\n795Interdum bibendum, sem. neque. Mauris\nLorem felis. elit. enim Ut Interdum In semper.\n\n796Libero primis adipiscing orci, ac Ut\n\n797Lorem scelerisque eget Fusce et enim sit\nLorem\n\n798Et volutpat fringilla sagittis est amet, finibus fames enim vitae viverra ac\n\n799Malesuada Vivamus iaculis. felis. consectetur semper metus orci, molestie in faucibus. in\n\n800Viverra hendrerit dolor nunc Mauris volutpat primis sem. eget orci, orci lorem finibus semper\n\n801Fames neque. metus libero scelerisque\n\n802Nec Interdum fringilla ipsum primis fringilla et libero fames efficitur posuere elit.\n\n803Enim metus et Mauris neque. adipiscing posuere quis, et metus in, lorem elementum\n\n804Rutrum amet, eget nec ligula efficitur viverra ante\n\n805Efficitur rutrum ligula in, in rutrum enim\n\n806Sagittis scelerisque sit ut ut ac in, fames sagittis\n\n807In in efficitur libero sem. in consectetur\n\n808Pretium faucibus. ac fames sagittis orci, pretium\nLorem ac massa Sed\n\n809Fringilla in vitae sit Vivamus Duis semper\n\n810Volutpat tincidunt. neque. ac in nec adipiscing ante eget Fusce efficitur ac\n\n811Tortor dui libero in, ut velit. hendrerit adipiscing vitae in neque. ante ut\n\n812Eget libero Ut bibendum, ac semper. adipiscing elit. felis. in, tortor sit posuere\n\n813Velit. et ipsum sem. scelerisque lorem ac\n\n814Posuere primis vel quis, semper fringilla vitae et sem. hendrerit orci, elit. adipiscing In hendrerit\n\n815Scelerisque pretium posuere metus libero in in libero finibus Duis Interdum\n\n816Ac In Sed condimentum ut primis enim purus dui dolor est eget ac vel Mauris\n\n817Sagittis tincidunt. amet, dolor amet,\n\n818Duis consectetur Interdum pharetra viverra Fusce vitae ligula\n\n819Vivamus faucibus. Ut enim aliquam est in, aliquam enim\n\n820Sem. eget eget aliquam ut nec\n\n821Rutrum ante Fusce volutpat condimentum libero semper quis, aliquam viverra orci, quis, viverra massa\n\n822Sed elit. iaculis. Vivamus Fusce in molestie eget sem. ac Interdum condimentum et fringilla\n\n823Bibendum, libero orci, consectetur Interdum bibendum, semper.\n\n824Pretium adipiscing ipsum velit. ligula amet, felis. semper. ut lorem elit. ut\n\n825Eget et et Duis fringilla ac et\n\n826Sagittis Vivamus adipiscing ac massa\n\n827Velit. Fusce volutpat semper ligula purus rutrum Ut efficitur ut fringilla enim\n\n828Velit. efficitur finibus felis. sit Ut Vivamus volutpat nunc elit. sagittis Fusce\n\n829Eget Interdum Ut eget viverra Duis ipsum viverra libero condimentum in\n\n830Est dui rutrum massa, tortor adipiscing orci, in\n\n831Consectetur ante fringilla orci libero vel iaculis.\n\n832Metus scelerisque consectetur consectetur ipsum elit. Duis ut semper molestie ac ac faucibus. ante ante\n\n833Rutrum amet, dolor in nunc sagittis Ut libero in elit. primis lorem scelerisque\n\n834Orci, Fusce lorem amet, ante efficitur consectetur vitae\nLorem dolor velit.\n\n835Ac vitae bibendum, orci, velit. in\n\n836Pharetra eget et Vivamus pretium condimentum consectetur tortor aliquam dui malesuada amet, scelerisque\n\n837Eget massa, adipiscing lorem in amet,\n\n838Et eget Duis purus consectetur in malesuada volutpat enim Vivamus ante scelerisque semper.\n\n839Ligula consectetur molestie Integer efficitur malesuada In Sed ac rutrum\n\n840Purus elit. malesuada volutpat pharetra orci elit. efficitur aliquam nec felis. felis.\n\n841Sed orci, faucibus. metus dolor condimentum eget ac semper. ante Mauris primis pharetra\n\n842Eget faucibus. vitae dolor volutpat bibendum, tortor efficitur nunc efficitur ligula aliquam Integer consectetur\n\n843In massa In elementum ipsum quis, condimentum vel libero\n\n844Massa, ut scelerisque finibus Interdum orci, malesuada\n\n845Amet, faucibus. consectetur amet, pharetra iaculis. lorem semper\n\n846Ipsum et ac purus aliquam in, ac dolor Integer volutpat efficitur Duis Integer\n\n847Felis. rutrum neque. ipsum Interdum ac in consectetur felis. consectetur efficitur\n\n848Purus ac neque. molestie sagittis metus tortor Duis In\n\n849Ut tincidunt. neque. condimentum semper. ipsum\n\n850Iaculis. in in adipiscing Vivamus ut scelerisque fames Fusce eget ligula vel\n\n851Quis, massa in nec ac\n\n852Mauris metus metus in, Vivamus ligula iaculis. ipsum libero efficitur orci nec amet, fames tortor\n\n853Amet, tortor hendrerit in faucibus. fringilla in, in, nec molestie sem. tincidunt. ipsum\n\n854Sem. pretium In nec finibus rutrum dui rutrum\n\n855Ut pharetra\nLorem Fusce finibus in, hendrerit Vivamus ut pretium lorem pharetra Sed finibus efficitur\n\n856Et iaculis. fames et amet, bibendum, fames\n\n857Ante Vivamus nec fames consectetur in, massa enim nec Integer finibus adipiscing orci, scelerisque ipsum\n\n858Elit. bibendum, In eget volutpat est hendrerit lorem In Integer\n\n859Faucibus. malesuada sit nec\nLorem\n\n860Eget malesuada nunc elit. Vivamus adipiscing\n\n861Velit. vitae nunc vel purus est Vivamus volutpat In fames Vivamus pretium ut\n\n862Orci volutpat ipsum purus ipsum\n\n863Ipsum semper. ipsum viverra neque. primis rutrum ante et est Fusce\n\n864Integer ligula consectetur in Integer libero Duis efficitur in elit.\nLorem ligula vel\n\n865In, neque. nec Sed ac nunc sit rutrum semper. condimentum ut hendrerit\n\n866In, Sed quis, adipiscing enim metus Sed elit. tortor sagittis\n\n867Sit vitae et in, libero bibendum, sit ipsum\nLorem nec ante neque. ac\n\n868Dolor adipiscing posuere dui est et neque. elit. enim dolor efficitur semper primis metus Integer\n\n869Ut In semper tincidunt. posuere elit. volutpat bibendum, est ac libero orci\n\n870Bibendum, finibus tortor finibus in Vivamus ac iaculis. primis condimentum et vel\n\n871In ac ante molestie et primis ac iaculis. Integer Sed fames ac\n\n872Condimentum elit. massa, tortor sagittis eget dolor purus ac condimentum pretium in tincidunt.\n\n873Ante et neque. ligula ac in, semper. massa et primis\n\n874Sem. dolor dui primis rutrum neque. Mauris elementum\n\n875Elementum orci, libero\nLorem neque. nec et consectetur bibendum, Interdum massa, libero ac\n\n876Sagittis vel volutpat Vivamus Duis fames Interdum faucibus. elit. Duis\n\n877Libero metus et lorem fames sit ac adipiscing vel Integer malesuada tortor efficitur nunc\n\n878Tincidunt. consectetur et lorem purus bibendum, condimentum ante ac\n\n879Bibendum, et semper purus Mauris molestie massa,\nLorem eget ante\n\n880Efficitur posuere est ac eget eget Ut aliquam elementum Duis orci, hendrerit ac\n\n881Ut hendrerit tortor faucibus. sagittis dui tortor tortor aliquam iaculis. Vivamus tortor\n\n882Ac ac ipsum ante massa posuere ac velit. et fames faucibus. iaculis. viverra\n\n883Sit finibus felis. orci, Integer ac purus consectetur metus\n\n884In tortor consectetur sit sagittis malesuada orci, ut consectetur nec in Fusce elementum viverra\n\n885Eget pretium Sed velit. ac\n\n886Vivamus felis. Vivamus elit. condimentum purus sagittis tincidunt. Sed sit ut amet,\n\n887Et finibus ante iaculis. efficitur elit. elit. ligula sit malesuada ligula purus\n\n888Enim hendrerit sit ut Vivamus vel massa faucibus. Sed elementum\n\n889Libero ac ut elit. enim ut tortor molestie libero molestie\n\n890Sit posuere massa libero in volutpat Interdum lorem Duis ante\n\n891Posuere Mauris consectetur elementum elit. pharetra elit. iaculis. Duis\n\n892Ac ligula orci dui consectetur Mauris ante pharetra est elementum\n\n893Purus efficitur massa in consectetur\n\n894Neque. ipsum ac pharetra vel\n\n895Finibus pretium ligula ac ante amet, Ut ac Sed felis. massa elit. Integer in\n\n896Ut primis posuere ut aliquam neque. massa faucibus. elit. et in ac\n\n897Et eget in eget purus pretium volutpat eget semper. felis. semper molestie\n\n898Eget ac orci nunc libero viverra ac nec\n\n899Et condimentum hendrerit in ante ipsum dui pharetra\n\n900Purus vel in et in ipsum posuere consectetur Integer\n\n901Ante quis, est fames in elit. ipsum felis. orci Integer\nLorem orci faucibus. ligula\n\n902Nec felis. finibus sem. ante eget rutrum efficitur dui consectetur vel felis. tincidunt.\n\n903Semper purus elementum pharetra ut volutpat Sed primis\n\n904Consectetur ligula elit. Mauris bibendum, tortor semper hendrerit efficitur sit\n\n905Est ipsum et sem. Ut metus\n\n906Ac nunc elit. posuere Integer volutpat eget\n\n907Ante In elit. est sem. in iaculis. viverra Ut dolor tincidunt. adipiscing in purus\n\n908Integer volutpat metus orci, Fusce est nunc in\n\n909Malesuada Integer molestie Duis amet,\n\n910In ac elementum ut Interdum libero\n\n911Sed massa, ut consectetur semper metus semper condimentum sagittis ut\n\n912Metus faucibus. scelerisque metus In et ligula condimentum ipsum\n\n913Orci, quis, amet, ac libero viverra nec Interdum eget ut ante elementum massa, sem. faucibus.\n\n914Ante volutpat in aliquam eget faucibus. sagittis fringilla orci\n\n915In, fames nunc sagittis Ut\n\n916Aliquam Integer pretium Ut dui fames\n\n917Pretium lorem Ut ac quis, massa, ipsum bibendum, bibendum, volutpat Fusce Ut Ut elementum elementum\n\n918Sagittis tincidunt. vitae tincidunt. libero condimentum hendrerit molestie ipsum ac et elit. condimentum\n\n919Amet, Fusce tortor volutpat ac Duis posuere\nLorem elit.\n\n920Ut ligula dolor efficitur Ut fringilla efficitur ante Vivamus elit. nunc sit faucibus. scelerisque\n\n921Iaculis. ac fames aliquam ac tortor ipsum libero efficitur\n\n922Eget faucibus. In molestie faucibus. dolor scelerisque in ipsum Duis\n\n923Ante\nLorem vel rutrum primis finibus enim\n\n924Lorem efficitur amet, pretium consectetur sagittis fringilla efficitur efficitur sit pharetra Integer\n\n925Aliquam Ut metus viverra sit pharetra quis, efficitur semper. in vel ut posuere ante\n\n926Viverra in scelerisque malesuada ac\n\n927Ac vel eget dui ac volutpat in, viverra ac orci, neque. malesuada Interdum\n\n928Velit. fames Interdum sit posuere Ut libero\n\n929Semper dolor rutrum eget ipsum\n\n930Amet, primis posuere pharetra efficitur massa, volutpat in, aliquam elit. faucibus. ante Ut In massa\n\n931In vitae viverra posuere efficitur ante tortor\n\n932Fames malesuada elit. Vivamus ipsum rutrum lorem iaculis. Mauris Duis ac scelerisque elit. rutrum\n\n933Ipsum aliquam consectetur sem. in ut velit. ut\n\n934Mauris ipsum Integer Sed Mauris consectetur\n\n935Et faucibus. bibendum, elit. consectetur\n\n936In vel In Interdum massa\n\n937Vitae ac elementum sit semper. orci elementum purus efficitur tortor et tincidunt.\n\n938Nunc rutrum est felis. ante faucibus. quis, molestie posuere molestie ac Interdum\n\n939Et quis, amet, ac massa consectetur enim consectetur rutrum scelerisque Sed ipsum\n\n940Fusce Interdum libero rutrum libero molestie nec ut consectetur lorem lorem\n\n941Consectetur dolor orci posuere elit. enim ante molestie\n\n942Felis. in in, faucibus. molestie scelerisque velit. ac eget in primis efficitur malesuada fames\n\n943Felis. fringilla ac in, condimentum eget lorem ante ut massa fames eget enim finibus\n\n944Tortor Duis dui finibus orci, Fusce in ligula Vivamus Fusce lorem rutrum\n\n945Sem. in elementum pretium rutrum sit aliquam libero\n\n946Finibus ante pretium ante elementum ac\n\n947Ante ac elit. fames fringilla efficitur velit. ligula Integer\n\n948Elit. dui dolor In orci, fringilla ac efficitur ac nec elementum ac in, bibendum, sit\n\n949Ac massa est eget pretium ipsum ac consectetur purus ante viverra ut est sem. orci\n\n950Sed metus condimentum ipsum semper. posuere consectetur Sed sagittis lorem in quis, purus iaculis. scelerisque\n\n951Molestie massa, velit. ut efficitur rutrum dolor hendrerit neque. Sed orci, amet,\n\n952In amet, Fusce elementum elit. felis. ante est in\n\n953Dui semper faucibus. amet, ut aliquam In in Interdum eget ac\n\n954Orci, elit. ante ante elit. enim elit. et et metus\n\n955Eget orci Duis enim dolor ac\n\n956Tincidunt. eget efficitur scelerisque volutpat orci, Mauris in aliquam primis iaculis. amet, elementum enim\n\n957Hendrerit fames est vel velit. Integer in,\n\n958Mauris Interdum Mauris pretium ipsum adipiscing Ut fames hendrerit bibendum, ante fames neque. ante\n\n959Iaculis. molestie elit. pretium est ipsum\n\n960Primis fames quis, scelerisque Duis ut ante ac semper ut tincidunt. amet, orci, aliquam scelerisque\n\n961Primis bibendum, ante enim Mauris in ipsum hendrerit fringilla Interdum eget ut ipsum pretium orci,\n\n962Ante enim finibus velit. vitae velit. orci,\n\n963Integer orci ut amet, fringilla condimentum eget semper. scelerisque tortor\n\n964Felis. libero est ipsum efficitur ut tincidunt. ipsum Ut ipsum viverra malesuada rutrum\n\n965Lorem ante Interdum posuere viverra adipiscing efficitur In\n\n966Aliquam Sed condimentum ante ac velit.\n\n967In ut massa, pretium volutpat\n\n968Sed libero fames fringilla metus\n\n969Scelerisque tincidunt. lorem massa, amet, In\n\n970Amet, finibus ut ligula ligula ac metus\n\n971Amet, enim massa, ac ac ac Interdum\n\n972Ipsum ac ipsum semper pharetra nec efficitur tortor est tincidunt. Mauris ante\n\n973Ante viverra eget faucibus. Fusce sagittis eget Vivamus orci finibus rutrum iaculis. fames\n\n974Purus Fusce sagittis in, lorem neque. orci, molestie ac\n\n975Consectetur eget et malesuada libero Integer eget ut\n\n976Ante Interdum in fames elit. lorem ligula adipiscing\n\n977Et aliquam primis neque. amet, elementum eget Sed vitae\n\n978Et velit. ac vel ante ipsum viverra finibus sagittis fames ac eget consectetur libero ac\n\n979Tortor in scelerisque fringilla faucibus. sit primis\n\n980Hendrerit ac ante malesuada pharetra\n\n981In, vitae Ut iaculis. iaculis. in\nLorem finibus purus ac orci\n\n982Ac rutrum iaculis. iaculis. velit. Fusce et eget ut Sed Vivamus\n\n983Sagittis faucibus. pretium ante tincidunt. ante molestie dui malesuada Mauris orci ante elit. pharetra ipsum\n\n984Est iaculis. est et sit Vivamus in, primis elit. sem. efficitur libero orci consectetur\n\n985Est posuere Fusce hendrerit consectetur aliquam Mauris in tincidunt. nunc orci Fusce\n\n986Purus rutrum in est\nLorem Sed ligula\n\n987Ipsum sem. rutrum metus tortor\n\n988Hendrerit massa sit condimentum enim bibendum, hendrerit ante elit. metus orci metus scelerisque\n\n989Ac molestie semper consectetur efficitur\n\n990Duis ipsum in pharetra nec\n\n991Primis Integer orci, efficitur massa volutpat iaculis. ante ipsum\n\n992Ligula volutpat libero quis, rutrum massa massa, dui\n\n993Primis ligula iaculis. massa, viverra eget vitae est ligula massa\n\n994Fames metus fames Mauris lorem consectetur ante\nLorem in\n\n995Elit. Ut malesuada malesuada consectetur sagittis vitae semper. semper. in ante ipsum Mauris tincidunt. Duis\n\n996Dui consectetur ipsum condimentum dui nunc\n\n997Viverra elit. pharetra ut ipsum orci In Vivamus sem. amet, scelerisque felis. ligula et in\n\n998Volutpat molestie eget ante ante In est sagittis primis\n\n999Orci, tincidunt. bibendum, libero neque. ante finibus ut iaculis. faucibus.\n\n1000Ante ut libero massa In Fusce In\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | — | — |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | — | — |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | — |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | — | — |",
     "category": "Components",
     "section": "Selection",
     "boost": "Dropdowns components/dropdowns #components/dropdowns Components Selection"
@@ -364,7 +364,7 @@
     "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. |",
+    "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!\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.\nEditable content using a resizable textarea\nThis text can be edited on multiple lines\nFocusable editable content with input validationThis content must not contain numbers.\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.`;\nRender NumberControl as custom editor component\n234\nRender NumberInput as custom editor component with input validation\n234\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.",
     "category": "Components",
     "section": "Interaction",
     "boost": "EditableContent components/editableContent #components/editableContent Components Interaction"
@@ -374,7 +374,7 @@
     "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. |",
+    "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| children |  | — | — |\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| children |  | — | — |\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",
     "category": "Components",
     "section": "Show/Hide",
     "boost": "ExpanderPanel components/expander #components/expander Components Show/Hide"
@@ -384,7 +384,7 @@
     "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. |",
+    "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| animationStyle |  | — | — |\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| animationStyle |  | — | — |\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| animationStyle |  | — | — |\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| animationStyle |  | — | — |\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| animationStyle |  | — | — |",
     "category": "Components",
     "section": "Show/Hide",
     "boost": "Fade components/fade #components/fade Components Show/Hide"
@@ -394,7 +394,7 @@
     "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. |",
+    "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",
     "category": "Components",
     "section": "Show/Hide",
     "boost": "FadeExpander components/fadeExpander #components/fadeExpander Components Show/Hide"
@@ -404,7 +404,7 @@
     "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. |",
+    "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.\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.",
     "category": "Components",
     "section": "Show/Hide",
     "boost": "FadeUp components/fadeUp #components/fadeUp Components Show/Hide"
@@ -414,7 +414,7 @@
     "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. |",
+    "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\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\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",
     "category": "Components",
     "section": "Misc",
     "boost": "FeedbackRating components/feedback #components/feedback Components Misc"
@@ -424,7 +424,7 @@
     "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. |",
+    "searchText": "FilePicker\nFilePicker\nFilePicker for single imagesSelect image\nFilePicker for multiple images and with dropzoneSelect multiple ImagesDrag & drop files here, or click to select files\nFilePicker for all files and with dropzone onlyDrag & drop PDF files here or click to select\n\nYou have no file selected yet",
     "category": "Components",
     "section": "Pickers",
     "boost": "FilePicker components/filePickers #components/filePickers Components Pickers"
@@ -434,27 +434,17 @@
     "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. |",
+    "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\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",
     "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). |",
+    "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\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)\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",
     "category": "Components",
     "section": "Content",
     "boost": "GroupedItemList components/groupedItemList #components/groupedItemList Components Content"
@@ -474,7 +464,7 @@
     "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. |",
+    "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| children |  | — | — |",
     "category": "Components",
     "section": "Misc",
     "boost": "ImagePreloader components/imagePreloader #components/imagePreloader Components Misc"
@@ -484,7 +474,7 @@
     "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. |",
+    "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",
     "category": "Components",
     "section": "Content",
     "boost": "LabeledElement components/labeledElement #components/labeledElement Components Content"
@@ -494,7 +484,7 @@
     "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. |",
+    "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",
     "category": "Components",
     "section": "Misc",
     "boost": "LicensePlate components/licensePlate #components/licensePlate Components Misc"
@@ -514,7 +504,7 @@
     "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. |",
+    "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\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",
     "category": "Components",
     "section": "Misc",
     "boost": "ListMenu components/listMenu #components/listMenu Components Misc"
@@ -524,7 +514,7 @@
     "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. |",
+    "searchText": "LoadMoreButton\nLoadMoreButton\n50/150\n\nLoad more\n\nReset\n20/100\n\nShowing limited result.\nUse filters to narrow down the result.\n\nResetLoad more",
     "category": "Components",
     "section": "Interaction",
     "boost": "LoadMoreButton components/loadMore #components/loadMore Components Interaction"
@@ -543,8 +533,8 @@
     "id": "components/mapCircle",
     "title": "Circle",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Circle\nCircle\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Circle\nCircle\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
     "category": "Components",
     "section": "Map",
     "boost": "Circle components/mapCircle #components/mapCircle Components Map"
@@ -553,8 +543,8 @@
     "id": "components/mapCluster",
     "title": "Clusters",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Clusters\nClusters\nTerms of use© 1987–2025 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nRegenerate dataToggle cluster\nClusters with POIs\nTerms of use© 1987–2025 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nRegenerate data",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Clusters\nClusters\nTerms of use© 1987–2026 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nRegenerate dataToggle cluster\nClusters with POIs\nTerms of use© 1987–2026 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nRegenerate data",
     "category": "Components",
     "section": "Map",
     "boost": "Clusters components/mapCluster #components/mapCluster Components Map"
@@ -563,8 +553,8 @@
     "id": "components/mapContext",
     "title": "Map",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Map\nMap\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n### ContextMenu\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| onOpen | Function | — | Callback function triggered when the context menu has opened. It returns the coordinates where the map has been clicked: { lat: 48.07182240898762, lng: 11.495482666015647 } |\n| children | List of ContextMenuItem | — | The list of ContextMenuItem to render. Note that the order is important and may not be altered after the first render as the component tries to update the labels directly and relieson the order of items. Also do not omit an item which you want to add later on. Rather disable it. |\n### ContextMenuItem\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | String | — | The actual label text. |\n| disabled | Boolean | — | Defines whether or not the item is disabled. |\n| hasSpinner | Boolean | — | Defines whether or not a spinner is rendered instead of the label. |\n| icon | String | — | The name of the icon added to the label. |\n| callback | Function | — | Callback function that is called when clicking on the item. |\n| labelClassName | String | — | Additional classes added to the label element. |\n| className | String | — | Additional classes added to the wrapper element. |",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Map\nMap\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n### ContextMenu\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| onOpen | Function | — | Callback function triggered when the context menu has opened. It returns the coordinates where the map has been clicked: { lat: 48.07182240898762, lng: 11.495482666015647 } |\n| children | List of ContextMenuItem | — | The list of ContextMenuItem to render. Note that the order is important and may not be altered after the first render as the component tries to update the labels directly and relieson the order of items. Also do not omit an item which you want to add later on. Rather disable it. |\n### ContextMenuItem\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | String | — | The actual label text. |\n| disabled | Boolean | — | Defines whether or not the item is disabled. |\n| hasSpinner | Boolean | — | Defines whether or not a spinner is rendered instead of the label. |\n| icon | String | — | The name of the icon added to the label. |\n| callback | Function | — | Callback function that is called when clicking on the item. |\n| labelClassName | String | — | Additional classes added to the label element. |\n| className | String | — | Additional classes added to the wrapper element. |",
     "category": "Components",
     "section": "Map",
     "boost": "Map components/mapContext #components/mapContext Components Map"
@@ -573,8 +563,8 @@
     "id": "components/mapDraggableMarker",
     "title": "Draggable marker",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Draggable marker\nDraggable marker\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nMarker position{\"lat\":48.16,\"lng\":11.38}",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Draggable marker\nDraggable marker\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nMarker position{\"lat\":48.16,\"lng\":11.38}",
     "category": "Components",
     "section": "Map",
     "boost": "Draggable marker components/mapDraggableMarker #components/mapDraggableMarker Components Map"
@@ -593,8 +583,8 @@
     "id": "components/mapInfoBubble",
     "title": "InfoBubble",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "InfoBubble\nInfoBubble\nTerms of use© 1987–2025 HERE\n\n10 km\n\nAnsicht auswählen\nKartenansicht\nSatellit\n\nVerkehrslage\nVerkehrsstörungen anzeigen\n\nToggle info",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "InfoBubble\nInfoBubble\nTerms of use© 1987–2026 HERE\n\n10 km\n\nAnsicht auswählen\nKartenansicht\nSatellit\n\nVerkehrslage\nVerkehrsstörungen anzeigen\n\nToggle info",
     "category": "Components",
     "section": "Map",
     "boost": "InfoBubble components/mapInfoBubble #components/mapInfoBubble Components Map"
@@ -603,8 +593,8 @@
     "id": "components/mapLayerGroup",
     "title": "MapLayerGroup",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "MapLayerGroup\nMapLayerGroup\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "MapLayerGroup\nMapLayerGroup\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
     "category": "Components",
     "section": "Map",
     "boost": "MapLayerGroup components/mapLayerGroup #components/mapLayerGroup Components Map"
@@ -614,7 +604,7 @@
     "title": "Marker",
     "lead": "Markers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.",
     "summary": "Markers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.",
-    "searchText": "Marker\nMarkers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.\nMarker\nNote: The map zoom level does not affect the size of Markers.\n\nSharing icon between Markers\n\nIt's possible to share icon instances between different markers. This can be used to improve rendering performance of many markers on the map.\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nSingleMapMarker\nVehicle\n\nVehicle\n2\n1\n\nVehicle\n2\n1\n\nThe hover state is triggered on mouse hover or by adding the class hover\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n2\n1\n\nVehicle\n\nVehicle\n\nVehicle\n2\n1\n\nTo activate the active state of any marker you have to add the class active\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\n236km\n\nVehicle\n\nPOI\n\nGeofence\n\nMax height 2.5m\n\n236km\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n\nVehicle\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n\nVehicle\n\nThe animation plays automatically when using the SingleMapMarker prop pinging\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nClusterMapMarker\n100\n\n10\n25\n\n100\n\n10\n25\n\n100\n\n100\n\n100\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| count | Number | — | Number displayed in the center. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence' or 'bg-map-marker-route'. |",
+    "searchText": "Marker\nMarkers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.\nMarker\nNote: The map zoom level does not affect the size of Markers.\n\nSharing icon between Markers\n\nIt's possible to share icon instances between different markers. This can be used to improve rendering performance of many markers on the map.\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nSingleMapMarker\nVehicle\n\nVehicle\n2\n1\n\nVehicle\n2\n1\n\nThe hover state is triggered on mouse hover or by adding the class hover\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n2\n1\n\nVehicle\n\nVehicle\n\nVehicle\n2\n1\n\nTo activate the active state of any marker you have to add the class active\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\n236km\n\nVehicle\n\nPOI\n\nGeofence\n\nMax height 2.5m\n\n236km\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n\nVehicle\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nVehicle\n\nVehicle\n\nThe animation plays automatically when using the SingleMapMarker prop pinging\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bearing | Number | 0 | Defines the rotation of the arrow in deg. |\n| name | String / Node | — | Text for the Marker. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |\n| moving | Boolean | false | Defines whether the direction icon is displayed or not |\n| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |\n| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |\n| iconNames | Array of Strings | — | List of rioglyph icon names |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |\n| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |\n| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |\n| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |\nClusterMapMarker\n100\n\n10\n25\n\n100\n\n10\n25\n\n100\n\n100\n\n100\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| count | Number | — | Number displayed in the center. |\n| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |\n| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |\n| active | Boolean | false | Defines if marker is selected or not. |\n| clickable | Boolean | true | Defines if marker is clickable or not. |\n| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence' or 'bg-map-marker-route'. |",
     "category": "Components",
     "section": "Map",
     "boost": "Marker components/mapMarker #components/mapMarker Components Map"
@@ -623,8 +613,8 @@
     "id": "components/mapPolygon",
     "title": "Polygon",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Polygon\nPolygon\nTerms of use© 1987–2025 HERE\n\n200 m\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nColorcolor-warmup-salmonColdplay\ncolor-coldplay-wine\ncolor-coldplay-aubergine\ncolor-coldplay-kashmir\ncolor-coldplay-fountain\ncolor-coldplay-turquoise\ncolor-coldplay-bermuda\ncolor-coldplay-moos\ncolor-coldplay-primrose\ncolor-coldplay-khaki\nWarmup\ncolor-warmup-crimson\ncolor-warmup-victoria\ncolor-warmup-cadillac\ncolor-warmup-raspberry\ncolor-warmup-cerise\ncolor-warmup-charm\ncolor-warmup-salmon\ncolor-warmup-cherokee\ncolor-warmup-corn\nGray\ngray-darkest\ngray-darker\ngray-dark\ngray\ngray-light\ngray-lighter\ngray-lightest\ngray-decent\nBrand\nbrand-primary\nbrand-secondary\nbrand-info\nbrand-success\nbrand-warning\nbrand-danger\nStatus\ncolor-status-available\ncolor-status-driving\ncolor-status-resting\ncolor-status-working\nMap Marker\ncolor-map-marker-text\ncolor-map-marker-active\ncolor-map-marker-asset\ncolor-map-marker-poi\ncolor-map-marker-geofence\ncolor-map-marker-route\ncolor-map-marker-info\ncolor-map-marker-success\ncolor-map-marker-warning\ncolor-map-marker-danger\nRating\ncolor-rating-1\ncolor-rating-2\ncolor-rating-3\ncolor-rating-4\ncolor-rating-5\nHighlight\ncolor-highlight-darkest\ncolor-highlight-darker\ncolor-highlight-dark\ncolor-highlight\ncolor-highlight-light\ncolor-highlight-lighter\ncolor-highlight-lightest\ncolor-highlight-decent\n\nTerms of use© 1987–2025 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Polygon\nPolygon\nTerms of use© 1987–2026 HERE\n\n200 m\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\nColorcolor-warmup-salmonColdplay\ncolor-coldplay-wine\ncolor-coldplay-aubergine\ncolor-coldplay-kashmir\ncolor-coldplay-fountain\ncolor-coldplay-turquoise\ncolor-coldplay-bermuda\ncolor-coldplay-moos\ncolor-coldplay-primrose\ncolor-coldplay-khaki\nWarmup\ncolor-warmup-crimson\ncolor-warmup-victoria\ncolor-warmup-cadillac\ncolor-warmup-raspberry\ncolor-warmup-cerise\ncolor-warmup-charm\ncolor-warmup-salmon\ncolor-warmup-cherokee\ncolor-warmup-corn\nGray\ngray-darkest\ngray-darker\ngray-dark\ngray\ngray-light\ngray-lighter\ngray-lightest\ngray-decent\nBrand\nbrand-primary\nbrand-secondary\nbrand-info\nbrand-success\nbrand-warning\nbrand-danger\nStatus\ncolor-status-available\ncolor-status-driving\ncolor-status-resting\ncolor-status-working\nMap Marker\ncolor-map-marker-text\ncolor-map-marker-active\ncolor-map-marker-asset\ncolor-map-marker-poi\ncolor-map-marker-geofence\ncolor-map-marker-route\ncolor-map-marker-info\ncolor-map-marker-success\ncolor-map-marker-warning\ncolor-map-marker-danger\nRating\ncolor-rating-1\ncolor-rating-2\ncolor-rating-3\ncolor-rating-4\ncolor-rating-5\nHighlight\ncolor-highlight-darkest\ncolor-highlight-darker\ncolor-highlight-dark\ncolor-highlight\ncolor-highlight-light\ncolor-highlight-lighter\ncolor-highlight-lightest\ncolor-highlight-decent\n\nTerms of use© 1987–2026 HERE\n\n50 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents",
     "category": "Components",
     "section": "Map",
     "boost": "Polygon components/mapPolygon #components/mapPolygon Components Map"
@@ -634,7 +624,7 @@
     "title": "Route",
     "lead": "There are currently 3 different route styles built-in into the map component.",
     "summary": "There are currently 3 different route styles built-in into the map component.",
-    "searchText": "Route\nThere are currently 3 different route styles built-in into the map component.\nRoute\nThe \"reduced\" style is meant for historic routes and shall indicate that the driver went that route but is ahead of a certain timestamp.\n\nThe \"alternativeRoute\" style is meant for route planning cases and shall show alternate routes.\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with changing geometry\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nChange routeToggle route\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with changing styles\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nToggle reduced styleToggle arrows\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with different colors\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute indicating a range for electric vehicles\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute sandbox\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\n{\n\"segments\": [\n{\n\"points\": [\n{\n\"lat\": 48.17933,\n\"lng\": 11.48731\n},\n{\n\"lat\": 48.17937,\n\"lng\": 11.4875\n},\n{\n\"lat\": 48.17939,\n\"lng\": 11.48767\n},\n{\n\"lat\": 48.17941,\n\"lng\": 11.4879\n},\n{\n\"lat\": 48.17942,\n\"lng\": 11.48826\n},\n{\n\"lat\": 48.17942,\n\"lng\": 11.48867\n},\n{\n\"lat\": 48.17941,\n\"lng\": 11.48924\n},\n{\n\"lat\": 48.1794,\n\"lng\": 11.48959\n},\n{\n\"lat\": 48.17939,\n\"lng\": 11.48999\n},\n{\n\"lat\": 48.17936,\n\"lng\": 11.4904\n},\n{\n\"lat\": 48.17933,\n\"lng\": 11.4906\n},\n{\n\"lat\": 48.17927,\n\"lng\": 11.49095\n},\n{\n\"lat\": 48.17915,\n\"lng\": 11.49154\n},\n{\n\"lat\": 48.17895,\n\"lng\": 11.49235\n},\n{\n\"lat\": 48.1788,\n\"lng\": 11.49283\n},\n{\n\"lat\": 48.17869,\n\"lng\": 11.49314\n},\n{\n\"lat\": 48.17856,\n\"lng\": 11.49346\n},\n{\n\"lat\": 48.17843,\n\"lng\": 11.49376\n},\n{\n\"lat\": 48.17828,\n\"lng\": 11.49413\n},\n{\n\"lat\": 48.17813,\n\"lng\": 11.49445\n},\n{\n\"lat\": 48.17797,\n\"lng\": 11.49479\n},\n{\n\"lat\": 48.1778,\n\"lng\": 11.49521\n},\n{\n\"lat\": 48.17775,\n\"lng\": 11.49538\n},\n{\n\"lat\": 48.17769,\n\"lng\": 11.49551\n},\n{\n\"lat\": 48.17757,\n\"lng\": 11.49576\n},\n{\n\"lat\": 48.17752,\n\"lng\": 11.49586\n},\n{\n\"lat\": 48.17748,\n\"lng\": 11.49595\n},\n{\n\"lat\": 48.17744,\n\"lng\": 11.49604\n},\n{\n\"lat\": 48.17735,\n\"lng\": 11.49622\n},\n{\n\"lat\": 48.17722,\n\"lng\": 11.49649\n},\n{\n\"lat\": 48.17701,\n\"lng\": 11.49692\n},\n{\n\"lat\": 48.177,\n\"lng\": 11.49695\n},\n{\n\"lat\": 48.17698,\n\"lng\": 11.49699\n},\n{\n\"lat\": 48.1767,\n\"lng\": 11.49758\n},\n{\n\"lat\": 48.1758,\n\"lng\": 11.49944\n},\n{\n\"lat\": 48.17572,\n\"lng\": 11.4996\n},\n{\n\"lat\": 48.17538,\n\"lng\": 11.50031\n},\n{\n\"lat\": 48.17523,\n\"lng\": 11.50061\n},\n{\n\"lat\": 48.17519,\n\"lng\": 11.50069\n},\n{\n\"lat\": 48.17513,\n\"lng\": 11.50081\n},\n{\n\"lat\": 48.17495,\n\"lng\": 11.50117\n},\n{\n\"lat\": 48.17468,\n\"lng\": 11.50171\n},\n{\n\"lat\": 48.17449,\n\"lng\": 11.50205\n},\n{\n\"lat\": 48.17431,\n\"lng\": 11.50234\n},\n{\n\"lat\": 48.17418,\n\"lng\": 11.50254\n},\n{\n\"lat\": 48.17405,\n\"lng\": 11.5027\n},\n{\n\"lat\": 48.17346,\n\"lng\": 11.5035\n},\n{\n\"lat\": 48.173,\n\"lng\": 11.50416\n},\n{\n\"lat\": 48.17276,\n\"lng\": 11.50448\n},\n{\n\"lat\": 48.17253,\n\"lng\": 11.50482\n},\n{\n\"lat\": 48.17237,\n\"lng\": 11.50509\n},\n{\n\"lat\": 48.17223,\n\"lng\": 11.50536\n},\n{\n\"lat\": 48.1721,\n\"lng\": 11.50564\n},\n{\n\"lat\": 48.17188,\n\"lng\": 11.50614\n},\n{\n\"lat\": 48.17169,\n\"lng\": 11.50658\n},\n{\n\"lat\": 48.17128,\n\"lng\": 11.50753\n},\n{\n\"lat\": 48.17117,\n\"lng\": 11.50777\n},\n{\n\"lat\": 48.17095,\n\"lng\": 11.50828\n},\n{\n\"lat\": 48.1709,\n\"lng\": 11.50838\n},\n{\n\"lat\": 48.17076,\n\"lng\": 11.50871\n},\n{\n\"lat\": 48.17057,\n\"lng\": 11.50922\n},\n{\n\"lat\": 48.17051,\n\"lng\": 11.50938\n},\n{\n\"lat\": 48.17042,\n\"lng\": 11.50953\n},\n{\n\"lat\": 48.17032,\n\"lng\": 11.50976\n},\n{\n\"lat\": 48.17022,\n\"lng\": 11.50999\n},\n{\n\"lat\": 48.17014,\n\"lng\": 11.51017\n},\n{\n\"lat\": 48.17007,\n\"lng\": 11.51029\n},\n{\n\"lat\": 48.16999,\n\"lng\": 11.51044\n},\n{\n\"lat\": 48.16993,\n\"lng\": 11.51055\n},\n{\n\"lat\": 48.16985,\n\"lng\": 11.51069\n},\n{\n\"lat\": 48.1698,\n\"lng\": 11.51078\n},\n{\n\"lat\": 48.16976,\n\"lng\": 11.51086\n},\n{\n\"lat\": 48.16984,\n\"lng\": 11.5109\n},\n{\n\"lat\": 48.16991,\n\"lng\": 11.51093\n},\n{\n\"lat\": 48.17003,\n\"lng\": 11.51097\n},\n{\n\"lat\": 48.17015,\n\"lng\": 11.51099\n},\n{\n\"lat\": 48.1703,\n\"lng\": 11.511\n},\n{\n\"lat\": 48.17048,\n\"lng\": 11.51104\n},\n{\n\"lat\": 48.17068,\n\"lng\": 11.5111\n},\n{\n\"lat\": 48.17093,\n\"lng\": 11.51118\n},\n{\n\"lat\": 48.17112,\n\"lng\": 11.51124\n},\n{\n\"lat\": 48.17131,\n\"lng\": 11.51131\n},\n{\n\"lat\": 48.1715,\n\"lng\": 11.51139\n},\n{\n\"lat\": 48.17165,\n\"lng\": 11.51147\n},\n{\n\"lat\": 48.17179,\n\"lng\": 11.51156\n},\n{\n\"lat\": 48.17192,\n\"lng\": 11.51166\n},\n{\n\"lat\": 48.17205,\n\"lng\": 11.51178\n},\n{\n\"lat\": 48.17219,\n\"lng\": 11.51192\n},\n{\n\"lat\": 48.17232,\n\"lng\": 11.51206\n},\n{\n\"lat\": 48.17242,\n\"lng\": 11.51219\n},\n{\n\"lat\": 48.17251,\n\"lng\": 11.51234\n},\n{\n\"lat\": 48.17261,\n\"lng\": 11.5125\n},\n{\n\"lat\": 48.1727,\n\"lng\": 11.51268\n},\n{\n\"lat\": 48.17279,\n\"lng\": 11.51287\n},\n{\n\"lat\": 48.17294,\n\"lng\": 11.51328\n},\n{\n\"lat\": 48.17304,\n\"lng\": 11.51362\n},\n{\n\"lat\": 48.17307,\n\"lng\": 11.51373\n},\n{\n\"lat\": 48.17315,\n\"lng\": 11.51402\n},\n{\n\"lat\": 48.17333,\n\"lng\": 11.51476\n},\n{\n\"lat\": 48.17341,\n\"lng\": 11.51511\n},\n{\n\"lat\": 48.17365,\n\"lng\": 11.51612\n},\n{\n\"lat\": 48.17394,\n\"lng\": 11.51727\n},\n{\n\"lat\": 48.1741,\n\"lng\": 11.51791\n},\n{\n\"lat\": 48.17416,\n\"lng\": 11.51819\n},\n{\n\"lat\": 48.17433,\n\"lng\": 11.51893\n},\n{\n\"lat\": 48.17438,\n\"lng\": 11.51911\n},\n{\n\"lat\": 48.17453,\n\"lng\": 11.51968\n},\n{\n\"lat\": 48.17465,\n\"lng\": 11.52003\n},\n{\n\"lat\": 48.17469,\n\"lng\": 11.52013\n},\n{\n\"lat\": 48.17477,\n\"lng\": 11.52031\n},\n{\n\"lat\": 48.17488,\n\"lng\": 11.52056\n},\n{\n\"lat\": 48.17501,\n\"lng\": 11.52084\n},\n{\n\"lat\": 48.17509,\n\"lng\": 11.52099\n},\n{\n\"lat\": 48.1754,\n\"lng\": 11.52154\n},\n{\n\"lat\": 48.17541,\n\"lng\": 11.52171\n},\n{\n\"lat\": 48.17542,\n\"lng\": 11.52198\n},\n{\n\"lat\": 48.17541,\n\"lng\": 11.52245\n},\n{\n\"lat\": 48.17517,\n\"lng\": 11.52292\n},\n{\n\"lat\": 48.17478,\n\"lng\": 11.52371\n},\n{\n\"lat\": 48.17462,\n\"lng\": 11.52403\n},\n{\n\"lat\": 48.17455,\n\"lng\": 11.52416\n},\n{\n\"lat\": 48.17451,\n\"lng\": 11.52425\n},\n{\n\"lat\": 48.17442,\n\"lng\": 11.52442\n},\n{\n\"lat\": 48.17421,\n\"lng\": 11.52483\n},\n{\n\"lat\": 48.17412,\n\"lng\": 11.52499\n},\n{\n\"lat\": 48.17388,\n\"lng\": 11.52544\n},\n{\n\"lat\": 48.17376,\n\"lng\": 11.52567\n},\n{\n\"lat\": 48.17353,\n\"lng\": 11.52614\n},\n{\n\"lat\": 48.17317,\n\"lng\": 11.52684\n},\n{\n\"lat\": 48.17299,\n\"lng\": 11.52719\n},\n{\n\"lat\": 48.17267,\n\"lng\": 11.52782\n},\n{\n\"lat\": 48.17262,\n\"lng\": 11.52792\n},\n{\n\"lat\": 48.17246,\n\"lng\": 11.52824\n},\n{\n\"lat\": 48.17225,\n\"lng\": 11.52861\n},\n{\n\"lat\": 48.17219,\n\"lng\": 11.52872\n},\n{\n\"lat\": 48.17214,\n\"lng\": 11.52882\n},\n{\n\"lat\": 48.17189,\n\"lng\": 11.52926\n},\n{\n\"lat\": 48.17187,\n\"lng\": 11.5293\n},\n{\n\"lat\": 48.1715,\n\"lng\": 11.52995\n},\n{\n\"lat\": 48.17132,\n\"lng\": 11.53026\n},\n{\n\"lat\": 48.17127,\n\"lng\": 11.53034\n},\n{\n\"lat\": 48.17103,\n\"lng\": 11.53075\n},\n{\n\"lat\": 48.17073,\n\"lng\": 11.53125\n},\n{\n\"lat\": 48.17028,\n\"lng\": 11.53194\n},\n{\n\"lat\": 48.17017,\n\"lng\": 11.53211\n},\n{\n\"lat\": 48.16982,\n\"lng\": 11.53266\n},\n{\n\"lat\": 48.16976,\n\"lng\": 11.53277\n},\n{\n\"lat\": 48.16939,\n\"lng\": 11.53331\n},\n{\n\"lat\": 48.16885,\n\"lng\": 11.53418\n},\n{\n\"lat\": 48.16872,\n\"lng\": 11.53437\n},\n{\n\"lat\": 48.16822,\n\"lng\": 11.5351\n},\n{\n\"lat\": 48.16809,\n\"lng\": 11.5353\n},\n{\n\"lat\": 48.16791,\n\"lng\": 11.53554\n},\n{\n\"lat\": 48.16785,\n\"lng\": 11.53562\n},\n{\n\"lat\": 48.16774,\n\"lng\": 11.53577\n},\n{\n\"lat\": 48.16761,\n\"lng\": 11.53593\n},\n{\n\"lat\": 48.16745,\n\"lng\": 11.53612\n},\n{\n\"lat\": 48.16714,\n\"lng\": 11.53644\n},\n{\n\"lat\": 48.167,\n\"lng\": 11.53659\n},\n{\n\"lat\": 48.16695,\n\"lng\": 11.53664\n},\n{\n\"lat\": 48.16688,\n\"lng\": 11.53671\n},\n{\n\"lat\": 48.16653,\n\"lng\": 11.53704\n},\n{\n\"lat\": 48.1659,\n\"lng\": 11.53768\n},\n{\n\"lat\": 48.16578,\n\"lng\": 11.53781\n},\n{\n\"lat\": 48.16564,\n\"lng\": 11.53796\n},\n{\n\"lat\": 48.1655,\n\"lng\": 11.53812\n},\n{\n\"lat\": 48.16513,\n\"lng\": 11.53854\n},\n{\n\"lat\": 48.16487,\n\"lng\": 11.53887\n},\n{\n\"lat\": 48.16472,\n\"lng\": 11.53908\n},\n{\n\"lat\": 48.1644,\n\"lng\": 11.53958\n},\n{\n\"lat\": 48.16432,\n\"lng\": 11.53971\n},\n{\n\"lat\": 48.16369,\n\"lng\": 11.54072\n},\n{\n\"lat\": 48.16354,\n\"lng\": 11.54097\n},\n{\n\"lat\": 48.16328,\n\"lng\": 11.54138\n},\n{\n\"lat\": 48.16281,\n\"lng\": 11.54216\n},\n{\n\"lat\": 48.16231,\n\"lng\": 11.54299\n},\n{\n\"lat\": 48.16185,\n\"lng\": 11.54381\n},\n{\n\"lat\": 48.16127,\n\"lng\": 11.54476\n},\n{\n\"lat\": 48.16115,\n\"lng\": 11.54496\n},\n{\n\"lat\": 48.16097,\n\"lng\": 11.54525\n},\n{\n\"lat\": 48.16073,\n\"lng\": 11.54561\n},\n{\n\"lat\": 48.16056,\n\"lng\": 11.54587\n},\n{\n\"lat\": 48.16029,\n\"lng\": 11.54625\n},\n{\n\"lat\": 48.16014,\n\"lng\": 11.54644\n},\n{\n\"lat\": 48.15994,\n\"lng\": 11.54668\n},\n{\n\"lat\": 48.15979,\n\"lng\": 11.54683\n},\n{\n\"lat\": 48.15969,\n\"lng\": 11.54693\n},\n{\n\"lat\": 48.15958,\n\"lng\": 11.54707\n},\n{\n\"lat\": 48.15947,\n\"lng\": 11.54721\n},\n{\n\"lat\": 48.15933,\n\"lng\": 11.54737\n},\n{\n\"lat\": 48.15902,\n\"lng\": 11.54779\n},\n{\n\"lat\": 48.15882,\n\"lng\": 11.54804\n},\n{\n\"lat\": 48.15811,\n\"lng\": 11.54893\n},\n{\n\"lat\": 48.15794,\n\"lng\": 11.54914\n},\n{\n\"lat\": 48.15734,\n\"lng\": 11.54987\n},\n{\n\"lat\": 48.15605,\n\"lng\": 11.55145\n},\n{\n\"lat\": 48.15531,\n\"lng\": 11.55236\n},\n{\n\"lat\": 48.15523,\n\"lng\": 11.55246\n},\n{\n\"lat\": 48.15422,\n\"lng\": 11.55378\n},\n{\n\"lat\": 48.15389,\n\"lng\": 11.55422\n},\n{\n\"lat\": 48.15342,\n\"lng\": 11.55479\n},\n{\n\"lat\": 48.15274,\n\"lng\": 11.55563\n},\n{\n\"lat\": 48.1521,\n\"lng\": 11.55639\n},\n{\n\"lat\": 48.15167,\n\"lng\": 11.5569\n},\n{\n\"lat\": 48.15153,\n\"lng\": 11.55707\n},\n{\n\"lat\": 48.15131,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15102,\n\"lng\": 11.55766\n},\n{\n\"lat\": 48.1509,\n\"lng\": 11.55778\n},\n{\n\"lat\": 48.15085,\n\"lng\": 11.55771\n},\n{\n\"lat\": 48.15077,\n\"lng\": 11.55763\n},\n{\n\"lat\": 48.15061,\n\"lng\": 11.55751\n},\n{\n\"lat\": 48.15043,\n\"lng\": 11.55736\n},\n{\n\"lat\": 48.15036,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15033,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15029,\n\"lng\": 11.55735\n},\n{\n\"lat\": 48.15026,\n\"lng\": 11.55737\n},\n{\n\"lat\": 48.15023,\n\"lng\": 11.55742\n},\n{\n\"lat\": 48.15021,\n\"lng\": 11.55746\n},\n{\n\"lat\": 48.15021,\n\"lng\": 11.55753\n},\n{\n\"lat\": 48.15024,\n\"lng\": 11.55783\n},\n{\n\"lat\": 48.15027,\n\"lng\": 11.55813\n},\n{\n\"lat\": 48.15028,\n\"lng\": 11.55824\n},\n{\n\"lat\": 48.15028,\n\"lng\": 11.55836\n},\n{\n\"lat\": 48.15027,\n\"lng\": 11.55848\n},\n{\n\"lat\": 48.15023,\n\"lng\": 11.55868\n},\n{\n\"lat\": 48.1502,\n\"lng\": 11.55881\n},\n{\n\"lat\": 48.15017,\n\"lng\": 11.55891\n},\n{\n\"lat\": 48.14997,\n\"lng\": 11.55967\n},\n{\n\"lat\": 48.14985,\n\"lng\": 11.5601\n},\n{\n\"lat\": 48.14919,\n\"lng\": 11.56242\n},\n{\n\"lat\": 48.14908,\n\"lng\": 11.56282\n},\n{\n\"lat\": 48.14906,\n\"lng\": 11.56288\n},\n{\n\"lat\": 48.14873,\n\"lng\": 11.56403\n},\n{\n\"lat\": 48.14858,\n\"lng\": 11.56455\n},\n{\n\"lat\": 48.14845,\n\"lng\": 11.56501\n},\n{\n\"lat\": 48.14833,\n\"lng\": 11.56545\n},\n{\n\"lat\": 48.14821,\n\"lng\": 11.56587\n},\n{\n\"lat\": 48.14804,\n\"lng\": 11.5665\n},\n{\n\"lat\": 48.14793,\n\"lng\": 11.56688\n},\n{\n\"lat\": 48.14791,\n\"lng\": 11.56696\n},\n{\n\"lat\": 48.14782,\n\"lng\": 11.56726\n},\n{\n\"lat\": 48.1476,\n\"lng\": 11.56804\n},\n{\n\"lat\": 48.14755,\n\"lng\": 11.56823\n},\n{\n\"lat\": 48.14752,\n\"lng\": 11.56834\n},\n{\n\"lat\": 48.14725,\n\"lng\": 11.56927\n},\n{\n\"lat\": 48.14702,\n\"lng\": 11.5701\n},\n{\n\"lat\": 48.14695,\n\"lng\": 11.57037\n},\n{\n\"lat\": 48.14689,\n\"lng\": 11.57057\n},\n{\n\"lat\": 48.14631,\n\"lng\": 11.57269\n},\n{\n\"lat\": 48.14623,\n\"lng\": 11.57297\n},\n{\n\"lat\": 48.14607,\n\"lng\": 11.5732\n},\n{\n\"lat\": 48.14596,\n\"lng\": 11.57336\n},\n{\n\"lat\": 48.14587,\n\"lng\": 11.57355\n},\n{\n\"lat\": 48.14585,\n\"lng\": 11.57359\n},\n{\n\"lat\": 48.14577,\n\"lng\": 11.57378\n},\n{\n\"lat\": 48.14566,\n\"lng\": 11.57413\n},\n{\n\"lat\": 48.14562,\n\"lng\": 11.57426\n},\n{\n\"lat\": 48.14555,\n\"lng\": 11.57433\n},\n{\n\"lat\": 48.14552,\n\"lng\": 11.57439\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57447\n},\n{\n\"lat\": 48.14546,\n\"lng\": 11.5746\n},\n{\n\"lat\": 48.14541,\n\"lng\": 11.57482\n},\n{\n\"lat\": 48.14538,\n\"lng\": 11.57501\n},\n{\n\"lat\": 48.14537,\n\"lng\": 11.57518\n},\n{\n\"lat\": 48.14539,\n\"lng\": 11.57552\n},\n{\n\"lat\": 48.14544,\n\"lng\": 11.57592\n},\n{\n\"lat\": 48.14546,\n\"lng\": 11.57626\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57667\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57702\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57722\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57737\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57746\n},\n{\n\"lat\": 48.1455,\n\"lng\": 11.57762\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57768\n},\n{\n\"lat\": 48.14547,\n\"lng\": 11.5778\n},\n{\n\"lat\": 48.14537,\n\"lng\": 11.57825\n},\n{\n\"lat\": 48.14525,\n\"lng\": 11.57878\n},\n{\n\"lat\": 48.14486,\n\"lng\": 11.57861\n},\n{\n\"lat\": 48.14467,\n\"lng\": 11.57852\n},\n{\n\"lat\": 48.14428,\n\"lng\": 11.57833\n},\n{\n\"lat\": 48.14411,\n\"lng\": 11.57825\n},\n{\n\"lat\": 48.14389,\n\"lng\": 11.57814\n},\n{\n\"lat\": 48.14357,\n\"lng\": 11.57799\n},\n{\n\"lat\": 48.1433,\n\"lng\": 11.57787\n},\n{\n\"lat\": 48.14318,\n\"lng\": 11.57782\n},\n{\n\"lat\": 48.14304,\n\"lng\": 11.57776\n},\n{\n\"lat\": 48.14263,\n\"lng\": 11.57752\n},\n{\n\"lat\": 48.14258,\n\"lng\": 11.57772\n},\n{\n\"lat\": 48.14244,\n\"lng\": 11.57771\n},\n{\n\"lat\": 48.14237,\n\"lng\": 11.57791\n},\n{\n\"lat\": 48.14244,\n\"lng\": 11.57771\n},\n{\n\"lat\": 48.14258,\n\"lng\": 11.57772\n},\n{\n\"lat\": 48.14251,\n\"lng\": 11.57804\n},\n{\n\"lat\": 48.14249,\n\"lng\": 11.57811\n},\n{\n\"lat\": 48.14241,\n\"lng\": 11.57837\n},\n{\n\"lat\": 48.14234,\n\"lng\": 11.57869\n},\n{\n\"lat\": 48.14222,\n\"lng\": 11.57923\n},\n{\n\"lat\": 48.14208,\n\"lng\": 11.57917\n},\n{\n\"lat\": 48.14193,\n\"lng\": 11.57996\n},\n{\n\"lat\": 48.14182,\n\"lng\": 11.58051\n},\n{\n\"lat\": 48.14166,\n\"lng\": 11.58118\n},\n{\n\"lat\": 48.14151,\n\"lng\": 11.58122\n},\n{\n\"lat\": 48.14122,\n\"lng\": 11.58107\n},\n{\n\"lat\": 48.1408,\n\"lng\": 11.58089\n},\n{\n\"lat\": 48.14029,\n\"lng\": 11.58068\n},\n{\n\"lat\": 48.1401,\n\"lng\": 11.58061\n},\n{\n\"lat\": 48.13995,\n\"lng\": 11.58055\n},\n{\n\"lat\": 48.13937,\n\"lng\": 11.58033\n},\n{\n\"lat\": 48.1391,\n\"lng\": 11.58025\n},\n{\n\"lat\": 48.13916,\n\"lng\": 11.57996\n},\n{\n\"lat\": 48.13878,\n\"lng\": 11.57965\n},\n{\n\"lat\": 48.13871,\n\"lng\": 11.57983\n},\n{\n\"lat\": 48.13859,\n\"lng\": 11.58013\n}\n],\n\"alternative\": false\n}\n],\n\"markers\": [\n{\n\"id\": \"100\",\n\"position\": {\n\"lat\": 48.17933,\n\"lng\": 11.48731\n},\n\"markerProps\": {\n\"active\": false,\n\"iconNames\": [\n\"start\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"clickable\": false\n}\n},\n{\n\"id\": \"200\",\n\"position\": {\n\"lat\": 48.13859,\n\"lng\": 11.58013\n},\n\"markerProps\": {\n\"active\": false,\n\"iconNames\": [\n\"finish\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"clickable\": false\n}\n},\n{\n\"id\": \"59.70357\",\n\"position\": {\n\"lat\": 48.16745,\n\"lng\": 11.53612\n},\n\"markerProps\": {\n\"active\": true,\n\"iconNames\": [\n\"route\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"name\": \"10 km / 36 min\",\n\"clickable\": false,\n\"fixed\": true\n}\n}\n]\n}\n\nSelect file...\n\nCreate demo routeCreate demo markerToggle route events\nEnter your route data into the input or select a JSON file to render a route with multiple segments and markers. Please note that this will replace all previously existing markers and route segments.\nSegments are separate parts of the route, each containing a list of points, which can be rendered as reduced route (semi-transparent) and with or without arrows (showArrows). A Marker should provide aposition and markerProps to define its shape.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |",
+    "searchText": "Route\nThere are currently 3 different route styles built-in into the map component.\nRoute\nThe \"reduced\" style is meant for historic routes and shall indicate that the driver went that route but is ahead of a certain timestamp.\n\nThe \"alternativeRoute\" style is meant for route planning cases and shall show alternate routes.\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with changing geometry\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nChange routeToggle route\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with changing styles\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nToggle reduced styleToggle arrows\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute with different colors\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute indicating a range for electric vehicles\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |\nRoute sandbox\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\n{\n\"segments\": [\n{\n\"points\": [\n{\n\"lat\": 48.17933,\n\"lng\": 11.48731\n},\n{\n\"lat\": 48.17937,\n\"lng\": 11.4875\n},\n{\n\"lat\": 48.17939,\n\"lng\": 11.48767\n},\n{\n\"lat\": 48.17941,\n\"lng\": 11.4879\n},\n{\n\"lat\": 48.17942,\n\"lng\": 11.48826\n},\n{\n\"lat\": 48.17942,\n\"lng\": 11.48867\n},\n{\n\"lat\": 48.17941,\n\"lng\": 11.48924\n},\n{\n\"lat\": 48.1794,\n\"lng\": 11.48959\n},\n{\n\"lat\": 48.17939,\n\"lng\": 11.48999\n},\n{\n\"lat\": 48.17936,\n\"lng\": 11.4904\n},\n{\n\"lat\": 48.17933,\n\"lng\": 11.4906\n},\n{\n\"lat\": 48.17927,\n\"lng\": 11.49095\n},\n{\n\"lat\": 48.17915,\n\"lng\": 11.49154\n},\n{\n\"lat\": 48.17895,\n\"lng\": 11.49235\n},\n{\n\"lat\": 48.1788,\n\"lng\": 11.49283\n},\n{\n\"lat\": 48.17869,\n\"lng\": 11.49314\n},\n{\n\"lat\": 48.17856,\n\"lng\": 11.49346\n},\n{\n\"lat\": 48.17843,\n\"lng\": 11.49376\n},\n{\n\"lat\": 48.17828,\n\"lng\": 11.49413\n},\n{\n\"lat\": 48.17813,\n\"lng\": 11.49445\n},\n{\n\"lat\": 48.17797,\n\"lng\": 11.49479\n},\n{\n\"lat\": 48.1778,\n\"lng\": 11.49521\n},\n{\n\"lat\": 48.17775,\n\"lng\": 11.49538\n},\n{\n\"lat\": 48.17769,\n\"lng\": 11.49551\n},\n{\n\"lat\": 48.17757,\n\"lng\": 11.49576\n},\n{\n\"lat\": 48.17752,\n\"lng\": 11.49586\n},\n{\n\"lat\": 48.17748,\n\"lng\": 11.49595\n},\n{\n\"lat\": 48.17744,\n\"lng\": 11.49604\n},\n{\n\"lat\": 48.17735,\n\"lng\": 11.49622\n},\n{\n\"lat\": 48.17722,\n\"lng\": 11.49649\n},\n{\n\"lat\": 48.17701,\n\"lng\": 11.49692\n},\n{\n\"lat\": 48.177,\n\"lng\": 11.49695\n},\n{\n\"lat\": 48.17698,\n\"lng\": 11.49699\n},\n{\n\"lat\": 48.1767,\n\"lng\": 11.49758\n},\n{\n\"lat\": 48.1758,\n\"lng\": 11.49944\n},\n{\n\"lat\": 48.17572,\n\"lng\": 11.4996\n},\n{\n\"lat\": 48.17538,\n\"lng\": 11.50031\n},\n{\n\"lat\": 48.17523,\n\"lng\": 11.50061\n},\n{\n\"lat\": 48.17519,\n\"lng\": 11.50069\n},\n{\n\"lat\": 48.17513,\n\"lng\": 11.50081\n},\n{\n\"lat\": 48.17495,\n\"lng\": 11.50117\n},\n{\n\"lat\": 48.17468,\n\"lng\": 11.50171\n},\n{\n\"lat\": 48.17449,\n\"lng\": 11.50205\n},\n{\n\"lat\": 48.17431,\n\"lng\": 11.50234\n},\n{\n\"lat\": 48.17418,\n\"lng\": 11.50254\n},\n{\n\"lat\": 48.17405,\n\"lng\": 11.5027\n},\n{\n\"lat\": 48.17346,\n\"lng\": 11.5035\n},\n{\n\"lat\": 48.173,\n\"lng\": 11.50416\n},\n{\n\"lat\": 48.17276,\n\"lng\": 11.50448\n},\n{\n\"lat\": 48.17253,\n\"lng\": 11.50482\n},\n{\n\"lat\": 48.17237,\n\"lng\": 11.50509\n},\n{\n\"lat\": 48.17223,\n\"lng\": 11.50536\n},\n{\n\"lat\": 48.1721,\n\"lng\": 11.50564\n},\n{\n\"lat\": 48.17188,\n\"lng\": 11.50614\n},\n{\n\"lat\": 48.17169,\n\"lng\": 11.50658\n},\n{\n\"lat\": 48.17128,\n\"lng\": 11.50753\n},\n{\n\"lat\": 48.17117,\n\"lng\": 11.50777\n},\n{\n\"lat\": 48.17095,\n\"lng\": 11.50828\n},\n{\n\"lat\": 48.1709,\n\"lng\": 11.50838\n},\n{\n\"lat\": 48.17076,\n\"lng\": 11.50871\n},\n{\n\"lat\": 48.17057,\n\"lng\": 11.50922\n},\n{\n\"lat\": 48.17051,\n\"lng\": 11.50938\n},\n{\n\"lat\": 48.17042,\n\"lng\": 11.50953\n},\n{\n\"lat\": 48.17032,\n\"lng\": 11.50976\n},\n{\n\"lat\": 48.17022,\n\"lng\": 11.50999\n},\n{\n\"lat\": 48.17014,\n\"lng\": 11.51017\n},\n{\n\"lat\": 48.17007,\n\"lng\": 11.51029\n},\n{\n\"lat\": 48.16999,\n\"lng\": 11.51044\n},\n{\n\"lat\": 48.16993,\n\"lng\": 11.51055\n},\n{\n\"lat\": 48.16985,\n\"lng\": 11.51069\n},\n{\n\"lat\": 48.1698,\n\"lng\": 11.51078\n},\n{\n\"lat\": 48.16976,\n\"lng\": 11.51086\n},\n{\n\"lat\": 48.16984,\n\"lng\": 11.5109\n},\n{\n\"lat\": 48.16991,\n\"lng\": 11.51093\n},\n{\n\"lat\": 48.17003,\n\"lng\": 11.51097\n},\n{\n\"lat\": 48.17015,\n\"lng\": 11.51099\n},\n{\n\"lat\": 48.1703,\n\"lng\": 11.511\n},\n{\n\"lat\": 48.17048,\n\"lng\": 11.51104\n},\n{\n\"lat\": 48.17068,\n\"lng\": 11.5111\n},\n{\n\"lat\": 48.17093,\n\"lng\": 11.51118\n},\n{\n\"lat\": 48.17112,\n\"lng\": 11.51124\n},\n{\n\"lat\": 48.17131,\n\"lng\": 11.51131\n},\n{\n\"lat\": 48.1715,\n\"lng\": 11.51139\n},\n{\n\"lat\": 48.17165,\n\"lng\": 11.51147\n},\n{\n\"lat\": 48.17179,\n\"lng\": 11.51156\n},\n{\n\"lat\": 48.17192,\n\"lng\": 11.51166\n},\n{\n\"lat\": 48.17205,\n\"lng\": 11.51178\n},\n{\n\"lat\": 48.17219,\n\"lng\": 11.51192\n},\n{\n\"lat\": 48.17232,\n\"lng\": 11.51206\n},\n{\n\"lat\": 48.17242,\n\"lng\": 11.51219\n},\n{\n\"lat\": 48.17251,\n\"lng\": 11.51234\n},\n{\n\"lat\": 48.17261,\n\"lng\": 11.5125\n},\n{\n\"lat\": 48.1727,\n\"lng\": 11.51268\n},\n{\n\"lat\": 48.17279,\n\"lng\": 11.51287\n},\n{\n\"lat\": 48.17294,\n\"lng\": 11.51328\n},\n{\n\"lat\": 48.17304,\n\"lng\": 11.51362\n},\n{\n\"lat\": 48.17307,\n\"lng\": 11.51373\n},\n{\n\"lat\": 48.17315,\n\"lng\": 11.51402\n},\n{\n\"lat\": 48.17333,\n\"lng\": 11.51476\n},\n{\n\"lat\": 48.17341,\n\"lng\": 11.51511\n},\n{\n\"lat\": 48.17365,\n\"lng\": 11.51612\n},\n{\n\"lat\": 48.17394,\n\"lng\": 11.51727\n},\n{\n\"lat\": 48.1741,\n\"lng\": 11.51791\n},\n{\n\"lat\": 48.17416,\n\"lng\": 11.51819\n},\n{\n\"lat\": 48.17433,\n\"lng\": 11.51893\n},\n{\n\"lat\": 48.17438,\n\"lng\": 11.51911\n},\n{\n\"lat\": 48.17453,\n\"lng\": 11.51968\n},\n{\n\"lat\": 48.17465,\n\"lng\": 11.52003\n},\n{\n\"lat\": 48.17469,\n\"lng\": 11.52013\n},\n{\n\"lat\": 48.17477,\n\"lng\": 11.52031\n},\n{\n\"lat\": 48.17488,\n\"lng\": 11.52056\n},\n{\n\"lat\": 48.17501,\n\"lng\": 11.52084\n},\n{\n\"lat\": 48.17509,\n\"lng\": 11.52099\n},\n{\n\"lat\": 48.1754,\n\"lng\": 11.52154\n},\n{\n\"lat\": 48.17541,\n\"lng\": 11.52171\n},\n{\n\"lat\": 48.17542,\n\"lng\": 11.52198\n},\n{\n\"lat\": 48.17541,\n\"lng\": 11.52245\n},\n{\n\"lat\": 48.17517,\n\"lng\": 11.52292\n},\n{\n\"lat\": 48.17478,\n\"lng\": 11.52371\n},\n{\n\"lat\": 48.17462,\n\"lng\": 11.52403\n},\n{\n\"lat\": 48.17455,\n\"lng\": 11.52416\n},\n{\n\"lat\": 48.17451,\n\"lng\": 11.52425\n},\n{\n\"lat\": 48.17442,\n\"lng\": 11.52442\n},\n{\n\"lat\": 48.17421,\n\"lng\": 11.52483\n},\n{\n\"lat\": 48.17412,\n\"lng\": 11.52499\n},\n{\n\"lat\": 48.17388,\n\"lng\": 11.52544\n},\n{\n\"lat\": 48.17376,\n\"lng\": 11.52567\n},\n{\n\"lat\": 48.17353,\n\"lng\": 11.52614\n},\n{\n\"lat\": 48.17317,\n\"lng\": 11.52684\n},\n{\n\"lat\": 48.17299,\n\"lng\": 11.52719\n},\n{\n\"lat\": 48.17267,\n\"lng\": 11.52782\n},\n{\n\"lat\": 48.17262,\n\"lng\": 11.52792\n},\n{\n\"lat\": 48.17246,\n\"lng\": 11.52824\n},\n{\n\"lat\": 48.17225,\n\"lng\": 11.52861\n},\n{\n\"lat\": 48.17219,\n\"lng\": 11.52872\n},\n{\n\"lat\": 48.17214,\n\"lng\": 11.52882\n},\n{\n\"lat\": 48.17189,\n\"lng\": 11.52926\n},\n{\n\"lat\": 48.17187,\n\"lng\": 11.5293\n},\n{\n\"lat\": 48.1715,\n\"lng\": 11.52995\n},\n{\n\"lat\": 48.17132,\n\"lng\": 11.53026\n},\n{\n\"lat\": 48.17127,\n\"lng\": 11.53034\n},\n{\n\"lat\": 48.17103,\n\"lng\": 11.53075\n},\n{\n\"lat\": 48.17073,\n\"lng\": 11.53125\n},\n{\n\"lat\": 48.17028,\n\"lng\": 11.53194\n},\n{\n\"lat\": 48.17017,\n\"lng\": 11.53211\n},\n{\n\"lat\": 48.16982,\n\"lng\": 11.53266\n},\n{\n\"lat\": 48.16976,\n\"lng\": 11.53277\n},\n{\n\"lat\": 48.16939,\n\"lng\": 11.53331\n},\n{\n\"lat\": 48.16885,\n\"lng\": 11.53418\n},\n{\n\"lat\": 48.16872,\n\"lng\": 11.53437\n},\n{\n\"lat\": 48.16822,\n\"lng\": 11.5351\n},\n{\n\"lat\": 48.16809,\n\"lng\": 11.5353\n},\n{\n\"lat\": 48.16791,\n\"lng\": 11.53554\n},\n{\n\"lat\": 48.16785,\n\"lng\": 11.53562\n},\n{\n\"lat\": 48.16774,\n\"lng\": 11.53577\n},\n{\n\"lat\": 48.16761,\n\"lng\": 11.53593\n},\n{\n\"lat\": 48.16745,\n\"lng\": 11.53612\n},\n{\n\"lat\": 48.16714,\n\"lng\": 11.53644\n},\n{\n\"lat\": 48.167,\n\"lng\": 11.53659\n},\n{\n\"lat\": 48.16695,\n\"lng\": 11.53664\n},\n{\n\"lat\": 48.16688,\n\"lng\": 11.53671\n},\n{\n\"lat\": 48.16653,\n\"lng\": 11.53704\n},\n{\n\"lat\": 48.1659,\n\"lng\": 11.53768\n},\n{\n\"lat\": 48.16578,\n\"lng\": 11.53781\n},\n{\n\"lat\": 48.16564,\n\"lng\": 11.53796\n},\n{\n\"lat\": 48.1655,\n\"lng\": 11.53812\n},\n{\n\"lat\": 48.16513,\n\"lng\": 11.53854\n},\n{\n\"lat\": 48.16487,\n\"lng\": 11.53887\n},\n{\n\"lat\": 48.16472,\n\"lng\": 11.53908\n},\n{\n\"lat\": 48.1644,\n\"lng\": 11.53958\n},\n{\n\"lat\": 48.16432,\n\"lng\": 11.53971\n},\n{\n\"lat\": 48.16369,\n\"lng\": 11.54072\n},\n{\n\"lat\": 48.16354,\n\"lng\": 11.54097\n},\n{\n\"lat\": 48.16328,\n\"lng\": 11.54138\n},\n{\n\"lat\": 48.16281,\n\"lng\": 11.54216\n},\n{\n\"lat\": 48.16231,\n\"lng\": 11.54299\n},\n{\n\"lat\": 48.16185,\n\"lng\": 11.54381\n},\n{\n\"lat\": 48.16127,\n\"lng\": 11.54476\n},\n{\n\"lat\": 48.16115,\n\"lng\": 11.54496\n},\n{\n\"lat\": 48.16097,\n\"lng\": 11.54525\n},\n{\n\"lat\": 48.16073,\n\"lng\": 11.54561\n},\n{\n\"lat\": 48.16056,\n\"lng\": 11.54587\n},\n{\n\"lat\": 48.16029,\n\"lng\": 11.54625\n},\n{\n\"lat\": 48.16014,\n\"lng\": 11.54644\n},\n{\n\"lat\": 48.15994,\n\"lng\": 11.54668\n},\n{\n\"lat\": 48.15979,\n\"lng\": 11.54683\n},\n{\n\"lat\": 48.15969,\n\"lng\": 11.54693\n},\n{\n\"lat\": 48.15958,\n\"lng\": 11.54707\n},\n{\n\"lat\": 48.15947,\n\"lng\": 11.54721\n},\n{\n\"lat\": 48.15933,\n\"lng\": 11.54737\n},\n{\n\"lat\": 48.15902,\n\"lng\": 11.54779\n},\n{\n\"lat\": 48.15882,\n\"lng\": 11.54804\n},\n{\n\"lat\": 48.15811,\n\"lng\": 11.54893\n},\n{\n\"lat\": 48.15794,\n\"lng\": 11.54914\n},\n{\n\"lat\": 48.15734,\n\"lng\": 11.54987\n},\n{\n\"lat\": 48.15605,\n\"lng\": 11.55145\n},\n{\n\"lat\": 48.15531,\n\"lng\": 11.55236\n},\n{\n\"lat\": 48.15523,\n\"lng\": 11.55246\n},\n{\n\"lat\": 48.15422,\n\"lng\": 11.55378\n},\n{\n\"lat\": 48.15389,\n\"lng\": 11.55422\n},\n{\n\"lat\": 48.15342,\n\"lng\": 11.55479\n},\n{\n\"lat\": 48.15274,\n\"lng\": 11.55563\n},\n{\n\"lat\": 48.1521,\n\"lng\": 11.55639\n},\n{\n\"lat\": 48.15167,\n\"lng\": 11.5569\n},\n{\n\"lat\": 48.15153,\n\"lng\": 11.55707\n},\n{\n\"lat\": 48.15131,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15102,\n\"lng\": 11.55766\n},\n{\n\"lat\": 48.1509,\n\"lng\": 11.55778\n},\n{\n\"lat\": 48.15085,\n\"lng\": 11.55771\n},\n{\n\"lat\": 48.15077,\n\"lng\": 11.55763\n},\n{\n\"lat\": 48.15061,\n\"lng\": 11.55751\n},\n{\n\"lat\": 48.15043,\n\"lng\": 11.55736\n},\n{\n\"lat\": 48.15036,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15033,\n\"lng\": 11.55733\n},\n{\n\"lat\": 48.15029,\n\"lng\": 11.55735\n},\n{\n\"lat\": 48.15026,\n\"lng\": 11.55737\n},\n{\n\"lat\": 48.15023,\n\"lng\": 11.55742\n},\n{\n\"lat\": 48.15021,\n\"lng\": 11.55746\n},\n{\n\"lat\": 48.15021,\n\"lng\": 11.55753\n},\n{\n\"lat\": 48.15024,\n\"lng\": 11.55783\n},\n{\n\"lat\": 48.15027,\n\"lng\": 11.55813\n},\n{\n\"lat\": 48.15028,\n\"lng\": 11.55824\n},\n{\n\"lat\": 48.15028,\n\"lng\": 11.55836\n},\n{\n\"lat\": 48.15027,\n\"lng\": 11.55848\n},\n{\n\"lat\": 48.15023,\n\"lng\": 11.55868\n},\n{\n\"lat\": 48.1502,\n\"lng\": 11.55881\n},\n{\n\"lat\": 48.15017,\n\"lng\": 11.55891\n},\n{\n\"lat\": 48.14997,\n\"lng\": 11.55967\n},\n{\n\"lat\": 48.14985,\n\"lng\": 11.5601\n},\n{\n\"lat\": 48.14919,\n\"lng\": 11.56242\n},\n{\n\"lat\": 48.14908,\n\"lng\": 11.56282\n},\n{\n\"lat\": 48.14906,\n\"lng\": 11.56288\n},\n{\n\"lat\": 48.14873,\n\"lng\": 11.56403\n},\n{\n\"lat\": 48.14858,\n\"lng\": 11.56455\n},\n{\n\"lat\": 48.14845,\n\"lng\": 11.56501\n},\n{\n\"lat\": 48.14833,\n\"lng\": 11.56545\n},\n{\n\"lat\": 48.14821,\n\"lng\": 11.56587\n},\n{\n\"lat\": 48.14804,\n\"lng\": 11.5665\n},\n{\n\"lat\": 48.14793,\n\"lng\": 11.56688\n},\n{\n\"lat\": 48.14791,\n\"lng\": 11.56696\n},\n{\n\"lat\": 48.14782,\n\"lng\": 11.56726\n},\n{\n\"lat\": 48.1476,\n\"lng\": 11.56804\n},\n{\n\"lat\": 48.14755,\n\"lng\": 11.56823\n},\n{\n\"lat\": 48.14752,\n\"lng\": 11.56834\n},\n{\n\"lat\": 48.14725,\n\"lng\": 11.56927\n},\n{\n\"lat\": 48.14702,\n\"lng\": 11.5701\n},\n{\n\"lat\": 48.14695,\n\"lng\": 11.57037\n},\n{\n\"lat\": 48.14689,\n\"lng\": 11.57057\n},\n{\n\"lat\": 48.14631,\n\"lng\": 11.57269\n},\n{\n\"lat\": 48.14623,\n\"lng\": 11.57297\n},\n{\n\"lat\": 48.14607,\n\"lng\": 11.5732\n},\n{\n\"lat\": 48.14596,\n\"lng\": 11.57336\n},\n{\n\"lat\": 48.14587,\n\"lng\": 11.57355\n},\n{\n\"lat\": 48.14585,\n\"lng\": 11.57359\n},\n{\n\"lat\": 48.14577,\n\"lng\": 11.57378\n},\n{\n\"lat\": 48.14566,\n\"lng\": 11.57413\n},\n{\n\"lat\": 48.14562,\n\"lng\": 11.57426\n},\n{\n\"lat\": 48.14555,\n\"lng\": 11.57433\n},\n{\n\"lat\": 48.14552,\n\"lng\": 11.57439\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57447\n},\n{\n\"lat\": 48.14546,\n\"lng\": 11.5746\n},\n{\n\"lat\": 48.14541,\n\"lng\": 11.57482\n},\n{\n\"lat\": 48.14538,\n\"lng\": 11.57501\n},\n{\n\"lat\": 48.14537,\n\"lng\": 11.57518\n},\n{\n\"lat\": 48.14539,\n\"lng\": 11.57552\n},\n{\n\"lat\": 48.14544,\n\"lng\": 11.57592\n},\n{\n\"lat\": 48.14546,\n\"lng\": 11.57626\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57667\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57702\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57722\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57737\n},\n{\n\"lat\": 48.14551,\n\"lng\": 11.57746\n},\n{\n\"lat\": 48.1455,\n\"lng\": 11.57762\n},\n{\n\"lat\": 48.14549,\n\"lng\": 11.57768\n},\n{\n\"lat\": 48.14547,\n\"lng\": 11.5778\n},\n{\n\"lat\": 48.14537,\n\"lng\": 11.57825\n},\n{\n\"lat\": 48.14525,\n\"lng\": 11.57878\n},\n{\n\"lat\": 48.14486,\n\"lng\": 11.57861\n},\n{\n\"lat\": 48.14467,\n\"lng\": 11.57852\n},\n{\n\"lat\": 48.14428,\n\"lng\": 11.57833\n},\n{\n\"lat\": 48.14411,\n\"lng\": 11.57825\n},\n{\n\"lat\": 48.14389,\n\"lng\": 11.57814\n},\n{\n\"lat\": 48.14357,\n\"lng\": 11.57799\n},\n{\n\"lat\": 48.1433,\n\"lng\": 11.57787\n},\n{\n\"lat\": 48.14318,\n\"lng\": 11.57782\n},\n{\n\"lat\": 48.14304,\n\"lng\": 11.57776\n},\n{\n\"lat\": 48.14263,\n\"lng\": 11.57752\n},\n{\n\"lat\": 48.14258,\n\"lng\": 11.57772\n},\n{\n\"lat\": 48.14244,\n\"lng\": 11.57771\n},\n{\n\"lat\": 48.14237,\n\"lng\": 11.57791\n},\n{\n\"lat\": 48.14244,\n\"lng\": 11.57771\n},\n{\n\"lat\": 48.14258,\n\"lng\": 11.57772\n},\n{\n\"lat\": 48.14251,\n\"lng\": 11.57804\n},\n{\n\"lat\": 48.14249,\n\"lng\": 11.57811\n},\n{\n\"lat\": 48.14241,\n\"lng\": 11.57837\n},\n{\n\"lat\": 48.14234,\n\"lng\": 11.57869\n},\n{\n\"lat\": 48.14222,\n\"lng\": 11.57923\n},\n{\n\"lat\": 48.14208,\n\"lng\": 11.57917\n},\n{\n\"lat\": 48.14193,\n\"lng\": 11.57996\n},\n{\n\"lat\": 48.14182,\n\"lng\": 11.58051\n},\n{\n\"lat\": 48.14166,\n\"lng\": 11.58118\n},\n{\n\"lat\": 48.14151,\n\"lng\": 11.58122\n},\n{\n\"lat\": 48.14122,\n\"lng\": 11.58107\n},\n{\n\"lat\": 48.1408,\n\"lng\": 11.58089\n},\n{\n\"lat\": 48.14029,\n\"lng\": 11.58068\n},\n{\n\"lat\": 48.1401,\n\"lng\": 11.58061\n},\n{\n\"lat\": 48.13995,\n\"lng\": 11.58055\n},\n{\n\"lat\": 48.13937,\n\"lng\": 11.58033\n},\n{\n\"lat\": 48.1391,\n\"lng\": 11.58025\n},\n{\n\"lat\": 48.13916,\n\"lng\": 11.57996\n},\n{\n\"lat\": 48.13878,\n\"lng\": 11.57965\n},\n{\n\"lat\": 48.13871,\n\"lng\": 11.57983\n},\n{\n\"lat\": 48.13859,\n\"lng\": 11.58013\n}\n],\n\"alternative\": false\n}\n],\n\"markers\": [\n{\n\"id\": \"100\",\n\"position\": {\n\"lat\": 48.17933,\n\"lng\": 11.48731\n},\n\"markerProps\": {\n\"active\": false,\n\"iconNames\": [\n\"start\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"clickable\": false\n}\n},\n{\n\"id\": \"200\",\n\"position\": {\n\"lat\": 48.13859,\n\"lng\": 11.58013\n},\n\"markerProps\": {\n\"active\": false,\n\"iconNames\": [\n\"finish\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"clickable\": false\n}\n},\n{\n\"id\": \"59.70357\",\n\"position\": {\n\"lat\": 48.16745,\n\"lng\": 11.53612\n},\n\"markerProps\": {\n\"active\": true,\n\"iconNames\": [\n\"route\"\n],\n\"markerColor\": \"bg-map-marker-route\",\n\"name\": \"10 km / 36 min\",\n\"clickable\": false,\n\"fixed\": true\n}\n}\n]\n}\n\nSelect file...\n\nCreate demo routeCreate demo markerToggle route events\nEnter your route data into the input or select a JSON file to render a route with multiple segments and markers. Please note that this will replace all previously existing markers and route segments.\nSegments are separate parts of the route, each containing a list of points, which can be rendered as reduced route (semi-transparent) and with or without arrows (showArrows). A Marker should provide aposition and markerProps to define its shape.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |\n| hasArrows | Boolean | true | Defines whether to show arrows or not. |\n| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |\n| isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |\n| isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |\n| style | RouteStyle | — | Custom style for the route. |\n| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |\n| startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |\n| middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |\n| endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |\n| markers | JSX.Element[] | — | Array of markers to be displayed on the route. |\n| customData | object | — | Custom data to be passed to the route. |",
     "category": "Components",
     "section": "Map",
     "boost": "Route components/mapRoute #components/mapRoute Components Map"
@@ -653,8 +643,8 @@
     "id": "components/mapSettings",
     "title": "Map settings",
     "lead": null,
-    "summary": "Terms of use© 1987–2025 HERE",
-    "searchText": "Map settings\nMap settings\nTerms of use© 1987–2025 HERE\n\n20 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nMap TypeDayDay\nFleet style\nSatellite\nTerrain\nNight\n\nMap LayerPlease select...Incidents\nTraffic\nRoad restrictions\n\nLanguageEnglishEnglish\nGerman\nPolish\n\nZoom\n\nMin zoom\n\nMax zoom\n\nMap centerReset position\n\nClusterShow cluster\nRenderingWebGL vector tiles\nUse device pixel ratio\n\nMap centerN48° 30.000′ E12° 6.000′\nSettings examples\nNo settings\n\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nWithout cluster settings\n\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents\n\nWithout cluster and map layer settings\n\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents\n\nStatic map without interaction\n\nTerms of use© 1987–2025 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents",
+    "summary": "Terms of use© 1987–2026 HERE",
+    "searchText": "Map settings\nMap settings\nTerms of use© 1987–2026 HERE\n\n20 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nMap TypeDayDay\nFleet style\nSatellite\nTerrain\nNight\n\nMap LayerPlease select...Incidents\nTraffic\nRoad restrictions\n\nLanguageEnglishEnglish\nGerman\nPolish\n\nZoom\n\nMin zoom\n\nMax zoom\n\nMap centerReset position\n\nClusterShow cluster\nRenderingWebGL vector tiles\nUse device pixel ratio\n\nMap centerN48° 30.000′ E12° 6.000′\nSettings examples\nNo settings\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nWithout cluster settings\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents\n\nWithout cluster and map layer settings\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents\n\nStatic map without interaction\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents",
     "category": "Components",
     "section": "Map",
     "boost": "Map settings components/mapSettings #components/mapSettings Components Map"
@@ -664,7 +654,7 @@
     "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};",
+    "searchText": "Map utils\nMap utils\nimport { useRef, useState } from 'react';\nimport { isEqual } from 'es-toolkit/compat';\n\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 as H.Map;\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"
@@ -684,7 +674,7 @@
     "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. |",
+    "searchText": "NoData\nNoData\nSimple NoData elementNo data\nSimple NoData element with lager textNo data\nNoData with tooltipNo data\nNoData with tooltip rightNo data\nNoData in tablesColumn 1Column 2Column 3\n\nLoremNo dataNo data\nIpsumNo dataNo data",
     "category": "Components",
     "section": "Content",
     "boost": "NoData components/noData #components/noData Components Content"
@@ -704,7 +694,7 @@
     "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. |",
+    "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\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",
     "category": "Components",
     "section": "Interaction",
     "boost": "NumberInput components/numbercontrol #components/numbercontrol Components Interaction"
@@ -714,7 +704,7 @@
     "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). |",
+    "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\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",
     "category": "Components",
     "section": "Misc",
     "boost": "Onboarding components/onboarding #components/onboarding Components Misc"
@@ -724,7 +714,7 @@
     "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 |",
+    "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.\nPage 1\n\nPage 2\n\nPage 3\n\nPage 4\n\nPage 5\n\nPage 6\nPortrait\n\nLandscape",
     "category": "Components",
     "section": "Content",
     "boost": "Page components/page #components/page Components Content"
@@ -734,7 +724,7 @@
     "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. |",
+    "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",
     "category": "Components",
     "section": "Navigation",
     "boost": "Pager components/pager #components/pager Components Navigation"
@@ -754,7 +744,7 @@
     "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. |",
+    "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\nExtended example\nClick Me",
     "category": "Components",
     "section": "Misc",
     "boost": "Popover components/popover #components/popover Components Misc"
@@ -764,7 +754,7 @@
     "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 |",
+    "searchText": "Position\nA helper component to format a latitude / longitude position.\nPosition\nN48° 8.246′ E11° 34.529′N52° 7.394′ W12° 14.054′",
     "category": "Components",
     "section": "Misc",
     "boost": "Position components/position #components/position Components Misc"
@@ -784,7 +774,7 @@
     "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\". |",
+    "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\nLast selected option: nothing selected yet\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tabIndex |  | — | 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 |\nControlled example\nOption 1Option 2Option 3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tabIndex |  | — | 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 |\nRadioButton with FormData\nPlease contact me viaEmailPhone\nSubmit selectionSelected value-\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tabIndex |  | — | 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 |\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| tabIndex |  | — | 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 |\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| tabIndex |  | — | 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 |\nCustom list example\nVehicle type\nTruck\n\nTrailer\n\nBus\n\nVan\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tabIndex |  | — | 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 |\nCustom example without the tick\n4 GB\n8 GB\n16 GB\n32 GB\n64 GB\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tabIndex |  | — | 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 |\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| tabIndex |  | — | 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 |",
     "category": "Components",
     "section": "Interaction",
     "boost": "RadioButton components/radiobutton #components/radiobutton Components Interaction"
@@ -804,7 +794,7 @@
     "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. |",
+    "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):",
     "category": "Components",
     "section": "Misc",
     "boost": "Resizer components/resizer #components/resizer Components Misc"
@@ -814,7 +804,7 @@
     "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. |",
+    "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",
     "category": "Components",
     "section": "Content",
     "boost": "ResponsiveColumnStripe components/responsiveColumnStripe #components/responsiveColumnStripe Components Content"
@@ -824,7 +814,7 @@
     "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. |",
+    "searchText": "Responsive Video\nResponsive Video\nResponsive Video 16x9\n\nResponsive Video 4x3",
     "category": "Components",
     "section": "Misc",
     "boost": "Responsive Video components/responsiveVideo #components/responsiveVideo Components Misc"
@@ -834,7 +824,7 @@
     "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 |",
+    "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 | — | — |",
     "category": "Components",
     "section": "Misc",
     "boost": "Rioglyph components/rioglyph #components/rioglyph Components Misc"
@@ -844,7 +834,7 @@
     "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. |",
+    "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\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\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.",
     "category": "Components",
     "section": "Misc",
     "boost": "RulesWrapper, RuleContainer and RuleConnector components/rules #components/rules Components Misc"
@@ -854,7 +844,7 @@
     "title": "SaveableInput",
     "lead": null,
     "summary": "SaveableInput",
-    "searchText": "SaveableInput\nSaveableInput\nSaveableInput\n\nSaveableInput with value\n\nSaveableInput with previous value\nDolor sit amet\n\nSaveableInput with fixed previous value\nYou shall not pass\n\nSaveableInput with default button style\n\nSaveableInput with unit and icon\nPcs\n\nSaveableInput with feedback\nLab\n\nThis is an error message\n\nDisabled SaveableInput\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nWith error feedback and disabled save button\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput\n\nRandomize valuesClear values\n\n{\nvalue: '',\npreviousValue: ''\n}\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput with key validation\nPcs\n\n{\nvalue: '0',\npreviousValue: ''\n}\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nSaveableDateInput\nSaveableDateInput (uncontrolled)\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\nControlled - Stay open on invalid (default)\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n04:02\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\n4:02 PM\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | Date \\| Moment \\| String | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: Moment \\| string, previousValue: Moment \\| string \\| Date) =void | — | Callback function triggered when the value changes and is saved. |\n| onInputChange | (value: Moment \\| string, isValid: boolean) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component and to handle the previous value on the outside. |\n| onExitEdit | (wasSaved: boolean) =void | — | Callback function that gets triggered when edit mode is exited (either saved or cancelled). |\n| onCancel | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| invalidExitBehavior | \"stay-open\" \\| \"reset-and-close\" | \"stay-open\" | Behavior when trying to exit edit mode with invalid input: stay-open: Keep edit mode open until valid input is provided reset-and-close: Close edit mode and reset to initial value |\n| buttonStyle | \"default\" \\| \"primary\" | — | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | — | Props passed directly to the date picker component. |\n| disabled | Boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |",
+    "searchText": "SaveableInput\nSaveableInput\nSaveableInput\n\nSaveableInput with value\n\nSaveableInput with previous value\nDolor sit amet\n\nSaveableInput with fixed previous value\nYou shall not pass\n\nSaveableInput with default button style\n\nSaveableInput with unit and icon\nPcs\n\nSaveableInput with feedback\nLab\n\nThis is an error message\n\nDisabled SaveableInput\nWith error feedback and disabled save button\nControlled SaveableInput\n\nRandomize valuesClear values\n\n{\nvalue: '',\npreviousValue: ''\n}\nControlled SaveableInput with key validation\nPcs\n\n{\nvalue: '0',\npreviousValue: ''\n}\nSaveableDateInput\nSaveableDateInput (uncontrolled)\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\nControlled - Stay open on invalid (default)\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n10:07\n\nSaved value:\n\nControlled - With error\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nSaveableDateInput (disabled)\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n10:07 AM",
     "category": "Components",
     "section": "Interaction",
     "boost": "SaveableInput components/saveableInput #components/saveableInput Components Interaction"
@@ -864,7 +854,7 @@
     "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. |",
+    "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 filterPlease select0\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n35\n36\n37\n38\n39\n40\n41\n42\n43\n44\n45\n46\n47\n48\n49\n50\n51\n52\n53\n54\n55\n56\n57\n58\n59\n60\n61\n62\n63\n64\n65\n66\n67\n68\n69\n70\n71\n72\n73\n74\n75\n76\n77\n78\n79\n80\n81\n82\n83\n84\n85\n86\n87\n88\n89\n90\n91\n92\n93\n94\n95\n96\n97\n98\n99\n100\n101\n102\n103\n104\n105\n106\n107\n108\n109\n110\n111\n112\n113\n114\n115\n116\n117\n118\n119\n120\n121\n122\n123\n124\n125\n126\n127\n128\n129\n130\n131\n132\n133\n134\n135\n136\n137\n138\n139\n140\n141\n142\n143\n144\n145\n146\n147\n148\n149\n150\n151\n152\n153\n154\n155\n156\n157\n158\n159\n160\n161\n162\n163\n164\n165\n166\n167\n168\n169\n170\n171\n172\n173\n174\n175\n176\n177\n178\n179\n180\n181\n182\n183\n184\n185\n186\n187\n188\n189\n190\n191\n192\n193\n194\n195\n196\n197\n198\n199\n200\n201\n202\n203\n204\n205\n206\n207\n208\n209\n210\n211\n212\n213\n214\n215\n216\n217\n218\n219\n220\n221\n222\n223\n224\n225\n226\n227\n228\n229\n230\n231\n232\n233\n234\n235\n236\n237\n238\n239\n240\n241\n242\n243\n244\n245\n246\n247\n248\n249\n250\n251\n252\n253\n254\n255\n256\n257\n258\n259\n260\n261\n262\n263\n264\n265\n266\n267\n268\n269\n270\n271\n272\n273\n274\n275\n276\n277\n278\n279\n280\n281\n282\n283\n284\n285\n286\n287\n288\n289\n290\n291\n292\n293\n294\n295\n296\n297\n298\n299\n300\n301\n302\n303\n304\n305\n306\n307\n308\n309\n310\n311\n312\n313\n314\n315\n316\n317\n318\n319\n320\n321\n322\n323\n324\n325\n326\n327\n328\n329\n330\n331\n332\n333\n334\n335\n336\n337\n338\n339\n340\n341\n342\n343\n344\n345\n346\n347\n348\n349\n350\n351\n352\n353\n354\n355\n356\n357\n358\n359\n360\n361\n362\n363\n364\n365\n366\n367\n368\n369\n370\n371\n372\n373\n374\n375\n376\n377\n378\n379\n380\n381\n382\n383\n384\n385\n386\n387\n388\n389\n390\n391\n392\n393\n394\n395\n396\n397\n398\n399\n400\n401\n402\n403\n404\n405\n406\n407\n408\n409\n410\n411\n412\n413\n414\n415\n416\n417\n418\n419\n420\n421\n422\n423\n424\n425\n426\n427\n428\n429\n430\n431\n432\n433\n434\n435\n436\n437\n438\n439\n440\n441\n442\n443\n444\n445\n446\n447\n448\n449\n450\n451\n452\n453\n454\n455\n456\n457\n458\n459\n460\n461\n462\n463\n464\n465\n466\n467\n468\n469\n470\n471\n472\n473\n474\n475\n476\n477\n478\n479\n480\n481\n482\n483\n484\n485\n486\n487\n488\n489\n490\n491\n492\n493\n494\n495\n496\n497\n498\n499\n500\n501\n502\n503\n504\n505\n506\n507\n508\n509\n510\n511\n512\n513\n514\n515\n516\n517\n518\n519\n520\n521\n522\n523\n524\n525\n526\n527\n528\n529\n530\n531\n532\n533\n534\n535\n536\n537\n538\n539\n540\n541\n542\n543\n544\n545\n546\n547\n548\n549\n550\n551\n552\n553\n554\n555\n556\n557\n558\n559\n560\n561\n562\n563\n564\n565\n566\n567\n568\n569\n570\n571\n572\n573\n574\n575\n576\n577\n578\n579\n580\n581\n582\n583\n584\n585\n586\n587\n588\n589\n590\n591\n592\n593\n594\n595\n596\n597\n598\n599\n600\n601\n602\n603\n604\n605\n606\n607\n608\n609\n610\n611\n612\n613\n614\n615\n616\n617\n618\n619\n620\n621\n622\n623\n624\n625\n626\n627\n628\n629\n630\n631\n632\n633\n634\n635\n636\n637\n638\n639\n640\n641\n642\n643\n644\n645\n646\n647\n648\n649\n650\n651\n652\n653\n654\n655\n656\n657\n658\n659\n660\n661\n662\n663\n664\n665\n666\n667\n668\n669\n670\n671\n672\n673\n674\n675\n676\n677\n678\n679\n680\n681\n682\n683\n684\n685\n686\n687\n688\n689\n690\n691\n692\n693\n694\n695\n696\n697\n698\n699\n700\n701\n702\n703\n704\n705\n706\n707\n708\n709\n710\n711\n712\n713\n714\n715\n716\n717\n718\n719\n720\n721\n722\n723\n724\n725\n726\n727\n728\n729\n730\n731\n732\n733\n734\n735\n736\n737\n738\n739\n740\n741\n742\n743\n744\n745\n746\n747\n748\n749\n750\n751\n752\n753\n754\n755\n756\n757\n758\n759\n760\n761\n762\n763\n764\n765\n766\n767\n768\n769\n770\n771\n772\n773\n774\n775\n776\n777\n778\n779\n780\n781\n782\n783\n784\n785\n786\n787\n788\n789\n790\n791\n792\n793\n794\n795\n796\n797\n798\n799\n800\n801\n802\n803\n804\n805\n806\n807\n808\n809\n810\n811\n812\n813\n814\n815\n816\n817\n818\n819\n820\n821\n822\n823\n824\n825\n826\n827\n828\n829\n830\n831\n832\n833\n834\n835\n836\n837\n838\n839\n840\n841\n842\n843\n844\n845\n846\n847\n848\n849\n850\n851\n852\n853\n854\n855\n856\n857\n858\n859\n860\n861\n862\n863\n864\n865\n866\n867\n868\n869\n870\n871\n872\n873\n874\n875\n876\n877\n878\n879\n880\n881\n882\n883\n884\n885\n886\n887\n888\n889\n890\n891\n892\n893\n894\n895\n896\n897\n898\n899\n900\n901\n902\n903\n904\n905\n906\n907\n908\n909\n910\n911\n912\n913\n914\n915\n916\n917\n918\n919\n920\n921\n922\n923\n924\n925\n926\n927\n928\n929\n930\n931\n932\n933\n934\n935\n936\n937\n938\n939\n940\n941\n942\n943\n944\n945\n946\n947\n948\n949\n950\n951\n952\n953\n954\n955\n956\n957\n958\n959\n960\n961\n962\n963\n964\n965\n966\n967\n968\n969\n970\n971\n972\n973\n974\n975\n976\n977\n978\n979\n980\n981\n982\n983\n984\n985\n986\n987\n988\n989\n990\n991\n992\n993\n994\n995\n996\n997\n998\n999\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"
@@ -874,7 +864,7 @@
     "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. |",
+    "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",
     "category": "Components",
     "section": "Application",
     "boost": "Sidebar components/sidebar #components/sidebar Components Application"
@@ -884,7 +874,7 @@
     "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. |",
+    "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 %\nRangeSlider\nStandard RangeSlider\n\nRangeSlider with value labels\n150 €\n400 €\n\nDisabled RangeSlider",
     "category": "Components",
     "section": "Interaction",
     "boost": "Slider components/sliders #components/sliders Components Interaction"
@@ -894,7 +884,7 @@
     "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 |",
+    "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.\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.\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.\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.\nHorizontal Example\nFull Example",
     "category": "Components",
     "section": "Misc",
     "boost": "SmoothScrollbars components/smoothScrollbars #components/smoothScrollbars Components Misc"
@@ -904,7 +894,7 @@
     "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. |",
+    "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\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\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\nSpinner fullscreen\nToggle fullscreen loading spinnerexit fullscreen with esc key",
     "category": "Components",
     "section": "Misc",
     "boost": "Spinner components/spinners #components/spinners Components Misc"
@@ -912,9 +902,9 @@
   {
     "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. |",
+    "lead": null,
+    "summary": "Something went wrong",
+    "searchText": "ErrorState\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| children | any | — | Additional elements that are rendered below the headline and text. |\nNotFoundState\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| children | any | — | Additional elements that are rendered below the headline and text. |\nEmptyState\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| children | any | — | Additional elements that are rendered below the headline and text. |\nForbiddenState\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| children | any | — | Additional elements that are rendered below the headline and text. |\nMaintenanceState\nService in maintenance\nWe are sorry for the inconvenience. The interruption will be resolved shortly.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| children | any | — | Additional elements that are rendered below the headline and text. |\nCustomState\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| children | any | — | 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| children | any | — | Additional elements that are rendered below the headline and text. |\nNotBookedState\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| children | any | — | 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| children | any | — | Additional elements that are rendered below the headline and text. |\nEnd User License 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| children | any | — | Additional elements that are rendered below the headline and text. |\nTable with a 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| children | any | — | Additional elements that are rendered below the headline and text. |",
     "category": "Components",
     "section": "Content",
     "boost": "ErrorState components/states #components/states Components Content"
@@ -924,7 +914,7 @@
     "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. |",
+    "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\nCurrent activity\n\n42 min resting\n\nLast update 2 minutes ago\nNotifications\n45\n\nExceptions\n\n144\n\nWarnings",
     "category": "Components",
     "section": "Content",
     "boost": "StatsWidgets components/statsWidgets #components/statsWidgets Components Content"
@@ -934,7 +924,7 @@
     "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. |",
+    "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",
     "category": "Components",
     "section": "Progress",
     "boost": "StatusBar components/statusBar #components/statusBar Components Progress"
@@ -944,7 +934,7 @@
     "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. |",
+    "searchText": "StepButton\nThe StepButton is a convenient component designed to simplify usage and alignment of buttons with chevrons.\nStepButton\nStep buttons\nPreviousNext",
     "category": "Components",
     "section": "Interaction",
     "boost": "StepButton components/stepButton #components/stepButton Components Interaction"
@@ -954,7 +944,7 @@
     "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. |",
+    "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\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\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\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",
     "category": "Components",
     "section": "Progress",
     "boost": "SteppedProgressBar - Circle components/steppedProgressBars #components/steppedProgressBars Components Progress"
@@ -964,7 +954,7 @@
     "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",
+    "searchText": "SubNavigation\nSubNavigation\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\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"
@@ -984,7 +974,7 @@
     "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. |",
+    "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",
     "category": "Components",
     "section": "Misc",
     "boost": "SvgImage components/svgImage #components/svgImage Components Misc"
@@ -994,7 +984,7 @@
     "title": "Switch",
     "lead": null,
     "summary": "Switch",
-    "searchText": "Switch\nSwitch\nSwitch\n\nDisabled Switch & disabled active Switch\n\nColored Switch\n\nSwitch with label\n\nLabel\n\nSwitch with label left\n\nLabel\n\nSwitch with text and min-width\n\nSwitch with single text and label\n\nBeta feature toggle\n\nSwitch in panels\n\nSwitch in alerts\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| keyName | String | — | Optional key that is used as key and as the id on the internal input. |\n| 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'. |",
+    "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| color | string | — | — |",
     "category": "Components",
     "section": "Interaction",
     "boost": "Switch components/switch #components/switch Components Interaction"
@@ -1024,7 +1014,7 @@
     "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. |",
+    "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",
     "category": "Components",
     "section": "Misc",
     "boost": "Tag components/tags #components/tags Components Misc"
@@ -1034,7 +1024,7 @@
     "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. |",
+    "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| teaserPerRow | number | — | — |",
     "category": "Components",
     "section": "Content",
     "boost": "Teaser components/teaser #components/teaser Components Content"
@@ -1054,7 +1044,7 @@
     "title": "TimePicker",
     "lead": null,
     "summary": "Uncontrolled component",
-    "searchText": "TimePicker\nTimePicker\nUncontrolled component\n\nWith icon\n\nControlled component without initial value\n\nSet current timeClear time\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |\n| onChange | 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. |",
+    "searchText": "TimePicker\nTimePicker\nUncontrolled component\n\nWith icon\n\nControlled component without initial value\n\nSet current timeClear time\nDefaultPlease insert a valid time\n\nWith iconJust a normal warning message",
     "category": "Components",
     "section": "Pickers",
     "boost": "TimePicker components/timepicker #components/timepicker Components Pickers"
@@ -1064,7 +1054,7 @@
     "title": "ToggleButton",
     "lead": "This toggle button is based on the button component that can be used directly.",
     "summary": "This toggle button is based on the button component that can be used directly.",
-    "searchText": "ToggleButton\nThis toggle button is based on the button component that can be used directly.\nToggleButton\nDefault ToggleButtons\nbtn-default (untoggled)btn-default (toggled)btn-primary (untoggled)\nOther Styles\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | Boolean | false | 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. |",
+    "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| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\nControlled ToggleButton\n\nControl the toggle\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |",
     "category": "Components",
     "section": "Interaction",
     "boost": "ToggleButton components/toggleButton #components/toggleButton Components Interaction"
@@ -1074,7 +1064,7 @@
     "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. |",
+    "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| placement | string | — | — |\n| textAlignment | string | — | — |\n| tooltipStyle | string | — | — |\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### Tooltip\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placement | string | — | — |\n| textAlignment | string | — | — |\n| tooltipStyle | string | — | — |",
     "category": "Components",
     "section": "Misc",
     "boost": "Tooltips components/tooltip #components/tooltip Components Misc"
@@ -1084,7 +1074,7 @@
     "title": "VirtualList",
     "lead": "The VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.",
     "summary": "The VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.",
-    "searchText": "VirtualList\nThe VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.\nVirtualList\nIt allows a specified number of items outside the viewport for smoother scrolling. It optimizes performance by minimizing DOM updates and provides a customizable rendering function for each item, making it ideal for applications that require dynamic and responsive list displays.\nVirtual list with 100 itemsItem 1\nEget ligula consectetur posuere viverra lorem In ipsum malesuada\n\nItem 2\nFringilla elit. efficitur ipsum in elit. massa Duis\n\nItem 3\nOrci felis. iaculis. rutrum semper. ante\n\nItem 4\nEt tincidunt. metus quis, massa, lorem et orci neque. ut elementum efficitur ante massa,\n\nItem 5\nIpsum iaculis. sit primis ut orci\n\nItem 6\nNec in sit posuere malesuada pretium adipiscing sagittis metus efficitur enim eget in\n\nItem 7\n\nLorem libero metus tortor ante In In\n\nItem 8\nVivamus In vitae semper in pretium finibus Sed consectetur in, dolor et dolor lorem in,\n\nItem 9\nEfficitur felis. Duis bibendum, massa,\n\nItem 10\nSagittis ac scelerisque posuere faucibus. vel eget In quis,\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\nPosuere viverra semper Duis molestie orci\n\nVehicle 2\nPosuere vitae orci, pharetra eget orci, molestie metus ante orci,\n\nVehicle 3\nIn ut metus massa, consectetur iaculis. ligula molestie nunc pretium\n\nVehicle 4\nPurus tincidunt. et primis vitae consectetur Duis est ac primis ligula Vivamus est sagittis Fusce\n\nVehicle 5\nPharetra orci, volutpat aliquam eget massa pretium nec fringilla faucibus. vitae\n\nVehicle 6\nIaculis. efficitur felis. tortor est\n\nVehicle 7\nInterdum ante semper. hendrerit ante faucibus. pretium condimentum ligula hendrerit in in vitae\n\nVehicle 8\nTincidunt. in in orci elementum viverra Fusce in semper ut orci iaculis. Integer quis,\n\nVehicle 9\nVel orci, semper consectetur\nLorem ac pretium pharetra Vivamus\n\nVehicle 10\nTortor sagittis metus elit. ac ante dui efficitur felis. nec malesuada\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container. |",
+    "searchText": "VirtualList\nThe VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.\nVirtualList\nIt allows a specified number of items outside the viewport for smoother scrolling. It optimizes performance by minimizing DOM updates and provides a customizable rendering function for each item, making it ideal for applications that require dynamic and responsive list displays.\nVirtual list with 100 itemsItem 1\nAliquam in massa, Integer lorem neque.\n\nItem 2\nNunc Duis consectetur purus primis sit metus Sed ipsum consectetur adipiscing vel\n\nItem 3\nEfficitur ac Sed felis. tincidunt. elementum bibendum, finibus ac pharetra sit scelerisque\n\nItem 4\nElementum consectetur tortor dui volutpat\n\nItem 5\nHendrerit ipsum ante\nLorem massa neque. orci pretium est Ut faucibus. ac primis quis,\n\nItem 6\nSemper. semper malesuada ligula Fusce in,\n\nItem 7\nEnim iaculis. ac et pretium ante\n\nItem 8\nIn,\nLorem molestie ligula ante primis\n\nItem 9\nVivamus hendrerit fames Integer enim in tincidunt. ante Duis in ac ante ante ut Fusce\n\nItem 10\nEnim tortor finibus in, posuere dolor efficitur\nVirtual list with 5000 items\nVehicle 1\nFaucibus. fringilla massa vel ut neque. ante in ipsum metus consectetur Mauris Mauris efficitur\n\nVehicle 2\nTincidunt. ante ipsum aliquam eget hendrerit pharetra et ante Interdum\n\nVehicle 3\nVivamus vel ipsum consectetur ut sit purus\n\nVehicle 4\nIaculis. ut fringilla adipiscing posuere ligula ac ligula\n\nVehicle 5\nFames dolor purus consectetur neque. Sed semper. sit eget in, orci,\n\nVehicle 6\nEget eget in efficitur fames vitae ante\n\nVehicle 7\nSagittis finibus Duis in, condimentum malesuada\n\nVehicle 8\nSemper felis. consectetur libero nec tincidunt. Ut rutrum adipiscing tincidunt. molestie nunc sagittis finibus\n\nVehicle 9\nTortor ipsum eget orci, ipsum\n\nVehicle 10\nUt tincidunt. vel fames volutpat posuere est In pharetra consectetur consectetur sagittis Mauris",
     "category": "Components",
     "section": "Content",
     "boost": "VirtualList components/virtualList #components/virtualList Components Content"
@@ -1094,7 +1084,7 @@
     "title": "Foundations",
     "lead": "You can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light",
     "summary": "You can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light",
-    "searchText": "Foundations\nYou can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light\nButtons\nSee also our Button component.\n\nNote: For having spacing between buttons in a single row you may want to wrap them with<div class=\"btn-toolbar\"</div\n\nNote: You can use link buttons within text blocks by adding btn-linkbtn-link-inline\nDefault buttons\n\nDefaultDefault\n\nIcon buttons\n\nMuted buttons\n\nMuted filledMuted\n\nLink buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nColored buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nOutline buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nSplit buttons\n\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted-filled\nButton states\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButton sizes\nXS buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nXS icon buttons\n\nSM buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nSM icon buttons\n\nMD buttons (default)\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nMD icon buttons (default)\n\nLG buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nLG icon buttons\nButton examples\nButton toolbar\n\nPrevNext\n\nButton group\n\n1234\n\nButtonButtonButton\n\nMultiline button\n\nThis is a multiline button with a lot of Text\nBlock button\n\nBlock level button\nTooltip buttons\n\nButton with tooltipDisabled button with tooltip\nAction buttons\nClick meClick meClick meClick meClick meClick me\nBackground colors\nBasic\nbg-white\nbg-black\n\nBrand\nbg-primary\nbg-secondary\n\nStatus\nbg-info\nbg-success\nbg-warning\nbg-danger\n\nDriving status\nbg-status-available\nbg-status-driving\nbg-status-resting\nbg-status-working\n\nMap marker\nbg-map-marker-asset\nbg-map-marker-poi\nbg-map-marker-geofence\nbg-map-marker-route\n\nRating\nbg-rating-1\nbg-rating-2\nbg-rating-3\nbg-rating-4\nbg-rating-5\n\nGray\nbg-decent\nbg-lightest\nbg-lighter\nbg-light\nbg-gray\nbg-dark\nbg-darker\nbg-darkest\n\nHighlight\nbg-highlight-decent\nbg-highlight-lightest\nbg-highlight-lighter\nbg-highlight-light\nbg-highlight\nbg-highlight-dark\nbg-highlight-darker\nbg-highlight-darkest\nHover background colors\nBasic\nhover-bg-white\nhover-bg-black\n\nBrand\nhover-bg-primary\nhover-bg-secondary\n\nStatus\nhover-bg-info\nhover-bg-success\nhover-bg-warning\nhover-bg-danger\n\nDriving status\nhover-bg-status-available\nhover-bg-status-driving\nhover-bg-status-resting\nhover-bg-status-working\n\nMap Marker\nhover-bg-map-marker-asset\nhover-bg-map-marker-poi\nhover-bg-map-marker-geofence\nhover-bg-map-marker-route\n\nRating\nhover-bg-rating-1\nhover-bg-rating-2\nhover-bg-rating-3\nhover-bg-rating-4\nhover-bg-rating-5\n\nGray\nhover-bg-decent\nhover-bg-lightest\nhover-bg-lighter\nhover-bg-light\nhover-bg-gray\nhover-bg-dark\nhover-bg-darker\nhover-bg-darkest\n\nHighlight\nhover-bg-highlight-decent\nhover-bg-highlight-lightest\nhover-bg-highlight-lighter\nhover-bg-highlight-light\nhover-bg-highlight\nhover-bg-highlight-dark\nhover-bg-highlight-darker\nhover-bg-highlight-darkest\nText\nBasic\ntext-color-white\ntext-color-black\n\nBrand\ntext-color-primary\ntext-color-secondary\n\nStatus\ntext-color-info\ntext-color-success\ntext-color-warning\ntext-color-danger\n\nDriving status\ntext-color-status-available\ntext-color-status-driving\ntext-color-status-resting\ntext-color-status-working\n\nMap marker\ntext-color-map-marker-asset\ntext-color-map-marker-poi\ntext-color-map-marker-geofence\ntext-color-map-marker-route\n\nRating\ntext-color-rating-1\ntext-color-rating-2\ntext-color-rating-3\ntext-color-rating-4\ntext-color-rating-5\n\nGray\ntext-color-decent\ntext-color-lightest\ntext-color-lighter\ntext-color-light\ntext-color-gray\ntext-color-dark\ntext-color-darker\ntext-color-darkest\n\nHighlight\ntext-color-highlight-decent\ntext-color-highlight-lightest\ntext-color-highlight-lighter\ntext-color-highlight-light\ntext-color-highlight\ntext-color-highlight-dark\ntext-color-highlight-darker\ntext-color-highlight-darkest\nHover text\nBasic\nhover-text-color-white\nhover-text-color-black\n\nBrand\nhover-text-color-primary\nhover-text-color-secondary\n\nStatus\nhover-text-color-info\nhover-text-color-success\nhover-text-color-warning\nhover-text-color-danger\n\nDriving status\nhover-text-color-status-available\nhover-text-color-status-driving\nhover-text-color-status-resting\nhover-text-color-status-working\n\nMap marker\nhover-text-color-map-marker-asset\nhover-text-color-map-marker-poi\nhover-text-color-map-marker-geofence\nhover-text-color-map-marker-route\n\nRating\nhover-text-color-rating-1\nhover-text-color-rating-2\nhover-text-color-rating-3\nhover-text-color-rating-4\nhover-text-color-rating-5\n\nGray\nhover-text-color-decent\nhover-text-color-lightest\nhover-text-color-lighter\nhover-text-color-light\nhover-text-color-gray\nhover-text-color-dark\nhover-text-color-darker\nhover-text-color-darkest\n\nHighlight\nhover-text-color-highlight-decent\nhover-text-color-highlight-lightest\nhover-text-color-highlight-lighter\nhover-text-color-highlight-light\nhover-text-color-highlight\nhover-text-color-highlight-dark\nhover-text-color-highlight-darker\nhover-text-color-highlight-darkest\nSVGs\nBackground\nBackground size\n\nBackground position\n\nBackground repeat\nBorder\nHover Border Color\n\nHover Border Color with Transition\n\nHover Border Style\nLast Child (Self Class)\n\nChild\nChild\nChild\nChild\nChild\n\nLast Child (Parent Class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst Child (Self Class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst Child (Parent Class)\n\nChild\nChild\nChild\nChild\nChild\nDivider\nYou can use the the shorthanddivider-yfor the automatic combination ofdivider-y-1,divider-style-solidanddivider-color-light\ndivider-y-1\ndivider-y-1\ndivider-y-1\ndivider-y-1\n\ndivider-y-2\ndivider-y-2\ndivider-y-2\ndivider-y-2\n\ndivider-y-3\ndivider-y-3\ndivider-y-3\ndivider-y-3\n\ndivider-x-1\ndivider-x-1\ndivider-x-1\n\ndivider-x-1\ndivider-x-1\ndivider-x-1\n\ndivider-x-2\ndivider-x-2\ndivider-x-2\nOpacity\n0\n10\n20\n30\n40\n50\n60\n70\n80\n90\n100\nHover opacity\n0\n10\n20\n30\n40\n50\n60\n70\n80\n90\n100\nRounded\nrounded\n...-circle\n\n...-top\n...-bottom\n...-left\n...-right\n\n...-top-left\n...-top-right\n...-bottom-right\n...-bottom-left\n...-small\n...\n...-large\n...-extra-large\nShadows\nThe default shadow class is intended to be used on panels or blocks which should stand out from the light gray background and should be avoided to put everywhere. Use it to emphasize certain blocks or panels e.g. on a dashboard or items of a drag and drop list.\n\nDo not use hard shadows on tables, in dialogs, or on elements placed on white background.\n\nThe exception for not using shadows on a white background is for floating elements placed above the content for instance via position absolute.\nshadow-default\nPanel with shadow\nshadow-default\nShadow variants\nSurrounding shadows\n\nshadow-subtle\nshadow-muted\nshadow-accent\nshadow-default\nshadow-smooth\nshadow-hard\n\nDirection shadows\n\nshadow-muted-down\nshadow-default-down\n\nshadow-smooth-up\nshadow-smooth-down\nshadow-hard-up\nshadow-hard-down\n\nAccent shadow for list items\n\nNote\nWhen utilizing the shadow-accent avoid combining it with a border style, as the shadow is optimized for small block items like those in a list and works best without a border.\n\nItem\nItem\nItem\nItem\nItem\nItem\nRIOglyph\nDefault\n\nSized icons\n\nColored icons\nVehicle icons\nVehicle icons\n\nBaseline vehicle icons\nPair icons\nDefault\n\nWith background\n\nDisplay engine types\n\nSized\nAnimated icons\nSpinning icons\n\nPulsing icons\nDisabled icons\nDefault\n\nWith red line\n\nInverse\nFilled icons\nDefault filled icons\n\nColored filled icons\n\nGood use cases examples for icons with a filled circle background\n\nHeadline enhancements: For emphasizing key points in headings or subheadings, like \"New features\" or \"Highlights,\" where the icon in a filled circle draws attention without being too overwhelming.\n\nHelp/Documentation pages: Icons with filled circles are perfect for highlighting actions or key steps in a guide. They help break down text-heavy content and make instructions visually appealing. Example: For \"step-by-step\" instructions, an icon inside a circle could represent each action (e.g., a checkmark icon to signify completed tasks or a question mark for additional help).\n\nFeature lists and cards: Use filled circle icons as design elements for feature lists, product highlights, or feature comparisons. This works especially well when listing distinct features of a product, app, or service.\n\nWhen NOT to use a filled circle icon\nAvoid inconsistent usage in buttons – If some buttons have a filled circle and others don’t, the UI becomes inconsistent.\n\nDon’t use it for simple inline icons – Icons inside text (e.g., \"🔍 Search\") or standalone icons in tables don’t need a background.\n\nNot for decorative or unnecessary elements – If an icon doesn’t need extra emphasis, the filled circle is overkill.\nCustom icons\nUse external svgs as RIOglyph icons. Please read our guidelines\nRIOglyph text alignment\nWhen an icon is used alongside text in a flex, grid, or inline text layout, additional alignment adjustments may be needed. To ensure proper alignment, the following classes are available:\nrioglyph-align-top - assuming a display-flex and default line-height\nrioglyph-align-bottom - assuming a display-flex and line-height 1.25\nrioglyph-align-baseline - assuming an inline text and default line-height\n\nThese classes help align icons correctly within different layouts where they are used alongside text.\nNote: Setting a text line-height class will also affect the icon alignment and may require manual adjustments to ensure proper positioning.\nBaseline-aligned icon with inline text\nLorem ipsum dolor\n\nTop-aligned icon with text inside a flex-box layout\nMalesuada tincidunt. sem. In ante scelerisque adipiscing et enim\n\nBottom-aligned icon inside an inline-flex layout and line-height-125rel\nMalesuada tincidunt. sem. In ante scelerisque adipiscing et enim\n\nIcons inside a link usually don't need to be aligned manually\nLorem ipsum\n\nBaseline-aligned icon inside an inline h3 header text\nPrimis ante volutpat Vivamus\nPrimis ante volutpat Vivamus\n\nBaseline-aligned icon inside an inline h4 header text\nPrimis ante volutpat Vivamus\nPrimis ante volutpat Vivamus\nIcon library\nSearch\n\nrioglyph rioglyph-academic-cap\nrioglyph rioglyph-addressbook\nrioglyph rioglyph-ai\nrioglyph rioglyph-air-pay\nrioglyph rioglyph-am\nrioglyph rioglyph-angle-double-down\nrioglyph rioglyph-angle-double-left\nrioglyph rioglyph-angle-double-right\nrioglyph rioglyph-angle-double-up\nrioglyph rioglyph-antenna\nrioglyph rioglyph-api\nrioglyph rioglyph-archive\nrioglyph rioglyph-area-chart\nrioglyph rioglyph-area-in\nrioglyph rioglyph-area-out\nrioglyph rioglyph-arrow-down\nrioglyph rioglyph-arrow-left\nrioglyph rioglyph-arrow-right\nrioglyph rioglyph-arrow-up\nrioglyph rioglyph-arrows-collapse\nrioglyph rioglyph-arrows-combine\nrioglyph rioglyph-arrows-expand\nrioglyph rioglyph-arrows-horizontal\nrioglyph rioglyph-arrows-split\nrioglyph rioglyph-assigned\nrioglyph rioglyph-axis-x\nrioglyph rioglyph-axis-y\nrioglyph rioglyph-axis-z\nrioglyph rioglyph-axle\nrioglyph rioglyph-ban-circle\nrioglyph rioglyph-bar-chart-box\nrioglyph rioglyph-battery-charging\nrioglyph rioglyph-battery-level-empty\nrioglyph rioglyph-battery-level-full\nrioglyph rioglyph-battery-level-low\nrioglyph rioglyph-beacon\nrioglyph rioglyph-book\nrioglyph rioglyph-bookable-poi\nrioglyph rioglyph-bookmark-square\nrioglyph rioglyph-bookmark\nrioglyph rioglyph-border-crossing\nrioglyph rioglyph-brain\nrioglyph rioglyph-brake\nrioglyph rioglyph-branch-horizontal\nrioglyph rioglyph-branch-remove\nrioglyph rioglyph-branch-vertical\nrioglyph rioglyph-broadcast\nrioglyph rioglyph-building\nrioglyph rioglyph-bulb\nrioglyph rioglyph-bus-baseline\nrioglyph rioglyph-bus-breakdown\nrioglyph rioglyph-bus\nrioglyph rioglyph-businessman\nrioglyph rioglyph-calendar-parking\nrioglyph rioglyph-calendar-plus\nrioglyph rioglyph-calendar-today\nrioglyph rioglyph-calendar\nrioglyph rioglyph-camera\nrioglyph rioglyph-car-baseline\nrioglyph rioglyph-car-wash\nrioglyph rioglyph-car\nrioglyph rioglyph-card-hotel\nrioglyph rioglyph-card-reader\nrioglyph rioglyph-cards-add\nrioglyph rioglyph-cards-grid\nrioglyph rioglyph-cards-list\nrioglyph rioglyph-cards-table\nrioglyph rioglyph-cargo\nrioglyph rioglyph-carrier\nrioglyph rioglyph-chat\nrioglyph rioglyph-check-badge\nrioglyph rioglyph-check-shield\nrioglyph rioglyph-checkbox-checked\nrioglyph rioglyph-checkbox\nrioglyph rioglyph-checkboxes\nrioglyph rioglyph-chevron-down\nrioglyph rioglyph-chevron-left\nrioglyph rioglyph-chevron-right\nrioglyph rioglyph-chevron-up\nrioglyph rioglyph-chip\nrioglyph rioglyph-circle-dashed\nrioglyph rioglyph-circle-stack\nrioglyph rioglyph-click\nrioglyph rioglyph-climate-control\nrioglyph rioglyph-clipboard\nrioglyph rioglyph-cloud-download\nrioglyph rioglyph-cloud-not-saved\nrioglyph rioglyph-cloud-progress\nrioglyph rioglyph-cloud-upload\nrioglyph rioglyph-cloud\nrioglyph rioglyph-coasting\nrioglyph rioglyph-code-braces\nrioglyph rioglyph-code-brackets\nrioglyph rioglyph-coffee\nrioglyph rioglyph-cog\nrioglyph rioglyph-color-swatch\nrioglyph rioglyph-comment\nrioglyph rioglyph-compare\nrioglyph rioglyph-compass\nrioglyph rioglyph-component-custom-recurrent\nrioglyph rioglyph-component-custom\nrioglyph rioglyph-construction\nrioglyph rioglyph-convert\nrioglyph rioglyph-conveyor-belt\nrioglyph rioglyph-cookie\nrioglyph rioglyph-cooling\nrioglyph rioglyph-cost-efficiency\nrioglyph rioglyph-crown\nrioglyph rioglyph-cruise-control\nrioglyph rioglyph-csv\nrioglyph rioglyph-cube-dashed\nrioglyph rioglyph-cube\nrioglyph rioglyph-currency-euro\nrioglyph rioglyph-damages\nrioglyph rioglyph-dangerousgoods\nrioglyph rioglyph-dashboard-view\nrioglyph rioglyph-dashboard\nrioglyph rioglyph-delivery-completed\nrioglyph rioglyph-delivery-error\nrioglyph rioglyph-delivery-late\nrioglyph rioglyph-delivery-on-track\nrioglyph rioglyph-delivery-warning\nrioglyph rioglyph-delivery\nrioglyph rioglyph-design\nrioglyph rioglyph-desktop\nrioglyph rioglyph-detail-view-info\nrioglyph rioglyph-detail-view\nrioglyph rioglyph-direction\nrioglyph rioglyph-discount-badge\nrioglyph rioglyph-document-out\nrioglyph rioglyph-document\nrioglyph rioglyph-download\nrioglyph rioglyph-drag-n-drop\nrioglyph rioglyph-drive-history\nrioglyph rioglyph-driver-card\nrioglyph rioglyph-driver\nrioglyph rioglyph-drivercard-in\nrioglyph rioglyph-drivercard-out\nrioglyph rioglyph-duplicate\nrioglyph rioglyph-earphone\nrioglyph rioglyph-emergency-stop\nrioglyph rioglyph-empty\nrioglyph rioglyph-engine\nrioglyph rioglyph-envelope-indicator\nrioglyph rioglyph-envelope-open\nrioglyph rioglyph-envelope\nrioglyph rioglyph-erase\nrioglyph rioglyph-error-sign\nrioglyph rioglyph-euro-note\nrioglyph rioglyph-exclamation-sign\nrioglyph rioglyph-exclamation\nrioglyph rioglyph-eye-close\nrioglyph rioglyph-eye-closed\nrioglyph rioglyph-eye-open\nrioglyph rioglyph-face-frown\nrioglyph rioglyph-face-neutral\nrioglyph rioglyph-face-smile\nrioglyph rioglyph-facetime-video\nrioglyph rioglyph-factory\nrioglyph rioglyph-file-signature\nrioglyph rioglyph-files\nrioglyph rioglyph-fill\nrioglyph rioglyph-filling-e-station\nrioglyph rioglyph-filling-station\nrioglyph rioglyph-filter-active\nrioglyph rioglyph-filter-reset\nrioglyph rioglyph-filter\nrioglyph rioglyph-fingerprint\nrioglyph rioglyph-finish\nrioglyph rioglyph-fire\nrioglyph rioglyph-flag\nrioglyph rioglyph-flash\nrioglyph rioglyph-folder-closed\nrioglyph rioglyph-folder-open\nrioglyph rioglyph-fuel-electric\nrioglyph rioglyph-fuel-gas\nrioglyph rioglyph-fuel-hydrogen\nrioglyph rioglyph-fuel-liquid\nrioglyph rioglyph-fuel-mix\nrioglyph rioglyph-fullscreen\nrioglyph rioglyph-geofence\nrioglyph rioglyph-get\nrioglyph rioglyph-give\nrioglyph rioglyph-globe-alt\nrioglyph rioglyph-globe\nrioglyph rioglyph-group-blocks\nrioglyph rioglyph-group\nrioglyph rioglyph-hand-down\nrioglyph rioglyph-hand-left\nrioglyph rioglyph-hand-right\nrioglyph rioglyph-hand-up\nrioglyph rioglyph-handshake\nrioglyph rioglyph-hash\nrioglyph rioglyph-heart\nrioglyph rioglyph-heating\nrioglyph rioglyph-hierarchy\nrioglyph rioglyph-history\nrioglyph rioglyph-home-sign\nrioglyph rioglyph-home\nrioglyph rioglyph-hour-glass\nrioglyph rioglyph-id\nrioglyph rioglyph-inbox-in\nrioglyph rioglyph-inbox-out\nrioglyph rioglyph-inbox-stack\nrioglyph rioglyph-inbox\nrioglyph rioglyph-info-sign\nrioglyph rioglyph-info\nrioglyph rioglyph-insert\nrioglyph rioglyph-issue-tracking\nrioglyph rioglyph-key\nrioglyph rioglyph-kickdown\nrioglyph rioglyph-language\nrioglyph rioglyph-layer-pois\nrioglyph rioglyph-layer\nrioglyph rioglyph-leafs\nrioglyph rioglyph-light-bulb\nrioglyph rioglyph-line-chart\nrioglyph rioglyph-link\nrioglyph rioglyph-load-unload\nrioglyph rioglyph-load\nrioglyph rioglyph-location-arrow\nrioglyph rioglyph-lock-open\nrioglyph rioglyph-lock\nrioglyph rioglyph-log-in\nrioglyph rioglyph-logout\nrioglyph rioglyph-looking-glass-man\nrioglyph rioglyph-looking-glass\nrioglyph rioglyph-magic-wand\nrioglyph rioglyph-maintenance-components\nrioglyph rioglyph-map-location\nrioglyph rioglyph-map-marker\nrioglyph rioglyph-map\nrioglyph rioglyph-megaphone\nrioglyph rioglyph-menu-hamburger\nrioglyph rioglyph-merge\nrioglyph rioglyph-migrate\nrioglyph rioglyph-milage\nrioglyph rioglyph-minus-light\nrioglyph rioglyph-minus-sign\nrioglyph rioglyph-minus\nrioglyph rioglyph-missing\nrioglyph rioglyph-mode-dark-light\nrioglyph rioglyph-more\nrioglyph rioglyph-new-window\nrioglyph rioglyph-newspaper\nrioglyph rioglyph-note\nrioglyph rioglyph-notification\nrioglyph rioglyph-number-1\nrioglyph rioglyph-number-2\nrioglyph rioglyph-number-3\nrioglyph rioglyph-off\nrioglyph rioglyph-oil-can\nrioglyph rioglyph-ok-circle\nrioglyph rioglyph-ok-dashed\nrioglyph rioglyph-ok-sign\nrioglyph rioglyph-ok\nrioglyph rioglyph-onboarding\nrioglyph rioglyph-ongoing\nrioglyph rioglyph-option-horizontal\nrioglyph rioglyph-option-vertical\nrioglyph rioglyph-order\nrioglyph rioglyph-palette-broken\nrioglyph rioglyph-palette\nrioglyph rioglyph-paper-clip\nrioglyph rioglyph-parcel-broken\nrioglyph rioglyph-parcel\nrioglyph rioglyph-parking\nrioglyph rioglyph-pause-circle\nrioglyph rioglyph-pause\nrioglyph rioglyph-pdf-file\nrioglyph rioglyph-pencil-square\nrioglyph rioglyph-pencil\nrioglyph rioglyph-phone\nrioglyph rioglyph-pictures\nrioglyph rioglyph-pin-range\nrioglyph rioglyph-pin\nrioglyph rioglyph-play-circle\nrioglyph rioglyph-play\nrioglyph rioglyph-plugged-off\nrioglyph rioglyph-plugged-on\nrioglyph rioglyph-plus-light\nrioglyph rioglyph-plus-sign\nrioglyph rioglyph-plus\nrioglyph rioglyph-pm\nrioglyph rioglyph-poi\nrioglyph rioglyph-polygon\nrioglyph rioglyph-position\nrioglyph rioglyph-print\nrioglyph rioglyph-progress-ongoing\nrioglyph rioglyph-progress-remaining\nrioglyph rioglyph-progression\nrioglyph rioglyph-prompt\nrioglyph rioglyph-pto-off\nrioglyph rioglyph-pto-on\nrioglyph rioglyph-pushpin\nrioglyph rioglyph-puzzle\nrioglyph rioglyph-pylon\nrioglyph rioglyph-qr-code\nrioglyph rioglyph-question-sign\nrioglyph rioglyph-question\nrioglyph rioglyph-record\nrioglyph rioglyph-recycle\nrioglyph rioglyph-refresh\nrioglyph rioglyph-remove-circle\nrioglyph rioglyph-remove-sign\nrioglyph rioglyph-remove\nrioglyph rioglyph-repeat-square\nrioglyph rioglyph-repeat\nrioglyph rioglyph-resize-full\nrioglyph rioglyph-resize-horizontal\nrioglyph rioglyph-resize-small\nrioglyph rioglyph-resize-vertical\nrioglyph rioglyph-retrofit\nrioglyph rioglyph-revert\nrioglyph rioglyph-rio-marker\nrioglyph rioglyph-rio\nrioglyph rioglyph-road-restrictions\nrioglyph rioglyph-road\nrioglyph rioglyph-robot\nrioglyph rioglyph-rocket\nrioglyph rioglyph-role-management\nrioglyph rioglyph-route-option\nrioglyph rioglyph-route-view\nrioglyph rioglyph-route\nrioglyph rioglyph-ruler\nrioglyph rioglyph-satellite-radar\nrioglyph rioglyph-save\nrioglyph rioglyph-scale\nrioglyph rioglyph-scan\nrioglyph rioglyph-scissors\nrioglyph rioglyph-search-list\nrioglyph rioglyph-search-truck\nrioglyph rioglyph-search\nrioglyph rioglyph-send\nrioglyph rioglyph-series\nrioglyph rioglyph-server-stack\nrioglyph rioglyph-settings\nrioglyph rioglyph-share-alt\nrioglyph rioglyph-share-nodes\nrioglyph rioglyph-share\nrioglyph rioglyph-shelve\nrioglyph rioglyph-ship\nrioglyph rioglyph-shopping-bag\nrioglyph rioglyph-shopping-cart\nrioglyph rioglyph-signature\nrioglyph rioglyph-slope-down-max\nrioglyph rioglyph-slope-down-min\nrioglyph rioglyph-slope-up-max\nrioglyph rioglyph-slope-up-min\nrioglyph rioglyph-sort-by-attributes-alt\nrioglyph rioglyph-sort-by-attributes\nrioglyph rioglyph-sort\nrioglyph rioglyph-sparkles\nrioglyph rioglyph-speed\nrioglyph rioglyph-sphere\nrioglyph rioglyph-spinner\nrioglyph rioglyph-split-view\nrioglyph rioglyph-square-dashed\nrioglyph rioglyph-stack-add\nrioglyph rioglyph-stack-iso\nrioglyph rioglyph-stack\nrioglyph rioglyph-star-empty\nrioglyph rioglyph-star\nrioglyph rioglyph-stars\nrioglyph rioglyph-start\nrioglyph rioglyph-stats-high\nrioglyph rioglyph-stats-line-dots\nrioglyph rioglyph-stats-low\nrioglyph rioglyph-stats-medium\nrioglyph rioglyph-stats\nrioglyph rioglyph-status-available\nrioglyph rioglyph-status-change-horizontal\nrioglyph rioglyph-status-change\nrioglyph rioglyph-status-driving\nrioglyph rioglyph-status-resting\nrioglyph rioglyph-status-working\nrioglyph rioglyph-steering-wheel\nrioglyph rioglyph-stopover\nrioglyph rioglyph-support\nrioglyph rioglyph-table-view\nrioglyph rioglyph-tachograph-download\nrioglyph rioglyph-tachograph\nrioglyph rioglyph-tag\nrioglyph rioglyph-tasks\nrioglyph rioglyph-temperature\nrioglyph rioglyph-th-list\nrioglyph rioglyph-thumbs-down\nrioglyph rioglyph-thumbs-up\nrioglyph rioglyph-tickets\nrioglyph rioglyph-time-alt\nrioglyph rioglyph-time-cancle\nrioglyph rioglyph-time-incomplete\nrioglyph rioglyph-time\nrioglyph rioglyph-tire\nrioglyph rioglyph-tms\nrioglyph rioglyph-to-bottom\nrioglyph rioglyph-to-left\nrioglyph rioglyph-to-right\nrioglyph rioglyph-to-top\nrioglyph rioglyph-tracking-package\nrioglyph rioglyph-traffic-lights\nrioglyph rioglyph-trailer-baseline\nrioglyph rioglyph-trailer\nrioglyph rioglyph-trailerposition\nrioglyph rioglyph-train\nrioglyph rioglyph-transfer\nrioglyph rioglyph-transition-push-right\nrioglyph rioglyph-transition-right\nrioglyph rioglyph-trash\nrioglyph rioglyph-triangle-bottom\nrioglyph rioglyph-triangle-left\nrioglyph rioglyph-triangle-right\nrioglyph rioglyph-triangle-top\nrioglyph rioglyph-trophy\nrioglyph rioglyph-truck-baseline\nrioglyph rioglyph-truck-breakdown\nrioglyph rioglyph-truck-unit\nrioglyph rioglyph-truck\nrioglyph rioglyph-unassigned\nrioglyph rioglyph-unavailable\nrioglyph rioglyph-unlink\nrioglyph rioglyph-upload\nrioglyph rioglyph-user-add\nrioglyph rioglyph-user-group\nrioglyph rioglyph-user-ok\nrioglyph rioglyph-user-remove\nrioglyph rioglyph-user-sign-off\nrioglyph rioglyph-user-sign\nrioglyph rioglyph-user\nrioglyph rioglyph-van-baseline\nrioglyph rioglyph-van\nrioglyph rioglyph-variable\nrioglyph rioglyph-video\nrioglyph rioglyph-volume\nrioglyph rioglyph-wallet\nrioglyph rioglyph-warehouse\nrioglyph rioglyph-warning-sign\nrioglyph rioglyph-weather-cloudy\nrioglyph rioglyph-weather-icy\nrioglyph rioglyph-weather-overcast\nrioglyph rioglyph-weather-raining\nrioglyph rioglyph-weather-snowing\nrioglyph rioglyph-weather-stormy\nrioglyph rioglyph-weather-sunny\nrioglyph rioglyph-weather-thundering\nrioglyph rioglyph-weather-windy\nrioglyph rioglyph-weight\nrioglyph rioglyph-width\nrioglyph rioglyph-wifi\nrioglyph rioglyph-window\nrioglyph rioglyph-workflow-step\nrioglyph rioglyph-workflow\nrioglyph rioglyph-workshop\nrioglyph rioglyph-wrench\nrioglyph rioglyph-xmas-raindeer\nrioglyph rioglyph-xmas-santa\nText styles\nHeadline size\n\ntext-size-h1\ntext-size-h2\ntext-size-h3\ntext-size-h4\ntext-size-h5\ntext-size-h6\n\nText size\n\ntext-size-10\ntext-size-11\ntext-size-12\ntext-size-14\ntext-size-16\ntext-size-18\ntext-size-20\n\nText weight\n\ntext-thin\ntext-light\ntext-normal\ntext-medium\ntext-bold\nText style\n\ntext-style-normal\ntext-style-italic\n\nText decoration\n\ntext-decoration-none\nhover-text-decoration-none\ntext-decoration-line-through\ntext-decoration-underline\nunderline-offset-2\nunderline-offset-3\nunderline-offset-4\nunderline-offset-5\n\nText wrapping\n\nwhite-space-nowrap\nwhite-space-normal\n\nText transform\n\ntext-capitalize\nTEXT-LOWERCASE\ntext-uppercase\ntext capitalize first word\ntext-transform-none\nHeadings\n\nThe reason why there are heading tags like <h2> and heading classes like .h2 is due to different use cases. A <h2> tag for instance is an essential SEO tag often used by a CMS like WordPress or Typo3. For these Tools, we can not change the code but we need some styling for the HTML element itself.\nAnother example is the <strong> or <b> tags and the .text-bold class. The heading classes like the .h2 class can be used in a service application, as those are not SEO relevant. As the UIKIT uses an atomic CSS approach, the same style can be achieved when combining .text-size-h2 .text-bold margin-top-10 margin-bottom-20 classes.\n\nHeadline tags\n\nHeading 1\nHeading 2\nHeading 3\nHeading 4\nHeading 5\nHeading 6\n\nHeadline classes\n\nh1\nh2\nh3\nh4\nh5\nh6\n\nMisc tags\n\nThis line of text is meant to be treated as fine print.\nThe following snippet of text is rendered as bold text.\nThe following snippet of text is rendered as italicized text.\nAn abbreviation of the word attribute is attr.\nAlignment\ntext-left\ntext-center\ntext-right\nBlockquote\nLorem ipsum white.Lorem ipsum black.Lorem ipsum decent.Lorem ipsum lightest.Lorem ipsum lighter.Lorem ipsum light.Lorem ipsum gray.Lorem ipsum dark.Lorem ipsum darker.Lorem ipsum darkest.\nCode\nvar test = 'Hello World!';\nThis is an inline Codeblock for use in text.\n\n// This is a JS example\nvar test = \"Hello World\";\nconsole.log(test);\nCursor\nYou can disable all pointer events by addingpointer-events-none\ncursor-default\ncursor-pointer\ncursor-text\ncursor-move\ncursor-grabbing\ncursor-grab\ncursor-not-allowed\ncursor-row-resize\ncursor-col-resize\ncursor-col-resize\ncursor-ew-resize\ncursor-help\ncursor-cell\ncursor-copy\ncursor-crosshair\nEllipsis\nNote: Ellipsis only works with block elements. It does not work withdisplay-grid. Combine the classes withdisplay-block or display-flex\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\nLine height\nWhen working with text, it's important to consider the relationship between the text size and the line height. For larger headlines, a line height of 1.2 to 1.25 is recommended to maintain readability and visual balance. For plain body text or text inside promotion blocks, a slightly larger line height of 1.4 to 1.5 is suggested to improve readability and the overall reading experience.\n\nRule of thumb: the larger the text size, the smaller the line height should be.\n\nNote: The listed classes are not necessary for the use of ourtext-size classes. Use them only if you want to have the exact the same line-height as your text-size is.\nline-height-10\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-11\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-12\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-14\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-16\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-18\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-20\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-125rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-130rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-135rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-150rel\n\nLorem ipsum dolor sit amet, dui eget elit.\nline-height-h1\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h2\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h3\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h4\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h5\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h6\n\nLorem ipsum dolor sit amet, dui eget elit.\nUser select\nuser-select-all\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nuser-select-none\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nText box\ntext-box-trim-start\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\ntext-box-trim-both\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\ntext-box-auto\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nno text-box\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nText wrapping\nWord break\n\nFinanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.\n\nHyphens\n\nFinanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.\n\nBalance\ncaniuse\n\nAllows text to have it's lines broken that each line is roughly the same width.\n\nPretty\ncaniuse\n\nIt evaluate the last four lines in a text block to work out adjustments as needed to ensure the last line has two or more words.\nCols\nNote: Col classes without a breakpoint addition are always weaker than with an addition. To reset a breakpoint class, you always have to set another larger breakpoint class, otherwise the set breakpoint is always active.Right example col-xs-6col-sm-12 col-xs-6 will only be active on small screensWrong example col-xs-6col-12 col-xs-6 will always be active\ncol-12\n\ncol-6\n\ncol-6\n\ncol-4\n\ncol-4\n\ncol-4\n\ncol-3\n\ncol-3\n\ncol-3\n\ncol-3\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\nResponsive cols\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\nEqual Height Cols\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nContainer fluid\ncontainer fluid-small\ncontainer fluid-default\ncontainer fluid-large\ncontainer fluid-extra-large\ncontainer fluid-ultra-large\nContainer\nNote: If a container is used without the fluid classes, it has a maximum width per breakpoint and will jump when the screen is resized.\ncontainer\nContainer queries\nWhat are container queries?\nWhile traditional container classes like container and fluid-default respond to the viewport width,container queries respond to the size of the component’s parent container. This allows components to adapt their layout based on context, not just screen size.\n\nBy reacting to the container's width instead of the screen, container queries enable components to become context-aware—adapting their layout depending on where they are used. Whether inside a narrow sidebar or a wide content area, components can now behave responsively within their own environment, making designs more modular, flexible, and reusable.\nUsage\nThe UIKIT provides atomic utility classes for container queries, enabling you to quickly apply conditional styles directly in your JSX/HTML based on container width.\n\n1. Define the container: mark an ancestor element as a container using the specific cq-container class. This tells the browser which element's size should be monitored. <div class=\"cq-container\"<!-- content goes here --</div\n2. Apply CQ utility classes: add cq-300:... classes to the descendant elements you want to style conditionally based on the container's. <div class=\"cq-container\"<div class=\"padding-10 cq-400:padding-15 cq-600:padding-25\"<!-- more content goes here --</div</div\n\nhtml\n<div class=\"cq-container\"\n<!-- content goes here --\n</div\n\nhtml\n<div class=\"cq-container\"\n<div class=\"padding-10 cq-400:padding-15 cq-600:padding-25\"\n<!-- more content goes here --\n</div\n</div\n\nThe class naming convention is: cq: + [breakpointValue] + : + [property] + - + [value]\n\n- cq: is the prefix for all container query utilities.\n- [breakpointValue] is one of the numeric identifiers from the table above (e.g., 300, 400, 500, 600, 700).\n- [property] is the type of property being styled (e.g., padding, margin-top, flex-column, grid-cols).\n- [value] is the value from the library's scale (e.g., 10, 25, auto).\nContainer query breakpoints\nOur container query utilities are based on a set of predefined width breakpoints. The breakpoint value is included directly in the class name for clarity.\n\nWe use a \"max-width\" query for the smallest breakpoint (300px) to target styles up to that size, and \"min-width\" queries for all larger breakpoints to target styles from that size upwards.\nContainer query example and classes\nItem 1\nItem 2\nItem 3\nFlexbox\nCenter\n\nLorem ipsum dolor\n\nTop start\n\nLorem ipsum dolor\n\nBottom start\n\nLorem ipsum dolor\n\nTop end\n\nLorem ipsum dolor\n\nBottom end\n\nLorem ipsum dolor\n\nSpace between\n\nLorem ipsum dolor\nLorem ipsum dolor\nLorem ipsum dolor\n\nEven split columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nMultiple even columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\n\n70/30 columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\nGrid\ngrid-cols-1\n\ngrid-cols-2\ngrid-cols-2\n\ngrid-cols-3\ngrid-cols-3\ngrid-cols-3\n\ngrid-cols-4\ngrid-cols-4\ngrid-cols-4\ngrid-cols-4\n\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\n\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\n\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\n\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\n\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\n\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\n\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\n\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\nGrid colspan / rowspan\ngrid-colspan-3\nGrid column-start / column-end\nGrid auto-fit\nIn CSS Grid, the auto-fit keyword is used with the repeat() function to automatically adjust the number of columns (or rows) based on the available space in the container. It helps create responsive layouts by filling the container with as many columns (or rows) of a specified size as possible.\n\nDynamic Column Creation: \"auto-fit\" automatically creates as many columns as will fit in the available space, potentially adding or removing columns as the container resizes.\n\nResponsive Design: Ensures that the grid adapts to different screen sizes by adjusting the number of columns.\nGrid max-content / auto content\nThe max-content value sizes the grid column to be as wide as the largest piece of content inside it. Essentially, it takes up as much space as necessary to fit the longest word or item without breaking. This is useful when you want the column to expand to fit its content, ensuring no content is clipped or wrapped unnecessarily.\n\nThe auto value sizes the grid column based on the content, but it can also take into account the available space and other factors. If there's more space available, \"auto\" can expand to fill it, but it won't exceed the available space like \"max-content\". This is useful when you want the column to take up space according to its content but also adapt to the overall layout and available space.\n\nChoosing between max-content and auto depends on whether you want the column to strictly fit its content (potentially ignoring the available space) or to adapt to the content while also being flexible within the grid layout.\nmax-content\n1fr\n\nmax-content\n1fr\nmax-content\n1fr\n\n1fr\nmax-content\n\n1fr\nmax-content\n1fr\nmax-content\n\nauto\n1fr\n\nauto\n1fr\nauto\n1fr\n\n1fr\nauto\n\n1fr\nauto\n1fr\nauto\nGrid rows\nHelper class for 3 rows where the middle row expands and can scroll\nLorem item 0\nLorem ipsum dolor sit amet\n\nLorem item 1\nLorem ipsum dolor sit amet\n\nLorem item 2\nLorem ipsum dolor sit amet\n\nLorem item 3\nLorem ipsum dolor sit amet\n\nLorem item 4\nLorem ipsum dolor sit amet\n\nLorem item 5\nLorem ipsum dolor sit amet\n\nLorem item 6\nLorem ipsum dolor sit amet\n\nLorem item 7\nLorem ipsum dolor sit amet\n\nButton\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nGrid placement\nplace-items-center\nGrid stacking\nstack item 1\nstack item 2\n\nstack item 1\nstack item 2\nSubgrid\nThe subgrid value in CSS Grid Layout is a feature that allows a nested grid to inherit the column and/or row definitions from its parent grid container. This means that the subgrid can align its items according to the tracks defined in the parent grid, creating a more consistent and aligned layout structure. It is particularly useful for complex layouts where nested elements need to align with the overall grid structure without redefining the grid tracks. By using subgrid, you can maintain a cohesive design while simplifying the CSS code needed for layout alignment. This feature enhances the flexibility and power of CSS Grid, making it easier to manage nested grid layouts.\nForm example\nConnection\nHostPortReally long label\nCredentials\nUsernamePasswordCheckboxYet another level of nesting\n\nSubgrid enabled\nSubmit\nFull NameEmailMessage\n\nSubgrid enabled\nSubmit\nSubgrid Cards\nArticle title\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla? Consectetur adipisci illum ipsa reprehenderit deleniti quia qui aliquid tempora ea accusamus. Quibusdam.\nby Mia at Company\nLove it\nArticle title\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla?\nby Mia at Company\nLove it\nWhat if we have a much longer article title?\nLorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus eveniet, tempore error maxime praesentium eos.\nby Jen \"Boss\" Simmons at Company\nLove it so\nArticle titles aren't consistent\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.\nby Deja \"Empathic Dev\" Hodge at Company\nLove it\nThis article title will need to be fixed in Post-Production with a much shorter and catchier click-bait title\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.\nby Ryanne \"Fix It In Post\" Hodson at Company\nLove it\nShort title\nLorem ipsum dolor sit amet consectetur adipisicing elit. Optio enim maxime repellat illo!\nby Jay \"Do It\" Dedman at Company\nLove it\n\nSubgrid enabled\nPosition\nLorem ipsum dolor sit amet\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nGap\nNote: Since using a percentage vertical gap requires a fixed height of the wrapping element, we decided to offer only horizontal percentage gap classes. Vertical gap in px is of course possible.\ngap-0\ngap-0\ngap-0\n\ngap-1\ngap-1\ngap-1\n\ngap-2\ngap-2\ngap-2\n\ngap-3\ngap-3\ngap-3\n\ngap-4\ngap-4\ngap-4\n\ngap-5\ngap-5\ngap-5\n\ngap-10\ngap-10\ngap-10\n\ngap-15\ngap-15\ngap-15\n\ngap-20\ngap-20\ngap-20\n\ngap-25\ngap-25\ngap-25\n\ngap-50\ngap-50\ngap-50\nSpace\nNote: For flex or grid solutions please use gap instead.\nspace-y-0\nspace-y-0\nspace-y-0\n\nspace-y-1\nspace-y-1\nspace-y-1\n\nspace-y-2\nspace-y-2\nspace-y-2\n\nspace-y-3\nspace-y-3\nspace-y-3\n\nspace-y-4\nspace-y-4\nspace-y-4\n\nspace-y-5\nspace-y-5\nspace-y-5\n\nspace-y-10\nspace-y-10\nspace-y-10\n\nspace-y-15\nspace-y-15\nspace-y-15\n\nspace-y-20\nspace-y-20\nspace-y-20\n\nspace-y-25\nspace-y-25\nspace-y-25\n\nspace-y-50\nspace-y-50\nspace-y-50\nMargin\nSurrouding\n\nmargin-0\n\nmargin-1\n\nmargin-2\n\nmargin-3\n\nmargin-4\n\nmargin-5\n\nmargin-10\n\nmargin-15\n\nmargin-20\n\nmargin-25\n\nmargin-50\n\nHorizontal\n\nmargin-x-0\n\nmargin-x-1\n\nmargin-x-2\n\nmargin-x-3\n\nmargin-x-4\n\nmargin-x-5\n\nmargin-x-10\n\nmargin-x-15\n\nmargin-x-20\n\nmargin-x-25\n\nmargin-x-50\n\nVertical\n\nmargin-y-0\n\nmargin-y-1\n\nmargin-y-2\n\nmargin-y-3\n\nmargin-y-4\n\nmargin-y-5\n\nmargin-y-10\n\nmargin-y-15\n\nmargin-y-20\n\nmargin-y-25\n\nmargin-y-50\n\nLeft\n\nmargin-left-0\n\nmargin-left-1\n\nmargin-left-2\n\nmargin-left-3\n\nmargin-left-4\n\nmargin-left-5\n\nmargin-left-10\n\nmargin-left-15\n\nmargin-left-20\n\nmargin-left-25\n\nmargin-left-50\n\nRight\n\nmargin-right-0\n\nmargin-right-1\n\nmargin-right-2\n\nmargin-right-3\n\nmargin-right-4\n\nmargin-right-5\n\nmargin-right-10\n\nmargin-right-15\n\nmargin-right-20\n\nmargin-right-25\n\nmargin-right-50\n\nTop\n\nmargin-top-0\n\nmargin-top-1\n\nmargin-top-2\n\nmargin-top-3\n\nmargin-top-4\n\nmargin-top-5\n\nmargin-top-10\n\nmargin-top-15\n\nmargin-top-20\n\nmargin-top-25\n\nmargin-top-50\n\nBottom\n\nmargin-bottom-0\n\nmargin-bottom-1\n\nmargin-bottom-2\n\nmargin-bottom-3\n\nmargin-bottom-4\n\nmargin-bottom-5\n\nmargin-bottom-10\n\nmargin-bottom-15\n\nmargin-bottom-20\n\nmargin-bottom-25\n\nmargin-bottom-50\nMargin helper\nLast child (self class)\n\nChild\nChild\nChild\nChild\nChild\n\nLast child (parent class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst child (self class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst child (parent class)\n\nChild\nChild\nChild\nChild\nChild\nPadding\nSurrouding\n\npadding-0\n\npadding-1\n\npadding-2\n\npadding-3\n\npadding-4\n\npadding-5\n\npadding-10\n\npadding-15\n\npadding-20\n\npadding-25\n\npadding-50\n\nHorizontal\n\npadding-x-0\n\npadding-x-1\n\npadding-x-2\n\npadding-x-3\n\npadding-x-4\n\npadding-x-5\n\npadding-x-10\n\npadding-x-15\n\npadding-x-20\n\npadding-x-25\n\npadding-x-50\n\nVertical\n\npadding-y-0\n\npadding-y-1\n\npadding-y-2\n\npadding-y-3\n\npadding-y-4\n\npadding-y-5\n\npadding-y-10\n\npadding-y-15\n\npadding-y-20\n\npadding-y-25\n\npadding-y-50\n\nLeft\n\npadding-left-0\n\npadding-left-1\n\npadding-left-2\n\npadding-left-3\n\npadding-left-4\n\npadding-left-5\n\npadding-left-10\n\npadding-left-15\n\npadding-left-20\n\npadding-left-25\n\npadding-left-50\n\nRight\n\npadding-right-0\n\npadding-right-1\n\npadding-right-2\n\npadding-right-3\n\npadding-right-4\n\npadding-right-5\n\npadding-right-10\n\npadding-right-15\n\npadding-right-20\n\npadding-right-25\n\npadding-right-50\n\nTop\n\npadding-top-0\n\npadding-top-1\n\npadding-top-2\n\npadding-top-3\n\npadding-top-4\n\npadding-top-5\n\npadding-top-10\n\npadding-top-15\n\npadding-top-20\n\npadding-top-25\n\npadding-top-50\n\nBottom\n\npadding-bottom-0\n\npadding-bottom-1\n\npadding-bottom-2\n\npadding-bottom-3\n\npadding-bottom-4\n\npadding-bottom-5\n\npadding-bottom-10\n\npadding-bottom-15\n\npadding-bottom-20\n\npadding-bottom-25\n\npadding-bottom-50\nHeight\nWidth\n30px\n35px\n40px\n45px\n50px\n60px\n70px\n80px\n90px\n100px\n\n10pct\n20pct\n25pct\n30pct\n33pct\n40pct\n50pct\n60pct\n66pct\n70pct\n75pct\n80pct\n90pct\n100pct\nContent based min-width\nThe min-width property defines the smallest width an element can shrink to. When using keywords like max-content, min-content, orfit-content, you tell the browser how the element should behave in relation to its content size. These values are especially useful in responsive layouts or flexible components where content-driven sizing is required.\n\n- min-width-min-content The element’s minimum width becomes the smallest possible width without causing content overflow. It allows text wrapping, meaning the element will compress as much as possible while still displaying all content correctly.\n- min-width-max-content The element’s minimum width equals the longest unbreakable line of its content. It prevents text or inline items from wrapping, forcing the box to expand horizontally to fit the entire content in one line. This may cause overflow if the content is too wide for its container.\n- min-width-fit-content This is a hybrid behavior — the element adapts its width somewhere betweenmin-content and max-content. The browser decides the best fit for the available space, making it suitable for adaptive or flexible layouts.\nmax-contentThis_is_a_really_long_word_that_will_not_break.\n\nmin-contentThis is a really long text that will break and wrap.\n\nfit-contentThis text fits naturally within the box.\nBreadcrumb\nlevel 1\nlevel 2\nlevel 3\nlevel 4\nPager\nSee Pager for the actual React component.\nPager with label\n\nPrevious\nThe previous chapter\n\nNext\nThe next chapter\n\nCompact Pager without label\n\nPrevious\n\nNext\nPagination\n1\n2\n3\n4\n5\n\nUsage\nUse pagination buttons only for UI elements that benefit from stepping through discrete content pages, such as: Image carousels – where users navigate through multiple slides or multi-step flows – to guide users through a process one step at a time.\nNot for Tables\nTables should use a “Load more” button instead of pagination.\nWhy \"Load more\" is preferred\nContinuous scanning:\nUsers can scroll down and view more data without breaking flow.\nLess disruption:\nAvoids jarring page reloads or resets when switching pages.\nImproved comparability:\nAll previously loaded data stays in view, enabling easier side-by-side comparison of rows.\nLess cognitive load:\nUsers rarely remember what was on “Page 6”, especially when rows are changing. Sequential pages interrupt scanning and exploration.\nNo page size UI:\nYou don’t need to offer dropdowns for rows per page, reducing UI clutter.\nPills\nStandard\n\nPill 1\nPill 2\nPill 3\nDisabled Pill\n\nJustified\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\n\nJustified with icons\n\nPill 1\n\nPill 2\n\nPill 3\n\nDisabled Pill\n\nJustified with word-wrap\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\nFilled\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\n\nFilled with icons only\nStacked\n\nStacked pill 1\nStacked pill 2\nStacked pill 3\nDisabled stacked pill\n\nStacked decent\n\nStacked pill 1\nStacked pill 2\nStacked pill 3\nDisabled stacked pill\n\nStacked decent menu\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\nTabs\nStandard\n\nTab 1\nTab 2\nTab 3\nDisabled tab\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nBordered content\n\nTab 4\nTab 5\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nJustified\n\nTab 1\nTab 2\nTab 3\nLong tab name with line-break\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nJustified with word-wrap\n\nTab 1\nTab 2\nTab 3\nLong tab name with line-break\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\nTable\nSee also our Table components like TableToolbar, TableSearch,TableViewToggles, TableCardsSorting, and TableSettingsDialog. For a more advanced table demo checkout our demo service\nCommon table style\nLabelNewAction\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nLabel\n\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nTable head\nDefault table head\n\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\n\nTable head filled\n\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\nRounded table\nUse the table rounded classed when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners without needing to add additional padding.\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nHover table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nBordered table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nStriped table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nGrouped table\nHead columnHead columnHead columnHead column\n\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nSticky table header\nSticky column headSticky column headSticky column headSticky column head\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nSticky table columns\nHeadHeadHeadHeadHeadHeadHeadHeadHead\n\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nHeadHeadHeadHeadHeadHeadHeadHeadHead\n\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nTable grid lines\nShowing table grid lines my be used in data heavy tables also known as DataTables.\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nTable row span\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumn\nTable double row header\nDouble row header with filled header\nScores\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\n\nDouble row header with border and footer\nYears\n20212022202320242025\n\nProduct 1Income50708090100\nExpense3763708291\nProfit1371089\n\nProduct 2Income5067799054\nExpense3370507930\nProfit17-3191221\n\nTotal Profit304292030\nCondensed table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nFixed table layout\nThe table-layout-fixed class avoids a horizontal overflow by squeezing all columns together. Use this option with caution since columns with a fixed width cannot be compressed any further, and the content of the squeezed columns may not be readable anymore.\nHead columnHead columnHead columnHead columnHead column\n\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nResponsive tables\nTables - by design - are not great for small screens. Columns get squeezed together, and content is hard to read or gets cut off.\n\nThere are some options to tackle this problem\n\n- Wrapping the table in another div element and using the class table-responsive on that wrapper. That will create a horizontal overflow of the table when the available space exceeds.\n- Try to avoid defining a fixed width on all columns as that avoids shrinking columns automatically for smaller screens.\n- Use alternative representations for the table by either rendering a list instead of on small screens or using the table cards view on mobile screens.\n- Use class ellipsis-1 for column header or table cell content when the text gets truncated and to show the \"...\" at the end.\nTable cards\nNewButton\n\nFilter\n\nLabel\n\nIdId\nName\nVIN\nStatus\nDuration\n\nIdNameVINStatusDuration\n\n233IpsumNo dataInactive5h 15m\n\n456No data456Active4h 55m\n\n878No data878Active9h 10m\n\n895No data895Active8h 45m\n\n978IpsumNo dataInactive6h 35m\n\n2345Lorem2345Active11h 50m\n\n2445No data2445Active7h 25m\n\n3456No data3456Active12h 00m\n\n4567No data4567Active10h 20m\n\n7354Lorem7354Active10h 30m\n\n70/100\n\nLoad more\nStates in tables\nHead columnHead columnHead columnHead columnHead column\n\nNo entries found\nWe could not find any data entries for your search query. Please refine your search\nAlerts\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\nBadges\nUnlike labels, which are used for categorization and emphasis, badges provide quick contextual information in a compact and visually distinct manner.\nUse badges for numeric indicators, such as showing counts (e.g., unread messages, notifications, cart items). They are also useful for small floating highlights on UI elements (e.g., \"New\" or \"Beta\"). Badges are commonly placed on icons, buttons, menus, or navigation elements.\nHome1\nProfile\nMessages3\n\n01234567\n01234567\n1011121314151617\nBadges on Icons\n\n2323232323232323\nBadges as Indicator\n\nInbox3\nInbox99+\nCallouts\nCallout default\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout primary\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout secondary\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout info\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout success\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout warning\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout danger\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\nCounter\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nKey\nKeys examplePro tip: press m to comment\nPress ctrl + a to select all\n\nUse lower-case namesshiftenterctrlalt\nUnicode symbols⇧⇪↵⌫→←↑↓⇥⇤␣\n\nMac specific keys - see DeviceUtils⌘⌥⌃\nLabels\nNote: For having icons in labels, the text must be wrapped with a span to ensure the correct spacing.\nLabels are small, colored indicators used to represent statuses, categories, or highlights in the UI.\nThe standard labels have a light background and are ideal for subtle status indications that blend naturally with the interface.\nThe filled labels use a bold background color, making them more prominent—best suited for drawing attention to critical statuses or highlighting important information.\n\nStandard labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nFilled labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nLabels width icons\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nFilled labels width icons\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nCondensed labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nCondensed and filled labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\nLists\nOrdered list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nUnordered list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nSquare list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\nList groups\nList group item default\nList group item primary\nList group item secondary\nList group item info\nList group item success\nList group item warning\nList group item danger\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nList group item link (a)List group item link (a)List group item link (a)List group item link (a)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\n\nHeadline default\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ndefault\n\nHeadline primary\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nprimary\n\nHeadline secondary\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nsecondary\n\nHeadline info\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ninfo\n\nHeadline success\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nsuccess\n\nHeadline warning\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nwarning\n\nHeadline danger\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ndanger\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\nPanels\npanel-heading1\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\nProgress bars\nStandard\n\nStriped\n\nAnimated\n\nIndeterminate\n\nStacked\n\nStacked ratings\n\nStacked ratings with custom icon overlay\nPoorExcelent\nWells\nHi, my name is well-sm\n\nHi, my name is well\n\nHi, my name is well-lg\nForms\nLegend\n\nEmail\nPassword\nTextarea\n\nNumber with controls\nNumber without controls\n\nRadiosOption one\nOption two\n\nCheckboxLorem ipsum dolor sit amet.\n\nNative Selects12345\nCancelSubmit\n\nDisabled input\nInput success\nInput warning\nInput error\n\nTotal lengthm\n\nHeightm\n\nTotal lengthm\n\nHeightm\n\nTotal lengthm\n\nHeightm\n\nDefault inputSome input info for the user\nInput addon labelLabelLabel\n\nInput addons.00\n\nInput groupsButton\n\nButton\n\nInput with dropdownAction\n\nAction\n\nDefault inputSome input info for the userThis is an error message\nInput addon labelLabelThis is a warning message\nLabel\n\nInput addons\n.00\n\nInput groupsButton\n\nButton\n\nInput with dropdownAction\n\nAction\nForm sized examples\nSize by form-Group class\nform-group-sm\nform-group-smXX\n\nform-group-sm12345\nform-group-sm\nform-group\nform-groupXX\n\nform-group\nform-group12345\nform-group-lgXX\n\nform-group-lg\nform-group-lg\nform-group-lg12345\n\nSize by Input Class\ninput-sm\ninput-group-smXX\n\ninput-sm\ninput-group-sm12345\n\ninput\ninput-groupXX\n\ninput\ninput-group12345\n\ninput-lg\ninput-group-lgXX\n\ninput-lg\ninput-group-lg12345\nForm with fieldset and legend\nAn HTML <fieldsetelement is used to group related elements within a form. It is particularly useful for organizing complex forms by creating logical sections, improving both the form's structure and user experience. The <fieldsetcan be paired with a <legendelement to provide a caption for the grouped content, making the form easier to understand and navigate.\n\nAllows for selective processing of grouped data, making it useful for handling specific sections of a form independently when used with the FormData API.\nA form with fieldsetLorem ipsum\nDolor Sit amet\n\nLorem ipsum\n\nLorem ipsum\n\nA form with fieldset disabledLorem ipsum\nDolor Sit amet\n\nLorem ipsum\n\nLorem ipsum\nInput resize\nresize-noneresize-vertical\nAnimations\nslide-out\nleftupdownright\n3s2s1s09s08s07s06s05s04s03s02s01s\nlooprestart\nlineareaseease-inease-outease-in-out\ninfiniterepeat-1repeat-2repeat-3\nTest animationReset\nTransition\nTransition properties\n\ntransition-opacity\ntransition-position\ntransition-all\n\nTransition timing functions\n\ntransition-ease\ntransition-ease-in-out\n\nTransition duration\n\ntransition-duration-01\ntransition-duration-02\ntransition-duration-03\ntransition-duration-04\ntransition-duration-05\nBlur\nBackdrop blur\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis elementum ante et est sagittis integer eget metus vel nunc semper.\nAspect ratio\nWith fixed width\n\n1\n1-2\n2-1\n4-3\n16-9\n16-10\n\nWith fixed height\n\n1\n1-2\n2-1\n4-3\n16-9\n16-10\nInset\ninset-0\n\ninset-x-0\n\ninset-y-0\n\nBase element\nShorthand element\nHelper\nclearanceclearfixchildren-first-border-top-nonefirst-child-border-top-nonechildren-last-border-bottom-nonelast-child-border-bottom-nonechildren-first-margin-top-0first-child-margin-top-0children-last-margin-bottom-0last-child-margin-bottom-0\nRotate\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.\nRotate 360°\n\nRotate -5° to 5°\nScale\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.\nScale\n\nHover scale\nTranslate\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform Syntax.\nDisplay\ndisplay-blockdisplay-inline-blockdisplay-flexdisplay-inline-flexdisplay-inlinedisplay-none\nOverflow\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\nVisibility\nVisible only at a certain breakpoint\n\nvisible-xsvisible-lsvisible-smvisible-mdvisible-lgvisible-xl\nVisible from a certain breakpoint\n\nvisible-min-lsvisible-min-smvisible-min-mdvisible-min-lg\nHidden only at a certain breakpoint\n\nhidden-xshidden-lshidden-smhidden-mdhidden-lghidden-xl\nHidden from a certain breakpoint\n\nhidden-min-lshidden-min-smhidden-min-mdhidden-min-lg\nHidden when element is empty\n\nhidden-empty\nscreen-xs: >480pxscreen-ls: 480pxscreen-sm: 768pxscreen-md: 992pxscreen-lg: 1200pxscreen-xl: 1700px\n\n.visible-xsVisibleHiddenHiddenHiddenHiddenHidden\n.visible-lsHiddenVisibleHiddenHiddenHiddenHidden\n.visible-smHiddenHiddenVisibleHiddenHiddenHidden\n.visible-mdHiddenHiddenHiddenVisibleHiddenHidden\n.visible-lgHiddenHiddenHiddenHiddenVisibleHidden\n.visible-xlHiddenHiddenHiddenHiddenHiddenVisible\n\n.hidden-xsHiddenVisibleVisibleVisibleVisibleVisible\n.hidden-lsVisibleHiddenVisibleVisibleVisibleVisible\n.hidden-smVisibleVisibleHiddenVisibleVisibleVisible\n.hidden-mdVisibleVisibleVisibleHiddenVisibleVisible\n.hidden-lgVisibleVisibleVisibleVisibleHiddenVisible\n.hidden-xlVisibleVisibleVisibleVisibleVisibleHidden\n\n.visible-min-lsHiddenVisibleVisibleVisibleVisibleVisible\n.visible-min-smHiddenHiddenVisibleVisibleVisibleVisible\n.visible-min-mdHiddenHiddenHiddenVisibleVisibleVisible\n.visible-min-lgHiddenHiddenHiddenHiddenVisibleVisible\n\n.hidden-min-lsVisibleHiddenHiddenHiddenHiddenHidden\n.hidden-min-smVisibleVisibleHiddenHiddenHiddenHidden\n.hidden-min-mdVisibleVisibleVisibleHiddenHiddenHidden\n.hidden-min-lgVisibleVisibleVisibleVisibleHiddenHidden\n\nPrint\n\nvisible-printvisible-print-inlinehidden-print\n\nVisibility only classes\n\nAll the above classes for hidden and visible are based on \"display: none\". The following class affects only visibility, allowing it to impact surrounding elements.\nvisibility-hidden\nZ-index",
+    "searchText": "Foundations\nYou can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light\nButtons\nSee also our Button component.\n\nNote: For having spacing between buttons in a single row you may want to wrap them with<div class=\"btn-toolbar\"</div\n\nNote: You can use link buttons within text blocks by adding btn-linkbtn-link-inline\nDefault buttons\n\nDefaultDefault\n\nIcon buttons\n\nMuted buttons\n\nMuted filledMuted\n\nLink buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nColored buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nOutline buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nSplit buttons\n\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted-filled\nButton states\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButton sizes\nXS buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nXS icon buttons\n\nSM buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nSM icon buttons\n\nMD buttons (default)\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nMD icon buttons (default)\n\nLG buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nLG icon buttons\nButton examples\nButton toolbar\n\nPrevNext\n\nButton group\n\n1234\n\nButtonButtonButton\n\nMultiline button\n\nThis is a multiline button with a lot of Text\nBlock button\n\nBlock level button\nTooltip buttons\n\nButton with tooltipDisabled button with tooltip\nAction buttons\nClick meClick meClick meClick meClick meClick me\nBackground colors\nBasic\nbg-white\nbg-black\n\nBrand\nbg-primary\nbg-secondary\n\nStatus\nbg-info\nbg-success\nbg-warning\nbg-danger\n\nDriving status\nbg-status-available\nbg-status-driving\nbg-status-resting\nbg-status-working\n\nMap marker\nbg-map-marker-asset\nbg-map-marker-poi\nbg-map-marker-geofence\nbg-map-marker-route\n\nRating\nbg-rating-1\nbg-rating-2\nbg-rating-3\nbg-rating-4\nbg-rating-5\n\nGray\nbg-decent\nbg-lightest\nbg-lighter\nbg-light\nbg-gray\nbg-dark\nbg-darker\nbg-darkest\n\nHighlight\nbg-highlight-decent\nbg-highlight-lightest\nbg-highlight-lighter\nbg-highlight-light\nbg-highlight\nbg-highlight-dark\nbg-highlight-darker\nbg-highlight-darkest\nHover background colors\nBasic\nhover-bg-white\nhover-bg-black\n\nBrand\nhover-bg-primary\nhover-bg-secondary\n\nStatus\nhover-bg-info\nhover-bg-success\nhover-bg-warning\nhover-bg-danger\n\nDriving status\nhover-bg-status-available\nhover-bg-status-driving\nhover-bg-status-resting\nhover-bg-status-working\n\nMap Marker\nhover-bg-map-marker-asset\nhover-bg-map-marker-poi\nhover-bg-map-marker-geofence\nhover-bg-map-marker-route\n\nRating\nhover-bg-rating-1\nhover-bg-rating-2\nhover-bg-rating-3\nhover-bg-rating-4\nhover-bg-rating-5\n\nGray\nhover-bg-decent\nhover-bg-lightest\nhover-bg-lighter\nhover-bg-light\nhover-bg-gray\nhover-bg-dark\nhover-bg-darker\nhover-bg-darkest\n\nHighlight\nhover-bg-highlight-decent\nhover-bg-highlight-lightest\nhover-bg-highlight-lighter\nhover-bg-highlight-light\nhover-bg-highlight\nhover-bg-highlight-dark\nhover-bg-highlight-darker\nhover-bg-highlight-darkest\nText\nBasic\ntext-color-white\ntext-color-black\n\nBrand\ntext-color-primary\ntext-color-secondary\n\nStatus\ntext-color-info\ntext-color-success\ntext-color-warning\ntext-color-danger\n\nDriving status\ntext-color-status-available\ntext-color-status-driving\ntext-color-status-resting\ntext-color-status-working\n\nMap marker\ntext-color-map-marker-asset\ntext-color-map-marker-poi\ntext-color-map-marker-geofence\ntext-color-map-marker-route\n\nRating\ntext-color-rating-1\ntext-color-rating-2\ntext-color-rating-3\ntext-color-rating-4\ntext-color-rating-5\n\nGray\ntext-color-decent\ntext-color-lightest\ntext-color-lighter\ntext-color-light\ntext-color-gray\ntext-color-dark\ntext-color-darker\ntext-color-darkest\n\nHighlight\ntext-color-highlight-decent\ntext-color-highlight-lightest\ntext-color-highlight-lighter\ntext-color-highlight-light\ntext-color-highlight\ntext-color-highlight-dark\ntext-color-highlight-darker\ntext-color-highlight-darkest\nHover text\nBasic\nhover-text-color-white\nhover-text-color-black\n\nBrand\nhover-text-color-primary\nhover-text-color-secondary\n\nStatus\nhover-text-color-info\nhover-text-color-success\nhover-text-color-warning\nhover-text-color-danger\n\nDriving status\nhover-text-color-status-available\nhover-text-color-status-driving\nhover-text-color-status-resting\nhover-text-color-status-working\n\nMap marker\nhover-text-color-map-marker-asset\nhover-text-color-map-marker-poi\nhover-text-color-map-marker-geofence\nhover-text-color-map-marker-route\n\nRating\nhover-text-color-rating-1\nhover-text-color-rating-2\nhover-text-color-rating-3\nhover-text-color-rating-4\nhover-text-color-rating-5\n\nGray\nhover-text-color-decent\nhover-text-color-lightest\nhover-text-color-lighter\nhover-text-color-light\nhover-text-color-gray\nhover-text-color-dark\nhover-text-color-darker\nhover-text-color-darkest\n\nHighlight\nhover-text-color-highlight-decent\nhover-text-color-highlight-lightest\nhover-text-color-highlight-lighter\nhover-text-color-highlight-light\nhover-text-color-highlight\nhover-text-color-highlight-dark\nhover-text-color-highlight-darker\nhover-text-color-highlight-darkest\nSVGs\nBackground\nBackground size\n\nBackground position\n\nBackground repeat\nBorder\nHover Border Color\n\nHover Border Color with Transition\n\nHover Border Style\nLast Child (Self Class)\n\nChild\nChild\nChild\nChild\nChild\n\nLast Child (Parent Class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst Child (Self Class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst Child (Parent Class)\n\nChild\nChild\nChild\nChild\nChild\nDivider\nYou can use the the shorthanddivider-yfor the automatic combination ofdivider-y-1,divider-style-solidanddivider-color-light\ndivider-y-1\ndivider-y-1\ndivider-y-1\ndivider-y-1\n\ndivider-y-2\ndivider-y-2\ndivider-y-2\ndivider-y-2\n\ndivider-y-3\ndivider-y-3\ndivider-y-3\ndivider-y-3\n\ndivider-x-1\ndivider-x-1\ndivider-x-1\n\ndivider-x-1\ndivider-x-1\ndivider-x-1\n\ndivider-x-2\ndivider-x-2\ndivider-x-2\nOpacity\n0\n10\n20\n30\n40\n50\n60\n70\n80\n90\n100\nHover opacity\n0\n10\n20\n30\n40\n50\n60\n70\n80\n90\n100\nRounded\nrounded\n...-circle\n\n...-top\n...-bottom\n...-left\n...-right\n\n...-top-left\n...-top-right\n...-bottom-right\n...-bottom-left\n...-small\n...\n...-large\n...-extra-large\nShadows\nThe default shadow class is intended to be used on panels or blocks which should stand out from the light gray background and should be avoided to put everywhere. Use it to emphasize certain blocks or panels e.g. on a dashboard or items of a drag and drop list.\n\nDo not use hard shadows on tables, in dialogs, or on elements placed on white background.\n\nThe exception for not using shadows on a white background is for floating elements placed above the content for instance via position absolute.\nshadow-default\nPanel with shadow\nshadow-default\nShadow variants\nSurrounding shadows\n\nshadow-subtle\nshadow-muted\nshadow-accent\nshadow-default\nshadow-smooth\nshadow-hard\n\nDirection shadows\n\nshadow-muted-down\nshadow-default-down\n\nshadow-smooth-up\nshadow-smooth-down\nshadow-hard-up\nshadow-hard-down\n\nAccent shadow for list items\n\nNote\nWhen utilizing the shadow-accent avoid combining it with a border style, as the shadow is optimized for small block items like those in a list and works best without a border.\n\nItem\nItem\nItem\nItem\nItem\nItem\nRIOglyph\nDefault\n\nSized icons\n\nColored icons\nVehicle icons\nVehicle icons\n\nBaseline vehicle icons\nPair icons\nDefault\n\nWith background\n\nDisplay engine types\n\nSized\nAnimated icons\nSpinning icons\n\nPulsing icons\nDisabled icons\nDefault\n\nWith red line\n\nInverse\nFilled icons\nDefault filled icons\n\nColored filled icons\n\nGood use cases examples for icons with a filled circle background\n\nHeadline enhancements: For emphasizing key points in headings or subheadings, like \"New features\" or \"Highlights,\" where the icon in a filled circle draws attention without being too overwhelming.\n\nHelp/Documentation pages: Icons with filled circles are perfect for highlighting actions or key steps in a guide. They help break down text-heavy content and make instructions visually appealing. Example: For \"step-by-step\" instructions, an icon inside a circle could represent each action (e.g., a checkmark icon to signify completed tasks or a question mark for additional help).\n\nFeature lists and cards: Use filled circle icons as design elements for feature lists, product highlights, or feature comparisons. This works especially well when listing distinct features of a product, app, or service.\n\nWhen NOT to use a filled circle icon\nAvoid inconsistent usage in buttons – If some buttons have a filled circle and others don’t, the UI becomes inconsistent.\n\nDon’t use it for simple inline icons – Icons inside text (e.g., \"🔍 Search\") or standalone icons in tables don’t need a background.\n\nNot for decorative or unnecessary elements – If an icon doesn’t need extra emphasis, the filled circle is overkill.\nCustom icons\nUse external svgs as RIOglyph icons. Please read our guidelines\nRIOglyph text alignment\nWhen an icon is used alongside text in a flex, grid, or inline text layout, additional alignment adjustments may be needed. To ensure proper alignment, the following classes are available:\nrioglyph-align-top - assuming a display-flex and default line-height\nrioglyph-align-bottom - assuming a display-flex and line-height 1.25\nrioglyph-align-baseline - assuming an inline text and default line-height\n\nThese classes help align icons correctly within different layouts where they are used alongside text.\nNote: Setting a text line-height class will also affect the icon alignment and may require manual adjustments to ensure proper positioning.\nBaseline-aligned icon with inline text\nLorem ipsum dolor\n\nTop-aligned icon with text inside a flex-box layout\nMalesuada tincidunt. sem. In ante scelerisque adipiscing et enim\n\nBottom-aligned icon inside an inline-flex layout and line-height-125rel\nMalesuada tincidunt. sem. In ante scelerisque adipiscing et enim\n\nIcons inside a link usually don't need to be aligned manually\nLorem ipsum\n\nBaseline-aligned icon inside an inline h3 header text\nPrimis ante volutpat Vivamus\nPrimis ante volutpat Vivamus\n\nBaseline-aligned icon inside an inline h4 header text\nPrimis ante volutpat Vivamus\nPrimis ante volutpat Vivamus\nIcon library\nSearch\n\nrioglyph rioglyph-academic-cap\nrioglyph rioglyph-addressbook\nrioglyph rioglyph-ai\nrioglyph rioglyph-air-pay\nrioglyph rioglyph-am\nrioglyph rioglyph-angle-double-down\nrioglyph rioglyph-angle-double-left\nrioglyph rioglyph-angle-double-right\nrioglyph rioglyph-angle-double-up\nrioglyph rioglyph-antenna\nrioglyph rioglyph-api\nrioglyph rioglyph-archive\nrioglyph rioglyph-area-chart\nrioglyph rioglyph-area-in\nrioglyph rioglyph-area-out\nrioglyph rioglyph-arrow-down\nrioglyph rioglyph-arrow-left\nrioglyph rioglyph-arrow-right\nrioglyph rioglyph-arrow-up\nrioglyph rioglyph-arrows-collapse\nrioglyph rioglyph-arrows-combine\nrioglyph rioglyph-arrows-expand\nrioglyph rioglyph-arrows-horizontal\nrioglyph rioglyph-arrows-split\nrioglyph rioglyph-assigned\nrioglyph rioglyph-axis-x\nrioglyph rioglyph-axis-y\nrioglyph rioglyph-axis-z\nrioglyph rioglyph-axle\nrioglyph rioglyph-ban-circle\nrioglyph rioglyph-bar-chart-box\nrioglyph rioglyph-battery-charging\nrioglyph rioglyph-battery-level-empty\nrioglyph rioglyph-battery-level-full\nrioglyph rioglyph-battery-level-low\nrioglyph rioglyph-beacon\nrioglyph rioglyph-book\nrioglyph rioglyph-bookable-poi\nrioglyph rioglyph-bookmark-square\nrioglyph rioglyph-bookmark\nrioglyph rioglyph-border-crossing\nrioglyph rioglyph-brain\nrioglyph rioglyph-brake\nrioglyph rioglyph-branch-horizontal\nrioglyph rioglyph-branch-remove\nrioglyph rioglyph-branch-vertical\nrioglyph rioglyph-broadcast\nrioglyph rioglyph-building\nrioglyph rioglyph-bulb\nrioglyph rioglyph-bus-baseline\nrioglyph rioglyph-bus-breakdown\nrioglyph rioglyph-bus\nrioglyph rioglyph-businessman\nrioglyph rioglyph-calendar-parking\nrioglyph rioglyph-calendar-plus\nrioglyph rioglyph-calendar-today\nrioglyph rioglyph-calendar\nrioglyph rioglyph-camera\nrioglyph rioglyph-car-baseline\nrioglyph rioglyph-car-wash\nrioglyph rioglyph-car\nrioglyph rioglyph-card-hotel\nrioglyph rioglyph-card-reader\nrioglyph rioglyph-cards-add\nrioglyph rioglyph-cards-grid\nrioglyph rioglyph-cards-list\nrioglyph rioglyph-cards-table\nrioglyph rioglyph-cargo\nrioglyph rioglyph-carrier\nrioglyph rioglyph-chat\nrioglyph rioglyph-check-badge\nrioglyph rioglyph-check-shield\nrioglyph rioglyph-checkbox-checked\nrioglyph rioglyph-checkbox\nrioglyph rioglyph-checkboxes\nrioglyph rioglyph-chevron-down\nrioglyph rioglyph-chevron-left\nrioglyph rioglyph-chevron-right\nrioglyph rioglyph-chevron-up\nrioglyph rioglyph-chip\nrioglyph rioglyph-circle-dashed\nrioglyph rioglyph-circle-stack\nrioglyph rioglyph-click\nrioglyph rioglyph-climate-control\nrioglyph rioglyph-clipboard\nrioglyph rioglyph-cloud-download\nrioglyph rioglyph-cloud-not-saved\nrioglyph rioglyph-cloud-progress\nrioglyph rioglyph-cloud-upload\nrioglyph rioglyph-cloud\nrioglyph rioglyph-coasting\nrioglyph rioglyph-code-braces\nrioglyph rioglyph-code-brackets\nrioglyph rioglyph-coffee\nrioglyph rioglyph-cog\nrioglyph rioglyph-color-swatch\nrioglyph rioglyph-comment\nrioglyph rioglyph-compare\nrioglyph rioglyph-compass\nrioglyph rioglyph-component-custom-recurrent\nrioglyph rioglyph-component-custom\nrioglyph rioglyph-construction\nrioglyph rioglyph-convert\nrioglyph rioglyph-conveyor-belt\nrioglyph rioglyph-cookie\nrioglyph rioglyph-cooling\nrioglyph rioglyph-cost-efficiency\nrioglyph rioglyph-crown\nrioglyph rioglyph-cruise-control\nrioglyph rioglyph-csv\nrioglyph rioglyph-cube-dashed\nrioglyph rioglyph-cube\nrioglyph rioglyph-currency-euro\nrioglyph rioglyph-damages\nrioglyph rioglyph-dangerousgoods\nrioglyph rioglyph-dashboard-view\nrioglyph rioglyph-dashboard\nrioglyph rioglyph-delivery-completed\nrioglyph rioglyph-delivery-error\nrioglyph rioglyph-delivery-late\nrioglyph rioglyph-delivery-on-track\nrioglyph rioglyph-delivery-warning\nrioglyph rioglyph-delivery\nrioglyph rioglyph-design\nrioglyph rioglyph-desktop\nrioglyph rioglyph-detail-view-info\nrioglyph rioglyph-detail-view\nrioglyph rioglyph-direction\nrioglyph rioglyph-discount-badge\nrioglyph rioglyph-document-out\nrioglyph rioglyph-document\nrioglyph rioglyph-download\nrioglyph rioglyph-drag-n-drop\nrioglyph rioglyph-drive-history\nrioglyph rioglyph-driver-card\nrioglyph rioglyph-driver\nrioglyph rioglyph-drivercard-in\nrioglyph rioglyph-drivercard-out\nrioglyph rioglyph-duplicate\nrioglyph rioglyph-earphone\nrioglyph rioglyph-emergency-stop\nrioglyph rioglyph-empty\nrioglyph rioglyph-engine\nrioglyph rioglyph-envelope-indicator\nrioglyph rioglyph-envelope-open\nrioglyph rioglyph-envelope\nrioglyph rioglyph-erase\nrioglyph rioglyph-error-sign\nrioglyph rioglyph-euro-note\nrioglyph rioglyph-exclamation-sign\nrioglyph rioglyph-exclamation\nrioglyph rioglyph-eye-close\nrioglyph rioglyph-eye-closed\nrioglyph rioglyph-eye-open\nrioglyph rioglyph-face-frown\nrioglyph rioglyph-face-neutral\nrioglyph rioglyph-face-smile\nrioglyph rioglyph-facetime-video\nrioglyph rioglyph-factory\nrioglyph rioglyph-file-signature\nrioglyph rioglyph-files\nrioglyph rioglyph-fill\nrioglyph rioglyph-filling-e-station\nrioglyph rioglyph-filling-station\nrioglyph rioglyph-filter-active\nrioglyph rioglyph-filter-reset\nrioglyph rioglyph-filter\nrioglyph rioglyph-fingerprint\nrioglyph rioglyph-finish\nrioglyph rioglyph-fire\nrioglyph rioglyph-flag\nrioglyph rioglyph-flash\nrioglyph rioglyph-folder-closed\nrioglyph rioglyph-folder-open\nrioglyph rioglyph-fuel-electric\nrioglyph rioglyph-fuel-gas\nrioglyph rioglyph-fuel-hydrogen\nrioglyph rioglyph-fuel-liquid\nrioglyph rioglyph-fuel-mix\nrioglyph rioglyph-fullscreen\nrioglyph rioglyph-geofence\nrioglyph rioglyph-get\nrioglyph rioglyph-give\nrioglyph rioglyph-globe-alt\nrioglyph rioglyph-globe\nrioglyph rioglyph-group-blocks\nrioglyph rioglyph-group\nrioglyph rioglyph-hand-down\nrioglyph rioglyph-hand-left\nrioglyph rioglyph-hand-right\nrioglyph rioglyph-hand-up\nrioglyph rioglyph-handshake\nrioglyph rioglyph-hash\nrioglyph rioglyph-heart\nrioglyph rioglyph-heating\nrioglyph rioglyph-hierarchy\nrioglyph rioglyph-history\nrioglyph rioglyph-home-sign\nrioglyph rioglyph-home\nrioglyph rioglyph-hour-glass\nrioglyph rioglyph-id\nrioglyph rioglyph-inbox-in\nrioglyph rioglyph-inbox-out\nrioglyph rioglyph-inbox-stack\nrioglyph rioglyph-inbox\nrioglyph rioglyph-info-sign\nrioglyph rioglyph-info\nrioglyph rioglyph-insert\nrioglyph rioglyph-issue-tracking\nrioglyph rioglyph-key\nrioglyph rioglyph-kickdown\nrioglyph rioglyph-language\nrioglyph rioglyph-layer-pois\nrioglyph rioglyph-layer\nrioglyph rioglyph-leafs\nrioglyph rioglyph-light-bulb\nrioglyph rioglyph-line-chart\nrioglyph rioglyph-link\nrioglyph rioglyph-load-unload\nrioglyph rioglyph-load\nrioglyph rioglyph-location-arrow\nrioglyph rioglyph-lock-open\nrioglyph rioglyph-lock\nrioglyph rioglyph-log-in\nrioglyph rioglyph-logout\nrioglyph rioglyph-looking-glass-man\nrioglyph rioglyph-looking-glass\nrioglyph rioglyph-magic-wand\nrioglyph rioglyph-maintenance-components\nrioglyph rioglyph-map-location\nrioglyph rioglyph-map-marker\nrioglyph rioglyph-map\nrioglyph rioglyph-megaphone\nrioglyph rioglyph-menu-hamburger\nrioglyph rioglyph-merge\nrioglyph rioglyph-migrate\nrioglyph rioglyph-milage\nrioglyph rioglyph-minus-light\nrioglyph rioglyph-minus-sign\nrioglyph rioglyph-minus\nrioglyph rioglyph-missing\nrioglyph rioglyph-mode-dark-light\nrioglyph rioglyph-more\nrioglyph rioglyph-new-window\nrioglyph rioglyph-newspaper\nrioglyph rioglyph-note\nrioglyph rioglyph-notification\nrioglyph rioglyph-number-1\nrioglyph rioglyph-number-2\nrioglyph rioglyph-number-3\nrioglyph rioglyph-off\nrioglyph rioglyph-oil-can\nrioglyph rioglyph-ok-circle\nrioglyph rioglyph-ok-dashed\nrioglyph rioglyph-ok-sign\nrioglyph rioglyph-ok\nrioglyph rioglyph-onboarding\nrioglyph rioglyph-ongoing\nrioglyph rioglyph-option-horizontal\nrioglyph rioglyph-option-vertical\nrioglyph rioglyph-order\nrioglyph rioglyph-palette-broken\nrioglyph rioglyph-palette\nrioglyph rioglyph-paper-clip\nrioglyph rioglyph-parcel-broken\nrioglyph rioglyph-parcel\nrioglyph rioglyph-parking\nrioglyph rioglyph-pause-circle\nrioglyph rioglyph-pause\nrioglyph rioglyph-pdf-file\nrioglyph rioglyph-pencil-square\nrioglyph rioglyph-pencil\nrioglyph rioglyph-phone\nrioglyph rioglyph-pictures\nrioglyph rioglyph-pin-range\nrioglyph rioglyph-pin\nrioglyph rioglyph-play-circle\nrioglyph rioglyph-play\nrioglyph rioglyph-plugged-off\nrioglyph rioglyph-plugged-on\nrioglyph rioglyph-plus-light\nrioglyph rioglyph-plus-sign\nrioglyph rioglyph-plus\nrioglyph rioglyph-pm\nrioglyph rioglyph-poi\nrioglyph rioglyph-polygon\nrioglyph rioglyph-position\nrioglyph rioglyph-print\nrioglyph rioglyph-progress-ongoing\nrioglyph rioglyph-progress-remaining\nrioglyph rioglyph-progression\nrioglyph rioglyph-prompt\nrioglyph rioglyph-pto-off\nrioglyph rioglyph-pto-on\nrioglyph rioglyph-pushpin\nrioglyph rioglyph-puzzle\nrioglyph rioglyph-pylon\nrioglyph rioglyph-qr-code\nrioglyph rioglyph-question-sign\nrioglyph rioglyph-question\nrioglyph rioglyph-record\nrioglyph rioglyph-recycle\nrioglyph rioglyph-refresh\nrioglyph rioglyph-remove-circle\nrioglyph rioglyph-remove-sign\nrioglyph rioglyph-remove\nrioglyph rioglyph-repeat-square\nrioglyph rioglyph-repeat\nrioglyph rioglyph-resize-full\nrioglyph rioglyph-resize-horizontal\nrioglyph rioglyph-resize-small\nrioglyph rioglyph-resize-vertical\nrioglyph rioglyph-retrofit\nrioglyph rioglyph-revert\nrioglyph rioglyph-rio-marker\nrioglyph rioglyph-rio\nrioglyph rioglyph-road-restrictions\nrioglyph rioglyph-road\nrioglyph rioglyph-robot\nrioglyph rioglyph-rocket\nrioglyph rioglyph-role-management\nrioglyph rioglyph-route-option\nrioglyph rioglyph-route-view\nrioglyph rioglyph-route\nrioglyph rioglyph-ruler\nrioglyph rioglyph-satellite-radar\nrioglyph rioglyph-save\nrioglyph rioglyph-scale\nrioglyph rioglyph-scan\nrioglyph rioglyph-scissors\nrioglyph rioglyph-search-list\nrioglyph rioglyph-search-truck\nrioglyph rioglyph-search\nrioglyph rioglyph-send\nrioglyph rioglyph-series\nrioglyph rioglyph-server-stack\nrioglyph rioglyph-settings\nrioglyph rioglyph-share-alt\nrioglyph rioglyph-share-nodes\nrioglyph rioglyph-share\nrioglyph rioglyph-shelve\nrioglyph rioglyph-ship\nrioglyph rioglyph-shopping-bag\nrioglyph rioglyph-shopping-cart\nrioglyph rioglyph-signature\nrioglyph rioglyph-slope-down-max\nrioglyph rioglyph-slope-down-min\nrioglyph rioglyph-slope-up-max\nrioglyph rioglyph-slope-up-min\nrioglyph rioglyph-sort-by-attributes-alt\nrioglyph rioglyph-sort-by-attributes\nrioglyph rioglyph-sort\nrioglyph rioglyph-sparkles\nrioglyph rioglyph-speed\nrioglyph rioglyph-sphere\nrioglyph rioglyph-spinner\nrioglyph rioglyph-split-view\nrioglyph rioglyph-square-dashed\nrioglyph rioglyph-stack-add\nrioglyph rioglyph-stack-iso\nrioglyph rioglyph-stack\nrioglyph rioglyph-star-empty\nrioglyph rioglyph-star\nrioglyph rioglyph-stars\nrioglyph rioglyph-start\nrioglyph rioglyph-stats-high\nrioglyph rioglyph-stats-line-dots\nrioglyph rioglyph-stats-low\nrioglyph rioglyph-stats-medium\nrioglyph rioglyph-stats\nrioglyph rioglyph-status-available\nrioglyph rioglyph-status-change-horizontal\nrioglyph rioglyph-status-change\nrioglyph rioglyph-status-driving\nrioglyph rioglyph-status-resting\nrioglyph rioglyph-status-working\nrioglyph rioglyph-steering-wheel\nrioglyph rioglyph-stopover\nrioglyph rioglyph-support\nrioglyph rioglyph-table-view\nrioglyph rioglyph-tachograph-download\nrioglyph rioglyph-tachograph\nrioglyph rioglyph-tag\nrioglyph rioglyph-tasks\nrioglyph rioglyph-temperature\nrioglyph rioglyph-th-list\nrioglyph rioglyph-thumbs-down\nrioglyph rioglyph-thumbs-up\nrioglyph rioglyph-tickets\nrioglyph rioglyph-time-alt\nrioglyph rioglyph-time-cancle\nrioglyph rioglyph-time-incomplete\nrioglyph rioglyph-time\nrioglyph rioglyph-tire\nrioglyph rioglyph-tms\nrioglyph rioglyph-to-bottom\nrioglyph rioglyph-to-left\nrioglyph rioglyph-to-right\nrioglyph rioglyph-to-top\nrioglyph rioglyph-tracking-package\nrioglyph rioglyph-traffic-lights\nrioglyph rioglyph-trailer-baseline\nrioglyph rioglyph-trailer\nrioglyph rioglyph-trailerposition\nrioglyph rioglyph-train\nrioglyph rioglyph-transfer\nrioglyph rioglyph-transition-push-right\nrioglyph rioglyph-transition-right\nrioglyph rioglyph-trash\nrioglyph rioglyph-triangle-bottom\nrioglyph rioglyph-triangle-left\nrioglyph rioglyph-triangle-right\nrioglyph rioglyph-triangle-top\nrioglyph rioglyph-trophy\nrioglyph rioglyph-truck-baseline\nrioglyph rioglyph-truck-breakdown\nrioglyph rioglyph-truck-unit\nrioglyph rioglyph-truck\nrioglyph rioglyph-unassigned\nrioglyph rioglyph-unavailable\nrioglyph rioglyph-unlink\nrioglyph rioglyph-upload\nrioglyph rioglyph-user-add\nrioglyph rioglyph-user-group\nrioglyph rioglyph-user-ok\nrioglyph rioglyph-user-remove\nrioglyph rioglyph-user-sign-off\nrioglyph rioglyph-user-sign\nrioglyph rioglyph-user\nrioglyph rioglyph-van-baseline\nrioglyph rioglyph-van\nrioglyph rioglyph-variable\nrioglyph rioglyph-video\nrioglyph rioglyph-volume\nrioglyph rioglyph-wallet\nrioglyph rioglyph-warehouse\nrioglyph rioglyph-warning-sign\nrioglyph rioglyph-weather-cloudy\nrioglyph rioglyph-weather-icy\nrioglyph rioglyph-weather-overcast\nrioglyph rioglyph-weather-raining\nrioglyph rioglyph-weather-snowing\nrioglyph rioglyph-weather-stormy\nrioglyph rioglyph-weather-sunny\nrioglyph rioglyph-weather-thundering\nrioglyph rioglyph-weather-windy\nrioglyph rioglyph-weight\nrioglyph rioglyph-width\nrioglyph rioglyph-wifi\nrioglyph rioglyph-window\nrioglyph rioglyph-workflow-step\nrioglyph rioglyph-workflow\nrioglyph rioglyph-workshop\nrioglyph rioglyph-wrench\nrioglyph rioglyph-xmas-raindeer\nrioglyph rioglyph-xmas-santa\nText styles\nHeadline size\n\ntext-size-h1\ntext-size-h2\ntext-size-h3\ntext-size-h4\ntext-size-h5\ntext-size-h6\n\nText size\n\ntext-size-10\ntext-size-11\ntext-size-12\ntext-size-14\ntext-size-16\ntext-size-18\ntext-size-20\n\nText weight\n\ntext-thin\ntext-light\ntext-normal\ntext-medium\ntext-bold\nText style\n\ntext-style-normal\ntext-style-italic\n\nText decoration\n\ntext-decoration-none\nhover-text-decoration-none\ntext-decoration-line-through\ntext-decoration-underline\nunderline-offset-2\nunderline-offset-3\nunderline-offset-4\nunderline-offset-5\n\nText wrapping\n\nwhite-space-nowrap\nwhite-space-normal\n\nText transform\n\ntext-capitalize\nTEXT-LOWERCASE\ntext-uppercase\ntext capitalize first word\ntext-transform-none\nHeadings\n\nThe reason why there are heading tags like <h2> and heading classes like .h2 is due to different use cases. A <h2> tag for instance is an essential SEO tag often used by a CMS like WordPress or Typo3. For these Tools, we can not change the code but we need some styling for the HTML element itself.\nAnother example is the <strong> or <b> tags and the .text-bold class. The heading classes like the .h2 class can be used in a service application, as those are not SEO relevant. As the UIKIT uses an atomic CSS approach, the same style can be achieved when combining .text-size-h2 .text-bold margin-top-10 margin-bottom-20 classes.\n\nHeadline tags\n\nHeading 1\nHeading 2\nHeading 3\nHeading 4\nHeading 5\nHeading 6\n\nHeadline classes\n\nh1\nh2\nh3\nh4\nh5\nh6\n\nMisc tags\n\nThis line of text is meant to be treated as fine print.\nThe following snippet of text is rendered as bold text.\nThe following snippet of text is rendered as italicized text.\nAn abbreviation of the word attribute is attr.\nAlignment\ntext-left\ntext-center\ntext-right\nBlockquote\nLorem ipsum white.Lorem ipsum black.Lorem ipsum decent.Lorem ipsum lightest.Lorem ipsum lighter.Lorem ipsum light.Lorem ipsum gray.Lorem ipsum dark.Lorem ipsum darker.Lorem ipsum darkest.\nCode\nvar test = 'Hello World!';\nThis is an inline Codeblock for use in text.\n\n// This is a JS example\nvar test = \"Hello World\";\nconsole.log(test);\nCursor\nYou can disable all pointer events by addingpointer-events-none\ncursor-default\ncursor-pointer\ncursor-text\ncursor-move\ncursor-grabbing\ncursor-grab\ncursor-not-allowed\ncursor-row-resize\ncursor-col-resize\ncursor-col-resize\ncursor-ew-resize\ncursor-help\ncursor-cell\ncursor-copy\ncursor-crosshair\nEllipsis\nNote: Ellipsis only works with block elements. It does not work withdisplay-grid. Combine the classes withdisplay-block or display-flex\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\nLine height\nWhen working with text, it's important to consider the relationship between the text size and the line height. For larger headlines, a line height of 1.2 to 1.25 is recommended to maintain readability and visual balance. For plain body text or text inside promotion blocks, a slightly larger line height of 1.4 to 1.5 is suggested to improve readability and the overall reading experience.\n\nRule of thumb: the larger the text size, the smaller the line height should be.\n\nNote: The listed classes are not necessary for the use of ourtext-size classes. Use them only if you want to have the exact the same line-height as your text-size is.\nline-height-10\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-11\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-12\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-14\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-16\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-18\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-20\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-125rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-130rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-135rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-150rel\n\nLorem ipsum dolor sit amet, dui eget elit.\nline-height-h1\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h2\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h3\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h4\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h5\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h6\n\nLorem ipsum dolor sit amet, dui eget elit.\nUser select\nuser-select-all\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nuser-select-none\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nText box\ntext-box-trim-start\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\ntext-box-trim-both\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\ntext-box-auto\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nno text-box\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nText wrapping\nWord break\n\nFinanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.\n\nHyphens\n\nFinanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.\n\nBalance\ncaniuse\n\nAllows text to have it's lines broken that each line is roughly the same width.\n\nPretty\ncaniuse\n\nIt evaluate the last four lines in a text block to work out adjustments as needed to ensure the last line has two or more words.\nCols\nNote: Col classes without a breakpoint addition are always weaker than with an addition. To reset a breakpoint class, you always have to set another larger breakpoint class, otherwise the set breakpoint is always active.Right example col-xs-6col-sm-12 col-xs-6 will only be active on small screensWrong example col-xs-6col-12 col-xs-6 will always be active\ncol-12\n\ncol-6\n\ncol-6\n\ncol-4\n\ncol-4\n\ncol-4\n\ncol-3\n\ncol-3\n\ncol-3\n\ncol-3\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\nResponsive cols\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\nEqual Height Cols\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nContainer fluid\ncontainer fluid-small\ncontainer fluid-default\ncontainer fluid-large\ncontainer fluid-extra-large\ncontainer fluid-ultra-large\nContainer\nNote: If a container is used without the fluid classes, it has a maximum width per breakpoint and will jump when the screen is resized.\ncontainer\nContainer queries\nWhat are container queries?\nWhile traditional container classes like container and fluid-default respond to the viewport width,container queries respond to the size of the component’s parent container. This allows components to adapt their layout based on context, not just screen size.\n\nBy reacting to the container's width instead of the screen, container queries enable components to become context-aware—adapting their layout depending on where they are used. Whether inside a narrow sidebar or a wide content area, components can now behave responsively within their own environment, making designs more modular, flexible, and reusable.\nUsage\nThe UIKIT provides atomic utility classes for container queries, enabling you to quickly apply conditional styles directly in your JSX/HTML based on container width.\n\n1. Define the container: mark an ancestor element as a container using the specific cq-container class. This tells the browser which element's size should be monitored. <div class=\"cq-container\"<!-- content goes here --</div\n2. Apply CQ utility classes: add cq-300:... classes to the descendant elements you want to style conditionally based on the container's. <div class=\"cq-container\"<div class=\"padding-10 cq-400:padding-15 cq-600:padding-25\"<!-- more content goes here --</div</div\n\nhtml\n<div class=\"cq-container\"\n<!-- content goes here --\n</div\n\nhtml\n<div class=\"cq-container\"\n<div class=\"padding-10 cq-400:padding-15 cq-600:padding-25\"\n<!-- more content goes here --\n</div\n</div\n\nThe class naming convention is: cq: + [breakpointValue] + : + [property] + - + [value]\n\n- cq: is the prefix for all container query utilities.\n- [breakpointValue] is one of the numeric identifiers from the table above (e.g., 300, 400, 500, 600, 700).\n- [property] is the type of property being styled (e.g., padding, margin-top, flex-column, grid-cols).\n- [value] is the value from the library's scale (e.g., 10, 25, auto).\nContainer query breakpoints\nOur container query utilities are based on a set of predefined width breakpoints. The breakpoint value is included directly in the class name for clarity.\n\nWe use a \"max-width\" query for the smallest breakpoint (300px) to target styles up to that size, and \"min-width\" queries for all larger breakpoints to target styles from that size upwards.\nContainer query example and classes\nItem 1\nItem 2\nItem 3\nFlexbox\nCenter\n\nLorem ipsum dolor\n\nTop start\n\nLorem ipsum dolor\n\nBottom start\n\nLorem ipsum dolor\n\nTop end\n\nLorem ipsum dolor\n\nBottom end\n\nLorem ipsum dolor\n\nSpace between\n\nLorem ipsum dolor\nLorem ipsum dolor\nLorem ipsum dolor\n\nEven split columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nMultiple even columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\n\n70/30 columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\nGrid\ngrid-cols-1\n\ngrid-cols-2\ngrid-cols-2\n\ngrid-cols-3\ngrid-cols-3\ngrid-cols-3\n\ngrid-cols-4\ngrid-cols-4\ngrid-cols-4\ngrid-cols-4\n\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\n\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\n\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\n\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\n\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\n\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\n\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\n\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\nGrid colspan / rowspan\ngrid-colspan-3\nGrid column-start / column-end\nGrid auto-fit\nIn CSS Grid, the auto-fit keyword is used with the repeat() function to automatically adjust the number of columns (or rows) based on the available space in the container. It helps create responsive layouts by filling the container with as many columns (or rows) of a specified size as possible.\n\nDynamic Column Creation: \"auto-fit\" automatically creates as many columns as will fit in the available space, potentially adding or removing columns as the container resizes.\n\nResponsive Design: Ensures that the grid adapts to different screen sizes by adjusting the number of columns.\nGrid max-content / auto content\nThe max-content value sizes the grid column to be as wide as the largest piece of content inside it. Essentially, it takes up as much space as necessary to fit the longest word or item without breaking. This is useful when you want the column to expand to fit its content, ensuring no content is clipped or wrapped unnecessarily.\n\nThe auto value sizes the grid column based on the content, but it can also take into account the available space and other factors. If there's more space available, \"auto\" can expand to fill it, but it won't exceed the available space like \"max-content\". This is useful when you want the column to take up space according to its content but also adapt to the overall layout and available space.\n\nChoosing between max-content and auto depends on whether you want the column to strictly fit its content (potentially ignoring the available space) or to adapt to the content while also being flexible within the grid layout.\nmax-content\n1fr\n\nmax-content\n1fr\nmax-content\n1fr\n\n1fr\nmax-content\n\n1fr\nmax-content\n1fr\nmax-content\n\nauto\n1fr\n\nauto\n1fr\nauto\n1fr\n\n1fr\nauto\n\n1fr\nauto\n1fr\nauto\nGrid rows\nHelper class for 3 rows where the middle row expands and can scroll\nLorem item 0\nLorem ipsum dolor sit amet\n\nLorem item 1\nLorem ipsum dolor sit amet\n\nLorem item 2\nLorem ipsum dolor sit amet\n\nLorem item 3\nLorem ipsum dolor sit amet\n\nLorem item 4\nLorem ipsum dolor sit amet\n\nLorem item 5\nLorem ipsum dolor sit amet\n\nLorem item 6\nLorem ipsum dolor sit amet\n\nLorem item 7\nLorem ipsum dolor sit amet\n\nButton\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nGrid placement\nplace-items-center\nGrid stacking\nstack item 1\nstack item 2\n\nstack item 1\nstack item 2\nSubgrid\nThe subgrid value in CSS Grid Layout is a feature that allows a nested grid to inherit the column and/or row definitions from its parent grid container. This means that the subgrid can align its items according to the tracks defined in the parent grid, creating a more consistent and aligned layout structure. It is particularly useful for complex layouts where nested elements need to align with the overall grid structure without redefining the grid tracks. By using subgrid, you can maintain a cohesive design while simplifying the CSS code needed for layout alignment. This feature enhances the flexibility and power of CSS Grid, making it easier to manage nested grid layouts.\nForm example\nConnection\nHostPortReally long label\nCredentials\nUsernamePasswordCheckboxYet another level of nesting\n\nSubgrid enabled\nSubmit\nFull NameEmailMessage\n\nSubgrid enabled\nSubmit\nSubgrid Cards\nArticle title\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla? Consectetur adipisci illum ipsa reprehenderit deleniti quia qui aliquid tempora ea accusamus. Quibusdam.\nby Mia at Company\nLove it\nArticle title\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla?\nby Mia at Company\nLove it\nWhat if we have a much longer article title?\nLorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus eveniet, tempore error maxime praesentium eos.\nby Jen \"Boss\" Simmons at Company\nLove it so\nArticle titles aren't consistent\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.\nby Deja \"Empathic Dev\" Hodge at Company\nLove it\nThis article title will need to be fixed in Post-Production with a much shorter and catchier click-bait title\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.\nby Ryanne \"Fix It In Post\" Hodson at Company\nLove it\nShort title\nLorem ipsum dolor sit amet consectetur adipisicing elit. Optio enim maxime repellat illo!\nby Jay \"Do It\" Dedman at Company\nLove it\n\nSubgrid enabled\nPosition\nLorem ipsum dolor sit amet\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nGap\nNote: Since using a percentage vertical gap requires a fixed height of the wrapping element, we decided to offer only horizontal percentage gap classes. Vertical gap in px is of course possible.\ngap-0\ngap-0\ngap-0\n\ngap-1\ngap-1\ngap-1\n\ngap-2\ngap-2\ngap-2\n\ngap-3\ngap-3\ngap-3\n\ngap-4\ngap-4\ngap-4\n\ngap-5\ngap-5\ngap-5\n\ngap-10\ngap-10\ngap-10\n\ngap-15\ngap-15\ngap-15\n\ngap-20\ngap-20\ngap-20\n\ngap-25\ngap-25\ngap-25\n\ngap-50\ngap-50\ngap-50\nSpace\nNote: For flex or grid solutions please use gap instead.\nspace-y-0\nspace-y-0\nspace-y-0\n\nspace-y-1\nspace-y-1\nspace-y-1\n\nspace-y-2\nspace-y-2\nspace-y-2\n\nspace-y-3\nspace-y-3\nspace-y-3\n\nspace-y-4\nspace-y-4\nspace-y-4\n\nspace-y-5\nspace-y-5\nspace-y-5\n\nspace-y-10\nspace-y-10\nspace-y-10\n\nspace-y-15\nspace-y-15\nspace-y-15\n\nspace-y-20\nspace-y-20\nspace-y-20\n\nspace-y-25\nspace-y-25\nspace-y-25\n\nspace-y-50\nspace-y-50\nspace-y-50\nMargin\nSurrouding\n\nmargin-0\n\nmargin-1\n\nmargin-2\n\nmargin-3\n\nmargin-4\n\nmargin-5\n\nmargin-10\n\nmargin-15\n\nmargin-20\n\nmargin-25\n\nmargin-50\n\nHorizontal\n\nmargin-x-0\n\nmargin-x-1\n\nmargin-x-2\n\nmargin-x-3\n\nmargin-x-4\n\nmargin-x-5\n\nmargin-x-10\n\nmargin-x-15\n\nmargin-x-20\n\nmargin-x-25\n\nmargin-x-50\n\nVertical\n\nmargin-y-0\n\nmargin-y-1\n\nmargin-y-2\n\nmargin-y-3\n\nmargin-y-4\n\nmargin-y-5\n\nmargin-y-10\n\nmargin-y-15\n\nmargin-y-20\n\nmargin-y-25\n\nmargin-y-50\n\nLeft\n\nmargin-left-0\n\nmargin-left-1\n\nmargin-left-2\n\nmargin-left-3\n\nmargin-left-4\n\nmargin-left-5\n\nmargin-left-10\n\nmargin-left-15\n\nmargin-left-20\n\nmargin-left-25\n\nmargin-left-50\n\nRight\n\nmargin-right-0\n\nmargin-right-1\n\nmargin-right-2\n\nmargin-right-3\n\nmargin-right-4\n\nmargin-right-5\n\nmargin-right-10\n\nmargin-right-15\n\nmargin-right-20\n\nmargin-right-25\n\nmargin-right-50\n\nTop\n\nmargin-top-0\n\nmargin-top-1\n\nmargin-top-2\n\nmargin-top-3\n\nmargin-top-4\n\nmargin-top-5\n\nmargin-top-10\n\nmargin-top-15\n\nmargin-top-20\n\nmargin-top-25\n\nmargin-top-50\n\nBottom\n\nmargin-bottom-0\n\nmargin-bottom-1\n\nmargin-bottom-2\n\nmargin-bottom-3\n\nmargin-bottom-4\n\nmargin-bottom-5\n\nmargin-bottom-10\n\nmargin-bottom-15\n\nmargin-bottom-20\n\nmargin-bottom-25\n\nmargin-bottom-50\nMargin helper\nLast child (self class)\n\nChild\nChild\nChild\nChild\nChild\n\nLast child (parent class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst child (self class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst child (parent class)\n\nChild\nChild\nChild\nChild\nChild\nPadding\nSurrouding\n\npadding-0\n\npadding-1\n\npadding-2\n\npadding-3\n\npadding-4\n\npadding-5\n\npadding-10\n\npadding-15\n\npadding-20\n\npadding-25\n\npadding-50\n\nHorizontal\n\npadding-x-0\n\npadding-x-1\n\npadding-x-2\n\npadding-x-3\n\npadding-x-4\n\npadding-x-5\n\npadding-x-10\n\npadding-x-15\n\npadding-x-20\n\npadding-x-25\n\npadding-x-50\n\nVertical\n\npadding-y-0\n\npadding-y-1\n\npadding-y-2\n\npadding-y-3\n\npadding-y-4\n\npadding-y-5\n\npadding-y-10\n\npadding-y-15\n\npadding-y-20\n\npadding-y-25\n\npadding-y-50\n\nLeft\n\npadding-left-0\n\npadding-left-1\n\npadding-left-2\n\npadding-left-3\n\npadding-left-4\n\npadding-left-5\n\npadding-left-10\n\npadding-left-15\n\npadding-left-20\n\npadding-left-25\n\npadding-left-50\n\nRight\n\npadding-right-0\n\npadding-right-1\n\npadding-right-2\n\npadding-right-3\n\npadding-right-4\n\npadding-right-5\n\npadding-right-10\n\npadding-right-15\n\npadding-right-20\n\npadding-right-25\n\npadding-right-50\n\nTop\n\npadding-top-0\n\npadding-top-1\n\npadding-top-2\n\npadding-top-3\n\npadding-top-4\n\npadding-top-5\n\npadding-top-10\n\npadding-top-15\n\npadding-top-20\n\npadding-top-25\n\npadding-top-50\n\nBottom\n\npadding-bottom-0\n\npadding-bottom-1\n\npadding-bottom-2\n\npadding-bottom-3\n\npadding-bottom-4\n\npadding-bottom-5\n\npadding-bottom-10\n\npadding-bottom-15\n\npadding-bottom-20\n\npadding-bottom-25\n\npadding-bottom-50\nHeight\nWidth\n30px\n35px\n40px\n45px\n50px\n60px\n70px\n80px\n90px\n100px\n\n10pct\n20pct\n25pct\n30pct\n33pct\n40pct\n50pct\n60pct\n66pct\n70pct\n75pct\n80pct\n90pct\n100pct\nContent based min-width\nThe min-width property defines the smallest width an element can shrink to. When using keywords like max-content, min-content, orfit-content, you tell the browser how the element should behave in relation to its content size. These values are especially useful in responsive layouts or flexible components where content-driven sizing is required.\n\n- min-width-min-content The element’s minimum width becomes the smallest possible width without causing content overflow. It allows text wrapping, meaning the element will compress as much as possible while still displaying all content correctly.\n- min-width-max-content The element’s minimum width equals the longest unbreakable line of its content. It prevents text or inline items from wrapping, forcing the box to expand horizontally to fit the entire content in one line. This may cause overflow if the content is too wide for its container.\n- min-width-fit-content This is a hybrid behavior — the element adapts its width somewhere betweenmin-content and max-content. The browser decides the best fit for the available space, making it suitable for adaptive or flexible layouts.\nmax-contentThis_is_a_really_long_word_that_will_not_break.\n\nmin-contentThis is a really long text that will break and wrap.\n\nfit-contentThis text fits naturally within the box.\nBreadcrumb\nlevel 1\nlevel 2\nlevel 3\nlevel 4\nPager\nSee Pager for the actual React component.\nPager with label\n\nPrevious\nThe previous chapter\n\nNext\nThe next chapter\n\nCompact Pager without label\n\nPrevious\n\nNext\nPagination\n1\n2\n3\n4\n5\n\nUsage\nUse pagination buttons only for UI elements that benefit from stepping through discrete content pages, such as: Image carousels – where users navigate through multiple slides or multi-step flows – to guide users through a process one step at a time.\nNot for Tables\nTables should use a “Load more” button instead of pagination.\nWhy \"Load more\" is preferred\nContinuous scanning:\nUsers can scroll down and view more data without breaking flow.\nLess disruption:\nAvoids jarring page reloads or resets when switching pages.\nImproved comparability:\nAll previously loaded data stays in view, enabling easier side-by-side comparison of rows.\nLess cognitive load:\nUsers rarely remember what was on “Page 6”, especially when rows are changing. Sequential pages interrupt scanning and exploration.\nNo page size UI:\nYou don’t need to offer dropdowns for rows per page, reducing UI clutter.\nPills\nStandard\n\nPill 1\nPill 2\nPill 3\nDisabled Pill\n\nJustified\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\n\nJustified with icons\n\nPill 1\n\nPill 2\n\nPill 3\n\nDisabled Pill\n\nJustified with word-wrap\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\nFilled\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\n\nFilled with icons only\nStacked\n\nStacked pill 1\nStacked pill 2\nStacked pill 3\nDisabled stacked pill\n\nStacked decent\n\nStacked pill 1\nStacked pill 2\nStacked pill 3\nDisabled stacked pill\n\nStacked decent menu\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\nTabs\nStandard\n\nTab 1\nTab 2\nTab 3\nDisabled tab\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nBordered content\n\nTab 4\nTab 5\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nJustified\n\nTab 1\nTab 2\nTab 3\nLong tab name with line-break\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nJustified with word-wrap\n\nTab 1\nTab 2\nTab 3\nLong tab name with line-break\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\nTable\nSee also our Table components like TableToolbar, TableSearch,TableViewToggles, TableCardsSorting, and TableSettingsDialog. For a more advanced table demo checkout our demo service\nCommon table style\nLabelNewAction\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nLabel\n\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nTable head\nDefault table head\n\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\n\nTable head filled\n\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\nRounded table\nUse the table rounded classed when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners without needing to add additional padding.\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nHover table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nBordered table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nStriped table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nGrouped table\nHead columnHead columnHead columnHead column\n\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nSticky table header\nSticky column headSticky column headSticky column headSticky column head\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nSticky table columns\nHeadHeadHeadHeadHeadHeadHeadHeadHead\n\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nHeadHeadHeadHeadHeadHeadHeadHeadHead\n\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nTable grid lines\nShowing table grid lines my be used in data heavy tables also known as DataTables.\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nTable row span\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumn\nTable double row header\nDouble row header with filled header\nScores\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\n\nDouble row header with border and footer\nYears\n20212022202320242025\n\nProduct 1Income50708090100\nExpense3763708291\nProfit1371089\n\nProduct 2Income5067799054\nExpense3370507930\nProfit17-3191221\n\nTotal Profit304292030\nCondensed table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nFixed table layout\nThe table-layout-fixed class avoids a horizontal overflow by squeezing all columns together. Use this option with caution since columns with a fixed width cannot be compressed any further, and the content of the squeezed columns may not be readable anymore.\nHead columnHead columnHead columnHead columnHead column\n\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nResponsive tables\nTables - by design - are not great for small screens. Columns get squeezed together, and content is hard to read or gets cut off.\n\nThere are some options to tackle this problem\n\n- Wrapping the table in another div element and using the class table-responsive on that wrapper. That will create a horizontal overflow of the table when the available space exceeds.\n- Try to avoid defining a fixed width on all columns as that avoids shrinking columns automatically for smaller screens.\n- Use alternative representations for the table by either rendering a list instead of on small screens or using the table cards view on mobile screens.\n- Use class ellipsis-1 for column header or table cell content when the text gets truncated and to show the \"...\" at the end.\nTable cards\nNewButton\n\nFilter\n\nLabel\n\nIdId\nName\nVIN\nStatus\nDuration\n\nIdNameVINStatusDuration\n\n233IpsumNo dataInactive5h 15m\n\n456No data456Active4h 55m\n\n878No data878Active9h 10m\n\n895No data895Active8h 45m\n\n978IpsumNo dataInactive6h 35m\n\n2345Lorem2345Active11h 50m\n\n2445No data2445Active7h 25m\n\n3456No data3456Active12h 00m\n\n4567No data4567Active10h 20m\n\n7354Lorem7354Active10h 30m\n\n70/100\n\nLoad more\nStates in tables\nHead columnHead columnHead columnHead columnHead column\n\nNo entries found\nWe could not find any data entries for your search query. Please refine your search\nAlerts\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\nBadges\nUnlike labels, which are used for categorization and emphasis, badges provide quick contextual information in a compact and visually distinct manner.\nUse badges for numeric indicators, such as showing counts (e.g., unread messages, notifications, cart items). They are also useful for small floating highlights on UI elements (e.g., \"New\" or \"Beta\"). Badges are commonly placed on icons, buttons, menus, or navigation elements.\nHome1\nProfile\nMessages3\n\n01234567\n01234567\n1011121314151617\nBadges on Icons\n\n2323232323232323\nBadges as Indicator\n\nInbox3\nInbox99+\nCallouts\nCallout default\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout primary\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout secondary\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout info\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout success\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout warning\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout danger\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\nCounter\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nKey\nKeys examplePro tip: press m to comment\nPress ctrl + a to select all\n\nUse lower-case namesshiftenterctrlalt\nUnicode symbols⇧⇪↵⌫→←↑↓⇥⇤␣\n\nMac specific keys - see DeviceUtils⌘⌥⌃\nLabels\nNote: For having icons in labels, the text must be wrapped with a span to ensure the correct spacing.\nLabels are small, colored indicators used to represent statuses, categories, or highlights in the UI.\nThe standard labels have a light background and are ideal for subtle status indications that blend naturally with the interface.\nThe filled labels use a bold background color, making them more prominent—best suited for drawing attention to critical statuses or highlighting important information.\n\nStandard labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nFilled labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nLabels width icons\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nFilled labels width icons\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nCondensed labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nCondensed and filled labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\nLists\nOrdered list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nUnordered list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nSquare list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\nList groups\nList group item default\nList group item primary\nList group item secondary\nList group item info\nList group item success\nList group item warning\nList group item danger\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nList group item link (a)List group item link (a)List group item link (a)List group item link (a)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\n\nHeadline default\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ndefault\n\nHeadline primary\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nprimary\n\nHeadline secondary\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nsecondary\n\nHeadline info\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ninfo\n\nHeadline success\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nsuccess\n\nHeadline warning\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nwarning\n\nHeadline danger\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ndanger\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\nPanels\npanel-heading1\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\nProgress bars\nStandard\n\nStriped\n\nAnimated\n\nIndeterminate\n\nStacked\n\nStacked ratings\n\nStacked ratings with custom icon overlay\nPoorExcelent\nWells\nHi, my name is well-sm\n\nHi, my name is well\n\nHi, my name is well-lg\nForms\nLegend\n\nEmail\nPassword\nTextarea\n\nNumber with controls\nNumber without controls\n\nRadiosOption one\nOption two\n\nCheckboxLorem ipsum dolor sit amet.\n\nNative Selects12345\nCancelSubmit\n\nDisabled input\nInput success\nInput warning\nInput error\n\nTotal lengthm\n\nHeightm\n\nTotal lengthm\n\nHeightm\n\nTotal lengthm\n\nHeightm\n\nDefault inputSome input info for the user\nInput addon labelLabelLabel\n\nInput addons.00\n\nInput groupsButton\n\nButton\n\nInput with dropdownAction\n\nAction\n\nDefault inputSome input info for the userThis is an error message\nInput addon labelLabelThis is a warning message\nLabel\n\nInput addons\n.00\n\nInput groupsButton\n\nButton\n\nInput with dropdownAction\n\nAction\nForm sized examples\nSize by form-Group class\nform-group-sm\nform-group-smXX\n\nform-group-sm12345\nform-group-sm\nform-group\nform-groupXX\n\nform-group\nform-group12345\nform-group-lgXX\n\nform-group-lg\nform-group-lg\nform-group-lg12345\n\nSize by Input Class\ninput-sm\ninput-group-smXX\n\ninput-sm\ninput-group-sm12345\n\ninput\ninput-groupXX\n\ninput\ninput-group12345\n\ninput-lg\ninput-group-lgXX\n\ninput-lg\ninput-group-lg12345\nForm with fieldset and legend\nAn HTML <fieldsetelement is used to group related elements within a form. It is particularly useful for organizing complex forms by creating logical sections, improving both the form's structure and user experience. The <fieldsetcan be paired with a <legendelement to provide a caption for the grouped content, making the form easier to understand and navigate.\n\nAllows for selective processing of grouped data, making it useful for handling specific sections of a form independently when used with the FormData API.\nA form with fieldsetLorem ipsum\nDolor Sit amet\n\nLorem ipsum\n\nLorem ipsum\n\nA form with fieldset disabledLorem ipsum\nDolor Sit amet\n\nLorem ipsum\n\nLorem ipsum\nInput resize\nresize-noneresize-vertical\nAnimations\nslide-out\nleftupdownright\n3s2s1s09s08s07s06s05s04s03s02s01s\nlooprestart\nlineareaseease-inease-outease-in-out\ninfiniterepeat-1repeat-2repeat-3\nTest animationReset\nTransition\nTransition properties\n\ntransition-opacity\ntransition-position\ntransition-all\n\nTransition timing functions\n\ntransition-ease\ntransition-ease-in-out\n\nTransition duration\n\ntransition-duration-01\ntransition-duration-02\ntransition-duration-03\ntransition-duration-04\ntransition-duration-05\nBlur\nBackdrop blur\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis elementum ante et est sagittis integer eget metus vel nunc semper.\nAspect ratio\nWith fixed width\n\n1\n1-2\n2-1\n4-3\n16-9\n16-10\n\nWith fixed height\n\n1\n1-2\n2-1\n4-3\n16-9\n16-10\nInset\ninset-0\n\ninset-x-0\n\ninset-y-0\n\nBase element\nShorthand element\nHelper\nclearanceclearfixchildren-first-border-top-nonefirst-child-border-top-nonechildren-last-border-bottom-nonelast-child-border-bottom-nonechildren-first-margin-top-0first-child-margin-top-0children-last-margin-bottom-0last-child-margin-bottom-0\nRotate\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.\nRotate 360°\n\nRotate -5° to 5°\nScale\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.\nScale\n\nHover scale\nTranslate\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform Syntax.\nDisplay\ndisplay-blockdisplay-inline-blockdisplay-flexdisplay-inline-flexdisplay-inlinedisplay-none\nOverflow\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\nVisibility\nVisible only at a certain breakpoint\n\nvisible-xsvisible-lsvisible-smvisible-mdvisible-lgvisible-xl\nVisible from a certain breakpoint\n\nvisible-min-lsvisible-min-smvisible-min-mdvisible-min-lg\nHidden only at a certain breakpoint\n\nhidden-xshidden-lshidden-smhidden-mdhidden-lghidden-xl\nHidden from a certain breakpoint\n\nhidden-min-lshidden-min-smhidden-min-mdhidden-min-lg\nHidden when element is empty\n\nhidden-empty\nscreen-xs: >480pxscreen-ls: 480pxscreen-sm: 768pxscreen-md: 992pxscreen-lg: 1200pxscreen-xl: 1700px\n\n.visible-xsVisibleHiddenHiddenHiddenHiddenHidden\n.visible-lsHiddenVisibleHiddenHiddenHiddenHidden\n.visible-smHiddenHiddenVisibleHiddenHiddenHidden\n.visible-mdHiddenHiddenHiddenVisibleHiddenHidden\n.visible-lgHiddenHiddenHiddenHiddenVisibleHidden\n.visible-xlHiddenHiddenHiddenHiddenHiddenVisible\n\n.hidden-xsHiddenVisibleVisibleVisibleVisibleVisible\n.hidden-lsVisibleHiddenVisibleVisibleVisibleVisible\n.hidden-smVisibleVisibleHiddenVisibleVisibleVisible\n.hidden-mdVisibleVisibleVisibleHiddenVisibleVisible\n.hidden-lgVisibleVisibleVisibleVisibleHiddenVisible\n.hidden-xlVisibleVisibleVisibleVisibleVisibleHidden\n\n.visible-min-lsHiddenVisibleVisibleVisibleVisibleVisible\n.visible-min-smHiddenHiddenVisibleVisibleVisibleVisible\n.visible-min-mdHiddenHiddenHiddenVisibleVisibleVisible\n.visible-min-lgHiddenHiddenHiddenHiddenVisibleVisible\n\n.hidden-min-lsVisibleHiddenHiddenHiddenHiddenHidden\n.hidden-min-smVisibleVisibleHiddenHiddenHiddenHidden\n.hidden-min-mdVisibleVisibleVisibleHiddenHiddenHidden\n.hidden-min-lgVisibleVisibleVisibleVisibleHiddenHidden\n\nPrint\n\nvisible-printvisible-print-inlinehidden-print\n\nVisibility only classes\n\nAll the above classes for hidden and visible are based on \"display: none\". The following class affects only visibility, allowing it to impact surrounding elements.\nvisibility-hidden\nZ-index",
     "category": "Foundations",
     "section": "Interaction",
     "boost": "Foundations foundations #foundations Foundations Interaction"
@@ -1103,8 +1093,8 @@
     "id": "start/changelog",
     "title": "Changelog",
     "lead": null,
-    "summary": "- Fixed DatePicker Fixed DatePicker compatibility in ESM builds by unwrapping the CommonJS default export.",
-    "searchText": "Changelog\nVersion 2.0.1 (2025-12-15)\n- Fixed DatePicker Fixed DatePicker compatibility in ESM builds by unwrapping the CommonJS default export.\n\n- Fixed Area, Line Fixed chart components type definition for prop \"dataKey\".\nVersion 2.0.0 (2025-12-12)\n- Removed We’ve modernized our build setup by removing CommonJS support and switching entirely to ESM. If your project still depends on CommonJS (for example, with older tooling like Webpack), your build may fail. Please update your development environment to support ESM.\n\n- Removed Removed the root index.js barrel file that re-exported all components. This change eliminates multiple import paths, improves IntelliSense auto-import behavior, and prevents importing the entire UIKIT, ensuring proper tree shaking. Please update your imports to use default imports, for example: import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout'.\n\n- Removed CalendarStripe Removed deprecated prop \"render\". Please use \"renderDay\" instead.\n\n- Removed Collapse Removed deprecated prop \"in\". Please use \"open\" instead.\n\n- Removed ClearableInput Removed deprecated prop \"alwaysShowMask\". Please use \"maskVisibility='always'\" instead.\n\n- Removed Dialog Removed deprecated prop \"onHide\". Please use \"onClose\" instead.\n\n- Removed SingleMapMarker Removed deprecated prop \"size\". Please use \"anchorSize\" instead. Removed deprecated prop \"visibleOnHover\". Please use \"markerOnHover\" instead.\n\n- Removed DataTab Removed the internal \"fade in\" class names from the DataTab component, which were previously kept for backward compatibility with CSS transitions used in older service tests. Please use the new onAnimationStart and onAnimationEnd callbacks instead.\n\n- Renamed Animations Renamed \"framer-motion\" component to \"motion\" as we have migrated to the latest motion library that was formerly known as Framer Motion.\n\n- Removed NotificationsContainer Removed deprecated prop \"stacked\" since it is not supported anymore. Removed legacy usage documentation.\n\n- Breaking Notification Removed deprecated prop \"priority\" since it is not supported anymore. Removed old notification API in favor of the notifications options object. If you still use the legacy API \"Notification.info(message, title, timeOut, callback, priority)\", please migrate to the format \"Notification.info(message, options)\".\n\n- Removed OnboardingTip Removed deprecated prop \"clickflow\". Please use the \"useOnboardingTour\" hook instead.\n\n- Removed NumberInput / NumberControl Removed deprecated prop \"onValueChanged\". Please use \"onChange\" instead.\n\n- Removed Sidebar Removed deprecated prop \"enableNavigationButtons\". Please use \"headerButtons\" instead. Removed deprecated prop \"disableFullscreen\". Please use \"enableFullscreenToggle\" instead. Removed deprecated prop \"fullscreen\". Please use \"openInFullscreen\" instead.\n\n- Removed Removed old class \"invisible\". Please use \"visibility-hidden\" instead.\n\n- Icons Renamed icon rioglyph- retweet rioglyph- repeat-square Renamed icon rioglyph- cost-efficency rioglyph- cost-efficiency Renamed icon rioglyph- eye-option rioglyph- eye-open Removed icon as it was a duplicate of rioglyph- component rioglyph- maintenance-components\n\n- Breaking BarChart, RadialBarChart, PieChart, Legend With this release, the internal Recharts dependency has been migrated to version 3.x. This upgrade introduces a breaking change related to the Legend component: the payload prop, which was previously used internally to inject custom legend data, has been removed from Recharts. As a result, the legend behavior in BarChart and RadialBarChart has been updated. The default legend position is now correctly rendered vertically in the top-right corner. Previously, it appeared at the bottom despite the default settings. Please review your charts to ensure the legend position remains as intended. If you use colors defined inside your data objects for BarCharts, you must now provide both the items (your data array) and a custom content render function to the Legend. This replaces the old payload-based legend behavior. Series-based legends using a formatter continue to work as before. Recharts 2.x also used to have a prop named activeIndex that was setting which item the user was interacting with. In version 3.0, this prop has been removed. For more details, see the Recharts activeIndex guide https://recharts.github.io/en-US/guide/activeIndex/ If your PieChart uses an activeShape render callback, you should now use the ChartTooltip component and set its defaultIndex to replace the previous activeIndex behavior. See the whole Recharts migration guide for more details: https://github.com/recharts/recharts/wiki/3.0-migration-guide#breaking-code-changes\n\n- Fixed FilePicker Fixed the type of the \"files\" parameter from FileList to File[] of the \"onPick\" callback.\n\n- Fixed Rioglyph Fixed Rioglyph icon typing to expose a concrete IconType union of all icon names, improving autocomplete and safety for consumers.\n\n- Update AssetTree Added new asset type \"car\" to AssetType type definition and to built-in type counter of the AssetSummary for the Tree component.\n\n- Update VolkswagenApplicationHeader Updated VolkswagenApplicationHeader with new VW Group logo. This single group logo also replaces the logo for \"VW Aktiengesellschaft\" and \"Group Logistics\" resulting in an overall smaller header height.\n\n- Update Migrated entire codebase from lodash to es-toolkit to leverage modern JavaScript.\n\n- New AnimatedTextReveal Added new AnimatedTextReveal component emphasize text through motion for showing incremental updates or loading states.\n\n- New useAutoAnimate Added a lightweight hook to animate add/remove/reorder operations of children with zero configuration.\n\n- New fit-content Added new \"min-width-fit-content\" utility classes. See detailed explanation and comparison to other content-based min-width classes.\n\n- New text-box Added new \"text-box\" utility classes to trimming off extra spacing from the block-start edge and block-end edge of a text element's block container.\n\n- New icons Added new rioglyph style for disabled icons with a line\n\n- Icons New icons rioglyph- ai rioglyph- arrows-collapse rioglyph- arrows-combine rioglyph- arrows-expand rioglyph- arrows-horizontal rioglyph- arrows-split rioglyph- assigned rioglyph- axis-x rioglyph- axis-y rioglyph- axis-z rioglyph- bar-chart-box rioglyph- battery-charging rioglyph- brain rioglyph- branch-horizontal rioglyph- branch-remove rioglyph- branch-vertical rioglyph- broadcast rioglyph- bulb rioglyph- chip rioglyph- cloud-progress rioglyph- coffee rioglyph- compass rioglyph- crown rioglyph- discount-badge rioglyph- emergency-stop rioglyph- eye-closed rioglyph- eye-open rioglyph- filter-reset rioglyph- get rioglyph- give rioglyph- globe-alt rioglyph- hierarchy rioglyph- history rioglyph- insert rioglyph- leafs rioglyph- magic-wand rioglyph- note rioglyph- progression rioglyph- satellite-radar rioglyph- stack-add rioglyph- stack-iso rioglyph- stats-high rioglyph- stats-line-dots rioglyph- stats-low rioglyph- stats-medium rioglyph- time-incomplete rioglyph- unassigned rioglyph- unavailable rioglyph- variable rioglyph- workflow-step rioglyph- workflow Updated icons rioglyph- arrow-down rioglyph- arrow-left rioglyph- arrow-right rioglyph- arrow-up rioglyph- battery-level-empty rioglyph- battery-level-full rioglyph- battery-level-low rioglyph- cloud-download rioglyph- cloud-not-saved rioglyph- cloud-upload rioglyph- compare rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- cost-efficency rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- error-sign rioglyph- flash rioglyph- info rioglyph- maintenance-components rioglyph- merge rioglyph- missing rioglyph- off rioglyph- refresh rioglyph- repeat rioglyph- resize-full rioglyph- resize-horizontal rioglyph- resize-small rioglyph- resize-vertical rioglyph- save rioglyph- trash rioglyph- volume rioglyph- workshop rioglyph- wrench Removed icons rioglyph- video-off rioglyph- wifi-off\nVersion 1.13.2 (2025-11-19)\n- Fixed Obfuscate data Fixed a bug that triggered an infinite loop when data-pii was applied to a nested child element.\n\n- Update Button Added new \"unstyled\" buttons style\nVersion 1.13.1 (2025-10-20)\n- Fixed Fixed bundling npm package. Resolve nested folder structure in npm package build.\nVersion 1.13.0 (2025-10-20)\n- Fixed fuel type utils Fixed missing root export for fuel type utils.\n\n- Fixed Action button style Fixed the muted style for action buttons.\n\n- Fixed MapMarker Fixed the active styling for the map marker active state to visually balance the state icon.\n\n- Update Rioglyph Added the missing feature to use external SVGs as a rioglyph icon.\n\n- Update FilePicker Added new \"fullHeight\" flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow.\n\n- New max-content Added new \"min-width-max-content\" and \"min-width-min-content\" utility classes. The first prevents content from breaking by expanding to fit its full width, while the second allows content to shrink to the smallest width possible without overflowing.\n\n- New Grid Added new \"grid-template-end--1\" utility class. This class allows grid items to span until the last grid line, effectively positioning them to extend to the end of the grid.\n\n- New Obfuscate data Added new \"data-hide-pii\" attribute to the <htmlelement to obfuscate sensitive data directly in the frontend. Obfuscate names, emails, or phone numbers — without needing backend filtering or extra code changes.\n\n- Icons New icons rioglyph- circle-dashed rioglyph- square-dashed rioglyph- cube-dashed rioglyph- cube rioglyph- group-blocks rioglyph- dashboard-view rioglyph- ok-dashed rioglyph- prompt rioglyph- recycle rioglyph- warehouse rioglyph- status-change rioglyph- status-change-horizontal rioglyph- transition-right rioglyph- transition-push-right rioglyph- migrate rioglyph- convert rioglyph- shelve rioglyph- conveyor-belt rioglyph- tracking-package rioglyph- issue-tracking Updated icons rioglyph- ok-sign rioglyph- ok-circle\nVersion 1.12.0 (2025-09-22)\n- Fixed Select Fixed an issue in the Select component where clearing the filter input after a no-results search caused the option list to remain incomplete. The dropdown now correctly restores the full option set when the filter is cleared.\n\n- Fixed AssetTree Fixed an issue where clicking the checkbox on a tree group would also toggle its expanded state. Now, selecting a tree group via its checkbox only triggers selection and no longer expands or collapses the group. This prevents unintended virtualization behavior where expanding a node could cause the tree to switch into virtualized mode, resulting in the loss of tree group selections.\n\n- Fixed Callout Removed overflow hidden from callouts so dropdowns can be shown correctly.\n\n- Fixed Ellipsis Fixed \"ellipsis-1\" class.\n\n- New Rioglyph, fuel type utils Added a new component for rendering Rioglyph icons as a span element. The component also supports paired icons, allowing two glyphs to be displayed together as a combined symbol. In addition, a \"getFuelIcon\" helper function was introduced that maps fuel types to their corresponding icons, ensuring consistent and correct icon usage across the application.\n\n- Update FormLabel Added missing \"Node\" type info for supportingText the props table and changed the handling of supportingText styling so that the text-italic class is only applied when the supportingText is a string. If you provide a string wrapped in a div or span, you have to set the italic class manually.\n\n- Update Tree Added a new \"pairIcon\" prop to TreeItem allowing pair icons to be individually specified in the Tree component.\n\n- Update ClearableInput Added new input mask related props \"maskOverwrite\", \"maskDefinitions\", and \"maskDispatch\" to support dynamic masking for more complicated use cases and to give more control over the masking.\n\n- Update useOnboardingTour Updated the typings and documentation for the useOnboardingTour hook.\n\n- style Pills Updated the hover style for the application header navigation as well as for the nav pills.\n\n- Icons As RIO will support more fuel types in the future, and because of inconsistencies in existing naming conventions, we introduced a new icon: \"rioglyph-fuel-liquid\". This icon replaces \"rioglyph-fuel-diesel\" to better represent a broader range of liquid fuels. With this change, there are now four dedicated fuel icons available, plus one for a mixed fuel type. rioglyph- fuel-liquid rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- fuel-mix With this approach, frontends can use the same icon for diesel or gasoline and also for CNG and natural gas by simply using the new \"getFuelIcon\" function form the Rioglyph component. The old “rioglyph-fuel-diesel” icon will continue to work, but it will no longer be listed in the UIKIT demo page icon list. Additional new icons: rioglyph- video rioglyph- video-off\n\n- Demo Service-specific settings Updated the ApplicationHeader demo to include an example of service-specific settings, establishing a consistent approach for presenting unique configurations that cannot be included in the global user profile settings. It helps ensure a familiar user experience across different services while keeping global settings clean and focused.\nVersion 1.11.0 (2025-08-11)\n- Fixed Map settings Updated implementation for map satellite view to support zoom limits by using a hybrid map layer approach.\n\n- Fixed SteppedProgressBar Fixed styling issue in circular variant of the SteppedProgressBar when an item is active.\n\n- Fixed SplitDialog Fixed left side width for larger dialogs. Added new prop to hide the split divider.\n\n- Fixed FormLabel Fixed usage of HTML tag label only when part \"htmlFor\" is set and has a value.\n\n- Update Tree Added a new \"expandedIcon\" prop to the TreeGroups to support showing a different icon when the group is expanded.\n\n- Update Sticky table columns Renamed \"table-sticky-cell-first\" and \"table-sticky-cell-last\" to \"table-sticky-column-first\" and \"table-sticky-column-last\" for improved clarity. Updated the styles to respect the table header and prevent content from peeking through when horizontally scrolled.\n\n- New useAverage, useCount, useMin, useMax, useSum Added useAverage, useCount, useMin, and useMax, and useSum hooks for locale-aware numeric aggregation of object lists. Supports specifying a dot-separated path to the target property.\n\n- New Table grid lines Added new table class \"table-grid-lines\" that is useful when building data heavy tables.\n\n- New Table row span and Table double row header Added new table examples showcasing row span and double header layouts to demonstrate table design capabilities for data heavy tables.\n\n- New Progress bars indeterminate style Added new indeterminate style to show a progress bar even when you not know how long it will take.\n\n- Demo Templates Added new template sections and several UI block examples. Updated the template menu structure to improve navigation and discoverability.\n\n- Demo Email generator We’ve built a neat little email editor that helps you compose emails and copy the HTML code.\n\n- Demo Route generator There is a new route generator with a JSON export of the LAT/LNG coordinates.\nVersion 1.10.1 (2025-01-08)\n- Fixed Map settings Changed implementation for map satellite view as the old implementation relied on deprecated Here APIs.\nVersion 1.10.0 (2025-07-28)\n- Fixed Fixed an issue where clicking the \"Scroll to Top\" arrow button would block further scrolling down the page. The scroll behavior is now fully restored after returning to the top, ensuring smooth navigation throughout.\n\n- Fixed DatePicker Fixed styling issue in DatePicker inputs with error feedback where input text was unnecessarily cut off due to padding for the clear icon, even when no clear button was rendered.\n\n- Fixed ApplicationHeader Fixed an issue where the application header rendered in mobile style on initial page load when the container width could not be determined in time. This resolves visual jumping between mobile and desktop header layouts during mount.\n\n- Fixed SavableInput / SavableDateInput Moved error handling into the components to simplify feedback styling. Added two new props, \"errorMessage\" and \"hideErrorIcon\", to control the visual appearance of error feedback.\n\n- Fixed Panels, Pills, Badges Fixed various element styles for brand themes.\n\n- Update Tree Added a new \"icon\" prop to TreeItem allowing icons to be individually specified or explicitly omitted in the Tree component. Also updated the TreeGroups to support icon values with or without the rioglyph- prefix for improved flexibility.\n\n- New CSS Container queries Introduced new utility classes to make use of container queries, enabling responsive spacing and layout adjustments based on container width rather than viewport size. For more details, please check out our responsiveness guidelines.\n\n- New Rounded table Added new utility classes \"table-bottom-rounded\" and \"table-rounded\" for use when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners.\n\n- Icons Added icons icons rioglyph- train rioglyph- cargo rioglyph- design\n\n- Style We migrated our codebase from Less to Sass to modernize our tooling and take advantage of the latest CSS capabilities, as Less is no longer actively maintained.\n\n- Demo Renamed the main navigation items to improve clarity and consistency. “Design” is now called Foundations, and “UI Templates” has been simplified to Templates to better reflect their purpose.\n\n- Demo Added new sections and examples to UI templates that serve as a quick starting point for developing your own layouts and interfaces. See Expandable details, Details views, and Progress cards. Moved the panel example from the foundations tab to Panel variants.\nVersion 1.9.0 (2025-06-30)\n- Fixed Tooltip / SimpleTooltip Fixed delaying tooltips using a single delay number. Tooltip delay now only applies to showing, not hiding. To configure both show and hide delays, use the object format instead of a single delay number.\n\n- Fixed ClearableInput Properly pass external ref to underlying masked input component using its inputRef prop.\n\n- Fixed DatePicker Fixed an issue where the DatePicker would render incorrectly when used as a child inside a table cell.\n\n- Update TableHead, TableCol Extended table components to pass additional props to the underlying tag.\n\n- Update useTableSelection Extended useTableSelection hook to allow setting the selected rows and change the active row from the outside using the \"setSelectedRowIds\" and \"setActiveRowId\" setter functions.\n\n- Update Select, Multiselect We’ve reverted the max-width of the Select, and Multiselect dropdown to 100% to stay consistent with other components and to prevent unnecessary line breaks within dropdown items. If the dropdown appears too wide, you can use the dropdownClassName prop to apply a shorter max-width-x utility class as needed.\n\n- Update AssetTree Extend the Tree component to virtualize tree items when a certain threshold is reached. The number of items rendered beyond the visible area can be controlled using the \"overscan\" prop. This change improves performance for large trees and long lists.\n\n- Update Map Extend the Map component to allow specifying minimum and maximum zoom levels. By default, the minimum zoom level is set to 3, defining the furthest zoomed-out view. The maximum zoom level, representing the closest zoomed-in view, is set to 20. Improved zoom behavior to reduce momentum and allow for more controlled zooming.\n\n- Update FormLabel Extend the FormLabel component to allow passing in a React element as supporting text, making it easier to add question mark icons with tooltips.\n\n- New SavableDateInput Added new dedicated savable input component that wraps the DatePicker.\n\n- New BarList Added BarList component to display customizable, animated horizontal bars for comparative data.\n\n- New useTableExport Added new custom hook to easily export table data as CSV.\n\n- New useIsFocusWithin Added new custom hook to easily detect if the focus is inside a defined document node.\n\n- Docu Pagination Added usage documentation for pagination and explained why the load more button is preferred for tables.\n\n- Demo UI Templates Added new sections showcasing various UI templates and blocks that serve as a quick starting points for developing your own layouts and interfaces.\nVersion 1.8.0 (2025-05-19)\n- Fixed Map Fixed issue with satellite view layer not rendering correctly when Norwegian language is selected.\n\n- Fixed usePostMessage Remove logging of triggered events to the console.\n\n- Fixed Height classes Corrected height calculation when using \"\"...-height-100vh\" classes inside module-content; vertical padding was not properly subtracted.\n\n- Update URL feature toggles Made the feature toggle value types more precise. Added new feature toggle definition functions that allow you to specify a default value.\n\n- Update AssetTree Extended the Tree component with an onTypeFilterChange callback, allowing the service to filter selected assets accordingly.\n\n- Update Multiselect Added a maximum width of 200px for the Multiselect dropdown component. Additionally, there are two new props \"dropdownClassName\" and \"btnClassName\" to allow further customization similar to the Select component.\n\n- Update ButtonToolbar Extend alignment prop to center buttons.\n\n- Update Switch Added new \"className\" prop to the Switch.\n\n- Update ButtonDropdown Added new prop \"toggleButtonType\" to ButtonDropdown component to allow using a button, a tag or a label as toggle element.\n\n- Update ClearableInput Added a new prop \"maskVisibility\" to control when the mask pattern is visible. Deprecated the prop \"alwaysShowMask\". in favor of maskVisibility.\n\n- Update useOnboardingTour Expose internal onDestroyed callback. Add \"disableActiveInteraction\" prop to disable interaction of highlighted elements.\n\n- Update useSorting Added new callback function \"setSortDirection\" allowing to set sort direction when used with table card sorting.\n\n- New useLocationSuggestions Added new custom hook to fetch locations from Here API that can be used for search inputs.\n\n- New useSearch Added new custom hook to filter a list of objects by a search value.\n\n- New useTableSelection Added new custom hook to handle both single and multiple row selection in tables, optimized for large datasets.\n\n- New TableHead, TableCol Added new table components \"TableHead\" and \"TableCol\" to simplify table structures especially when used with custom hooks like \"useTableSelect\" and \"useSorting\".\n\n- New SvgImage Added new component that helps rendering SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes.\n\n- Icons New icons rioglyph- envelope-open rioglyph- envelope-indicator\n\n- Replaced Replaced react-input-mask with react-imask in TimePicker and ClearableInput components. The mask prop format has changed and is no longer fully compatible with the old react-input-mask syntax. The main difference is the number placeholder, which has changed from \"9\" to \"0\". Please update the mask prop accordingly when using the ClearableInput with an input mask.\nVersion 1.7.1 (2025-02-14)\n- Fixed Banner Fixed height animation of the Banner component when expanding. Added prop \"initialAnimation\" to disable initial content animation.\n\n- Fixed FormLabel Check for various input group sizes to render respective label text sizes.\n\n- Fixed SplitDialog / ListMenu Fixed the issue where a ListMenu dropdown was rendering all menu items on mobile upon mount. Now, only the dropdown is rendered initially.\n\n- Fixed RIOglyph Removed default aspect ration of 1/1 because of problems in flex/grid layouts.\n\n- Fixed Checkbox Fixed broken indeterminate state\n\n- Update RIOglyph Added new rioglyph-align-top, rioglyph-align-bottom and rioglyph-align-baseline classes for proper alignment width texts. Replaced previously introduced has-inline-icon with new rioglyph-align classes.\nVersion 1.7.0 (2025-02-10)\n- Fixed Collapse Fixed visible content overflow in the Collapse and Expander components during content animations.\n\n- Fixed ApplicationLayout Fixed the issue with passing a ref to the ApplicationLayout by exposing the underlying wrapper element. When merging the external ref with the internal ref, the wrapper is now properly exposed, eliminating the need for accessing ref.current.current in the invoking component.\n\n- Fixed ButtonDropdown / useClickOutside Fixed performance of rendering many dropdowns in a large table by introducing an \"isActive\" flag to the useClickOutside hook so that events are only registered and listening when the dropdown is actually open.\n\n- Fixed Route Fixed rendering of dashed routes via the \"lineDash\" prop.\n\n- Fixed List groups Fixed list group buttons active style.\n\n- Icons RIOGlyph We've transitioned the RIOGlyph icon font to an SVG-based system and allowing support for custom SVGs. Please read our guidelines Almost all RIOGlyph implementations will work out of the box. However, in certain cases, adjustments are required because RIOGlyph icons no longer behave as a font. What has changed? Previously, icons acted like text, inheriting line-height and vertical-align naturally. Now, as SVG elements, icons better have layout adjustments in inline text scenarios. The HTML structure for MapMarkers has been changed to accommodate the new icons. Please update the DOM selectors in your tests accordingly if they rely on the markup. All icons can now also be displayed as filled icons by adding rioglyph-filled Recommended solution < span className = \" has-inline-icon \" Lorem ipsum dolor sit amet < span className = \" rioglyph rioglyph-face-smile \" </ span </ span Lorem ipsum dolor\n\n- Update Dialog Changed dialog footer to use flex layout to ensure proper button positioning. No more need to add \"pull-right\" or custom flex classes.\n\n- Update Dialog animation Add support for the browser's \"prefers-reduced-motion\" flag. When this flag is enabled, dialog animations are disabled. This can be helpful for customers experiencing performance issues while running the application.\n\n- Update ListMenu Added new props to ListMenuItem to allow adding a badge for the list menu group header.\n\n- Update AppNavigationBar Added new props to AppNavigationBar to support a back button title, a subtitle, and a title size. The title is now always centered.\n\n- Update Notifications Replaced the underlying notification library with \"react-toastify\", introducing new options while maintaining the same API for backward compatibility. This update also includes a refreshed notification style.\n\n- Update Charts Updated internal Recharts library to latest version 2.15.0 to remove some warnings.\n\n- style Labels Updated the design of standard labels for a more modern look and added documentation on when to use them.\n\n- New Button Added new \"muted-filled\" button for occasions where the default button is to prominent and the muted button is to subtle.\n\n- New StepButton Added new \"StepButton\" component for convenience and to ensure consistent styling of this type of button.\n\n- New ButtonToolbar Added new \"ButtonToolbar\" component for convenience and to ensure consistent spacing of buttons.\n\n- New FormLabel Added new \"FormLabel\" component for convenience to be used on form elements that utilizes a \"htmlFor\" prop and a label or other form elements.\n\n- New LabeledElement Added a simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements\n\n- New Card Added new \"Card\" component for convenience to apply default styling for a card like element. This component aims to simplify and align common card styling.\n\n- New Avatar Added new \"Avatar\" component for showing the user name initials, a user image, or a user icon.\n\n- New Banner Added new \"Banner\" component for rendering informational content on a page.\n\n- New AccentBar Added new \"AccentBar\" component for visual cues.\n\n- New VirtualList Added new \"VirtualList\" component for rendering large lists using a windowing approach.\n\n- New useToggle Added new \"useToggle\" component to simplify boolean state handling. Use it to handle toggle-based logic like switches, modals, or content visibility.\n\n- New Chart colors Added new chart colors to the chart color map.\n\n- Demo Draggable map marker Added new map demo to showcase draggable map marker.\n\n- Icons New icons rioglyph- light-bulb Renamed icons rioglyph- filled-chart rioglyph- area-chart Updated icons rioglyph- am rioglyph- angle-double-down rioglyph- angle-double-left rioglyph- angle-double-right rioglyph- angle-double-up rioglyph- area-in rioglyph- area-out rioglyph- beacon rioglyph- bookable-poi rioglyph- bookmark-square rioglyph- brake rioglyph- businessman rioglyph- car-wash rioglyph- carrier rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- construction rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- document-out rioglyph- download rioglyph- driver-card rioglyph- driver rioglyph- drivercard-in rioglyph- drivercard-out rioglyph- erase rioglyph- file-signature rioglyph- fill rioglyph- folder-open rioglyph- home rioglyph- inbox-in rioglyph- inbox-out rioglyph- log-in rioglyph- logout rioglyph- map-location rioglyph- map-marker rioglyph- pencil-square rioglyph- pm rioglyph- retrofit rioglyph- role-management rioglyph- tachograph-download rioglyph- tms rioglyph- trailer rioglyph- user rioglyph- volume rioglyph- warning-sign rioglyph- weight\n\n- Update Dependencies Updated the minimum React version requirement to 18 to ensure compatibility with the latest features and optimizations. If you are using older versions of React, please update.\n\n- Removed Removed the outdated cross-browser style documentation.\n\n- Update Notifications Extended the writing style guide for guidance for using different notification types\n\n- Update Commonly misspelled words Extend the writing style guide for a list of commonly misspelled or misformatted words\n\n- Update Formatting numbers with units Extended the list of formats for examples of \"kilowatt-hour\" and \"megawatt-hour\". Please note that these units are not yet officially supported by TC39.\nVersion 1.6.1 (2024-12-09)\n- Fixed ApplicationLayout Fixed the application layout to ensure the body contains only a single child, addressing issues with the recently introduced grid layout for the body scrollbar element.\nVersion 1.6.0 (2024-12-02)\n- Fixed SplitDialog Fixed the SplitDialog prop documentation for \"useOverflow\" to clarify that its default value is \"true,\" unlike other dialogs.\n\n- Fixed Multiselect Fixed the Multiselect component to correctly manage the dropdown state and filter value when used in multiline mode with an active filter.\n\n- Update Tree Added \"treeHeaderContent\" prop to the Tree component for rendering additional custom content at the top of the tree, useful for navigation pills.\n\n- Update Dialog Extended dialog sizes for \"fullheight-lg\" and \"fullheight-xl\".\n\n- New useOnboardingTour Introducing a new way to onboard users via an onboarding tour by using the \"useOnboardingTour\" custom hook. Note that weh have deprecated the \"clickflow\" prop for the OnboardingTip component with this new feature.\n\n- New OnboardingDialog Added new OnboardingDialog to initiate a onboarding tour and acts as the welcome dialog for the user of a service.\n\n- New Grid rows Added new grid helper class \"grid-rows-auto-1fr-auto\" to support a 3 row layout with expandable middle row.\n\n- Icons Updated icons rioglyph- cost-efficency Added icons rioglyph- newspaper rioglyph- rocket rioglyph- trophy rioglyph- check-badge rioglyph- check-shield rioglyph- sparkles rioglyph- academic-cap rioglyph- onboarding rioglyph- bookmark rioglyph- bookmark-square\nVersion 1.5.3 (2024-11-05)\n- Fixed AssetTree Fixed asset tree height by setting the \"scrollbar-content-wrapper\" to display flex and let the tree wrapper grow in the flex column direction.\nVersion 1.5.2 (2024-11-04)\n- Fixed SmoothScrollbars Changed height-100pct to min-height-100pct because of height side-effects in chrome.\n\n- Icons Added icons icons rioglyph- oil-can\nVersion 1.5.1 (2024-10-22)\n- Fixed Pills Fix rendering icons in justified filled pills when there is an icon only.\n\n- Fixed SmoothScrollbars Added height-100pct to the recently introduced smooth scrollbar content wrapper. This also fixes a side-effect on the AssetTree component.\n\n- Fixed MapMarker Tone down the POI marker color to better match the new Geofence color and to work better on a large satellite map.\nVersion 1.5.0 (2024-10-21)\n- Fixed Route Fix setting route arrow style. Added color constants for using status colors for routes. Extend demo examples to showcase usage of route styles and colors.\n\n- Fixed SmoothScrollbars Fix updating the scrollbar handle when the content height changes. This fix introduces a new wrapper div to check the children's height. Please check your tests and update them in case you rely on the old structure.\n\n- Fixed Select Fixed an issue with updating the dropdown menu options after the initial render, ensuring that the filter utilizes the updated DOM nodes.\n\n- Update LineChart Extended charts to render additional axis. The demos have been extended for interactive legends to highlight active lines.\n\n- Update Route Extended Route component to allow storing custom data to it which can be used when clicking on the routes polyline to set the route active.\n\n- Update Map isoline Extended the Polygon component to import the RIO colors to use it for an isoline or other polygons. Extended the demo to also include isoline colors.\n\n- Update Colors Adapted the \"gray-decent\" slightly and with that all derived classes like \"bg-decent\" and \"hover-bg-decent\"\n\n- Update Forms All form inputs have a subtle shadow now.\n\n- New Map marker A new map marker color has been added for road restrictions. The geofence color has been updated to avoid confusion with the restriction color used by HERE maps for their road restrictions. The new geofence color provides significantly better contrast and is clearer to see on the satellite map type.\n\n- New Chat Added new pure CSS chat component\n\n- New FadeUp Added new components to fade in from the bottom when an element appears on screen. This can be used to stagger elements on scroll.\n\n- New FadeExpander Added new components to expand content. This can be used to reveal or hide additional content triggered by all kinds of interaction.\n\n- New Cursor Added more cursor-style utility classes\n\n- New Shadows Added new shadow classes \"shadow-subtle\" and \"shadow-muted\", as well as directional classes \"shadow-muted-down\" and \"shadow-default-down\" to be used on light and white backgrounds. The hard shadow direction styles are now slightly more blurred to remove the hard line in the shadow. Note: the following shadow classes are deprecated: \"shadow-smooth-to-top\", \"shadow-smooth-to-bottom\", \"shadow-hard-to-top\", and \"shadow-hard-to-bottom\". Please use \"shadow-smooth-up\", \"shadow-smooth-down\", \"shadow-hard-up\", and \"shadow-hard-down\" instead.\n\n- New useSorting Added new useSorting hook for easily sorting any list by specified key using natural sort order\n\n- New URL feature toggles Added URL-based feature toggle handling and description of how to use them\n\n- Icons Added icons icons rioglyph- bookable-poi rioglyph- car-wash Updated icons rioglyph- truck rioglyph- truck-baseline rioglyph- truck-breakdown rioglyph- truck-unit rioglyph- van rioglyph- van-baseline rioglyph- trailer rioglyph- trailer-baseline rioglyph- trailerposition rioglyph- car rioglyph- car-baseline rioglyph- bus rioglyph- bus-baseline rioglyph- bus-breakdown rioglyph- filling-e-station rioglyph- filling-station rioglyph- euro-note rioglyph- order rioglyph- palette rioglyph- palette-broken rioglyph- parcel rioglyph- parcel-broken rioglyph- empty\n\n- Update Border radius and shadows The default border radius has been increased, and new shadow styles have been introduced, affecting various elements such as buttons, inputs, and panels. These updates collectively enhance the overall design, providing a more modern, refined, and visually appealing look and feel.\nVersion 1.4.1 (2024-09-12)\n- Update ButtonDropdown Added forwardRef to ButtonDropdown and pass it to the underlying dropdown toggle button. Fixed ButtonDropdown demo page examples.\n\n- Fixed Tooltip Wrapped Tag and Switch component in forwardRef so they work with the OverlayTrigger and SimpleTooltip component\n\n- New Map fullscreen demo Added a fullscreen map demo with rendering some metrics for inspection and customer feedback\nVersion 1.4.0 (2024-09-06)\n- Fixed Fixed dark mode listener when trying to read the theme from the colorScheme cookie\n\n- Fixed Charts Fixed rendering of chart legends for all charts\n\n- Update LineChart, AreaChart Extended LineChart and AreaChart components with reference lines\n\n- Update Select Added \"isLoading\" prop to show a loading spinner inside the Select and Multiselect dropdown\n\n- Update useKey Extend useKey hook to allow specifying specific keys to listen for\n\n- New ComposedChart Added new simple ComposedChart component to render a combination of line, area, and bar charts\n\n- New GroupedItemList Added new GroupedItemList component to render a list grouped by a specific key with the flexibility to customize the group header and the rendered items\n\n- New LicensePlate Added new LicensePlate component to display license plate information with various customization options\n\n- Icons Added and updated icons rioglyph- air-pay rioglyph- euro-note rioglyph- language rioglyph- calendar-parking rioglyph- engine\n\n- Update Notifications Extended the writing style guide for notification and \"copy to clipboard\" guidelines\nVersion 1.3.0 (2024-07-26)\n- Fixed TreeOptions Fixed tree options tooltip position\n\n- Fixed DataTab Fixed DataTab title to avoid being set to the div element and used as native tooltip\n\n- Fixed SimpleDialog, SplitDialog Fixed typings of SimpleDialog and SplitDialog\n\n- Fixed Select Fixed italic placeholders for Select and Multiselect\n\n- Fixed Fixed DateRangePicker type for backwards compatibility\n\n- Update Sliders Added new \"color\" prop\n\n- Update Switch Added new \"color\" prop\n\n- Update Forms Added new focus shadow for form inputs and changed the input border color\n\n- Update OverlayTrigger, Tooltip, OnboardingTip, Popover The OverlayTrigger and Popover components are no longer based on react-bootstrap. They have been rewritten to remove the dependency and to fix some warnings when used with React 19.\n\n- New useElapsedTime Added new useElapsedTime hook to get the time since a component was mounted or from a provided starting time\n\n- New Flexbox Added class \"flex-0\" to flexbox utility classes\n\n- New Rounded Added class \"rounded-inherit\" to rounded utility classes\n\n- Update RIO Theme The danger color has been slightly adjusted to better match the other colors. Dark mode colors for danger, warning, and success have also been updated.\n\n- Update VW Theme Adapt highlight colors to VWAG guidelines\n\n- Update Formatting guide Extracted number and date formatting guidelines into a dedicated formatting guide page. This makes it easier to find and to keep the writing style guide shorter.\n\n- New Form labels and placeholders Extended the writing style guide for form labels and placeholders\nVersion 1.2.2 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown header items\n\n- Fixed Checkbox Fixed the rendering position of the checkbox in the grid layout using align-baseline, ensuring it remains stable when checked and unchecked\nVersion 1.2.1 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown when used in unit tests\n\n- Fixed Tree Fixed Tree scrolling when used as a standalone component without the wrapping AssetTree and when a \"scrollHeight\" is defined\n\n- Fixed AssetTree Merged the nested elements \".TreeLabel\" and \".TreeLabelName\" into a single element for TreeNode and TreeLeaf. This reduces the number of DOM elements and enhances performance. Note that you may need to update selector paths in integration tests if they reference tree items.\n\n- Fixed Key Fixed key style for dark mode\nVersion 1.2.0 (2024-06-26)\n- Fixed SmoothScrollbars Added missing root export for SmoothScrollbars component\n\n- Fixed ErrorState, EmptyState, CustomState Fixed button alignment for mobile screens\n\n- Fixed Marker Fixed \"list-group-item\" style when using color indicators\n\n- Fixed Multiselect Fixed filter input padding when Multiselect is used with a leading input addon\n\n- Fixed useAfterMount Fixed hook useAfterMount functionality\n\n- Update MapSettings Enhance MapSettings to include item labels. Substitute MapSettingsPanel with a Dropdown when labels are available. Please provide labels for users to improve usability. Note that providing labels will become mandatory in the future.\n\n- Update Marker Added new mapMarker \"cursor\" props\n\n- Update ListMenu Added new prop \"trailingInputAddon\" to allow adding additional elements to the filter input\n\n- Update DeviceUtils Added new device utils helper function to check for Apple Mac OS to be used for showing mac specific keys\n\n- New Feedback Added new feedback components to simplify requesting user feedback for various use cases\n\n- New Key Added style for keys by using the \"<kbd\" HTML tag\n\n- New Visibility Added new \"visibility-hidden\" class to only target the visibility without setting display to none\n\n- New Input resize Added new input resize classes\n\n- Icons Added new Icon rioglyph- layer-pois\nVersion 1.1.0 (2024-06-17)\n- Fixed CalendarStripe Fixed CalendarStripe component when resizing and rendering different amounts of columns\n\n- Fixed AssetTree Fixed rendering issue in AssetTree component when switching mode between \"fly\" and \"fluid\" externally\n\n- Fixed Marker Fixed broken Marker component when using it without an icon\n\n- Fixed Pills Fixed disabled styles for stacked and filled nav-pills\n\n- Fixed Traton Theme Fixed border radius for Dropdown, MapMarker, Slider, Tag, and Buttons\n\n- Update Marker Updated marker style for active and inactive markers. Extend marker colors for status colors. Adapt default colors for map for better readability in light and dark mode. Added new prop \"pinging\" to SingleMapMarker to render a pinging animation. Another new prop \"anchorIconName\" was added to render an icon directly on the markers anchor. The map direction icon can now be replaced via the new \"stateIconName\" prop and the default moving state can be changed.\n\n- Update AssetTree Added new prop \"treeOptionsTooltip\" to Tree component to show a tooltip for the tree options dropdown\n\n- Update ActionBarItem Updated the \"ActionBarItem.List\" style used for the service info popover. Please make sure to use the \"ActionBarItem.List\" and \"ActionBarItem.ListItem\" components to design the service info for the application header.\n\n- Update ErrorState, EmptyState, CustomState Added the prop \"bsStyle\" to the state components buttons to define other button styles like a default button. Also, when providing an href value, the button is rendered as a link. The headline size will increase now at the xl breakpoint to have a slightly smaller text size for smaller screens.\n\n- Update NoData Improved readability by improving text color contrast. Removed text uppercase according to the writing style guide.\n\n- Update Fieldset Update \"fieldset\" and \"legend\" style for grouping form elements. Added demo to showcase utility of using fieldsets in forms.\n\n- Icons Icons Update icons optical center to work better within circles like the direction icon for the map marker rioglyph- direction rioglyph- parking rioglyph- antenna rioglyph- heart rioglyph- location-arrow\n\n- New CSS Grid & Subgrid Added multiple CSS Subgrid utility classes and examples. Extended Grid classes and documentation\n\n- New Added bg-none and hover-bg-none class\nVersion 1.0.0 (2024-06-03)\n- Breaking With this version, we have started migrating all components towards Typescript for better typing support and documentation. With this migration, we will remove the internal types.ts file. As it was not intended to be used by any service, please make sure you update your imports accordingly. Check out the How to for more details. Be aware of possible changed component types as well.\n\n- Breaking Map With this version the HERE map implementation has changed significantly since we have migrated the map internally to the latest HERE APIs. This includes also the map rendering where the default render engine has changed from WebGL to HARP. Raster maps are rendered with the P2D engine. Due to this migration, the map types have a different design now. To make use of the new rendering engine, please add the following HERE dependency to your project. < script type = \" text/javascript \" src = \" https://js.api.here.com/v3/3.1/mapsjs-harp.js \" </ script\n\n- Removed Fade Removed several deprecated props from the Fade component\n\n- Removed Removed \"BrowserWarning\" component\n\n- Removed Removed \"text-muted\" utility class. Use \"text-color-gray\" instead\n\n- Removed Removed \"GroupSelectionUtil\" getNewGroupedSelected utility function\n\n- Removed Removed getOffsetTopWholeScreen utility function\n\n- breaking BottomSheet / Sidebar Renamed prop \"useBackdrop\" to \"hasBackdrop\" for BottomSheet and Sidebar component\n\n- breaking CalendarStripe Deprecated \"render\" prop of \"CalendarStripe\" component in favor of new \"renderDay\" prop\n\n- breaking Collapse / ExpanderPanel / ExpanderList Removed callbacks \"onEnter\", \"onEntering\", \"onExit\", and \"onExiting\" for ExpanderPanel and Collapse components. We introduced Framer Motions \"onAnimationStart\" callback instead. The ExpanderPanel header style underwent slight changes. The \"in\" class for the collapse is no longer used. Additionally, the \"react-transition-group\" library has been replaced with \"framer-motion\". The prop \"mountOnEnter\" has been removed from the ExpanderPanel, ExpanderList and Collapse components. Use \"unmountOnExit\" instead to control whether the collapsed content should be removed from the DOM when it is collapsed. The collapse prop \"in\" has been renamed to \"open\" to align with other components.\n\n- breaking List Groups and Expanders List groups no longer have a border and a border-radius by default. This has the advantage that they can now be used within other elements without having to overwrite many CSS values. To get the same look as before, you need to set the classes \"border\" and \"rounded\". Expander lists now have props for these two CSS properties, which are set to true by default.\n\n- breaking Resizer The Resizer component has been migrated from class component to functional component. With that the updated size value need to be set with a state setter function. Example: const handleResize = ( diff: number ) =setBoxWidth ( oldWidth =oldWidth - diff )\n\n- breaking Select / Multiselect Changed roles of Select and Multiselect dropdown menu from \"list\" to \"menu\" and the role of the individual select options from \"presentation\" to \"listitem\" to be aligned with the ButtonDropdown component. Fixed automatic drop direction check to open the dropdown above the toggle when there is not enough space. Removed deprecated size values \"small\" and \"large\" in favor of \"sm\" and \"lg\".\n\n- breaking Select The type definition for the Select component has changed. The more impactful change is the type for the \"onChange\" callback which has changed to handle the removal of a selection and therefor \"undefined\" will be returned. onChange = { ( selectedOption: SelectOption | undefined ) =handleChange ( selectedOption ?. id ) } Also important to note that the SelectOption type no longer can be imported via the \"types.ts\" file. Please adapt your import accordingly import Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\n\n- breaking Split SortArrows, SortArrowUp, and SortArrowDown in dedicated components. Change imports to default imports.\n\n- Removed useResizeObserver The \"Observer Entry\" object may now be null, so it can't reliably be destructured anymore. This doesn't work anymore: const [ ref, { borderBoxSize } ] = useResizeObserver ( ); console. log ( borderBoxSize ); Update your code like so: const [ ref, observerEntry ] = useResizeObserver ( ); console. log ( observerEntry ?. borderBoxSize ); Also, an option to specify the HTML element type of the generated ref was added (defaults do div).\n\n- Fixed Blockquote Change default blockquote padding from percentage to pixel. Please add custom padding classes to change it to your needs.\n\n- Fixed BottomSheet Fixed maximum width for BottomSheet component when using the \"detach\" prop. Allow defining the detach offset.\n\n- Fixed Chart Colors Fixed export of shared colors for diagrams\n\n- Fixed Loading Guidelines Fixed spinner size for buttons to avoid button size changes. Extended loading guidelines for spinner buttons in tables.\n\n- Fixed Sidebar Automatically switch Sidebar mode from \"fluid\" to \"fly\" to be put above the content when the ApplicationBody's module-content width reaches a defined minimum. This avoids breaking the entire application layout for fluid Sidebars on smaller screens or when resizing Sidebars.\n\n- Fixed SimpleTooltip Renamed SimpleTooltip prop \"tooltipWidth\" to \"width\" to align with underlying Tooltip component\n\n- Fixed Spinner Outlined spinner buttons\n\n- Fixed Spinner in Buttons Fixed style for spinner in button block\n\n- Fixed Tags Fixed 1px offset of tag icons\n\n- Fixed Tooltip Fixed tooltip arrow position on small elements\n\n- Update AutoSuggest Migrated AutoSuggest component to Typescript and cleaned up its props\n\n- Update AssetTree Added new TreeSummaryRow component to allow for more tree item type filter like fuel type. With this we also added a new \"supType\" property to the TreeItem to filter for it and to show a paired icon.\n\n- Update Button Added \"iconName\" prop to Button component to reduce boilerplate code when using icons. Use native HTML \"disabled\" prop instead of separate class.\n\n- Update ClearableInput Added an input mask to the ClearableInput to allow custom input formats to avoid user input mistakes\n\n- Update Dialog Added focus trap to Dialog component. Deprecate \"onHide\" callback in favor of \"onClose\". Extended the dialog for compound components to allow wrapping title, body, and footer with forms. Replaced the Dialog animation with framer-motion. As a result, the class \"modal-ender-done\" has been removed. Added new \"xs\" dialog variant\n\n- Update ExpanderPanel Added new \"onOpen\" and \"onClose\" callbacks to ExpanderList items\n\n- Update ExpanderPanel / Combined Tables in ExpandablePanel Added \"iconClassName\" prop to ExpanderPanel component to to allow for 100% width in the panel header. This comes in handy when using a table inside the header and the body that shall have the same column width. With that we also added a design demo to showcase the usage of the tow tables inside the expander panel.\n\n- Update Forms Added horizontal form demo\n\n- Update LoadMoreButton Extended LoadMoreButton component with props \"isInteractive\" and \"progressBarStyle\" to customize behavior and style\n\n- Update Map Settings / Map Layer Migrated the Here Map traffic layers to use the new APIs when using the WebGL mode. For raster maps tiles, we still have to use the deprecated APIs as there is no alternative for now. We also fixed the map translations so other countries are also properly translated and don't show their city names in their native language.\n\n- Update Multiselect Added prop \"multiline\" to allow wrapping selected item around within the multiline toggle. The style of the selected items has changed to be more muted so it better integrates with other form elements.\n\n- Update NumberInput / NumberControl Migrated NumberInput and NumberControl to Typescript and updated their typings. Added check to avoid entering letters or special characters into the input field for Firefox and Safari. Added prop for warning and error messages. Added new prop \"noDefault\" to keep the input empty instead of using the default value of 0. Fixed the NumberControl spinner buttons when holding down the mouse button to increase and decrease the value and leaving the input field.\n\n- Update TimePicker Added prop for rendering warning and error messages\n\n- Update Onboarding Added props \"previousButton\" and \"nextButton\" to Onboarding component to enable a better onboarding click flow\n\n- Update Print CSS Notifications are now hidden while printing the page when using our print.css\n\n- Update Select Added prop \"inputAddon\" to Select component to allow for adding icons as addon to the toggle button Enhanced the background color of selected options for the Select and Multiselect component\n\n- Update Sidebar Added prop \"hasSmoothScrollbar\" to Sidebar component to enable the built-in scrollbars instead of using the native browser scrollbars\n\n- Update Slider or RangeSlider Added \"valueLabelUnit\" prop to Slider and RangeSlider to use a label for the slider values\n\n- Update SplitDialog Added new \"leftContentClassName\" and \"rightContentClassName\" to the split dialog\n\n- Update Buttons Add gray-lightest hover background color to muted, link, and action buttons\n\n- Update Timeline Added new classes \"timeline-date-thin\" and \"timeline-date-dashed\" as well as color classes to change the timeline width and style. Updated Timeline examples to showcase variations as it's built with atomic classes.\n\n- New EditableContent Added new EditableContent component that allows for inline text editing\n\n- New DeviceUtils Added new \"isRetinaDevice\" to deviceUtils\n\n- New Divider Added new Divider component for horizontal and vertical dividing lines\n\n- New Forms New form \"form-group-not-editable\" style toggling editable forms\n\n- New FrameDialog Added new FrameDialog component that can be used to open a dialog from a widget iframe in the parent window\n\n- New Grid stack Added new grid stacking classes \"grid-stack\" and \"grid-stack-item\" as an alternative to position absolute\n\n- New HTML Emails New guidelines demo for HTML emails created with react email\n\n- Icons Icons rioglyph- drag-n-drop rioglyph- robot rioglyph- pin-range rioglyph- pin rioglyph- calendar-plus rioglyph- exclamation rioglyph- info rioglyph- question rioglyph- fuel-diesel rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- archive rioglyph- map rioglyph- map-location rioglyph- book rioglyph- face-frown rioglyph- face-neutral rioglyph- face-smile rioglyph- paper-clip rioglyph- share-nodes rioglyph- handshake rioglyph- stack rioglyph- building rioglyph- file-signature rioglyph- signature rioglyph- location-arrow rioglyph- wallet rioglyph- user-group rioglyph- window rioglyph- inbox rioglyph- inbox-stack rioglyph- inbox-in rioglyph- inbox-out rioglyph- id rioglyph- ruler rioglyph- cards-add rioglyph- truck-unit rioglyph- user-add rioglyph- user-ok rioglyph- user-remove rioglyph- pencil-square rioglyph- megaphone rioglyph- code-brackets rioglyph- code-braces rioglyph- hash rioglyph- server-stack rioglyph- shopping-bag rioglyph- search-list rioglyph- tasks rioglyph- fingerprint rioglyph- flag rioglyph- fire rioglyph- puzzle\n\n- New Line Height Added new \"line-height-150rel\" class\n\n- New Page Added new Page component for displaying documents\n\n- New SaveableInput Added new SaveableInput component\n\n- New TimedBottomSheet Added new TimedBottomSheet component to control a bottom sheets visibility with timers\n\n- New SmoothScrollbars Added a new SmoothScrollbars component\n\n- New Text Wrapping Added new \"text-wrap-balance\" class\n\n- New useFocusTrap Added new useFocusTrap hook that can be used for custom overlays\n\n- New useHover Added new useHover hook that can be used for style changes on hover for certain elements that can not be influenced by hover utility classes alone\n\n- New usePostMessage Added new usePostMessage hook that can be used to exchange messages between an iframe and the parent window\n\n- CSS With this version, the UIKIT adds its CSS link into the header automatically if it is not present. This should help to ease the update of the UIKIT library and the corresponding CSS. This means, you can remove the link from your index.html and only update the UIKIT dependency in your package.json. See Automatic loading of UIKIT CSS Files\n\n- Guideline For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color, we have added a new \"Color Combinations\" section. See Color Combinations\n\n- Guideline We have introduced some general writing guidelines to enhance consistency in UX writing and to maintain a unified voice. See Writing style guide\nVersion 0.16.3 (2023-03-14)\n- Icons Deleted Icons: fax\n\n- Fixed Fixed alignment of collapsed header menu items. See ApplicationHeader\n\n- Fixed Fixed fade in animation when the inital animation is set to false. See Fade\n\n- Fixed Fixed close animation for BottomSheet when hight is set to window height. See BottomSheet\n\n- Fixed Fixed AspectRatioPlaceholder declaration file name.\n\n- Fixed Fixed text ellipsis of selects. See Selects\n\n- Update Refactored DataTabs props. See DataTabs Merged hoverTextColor and hoverBgColor props to tabHoverClassName Merged activeTextColor and activeBgColor props to tabActiveClassName added arrowClassName prop added tabsWrapperClassName prop added tabClassName prop added new className prop to DataTab child component\n\n- Update Added new \"fullheight\" Dialog Size and renamed \"full\" to \"fullwidth\". See Dialog\n\n- Update MapSettings panels are now closing on click outside. See MapSettings\n\n- Update Extended the SimpleTooltip component to pass the \"delay\" and \"popperConfig\" props to the underlying component. See SimpleTooltip\n\n- Update Remove left padding from ReleaseNotes component to better work with images. Please add padding-left-15 manually, in case you want to work with lists. See ReleaseNotes\n\n- New Added new CalendarStripe component. See CalendarStripe\n\n- New Added new hook \"usePrevious\" to access state values of previous component render cycle. See usePrevious\n\n- Icons Added or updated icons: rioglyph- card-reader rioglyph- card-hotel rioglyph- api rioglyph- currency-euro rioglyph- thumbs-up rioglyph- thumbs-down rioglyph- hand-up rioglyph- hand-down rioglyph- hand-left rioglyph- hand-right See Icons",
+    "summary": "- Fixed Map context menu Fixed the typing for the ContextMenuItem component.",
+    "searchText": "Changelog\nVersion 2.1.0 (2026-01-13)\n- Fixed Map context menu Fixed the typing for the ContextMenuItem component.\n\n- Fixed Map route Fixed the typing for the arrowStyle prop of the Route component.\n\n- Fixed Map SimpleClusterLayer type Fixed the typings for the SimpleClusterLayer component’s simpleTheme prop. Please use the new SimpleClusterTheme type instead of the ClusterTheme.\n\n- Fixed Dialog Fixed broken fade animation of Dialogs in Firefox.\n\n- Fixed TableSettingsDialog Fixed TableSettingsDialog so reset to default remains available after reopening when settings differ from defaults.\n\n- Fixed Select Fixed select filter regressions where hitting ‘nothing found’ could leave the dropdown stuck or missing options. Backspacing or clearing now restores the full list and keeps keyboard focus/highlights in sync. Dropdown scroll now resets on reopen and keeps the keyboard-focused item in view when navigating up and down with the arrow keys.\n\n- Update URL feature toggles Replaced the internal \"qs\" library used for parsing URL search parameters with the native URLSearchParams API, allowing us to remove the external dependency. This also solves the vulnerability issue with the \"qs\" library for this version.\n\n- Update Tree Extended the Tree component to support custom external icon and logo URLs.\n\n- Demo Updated the component prop documentation for most components by deriving it directly from the component type definitions and source files. This ensures more accurate documentation and reduces maintenance effort for the demo pages.\nVersion 2.0.1 (2025-12-15)\n- Fixed DatePicker Fixed DatePicker compatibility in ESM builds by unwrapping the CommonJS default export.\n\n- Fixed Area, Line Fixed chart components type definition for prop \"dataKey\".\nVersion 2.0.0 (2025-12-12)\n- Removed We’ve modernized our build setup by removing CommonJS support and switching entirely to ESM. If your project still depends on CommonJS (for example, with older tooling like Webpack), your build may fail. Please update your development environment to support ESM.\n\n- Removed Removed the root index.js barrel file that re-exported all components. This change eliminates multiple import paths, improves IntelliSense auto-import behavior, and prevents importing the entire UIKIT, ensuring proper tree shaking. Please update your imports to use default imports, for example: import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout'.\n\n- Removed CalendarStripe Removed deprecated prop \"render\". Please use \"renderDay\" instead.\n\n- Removed Collapse Removed deprecated prop \"in\". Please use \"open\" instead.\n\n- Removed ClearableInput Removed deprecated prop \"alwaysShowMask\". Please use \"maskVisibility='always'\" instead.\n\n- Removed Dialog Removed deprecated prop \"onHide\". Please use \"onClose\" instead.\n\n- Removed SingleMapMarker Removed deprecated prop \"size\". Please use \"anchorSize\" instead. Removed deprecated prop \"visibleOnHover\". Please use \"markerOnHover\" instead.\n\n- Removed DataTab Removed the internal \"fade in\" class names from the DataTab component, which were previously kept for backward compatibility with CSS transitions used in older service tests. Please use the new onAnimationStart and onAnimationEnd callbacks instead.\n\n- Renamed Animations Renamed \"framer-motion\" component to \"motion\" as we have migrated to the latest motion library that was formerly known as Framer Motion.\n\n- Removed NotificationsContainer Removed deprecated prop \"stacked\" since it is not supported anymore. Removed legacy usage documentation.\n\n- Breaking Notification Removed deprecated prop \"priority\" since it is not supported anymore. Removed old notification API in favor of the notifications options object. If you still use the legacy API \"Notification.info(message, title, timeOut, callback, priority)\", please migrate to the format \"Notification.info(message, options)\".\n\n- Removed OnboardingTip Removed deprecated prop \"clickflow\". Please use the \"useOnboardingTour\" hook instead.\n\n- Removed Radiobutton Changed the onChange callback so it is only used in the controlled use case, as already documented in earlier versions. For uncontrolled usage, please use the onClick callback instead.\n\n- Removed NumberInput / NumberControl Removed deprecated prop \"onValueChanged\". Please use \"onChange\" instead.\n\n- Removed Sidebar Removed deprecated prop \"enableNavigationButtons\". Please use \"headerButtons\" instead. Removed deprecated prop \"disableFullscreen\". Please use \"enableFullscreenToggle\" instead. Removed deprecated prop \"fullscreen\". Please use \"openInFullscreen\" instead.\n\n- Removed Removed old class \"invisible\". Please use \"visibility-hidden\" instead.\n\n- Icons Renamed icon rioglyph- retweet rioglyph- repeat-square Renamed icon rioglyph- cost-efficency rioglyph- cost-efficiency Renamed icon rioglyph- eye-option rioglyph- eye-open Removed icon as it was a duplicate of rioglyph- component rioglyph- maintenance-components\n\n- Breaking BarChart, RadialBarChart, PieChart, Legend With this release, the internal Recharts dependency has been migrated to version 3.x. This upgrade introduces a breaking change related to the Legend component: the payload prop, which was previously used internally to inject custom legend data, has been removed from Recharts. As a result, the legend behavior in BarChart and RadialBarChart has been updated. The default legend position is now correctly rendered vertically in the top-right corner. Previously, it appeared at the bottom despite the default settings. Please review your charts to ensure the legend position remains as intended. If you use colors defined inside your data objects for BarCharts, you must now provide both the items (your data array) and a custom content render function to the Legend. This replaces the old payload-based legend behavior. Series-based legends using a formatter continue to work as before. Recharts 2.x also used to have a prop named activeIndex that was setting which item the user was interacting with. In version 3.0, this prop has been removed. For more details, see the Recharts activeIndex guide https://recharts.github.io/en-US/guide/activeIndex/ If your PieChart uses an activeShape render callback, you should now use the ChartTooltip component and set its defaultIndex to replace the previous activeIndex behavior. See the whole Recharts migration guide for more details: https://github.com/recharts/recharts/wiki/3.0-migration-guide#breaking-code-changes\n\n- Fixed FilePicker Fixed the type of the \"files\" parameter from FileList to File[] of the \"onPick\" callback.\n\n- Fixed Rioglyph Fixed Rioglyph icon typing to expose a concrete IconType union of all icon names, improving autocomplete and safety for consumers.\n\n- Update AssetTree Added new asset type \"car\" to AssetType type definition and to built-in type counter of the AssetSummary for the Tree component.\n\n- Update VolkswagenApplicationHeader Updated VolkswagenApplicationHeader with new VW Group logo. This single group logo also replaces the logo for \"VW Aktiengesellschaft\" and \"Group Logistics\" resulting in an overall smaller header height.\n\n- Update Migrated entire codebase from lodash to es-toolkit to leverage modern JavaScript.\n\n- New AnimatedTextReveal Added new AnimatedTextReveal component emphasize text through motion for showing incremental updates or loading states.\n\n- New useAutoAnimate Added a lightweight hook to animate add/remove/reorder operations of children with zero configuration.\n\n- New fit-content Added new \"min-width-fit-content\" utility classes. See detailed explanation and comparison to other content-based min-width classes.\n\n- New text-box Added new \"text-box\" utility classes to trimming off extra spacing from the block-start edge and block-end edge of a text element's block container.\n\n- New icons Added new rioglyph style for disabled icons with a line\n\n- Icons New icons rioglyph- ai rioglyph- arrows-collapse rioglyph- arrows-combine rioglyph- arrows-expand rioglyph- arrows-horizontal rioglyph- arrows-split rioglyph- assigned rioglyph- axis-x rioglyph- axis-y rioglyph- axis-z rioglyph- bar-chart-box rioglyph- battery-charging rioglyph- brain rioglyph- branch-horizontal rioglyph- branch-remove rioglyph- branch-vertical rioglyph- broadcast rioglyph- bulb rioglyph- chip rioglyph- cloud-progress rioglyph- coffee rioglyph- compass rioglyph- crown rioglyph- discount-badge rioglyph- emergency-stop rioglyph- eye-closed rioglyph- eye-open rioglyph- filter-reset rioglyph- get rioglyph- give rioglyph- globe-alt rioglyph- hierarchy rioglyph- history rioglyph- insert rioglyph- leafs rioglyph- magic-wand rioglyph- note rioglyph- progression rioglyph- satellite-radar rioglyph- stack-add rioglyph- stack-iso rioglyph- stats-high rioglyph- stats-line-dots rioglyph- stats-low rioglyph- stats-medium rioglyph- time-incomplete rioglyph- unassigned rioglyph- unavailable rioglyph- variable rioglyph- workflow-step rioglyph- workflow Updated icons rioglyph- arrow-down rioglyph- arrow-left rioglyph- arrow-right rioglyph- arrow-up rioglyph- battery-level-empty rioglyph- battery-level-full rioglyph- battery-level-low rioglyph- cloud-download rioglyph- cloud-not-saved rioglyph- cloud-upload rioglyph- compare rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- cost-efficency rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- error-sign rioglyph- flash rioglyph- info rioglyph- maintenance-components rioglyph- merge rioglyph- missing rioglyph- off rioglyph- refresh rioglyph- repeat rioglyph- resize-full rioglyph- resize-horizontal rioglyph- resize-small rioglyph- resize-vertical rioglyph- save rioglyph- trash rioglyph- volume rioglyph- workshop rioglyph- wrench Removed icons rioglyph- video-off rioglyph- wifi-off\nVersion 1.13.2 (2025-11-19)\n- Fixed Obfuscate data Fixed a bug that triggered an infinite loop when data-pii was applied to a nested child element.\n\n- Update Button Added new \"unstyled\" buttons style\nVersion 1.13.1 (2025-10-20)\n- Fixed Fixed bundling npm package. Resolve nested folder structure in npm package build.\nVersion 1.13.0 (2025-10-20)\n- Fixed fuel type utils Fixed missing root export for fuel type utils.\n\n- Fixed Action button style Fixed the muted style for action buttons.\n\n- Fixed MapMarker Fixed the active styling for the map marker active state to visually balance the state icon.\n\n- Update Rioglyph Added the missing feature to use external SVGs as a rioglyph icon.\n\n- Update FilePicker Added new \"fullHeight\" flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow.\n\n- New max-content Added new \"min-width-max-content\" and \"min-width-min-content\" utility classes. The first prevents content from breaking by expanding to fit its full width, while the second allows content to shrink to the smallest width possible without overflowing.\n\n- New Grid Added new \"grid-template-end--1\" utility class. This class allows grid items to span until the last grid line, effectively positioning them to extend to the end of the grid.\n\n- New Obfuscate data Added new \"data-hide-pii\" attribute to the <htmlelement to obfuscate sensitive data directly in the frontend. Obfuscate names, emails, or phone numbers — without needing backend filtering or extra code changes.\n\n- Icons New icons rioglyph- circle-dashed rioglyph- square-dashed rioglyph- cube-dashed rioglyph- cube rioglyph- group-blocks rioglyph- dashboard-view rioglyph- ok-dashed rioglyph- prompt rioglyph- recycle rioglyph- warehouse rioglyph- status-change rioglyph- status-change-horizontal rioglyph- transition-right rioglyph- transition-push-right rioglyph- migrate rioglyph- convert rioglyph- shelve rioglyph- conveyor-belt rioglyph- tracking-package rioglyph- issue-tracking Updated icons rioglyph- ok-sign rioglyph- ok-circle\nVersion 1.12.0 (2025-09-22)\n- Fixed Select Fixed an issue in the Select component where clearing the filter input after a no-results search caused the option list to remain incomplete. The dropdown now correctly restores the full option set when the filter is cleared.\n\n- Fixed AssetTree Fixed an issue where clicking the checkbox on a tree group would also toggle its expanded state. Now, selecting a tree group via its checkbox only triggers selection and no longer expands or collapses the group. This prevents unintended virtualization behavior where expanding a node could cause the tree to switch into virtualized mode, resulting in the loss of tree group selections.\n\n- Fixed Callout Removed overflow hidden from callouts so dropdowns can be shown correctly.\n\n- Fixed Ellipsis Fixed \"ellipsis-1\" class.\n\n- New Rioglyph, fuel type utils Added a new component for rendering Rioglyph icons as a span element. The component also supports paired icons, allowing two glyphs to be displayed together as a combined symbol. In addition, a \"getFuelIcon\" helper function was introduced that maps fuel types to their corresponding icons, ensuring consistent and correct icon usage across the application.\n\n- Update FormLabel Added missing \"Node\" type info for supportingText the props table and changed the handling of supportingText styling so that the text-italic class is only applied when the supportingText is a string. If you provide a string wrapped in a div or span, you have to set the italic class manually.\n\n- Update Tree Added a new \"pairIcon\" prop to TreeItem allowing pair icons to be individually specified in the Tree component.\n\n- Update ClearableInput Added new input mask related props \"maskOverwrite\", \"maskDefinitions\", and \"maskDispatch\" to support dynamic masking for more complicated use cases and to give more control over the masking.\n\n- Update useOnboardingTour Updated the typings and documentation for the useOnboardingTour hook.\n\n- style Pills Updated the hover style for the application header navigation as well as for the nav pills.\n\n- Icons As RIO will support more fuel types in the future, and because of inconsistencies in existing naming conventions, we introduced a new icon: \"rioglyph-fuel-liquid\". This icon replaces \"rioglyph-fuel-diesel\" to better represent a broader range of liquid fuels. With this change, there are now four dedicated fuel icons available, plus one for a mixed fuel type. rioglyph- fuel-liquid rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- fuel-mix With this approach, frontends can use the same icon for diesel or gasoline and also for CNG and natural gas by simply using the new \"getFuelIcon\" function form the Rioglyph component. The old “rioglyph-fuel-diesel” icon will continue to work, but it will no longer be listed in the UIKIT demo page icon list. Additional new icons: rioglyph- video rioglyph- video-off\n\n- Demo Service-specific settings Updated the ApplicationHeader demo to include an example of service-specific settings, establishing a consistent approach for presenting unique configurations that cannot be included in the global user profile settings. It helps ensure a familiar user experience across different services while keeping global settings clean and focused.\nVersion 1.11.0 (2025-08-11)\n- Fixed Map settings Updated implementation for map satellite view to support zoom limits by using a hybrid map layer approach.\n\n- Fixed SteppedProgressBar Fixed styling issue in circular variant of the SteppedProgressBar when an item is active.\n\n- Fixed SplitDialog Fixed left side width for larger dialogs. Added new prop to hide the split divider.\n\n- Fixed FormLabel Fixed usage of HTML tag label only when part \"htmlFor\" is set and has a value.\n\n- Update Tree Added a new \"expandedIcon\" prop to the TreeGroups to support showing a different icon when the group is expanded.\n\n- Update Sticky table columns Renamed \"table-sticky-cell-first\" and \"table-sticky-cell-last\" to \"table-sticky-column-first\" and \"table-sticky-column-last\" for improved clarity. Updated the styles to respect the table header and prevent content from peeking through when horizontally scrolled.\n\n- New useAverage, useCount, useMin, useMax, useSum Added useAverage, useCount, useMin, and useMax, and useSum hooks for locale-aware numeric aggregation of object lists. Supports specifying a dot-separated path to the target property.\n\n- New Table grid lines Added new table class \"table-grid-lines\" that is useful when building data heavy tables.\n\n- New Table row span and Table double row header Added new table examples showcasing row span and double header layouts to demonstrate table design capabilities for data heavy tables.\n\n- New Progress bars indeterminate style Added new indeterminate style to show a progress bar even when you not know how long it will take.\n\n- Demo Templates Added new template sections and several UI block examples. Updated the template menu structure to improve navigation and discoverability.\n\n- Demo Email generator We’ve built a neat little email editor that helps you compose emails and copy the HTML code.\n\n- Demo Route generator There is a new route generator with a JSON export of the LAT/LNG coordinates.\nVersion 1.10.1 (2025-01-08)\n- Fixed Map settings Changed implementation for map satellite view as the old implementation relied on deprecated Here APIs.\nVersion 1.10.0 (2025-07-28)\n- Fixed Fixed an issue where clicking the \"Scroll to Top\" arrow button would block further scrolling down the page. The scroll behavior is now fully restored after returning to the top, ensuring smooth navigation throughout.\n\n- Fixed DatePicker Fixed styling issue in DatePicker inputs with error feedback where input text was unnecessarily cut off due to padding for the clear icon, even when no clear button was rendered.\n\n- Fixed ApplicationHeader Fixed an issue where the application header rendered in mobile style on initial page load when the container width could not be determined in time. This resolves visual jumping between mobile and desktop header layouts during mount.\n\n- Fixed SavableInput / SavableDateInput Moved error handling into the components to simplify feedback styling. Added two new props, \"errorMessage\" and \"hideErrorIcon\", to control the visual appearance of error feedback.\n\n- Fixed Panels, Pills, Badges Fixed various element styles for brand themes.\n\n- Update Tree Added a new \"icon\" prop to TreeItem allowing icons to be individually specified or explicitly omitted in the Tree component. Also updated the TreeGroups to support icon values with or without the rioglyph- prefix for improved flexibility.\n\n- New CSS Container queries Introduced new utility classes to make use of container queries, enabling responsive spacing and layout adjustments based on container width rather than viewport size. For more details, please check out our responsiveness guidelines.\n\n- New Rounded table Added new utility classes \"table-bottom-rounded\" and \"table-rounded\" for use when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners.\n\n- Icons Added icons icons rioglyph- train rioglyph- cargo rioglyph- design\n\n- Style We migrated our codebase from Less to Sass to modernize our tooling and take advantage of the latest CSS capabilities, as Less is no longer actively maintained.\n\n- Demo Renamed the main navigation items to improve clarity and consistency. “Design” is now called Foundations, and “UI Templates” has been simplified to Templates to better reflect their purpose.\n\n- Demo Added new sections and examples to UI templates that serve as a quick starting point for developing your own layouts and interfaces. See Expandable details, Details views, and Progress cards. Moved the panel example from the foundations tab to Panel variants.\nVersion 1.9.0 (2025-06-30)\n- Fixed Tooltip / SimpleTooltip Fixed delaying tooltips using a single delay number. Tooltip delay now only applies to showing, not hiding. To configure both show and hide delays, use the object format instead of a single delay number.\n\n- Fixed ClearableInput Properly pass external ref to underlying masked input component using its inputRef prop.\n\n- Fixed DatePicker Fixed an issue where the DatePicker would render incorrectly when used as a child inside a table cell.\n\n- Update TableHead, TableCol Extended table components to pass additional props to the underlying tag.\n\n- Update useTableSelection Extended useTableSelection hook to allow setting the selected rows and change the active row from the outside using the \"setSelectedRowIds\" and \"setActiveRowId\" setter functions.\n\n- Update Select, Multiselect We’ve reverted the max-width of the Select, and Multiselect dropdown to 100% to stay consistent with other components and to prevent unnecessary line breaks within dropdown items. If the dropdown appears too wide, you can use the dropdownClassName prop to apply a shorter max-width-x utility class as needed.\n\n- Update AssetTree Extend the Tree component to virtualize tree items when a certain threshold is reached. The number of items rendered beyond the visible area can be controlled using the \"overscan\" prop. This change improves performance for large trees and long lists.\n\n- Update Map Extend the Map component to allow specifying minimum and maximum zoom levels. By default, the minimum zoom level is set to 3, defining the furthest zoomed-out view. The maximum zoom level, representing the closest zoomed-in view, is set to 20. Improved zoom behavior to reduce momentum and allow for more controlled zooming.\n\n- Update FormLabel Extend the FormLabel component to allow passing in a React element as supporting text, making it easier to add question mark icons with tooltips.\n\n- New SavableDateInput Added new dedicated savable input component that wraps the DatePicker.\n\n- New BarList Added BarList component to display customizable, animated horizontal bars for comparative data.\n\n- New useTableExport Added new custom hook to easily export table data as CSV.\n\n- New useIsFocusWithin Added new custom hook to easily detect if the focus is inside a defined document node.\n\n- Docu Pagination Added usage documentation for pagination and explained why the load more button is preferred for tables.\n\n- Demo UI Templates Added new sections showcasing various UI templates and blocks that serve as a quick starting points for developing your own layouts and interfaces.\nVersion 1.8.0 (2025-05-19)\n- Fixed Map Fixed issue with satellite view layer not rendering correctly when Norwegian language is selected.\n\n- Fixed usePostMessage Remove logging of triggered events to the console.\n\n- Fixed Height classes Corrected height calculation when using \"\"...-height-100vh\" classes inside module-content; vertical padding was not properly subtracted.\n\n- Update URL feature toggles Made the feature toggle value types more precise. Added new feature toggle definition functions that allow you to specify a default value.\n\n- Update AssetTree Extended the Tree component with an onTypeFilterChange callback, allowing the service to filter selected assets accordingly.\n\n- Update Multiselect Added a maximum width of 200px for the Multiselect dropdown component. Additionally, there are two new props \"dropdownClassName\" and \"btnClassName\" to allow further customization similar to the Select component.\n\n- Update ButtonToolbar Extend alignment prop to center buttons.\n\n- Update Switch Added new \"className\" prop to the Switch.\n\n- Update ButtonDropdown Added new prop \"toggleButtonType\" to ButtonDropdown component to allow using a button, a tag or a label as toggle element.\n\n- Update ClearableInput Added a new prop \"maskVisibility\" to control when the mask pattern is visible. Deprecated the prop \"alwaysShowMask\". in favor of maskVisibility.\n\n- Update useOnboardingTour Expose internal onDestroyed callback. Add \"disableActiveInteraction\" prop to disable interaction of highlighted elements.\n\n- Update useSorting Added new callback function \"setSortDirection\" allowing to set sort direction when used with table card sorting.\n\n- New useLocationSuggestions Added new custom hook to fetch locations from Here API that can be used for search inputs.\n\n- New useSearch Added new custom hook to filter a list of objects by a search value.\n\n- New useTableSelection Added new custom hook to handle both single and multiple row selection in tables, optimized for large datasets.\n\n- New TableHead, TableCol Added new table components \"TableHead\" and \"TableCol\" to simplify table structures especially when used with custom hooks like \"useTableSelect\" and \"useSorting\".\n\n- New SvgImage Added new component that helps rendering SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes.\n\n- Icons New icons rioglyph- envelope-open rioglyph- envelope-indicator\n\n- Replaced Replaced react-input-mask with react-imask in TimePicker and ClearableInput components. The mask prop format has changed and is no longer fully compatible with the old react-input-mask syntax. The main difference is the number placeholder, which has changed from \"9\" to \"0\". Please update the mask prop accordingly when using the ClearableInput with an input mask.\nVersion 1.7.1 (2025-02-14)\n- Fixed Banner Fixed height animation of the Banner component when expanding. Added prop \"initialAnimation\" to disable initial content animation.\n\n- Fixed FormLabel Check for various input group sizes to render respective label text sizes.\n\n- Fixed SplitDialog / ListMenu Fixed the issue where a ListMenu dropdown was rendering all menu items on mobile upon mount. Now, only the dropdown is rendered initially.\n\n- Fixed RIOglyph Removed default aspect ration of 1/1 because of problems in flex/grid layouts.\n\n- Fixed Checkbox Fixed broken indeterminate state\n\n- Update RIOglyph Added new rioglyph-align-top, rioglyph-align-bottom and rioglyph-align-baseline classes for proper alignment width texts. Replaced previously introduced has-inline-icon with new rioglyph-align classes.\nVersion 1.7.0 (2025-02-10)\n- Fixed Collapse Fixed visible content overflow in the Collapse and Expander components during content animations.\n\n- Fixed ApplicationLayout Fixed the issue with passing a ref to the ApplicationLayout by exposing the underlying wrapper element. When merging the external ref with the internal ref, the wrapper is now properly exposed, eliminating the need for accessing ref.current.current in the invoking component.\n\n- Fixed ButtonDropdown / useClickOutside Fixed performance of rendering many dropdowns in a large table by introducing an \"isActive\" flag to the useClickOutside hook so that events are only registered and listening when the dropdown is actually open.\n\n- Fixed Route Fixed rendering of dashed routes via the \"lineDash\" prop.\n\n- Fixed List groups Fixed list group buttons active style.\n\n- Icons RIOGlyph We've transitioned the RIOGlyph icon font to an SVG-based system and allowing support for custom SVGs. Please read our guidelines Almost all RIOGlyph implementations will work out of the box. However, in certain cases, adjustments are required because RIOGlyph icons no longer behave as a font. What has changed? Previously, icons acted like text, inheriting line-height and vertical-align naturally. Now, as SVG elements, icons better have layout adjustments in inline text scenarios. The HTML structure for MapMarkers has been changed to accommodate the new icons. Please update the DOM selectors in your tests accordingly if they rely on the markup. All icons can now also be displayed as filled icons by adding rioglyph-filled Recommended solution < span className = \" has-inline-icon \" Lorem ipsum dolor sit amet < span className = \" rioglyph rioglyph-face-smile \" </ span </ span Lorem ipsum dolor\n\n- Update Dialog Changed dialog footer to use flex layout to ensure proper button positioning. No more need to add \"pull-right\" or custom flex classes.\n\n- Update Dialog animation Add support for the browser's \"prefers-reduced-motion\" flag. When this flag is enabled, dialog animations are disabled. This can be helpful for customers experiencing performance issues while running the application.\n\n- Update ListMenu Added new props to ListMenuItem to allow adding a badge for the list menu group header.\n\n- Update AppNavigationBar Added new props to AppNavigationBar to support a back button title, a subtitle, and a title size. The title is now always centered.\n\n- Update Notifications Replaced the underlying notification library with \"react-toastify\", introducing new options while maintaining the same API for backward compatibility. This update also includes a refreshed notification style.\n\n- Update Charts Updated internal Recharts library to latest version 2.15.0 to remove some warnings.\n\n- style Labels Updated the design of standard labels for a more modern look and added documentation on when to use them.\n\n- New Button Added new \"muted-filled\" button for occasions where the default button is to prominent and the muted button is to subtle.\n\n- New StepButton Added new \"StepButton\" component for convenience and to ensure consistent styling of this type of button.\n\n- New ButtonToolbar Added new \"ButtonToolbar\" component for convenience and to ensure consistent spacing of buttons.\n\n- New FormLabel Added new \"FormLabel\" component for convenience to be used on form elements that utilizes a \"htmlFor\" prop and a label or other form elements.\n\n- New LabeledElement Added a simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements\n\n- New Card Added new \"Card\" component for convenience to apply default styling for a card like element. This component aims to simplify and align common card styling.\n\n- New Avatar Added new \"Avatar\" component for showing the user name initials, a user image, or a user icon.\n\n- New Banner Added new \"Banner\" component for rendering informational content on a page.\n\n- New AccentBar Added new \"AccentBar\" component for visual cues.\n\n- New VirtualList Added new \"VirtualList\" component for rendering large lists using a windowing approach.\n\n- New useToggle Added new \"useToggle\" component to simplify boolean state handling. Use it to handle toggle-based logic like switches, modals, or content visibility.\n\n- New Chart colors Added new chart colors to the chart color map.\n\n- Demo Draggable map marker Added new map demo to showcase draggable map marker.\n\n- Icons New icons rioglyph- light-bulb Renamed icons rioglyph- filled-chart rioglyph- area-chart Updated icons rioglyph- am rioglyph- angle-double-down rioglyph- angle-double-left rioglyph- angle-double-right rioglyph- angle-double-up rioglyph- area-in rioglyph- area-out rioglyph- beacon rioglyph- bookable-poi rioglyph- bookmark-square rioglyph- brake rioglyph- businessman rioglyph- car-wash rioglyph- carrier rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- construction rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- document-out rioglyph- download rioglyph- driver-card rioglyph- driver rioglyph- drivercard-in rioglyph- drivercard-out rioglyph- erase rioglyph- file-signature rioglyph- fill rioglyph- folder-open rioglyph- home rioglyph- inbox-in rioglyph- inbox-out rioglyph- log-in rioglyph- logout rioglyph- map-location rioglyph- map-marker rioglyph- pencil-square rioglyph- pm rioglyph- retrofit rioglyph- role-management rioglyph- tachograph-download rioglyph- tms rioglyph- trailer rioglyph- user rioglyph- volume rioglyph- warning-sign rioglyph- weight\n\n- Update Dependencies Updated the minimum React version requirement to 18 to ensure compatibility with the latest features and optimizations. If you are using older versions of React, please update.\n\n- Removed Removed the outdated cross-browser style documentation.\n\n- Update Notifications Extended the writing style guide for guidance for using different notification types\n\n- Update Commonly misspelled words Extend the writing style guide for a list of commonly misspelled or misformatted words\n\n- Update Formatting numbers with units Extended the list of formats for examples of \"kilowatt-hour\" and \"megawatt-hour\". Please note that these units are not yet officially supported by TC39.\nVersion 1.6.1 (2024-12-09)\n- Fixed ApplicationLayout Fixed the application layout to ensure the body contains only a single child, addressing issues with the recently introduced grid layout for the body scrollbar element.\nVersion 1.6.0 (2024-12-02)\n- Fixed SplitDialog Fixed the SplitDialog prop documentation for \"useOverflow\" to clarify that its default value is \"true,\" unlike other dialogs.\n\n- Fixed Multiselect Fixed the Multiselect component to correctly manage the dropdown state and filter value when used in multiline mode with an active filter.\n\n- Update Tree Added \"treeHeaderContent\" prop to the Tree component for rendering additional custom content at the top of the tree, useful for navigation pills.\n\n- Update Dialog Extended dialog sizes for \"fullheight-lg\" and \"fullheight-xl\".\n\n- New useOnboardingTour Introducing a new way to onboard users via an onboarding tour by using the \"useOnboardingTour\" custom hook. Note that weh have deprecated the \"clickflow\" prop for the OnboardingTip component with this new feature.\n\n- New OnboardingDialog Added new OnboardingDialog to initiate a onboarding tour and acts as the welcome dialog for the user of a service.\n\n- New Grid rows Added new grid helper class \"grid-rows-auto-1fr-auto\" to support a 3 row layout with expandable middle row.\n\n- Icons Updated icons rioglyph- cost-efficency Added icons rioglyph- newspaper rioglyph- rocket rioglyph- trophy rioglyph- check-badge rioglyph- check-shield rioglyph- sparkles rioglyph- academic-cap rioglyph- onboarding rioglyph- bookmark rioglyph- bookmark-square\nVersion 1.5.3 (2024-11-05)\n- Fixed AssetTree Fixed asset tree height by setting the \"scrollbar-content-wrapper\" to display flex and let the tree wrapper grow in the flex column direction.\nVersion 1.5.2 (2024-11-04)\n- Fixed SmoothScrollbars Changed height-100pct to min-height-100pct because of height side-effects in chrome.\n\n- Icons Added icons icons rioglyph- oil-can\nVersion 1.5.1 (2024-10-22)\n- Fixed Pills Fix rendering icons in justified filled pills when there is an icon only.\n\n- Fixed SmoothScrollbars Added height-100pct to the recently introduced smooth scrollbar content wrapper. This also fixes a side-effect on the AssetTree component.\n\n- Fixed MapMarker Tone down the POI marker color to better match the new Geofence color and to work better on a large satellite map.\nVersion 1.5.0 (2024-10-21)\n- Fixed Route Fix setting route arrow style. Added color constants for using status colors for routes. Extend demo examples to showcase usage of route styles and colors.\n\n- Fixed SmoothScrollbars Fix updating the scrollbar handle when the content height changes. This fix introduces a new wrapper div to check the children's height. Please check your tests and update them in case you rely on the old structure.\n\n- Fixed Select Fixed an issue with updating the dropdown menu options after the initial render, ensuring that the filter utilizes the updated DOM nodes.\n\n- Update LineChart Extended charts to render additional axis. The demos have been extended for interactive legends to highlight active lines.\n\n- Update Route Extended Route component to allow storing custom data to it which can be used when clicking on the routes polyline to set the route active.\n\n- Update Map isoline Extended the Polygon component to import the RIO colors to use it for an isoline or other polygons. Extended the demo to also include isoline colors.\n\n- Update Colors Adapted the \"gray-decent\" slightly and with that all derived classes like \"bg-decent\" and \"hover-bg-decent\"\n\n- Update Forms All form inputs have a subtle shadow now.\n\n- New Map marker A new map marker color has been added for road restrictions. The geofence color has been updated to avoid confusion with the restriction color used by HERE maps for their road restrictions. The new geofence color provides significantly better contrast and is clearer to see on the satellite map type.\n\n- New Chat Added new pure CSS chat component\n\n- New FadeUp Added new components to fade in from the bottom when an element appears on screen. This can be used to stagger elements on scroll.\n\n- New FadeExpander Added new components to expand content. This can be used to reveal or hide additional content triggered by all kinds of interaction.\n\n- New Cursor Added more cursor-style utility classes\n\n- New Shadows Added new shadow classes \"shadow-subtle\" and \"shadow-muted\", as well as directional classes \"shadow-muted-down\" and \"shadow-default-down\" to be used on light and white backgrounds. The hard shadow direction styles are now slightly more blurred to remove the hard line in the shadow. Note: the following shadow classes are deprecated: \"shadow-smooth-to-top\", \"shadow-smooth-to-bottom\", \"shadow-hard-to-top\", and \"shadow-hard-to-bottom\". Please use \"shadow-smooth-up\", \"shadow-smooth-down\", \"shadow-hard-up\", and \"shadow-hard-down\" instead.\n\n- New useSorting Added new useSorting hook for easily sorting any list by specified key using natural sort order\n\n- New URL feature toggles Added URL-based feature toggle handling and description of how to use them\n\n- Icons Added icons icons rioglyph- bookable-poi rioglyph- car-wash Updated icons rioglyph- truck rioglyph- truck-baseline rioglyph- truck-breakdown rioglyph- truck-unit rioglyph- van rioglyph- van-baseline rioglyph- trailer rioglyph- trailer-baseline rioglyph- trailerposition rioglyph- car rioglyph- car-baseline rioglyph- bus rioglyph- bus-baseline rioglyph- bus-breakdown rioglyph- filling-e-station rioglyph- filling-station rioglyph- euro-note rioglyph- order rioglyph- palette rioglyph- palette-broken rioglyph- parcel rioglyph- parcel-broken rioglyph- empty\n\n- Update Border radius and shadows The default border radius has been increased, and new shadow styles have been introduced, affecting various elements such as buttons, inputs, and panels. These updates collectively enhance the overall design, providing a more modern, refined, and visually appealing look and feel.\nVersion 1.4.1 (2024-09-12)\n- Update ButtonDropdown Added forwardRef to ButtonDropdown and pass it to the underlying dropdown toggle button. Fixed ButtonDropdown demo page examples.\n\n- Fixed Tooltip Wrapped Tag and Switch component in forwardRef so they work with the OverlayTrigger and SimpleTooltip component\n\n- New Map fullscreen demo Added a fullscreen map demo with rendering some metrics for inspection and customer feedback\nVersion 1.4.0 (2024-09-06)\n- Fixed Fixed dark mode listener when trying to read the theme from the colorScheme cookie\n\n- Fixed Charts Fixed rendering of chart legends for all charts\n\n- Update LineChart, AreaChart Extended LineChart and AreaChart components with reference lines\n\n- Update Select Added \"isLoading\" prop to show a loading spinner inside the Select and Multiselect dropdown\n\n- Update useKey Extend useKey hook to allow specifying specific keys to listen for\n\n- New ComposedChart Added new simple ComposedChart component to render a combination of line, area, and bar charts\n\n- New GroupedItemList Added new GroupedItemList component to render a list grouped by a specific key with the flexibility to customize the group header and the rendered items\n\n- New LicensePlate Added new LicensePlate component to display license plate information with various customization options\n\n- Icons Added and updated icons rioglyph- air-pay rioglyph- euro-note rioglyph- language rioglyph- calendar-parking rioglyph- engine\n\n- Update Notifications Extended the writing style guide for notification and \"copy to clipboard\" guidelines\nVersion 1.3.0 (2024-07-26)\n- Fixed TreeOptions Fixed tree options tooltip position\n\n- Fixed DataTab Fixed DataTab title to avoid being set to the div element and used as native tooltip\n\n- Fixed SimpleDialog, SplitDialog Fixed typings of SimpleDialog and SplitDialog\n\n- Fixed Select Fixed italic placeholders for Select and Multiselect\n\n- Fixed Fixed DateRangePicker type for backwards compatibility\n\n- Update Sliders Added new \"color\" prop\n\n- Update Switch Added new \"color\" prop\n\n- Update Forms Added new focus shadow for form inputs and changed the input border color\n\n- Update OverlayTrigger, Tooltip, OnboardingTip, Popover The OverlayTrigger and Popover components are no longer based on react-bootstrap. They have been rewritten to remove the dependency and to fix some warnings when used with React 19.\n\n- New useElapsedTime Added new useElapsedTime hook to get the time since a component was mounted or from a provided starting time\n\n- New Flexbox Added class \"flex-0\" to flexbox utility classes\n\n- New Rounded Added class \"rounded-inherit\" to rounded utility classes\n\n- Update RIO Theme The danger color has been slightly adjusted to better match the other colors. Dark mode colors for danger, warning, and success have also been updated.\n\n- Update VW Theme Adapt highlight colors to VWAG guidelines\n\n- Update Formatting guide Extracted number and date formatting guidelines into a dedicated formatting guide page. This makes it easier to find and to keep the writing style guide shorter.\n\n- New Form labels and placeholders Extended the writing style guide for form labels and placeholders\nVersion 1.2.2 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown header items\n\n- Fixed Checkbox Fixed the rendering position of the checkbox in the grid layout using align-baseline, ensuring it remains stable when checked and unchecked\nVersion 1.2.1 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown when used in unit tests\n\n- Fixed Tree Fixed Tree scrolling when used as a standalone component without the wrapping AssetTree and when a \"scrollHeight\" is defined\n\n- Fixed AssetTree Merged the nested elements \".TreeLabel\" and \".TreeLabelName\" into a single element for TreeNode and TreeLeaf. This reduces the number of DOM elements and enhances performance. Note that you may need to update selector paths in integration tests if they reference tree items.\n\n- Fixed Key Fixed key style for dark mode\nVersion 1.2.0 (2024-06-26)\n- Fixed SmoothScrollbars Added missing root export for SmoothScrollbars component\n\n- Fixed ErrorState, EmptyState, CustomState Fixed button alignment for mobile screens\n\n- Fixed Marker Fixed \"list-group-item\" style when using color indicators\n\n- Fixed Multiselect Fixed filter input padding when Multiselect is used with a leading input addon\n\n- Fixed useAfterMount Fixed hook useAfterMount functionality\n\n- Update MapSettings Enhance MapSettings to include item labels. Substitute MapSettingsPanel with a Dropdown when labels are available. Please provide labels for users to improve usability. Note that providing labels will become mandatory in the future.\n\n- Update Marker Added new mapMarker \"cursor\" props\n\n- Update ListMenu Added new prop \"trailingInputAddon\" to allow adding additional elements to the filter input\n\n- Update DeviceUtils Added new device utils helper function to check for Apple Mac OS to be used for showing mac specific keys\n\n- New Feedback Added new feedback components to simplify requesting user feedback for various use cases\n\n- New Key Added style for keys by using the \"<kbd\" HTML tag\n\n- New Visibility Added new \"visibility-hidden\" class to only target the visibility without setting display to none\n\n- New Input resize Added new input resize classes\n\n- Icons Added new Icon rioglyph- layer-pois\nVersion 1.1.0 (2024-06-17)\n- Fixed CalendarStripe Fixed CalendarStripe component when resizing and rendering different amounts of columns\n\n- Fixed AssetTree Fixed rendering issue in AssetTree component when switching mode between \"fly\" and \"fluid\" externally\n\n- Fixed Marker Fixed broken Marker component when using it without an icon\n\n- Fixed Pills Fixed disabled styles for stacked and filled nav-pills\n\n- Fixed Traton Theme Fixed border radius for Dropdown, MapMarker, Slider, Tag, and Buttons\n\n- Update Marker Updated marker style for active and inactive markers. Extend marker colors for status colors. Adapt default colors for map for better readability in light and dark mode. Added new prop \"pinging\" to SingleMapMarker to render a pinging animation. Another new prop \"anchorIconName\" was added to render an icon directly on the markers anchor. The map direction icon can now be replaced via the new \"stateIconName\" prop and the default moving state can be changed.\n\n- Update AssetTree Added new prop \"treeOptionsTooltip\" to Tree component to show a tooltip for the tree options dropdown\n\n- Update ActionBarItem Updated the \"ActionBarItem.List\" style used for the service info popover. Please make sure to use the \"ActionBarItem.List\" and \"ActionBarItem.ListItem\" components to design the service info for the application header.\n\n- Update ErrorState, EmptyState, CustomState Added the prop \"bsStyle\" to the state components buttons to define other button styles like a default button. Also, when providing an href value, the button is rendered as a link. The headline size will increase now at the xl breakpoint to have a slightly smaller text size for smaller screens.\n\n- Update NoData Improved readability by improving text color contrast. Removed text uppercase according to the writing style guide.\n\n- Update Fieldset Update \"fieldset\" and \"legend\" style for grouping form elements. Added demo to showcase utility of using fieldsets in forms.\n\n- Icons Icons Update icons optical center to work better within circles like the direction icon for the map marker rioglyph- direction rioglyph- parking rioglyph- antenna rioglyph- heart rioglyph- location-arrow\n\n- New CSS Grid & Subgrid Added multiple CSS Subgrid utility classes and examples. Extended Grid classes and documentation\n\n- New Added bg-none and hover-bg-none class\nVersion 1.0.0 (2024-06-03)\n- Breaking With this version, we have started migrating all components towards Typescript for better typing support and documentation. With this migration, we will remove the internal types.ts file. As it was not intended to be used by any service, please make sure you update your imports accordingly. Check out the How to for more details. Be aware of possible changed component types as well.\n\n- Breaking Map With this version the HERE map implementation has changed significantly since we have migrated the map internally to the latest HERE APIs. This includes also the map rendering where the default render engine has changed from WebGL to HARP. Raster maps are rendered with the P2D engine. Due to this migration, the map types have a different design now. To make use of the new rendering engine, please add the following HERE dependency to your project. < script type = \" text/javascript \" src = \" https://js.api.here.com/v3/3.1/mapsjs-harp.js \" </ script\n\n- Removed Fade Removed several deprecated props from the Fade component\n\n- Removed Removed \"BrowserWarning\" component\n\n- Removed Removed \"text-muted\" utility class. Use \"text-color-gray\" instead\n\n- Removed Removed \"GroupSelectionUtil\" getNewGroupedSelected utility function\n\n- Removed Removed getOffsetTopWholeScreen utility function\n\n- breaking BottomSheet / Sidebar Renamed prop \"useBackdrop\" to \"hasBackdrop\" for BottomSheet and Sidebar component\n\n- breaking CalendarStripe Deprecated \"render\" prop of \"CalendarStripe\" component in favor of new \"renderDay\" prop\n\n- breaking Collapse / ExpanderPanel / ExpanderList Removed callbacks \"onEnter\", \"onEntering\", \"onExit\", and \"onExiting\" for ExpanderPanel and Collapse components. We introduced Framer Motions \"onAnimationStart\" callback instead. The ExpanderPanel header style underwent slight changes. The \"in\" class for the collapse is no longer used. Additionally, the \"react-transition-group\" library has been replaced with \"framer-motion\". The prop \"mountOnEnter\" has been removed from the ExpanderPanel, ExpanderList and Collapse components. Use \"unmountOnExit\" instead to control whether the collapsed content should be removed from the DOM when it is collapsed. The collapse prop \"in\" has been renamed to \"open\" to align with other components.\n\n- breaking List Groups and Expanders List groups no longer have a border and a border-radius by default. This has the advantage that they can now be used within other elements without having to overwrite many CSS values. To get the same look as before, you need to set the classes \"border\" and \"rounded\". Expander lists now have props for these two CSS properties, which are set to true by default.\n\n- breaking Resizer The Resizer component has been migrated from class component to functional component. With that the updated size value need to be set with a state setter function. Example: const handleResize = ( diff: number ) =setBoxWidth ( oldWidth =oldWidth - diff )\n\n- breaking Select / Multiselect Changed roles of Select and Multiselect dropdown menu from \"list\" to \"menu\" and the role of the individual select options from \"presentation\" to \"listitem\" to be aligned with the ButtonDropdown component. Fixed automatic drop direction check to open the dropdown above the toggle when there is not enough space. Removed deprecated size values \"small\" and \"large\" in favor of \"sm\" and \"lg\".\n\n- breaking Select The type definition for the Select component has changed. The more impactful change is the type for the \"onChange\" callback which has changed to handle the removal of a selection and therefor \"undefined\" will be returned. onChange = { ( selectedOption: SelectOption | undefined ) =handleChange ( selectedOption ?. id ) } Also important to note that the SelectOption type no longer can be imported via the \"types.ts\" file. Please adapt your import accordingly import Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\n\n- breaking Split SortArrows, SortArrowUp, and SortArrowDown in dedicated components. Change imports to default imports.\n\n- Removed useResizeObserver The \"Observer Entry\" object may now be null, so it can't reliably be destructured anymore. This doesn't work anymore: const [ ref, { borderBoxSize } ] = useResizeObserver ( ); console. log ( borderBoxSize ); Update your code like so: const [ ref, observerEntry ] = useResizeObserver ( ); console. log ( observerEntry ?. borderBoxSize ); Also, an option to specify the HTML element type of the generated ref was added (defaults do div).\n\n- Fixed Blockquote Change default blockquote padding from percentage to pixel. Please add custom padding classes to change it to your needs.\n\n- Fixed BottomSheet Fixed maximum width for BottomSheet component when using the \"detach\" prop. Allow defining the detach offset.\n\n- Fixed Chart Colors Fixed export of shared colors for diagrams\n\n- Fixed Loading Guidelines Fixed spinner size for buttons to avoid button size changes. Extended loading guidelines for spinner buttons in tables.\n\n- Fixed Sidebar Automatically switch Sidebar mode from \"fluid\" to \"fly\" to be put above the content when the ApplicationBody's module-content width reaches a defined minimum. This avoids breaking the entire application layout for fluid Sidebars on smaller screens or when resizing Sidebars.\n\n- Fixed SimpleTooltip Renamed SimpleTooltip prop \"tooltipWidth\" to \"width\" to align with underlying Tooltip component\n\n- Fixed Spinner Outlined spinner buttons\n\n- Fixed Spinner in Buttons Fixed style for spinner in button block\n\n- Fixed Tags Fixed 1px offset of tag icons\n\n- Fixed Tooltip Fixed tooltip arrow position on small elements\n\n- Update AutoSuggest Migrated AutoSuggest component to Typescript and cleaned up its props\n\n- Update AssetTree Added new TreeSummaryRow component to allow for more tree item type filter like fuel type. With this we also added a new \"supType\" property to the TreeItem to filter for it and to show a paired icon.\n\n- Update Button Added \"iconName\" prop to Button component to reduce boilerplate code when using icons. Use native HTML \"disabled\" prop instead of separate class.\n\n- Update ClearableInput Added an input mask to the ClearableInput to allow custom input formats to avoid user input mistakes\n\n- Update Dialog Added focus trap to Dialog component. Deprecate \"onHide\" callback in favor of \"onClose\". Extended the dialog for compound components to allow wrapping title, body, and footer with forms. Replaced the Dialog animation with framer-motion. As a result, the class \"modal-ender-done\" has been removed. Added new \"xs\" dialog variant\n\n- Update ExpanderPanel Added new \"onOpen\" and \"onClose\" callbacks to ExpanderList items\n\n- Update ExpanderPanel / Combined Tables in ExpandablePanel Added \"iconClassName\" prop to ExpanderPanel component to to allow for 100% width in the panel header. This comes in handy when using a table inside the header and the body that shall have the same column width. With that we also added a design demo to showcase the usage of the tow tables inside the expander panel.\n\n- Update Forms Added horizontal form demo\n\n- Update LoadMoreButton Extended LoadMoreButton component with props \"isInteractive\" and \"progressBarStyle\" to customize behavior and style\n\n- Update Map Settings / Map Layer Migrated the Here Map traffic layers to use the new APIs when using the WebGL mode. For raster maps tiles, we still have to use the deprecated APIs as there is no alternative for now. We also fixed the map translations so other countries are also properly translated and don't show their city names in their native language.\n\n- Update Multiselect Added prop \"multiline\" to allow wrapping selected item around within the multiline toggle. The style of the selected items has changed to be more muted so it better integrates with other form elements.\n\n- Update NumberInput / NumberControl Migrated NumberInput and NumberControl to Typescript and updated their typings. Added check to avoid entering letters or special characters into the input field for Firefox and Safari. Added prop for warning and error messages. Added new prop \"noDefault\" to keep the input empty instead of using the default value of 0. Fixed the NumberControl spinner buttons when holding down the mouse button to increase and decrease the value and leaving the input field.\n\n- Update TimePicker Added prop for rendering warning and error messages\n\n- Update Onboarding Added props \"previousButton\" and \"nextButton\" to Onboarding component to enable a better onboarding click flow\n\n- Update Print CSS Notifications are now hidden while printing the page when using our print.css\n\n- Update Select Added prop \"inputAddon\" to Select component to allow for adding icons as addon to the toggle button Enhanced the background color of selected options for the Select and Multiselect component\n\n- Update Sidebar Added prop \"hasSmoothScrollbar\" to Sidebar component to enable the built-in scrollbars instead of using the native browser scrollbars\n\n- Update Slider or RangeSlider Added \"valueLabelUnit\" prop to Slider and RangeSlider to use a label for the slider values\n\n- Update SplitDialog Added new \"leftContentClassName\" and \"rightContentClassName\" to the split dialog\n\n- Update Buttons Add gray-lightest hover background color to muted, link, and action buttons\n\n- Update Timeline Added new classes \"timeline-date-thin\" and \"timeline-date-dashed\" as well as color classes to change the timeline width and style. Updated Timeline examples to showcase variations as it's built with atomic classes.\n\n- New EditableContent Added new EditableContent component that allows for inline text editing\n\n- New DeviceUtils Added new \"isRetinaDevice\" to deviceUtils\n\n- New Divider Added new Divider component for horizontal and vertical dividing lines\n\n- New Forms New form \"form-group-not-editable\" style toggling editable forms\n\n- New FrameDialog Added new FrameDialog component that can be used to open a dialog from a widget iframe in the parent window\n\n- New Grid stack Added new grid stacking classes \"grid-stack\" and \"grid-stack-item\" as an alternative to position absolute\n\n- New HTML Emails New guidelines demo for HTML emails created with react email\n\n- Icons Icons rioglyph- drag-n-drop rioglyph- robot rioglyph- pin-range rioglyph- pin rioglyph- calendar-plus rioglyph- exclamation rioglyph- info rioglyph- question rioglyph- fuel-diesel rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- archive rioglyph- map rioglyph- map-location rioglyph- book rioglyph- face-frown rioglyph- face-neutral rioglyph- face-smile rioglyph- paper-clip rioglyph- share-nodes rioglyph- handshake rioglyph- stack rioglyph- building rioglyph- file-signature rioglyph- signature rioglyph- location-arrow rioglyph- wallet rioglyph- user-group rioglyph- window rioglyph- inbox rioglyph- inbox-stack rioglyph- inbox-in rioglyph- inbox-out rioglyph- id rioglyph- ruler rioglyph- cards-add rioglyph- truck-unit rioglyph- user-add rioglyph- user-ok rioglyph- user-remove rioglyph- pencil-square rioglyph- megaphone rioglyph- code-brackets rioglyph- code-braces rioglyph- hash rioglyph- server-stack rioglyph- shopping-bag rioglyph- search-list rioglyph- tasks rioglyph- fingerprint rioglyph- flag rioglyph- fire rioglyph- puzzle\n\n- New Line Height Added new \"line-height-150rel\" class\n\n- New Page Added new Page component for displaying documents\n\n- New SaveableInput Added new SaveableInput component\n\n- New TimedBottomSheet Added new TimedBottomSheet component to control a bottom sheets visibility with timers\n\n- New SmoothScrollbars Added a new SmoothScrollbars component\n\n- New Text Wrapping Added new \"text-wrap-balance\" class\n\n- New useFocusTrap Added new useFocusTrap hook that can be used for custom overlays\n\n- New useHover Added new useHover hook that can be used for style changes on hover for certain elements that can not be influenced by hover utility classes alone\n\n- New usePostMessage Added new usePostMessage hook that can be used to exchange messages between an iframe and the parent window\n\n- CSS With this version, the UIKIT adds its CSS link into the header automatically if it is not present. This should help to ease the update of the UIKIT library and the corresponding CSS. This means, you can remove the link from your index.html and only update the UIKIT dependency in your package.json. See Automatic loading of UIKIT CSS Files\n\n- Guideline For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color, we have added a new \"Color Combinations\" section. See Color Combinations\n\n- Guideline We have introduced some general writing guidelines to enhance consistency in UX writing and to maintain a unified voice. See Writing style guide\nVersion 0.16.3 (2023-03-14)\n- Icons Deleted Icons: fax\n\n- Fixed Fixed alignment of collapsed header menu items. See ApplicationHeader\n\n- Fixed Fixed fade in animation when the inital animation is set to false. See Fade\n\n- Fixed Fixed close animation for BottomSheet when hight is set to window height. See BottomSheet\n\n- Fixed Fixed AspectRatioPlaceholder declaration file name.\n\n- Fixed Fixed text ellipsis of selects. See Selects\n\n- Update Refactored DataTabs props. See DataTabs Merged hoverTextColor and hoverBgColor props to tabHoverClassName Merged activeTextColor and activeBgColor props to tabActiveClassName added arrowClassName prop added tabsWrapperClassName prop added tabClassName prop added new className prop to DataTab child component\n\n- Update Added new \"fullheight\" Dialog Size and renamed \"full\" to \"fullwidth\". See Dialog\n\n- Update MapSettings panels are now closing on click outside. See MapSettings\n\n- Update Extended the SimpleTooltip component to pass the \"delay\" and \"popperConfig\" props to the underlying component. See SimpleTooltip\n\n- Update Remove left padding from ReleaseNotes component to better work with images. Please add padding-left-15 manually, in case you want to work with lists. See ReleaseNotes\n\n- New Added new CalendarStripe component. See CalendarStripe\n\n- New Added new hook \"usePrevious\" to access state values of previous component render cycle. See usePrevious\n\n- Icons Added or updated icons: rioglyph- card-reader rioglyph- card-hotel rioglyph- api rioglyph- currency-euro rioglyph- thumbs-up rioglyph- thumbs-down rioglyph- hand-up rioglyph- hand-down rioglyph- hand-left rioglyph- hand-right See Icons",
     "category": "Getting started",
     "section": "Welcome",
     "boost": "Changelog start/changelog #start/changelog Getting started Welcome"
@@ -1162,9 +1152,9 @@
   {
     "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.",
+    "lead": "Web applications can embed smaller SPAs as widgets using an <iframe> to enrich it's functionality provided by other services and teams. This page explains what the parent application (host) and the child application (widget) must do to ensure correct styling, sizing, and communication.",
+    "summary": "Web applications can embed smaller SPAs as widgets using an <iframe> to enrich it's functionality provided by other services and teams. This page explains what the parent application (host) and the child application (widget) must do to ensure correct styling, sizing, and communication.",
+    "searchText": "Iframe guidelines\nWeb applications can embed smaller SPAs as widgets using an <iframe> to enrich it's functionality provided by other services and teams. This page explains what the parent application (host) and the child application (widget) must do to ensure correct styling, sizing, and communication.\nIframe guidelines\nWorking with iframes\nTerminology\n- Parent application: the host SPA that renders the <iframe.\n- Widget (child application): the small SPA running inside the iframe.\n- Iframe integration: layout, sizing, and communication between parent and widget.\nEnable widget-specific styling\nIf an application is shipped as a widget (i.e., it is meant to be embedded into other applications via an iframe), the widget must mark itself accordingly by adding the classis-iframe-widget to the document’s <htmlelement.\n\nWho needs to add this?\n\nThe child application (widget) must add <html class=\"is-iframe-widget\". The parent application typically cannot (and should not) modify the widget’s HTML root.\nWhat the window-iframe is and why the RIO Pageloader matters\nThe RIO UIKIT uses the class window-iframe on the <htmlelement to enable iframe-specific baseline styles. This helps widgets render cleanly when embedded (for example, ensuring the document background behaves correctly in an iframe context).\n\nWho sets window-iframe?\n\nThis class is added automatically by the RIO UIKIT, but only if your SPA includes the RIO Pageloader (the initial loading animation shown until the application is ready).\n\nWhat is the RIO Pageloader?\n\nThe RIO Pageloader is the initial loading animation displayed while the application bundles load and the SPA initializes. It is also the recommended place to bootstrap UIKIT early, so iframe-related classes can be applied before the first render to avoid visual flicker.\n\nThe loader is already part of the RIO frontend template and added to the index.html page inside the body element.\n\nFor reference:\n\nhtml\n<link\nrel='stylesheet'\ntype='text/css'\nhref='https://cdn.rio.cloud/pageLoader/pageLoader.css'\n/\n<script src='https://cdn.rio.cloud/pageLoader/pageLoader.js'</script\nAuto-resizing the iframe (recommended)\nFor widgets with dynamic height, scrolling inside the iframe often leads to a poor user experience. To avoid nested scrolling, we recommend using iframe-resizer-react from https://www.npmjs.com/package/iframe-resizer-react. This library adapts the iframe height automatically to the widgets content.\n\nParent application (host)\n\nThe parent initializes the resizer on the iframe element. Use this if you want to embed an iframe into your application.\n\njs\nimport IframeResizer from 'iframe-resizer-react';\n\nChild application (widget)\n\nThe widget must include the resizer content script so it can report size changes to the parent.\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\nEmbedding a widget (iframe) in a fullscreen dialog\nWhen a widget needs to be displayed as a full page inside a dialog (for example, showing a full-featured SPA), the iframe often requires additional layout and styling adjustments.\n\nRendering a full fledged SPA, there is the need to hide it's main 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 on the host side.\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.\n\nRecommended pattern\n\n- Wrap the iframe in an .iframe-wrapper to control sizing and overflow.\n- Use utility classes to remove default iframe styling (borders, background) if needed.\n- Prefer hiding parent navigation by not rendering it in the dialog context (instead of compensating with offsets).\n\nCommon helper classes\n\n- unstyled: removes default iframe border styling (not necessary for widgets when using the iframe-resizer).\n- full-width: makes the iframe take the full width of its container. (not necessary for widgets when using the iframe-resizer)\n- full-window: makes the iframe fill (height/width) the available container space (often for dialogs).\n- no-application-header: compensates for a missing header/navigation area (use carefully). It adds a -50px offset to move the SPA navigation outside the visible area.\n- bg-xxx: set the 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\nA widget can request the parent application to open a dialog (for example, to present the widget in fullscreen or show another part of it). This is done by sending an event via postMessage from the widget to the parent window.\n\nRecommended event flow\n\n1. Widget sends a message to the parent requesting the dialog to open.\n2. 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.\n3. When it's time to close the dialog (via a close button inside the iframe), 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"
@@ -1224,7 +1214,7 @@
     "title": "How to use the UIKIT",
     "lead": "Install the latest version of the UIKIT (that includes latest beta versions as well) via",
     "summary": "Install the latest version of the UIKIT (that includes latest beta versions as well) via",
-    "searchText": "How to use the UIKIT\nInstall the latest version of the UIKIT (that includes latest beta versions as well) via\nHow to use the UIKIT\n- Install the npm package\n- Typescript\n- Document <head /key meta tags\n- UIKIT CSS\n- Brand themes Print styles Additional styling information Dark mode\n- UIKIT Javascript packages via CDN\n- Dependencies\n\n- Typescript\n\n- Brand themes\n- Print styles\n- Additional styling information\n- Dark mode\nInstall the npm package\njavascript\nnpm install @rio-cloud/rio-uikit\n\nOr install a dedicated version via\n\njavascript\nnpm install @rio-cloud/rio-uikit@2.0.1\nTypeScript\nThe UIKIT is built with TypeScript and defines the types inside the components.\n\nNote: Do not import types from the ./types.ts file directly as this is an internal file and subject to change. Import enums, constants and types from the declaration file together with the component.\n\njavascript\nimport AutoSuggest, { type AutoSuggestSuggestion } from \"@rio-cloud/rio-uikit/AutoSuggest\";\nimport Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\nimport TableViewToggles, { type TableViewTogglesViewType } from \"@rio-cloud/rio-uikit/TableViewToggles\";\nDocument <head /> key meta tags\nMandatory\n\nThe utf-8 meta tag is essential for ensuring that your webpage correctly displays text in a wide range of languages and symbols. By setting the character encoding to UTF-8, this tag enables support for almost all characters, including those used in non-Latin scripts, special symbols, and emojis.\n\nThis not only guarantees proper rendering of your content but also prevents common issues such as garbled or corrupted text and icons, known as mojibake. Modern web browsers and standards expect UTF-8 encoding by default, making this tag a critical component of any HTML document. Including this tag ensures your webpage is globally accessible and aligns with current best practices in web development.\n\nhtml\n<meta charset=\"utf-8\" /\n\nBest practices\n\nThe viewport meta tag is a cornerstone of responsive web design. It configures the viewport settings to match the device’s screen width, ensuring that your webpage adapts seamlessly to different screen sizes. Without this tag, mobile devices often display pages as a scaled-down version of their desktop layout, requiring users to zoom or scroll horizontally.\n\nBy specifying the initial scale and width, this tag guarantees that your content is displayed optimally on all devices, from smartphones to tablets to desktops. Additionally, it improves user experience, enhances accessibility, and supports SEO by meeting mobile-friendly standards, making it a crucial inclusion in any modern HTML document.\n\nhtml\n<meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" /\nUIKIT CSS\nManagedRecommended\n\nWhen utilizing the ApplicationLayout component, the UIKIT automatically ensures the inclusion of the necessary CSS style tag within your index.html, providing seamless integration and enhanced functionality.\n\nYou no longer need to manually add the CSS style tag to your index.html. Feel free to remove it if you prefer to manage it yourself.\n\nNote: Please note that every application and every widget must be wrapped with the <ApplicationLayout /, as it executes our init function.\n\nManualNot Recommended\n\nUse the CSS Stylesheet as follows (specify your required version number in the URL) if you need more control on what style you want to use.\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.1/rio-uikit.css\"\n\nNote: Please make sure to use the same UIKIT style version as the npm package, otherwise this will lead to inconsistency and UI bugs.\nBrand themes\nIn addition to the RIO theme, the UIKIT offers other brand-specific themes.\n\nThese other themes may only be used for applications or services who don't run on the RIO platform. All platform services have to use the RIO theme to achieve a distinct look and feel for the user when switching between services and applications.\n\nIn order to use such a brand theme, modify the URL in the <linktag that loads the CSS\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.1/vw-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.1/man-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.1/scania-uikit.css\"\n\nManagedRecommended\n\nYou can simply omit the <linktag in your index.html altogether. The UIKIT will automatically load the correct CSS file for you.\n\nhtml\n<html data-brand=\"vw\"\n\nhtml\n<html data-brand=\"man\"\n\nhtml\n<html data-brand=\"scania\"\nPrint styles\nThe UIKIT supports simple print stylings in order to have printable content. See Print CSS\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.1/rio-uikit-print-utilities.css\"\nAdditional styling information\nIn some cases like using D3 you may need the color variables as .json from the UIKIT provided via CDN. You can fetch the provided file from CDN via the following URL:\n\nhtml\nhttps://uikit.developers.rio.cloud/2.0.1/rio-uikit-colors.json\nDark mode\nThe UIKIT is fully dark mode ready.\n\nNote: Please note that every application and every widget must be wrapped with the <ApplicationLayout /as it executes our init function.\n\njsx\n<ApplicationLayout\n<ApplicationLayout.Header\n<ApplicationHeader label='RIO Service' navItems={navItems} /\n</ApplicationLayout.Header\n<ApplicationLayout.Body\n<divMy application</div\n</ApplicationLayout.Body\n</ApplicationLayout\n\njsx\n<ApplicationLayout\n<divMy widget</div\n</ApplicationLayout\n\nIn cases where the React ApplicationLayout component cannot be used, you can import the new darkmode.js from the UIKIT CDN and add it to your index.html. This script will take care of listening to the theme switch for you.\n\nhtml\n<script src=\"https://uikit.developers.rio.cloud/2.0.1/rio-darkmode.js\"</script\n\nIf you want to react on the dark mode for instance to exchange some images or apply some specific utility classes, you can use the custom hook useDarkMode to do so.\n\nTo manually enable dark mode when testing your application locally, adddata-theme=\"dark\" to the <htmltag.\nDependencies\nAs of version 1.7.0 the RIO UIKIT has the following dependencies:\n\npeerDependencies\n\njavascript\n\"react\": \"=18.0.0\"\n\"react-dom\": \"=18.0.0\"",
+    "searchText": "How to use the UIKIT\nInstall the latest version of the UIKIT (that includes latest beta versions as well) via\nHow to use the UIKIT\n- Install the npm package\n- Typescript\n- Document <head /key meta tags\n- UIKIT CSS\n- Brand themes Print styles Additional styling information Dark mode\n- UIKIT Javascript packages via CDN\n- Dependencies\n\n- Typescript\n\n- Brand themes\n- Print styles\n- Additional styling information\n- Dark mode\nInstall the npm package\njavascript\nnpm install @rio-cloud/rio-uikit\n\nOr install a dedicated version via\n\njavascript\nnpm install @rio-cloud/rio-uikit@2.1.0\nTypeScript\nThe UIKIT is built with TypeScript and defines the types inside the components.\n\nNote: Do not import types from the ./types.ts file directly as this is an internal file and subject to change. Import enums, constants and types from the declaration file together with the component.\n\njavascript\nimport AutoSuggest, { type AutoSuggestSuggestion } from \"@rio-cloud/rio-uikit/AutoSuggest\";\nimport Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\nimport TableViewToggles, { type TableViewTogglesViewType } from \"@rio-cloud/rio-uikit/TableViewToggles\";\nDocument <head /> key meta tags\nMandatory\n\nThe utf-8 meta tag is essential for ensuring that your webpage correctly displays text in a wide range of languages and symbols. By setting the character encoding to UTF-8, this tag enables support for almost all characters, including those used in non-Latin scripts, special symbols, and emojis.\n\nThis not only guarantees proper rendering of your content but also prevents common issues such as garbled or corrupted text and icons, known as mojibake. Modern web browsers and standards expect UTF-8 encoding by default, making this tag a critical component of any HTML document. Including this tag ensures your webpage is globally accessible and aligns with current best practices in web development.\n\nhtml\n<meta charset=\"utf-8\" /\n\nBest practices\n\nThe viewport meta tag is a cornerstone of responsive web design. It configures the viewport settings to match the device’s screen width, ensuring that your webpage adapts seamlessly to different screen sizes. Without this tag, mobile devices often display pages as a scaled-down version of their desktop layout, requiring users to zoom or scroll horizontally.\n\nBy specifying the initial scale and width, this tag guarantees that your content is displayed optimally on all devices, from smartphones to tablets to desktops. Additionally, it improves user experience, enhances accessibility, and supports SEO by meeting mobile-friendly standards, making it a crucial inclusion in any modern HTML document.\n\nhtml\n<meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" /\nUIKIT CSS\nManagedRecommended\n\nWhen utilizing the ApplicationLayout component, the UIKIT automatically ensures the inclusion of the necessary CSS style tag within your index.html, providing seamless integration and enhanced functionality.\n\nYou no longer need to manually add the CSS style tag to your index.html. Feel free to remove it if you prefer to manage it yourself.\n\nNote: Please note that every application and every widget must be wrapped with the <ApplicationLayout /, as it executes our init function.\n\nManualNot Recommended\n\nUse the CSS Stylesheet as follows (specify your required version number in the URL) if you need more control on what style you want to use.\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.1.0/rio-uikit.css\"\n\nNote: Please make sure to use the same UIKIT style version as the npm package, otherwise this will lead to inconsistency and UI bugs.\nBrand themes\nIn addition to the RIO theme, the UIKIT offers other brand-specific themes.\n\nThese other themes may only be used for applications or services who don't run on the RIO platform. All platform services have to use the RIO theme to achieve a distinct look and feel for the user when switching between services and applications.\n\nIn order to use such a brand theme, modify the URL in the <linktag that loads the CSS\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.1.0/vw-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.1.0/man-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.1.0/scania-uikit.css\"\n\nManagedRecommended\n\nYou can simply omit the <linktag in your index.html altogether. The UIKIT will automatically load the correct CSS file for you.\n\nhtml\n<html data-brand=\"vw\"\n\nhtml\n<html data-brand=\"man\"\n\nhtml\n<html data-brand=\"scania\"\nPrint styles\nThe UIKIT supports simple print stylings in order to have printable content. See Print CSS\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.1.0/rio-uikit-print-utilities.css\"\nAdditional styling information\nIn some cases like using D3 you may need the color variables as .json from the UIKIT provided via CDN. You can fetch the provided file from CDN via the following URL:\n\nhtml\nhttps://uikit.developers.rio.cloud/2.1.0/rio-uikit-colors.json\nDark mode\nThe UIKIT is fully dark mode ready.\n\nNote: Please note that every application and every widget must be wrapped with the <ApplicationLayout /as it executes our init function.\n\njsx\n<ApplicationLayout\n<ApplicationLayout.Header\n<ApplicationHeader label='RIO Service' navItems={navItems} /\n</ApplicationLayout.Header\n<ApplicationLayout.Body\n<divMy application</div\n</ApplicationLayout.Body\n</ApplicationLayout\n\njsx\n<ApplicationLayout\n<divMy widget</div\n</ApplicationLayout\n\nIn cases where the React ApplicationLayout component cannot be used, you can import the new darkmode.js from the UIKIT CDN and add it to your index.html. This script will take care of listening to the theme switch for you.\n\nhtml\n<script src=\"https://uikit.developers.rio.cloud/2.1.0/rio-darkmode.js\"</script\n\nIf you want to react on the dark mode for instance to exchange some images or apply some specific utility classes, you can use the custom hook useDarkMode to do so.\n\nTo manually enable dark mode when testing your application locally, adddata-theme=\"dark\" to the <htmltag.\nDependencies\nAs of version 1.7.0 the RIO UIKIT has the following dependencies:\n\npeerDependencies\n\njavascript\n\"react\": \"=18.0.0\"\n\"react-dom\": \"=18.0.0\"",
     "category": "Getting started",
     "section": "Welcome",
     "boost": "How to use the UIKIT start/howto #start/howto Getting started Welcome"
@@ -1284,7 +1274,7 @@
     "title": "Feature cards",
     "lead": null,
     "summary": "Lorem ipsum dolor sit amet",
-    "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nDeludo cubicularis commodi demo.\nAccommodo demergo derelinquo vestrum itaque pectus universe.\nAbsum adiuvo vito sufficio victoria.\nSuasoria conculco bibo undique trans vir.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nVespillo reiciendis quasi.\nTamquam apto repellat inflammatio cito audio arx dolorum tenetur.\nAger benevolentia tot video ait coerceo varius sumo ducimus caelestis.\nCanto appello absconditus nihil.\nRead more\nLorem ipsum dolor sit amet\nVulgivagus adhuc aliquam voluptate quasi chirographum tantillus ipsam arto.\nAuxilium nihil tunc absens suffoco.\nBenigne tum antiquus tondeo utrum uredo ratione turpis tumultus.\nVociferor velit atrocitas.\nQuas timor defetiscor administratio uter cur subito capitulus.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nCaritas coaegresco desparatus corporis decet vigilo speculum.\nAudax conduco stultus damnatio cumque ventito enim aduro infit una.\nVulgivagus defungo angustus demum communis deserunt ipsum alii.\nVigor desolo aequitas odit cupiditas crur socius tardus tunc commemoro.\nVos adsidue defleo.\n\nView detailsGet started\nCustomize\nImport your own data\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more\n\nUse on mobile\nGet the app\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nDownload now\n\nTips\nDiscover new features\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more",
+    "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nAiunt tamquam verecundia succurro textilis antepono causa patior cibus.\nCupio cursus turbo defessus subseco debilito averto coepi vitium.\nTer auctor vicissitudo.\nDecretum aduro autus substantia.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nDapifer sono delego depono officia cubo theologus currus deripio taceo.\nPauper tamquam artificiose audeo.\nQuia vetus teneo volup vitae.\nCupio dedico conitor reiciendis turba decet iusto argentum vulgus stultus.\nRead more\nLorem ipsum dolor sit amet\nVester amo timidus demo eos terra.\nTenax aureus pectus arma taedium subseco carcer vulpes.\nDepromo addo iusto laborum libero celer corpus.\nCertus truculenter defluo claro deduco arceo.\nUmerus cedo at molestias vitium apparatus excepturi.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nAdicio tot ter aiunt sollicito animadverto.\nSoluta astrum decor cunabula.\nTum amplitudo voluptatum commemoro valde torrens.\nConicio tracto tripudio cito pectus casso admitto.\nDefendo cubo bene cultellus accedo.\n\nView detailsGet started\nCustomize\nImport your own data\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more\n\nUse on mobile\nGet the app\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nDownload now\n\nTips\nDiscover new features\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more",
     "category": "Templates",
     "section": "Content",
     "boost": "Feature cards templates/feature-cards #templates/feature-cards Templates Content"
@@ -1294,7 +1284,7 @@
     "title": "Form summary",
     "lead": null,
     "summary": "Request summary",
-    "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact personBeulah Stoltenberg\nRequested roleSenior Communications Developer\nContact emailDortha.Lesch23@hotmail.com\nAnnual budget€150,465.00\nProject descriptionSuspendo curis despecto tabella numquam defendo vorax adipiscor summa vomica.\nAgo reprehenderit eos thymbra.\nDebilito caries pecco cenaculum absum corrigo vergo debilito usus.\nSupporting filesproject-outline.pdf\n2.4MB\nDownload\n\nwireframes.pdf\n3.7MB\nDownload",
+    "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact personRenee Weissnat\nRequested roleDynamic Web Agent\nContact emailDeon_DuBuque53@hotmail.com\nAnnual budget€56,310.00\nProject descriptionAcquiro ait curriculum auctus vae carus utique.\nUsque vestigium aestivus coniuratio vaco vita sono.\nDolore quam crapula voveo ad cur aspernatur cavus conatus auctus.\nSupporting filesproject-outline.pdf\n2.4MB\nDownload\n\nwireframes.pdf\n3.7MB\nDownload",
     "category": "Templates",
     "section": "Forms",
     "boost": "Form summary templates/form-summary #templates/form-summary Templates Forms"
@@ -1314,7 +1304,7 @@
     "title": "List blocks",
     "lead": null,
     "summary": "Lorem ipsum dolor",
-    "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nDelego adfectus via sortitus corporis tollo corroboro timidus adstringo vigor.\n\nOrtiz - Armstrong\nPecco tredecim tandem admoneo.\n\nConnect\n\nHansen Inc\nAbbas confugo conspergo annus.\nBaiulus admoneo hic quam villa.\n\nConnect\n\nKuphal - Pfannerstill\nAt et summopere considero benigne antepono carmen canto clarus averto.\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\nAccendo calcar curatio tonsor.\n\nPaucek, Conroy and Dare\nSummisse vulticulus cohaero quo canto ver.\n\nJones, Kessler and Little\nNihil adeo admoneo absum.\nSuscipit amor delicate tibi debilito antea.\n\nPowlowski, Romaguera and Bergstrom\nAngustus debeo thesis damnatio commodo tollo.\nAlter quo cupiditate barba distinctio arbustum amoveo.\nLorem ipsum dolor sit amet\nAdvenio adflicto paens viridis tunc.\nViduo creta modi dapifer.\n\nKoss, Stanton and Gibson\nEligendi crepusculum iure triumphus cunabula considero.\nRepudiandae suggero cognatus placeat.\nAmiculum quo copiose calco accusamus cura civitas hic turbo tergum.\n\nJones - Hane\nCena cena audeo.\nAdamo adstringo thymbra temeritas statim combibo temeritas absconditus color.\nDeporto dolorum atque cariosus placeat arbitro at amet solum.\n\nSchamberger and Sons\nVehemens conduco neque accusator.\nAqua vilis comitatus damnatio adsuesco textilis.\nCena colo vinum dolorem eius tenetur.\n\nWillms - Hirthe\nAuctus urbanus cibus.\nCorrigo debeo conitor conqueror.\nSono argentum sumo vel.\nEnhance your application with powerful add-ons!\n\nAwesome Rubber Table\nOur flamingo-friendly Ball ensures appropriate comfort for your pets\n\n€17.35\nTotal per user / month\n\nGet Add-on\n\nLicensed Silk Table\nNew Keyboard model with 82 GB RAM, 557 GB storage, and everlasting features\n\n€66.29\nPer 1000 messages / month\n\nGet Add-on\n\nPractical Plastic Pizza\nOur juicy-inspired Ball brings a taste of luxury to your jubilant lifestyle\n\n€72.89\nTotal per user / month\n\nGet Add-on\n\nGeneric Plastic Chicken\nSavor the juicy essence in our Chair, designed for realistic culinary adventures\n\n€66.03\nTotal per user / month\n\nGet Add-on\n\nFresh Bronze Chair\nThe sleek and victorious Bike comes with tan LED lighting for smart functionality\n\n€39.19\nPer 1000 messages / month\n\nGet Add-on\nFeatures\n\nElegant Rubber Shoes\nThe Arvilla Bike is the latest in a series of unwelcome products from Emmerich - Torp\n\nElegant Steel Computer\nThe Janessa Towels is the latest in a series of electric products from Romaguera - Quitzon\n\nUnbranded Concrete Sausages\nThe Operative tangible conglomeration Chips offers reliable performance and shocked design\n\nRecycled Marble Bike\nOur elephant-friendly Chicken ensures cheerful comfort for your pets\n\nBespoke Silk Chips\nLicensed Pizza designed with Rubber for sneaky performance\n\nElectronic Cotton Ball\nProfessional-grade Cheese perfect for avaricious training and recreational use",
+    "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nCruciamentum civitas absens alius stultus suggero uxor creator verbum.\n\nHahn Inc\nNecessitatibus laboriosam theologus cernuus virgo comparo vehemens vitiosus.\n\nConnect\n\nHeaney - Heathcote\nEa assumenda sollers.\nDelibero aiunt vulnero amitto canonicus explicabo amiculum tibi dolorem talus.\n\nConnect\n\nKihn Group\nDamnatio arca quidem.\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\nVos nemo tabernus cubicularis.\n\nBode, Altenwerth and Robel\nMaxime tergum comptus acerbitas vitae turbo sustineo comptus.\n\nWeber, Powlowski and Mohr\nCaecus thermae animi paulatim denuo somnus.\nTertius modi velut crur turba tredecim adulescens.\n\nKreiger LLC\nSaepe vigilo officiis cupiditas.\nAnimadverto solitudo delinquo quibusdam alii cultura ulciscor culpo tredecim reiciendis.\nLorem ipsum dolor sit amet\nDenuo summopere bos aveho pecco civis arx facilis carmen cotidie.\nQuibusdam cresco decor commodo turpis ara dolorem.\n\nSchneider Inc\nToties curiositas atque verumtamen utor comis suscipio somnus creo.\nCaritas tripudio cura vereor curriculum utor tripudio ustilo accusantium corroboro.\nTrepide accusamus ago eveniet theca.\n\nSchuppe - Price\nValens conscendo tres aedificium alius alveus sapiente unde culpa.\nPax templum distinctio vero conicio.\nVulgo amaritudo ait vulgus.\n\nReichel - Swaniawski\nAnser vel vado beneficium voluptatem.\nConspergo praesentium repudiandae.\nConicio iste articulus quasi iusto rerum inflammatio decretum.\n\nO'Kon, Rodriguez and Borer\nCapto corpus conturbo mollitia alo basium adeptio tempore id strues.\nTantum conforto tamquam conatus arbustum demum utrimque.\nTerrito crepusculum aqua tepesco acceptus caritas amo amor vivo vomer.\nEnhance your application with powerful add-ons!\n\nLuxurious Wooden Chair\nIntroducing the Saint Vincent and the Grenadines-inspired Table, blending elastic style with local craftsmanship\n\n€14.45\nTotal per month\n\nGet Add-on\n\nLicensed Wooden Sausages\nNew red Fish with ergonomic design for whopping comfort\n\n€61.75\nTotal per user / month\n\nGet Add-on\n\nLuxurious Cotton Chair\nProfessional-grade Keyboard perfect for mammoth training and recreational use\n\n€57.93\nTotal per user / month\n\nGet Add-on\n\nHandmade Marble Computer\nSavor the savory essence in our Bacon, designed for regular culinary adventures\n\n€51.29\nPer 1000 messages / month\n\nGet Add-on\n\nGeneric Metal Bike\nThe magenta Fish combines Palestine aesthetics with Nitrogen-based durability\n\n€80.45\nPer 1000 messages / month\n\nGet Add-on\nFeatures\n\nGorgeous Plastic Chips\nNew teal Chicken with ergonomic design for needy comfort\n\nHandcrafted Bamboo Chair\nIntroducing the Belarus-inspired Keyboard, blending unique style with local craftsmanship\n\nOriental Silk Soap\nInnovative Table featuring rubbery technology and Concrete construction\n\nErgonomic Wooden Fish\nThe Christine Ball is the latest in a series of calculating products from Schaefer - Mosciski\n\nRecycled Ceramic Ball\nDiscover the rabbit-like agility of our Bike, perfect for scented users\n\nHandcrafted Bronze Car\nStylish Salad designed to make you stand out with scented looks",
     "category": "Templates",
     "section": "Content",
     "boost": "List blocks templates/list-blocks #templates/list-blocks Templates Content"
@@ -1374,7 +1364,7 @@
     "title": "Form blocks",
     "lead": null,
     "summary": "SettingsCompany display name",
-    "searchText": "Form blocks\nForm blocks\nSettingsCompany display name\nThis name will appear on your team profile page\n\nAbout the team\nWrite a short summary about your organization or group (max 240 characters).\n\nOptional interactive attitude\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\nNebraskaNebraska\nSouth Carolina\n\nBosnia and HerzegovinaBosnia and Herzegovina\nBermuda\n\nPreferred currency\nAll pricing and payouts will be shown in this currency\n\nEUR - EuroUSD - US Dollar\nEUR - Euro\nGBP - British Pound\n\nDiscardApply changes",
+    "searchText": "Form blocks\nForm blocks\nSettingsCompany display name\nThis name will appear on your team profile page\n\nAbout the team\nWrite a short summary about your organization or group (max 240 characters).\n\nPhased 24/7 software\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\nColoradoColorado\nIndiana\n\nPitcairn IslandsPitcairn Islands\nHaiti\n\nPreferred currency\nAll pricing and payouts will be shown in this currency\n\nEUR - EuroUSD - US Dollar\nEUR - Euro\nGBP - British Pound\n\nDiscardApply changes",
     "category": "Templates",
     "section": "Forms",
     "boost": "Form blocks templates/settings-form #templates/settings-form Templates Forms"
@@ -1384,7 +1374,7 @@
     "title": "Stats blocks",
     "lead": null,
     "summary": "Stats page",
-    "searchText": "Stats blocks\nStats blocks\nStats page\nOverview of your supply chain operations\n\nTotal inventory\n991 units\n\n12%from last month\n\nOpen orders\n76\n\n5%from last month\n\nIn transit\n22\n\n-3%from last month\n\nIssues\n10\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\nOrders delivered\n25M +\n\nTotal uptime\n99.99%\n\nCustomer score\n4.8\nOrders processed\n72,678\nfrom 68,345\n\n11.5%\n\nOpen rate\n43.6\nfrom 41.6\n\n3.1%\n\nError rate\n3.6\nfrom 2.4\n\n2.01%\nSeptember, 2025\nRequests sent\n185\n\nNumber of data brokers removal requests have been sent to.\n\nRequests in progress\n185\n\nNumber of data brokers that have started processing our removal requests.\n\nRequests completed\n0\n\nNumber of data brokers that checked and confirmed that they are now not holding your data.\nLorem ipsum dolor\n\nJanuaryFebruaryMarchAprilMayJune\n\nLorem ipsum dolor\n\nStatusLocationETA\n\nIn transit\nHamburg, DE2024-02-02\n\nDelivered\nRotterdam, NL2024-01-29\n\nAwaiting pickup\nWarsaw, PL2024-02-05\n\nCustoms clearance\nAntwerp, BE2024-02-03\n\nTransport ipsum dolor\n\nOn-time delivery\n\nWarehouse efficiency\n\nTruck utilization\n\nFreight cost/km\n\nFuel consumption index\n\n92%\n\n84%\n\n78%\n\n65%\n\n15%",
+    "searchText": "Stats blocks\nStats blocks\nStats page\nOverview of your supply chain operations\n\nTotal inventory\n830 units\n\n12%from last month\n\nOpen orders\n68\n\n5%from last month\n\nIn transit\n5\n\n-3%from last month\n\nIssues\n5\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"
@@ -1454,7 +1444,7 @@
     "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};",
+    "searchText": "Route Utils\nSet of utility functions which helps parsing and stringify state into and from the URL.\nRoute Utils\nThese functions will combine sort props like sort order and sort direction and map table settings into a compact comma separated list where hidden columns have a leading \"-\" and the width of a column will be attached to the column name if it it different from the default.\n\nExample: http:/my-url/#demoService/table?sort=+userNickName&columns=itemId,userImageStatus,userNickName:278,userFirstName,userLastName,userActivity,userJobTitle,userEmail,userPhoneNumber\nimport qs from 'qs';\nimport { get } from 'es-toolkit/compat';\n\nimport {\nparseColumnsSettingsStrings,\nmapColumnsSettingsToStrings,\ngetSortDirShort,\nparseSorting,\ntype ColumnsSettings,\n} from '@rio-cloud/rio-uikit/routeUtils';\n\n// Adapt to your configuration\nconst BASE_PATH = 'my-service';\nconst defaultColumnsDetails: Record<string, { width: number; defaultWidth?: number }> = {\nname: {\nwidth: 250,\ndefaultWidth: 250,\n},\n};\n\n// Options for the \"qs\" library\nconst OPTIONS = {\ncomma: true, // required to parse comma separated string into array\narrayFormat: 'comma' as const, // required to stringify arrays into comma separated strings\nindices: false, // don't use array indices\nencode: false, // don't encode the entire string as it will be done individually for certain params\ndecode: false,\nskipNulls: true, // required to remove empty params\n};\n\n// Sample code for parsing the route just for illustration how to use the utils functions\n// Feel free to modify this to your needs.\n// Note: the \"parseRoute\" and \"makeRoute\" functions may contain more props which are left out in this demo\ntype RouterLike = { location?: Location };\n\nexport const parseRoute = (router: RouterLike) => {\nconst location = get(router, 'location', {}) as Location;\nconst searchParams = location.search ? location.search.replace('?', '') : location.search;\n\nconst { sort, columns } = qs.parse(searchParams, OPTIONS) as {\nsort?: string;\ncolumns?: string[] | Record<string, string>;\n};\n\nconst sorting = sort ? parseSorting(sort) : undefined;\n\nconst sortBy = sorting && typeof sorting !== 'string' ? sorting.sortBy : undefined;\nconst sortDir = sorting && typeof sorting !== 'string' ? sorting.sortDir : undefined;\n\nreturn {\nsortBy,\nsortDir,\ncolumns:\ncolumns &&\nparseColumnsSettingsStrings(\nArray.isArray(columns) ? columns : Object.values(columns || {}),\ndefaultColumnsDetails\n),\n};\n};\n\ntype mapRouteProps = {\nsortBy: string;\nsortDir: string;\ncolumns: ColumnsSettings;\n};\n\nexport const makeRoute = ({ sortBy, sortDir, columns }: mapRouteProps) => {\n// Set props to undefined or null in order to remove it from the URL when not defined\nconst params = {\nsort: sortBy && `${getSortDirShort(sortDir)}${sortBy}`,\ncolumns: columns && mapColumnsSettingsToStrings(columns),\n};\nconst queryParams = qs.stringify(params, OPTIONS);\nconst searchFragment = queryParams && `?${queryParams}`;\nreturn `${BASE_PATH}/${searchFragment}`;\n};",
     "category": "Utilities",
     "section": "Helper",
     "boost": "Route Utils utilities/routeUtils #utilities/routeUtils Utilities Helper"
@@ -1534,7 +1524,7 @@
     "title": "useDebugInfo",
     "lead": "The useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.",
     "summary": "The useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.",
-    "searchText": "useDebugInfo\nThe useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.\nuseDebugInfo\nComponent props:isToggled: false\ncount: 0\n\nDebug Info:{\n\"renderCount\": 1,\n\"changedProps\": {},\n\"timeSinceLastRender\": 0,\n\"lastRenderTimestamp\": 1765811030338\n}\n\nToggleIncrement\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| component | String | — | The name of the component that will be printed out. |\n| props | Object | — | The component props that will be checked for changed values. |",
+    "searchText": "useDebugInfo\nThe useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.\nuseDebugInfo\nComponent props:isToggled: false\ncount: 0\n\nDebug Info:{\n\"renderCount\": 1,\n\"changedProps\": {},\n\"timeSinceLastRender\": 0,\n\"lastRenderTimestamp\": 1768381733548\n}\n\nToggleIncrement\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| component | String | — | The name of the component that will be printed out. |\n| props | Object | — | The component props that will be checked for changed values. |",
     "category": "Utilities",
     "section": "UI state & input hooks",
     "boost": "useDebugInfo utilities/useDebugInfo #utilities/useDebugInfo Utilities UI state & input hooks"
@@ -1824,7 +1814,7 @@
     "title": "useTableExport",
     "lead": "The useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.",
     "summary": "The useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.",
-    "searchText": "useTableExport\nThe useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.\nuseTableExport\nExport data\n\nIdFirst nameLast nameE-mail\n\n1AlbertaBartonFanny_Bernhard78@hotmail.com\n2ZeldaGibsonJarvis87@gmail.com\n3DomenicaArmstrongKyleigh56@gmail.com\n4VanTreutelCristian70@yahoo.com\n5OfeliaSchuppeStewart10@gmail.com\n6ArlieHeaneyRetta30@yahoo.com\n7MargaritaSipesJaylen.Kunde@hotmail.com\n8MarcosLarsonCora.Wisoky25@hotmail.com\n9StefanHettingerLeonora5@gmail.com\n10AnnettaChamplinSylvia_Kshlerin@hotmail.com\n### Options of the returned exportToCSV function\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| data | T[] | — | Array of data objects to export. Each object represents one row in the table. |\n| fileName | string | export.csv | Optional name for the exported file. |\n| columns | (keyof T)[] | — | Optional list of object keys to export as columns. If omitted, all keys from the first row will be used. |\n| headers | Partial<Record<keyof T, string| — | Optional map of column keys to custom header labels. Example: { firstName: 'First Name' } |\n| delimiter | string | , | Optional delimiter to use between values in the CSV. You can use \";\" or \"\\t\" for other formats. |\n| withBom | boolean | true | Whether to include UTF-8 BOM (useful for Excel). |",
+    "searchText": "useTableExport\nThe useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.\nuseTableExport\nExport data\n\nIdFirst nameLast nameE-mail\n\n1ManleyConroyBurdette63@gmail.com\n2MoniqueSpinkaEwald.Mayert51@yahoo.com\n3CarolineBuckridgeWard74@hotmail.com\n4TamaraRoweZackary.Ernser75@gmail.com\n5JaredLynchRuthie.Hilll0@hotmail.com\n6CarlieReichertLaverna_Turcotte@hotmail.com\n7BessieMarquardtJamil_Bogan81@hotmail.com\n8JannieKoeppKyle97@hotmail.com\n9GardnerJenkinsGerry19@yahoo.com\n10BirdieWunschLeonardo.Goyette@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"
@@ -1834,7 +1824,7 @@
     "title": "useTableSelection",
     "lead": "The useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.",
     "summary": "The useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.",
-    "searchText": "useTableSelection\nThe useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.\nuseTableSelection\nNote: , when using a checkbox column for multi-selection and a column for some action buttons, make sure to apply the classes \"table-checkbox\" and \"table-action\" to the respective row \"td\" elements. The latter class automatically stops event propagation, preventing the row from being selected when an action button is clicked.\nActive row\n-\n\nIdFirst nameLast nameE-mail\n\n1KarleeSchambergerBradley_Quigley@hotmail.com\n2LornaGulgowskiKaelyn_Durgan@hotmail.com\n3KevenNicolasTimmy59@hotmail.com\n4BusterNikolausAddison_Renner@hotmail.com\n5StefanPaucekSincere49@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. |\nMulti-selection\nActive row\n-\n\nSelected rows\n4\n\nDeselect all ItemsSelect some rows\n\nIdFirst nameLast nameE-mail\n\n1EudoraBeckerAnderson_Christiansen80@hotmail.com\n\n2GenevieveToyNicklaus83@gmail.com\n\n3ForestMacGyverFelix.Herzog84@hotmail.com\n\n4IsidroNikolausCorine_Hane@hotmail.com\n\n5LaurenMayerGreg_Breitenberg@yahoo.com\n\n6KarleyHermanKiara48@yahoo.com\n\n7LondonLangoshBrandt8@hotmail.com\n\n8BlancheFraneckiTerence_Reinger83@yahoo.com\n\n9DomenicaWeimannIsidro_Thiel40@gmail.com\n\n10KorbinSchinnerLuciano_Hackett16@yahoo.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |",
+    "searchText": "useTableSelection\nThe useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.\nuseTableSelection\nNote: , when using a checkbox column for multi-selection and a column for some action buttons, make sure to apply the classes \"table-checkbox\" and \"table-action\" to the respective row \"td\" elements. The latter class automatically stops event propagation, preventing the row from being selected when an action button is clicked.\nActive row\n-\n\nIdFirst nameLast nameE-mail\n\n1ClaudiaHandTrey_Windler@gmail.com\n2KoreyBartolettiJeromy.Bernier@yahoo.com\n3ShanaStammMariane_Hilll@yahoo.com\n4AnabelleGusikowskiConnie62@hotmail.com\n5MavisWisozkLafayette_OKeefe@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\n1JuanitaMillerMillie78@hotmail.com\n\n2VivienKesslerViviane.Gutmann@gmail.com\n\n3LaurenCorkeryBradley.Schowalter@hotmail.com\n\n4EulahSmithamHaylie_Sporer69@yahoo.com\n\n5HattieBoscoAlize.Romaguera-McClure@yahoo.com\n\n6EllieWeissnatMarshall.Beatty@yahoo.com\n\n7AlfGorczanyKatelin.Spinka1@yahoo.com\n\n8LucioBreitenbergAlanis_Schinner@yahoo.com\n\n9FlavioPaucekReina48@hotmail.com\n\n10AlexandraMorarBurnice_Funk@gmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |",
     "category": "Utilities",
     "section": "Table & data hooks",
     "boost": "useTableSelection utilities/useTableSelection #utilities/useTableSelection Utilities Table & data hooks"