@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

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.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<nameclass name. |\n| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |\n| className | string | — | Additional class names passed to the actual element. |\nStatusLocationETA\n\nIn transit\nHamburg, DE2024-02-02\n\nDelivered\nRotterdam, NL2024-01-29\n\nAwaiting pickup\nWarsaw, PL2024-02-05\n\nCustoms clearance\nAntwerp, BE2024-02-03\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<nameclass name. |\n| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |\n| className | string | — | Additional class names passed to the actual element. |\nVisualizing rating distribution\n\nCategoryPercentage\n\nPoor15%\n\nBelow Average20%\n\nAverage25%\n\nGood15%\n\nExcellent25%\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<nameclass name. |\n| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |\n| className | string | — | Additional class names passed to the actual element. |\nRisk levelReasonSuggested action\n\nLow risk\nStable weather conditionsMonitor\n\nHigh risk\nLabor strike at destinationReroute shipment\n\nCritical risk\nCustoms hold & inspectionExpedite clearance\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| color | string | 'bg-secondary' | Defines the color by setting it to a UIKIT bg-<nameclass name. |\n| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |\n| className | string | — | Additional class names passed to the actual element. |",
     "category": "Components",
     "section": "Misc",
     "boost": "AccentBar components/accentBar #components/accentBar Components Misc"
@@ -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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| activity | ActivityStatus | — | Defines the type of activity. Possible values are Activity.AVAILABLE, Activity.DRIVING, Activity.RESTING or Activity.WORKING. |\n| bsSize | ActivitySize | — | Define how large the component should be rendered. Possible values are Activity.SIZESM, Activity.SIZELG or Activity.SIZE_XL. |\n| duration | string \\| ReactNode | — | The actual duration value to be shown. |\n| isOutdated | boolean | false | Indicates whether the activity is outdated. |\n| onClick | VoidFunction | — | Callback function for when the component is clicked. |\n| className | string | — | Additional classes for the wrapper element. |",
     "category": "Components",
     "section": "Misc",
     "boost": "Activity components/activity #components/activity Components Misc"
@@ -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.\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 | VoidFunction | — | Callback function to be invoked when the end value is reached. |\n| className | string | — | Additional classes to be set on the wrapping element. |",
     "category": "Components",
     "section": "Content",
     "boost": "AnimatedNumber components/animatedNumber #components/animatedNumber Components Content"
@@ -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\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 | UseInViewOptions['margin'] | — | Optional root margin passed to the intersection observer for in-view detection (e.g., \"0px 0px -10% 0px\"). |\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' | 'lighter' | The color of the shimmer highlight band. |\n| textColor | 'black' \\| 'darkest' \\| 'darker' \\| 'dark' \\| 'gray' \\| 'light' \\| 'lighter' \\| 'lightest' \\| 'white' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' | 'darkest' | Base color of the text. |\n| innerClassName | string | — | Additional classNames set on the inner element. |\n| className | string | — | Additional classNames set on 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 | UseInViewOptions['margin'] | — | Optional root margin passed to the intersection observer for in-view detection (e.g., \"0px 0px -10% 0px\"). |\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' | 'lighter' | The color of the shimmer highlight band. |\n| textColor | 'black' \\| 'darkest' \\| 'darker' \\| 'dark' \\| 'gray' \\| 'light' \\| 'lighter' \\| 'lightest' \\| 'white' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' | 'darkest' | Base color of the text. |\n| innerClassName | string | — | Additional classNames set on the inner element. |\n| className | string | — | Additional classNames set on the wrapper element. |",
     "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 YUWCXY4QCL\n\nItem 18Z0QVGEMQ\n\nItem KQ9QJ25F3B\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nLoad ItemsItem 4NYRNZDOEAJ\n\nItem 9XGVIHIZDRK\n\nItem ZP0PGXK14B\n\nItem N4PC0EB2RM\n\nItem KO6IY6WXTC\n\nItem KC0LC7DH2MH",
+    "searchText": "Animations\nThe UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.\nAnimations\nThe official documentation can be found here https://motion.dev/docs/react\nSome Data\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nAdd ItemItem SAY31NI9JY\n\nItem 3Y845VKS7Q\n\nItem 2TR06HFALV\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nLoad ItemsItem Y3E1PAWU4G\n\nItem 03RN4LBQUH\n\nItem RNLIJUFWD1\n\nItem USNNCEUF3C\n\nItem S6FC5S6QMJ\n\nItem 01C0J9EA59",
     "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\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 \\| React.ReactNode | — | 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| hidePopoverOnClick | boolean | true | Defines if the popover should close when any child element is being clicked. |\n| popoverWidth | ActionBarItemPopoverWidth | 250 | Possible values are 100, 150, 200, 250, 300, 350, 400, 450 or 500. |\n| mobileDialogBodyClassName | string | — | Additional class names that are added to dialog fallback modal-body element. |\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 this 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 | VoidFunction | — | 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 \\| ReactNode | — | The popover title. |\n| useOffscreen | boolean | — | Define whether the popover content shall be rendered behind the scene. This allows to preload content or to avoid unmounting the content component. |\n| className | string | — | Additional class names that are added to the popover content. |",
     "category": "Components",
     "section": "Application",
     "boost": "ApplicationHeader components/appHeader #components/appHeader Components Application"
@@ -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\n4\n7\n4\n4\n\nAsset Group9\nVehicle-1869Asset 1015\nVehicle-3532Asset 1007\nVehicle-3812Asset 1000\nVehicle-5185Asset 1016\nVehicle-6538Asset 1017\nVehicle-7129Asset 1008\nVehicle-7924Asset 1010\nVehicle-8111Asset 1012\nVehicle-9372Asset 1014\n\nUngrouped10\n\n200\n\nSidebar Right\n\nSidebar components may be added here...\n\nClose\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\nSample Service Content\nOpen Sidebar\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nBottom Button\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |",
+    "searchText": "ApplicationLayout\nThe ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar\nApplicationLayout\nThe ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.\n\nNote: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragmentinstead\n\nNote: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <bodynode.\nDefault example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nSubNavigation example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nBody banner example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nBottom bar example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nSidebar Example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSidebar Right\n\nSidebar components may be added here...\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n6\n3\n4\n6\n\nAsset Group8\nVehicle-1458Asset 1001\nVehicle-2546Asset 1016\nVehicle-3976Asset 1010\nVehicle-4094Asset 1009\nVehicle-5226Asset 1013\nVehicle-5265Asset 1012\nVehicle-5337Asset 1005\nVehicle-6602Asset 1018\n\nUngrouped11\n\n200\n\nSidebar Right\n\nSidebar components may be added here...\n\nClose\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\nSample Service Content\nOpen Sidebar\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nBottom Button\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |",
     "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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\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 | ReactNode | — | Right side area for additional options of buttons like filter etc. that is relevant for the shown content.. |\n| backButtonText | string \\| ReactNode | — | — |\n| border | boolean | false | Add a light bottom border to the wrapper element. |\n| onNavigateBack | (event: MouseEvent<HTMLSpanElement) =void | — | Callback function for when the back navigation button is clicked. |\n| className | string | — | Additional classes for the wrapper element. |\nTitle of content\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\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 | ReactNode | — | Right side area for additional options of buttons like filter etc. that is relevant for the shown content.. |\n| backButtonText | string \\| ReactNode | — | — |\n| border | boolean | false | Add a light bottom border to the wrapper element. |\n| onNavigateBack | (event: MouseEvent<HTMLSpanElement) =void | — | Callback function for when the back navigation button is clicked. |\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| 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 | ReactNode | — | Right side area for additional options of buttons like filter etc. that is relevant for the shown content.. |\n| backButtonText | string \\| ReactNode | — | — |\n| border | boolean | false | Add a light bottom border to the wrapper element. |\n| onNavigateBack | (event: MouseEvent<HTMLSpanElement) =void | — | Callback function for when the back navigation button is clicked. |\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| 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 | ReactNode | — | Right side area for additional options of buttons like filter etc. that is relevant for the shown content.. |\n| backButtonText | string \\| ReactNode | — | — |\n| border | boolean | false | Add a light bottom border to the wrapper element. |\n| onNavigateBack | (event: MouseEvent<HTMLSpanElement) =void | — | Callback function for when the back navigation button is clicked. |\n| className | string | — | Additional classes for the wrapper element. |",
     "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)\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| height | number | 16 | Defines the aspect ratio width. |\n| width | number | 9 | Defines the aspect ratio height. |\n| className | string | — | Additional class names that are added to the wrapping element. |",
     "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\n5384\n4\n\nGroup - Abraham Watsica - 621113\n\nGroup - Adam Windler - 770317\n\nGroup - Alexandra Collins - 999013\n\nGroup - Alfred Olson - 956712\n\nGroup - Alfred Stokes - 89338\n\nGroup - Alice Green - 890610\n\nGroup - Allison Padberg III - 27086\n\nGroup - Alma Sanford - 66055\n\nGroup - Alvin Wolf Sr. - 47075\n\nGroup - Amanda Kunde - 348613\n\nGroup - Amelia Zemlak - 819710\n\nGroup - Amos Welch - 13858\n\nGroup - Ana Greenfelder - 97437\n\nGroup - Andrea Mueller - 75687\n\nGroup - Andrew Howell Sr. - 815511\n\n200\n\n200\n\nLoad trucksClear treeToggle all groups selection\n\nCurrent category:\ntrucks\nSelected groups:\n\nSelected assets:\n\nExpanded groups:\nTrailer Group\n\nSelected drivers:\n\nSearch value:\n\nAsset type filter:\n[]\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with single select\n10\n5\n9\n6\n\nMy Empty Group5\n\nTruck Group East5\n\nTruck Group North7\nN18-G109 / M-AN 1018\nN18-G176 / M-AN 1026\nN18-G560 / M-AN 1006\nN18-G704 / M-AN 1007\nN18-G811 / M-AN 1005\nN18-G830 / M-AN 1010\nN18-G961 / M-AN 1009\n\nTruck Group South7\n\nTruck Group West3\n\nAll my unassigned Trucks3\n\nCurrent category:\nassets\nSelected tree groups:\n\nSelected assets:\n\nExpanded tree groups:\nTruck Group North\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with multiple asset filter in summary\nWhen using fuel filter, please check out the fuel type utils that ease the implementation of mapping vehicle fuel types to common fuel type groups.\n7\n4\n3\n6\n\n7\n5\n1\n4\n3\n\nMixed Vehicles12\nVehicle-1219Debug: lpg\nVehicle-1695Debug: heavy_fuel_oil\nVehicle-2865Debug: gas\nVehicle-2935Debug: hydrogen\nVehicle-4548Debug: lpg\nVehicle-4993Debug: hydrogen\nVehicle-5555Debug: heavy_fuel_oil\nVehicle-7086Debug: diesel\nVehicle-8678Debug: dual_fuel_diesel_cng\nVehicle-8791Debug: hydrogen\nVehicle-9194Debug: lpg\nVehicle-9266Debug: hydrogen\n\nUngrouped8\n\nSelected groups:\n\nSelected vehicles:\n\nExpanded groups:\nMixed Vehicles\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with custom summary\n3\n15\n\nJohnDoe\nMaxlRainer\nJohanSchmidt\n\nSome small dummy text at the bottom to showcase that you can put something here\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree\nTree with header and search\n\n20\n\nFolder 015\n\nFolder 024\n\nFolder 034\n\nFolder 047\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\nTree without header and search\n\nFolder 017\n\nFolder 024\n\nFolder 036\n\nFolder 043\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\nTreeSummary with assetCounts\n12\n7\n2\n2\n10\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\nTreeSummary with TypeCounter\n9\n15\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |",
+    "lead": null,
+    "summary": "Filter",
+    "searchText": "AssetTree\nAssetTree\nFilter\n\n5868\n4\n\nGroup - Adrienne Weimann - 60548\n\nGroup - Agnes Homenick - 817311\n\nGroup - Alejandro Little - 593623\n\nGroup - Alexander Kautzer - 58489\n\nGroup - Alexandra McGlynn - 40409\n\nGroup - Allen Feeney - 758310\n\nGroup - Alma Bradtke - 812611\n\nGroup - Alton Becker MD - 390414\n\nGroup - Amber Swift IV - 81856\n\nGroup - Amos Gorczany - 298611\n\nGroup - Amos Hickle - 741010\n\nGroup - Amos Nader - 357510\n\nGroup - Ana Sanford - 221715\n\nGroup - Ana Sporer - 48377\n\n200\n\n200\n\nLoad trucksClear treeToggle all groups selection\n\nCurrent category:\ntrucks\nSelected groups:\n\nSelected assets:\n\nExpanded groups:\nTrailer Group\n\nSelected drivers:\n\nSearch value:\n\nAsset type filter:\n[]\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with single select\n11\n7\n4\n8\n\nMy Empty Group4\n\nTruck Group East4\n\nTruck Group North9\nN18-G203 / M-AN 1002\nN18-G260 / M-AN 1028\nN18-G314 / M-AN 1006\nN18-G370 / M-AN 1022\nN18-G455 / M-AN 1024\nN18-G502 / M-AN 1014\nN18-G600 / M-AN 1001\nN18-G752 / M-AN 1021\nN18-G990 / M-AN 1015\n\nTruck Group South5\n\nTruck Group West3\n\nAll my unassigned Trucks5\n\nCurrent category:\nassets\nSelected tree groups:\n\nSelected assets:\n\nExpanded tree groups:\nTruck Group North\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with multiple asset filter in summary\n9\n7\n3\n1\n\n8\n7\n1\n2\n2\n\nMixed Vehicles8\nVehicle-1670Debug: hydrogen\nVehicle-2011Debug: diesel\nVehicle-3346Debug: dual_fuel_diesel_cng\nVehicle-3670Debug: lpg\nVehicle-5464Debug: cng\nVehicle-6229Debug: lpg\nVehicle-6521Debug: cng\nVehicle-7377Debug: gas\n\nUngrouped12\n\nSelected groups:\n\nSelected vehicles:\n\nExpanded groups:\nMixed Vehicles\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with custom summary\n3\n15\n\nJohnDoe\nMaxlRainer\nJohanSchmidt\n\nSome small dummy text at the bottom to showcase that you can put something here\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree with custom icons\nTree with header and search\n\n20\n\nGroup 014\n\nGroup 026\n\nGroup 0310\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree\nTree with header and search\n\n20\n\nFolder 017\n\nFolder 024\n\nFolder 035\n\nFolder 044\n\nSelected items:\n\nExpanded folders:\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree without header and search\n\nFolder 012\n\nFolder 028\n\nFolder 034\n\nFolder 046\n\nSelected items:\n\nExpanded folders:\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\nTreeSummary with assetCounts\n12\n7\n2\n2\n10\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\nTreeSummary with TypeCounter\n9\n15\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |",
     "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\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 set to the icon element. |\n| className | string | — | Additional classes set to 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 single Avatar that displays the overflow count. Collapsed names are shown inside a tooltip. By default all items are shown. |\n| className | string | — | Additional classes set to the outer element. |",
     "category": "Components",
     "section": "Misc",
     "boost": "Avatar components/avatar #components/avatar Components Misc"
@@ -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"
@@ -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\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 | (isShown: boolean) =void | — | 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 | string \\| ReactNode | — | 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 | VoidFunction | () ={} | 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 | VoidFunction | () ={} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |\n| bodyRef | MutableRefObject<HTMLDivElement \\| null| — | 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 | (isShown: boolean) =void | — | 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 | string \\| ReactNode | — | 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 | VoidFunction | () ={} | 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 | VoidFunction | () ={} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |\n| bodyRef | MutableRefObject<HTMLDivElement \\| null| — | 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 | (isShown: boolean) =void | — | 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 | string \\| ReactNode | — | 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 | VoidFunction | () ={} | 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 | VoidFunction | () ={} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |\n| bodyRef | MutableRefObject<HTMLDivElement \\| null| — | 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 | (isShown: boolean) =void | — | 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 | string \\| ReactNode | — | 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 | VoidFunction | () ={} | 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 | VoidFunction | () ={} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |\n| bodyRef | MutableRefObject<HTMLDivElement \\| null| — | 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 | — | 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| 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| 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| onClose | () =void | () ={} | Callback function that gets triggered when the user closed the bottom sheet with the close button. |\n| bodyClassName | string | 'padding-25 margin-right-25' | Optional className to be set on the body. |\n| className | string | — | Optional className to be set on the component. Use this to define a max-width value. |",
     "category": "Components",
     "section": "Application",
     "boost": "BottomSheet components/bottomSheet #components/bottomSheet Components Application"
@@ -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| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| type | 'button' \\| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | \"default\" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\nLink buttons\nPrimarySuccessInfoWarningDanger\nLink inline buttons\n\nThis is an example for an Inline link button.\nNote Link buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| type | 'button' \\| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | \"default\" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\nButton group\n\nButton with tooltips\nButton with TooltipDisabled Button with Tooltip\nBlock button\nBlock button\nMultiline button\nThis is a multiline button with a lot of Text\nToggle button\nToggle me\nAdd something / take picture button example\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| type | 'button' \\| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | \"default\" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\nOutlined buttons (transparent)\nDefaultPrimarySuccessInfoWarningDangerMuted filledMuted\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| type | 'button' \\| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | \"default\" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\nAction buttons\nClick me!Click me!Click me!Click me!Click me!Click me!\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| type | 'button' \\| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | \"default\" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |",
     "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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| alignment | 'left' \\| 'right' \\| 'center' \\| 'space-between' | — | Align buttons to a defined side or set them apart. |\n| className | string | — | Additional classes set to the outer element. |",
     "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\nThursday\n8 January 2026\n\nFriday\n9 January 2026\n\nSaturday\n10 January 2026\n\nSunday\n11 January 2026\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |\n| minDays | Number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |\n| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |\nJan\n8\n2026\n\nJan\n9\n2026\n\nJan\n10\n2026\n\nJan\n11\n2026\n\nJan\n12\n2026\n\nJan\n13\n2026\n\nJan\n14\n2026\n\nSet to JanuaryToggle Weekends\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |\n| minDays | Number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |\n| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |",
+    "searchText": "CalendarStripe\nA headless component where you provide a function that renders the UI for every day to be displayed.\nCalendarStripe\nWednesday\n4 February 2026\n\nThursday\n5 February 2026\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | number | 200 | The minimum width in pixel of a single day column This value determines how many days are shown per page depending on the parent width. |\n| minDays | number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | number | 7 | The maximum amount of days that should be shown per page. |\n| renderDay | (date: Date) =React.JSX.Element | — | A function that renders each individual day to be displayed. |\n| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |\n| startDate | Date | the current date | The date of the first day that are rendered. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| buttonClassName | string | — | Additional classes set to the navigation buttons. |\n| className | string | — | Additional classes set to the calendar element. |\n| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |\nFeb\n4\n2026\n\nFeb\n5\n2026\n\nSet to JanuaryToggle Weekends\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | number | 200 | The minimum width in pixel of a single day column This value determines how many days are shown per page depending on the parent width. |\n| minDays | number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | number | 7 | The maximum amount of days that should be shown per page. |\n| renderDay | (date: Date) =React.JSX.Element | — | A function that renders each individual day to be displayed. |\n| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |\n| startDate | Date | the current date | The date of the first day that are rendered. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| buttonClassName | string | — | Additional classes set to the navigation buttons. |\n| className | string | — | Additional classes set to the calendar element. |\n| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |",
     "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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| shadow | 'subtle' \\| 'muted' \\| 'accent' \\| 'default' \\| 'smooth' \\| 'muted-down' \\| 'default-down' \\| 'none' | 'default' | Shadow classes. |\n| padding | 0 \\| 5 \\| 10 \\| 15 \\| 20 \\| 25 \\| 50 | 15 | Card padding. |\n| className | string | — | Additional classes set to the outer element. |",
     "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\nControlled example\nOption 1Option 2Option 3\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\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\nCheckbox with custom icon\nOption 1Option 2Option 3\nOption 1Option 2Option 3",
     "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\nControlled example\n\nSet random value\nControlled component with restriction and used with custom input\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",
     "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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| open | boolean \\| undefined | false | Show the component and triggers the expand or collapse animation. |\n| unmountOnExit | boolean | — | Unmount the component (remove it from the DOM) when it is collapsed. |\n| appear | boolean | false | Run the expand animation when the component mounts, if it is initially shown. |\n| timeout | number | 270 | Duration of the collapse animation in milliseconds. |\n| onEntered | () =void | — | Callback fired after the component has expanded. |\n| onExited | () =void | — | Callback fired after the component has collapsed. |\n| onAnimationStart | () =void | — | Callback fired when the animation starts for either expand or collapse. |\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 \\| undefined | false | Show the component and triggers the expand or collapse animation. |\n| unmountOnExit | boolean | — | Unmount the component (remove it from the DOM) when it is collapsed. |\n| appear | boolean | false | Run the expand animation when the component mounts, if it is initially shown. |\n| timeout | number | 270 | Duration of the collapse animation in milliseconds. |\n| onEntered | () =void | — | Callback fired after the component has expanded. |\n| onExited | () =void | — | Callback fired after the component has collapsed. |\n| onAnimationStart | () =void | — | Callback fired when the animation starts for either expand or collapse. |",
     "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| speed | number | 2 | Sets the animation speed. |\n| height | string \\| number | 14 | Sets the height of the svg element. |\n| width | string \\| number | 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 | 'rect' \\| 'circle' | — | Renders either a rectangle or circle. Possible values are: ContentLoader.RECT, ContentLoader.CIRCLE or rect, circle |\n| className | string | — | Additional class names to ab added to the wrapping svg element. |\n| rx | number | — | Rect object prop. Used internally. |\n| ry | number | — | Rect object prop. Used internally. |\nLoading...\nLoading...Loading...\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| speed | number | 2 | Sets the animation speed. |\n| height | string \\| number | 14 | Sets the height of the svg element. |\n| width | string \\| number | 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 | 'rect' \\| 'circle' | — | Renders either a rectangle or circle. Possible values are: ContentLoader.RECT, ContentLoader.CIRCLE or rect, circle |\n| className | string | — | Additional class names to ab added to the wrapping svg element. |\n| rx | number | — | Rect object prop. Used internally. |\n| ry | number | — | Rect object prop. Used internally. |\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 | string \\| number | 14 | Sets the height of the svg element. |\n| width | string \\| number | 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 | 'rect' \\| 'circle' | — | Renders either a rectangle or circle. Possible values are: ContentLoader.RECT, ContentLoader.CIRCLE or rect, circle |\n| className | string | — | Additional class names to ab added to the wrapping svg element. |\n| rx | number | — | Rect object prop. Used internally. |\n| ry | number | — | Rect object prop. Used internally. |",
     "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.\n### DataTabs\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| activeKey | string | '' | Sets key and id. |\n| bordered | boolean | true | Whether the component should add a border. |\n| className | string | — | Additional classes to be set on the wrapper element. |\n| commonTabContent | React.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| 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| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |\n| onSelectTab | (tabKey: string) =void | — | Called when a tab is being activated. |\n| tabClassName | string | — | Additional classes to be set on the tab element. |\n| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |\n| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |\n| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |\n| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |\n| tabContentClassName | string | — | Utility content classes to be set on the tab element. |\n| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |\n| vertical | boolean | false | Whether the layout should be vertical. |\n### DataTab\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| active | boolean | false | Whether this tab is the one currently active. |\n| tabKey | string | — | Used to identify the tab. |\n| disableTransition | boolean | false | Whether the transition effect should be disabled. |\n| title | React.ReactNode | — | The content for the tab. |\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| bordered | boolean | true | Whether the component should add a border. |\n| className | string | — | Additional classes to be set on the wrapper element. |\n| commonTabContent | React.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| 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| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |\n| onSelectTab | (tabKey: string) =void | — | Called when a tab is being activated. |\n| tabClassName | string | — | Additional classes to be set on the tab element. |\n| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |\n| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |\n| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |\n| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |\n| tabContentClassName | string | — | Utility content classes to be set on the tab element. |\n| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |\n| vertical | boolean | false | Whether the layout should be vertical. |\n### DataTab\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| active | boolean | false | Whether this tab is the one currently active. |\n| tabKey | string | — | Used to identify the tab. |\n| disableTransition | boolean | false | Whether the transition effect should be disabled. |\n| title | React.ReactNode | — | The content for the tab. |\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| bordered | boolean | true | Whether the component should add a border. |\n| className | string | — | Additional classes to be set on the wrapper element. |\n| commonTabContent | React.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| 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| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |\n| onSelectTab | (tabKey: string) =void | — | Called when a tab is being activated. |\n| tabClassName | string | — | Additional classes to be set on the tab element. |\n| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |\n| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |\n| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |\n| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |\n| tabContentClassName | string | — | Utility content classes to be set on the tab element. |\n| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |\n| vertical | boolean | false | Whether the layout should be vertical. |\n### DataTab\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| active | boolean | false | Whether this tab is the one currently active. |\n| tabKey | string | — | Used to identify the tab. |\n| disableTransition | boolean | false | Whether the transition effect should be disabled. |\n| title | React.ReactNode | — | The content for the tab. |\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| bordered | boolean | true | Whether the component should add a border. |\n| className | string | — | Additional classes to be set on the wrapper element. |\n| commonTabContent | React.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| 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| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |\n| onSelectTab | (tabKey: string) =void | — | Called when a tab is being activated. |\n| tabClassName | string | — | Additional classes to be set on the tab element. |\n| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |\n| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |\n| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |\n| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |\n| tabContentClassName | string | — | Utility content classes to be set on the tab element. |\n| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |\n| vertical | boolean | false | Whether the layout should be vertical. |\n### DataTab\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| active | boolean | false | Whether this tab is the one currently active. |\n| tabKey | string | — | Used to identify the tab. |\n| disableTransition | boolean | false | Whether the transition effect should be disabled. |\n| title | React.ReactNode | — | The content for the tab. |\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| bordered | boolean | true | Whether the component should add a border. |\n| className | string | — | Additional classes to be set on the wrapper element. |\n| commonTabContent | React.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| 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| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |\n| onSelectTab | (tabKey: string) =void | — | Called when a tab is being activated. |\n| tabClassName | string | — | Additional classes to be set on the tab element. |\n| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |\n| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |\n| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |\n| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |\n| tabContentClassName | string | — | Utility content classes to be set on the tab element. |\n| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |\n| vertical | boolean | false | Whether the layout should be vertical. |\n### DataTab\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| active | boolean | false | Whether this tab is the one currently active. |\n| tabKey | string | — | Used to identify the tab. |\n| disableTransition | boolean | false | Whether the transition effect should be disabled. |\n| title | React.ReactNode | — | The content for the tab. |\n| onAnimationStart | VoidFunction | — | Callback for when the animation starts. |\n| onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |\n| className | string | — | Additional classes to be set on the element. |",
     "category": "Components",
     "section": "Content",
     "boost": "DataTabs components/dataTabs #components/dataTabs Components Content"
@@ -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‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00\n\nNo timeFormat: YYYY-MM-DD\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\nOnly month\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nOnly time\n\n▲12\n▼\n:\n▲00\n▼\n▲AM\n▼\n\nNot closing when selecting\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nWith min-width\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nClearableInput and optional value\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n01:11\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nTo:\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nUnspecified localeFormat: MM/DD/YYYY\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nNote\nWatch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our writing guidelines.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00 AM\n\nReset\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\nSelects are a simple alternative for choosing dates0101\n02\n03\n04\n05\n06\n07\n08\n09\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n\nJanuaryJanuary\nFebruary\nMarch\nApril\nMay\nJune\nJuly\nAugust\nSeptember\nOctober\nNovember\nDecember\n\n20222022\n2023\n2024\n2025\n2026\n2027\n\nSat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)",
+    "searchText": "DatePicker\nA wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.\nDatePicker\nIt can be used in two ways, as a controlled or uncontrolled component. If you want to use it as a controlled component, pass a value, which you need to provide the DatePicker even after a user selects a new date. If you want to use it as an uncontrolled component, simply omit the value prop (for read-only use cases).\n\nNote: The DatePicker component uses the default format for the given locale. If you specify a locale, make sure you have imported the moment locale file like import 'moment/dist/locale/de';\nDefaultFormat: YYYY-MM-DD HH:mm\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00\n\nNo timeFormat: YYYY-MM-DD\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nOnly month\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nOnly time\n\n▲12\n▼\n:\n▲00\n▼\n▲AM\n▼\n\nNot closing when selecting\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nWith min-width\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nClearableInput and optional value\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n03:04\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nTo:\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nUnspecified localeFormat: MM/DD/YYYY\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nNote\nWatch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our writing guidelines.\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nReset\nSelects are a simple alternative for choosing dates0101\n02\n03\n04\n05\n06\n07\n08\n09\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n\nJanuaryJanuary\nFebruary\nMarch\nApril\nMay\nJune\nJuly\nAugust\nSeptember\nOctober\nNovember\nDecember\n\n20222022\n2023\n2024\n2025\n2026\n2027\n\nSat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)",
     "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\n### Base dialog props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | false | Opens the dialog when set to true. |\n| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |\n| subtitle | React.ReactNode | — | The dialog header subtitle content. |\n| showCloseButton | boolean | true | Shows a close button when set to true. |\n| onClose | () =void | — | A callback function invoked when the dialog closes. |\n| bsSize | DialogSize | '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: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |\n| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |\n| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |\n| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the \"xs\" dialog |\n| className | string | — | Additional classes for the modal element. |\n### Dialog\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| body | React.ReactNode | — | The dialog body content. |\n| footer | React.ReactNode | — | The dialog body content. |\n| bodyClassName | string | — | Additional classes for the modal-body element. |\n| footerClassName | string | — | Additional classes for the modal-footer element. |\n| headerButtons | React.ReactNode | — | Allows to add additional buttons to the dialog header. |\n| onEsc | VoidFunction | — | A callback fired when esc key is pressed and the dialog is about to close. |\n| onCloseValidation | () =boolean | () =true | A callback function to be executed before closing the dialog. If the function returns false, the dialog will not be closed |\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 | string \\| React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |\n| subtitle | string \\| React.ReactNode | — | The dialog header subtitle content. |\n| headerButtons | React.ReactNode | — | Allows to add additional buttons to the dialog header. |\n| onCloseButtonClick | () =void | — | — |\n### Dialog.Body\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional classes for the modal-body element. |\n### Dialog.Footer\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional classes for the modal-footer element. |\nDialogs with validation\nOpen dialog\n### Base dialog props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | false | Opens the dialog when set to true. |\n| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |\n| subtitle | React.ReactNode | — | The dialog header subtitle content. |\n| showCloseButton | boolean | true | Shows a close button when set to true. |\n| onClose | () =void | — | A callback function invoked when the dialog closes. |\n| bsSize | DialogSize | '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: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |\n| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |\n| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |\n| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the \"xs\" dialog |\n| className | string | — | Additional classes for the modal element. |\n### Dialog\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| body | React.ReactNode | — | The dialog body content. |\n| footer | React.ReactNode | — | The dialog body content. |\n| bodyClassName | string | — | Additional classes for the modal-body element. |\n| footerClassName | string | — | Additional classes for the modal-footer element. |\n| headerButtons | React.ReactNode | — | Allows to add additional buttons to the dialog header. |\n| onEsc | VoidFunction | — | A callback fired when esc key is pressed and the dialog is about to close. |\n| onCloseValidation | () =boolean | () =true | A callback function to be executed before closing the dialog. If the function returns false, the dialog will not be closed |\nValidation with separate validation error dialog\nOpen dialog\n### Base dialog props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | false | Opens the dialog when set to true. |\n| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |\n| subtitle | React.ReactNode | — | The dialog header subtitle content. |\n| showCloseButton | boolean | true | Shows a close button when set to true. |\n| onClose | () =void | — | A callback function invoked when the dialog closes. |\n| bsSize | DialogSize | '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: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |\n| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |\n| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |\n| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the \"xs\" dialog |\n| className | string | — | Additional classes for the modal element. |\n### Dialog\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| body | React.ReactNode | — | The dialog body content. |\n| footer | React.ReactNode | — | The dialog body content. |\n| bodyClassName | string | — | Additional classes for the modal-body element. |\n| footerClassName | string | — | Additional classes for the modal-footer element. |\n| headerButtons | React.ReactNode | — | Allows to add additional buttons to the dialog header. |\n| onEsc | VoidFunction | — | A callback fired when esc key is pressed and the dialog is about to close. |\n| onCloseValidation | () =boolean | () =true | A callback function to be executed before closing the dialog. If the function returns false, the dialog will not be closed |\nSimpleDialog\nThis component allows the user to create a simple dialog. It uses the dialog component described above.\nSimple dialog button\n### Base dialog props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | false | Opens the dialog when set to true. |\n| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |\n| subtitle | React.ReactNode | — | The dialog header subtitle content. |\n| showCloseButton | boolean | true | Shows a close button when set to true. |\n| onClose | () =void | — | A callback function invoked when the dialog closes. |\n| bsSize | DialogSize | '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: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |\n| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |\n| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |\n| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the \"xs\" dialog |\n| className | string | — | Additional classes for the modal element. |\n### SimpleDialog\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| content | string \\| React.ReactNode | — | The content of the dialog body itself. |\nConfirmationDialog\nThis component allows the user to create a confirmation dialog. It uses the dialog component described above.\nConfirmation dialog\n### Base dialog props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | false | Opens the dialog when set to true. |\n| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |\n| subtitle | React.ReactNode | — | The dialog header subtitle content. |\n| showCloseButton | boolean | true | Shows a close button when set to true. |\n| onClose | () =void | — | A callback function invoked when the dialog closes. |\n| bsSize | DialogSize | '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: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |\n| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |\n| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |\n| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the \"xs\" dialog |\n| className | string | — | Additional classes for the modal element. |\n### ConfirmationDialog\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| content | string \\| React.ReactNode | — | The content of the dialog body itself |\n| onClickConfirm | VoidFunction | () ={} | A callback fired when the confirmation button is clicked. |\n| onClickCancel | VoidFunction | () ={} | A callback fired when the cancel button is clicked or the dialog is closed. |\n| cancelButtonText | string \\| React.ReactNode | — | The content of the cancel button. (Usually a text, can also be a FormattedMessage component). |\n| confirmButtonText | string \\| React.ReactNode | — | 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. |\nSaveDialog\nThis component allows the user to create a save dialog. It uses the dialog component described above.\nSave dialog\n### Base dialog props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | false | Opens the dialog when set to true. |\n| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |\n| subtitle | React.ReactNode | — | The dialog header subtitle content. |\n| showCloseButton | boolean | true | Shows a close button when set to true. |\n| onClose | () =void | — | A callback function invoked when the dialog closes. |\n| bsSize | DialogSize | '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: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |\n| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |\n| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |\n| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the \"xs\" dialog |\n| className | string | — | Additional classes for the modal element. |\n### SaveDialog\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| content | string \\| React.ReactNode | — | The content of the dialog body itself. |\n| onClickCancel | VoidFunction | — | A callback fired when the cancel button is clicked or the dialog is closed. |\n| onClickDiscard | VoidFunction | — | A callback fired when the discard button is clicked. |\n| onClickConfirm | VoidFunction | — | A callback fired when the confirmation button is clicked. |\n| discardButtonText | string \\| React.ReactNode | — | The content of the discard button. (Usually a text, can also be a FormattedMessage component). |\n| cancelButtonText | string \\| React.ReactNode | — | The content of the cancel button. (Usually a text, can also be a FormattedMessage component). |\n| confirmButtonText | string \\| React.ReactNode | — | 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. |\nSplitDialog\nThis component allows the user to create a split dialog. It uses the dialog component described above.\nSplit dialogSplit dialog large\n### Base dialog props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | false | Opens the dialog when set to true. |\n| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |\n| subtitle | React.ReactNode | — | The dialog header subtitle content. |\n| showCloseButton | boolean | true | Shows a close button when set to true. |\n| onClose | () =void | — | A callback function invoked when the dialog closes. |\n| bsSize | DialogSize | '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: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |\n| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |\n| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |\n| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the \"xs\" dialog |\n| className | string | — | Additional classes for the modal element. |\n### SplitDialog\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| leftContent | string \\| React.ReactNode | — | The content to be shown on the left side. |\n| leftContentClassName | string | — | Additional classes for the left content element. |\n| rightContent | string \\| React.ReactNode | — | The content to be shown on the right side. |\n| rightContentClassName | string | — | Additional classes for the right content element. |\n| footer | React.ReactNode | — | The dialog body content. |\n| footerClassName | string | — | Additional classes for the modal-footer element. |\n| onCloseValidation | () =boolean | — | A callback function to be executed before closing the dialog. If the function returns false, the dialog will not be closed |\n| useOverflow | boolean | true | Enables the modal body to overflow and use inline scrolling if needed. |\n| showDivider | boolean | true | Allows to disable the divider. |\nInfoDialog\nThis component allows the user to create a dialog without title and footer. It uses the dialog component described above.\nInfo dialog\n### Base dialog props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | false | Opens the dialog when set to true. |\n| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |\n| subtitle | React.ReactNode | — | The dialog header subtitle content. |\n| showCloseButton | boolean | true | Shows a close button when set to true. |\n| onClose | () =void | — | A callback function invoked when the dialog closes. |\n| bsSize | DialogSize | '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: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |\n| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |\n| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |\n| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the \"xs\" dialog |\n| className | string | — | Additional classes for the modal element. |\n### InfoDialog\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| content | string \\| React.ReactNode | — | The content of the dialog body itself. |\nFeature info dialog\n### Base dialog props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | false | Opens the dialog when set to true. |\n| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |\n| subtitle | React.ReactNode | — | The dialog header subtitle content. |\n| showCloseButton | boolean | true | Shows a close button when set to true. |\n| onClose | () =void | — | A callback function invoked when the dialog closes. |\n| bsSize | DialogSize | '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: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |\n| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |\n| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |\n| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the \"xs\" dialog |\n| className | string | — | Additional classes for the modal element. |\n### InfoDialog\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| content | string \\| React.ReactNode | — | The content of the dialog body itself. |\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| 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 it's 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| 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\n### Base dialog props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | false | Opens the dialog when set to true. |\n| title | React.ReactNode | — | The dialog title (can also be a FormattedMessage component). |\n| subtitle | React.ReactNode | — | The dialog header subtitle content. |\n| showCloseButton | boolean | true | Shows a close button when set to true. |\n| onClose | () =void | — | A callback function invoked when the dialog closes. |\n| bsSize | DialogSize | '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: 'xs' 'sm' 'lg' 'xl' 'fullwidth' 'fullheight' 'fullheight-lg' 'fullheight-xl' 'fullscreen' |\n| disableEsc | boolean | false | Enables or disabled closing the dialog via esc key. |\n| useOverflow | boolean | false | Enables the modal body to overflow and use inline scrolling if needed. |\n| showXsDialogBorders | boolean | false | Show Header and Footer Borders for the \"xs\" dialog |\n| className | string | — | Additional classes for the modal element. |\n### MediaDialog\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| media | MediaDialogMedia[] | — | List of media objects. |\n| └type | 'image' \\| 'video' | — | Defines the media type that is going to be displayed. Possible values are: image and video. |\n| └src | string | — | The source location for the media data. |\n| └title | string \\| React.ReactNode | — | The name or title of the media used for the dialogs title. |\n| └subtitle | string \\| React.ReactNode | — | Additional media information used for the dialogs subtitle. |\n| └aspectRatio | '4by3' \\| '16by9' | '16by9' | Only relevant for videos where the aspect of the video is defined. Possible values are: 4by3 and 16by9. |\n| └className | string | — | Additional classes for the image element. |\n| previousButtonText | string \\| React.ReactNode | — | The button text for switching to the previous media if there are multiple. |\n| previousButtonCallback | (newIndex: number) =void | — | Callback function for when the previous button is clicked. |\n| nextButtonText | string \\| React.ReactNode | — | The button text for switching to the next media if there are multiple. |\n| nextButtonCallback | (newIndex: number) =void | — | Callback function for when the next button is clicked. |\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\n### FrameDialog\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| eventPrefix | string | 'EVENTFRAMEDIALOG' | A prefix for all event types. |\n| getSourceFrame | () =HTMLIFrameElement \\| null | — | A function to retrieve the iframe DOM element so a message can be sent to it. This is required when sending messages back to the origin widget iframe that triggered the dialog in the first place. |\n| className | string | — | Additional classes for the modal element. |\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.\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' | '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 added to the wrapping element. |",
     "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\n1Duis efficitur felis. Mauris Sed Vivamus elementum sit tortor purus et\n\n2Pharetra et posuere Mauris massa,\n\n3Eget est metus elit. felis. bibendum, nunc orci, vel iaculis. orci semper.\n\n4Bibendum, enim massa consectetur primis in dui nec dolor purus ante aliquam dolor\n\n5Orci, enim consectetur felis. vel dui Sed\n\n6Orci ipsum Integer sagittis in\n\n7Sit ipsum scelerisque posuere malesuada Interdum fames consectetur Duis sagittis dolor\n\n8Efficitur Ut consectetur ligula purus tincidunt. elit. vel\n\n9Fringilla volutpat eget sem. efficitur vel rutrum iaculis. nec orci, neque. felis. malesuada ac ante\n\n10Tincidunt. consectetur ac adipiscing sem. in, ac ipsum neque. metus\n\n11\nLorem efficitur ac hendrerit in eget Mauris finibus velit. elit. primis Mauris pretium Integer efficitur\n\n12Ipsum est lorem tincidunt. vel vel enim molestie sit semper consectetur et\n\n13In, sagittis ac metus\nLorem iaculis. aliquam\n\n14Fringilla lorem\nLorem adipiscing in, Vivamus\n\n15Mauris semper volutpat faucibus. ut quis,\n\n16In elementum orci orci, faucibus. purus eget iaculis.\n\n17Lorem fames purus ipsum dolor vel et ac\n\n18Semper orci orci, ipsum est ipsum\n\n19Aliquam bibendum, et in, ante fames rutrum quis, molestie volutpat massa, semper\n\n20Rutrum fames posuere purus\nLorem ante ut\n\n21Semper. fames pretium neque. Sed fames quis, in, consectetur\n\n22Massa, ante est ligula efficitur iaculis. ut quis,\n\n23Felis. elit. ut dolor consectetur purus massa et consectetur orci, ac Mauris primis Mauris\n\n24Dolor ante ante vitae in,\n\n25Nunc ante sit ac efficitur In consectetur Sed semper vitae fringilla\n\n26\nLorem Mauris enim Mauris In amet,\n\n27In velit. amet, fames condimentum sem.\n\n28Sagittis elit. ac ipsum finibus ut orci\n\n29Ante pretium orci ac eget vitae in tincidunt. consectetur in\n\n30Vitae aliquam ligula iaculis. amet, nunc Ut iaculis. fringilla bibendum, elementum\n\n31Iaculis. nec neque. molestie In semper In volutpat dui libero consectetur ac ac\n\n32Sem. vel molestie nunc purus semper vitae orci ipsum faucibus. in, ante rutrum\n\n33Ut ac fringilla orci ac primis fringilla\n\n34Eget eget ante Ut enim nunc amet, purus efficitur ac sem. ante condimentum\n\n35Tortor fames consectetur ac fringilla elementum ac pretium felis. in condimentum vitae massa\n\n36Quis, et in pharetra fames nec orci,\n\n37Posuere quis, rutrum sagittis et hendrerit Interdum adipiscing ipsum velit. ipsum tincidunt.\n\n38\nLorem et nunc Interdum Ut Vivamus Interdum et rutrum in molestie Ut ipsum\n\n39Ante tortor eget velit. malesuada pretium consectetur elementum lorem ante lorem felis. ante quis, Integer\n\n40Condimentum ac posuere consectetur felis. Mauris nec Ut\n\n41Aliquam eget vitae efficitur Fusce orci sit elit. eget primis amet, eget tortor Sed\n\n42Ante ac in, tincidunt. viverra ipsum tortor est In dui lorem Vivamus orci, molestie\n\n43Ac dui fames\nLorem et\nLorem aliquam primis in ac sit\n\n44Consectetur malesuada orci, Duis ipsum felis. Ut et enim consectetur metus Vivamus ipsum\n\n45Fames malesuada sit nec dolor In orci vel Interdum metus in semper. consectetur\n\n46Lorem nunc efficitur dolor elementum ac ante amet, aliquam ligula et hendrerit velit.\n\n47Massa Interdum est pretium Interdum in adipiscing hendrerit consectetur iaculis. pharetra\n\n48Primis elementum aliquam vitae Ut Fusce Duis\n\n49Lorem in, consectetur elit. lorem massa, faucibus.\n\n50Pretium in, consectetur posuere tortor ut\n\n51In vitae purus ac pretium molestie ante ante ac eget iaculis. eget\n\n52Pharetra semper Mauris est finibus semper. eget massa, sit massa elit. Interdum tincidunt. Mauris\n\n53Eget Integer nunc metus ac Interdum vel ac fringilla consectetur\n\n54Enim ac libero molestie In\n\n55Consectetur est amet, massa, eget viverra pharetra ac in tincidunt. massa\n\n56Efficitur lorem elit. bibendum, neque. ac\n\n57Aliquam dui rutrum iaculis. sem.\n\n58Consectetur Ut eget est Fusce pretium hendrerit nunc purus Fusce Duis\n\n59Interdum adipiscing efficitur libero Interdum eget neque. ut purus in finibus ut eget\n\n60Efficitur nunc Ut aliquam finibus malesuada massa, nec ut tortor dolor libero In metus scelerisque\n\n61Et tortor Vivamus faucibus. eget dolor efficitur dui in\n\n62Consectetur Vivamus faucibus. velit. in Ut ac in et orci fames\n\n63Ac Duis Mauris primis in enim scelerisque efficitur\n\n64Adipiscing molestie neque. ac ante ante consectetur ac ipsum In metus\n\n65Condimentum orci, Duis Integer purus sagittis\n\n66Purus finibus pharetra vitae semper in ipsum scelerisque nunc finibus amet, volutpat enim\n\n67Elit. purus massa, velit. Ut bibendum, sem. hendrerit nec velit. Integer metus\n\n68Sed vitae massa efficitur condimentum Mauris quis,\n\n69Libero est neque. scelerisque sagittis massa, metus nec velit. ligula et ante\n\n70Pharetra Ut et vel molestie Fusce orci\n\n71Fusce tincidunt. Ut massa fames ut elit.\n\n72Faucibus. aliquam nec primis vitae condimentum in in Ut molestie\n\n73Duis est eget metus semper. molestie dui semper\n\n74Posuere posuere molestie velit. metus fames ac semper vel et eget Vivamus nec faucibus.\n\n75Massa, ac posuere nec ipsum eget pharetra dolor\nLorem sit efficitur ut tincidunt.\n\n76Efficitur semper tincidunt. hendrerit ac dui finibus condimentum\n\n77Ac condimentum scelerisque sem. ipsum dui\n\n78Orci in, pretium ante molestie posuere tincidunt. elit.\n\n79Interdum Duis Integer pharetra felis. metus Vivamus tincidunt. elementum Vivamus viverra molestie efficitur\n\n80Posuere condimentum et fames est semper. fringilla aliquam elementum vitae in, et Sed\n\n81Elit. adipiscing condimentum ipsum et sagittis enim metus efficitur pharetra Ut\n\n82In ligula in primis nunc Sed adipiscing semper In faucibus. purus molestie molestie elit. iaculis.\n\n83Consectetur vel orci bibendum, ipsum consectetur semper consectetur Duis\n\n84Neque. Fusce in faucibus. condimentum rutrum fames lorem ac ipsum metus et ut dolor\n\n85Elit. eget efficitur bibendum, ut malesuada aliquam In condimentum purus\n\n86Duis est efficitur dolor rutrum elit. neque. scelerisque ligula nunc ante\n\n87Et ante tincidunt. vitae consectetur ut posuere eget efficitur in ac aliquam\n\n88Velit. neque. Integer vel nec in in Ut Integer massa sit\n\n89Malesuada sagittis volutpat felis. Fusce felis. Vivamus\n\n90Massa, elementum et semper ac bibendum, tincidunt. ipsum\n\n91Condimentum ante purus ante sit Mauris ante in semper. nunc Sed nec et enim in,\n\n92Vitae amet, amet, consectetur orci, tortor lorem ac malesuada Sed\n\n93Elementum hendrerit Ut consectetur finibus ante efficitur hendrerit in consectetur condimentum\n\n94Amet, ipsum ac malesuada in Interdum efficitur semper\n\n95Sed fames ipsum metus sagittis fringilla dui sagittis condimentum ac\n\n96Dolor molestie molestie efficitur viverra\n\n97Ipsum purus eget In metus fames ac\nLorem Duis Vivamus ac Duis neque. enim\n\n98Sit consectetur est ut iaculis. velit. quis, felis. nunc fringilla ante purus\n\n99Consectetur purus Integer tortor posuere consectetur pretium pretium ut dui\n\n100Nunc velit. primis Sed eget Ut\n\n101Libero ut in elementum ante orci, elit. pharetra\n\n102Quis, eget fringilla in, Mauris ut ac ac faucibus. ac orci neque.\n\n103Interdum eget posuere orci, in tortor et volutpat\nLorem Integer purus tincidunt.\n\n104Dui Interdum pharetra libero efficitur aliquam Ut efficitur Vivamus enim semper orci,\n\n105Hendrerit faucibus. ac aliquam orci massa est\n\n106Enim est elit. Duis pretium nec ac malesuada\n\n107Felis. ac Sed et elementum vitae Vivamus tincidunt. est Vivamus amet, orci,\n\n108In vitae et massa ac massa, metus ante elit. ipsum finibus\n\n109Semper eget dolor in, felis. Ut in consectetur elit. sem. adipiscing est libero ipsum ipsum\n\n110Orci, Mauris metus fringilla finibus Vivamus posuere aliquam sagittis hendrerit bibendum, posuere nunc vitae\n\n111In, condimentum ut adipiscing in efficitur scelerisque posuere faucibus. dui sem. in efficitur faucibus.\n\n112Ut ut Integer eget Vivamus rutrum posuere\n\n113Ut ac Interdum pharetra neque. molestie ante hendrerit semper.\n\n114Vitae massa, In ipsum sagittis vitae scelerisque lorem\n\n115Pretium malesuada fringilla elit. in finibus semper. faucibus.\n\n116Consectetur est vitae fames fames\n\n117In pharetra elit. sit aliquam scelerisque\n\n118Quis, sagittis condimentum fringilla faucibus. elit. ac semper. hendrerit\nLorem finibus elit. ante molestie ac\n\n119Ante In ac neque. dolor Mauris ante Fusce consectetur rutrum Interdum sagittis Integer consectetur ut\n\n120Consectetur bibendum, bibendum, ac pharetra elementum\n\n121In hendrerit ac sagittis quis, elementum nunc lorem fringilla elit. Duis orci, faucibus. eget semper.\n\n122Felis. Fusce Fusce primis felis. malesuada ac massa volutpat ut semper. viverra ante elit. ante\n\n123Fusce purus ante viverra condimentum In ante ac molestie Integer\n\n124Vivamus lorem nunc volutpat orci, Mauris ipsum eget vel dui quis,\n\n125Vitae Vivamus sagittis adipiscing metus consectetur tortor dui metus\n\n126Nec ipsum enim sem. et consectetur eget massa, nec ac tincidunt. elit. in, in\n\n127Vel sit tortor massa primis ac malesuada\n\n128Volutpat ut in neque. massa,\n\n129Viverra nunc tincidunt. consectetur amet, efficitur et amet, finibus massa pretium sagittis ipsum\n\n130Finibus bibendum, ligula consectetur hendrerit aliquam\n\n131Massa ipsum Mauris consectetur scelerisque Vivamus semper massa consectetur ac ligula ligula\n\n132Ante orci ipsum primis fames ac molestie ut pretium finibus felis.\n\n133Sed Sed\nLorem fringilla consectetur velit. efficitur est ac eget consectetur neque.\n\n134Vitae iaculis. ante eget massa, faucibus. orci primis dui primis aliquam faucibus.\n\n135Tortor aliquam consectetur lorem malesuada Duis pharetra velit. ac ante molestie\n\n136Et In eget volutpat ac elit. posuere elit.\n\n137Consectetur vitae primis molestie scelerisque molestie\n\n138Ipsum ac eget felis. orci in pharetra ac ante iaculis. vel\n\n139Neque. et est in ac Mauris In velit. volutpat pharetra\n\n140Fringilla fames enim volutpat lorem massa, rutrum enim pharetra\nLorem semper. quis, condimentum fames massa,\n\n141Sed Vivamus semper ante massa, in, malesuada fames hendrerit orci metus Integer ac\n\n142\nLorem ac eget condimentum faucibus. metus primis ac purus nec iaculis. eget sem.\n\n143Massa, ut viverra In et Integer consectetur purus Mauris orci, tortor libero sem.\n\n144Enim consectetur Ut dolor ante pharetra nec finibus elit. ac ante Duis finibus quis,\n\n145Malesuada ac enim quis, Sed\n\n146Semper. iaculis. volutpat sit sem. dolor viverra vitae quis, eget vitae rutrum sagittis\n\n147Primis ipsum felis. sagittis primis\n\n148In, enim lorem lorem faucibus. elementum tincidunt. Sed metus orci ante ut semper. tincidunt.\n\n149Ante fringilla aliquam sit ac molestie Mauris posuere adipiscing ac finibus semper. ipsum\n\n150Massa, ante adipiscing sem. efficitur et ac in est\n\n151Elementum eget semper. sagittis in, in in, Duis iaculis. rutrum efficitur\n\n152In pharetra ante felis. purus\n\n153Dui Fusce elit. molestie\nLorem malesuada eget aliquam vel in, semper\n\n154Mauris Integer Integer semper. hendrerit enim condimentum posuere\n\n155Mauris fringilla dolor velit. tortor metus scelerisque libero\n\n156Sem. est neque. hendrerit volutpat aliquam efficitur iaculis. ac\n\n157Hendrerit dolor ante viverra velit. ac consectetur hendrerit elementum posuere sem. bibendum, scelerisque\n\n158Sem. ac elit. sit tincidunt. pharetra\n\n159Finibus volutpat eget adipiscing consectetur faucibus.\n\n160Ac Vivamus rutrum tortor consectetur malesuada nunc\n\n161Adipiscing faucibus. Sed In fames ante pretium velit. ut purus massa\n\n162Ut consectetur ut malesuada adipiscing efficitur massa\n\n163In pretium amet, bibendum, ut iaculis. adipiscing in ac hendrerit semper ante Integer\n\n164In fames elit. enim elementum sit purus Integer Vivamus finibus vitae eget\n\n165Interdum iaculis. ut dui ante ut nec amet, condimentum\n\n166Nec Fusce semper. metus fames ipsum in tincidunt. et scelerisque in\n\n167Amet, ante et finibus nunc in Integer felis. massa, massa, bibendum, faucibus. massa, in et\n\n168Consectetur viverra malesuada libero et semper\n\n169Dolor Mauris iaculis. amet, in iaculis. et dolor aliquam metus est orci neque.\n\n170Ac elit. consectetur libero vel malesuada In ut\n\n171Semper. Interdum malesuada Sed eget elementum primis vel Fusce\n\n172Quis, massa ante consectetur ante dui elit. iaculis. fames ac aliquam\n\n173Metus sagittis efficitur In felis. rutrum ante\n\n174Vivamus elit. eget nec ipsum scelerisque aliquam quis, et orci, semper elit.\n\n175Aliquam enim fringilla felis. efficitur nec finibus tincidunt. et Integer ut enim quis,\n\n176Fames Interdum massa elit. elementum amet, Sed semper quis, molestie consectetur ante sit orci,\n\n177Eget ante libero metus hendrerit hendrerit Vivamus scelerisque felis. volutpat ac et efficitur consectetur\n\n178Sed ipsum condimentum tortor molestie eget Vivamus ut hendrerit molestie\n\n179Semper. ac nunc Duis ut in\n\n180Eget bibendum, ligula enim dui velit. bibendum, sagittis aliquam ipsum\n\n181Est massa, Fusce dolor ac amet,\n\n182Orci, nec condimentum libero condimentum elit. sem. velit. in Ut hendrerit\n\n183Ante purus semper. massa neque. efficitur et neque. Sed fringilla eget elementum efficitur finibus Sed\n\n184Viverra quis, scelerisque eget consectetur semper in,\n\n185Metus quis, lorem ipsum ante consectetur ac\n\n186Fusce efficitur pretium enim In ut massa\n\n187Semper. nec vel Fusce eget massa, felis. velit. consectetur fringilla\n\n188Ipsum aliquam in, nunc ipsum in, libero consectetur eget\n\n189Tortor in orci viverra tincidunt. in rutrum primis eget efficitur\n\n190Volutpat dui scelerisque in Fusce\n\n191Purus Integer In dolor nec ut ante Duis ante molestie ante ipsum consectetur fringilla\n\n192Ligula Ut Fusce orci molestie malesuada tortor\n\n193Vivamus in nunc consectetur vitae Mauris semper in fringilla nunc Duis iaculis. sem. eget\n\n194Velit. sem. ipsum nec lorem metus volutpat ante amet, dui et\n\n195Est primis bibendum, fames consectetur vel volutpat rutrum dolor vel\n\n196Ac Sed massa in, pretium enim tincidunt. Integer Sed\n\n197Est ligula Sed orci, ac elit. molestie Interdum tincidunt. ac ac primis\n\n198Amet, velit. ante felis. velit. condimentum ut in elementum Ut dolor bibendum, Vivamus iaculis. enim\n\n199Dolor lorem neque. adipiscing bibendum, hendrerit ac felis.\n\n200Et Duis felis. ante amet, molestie\n\n201Molestie ac molestie nunc molestie bibendum, nunc\n\n202Iaculis. eget elit. hendrerit libero massa, In ut semper. condimentum felis. aliquam elit.\n\n203Volutpat molestie velit. et nunc fringilla et elit. in libero consectetur purus Duis eget finibus\n\n204Posuere dui massa, semper. rutrum\n\n205Ac ut massa lorem in, efficitur quis,\n\n206Condimentum Sed orci consectetur Integer bibendum, Vivamus metus vitae pretium scelerisque Fusce ligula adipiscing\n\n207Purus In iaculis. malesuada in Sed molestie Vivamus consectetur consectetur Interdum in, semper. faucibus. orci\n\n208\nLorem tortor et dui bibendum, consectetur malesuada ac ac massa et\n\n209Ut bibendum, quis, lorem velit. lorem enim\n\n210Pretium ut amet, In bibendum, ut Mauris primis aliquam pretium orci dui\n\n211Ante orci fames eget bibendum, Duis et\n\n212Sem. dui efficitur eget tincidunt. finibus viverra eget orci ligula ante Vivamus faucibus. tincidunt.\n\n213Eget et ante condimentum Fusce molestie semper. condimentum condimentum vitae condimentum\n\n214Condimentum tortor vitae Interdum nunc elit. Integer posuere lorem\n\n215Tortor libero Interdum ante lorem faucibus. consectetur ipsum vitae eget sit Ut ante ante enim\n\n216Iaculis. In efficitur efficitur fringilla elementum\n\n217Ac efficitur felis. posuere Ut ante finibus elit. ante condimentum quis, scelerisque est\n\n218Ut viverra elementum elit. nec In Sed iaculis. dui\nLorem libero tincidunt. efficitur primis\n\n219In ac Vivamus nunc eget condimentum Ut in bibendum, posuere in Ut amet, ac metus\n\n220Sem. ipsum in aliquam condimentum nec in ac ut Fusce\n\n221Ac lorem adipiscing adipiscing Integer Fusce primis enim Sed ante\n\n222Velit. libero in est rutrum elit. In amet, Sed ac\n\n223In faucibus. orci ante eget In sit et sagittis\n\n224Metus eget tortor quis, est dui Mauris ipsum\n\n225Pharetra sem. ac tincidunt. scelerisque fringilla metus Mauris Fusce ipsum ac eget fringilla\n\n226Quis, massa sem. eget aliquam in\n\n227Pharetra ut dolor eget Mauris Ut vel amet, Integer consectetur molestie purus\n\n228Semper sagittis efficitur\nLorem eget aliquam\n\n229Pharetra dui et viverra rutrum\nLorem elementum ac sem. dui ligula sit fringilla sagittis\n\n230Ut elit. elit. sit dui Ut sit consectetur Ut posuere ac volutpat\n\n231Molestie Mauris primis in, et faucibus.\n\n232Consectetur in, Sed amet, tincidunt. neque. ipsum bibendum,\n\n233Orci, in et felis. ligula ut rutrum bibendum, Duis scelerisque in\n\n234In est elit. Fusce fames felis. pharetra enim\n\n235Sem. nunc Vivamus ac volutpat sem. in, lorem massa posuere\n\n236Est velit. sagittis pretium efficitur enim eget faucibus. Mauris\n\n237Orci, viverra in viverra sagittis vitae Ut hendrerit faucibus. ac bibendum, malesuada\n\n238Semper. neque. scelerisque In tortor ante semper. molestie bibendum, Interdum elementum efficitur fringilla fames\n\n239Hendrerit amet, Integer pharetra ac condimentum Mauris\n\n240In fames eget neque. massa iaculis. bibendum, in et in, est dolor ac\n\n241Rutrum ante massa ipsum massa pharetra ante massa, lorem ante purus sit primis ac\n\n242Ligula faucibus. dui ipsum ante efficitur dolor efficitur primis ac semper. in, velit.\n\n243Primis Interdum pharetra semper neque. scelerisque primis purus metus fringilla consectetur\n\n244Amet, Sed sit pharetra elementum pharetra ante libero sagittis in, viverra in\n\n245Fames ut lorem fames ac neque. neque. massa,\nLorem vitae\n\n246Enim tortor est Interdum ac ante elementum dui ipsum Sed Ut massa,\n\n247Nec aliquam et Vivamus semper. hendrerit vel ac In ante pretium tortor orci, massa,\n\n248Sed nec consectetur ut elit. consectetur dui In\n\n249Duis consectetur Ut nunc est tortor efficitur elit.\n\n250Sit in eget et tortor fames\n\n251In viverra felis. tortor malesuada semper elementum rutrum in\n\n252Fringilla nec orci, purus ut ante in, amet, orci,\nLorem efficitur fames ut\n\n253Ut iaculis. ipsum enim\nLorem ac orci, sem. metus finibus in, Duis\n\n254In ante iaculis. et massa eget condimentum ligula bibendum,\n\n255Interdum molestie felis. adipiscing vel\n\n256Malesuada sem. Vivamus dui semper.\n\n257Pharetra ante consectetur volutpat et dolor eget Ut lorem viverra ac\n\n258Pretium bibendum, bibendum, dui sagittis Vivamus molestie ac purus elementum et\n\n259Ante ligula Vivamus Mauris ut Duis adipiscing\n\n260Sed efficitur ac ac in,\n\n261Nunc sem. primis posuere Fusce ac in iaculis. ante vel Duis dolor semper. efficitur\n\n262Vivamus Vivamus rutrum elementum bibendum, enim consectetur posuere viverra in dolor et consectetur consectetur\n\n263Orci viverra massa orci, ut\n\n264Lorem posuere dolor tincidunt. viverra eget tortor primis ante\n\n265Fusce Duis fringilla enim in nunc scelerisque sagittis libero est est\n\n266Efficitur Fusce ante Mauris ac enim efficitur eget bibendum, Duis neque. viverra molestie iaculis. malesuada\n\n267Iaculis. est molestie ipsum ac ligula ante sem. posuere\n\n268Et Sed velit. ante vitae aliquam dui ac aliquam eget Ut libero semper.\n\n269Bibendum, eget dui tincidunt. semper. semper pretium aliquam vel iaculis. ipsum lorem semper\n\n270Ac massa sagittis eget libero pretium eget ut enim libero eget\n\n271Ut ut ante In adipiscing et ante\nLorem ac dui ac\n\n272Pretium faucibus. volutpat velit. bibendum, neque. ut semper in, finibus sagittis pretium ac\n\n273\nLorem ut volutpat ipsum amet, libero dui Sed\n\n274Velit. sagittis ac\nLorem faucibus. ipsum nunc\n\n275\nLorem elit. massa semper finibus ut tincidunt. Interdum\n\n276Dolor finibus sagittis eget ac ac Vivamus ligula In Interdum consectetur eget enim\n\n277Nunc orci vitae sem. vitae semper. in\nLorem adipiscing dui\n\n278Faucibus. Mauris ut fringilla in adipiscing\n\n279Rutrum\nLorem elit. sem. iaculis. consectetur\n\n280Rutrum viverra efficitur Sed pharetra in, orci libero viverra Vivamus\n\n281Posuere ut neque. neque. in consectetur ante\n\n282Metus ac Integer posuere sagittis ipsum primis eget ac ac pharetra purus\n\n283Nunc nunc ante ante elementum quis, dolor consectetur Fusce in\n\n284Lorem in Interdum tortor orci, enim\n\n285Massa aliquam orci Fusce efficitur elit. et nunc malesuada ac Duis volutpat\n\n286Eget efficitur scelerisque tortor metus finibus iaculis. tortor viverra nunc pretium\n\n287Iaculis. ac ante nec ante volutpat purus iaculis. efficitur fames aliquam ipsum molestie consectetur\n\n288Pretium faucibus. vitae ac semper. volutpat in faucibus. ante volutpat efficitur faucibus.\n\n289Pretium elit. purus Vivamus rutrum elementum Vivamus ligula ac metus Fusce finibus\n\n290Ac purus posuere fames elit. Integer ante aliquam in\n\n291In semper condimentum bibendum, ac massa, orci consectetur et velit. quis, iaculis. bibendum, ipsum\n\n292Consectetur ut consectetur posuere dolor sagittis massa, semper\n\n293Pretium hendrerit orci, Ut ac tincidunt. elit. iaculis. elementum pretium elementum semper.\n\n294Scelerisque pretium dui dolor in malesuada in primis iaculis. consectetur ac\n\n295Metus orci iaculis. viverra Duis semper. fames iaculis.\n\n296Molestie elit. et eget Fusce\n\n297Purus tincidunt. Ut dolor viverra molestie consectetur massa\n\n298Massa ligula massa, ligula In enim iaculis. Mauris\n\n299Lorem nunc in ac dui in elit.\n\n300Ipsum pharetra ante aliquam elit. amet, efficitur iaculis. amet, ac et\n\n301Nec tincidunt. vitae ante molestie iaculis. ligula molestie pharetra vitae in ac est ipsum iaculis.\n\n302In in semper. Sed nunc enim Vivamus neque. Duis est\n\n303Massa purus et Duis condimentum\nLorem libero In metus sagittis vel sit Fusce\n\n304Ac est semper. scelerisque amet, eget vitae Duis vel tortor eget\n\n305Elit. dolor sem. nunc vel nunc\n\n306Molestie dui velit. Vivamus in sem. velit. massa, fringilla semper. eget elit. libero lorem\n\n307Sit Mauris consectetur posuere ligula vitae Vivamus\n\n308Et sit efficitur malesuada purus nunc\nLorem ante finibus viverra ante aliquam scelerisque\n\n309Eget posuere orci orci, fringilla quis, vitae orci nec neque. pharetra\n\n310Malesuada Ut vel et eget aliquam dui\n\n311Vitae semper in ut sagittis In ac elit. efficitur ac consectetur massa,\n\n312Malesuada In rutrum malesuada Fusce elit. In amet, condimentum Integer neque. tincidunt. Ut\n\n313Velit. felis. nec aliquam adipiscing amet, et\n\n314Ut Ut et Duis vel molestie volutpat ipsum\n\n315Metus tincidunt. posuere viverra condimentum massa, ac elementum in felis. Integer\n\n316Primis amet, metus vel ante orci Integer Vivamus fringilla enim\n\n317Velit. felis. ipsum elit. ante orci rutrum massa, vitae sagittis finibus\n\n318Fringilla dui consectetur volutpat ut purus finibus massa,\n\n319Ante ante finibus sem. ligula vitae Interdum rutrum felis. dolor\n\n320Ante scelerisque quis, pharetra sem. massa, bibendum, ante elit. vitae ante lorem\n\n321Sit posuere finibus Sed adipiscing fringilla purus pretium elit. neque. pharetra felis. lorem\n\n322Velit. elit. nunc faucibus. in, Duis orci, volutpat ipsum felis. velit. nec\n\n323Ac nec condimentum bibendum, semper fringilla consectetur faucibus. ligula ipsum massa, et libero in, lorem\n\n324Duis nunc ac ac amet,\n\n325Aliquam ut semper. ante ligula scelerisque in metus nec semper ut tortor fames\n\n326Nunc volutpat in felis. bibendum, in, eget ante Integer\n\n327Elementum Interdum ipsum Interdum semper. Mauris vel efficitur scelerisque Vivamus ut\n\n328Aliquam Fusce efficitur ut tincidunt.\nLorem Ut ac condimentum pretium consectetur\n\n329Massa, ac sem. neque. velit. nunc et et tortor viverra efficitur\n\n330Dolor amet, condimentum nec massa sit faucibus. ac condimentum ac tortor ut ante\n\n331Ac Integer adipiscing malesuada Ut\n\n332Sagittis Mauris massa viverra in ante fames dui nunc primis\n\n333Consectetur hendrerit orci, sem. neque. in massa,\n\n334Rutrum faucibus. ut nec efficitur fames\n\n335Enim semper faucibus. amet, in scelerisque quis, libero sagittis\n\n336Viverra pretium Sed vel nunc sagittis eget ante hendrerit adipiscing Interdum semper.\nLorem ipsum\n\n337Dolor libero semper finibus pharetra ut Integer elit. Fusce\n\n338In, consectetur ante ut eget est scelerisque efficitur Integer iaculis. neque. felis. bibendum, sagittis\n\n339Pretium ut ac elementum elit. ipsum volutpat in, lorem Duis sem. hendrerit scelerisque neque. pharetra\n\n340Sit in ac Fusce posuere ante\n\n341Purus posuere\nLorem felis. ante viverra ante Sed In elit. elementum nunc faucibus. in\n\n342Elementum fringilla quis, massa consectetur sem. dolor tincidunt. posuere ac Ut metus efficitur Fusce\n\n343Pretium sagittis amet, lorem ac posuere neque. enim fames\n\n344Duis in nec Sed In consectetur efficitur velit. vel elementum Fusce pretium aliquam viverra tincidunt.\n\n345Posuere orci hendrerit\nLorem ante orci, lorem in Ut semper. finibus et ac\n\n346Sed sit rutrum semper Interdum libero elementum massa semper et nec ipsum\n\n347Fringilla aliquam tortor in ligula aliquam in, consectetur aliquam ut rutrum\n\n348Vitae finibus efficitur efficitur consectetur posuere velit. efficitur velit. libero ut ac\n\n349Ante tortor in amet, purus elementum ligula eget et ipsum Integer vel vel bibendum, ante\n\n350Velit.\nLorem semper nec Duis et efficitur amet, libero fames\n\n351In fringilla\nLorem sem. Fusce quis, elit. tortor viverra\n\n352Posuere Fusce ipsum sagittis massa lorem\n\n353Velit. molestie felis. vitae dolor primis ac Ut malesuada posuere eget viverra sit\n\n354Felis. in volutpat in, posuere In condimentum semper bibendum, Ut fringilla posuere pretium\n\n355Metus tortor eget viverra orci, metus ante ante consectetur fringilla neque. iaculis. massa, Interdum molestie\n\n356Integer scelerisque posuere libero ut volutpat sit in tincidunt. condimentum Vivamus\n\n357Ante velit. adipiscing posuere scelerisque efficitur\n\n358Consectetur adipiscing et\nLorem tortor vel Fusce In Vivamus adipiscing in in ac ipsum iaculis.\n\n359Eget ut ante fames metus In\n\n360Et in in volutpat elit. ipsum amet, scelerisque Fusce\n\n361Ac semper in aliquam elit. massa aliquam purus finibus orci sem. elit. pretium volutpat\n\n362Condimentum ipsum nec massa, hendrerit ac viverra dolor ac dolor Mauris eget\n\n363Massa ante Fusce dui vel elit. rutrum bibendum, Mauris tortor orci, est\n\n364Ipsum ante quis, malesuada lorem hendrerit In volutpat ac ac\n\n365Velit. Duis ante metus enim amet,\n\n366Et ante et consectetur in dui\n\n367In consectetur neque. molestie semper\n\n368Et elit. libero est scelerisque ut massa vitae in, Duis in\nLorem semper.\n\n369In vel in posuere in, libero lorem sagittis scelerisque condimentum\n\n370Elementum in malesuada sem. in\nLorem pharetra\n\n371Metus finibus dui ac elit. finibus nunc\n\n372Semper orci Fusce Duis sagittis sagittis in amet, massa adipiscing et viverra\n\n373Finibus ligula libero et purus iaculis. Duis elit. orci, faucibus. hendrerit in Vivamus\n\n374Fringilla lorem pretium purus efficitur ipsum\n\n375Massa, velit. massa, efficitur metus nunc rutrum Fusce adipiscing condimentum posuere\n\n376Tortor volutpat ut consectetur Fusce Sed ipsum elementum felis. Sed\n\n377Eget vel et viverra Fusce dui Sed Sed ligula in dolor massa Integer\n\n378Viverra et Vivamus condimentum efficitur\nLorem ante elit. et dui\n\n379Sed purus ante tortor ut volutpat vitae nunc consectetur posuere posuere hendrerit aliquam primis\n\n380Libero ante pharetra nunc viverra\n\n381Massa, massa ac sem. aliquam iaculis. rutrum viverra ligula\n\n382Eget ut iaculis. tortor semper. orci, nec in, elementum primis\n\n383Neque. elit. finibus consectetur ut ipsum ac neque. elit. Integer elementum dui Ut purus\n\n384Condimentum elit. sagittis ac semper. eget eget\n\n385Elit. ipsum enim bibendum, iaculis. lorem finibus libero elit. pharetra amet,\nLorem consectetur\n\n386Purus hendrerit Ut dolor ante Integer est Duis vitae\n\n387Adipiscing adipiscing hendrerit iaculis. efficitur in semper pharetra libero neque. elementum Integer vitae Ut\n\n388Sagittis pretium est vitae Ut massa, amet, rutrum fringilla Ut molestie velit. Integer tincidunt. elementum\n\n389Nunc ut hendrerit in, nec bibendum, semper. Mauris In viverra dui In Sed ipsum molestie\n\n390Ante condimentum felis. sagittis ipsum elementum orci, eget condimentum\n\n391In, in, ac tincidunt. ut rutrum sit Fusce lorem et vitae Integer ac\n\n392Et elit. nunc eget consectetur amet, et elementum efficitur in vel\n\n393Pharetra et Vivamus eget malesuada vitae\nLorem libero\n\n394Ligula molestie malesuada Ut posuere quis, Mauris vel Integer metus amet, Interdum scelerisque\n\n395Adipiscing velit. rutrum lorem fames orci\n\n396In scelerisque velit. massa In elementum Ut ac est sagittis pharetra ante ut viverra libero\n\n397Eget elit. adipiscing consectetur orci, quis, ipsum ut est elementum purus ac\n\n398Molestie fringilla Duis ut Sed velit.\n\n399Vel Mauris volutpat posuere in,\n\n400Libero consectetur Duis sagittis ante pretium ut molestie Interdum in\n\n401Tincidunt. sagittis ipsum efficitur est et velit. ante ac et enim efficitur faucibus. ut\n\n402Posuere libero ante Interdum Sed iaculis. nunc ac\n\n403Neque. semper semper massa ac ac Duis pretium ac\n\n404Ante semper. nec Fusce pharetra elit. aliquam neque. rutrum ac finibus\n\n405Integer efficitur felis. ante orci, iaculis.\nLorem posuere amet,\n\n406Neque. purus efficitur nunc felis. condimentum et Integer ipsum adipiscing lorem viverra massa Sed\n\n407Consectetur volutpat metus velit. iaculis. efficitur ac ac malesuada ante velit. felis. sem. elementum consectetur\n\n408Duis adipiscing ac nec nec massa, Ut pretium Mauris Ut eget in, hendrerit\n\n409Volutpat neque. rutrum malesuada elit. volutpat dui Sed Mauris\n\n410In rutrum enim elementum in elementum orci, volutpat\n\n411Ut Mauris ipsum eget metus Mauris vel tincidunt. ac sagittis neque. hendrerit\n\n412\nLorem consectetur sit\nLorem et\n\n413In volutpat Fusce scelerisque ac tincidunt. pretium consectetur vel hendrerit sem. est purus\n\n414In in massa adipiscing ante\n\n415Ipsum bibendum, hendrerit efficitur ut elit. velit. elit. In vitae eget massa\n\n416Elementum ante malesuada pretium ante elementum ante faucibus. fames consectetur ac ipsum orci, rutrum faucibus.\n\n417Mauris Vivamus semper\nLorem Mauris in felis. et efficitur aliquam viverra tortor ut massa massa\n\n418Mauris vel et nec in, pharetra in lorem ante\n\n419Consectetur enim Duis in consectetur Duis Sed velit. consectetur amet,\n\n420Orci finibus sem. pretium ac faucibus. adipiscing ipsum libero elit.\n\n421In Mauris in Mauris ante efficitur Sed dolor vitae condimentum Ut vitae condimentum\n\n422Enim molestie consectetur ut scelerisque fames in in,\n\n423Lorem neque. faucibus. enim Integer Fusce elementum libero neque. vel eget nunc in pharetra\n\n424Ante malesuada elit. In ac Integer semper. Duis nunc semper adipiscing in, eget\n\n425Posuere dui nunc Mauris iaculis. pretium efficitur\n\n426Faucibus. fringilla metus dui volutpat Vivamus Duis ut nunc Vivamus est ac Vivamus\n\n427Posuere vitae finibus elit. et ligula\n\n428Ut sem. semper. dui quis, iaculis. purus Interdum et hendrerit est\n\n429Ligula quis, neque. orci, ante Duis fames elit. Duis viverra in\n\n430Felis. massa eget ante condimentum elementum Duis In in elit. efficitur\n\n431Dui rutrum neque. ut viverra fringilla neque. volutpat\nLorem primis sit\nLorem rutrum\n\n432Ac nunc ante Vivamus neque. efficitur in tincidunt. ac in scelerisque metus\n\n433Duis neque. faucibus. consectetur eget et Fusce aliquam dui eget consectetur Sed amet,\n\n434Massa et ante fames purus ante purus enim neque. viverra sagittis in efficitur\n\n435Sit est tincidunt. in, ipsum dolor est condimentum ante\n\n436Orci, ut finibus felis. eget efficitur fringilla bibendum, dui pharetra et\n\n437Ante pharetra ipsum bibendum, ipsum Vivamus efficitur In dui tincidunt. Vivamus ante dolor\n\n438Ante amet, nec metus ante viverra condimentum viverra ligula malesuada tortor aliquam sagittis nunc efficitur\n\n439Primis quis, ante lorem ante aliquam Ut et semper elit.\n\n440Adipiscing Mauris consectetur ipsum Duis vel semper. in tincidunt. ut iaculis. in,\n\n441Amet, pharetra libero in, rutrum\n\n442Rutrum dui ac efficitur Vivamus orci, in,\n\n443In elit. Interdum fames ac sagittis nec Mauris Duis efficitur malesuada est\n\n444Consectetur finibus sit in, Fusce massa, nunc elementum tincidunt. Vivamus sem. elit. libero ligula\n\n445\nLorem finibus ac velit. ipsum ut quis, elit. Duis massa,\n\n446Pretium condimentum vel dolor In ut quis, Integer ac Interdum Duis massa, in purus\n\n447Iaculis. Interdum velit. tincidunt. in tincidunt. hendrerit Vivamus\n\n448Eget et primis sem. in In nunc\n\n449Tortor fames amet, et Sed malesuada in adipiscing fames fringilla nec ligula viverra rutrum\n\n450Felis. iaculis. consectetur tortor ac vitae eget et ante tortor\n\n451Vel nunc finibus elementum et dolor Ut pretium eget\n\n452Massa Ut et vel bibendum, ac nunc et orci Mauris ut ac malesuada tortor Vivamus\n\n453Et consectetur ac condimentum quis, massa ac est\nLorem pharetra\n\n454Fusce ante efficitur efficitur bibendum, efficitur sagittis ut ante vel aliquam viverra faucibus.\n\n455Semper. consectetur sem. orci, Vivamus libero ante sagittis Vivamus aliquam elit. ac dolor sit ac\n\n456Ante Vivamus elit. rutrum nunc quis, bibendum, volutpat ante bibendum, consectetur iaculis.\n\n457Fusce consectetur massa vitae viverra ac\n\n458Amet, Ut eget In tortor\n\n459Rutrum in efficitur ut ac semper ligula fames massa, ante fringilla est Integer enim orci\n\n460Finibus ac ante sit ante faucibus. pharetra dolor efficitur sem. sit lorem finibus posuere\n\n461Libero velit. semper. volutpat sagittis scelerisque efficitur libero\n\n462Ut efficitur nec dolor dolor ante bibendum, et enim hendrerit efficitur pharetra ac\n\n463Ac orci rutrum ligula malesuada semper ipsum malesuada Sed elementum\n\n464Iaculis. sem. tincidunt. posuere sagittis in scelerisque viverra\nLorem condimentum\n\n465Libero tortor adipiscing primis nec ante sit massa, consectetur posuere\n\n466In posuere elit. in In\n\n467In, est ipsum eget viverra est fames lorem ipsum elit. felis. dolor rutrum pharetra neque.\n\n468Tincidunt. elit. in pretium tincidunt.\n\n469Massa iaculis. orci, viverra lorem et bibendum, ante semper. faucibus. in, semper. felis.\n\n470Malesuada neque. fringilla ante tortor ac Mauris orci, massa, fames felis.\n\n471Ipsum in semper elit. neque. posuere ac elit. Ut Fusce in, ligula dui et Mauris\n\n472Orci adipiscing massa, ante malesuada est finibus\n\n473Orci, rutrum Integer massa et Duis hendrerit est et ante\n\n474Nec elementum ligula et eget Duis aliquam tincidunt. aliquam\n\n475\nLorem viverra ipsum quis, et quis, rutrum finibus Ut in viverra finibus rutrum\nLorem\n\n476Efficitur rutrum sagittis elit. viverra vel et sit semper aliquam sem. enim semper. massa\n\n477Et pharetra faucibus. dolor faucibus. efficitur viverra et faucibus. nec libero\n\n478Malesuada volutpat ipsum aliquam nec ipsum fames massa condimentum orci, Fusce pharetra ipsum consectetur vel\n\n479Neque. ut In iaculis. condimentum pharetra nec sem.\n\n480Aliquam libero dui dui rutrum orci, Sed in vel nec metus vel nec\n\n481In vitae ac ipsum vel\nLorem Ut rutrum purus in nec purus bibendum, fames\n\n482Posuere sit pharetra ac ac Sed semper. fames orci, elementum\n\n483Felis. quis, Fusce Duis Sed in enim amet, pretium hendrerit\n\n484Ante\nLorem elit. elementum ac fames velit. ut nec In\n\n485Mauris Interdum in viverra ante efficitur pretium dui ipsum Vivamus primis Interdum orci, sem. lorem\n\n486Metus aliquam rutrum ligula ante pharetra primis massa\n\n487Iaculis. vel pharetra volutpat fames consectetur pharetra massa tortor volutpat Sed tincidunt. Integer\n\n488Lorem efficitur purus adipiscing rutrum semper\nLorem in et in, orci massa in in elementum\n\n489Faucibus. nunc orci, condimentum est malesuada semper efficitur posuere in, ipsum in ac est\n\n490Mauris finibus In velit. ac Interdum elit. ac ligula pretium iaculis. eget ipsum nec In\n\n491Lorem dui faucibus. semper consectetur enim\n\n492Ut posuere ipsum et ac in,\n\n493Sit bibendum, pretium fringilla ligula est in, Duis ipsum\nLorem Integer lorem dolor vitae pretium\n\n494Rutrum eget ut ipsum eget molestie vel orci ante aliquam finibus massa\n\n495Iaculis. consectetur semper eget elit.\n\n496Adipiscing quis, in ac et dui elit. in ut elit. efficitur Sed sem. aliquam\n\n497Finibus in hendrerit orci, metus\n\n498Sed in\nLorem fringilla ac quis, Fusce nec dui consectetur eget faucibus. faucibus. semper.\n\n499Velit. ante Ut in, Mauris ut libero\n\n500Et pretium quis, in pretium viverra libero Vivamus\n\n501Est pharetra ut sagittis viverra purus ac ut ut Mauris semper\n\n502In tortor dui Duis eget finibus aliquam Sed ipsum efficitur et Ut nunc ante\n\n503Ligula ac sem. ut in volutpat elit. Fusce massa, sit aliquam ante adipiscing lorem purus\n\n504Ante semper. orci, consectetur malesuada hendrerit quis, faucibus. faucibus. ligula rutrum ac ipsum consectetur elit.\n\n505Fames massa, posuere et elit. ipsum in,\n\n506Tortor posuere ipsum volutpat libero\n\n507Elit. est elementum amet, ac tincidunt. sagittis\n\n508Pretium Ut in, ac ante dolor Vivamus nunc velit. finibus aliquam sem. consectetur\n\n509Ligula ac hendrerit Duis viverra\n\n510Aliquam in vel Fusce et\n\n511Adipiscing sem. eget ligula consectetur pretium orci, nunc\n\n512Tortor enim amet, consectetur nec fames pharetra et ante orci ac primis metus Sed in,\n\n513Faucibus. molestie tortor et orci faucibus. metus ac in sagittis\n\n514Orci semper condimentum nec fames massa, posuere vel ante Fusce semper. Sed aliquam molestie\n\n515Molestie ut faucibus. orci sit sagittis massa fames\n\n516Nec volutpat volutpat orci pharetra consectetur ac hendrerit molestie ac felis. in aliquam orci, in,\n\n517In\nLorem Interdum eget Fusce ante pretium Mauris\n\n518Rutrum ut tortor metus velit.\n\n519Orci, libero sem. amet, fringilla ante orci, enim purus ligula molestie molestie consectetur\n\n520Sit pharetra ligula dolor Vivamus fringilla sem.\n\n521Ante molestie viverra ligula in, Duis\n\n522Duis adipiscing iaculis. Integer Ut in, volutpat faucibus. primis massa, Interdum\n\n523Nec elementum et velit. elit. dolor elit. malesuada\n\n524Ante vel condimentum Sed ante malesuada Fusce ligula enim amet,\n\n525Interdum hendrerit nunc dolor ac ante quis, purus neque. in orci, ipsum ante rutrum\n\n526Hendrerit nunc et ac ut faucibus. hendrerit finibus\n\n527Iaculis. elementum elit. hendrerit sem. massa, consectetur in, purus\n\n528Mauris eget ipsum Duis amet, volutpat libero\n\n529Massa ante finibus hendrerit semper. nunc elementum In\n\n530Consectetur ac Integer Duis eget fringilla elit. dolor Mauris efficitur in semper\n\n531Purus semper viverra in in, bibendum, elit. vitae Mauris rutrum adipiscing vel efficitur Interdum et\n\n532Adipiscing Vivamus iaculis. viverra ut sagittis pharetra faucibus. ipsum neque.\n\n533Dolor velit. adipiscing volutpat viverra massa, orci, viverra in Integer tortor Sed primis massa\n\n534Tincidunt. rutrum elit. ut ante in fringilla semper eget et\n\n535Amet, pharetra scelerisque amet, Vivamus sem. neque. massa, in metus amet, efficitur\n\n536Integer adipiscing metus tincidunt. lorem posuere consectetur elementum aliquam orci scelerisque tortor\n\n537Massa, quis, amet, malesuada eget faucibus. ante orci, ac elit. bibendum, felis. tortor felis.\n\n538Felis. tortor vel Mauris viverra efficitur pharetra aliquam elit. iaculis. elit.\n\n539Molestie Integer finibus sit purus vel enim ut\n\n540Eget sagittis rutrum libero enim ante\n\n541Elit. nec metus sit posuere neque. bibendum, semper. Mauris Vivamus ac est ut primis Duis\n\n542Lorem massa, consectetur vitae purus massa, est pretium eget est condimentum hendrerit nunc\n\n543Elit. massa, Sed finibus vitae ipsum\n\n544Vivamus volutpat purus fringilla ac quis,\n\n545Sagittis ante tortor ipsum in, In velit. semper. Fusce massa, felis.\n\n546Sed condimentum quis,\nLorem in enim\n\n547Neque. ante Fusce In nec et Interdum Ut ante bibendum,\n\n548Metus primis iaculis. bibendum, sagittis Ut\n\n549Metus pretium finibus quis, ipsum ut enim ante velit.\nLorem elit. dui efficitur\n\n550Orci condimentum sem. fames Duis pretium\n\n551Tortor nec scelerisque massa, Interdum massa aliquam semper. scelerisque\n\n552In, elit. libero metus posuere Duis ut elit.\n\n553Massa, lorem In ante iaculis. efficitur efficitur tortor ac\n\n554Vivamus metus lorem lorem rutrum molestie Ut ante elit. primis\n\n555Finibus elit. ac vitae semper ac orci hendrerit ante\n\n556Amet, ac scelerisque\nLorem\nLorem neque. Sed amet, Ut ac\n\n557Ante vitae dui enim ac eget\n\n558Fusce orci, ac velit. primis hendrerit eget ac vel Vivamus ut velit. In Sed\n\n559Ligula elementum primis consectetur Duis ac\n\n560Massa, in, Duis volutpat tincidunt.\n\n561Felis. felis. efficitur nunc ut orci et tortor et sem. condimentum sit ipsum\n\n562Et Ut rutrum posuere volutpat ligula ante sagittis malesuada felis. hendrerit\n\n563Semper. massa faucibus. purus Vivamus in, ante malesuada nunc fringilla Vivamus\n\n564Sit fringilla pharetra et Vivamus dolor efficitur volutpat\n\n565Vel consectetur felis. et molestie velit.\n\n566Adipiscing elementum massa, et amet, libero sit sem. efficitur ipsum in sit bibendum, molestie metus\n\n567Viverra orci amet, sagittis dolor iaculis. velit. ut primis aliquam\n\n568Adipiscing molestie elit. semper. ante est efficitur ligula elit. ut ut hendrerit amet,\n\n569In pretium fringilla dolor In amet, pretium In et elementum ante\n\n570Libero massa, et rutrum ac in vel Interdum Mauris consectetur consectetur ac sit Integer\n\n571Scelerisque est ante semper. Duis felis. efficitur ut et\n\n572Fringilla Sed in, quis, pretium ante ut ante est iaculis. in,\n\n573Sed iaculis. lorem Integer pharetra ac sem. massa ante amet, amet, elit.\n\n574Orci velit. et ipsum In elementum ipsum ante\nLorem semper. ante vel\n\n575Et consectetur viverra in fames amet, hendrerit ipsum ante\nLorem ac vitae vel\n\n576In ac ante in nunc orci in posuere iaculis.\n\n577Ac semper. ac consectetur ligula faucibus. sit\n\n578Vitae efficitur ipsum consectetur pharetra elit. velit.\n\n579Velit. enim et dui elit.\n\n580Bibendum, condimentum Integer Mauris Interdum amet, bibendum, nec et malesuada eget ante fringilla pretium velit.\n\n581Fringilla ut sagittis hendrerit in est eget dolor vitae in ipsum ante semper. ac in,\n\n582Fringilla ligula ac orci fringilla in est in tincidunt. ut\n\n583Efficitur Interdum elementum aliquam iaculis. libero massa vel est dui velit. condimentum consectetur ac\n\n584Ipsum finibus fames in sit\n\n585Orci malesuada in velit. orci\n\n586Consectetur ac libero quis, felis. pharetra rutrum viverra in\n\n587Ut fringilla pretium libero efficitur condimentum ante ante\n\n588Interdum velit. aliquam elit. libero Fusce tincidunt. lorem vitae fringilla consectetur in metus\n\n589Ac pretium in est consectetur viverra bibendum, ac fames finibus scelerisque\n\n590Nunc Interdum velit. ut enim amet, elementum ligula elit.\n\n591Fringilla tortor faucibus. sagittis posuere fames massa elit. vitae metus\n\n592Condimentum posuere viverra ac fames\n\n593In efficitur libero sem. In scelerisque ac tincidunt.\n\n594Hendrerit tortor fames ante in orci ac ligula consectetur iaculis.\n\n595Iaculis. Fusce pretium rutrum neque. nec efficitur tortor in\n\n596In scelerisque finibus Fusce dolor efficitur semper\n\n597Aliquam quis, in orci, felis. fringilla semper rutrum consectetur Duis ipsum nunc et\n\n598Malesuada eget ipsum ac volutpat nec ac\n\n599Massa, libero ante elementum fringilla finibus semper. sit orci primis massa\n\n600In ante in eget faucibus. aliquam adipiscing metus\n\n601Ipsum consectetur felis. vitae Integer viverra eget eget ut eget in dolor\n\n602In sem. fringilla nec viverra ac ut Vivamus dolor semper in, in semper Vivamus\n\n603Hendrerit massa ac nunc velit.\n\n604Pretium tortor eget ac enim\n\n605Ipsum malesuada Integer finibus\nLorem tortor in Fusce in semper. est finibus\n\n606Fringilla semper ante iaculis. bibendum, ante in malesuada\n\n607Vivamus in vel fringilla scelerisque rutrum lorem tortor ante molestie condimentum et\nLorem\n\n608Orci in lorem elit. orci eget vitae condimentum quis, metus\n\n609Purus Ut Mauris metus ante dui Interdum\n\n610Semper. malesuada efficitur fames purus ut ac nec posuere et nec\n\n611Dolor metus semper. semper consectetur Sed\n\n612Velit. semper. Mauris eget amet, ac scelerisque Integer Ut amet, libero ipsum aliquam\n\n613Neque. Vivamus rutrum ac orci, ante orci semper. semper. felis. ante neque. pretium ipsum\n\n614Vitae orci, neque. posuere ac est efficitur massa Duis in\n\n615Mauris Vivamus purus amet, elit. purus ante purus\n\n616\nLorem orci metus vitae nunc semper. tortor elit.\n\n617Enim ligula primis et iaculis. ipsum orci, ut tortor Integer Ut\n\n618Hendrerit ac ante ut ac ac ac metus\n\n619Metus Vivamus pharetra faucibus. tortor consectetur semper. sagittis ligula sit fringilla consectetur\n\n620In ipsum ac eget elementum et Integer elementum in in\n\n621Integer efficitur sit ante efficitur\n\n622Metus volutpat lorem consectetur pretium et est consectetur Interdum ante eget faucibus. enim\n\n623Elit. ante adipiscing In ut orci ipsum Ut Mauris ligula sit\n\n624Vivamus pretium Duis massa condimentum hendrerit viverra ac dolor viverra\n\n625Sed bibendum, ligula ac iaculis. consectetur metus ac dolor ipsum semper\n\n626Ac faucibus. ipsum Fusce ante posuere rutrum\n\n627Ligula fringilla est elit. ac fames\n\n628Sem. iaculis. In metus aliquam finibus finibus viverra tortor In\n\n629Primis libero Vivamus eget eget massa Duis\n\n630Tortor Vivamus eget finibus iaculis. scelerisque Mauris in, Sed hendrerit rutrum\n\n631In molestie\nLorem nec amet, Mauris consectetur ante vitae aliquam iaculis. Duis fringilla orci rutrum\n\n632Velit. sem. lorem ac massa libero fames molestie est ut orci ante purus\n\n633Ut in, adipiscing efficitur in Integer metus iaculis. fringilla sit\n\n634Libero efficitur posuere ligula pretium rutrum ut dolor ipsum iaculis. velit. libero eget tortor sit\n\n635Viverra purus ut vel semper aliquam eget rutrum viverra ac condimentum\n\n636Faucibus. semper elit. velit. Integer nunc in, nec hendrerit bibendum, amet, sem. nunc\n\n637Orci, felis. ac condimentum aliquam ut ac aliquam iaculis. Integer purus finibus\n\n638Bibendum, ipsum ante\nLorem est nec in, primis ut Interdum orci, aliquam semper. et sit\n\n639Dui Interdum molestie ac Ut est tortor pretium consectetur sit neque. semper. vel posuere\n\n640In vel fames pharetra iaculis. libero orci et vel amet,\n\n641Nunc posuere scelerisque in, ante\n\n642Ligula est fames tincidunt. bibendum,\n\n643Vivamus malesuada aliquam primis pretium bibendum,\n\n644Quis, Mauris rutrum ipsum viverra molestie primis\n\n645Amet, elementum velit. In rutrum ante pharetra sem. velit. ac elementum\n\n646Ipsum ante Vivamus eget dolor tortor Sed Duis\nLorem ante semper massa, elit.\n\n647Rutrum finibus et molestie dui condimentum enim metus neque. lorem ante pharetra\n\n648Tortor bibendum, aliquam primis consectetur dui finibus est Sed amet, in,\n\n649Libero ut Duis ac metus consectetur consectetur in est aliquam elit. orci,\n\n650Semper rutrum iaculis. neque. ligula ut malesuada pharetra vitae enim et in\n\n651Efficitur vitae in finibus pharetra fringilla faucibus. massa ut hendrerit\n\n652Iaculis. tortor consectetur Duis tincidunt. consectetur ante posuere amet,\n\n653Elit. velit. ac quis, felis. malesuada ante rutrum scelerisque\n\n654Vivamus Duis ac dolor hendrerit et\n\n655Aliquam primis volutpat tortor posuere orci tincidunt. eget massa Vivamus felis.\nLorem ac elit. Vivamus\n\n656Consectetur scelerisque ante ac hendrerit in ante\n\n657Ligula ac Mauris semper. aliquam metus orci, ut ante ipsum ac efficitur massa sagittis\n\n658Purus tincidunt. sem. efficitur et primis ante sagittis tincidunt. sit ac pharetra hendrerit in\n\n659Lorem sem. consectetur ac et Interdum dui\n\n660Molestie elit. Vivamus ligula est vel\n\n661Hendrerit massa efficitur elit. rutrum condimentum ipsum nec\n\n662Aliquam in faucibus. et eget massa, scelerisque\nLorem ligula ligula massa,\n\n663Lorem efficitur semper. faucibus. ac fames Mauris orci, enim viverra ut\n\n664Duis tincidunt. scelerisque nec elit. nunc faucibus. ligula sit sem. faucibus. ac In\n\n665Duis fringilla scelerisque volutpat ante nunc dui aliquam fringilla ac quis, purus\n\n666Ipsum efficitur quis, rutrum ipsum in In\n\n667Et nec metus scelerisque eget ac ac hendrerit massa massa, nunc Mauris enim\n\n668Enim ante volutpat pharetra pretium massa finibus efficitur\n\n669Hendrerit ut finibus in ante\n\n670Sit dolor Integer viverra tortor est ligula metus ligula pretium sem. volutpat\n\n671Sem. Sed tortor hendrerit nunc Interdum ac ipsum\n\n672Posuere elit. dui Integer massa elit. dui ante Vivamus sagittis faucibus. in neque.\n\n673In, consectetur efficitur metus fames ac\n\n674Scelerisque faucibus. scelerisque iaculis. sit Duis tortor ante ut primis ut ipsum consectetur sagittis\n\n675Hendrerit elementum ac aliquam ipsum in, fringilla orci, elementum\n\n676Velit. viverra et ut fringilla et vitae amet, Vivamus Fusce Integer\n\n677Vitae elit. ipsum eget fringilla Ut ac Fusce metus et condimentum massa elit.\n\n678Fames bibendum, fames lorem in quis, primis orci, dui ante ac enim\n\n679Posuere neque. Interdum massa, purus est adipiscing ante viverra Integer neque.\n\n680Fringilla In dui semper. ac scelerisque eget massa amet, consectetur libero primis rutrum\n\n681Malesuada ac purus elit. est In Sed sit\n\n682Sem. adipiscing ante efficitur in est faucibus. vitae tortor libero elementum pretium rutrum elementum consectetur\n\n683Metus et ligula consectetur orci, sagittis\n\n684Est tincidunt. ac molestie Duis eget fames orci\n\n685Fusce pharetra elit. enim efficitur malesuada sit in pharetra posuere elit. Integer felis. Vivamus Vivamus\n\n686Posuere adipiscing in ipsum fames sem. viverra\nLorem primis\n\n687Ut scelerisque dolor malesuada eget efficitur fames massa adipiscing tincidunt. posuere pretium et eget\n\n688Interdum finibus purus primis scelerisque elementum condimentum aliquam metus sit elementum\n\n689Massa Duis finibus ut elementum dolor hendrerit Integer efficitur scelerisque ac Vivamus fames eget elit.\n\n690Faucibus. lorem condimentum ac condimentum\n\n691Quis, tortor ante in, ac ac adipiscing in\n\n692Pretium in Integer libero Interdum enim Fusce rutrum in velit. consectetur Integer finibus\n\n693Iaculis. ante ligula eget neque. purus\n\n694Bibendum, lorem dui vel Interdum Sed amet, ante efficitur rutrum neque. eget elementum\n\n695\nLorem eget orci, ut consectetur primis efficitur viverra Fusce ac semper malesuada massa volutpat\n\n696Ac adipiscing felis. nunc massa, posuere consectetur Vivamus lorem bibendum, in libero\nLorem amet,\n\n697Vitae fames aliquam massa, molestie condimentum ut volutpat faucibus. in consectetur\n\n698Velit. pretium pretium in libero ac Mauris orci tortor vitae tincidunt. posuere\n\n699Finibus fames et malesuada amet, sit\nLorem semper. nec faucibus. ac orci fringilla pharetra\n\n700Ut hendrerit pretium in hendrerit enim ut consectetur nec est\n\n701Lorem primis enim pretium velit. enim dui ante ac ante Interdum enim adipiscing\nLorem\n\n702Tortor dolor adipiscing semper. Ut adipiscing ac\n\n703Ac ipsum Integer viverra orci\n\n704Fames dolor viverra efficitur elementum ipsum pharetra fames nec ut iaculis. Integer\n\n705Pharetra metus ipsum fames velit.\n\n706Elit. Sed ut et enim sagittis massa,\n\n707Sem. ac iaculis. efficitur in orci, primis Duis enim in, Fusce Duis\n\n708Libero adipiscing ut dui in efficitur et Vivamus et ante\n\n709Ac eget volutpat eget fames malesuada semper. Ut et finibus vel hendrerit Interdum In\n\n710Tortor in finibus molestie elit. rutrum\n\n711Integer velit. Sed viverra semper ante elit.\n\n712Ut ac ut ac in consectetur vel In tincidunt. consectetur ipsum ante\n\n713Ut ut scelerisque dui aliquam dui fames semper.\n\n714Ac eget posuere ut et hendrerit sit tincidunt.\n\n715Iaculis. est felis. molestie dolor dui rutrum sem. et ante velit. efficitur massa\n\n716Duis finibus enim efficitur semper tincidunt. nec ut in adipiscing\n\n717Ante semper. ac sit quis,\n\n718Vel Sed elit. ante sit amet, dolor sit Integer orci ac molestie efficitur eget sem.\n\n719In adipiscing et Fusce consectetur ipsum eget ac\n\n720Molestie faucibus. vitae ipsum posuere felis.\n\n721Duis elit. primis et elit. massa, dui\n\n722Quis, neque. massa, ac tortor eget purus elit. in fringilla\n\n723Massa, est malesuada tincidunt. In primis massa elit. ac neque.\n\n724In enim dolor tortor rutrum ac in orci, In Mauris in\n\n725Nec hendrerit fringilla ac Integer elit. in, in libero ante pharetra consectetur nec\n\n726Fusce orci, ante ac efficitur est neque. posuere iaculis. libero in quis,\n\n727Fusce Ut condimentum sem. scelerisque amet,\n\n728Volutpat bibendum, massa, Fusce malesuada finibus primis\n\n729Quis, consectetur Vivamus consectetur eget ante ligula iaculis. posuere massa eget\n\n730Ac volutpat dolor purus orci, est neque. efficitur ac orci\n\n731Fusce ante purus et purus finibus volutpat consectetur eget quis, in elit. tincidunt. ac\n\n732Ipsum velit. hendrerit in massa in dui ac\nLorem aliquam vel ut\n\n733Faucibus. rutrum malesuada pharetra ipsum massa\n\n734Massa, ac ipsum rutrum Interdum lorem purus Fusce massa, felis. ut aliquam scelerisque semper\n\n735Libero elit. eget nec elementum in, orci Sed massa nec\n\n736Ante semper. dolor molestie aliquam Integer\n\n737Condimentum purus elementum In Sed nunc In elit.\n\n738Adipiscing malesuada ac semper. tincidunt. in sit rutrum dui molestie\n\n739Sed orci, volutpat ut ligula fringilla\n\n740Amet, felis. semper consectetur efficitur neque.\n\n741Ac\nLorem felis. amet, adipiscing eget eget\nLorem hendrerit\n\n742Efficitur dolor sit eget ut volutpat et finibus bibendum, nec eget et viverra in dui\n\n743Dolor neque. volutpat rutrum Vivamus et ac nec nunc fringilla orci vel orci,\n\n744Dui in orci, consectetur et libero scelerisque finibus et eget\n\n745Nec enim ut efficitur sit elit. ac semper vitae ipsum molestie\n\n746Ac rutrum Mauris elit. ipsum massa, fames scelerisque velit.\n\n747Ante ac pharetra elit. scelerisque consectetur aliquam adipiscing ante velit. vel ac ut\n\n748Efficitur pharetra nunc dolor efficitur sit Mauris finibus ante faucibus. fames\n\n749Sit posuere tortor Mauris elit. tincidunt. ipsum volutpat rutrum ac Fusce eget velit. et\n\n750Vitae pretium hendrerit ac hendrerit velit. dui ut eget semper Ut rutrum orci, nec\n\n751Nunc sem. ipsum nec nec eget neque. est ac faucibus. pharetra fringilla\n\n752Vel consectetur rutrum ante pharetra eget Vivamus ac eget in, hendrerit dolor iaculis.\n\n753Fringilla Interdum malesuada ligula Fusce iaculis.\n\n754Faucibus. hendrerit volutpat viverra dolor purus\n\n755Bibendum, orci condimentum fringilla molestie pharetra ante ante ac orci,\n\n756Ligula ligula Interdum ante massa, fringilla semper est libero finibus metus rutrum metus pharetra velit.\n\n757Ligula adipiscing rutrum sagittis ante ipsum sem.\n\n758Quis, Vivamus eget sagittis\nLorem sagittis malesuada\n\n759Et dui in ipsum faucibus. rutrum velit. in adipiscing ut ut bibendum, finibus\n\n760Vivamus elementum scelerisque ac Duis fames Integer Mauris Fusce rutrum aliquam finibus\n\n761Finibus condimentum nec sagittis lorem amet, ipsum ante viverra Sed posuere\n\n762Primis ac semper consectetur adipiscing\n\n763Quis, eget posuere est Duis tortor iaculis. sagittis primis consectetur consectetur velit. semper\n\n764Interdum tincidunt. in, ut purus consectetur ante\n\n765Posuere et consectetur primis in, finibus sit Sed ac massa tincidunt.\n\n766Orci amet, efficitur Vivamus massa, nunc faucibus. viverra ac libero vitae quis, metus malesuada rutrum\n\n767Orci, neque. ac eget felis. et ipsum pharetra elit. finibus Mauris orci,\n\n768Ac elit. massa pretium efficitur ante purus est sit consectetur semper. sagittis\n\n769Sit In fringilla ipsum ipsum in, volutpat neque. in, pretium ipsum Vivamus\n\n770Rutrum tortor consectetur ante aliquam efficitur ac tortor\n\n771In, eget\nLorem quis, in\n\n772Fames enim ut rutrum eget quis, elementum ac orci bibendum, Ut massa Fusce fringilla In\n\n773Ac elit. nunc adipiscing dui scelerisque eget\n\n774Ante Vivamus metus efficitur neque. sem. ante orci\n\n775Sit ut adipiscing pharetra elementum in, nec Ut orci In rutrum quis, semper ipsum\n\n776Orci faucibus. neque. Ut vitae ante efficitur pharetra pretium elit.\n\n777Aliquam ac sit consectetur fames semper scelerisque ut velit. ante quis,\n\n778Efficitur ante eget ante ac ante fringilla nunc efficitur enim fringilla\n\n779Nunc ipsum lorem et velit. consectetur pretium\nLorem massa, velit. est Integer Mauris\n\n780In Fusce Vivamus\nLorem lorem et ipsum orci Sed\n\n781Ipsum ut ligula consectetur orci finibus velit. lorem finibus libero Mauris\n\n782Efficitur rutrum consectetur malesuada felis. amet, felis. massa,\n\n783Eget condimentum ante ac tincidunt. molestie semper ac purus ante\n\n784Efficitur bibendum, Mauris hendrerit dolor orci iaculis. metus in, metus dolor\n\n785Et Interdum Duis elementum Duis\n\n786Quis, ac malesuada orci sagittis elementum est elit. molestie molestie ut vel elit.\n\n787Eget eget Interdum elit. ac Mauris Fusce amet,\n\n788Vitae dui quis, metus hendrerit ipsum dui ante nec efficitur Vivamus eget metus velit. in\n\n789In, Ut Interdum condimentum eget semper.\n\n790Sed ac libero fames Mauris finibus\n\n791Sagittis tortor elementum efficitur eget ligula velit. bibendum, faucibus.\n\n792Scelerisque condimentum ac rutrum neque. volutpat eget metus ante\n\n793Primis ante purus eget ipsum in bibendum, molestie ac velit.\n\n794Ante adipiscing ligula ac viverra fringilla rutrum elementum consectetur ante eget elit. ac nec\n\n795Hendrerit Mauris velit. libero dui ante primis elementum sagittis Sed molestie malesuada\n\n796Fames ante ac ut aliquam semper eget in\n\n797Molestie in sagittis Ut eget elit. nunc efficitur semper orci, purus velit. eget tincidunt. Fusce\n\n798Quis, Fusce ut et viverra Fusce\n\n799Posuere adipiscing pharetra posuere massa\n\n800Tincidunt. ac orci, ante Vivamus viverra velit. Ut fringilla Interdum viverra ac in purus\n\n801Posuere vel pharetra Interdum ante iaculis.\n\n802Ac est in, metus primis massa, massa elementum ac adipiscing elementum purus viverra\n\n803Sagittis Sed molestie ut massa, nunc in orci vitae ante\n\n804Mauris sem. ac eget Mauris Mauris vel vitae elementum Fusce molestie ligula\n\n805Fames malesuada est Fusce fames amet,\nLorem\n\n806Posuere et fringilla dolor iaculis. ante posuere tincidunt. ac bibendum,\n\n807Ac hendrerit enim ac\nLorem viverra dolor consectetur condimentum sit sit primis\n\n808Tortor rutrum in vel velit. ac tortor\n\n809Semper. dolor neque. Duis libero in, iaculis. felis. velit. consectetur eget in, velit.\n\n810Duis rutrum velit. orci vel ut hendrerit dui aliquam tincidunt. vitae in adipiscing felis.\n\n811Purus in, ac est ipsum libero ac fames finibus est sagittis In\n\n812Nunc Integer In ipsum nec massa efficitur sem. efficitur ut volutpat condimentum fringilla Sed\n\n813Orci molestie elit. elit. enim\n\n814Ligula molestie tortor fringilla efficitur sem. aliquam vitae pretium tincidunt. fringilla\n\n815Et elit. eget sit molestie vel massa enim efficitur dui\n\n816Orci ac molestie faucibus. tincidunt. Mauris massa faucibus. aliquam\n\n817Efficitur sagittis vitae massa, velit. amet, viverra Mauris est primis elit. semper.\nLorem molestie in\n\n818Ut primis pretium libero velit. ut\n\n819Neque. viverra in semper eget\n\n820Viverra libero elit. adipiscing consectetur\n\n821Hendrerit\nLorem sagittis Mauris consectetur malesuada massa Mauris ac consectetur nunc efficitur primis\n\n822Eget ipsum scelerisque In Mauris eget rutrum massa,\n\n823Ligula fames nunc est elit. quis, finibus Sed ipsum\n\n824Felis. malesuada ac sit pharetra massa, felis.\n\n825Ut libero elit. elit. ligula efficitur fames orci bibendum, eget pretium\n\n826Sit sem. bibendum, Fusce\nLorem rutrum ac pharetra enim\n\n827Aliquam ac orci ut in ante\n\n828Ac aliquam vitae lorem ac hendrerit consectetur ante ligula orci ligula primis\n\n829Faucibus. aliquam massa elementum In libero adipiscing eget enim nec purus orci,\n\n830Ante elementum pretium volutpat iaculis. Mauris viverra Vivamus consectetur eget metus hendrerit in\n\n831Consectetur scelerisque ante ante ante pharetra\n\n832Sagittis Fusce velit. pretium ligula sagittis efficitur libero metus massa, posuere faucibus. velit.\n\n833Ac elementum aliquam orci, est elementum eget faucibus. quis, Interdum neque. amet, ipsum orci,\n\n834Ante viverra condimentum enim orci, ac efficitur tincidunt. iaculis. ac pretium finibus purus viverra\n\n835Ac\nLorem metus orci elementum elementum sit\n\n836Bibendum, amet, eget ac felis. hendrerit Sed Sed Fusce viverra eget tortor elementum velit. pharetra\n\n837Orci efficitur consectetur ut efficitur in massa, ligula et pharetra Interdum Ut pharetra efficitur\n\n838Dolor scelerisque Mauris massa tincidunt. condimentum fames iaculis. efficitur in semper\n\n839Orci, lorem sem. neque. Fusce Mauris\n\n840Bibendum, ligula massa, Sed vitae ligula in, molestie faucibus. nunc finibus viverra\n\n841Adipiscing Sed ligula et efficitur hendrerit ac ac bibendum, libero sagittis ante Sed et\n\n842Massa est rutrum in, hendrerit massa, rutrum rutrum fringilla fringilla ut Interdum Sed metus Sed\n\n843Malesuada vitae pretium Integer ut hendrerit felis. vitae et velit.\n\n844Finibus in Vivamus adipiscing malesuada felis.\n\n845Vel volutpat faucibus. molestie\nLorem adipiscing ligula elit. scelerisque iaculis.\n\n846Adipiscing elementum ut est Vivamus vel enim massa\n\n847Sem. neque. ante posuere ligula scelerisque in,\n\n848Pharetra sem. pharetra adipiscing ante elit. vitae faucibus. rutrum adipiscing et ut\n\n849Velit. Mauris amet, massa fames et\n\n850Orci, et semper. ut bibendum,\n\n851Vel sem. finibus ante ligula ut quis, ante malesuada hendrerit\n\n852In ac purus malesuada ut dui semper. ac\n\n853Sit elit. tincidunt. hendrerit in ante volutpat elementum ligula pharetra lorem purus lorem\n\n854Efficitur pharetra ante tincidunt. condimentum neque.\n\n855Sed Interdum ut et\nLorem Duis semper primis vel nunc ante nunc consectetur finibus\n\n856Rutrum felis. libero eget iaculis. condimentum lorem\n\n857In Ut condimentum elit. nunc molestie hendrerit fringilla\n\n858Ut sit dolor condimentum Vivamus malesuada\n\n859Est velit. adipiscing sagittis semper libero\n\n860Ipsum pharetra primis ut ante dui\n\n861Ligula libero nunc vitae fringilla\n\n862Vivamus ante Mauris eget\nLorem ante ac dolor dolor sagittis massa\n\n863Bibendum, Sed orci semper. elit. vel amet, purus orci\n\n864Velit. adipiscing quis, orci efficitur sagittis efficitur efficitur Integer ante faucibus. elit.\n\n865Eget pretium consectetur ut ante ac massa, molestie amet, hendrerit condimentum\n\n866Vel ac elit. ut nec scelerisque ac orci, et\n\n867Velit. nunc felis. in massa fringilla tincidunt. malesuada pretium\n\n868Efficitur enim scelerisque nec condimentum ipsum amet,\n\n869Ut dui vel ante hendrerit amet, in sagittis fames molestie fringilla ac Mauris\n\n870Primis fringilla condimentum ut ante et\n\n871Sem. vel vel in elit. in\nLorem\n\n872Elementum massa in semper quis, metus in semper vel massa massa, volutpat\n\n873Iaculis. orci, In tincidunt. eget tincidunt. vel Ut ac tortor\n\n874Sed Integer massa, ipsum bibendum, fringilla\n\n875Et sagittis\nLorem Sed finibus tortor elementum malesuada quis, Sed Interdum fringilla in quis, Fusce\n\n876Ipsum fringilla semper ante fringilla semper.\nLorem elementum primis vitae\n\n877Volutpat adipiscing dolor hendrerit nunc scelerisque sit volutpat elit. in ac massa, ipsum ipsum\n\n878Tincidunt. ante massa volutpat volutpat iaculis. lorem felis. nunc ipsum volutpat purus\n\n879Bibendum, Vivamus nunc viverra ut purus pharetra velit. rutrum consectetur\n\n880Hendrerit nunc velit. nunc Vivamus et vitae Integer condimentum\n\n881Sed tortor Fusce Fusce Integer vel ante\nLorem et volutpat massa Duis pharetra primis\n\n882Sit faucibus. massa ut elementum vel Mauris finibus\n\n883Eget Integer libero Duis dolor est\nLorem sit faucibus. ante et est\nLorem orci\n\n884Dolor hendrerit Duis Fusce dolor Integer pretium rutrum in,\n\n885Sed ligula primis finibus dolor\n\n886Ut metus finibus neque. tortor ac consectetur metus consectetur quis, Ut rutrum viverra molestie\n\n887Est efficitur libero est ipsum dolor et massa, ac ante ac pretium Duis ac iaculis.\n\n888Et in Sed pretium metus ut enim scelerisque In vel\n\n889Massa ipsum Interdum in Sed ante in massa, enim iaculis. viverra tincidunt. fringilla semper.\n\n890Posuere pretium purus felis. sit scelerisque et condimentum faucibus. velit. in, scelerisque\n\n891Ligula in nec ac molestie fames massa ante\n\n892In ac tortor rutrum ante Integer velit. felis. in condimentum\n\n893Bibendum, in, Sed molestie ipsum\n\n894Viverra vel in\nLorem malesuada efficitur primis sagittis ac ipsum fames in ac ac finibus\n\n895Massa ligula Duis nunc condimentum In eget primis vel purus ac\n\n896Fusce orci consectetur amet, sagittis orci, tincidunt. semper ante efficitur In\n\n897Dui eget viverra scelerisque vel fames nunc semper. hendrerit eget enim semper fringilla\n\n898Dui ante viverra faucibus. Integer ligula ac faucibus. ante\n\n899In faucibus. ante ante adipiscing rutrum semper In in\n\n900Ante adipiscing pretium sit Duis Interdum pretium sem. iaculis.\n\n901Massa, pretium rutrum neque. consectetur est Mauris massa pharetra elit.\n\n902Hendrerit dolor consectetur consectetur ac tincidunt. eget dolor\n\n903Bibendum, ac ut dui Sed in, libero massa fames et aliquam eget\n\n904Fames finibus adipiscing hendrerit faucibus. pretium\n\n905Sem. est molestie ante Integer orci, ante sagittis\n\n906Ut ipsum Duis scelerisque ac adipiscing semper tortor Vivamus orci ipsum massa sem. ac\n\n907Volutpat hendrerit consectetur Sed Integer vitae orci ut posuere eget ut\n\n908Primis Ut scelerisque adipiscing scelerisque et elementum in dui quis, ipsum semper. ipsum Ut\n\n909Velit.\nLorem ante Interdum sem. in in felis. tincidunt.\n\n910Duis Ut sit volutpat viverra condimentum Ut Ut primis sem. est condimentum volutpat eget aliquam\n\n911Eget semper. ac ante ut ante ut orci, dolor ipsum enim\n\n912Fringilla metus ligula ac rutrum est ligula neque. consectetur\n\n913Ac condimentum ut quis, ut sit consectetur felis. sem. bibendum, nunc in\n\n914Fusce faucibus. quis, ante vel ante elit. sit massa Fusce Ut iaculis. massa, finibus metus\n\n915Dolor condimentum massa in pharetra Ut efficitur\n\n916Iaculis. et vel massa adipiscing\n\n917Ligula massa ac Fusce dui semper\n\n918Elementum ut purus efficitur fringilla\n\n919Interdum pretium purus elementum vel felis.\n\n920Nec orci, efficitur vitae massa Vivamus Fusce vel rutrum ac ut sagittis\n\n921Primis ligula condimentum enim dui in\n\n922Ac pharetra ut\nLorem semper. metus vitae purus ac amet, faucibus. finibus Ut ac dolor\n\n923Quis, volutpat viverra metus ac eget Integer ipsum volutpat Duis molestie et in ac hendrerit\n\n924Scelerisque Sed vitae ut amet, rutrum primis condimentum dui bibendum, in\n\n925Finibus in Vivamus iaculis. libero elit. ante aliquam in tortor metus libero purus efficitur\n\n926Amet, elit. tincidunt. ipsum hendrerit pretium condimentum scelerisque neque. nec bibendum, Interdum rutrum\n\n927Sagittis est ipsum ac lorem in,\n\n928Pharetra dui massa, sit primis posuere in ipsum efficitur pretium primis ac in Vivamus condimentum\n\n929Orci, ac semper molestie viverra Vivamus eget dolor ante\n\n930Nunc est purus orci viverra elit. Sed in ante pharetra eget dui\n\n931In, nec sem. neque. consectetur consectetur eget et ut faucibus. in ante efficitur purus\n\n932Bibendum, consectetur scelerisque hendrerit ante orci,\n\n933Fames lorem bibendum, est condimentum nec\n\n934Sed Integer sem. ante ut est eget orci consectetur ac fames vel\n\n935Malesuada massa Duis pharetra ac Mauris metus elementum rutrum faucibus. libero neque. nec primis\n\n936In, semper. faucibus. primis bibendum,\n\n937Primis enim Mauris ut lorem sit dolor consectetur quis, ut sagittis\n\n938Velit. iaculis. efficitur ac condimentum malesuada vel ante condimentum Vivamus neque.\n\n939Vel viverra enim sit hendrerit amet, posuere ac eget elit. scelerisque vel amet,\n\n940Viverra Ut orci orci, Vivamus finibus in, ligula rutrum condimentum Interdum eget\n\n941Tincidunt. posuere massa, pretium lorem In est iaculis. purus ac rutrum\n\n942Elit. et massa, massa, Fusce\n\n943Lorem purus bibendum, et efficitur quis, orci, Integer elit. ipsum\n\n944Neque. Integer sagittis in metus adipiscing\nLorem\n\n945Duis vitae sem. semper. rutrum Mauris Ut adipiscing vitae\n\n946In purus ante consectetur sem. lorem\n\n947In lorem vitae ut In pretium\n\n948Fusce in orci ipsum purus fames pretium tincidunt.\n\n949Fusce condimentum semper semper. est malesuada ac\n\n950Fusce primis Mauris pharetra rutrum rutrum ante ac ut finibus neque. dui\n\n951Viverra aliquam scelerisque hendrerit orci in rutrum viverra in in tortor in\n\n952Bibendum, et ac consectetur efficitur\n\n953Quis, libero lorem Vivamus ut ligula massa,\n\n954In In scelerisque orci posuere Duis ante vitae hendrerit in\n\n955Lorem consectetur consectetur molestie metus adipiscing sagittis felis. consectetur Integer ante\n\n956Faucibus. ac sem. faucibus. posuere Sed ante\n\n957Lorem Interdum iaculis. consectetur molestie sagittis Interdum ante purus malesuada ac ac hendrerit hendrerit condimentum\n\n958Ut semper orci, orci ut ac semper. consectetur consectetur Mauris\n\n959\nLorem ipsum orci ac bibendum, scelerisque bibendum, quis, libero bibendum, nec et dolor\n\n960Ac massa, tortor quis, elit. massa, in amet, est volutpat\n\n961Consectetur ac ac elit. neque. pretium vel ac metus dolor semper.\n\n962Orci, ipsum in, aliquam neque. est viverra est\n\n963Ac ac massa massa, ac\n\n964Iaculis. finibus aliquam velit. ante\n\n965Massa, ipsum molestie est in Fusce efficitur fames velit. nunc\n\n966Integer lorem efficitur condimentum faucibus. ligula dui scelerisque ac Mauris pretium massa aliquam\n\n967Neque. elit. velit. lorem viverra ut\n\n968Ligula vel et volutpat elit. adipiscing in finibus posuere metus Interdum rutrum\n\n969Ac dui primis et tincidunt. vitae\n\n970Orci, In ante Duis elementum dolor malesuada fames ipsum\n\n971Sem. ipsum ante in Sed in elit.\n\n972Semper. eget iaculis. ut et\n\n973Sem. sagittis nec In pharetra efficitur ante Vivamus nunc aliquam felis. Sed faucibus. ac Mauris\n\n974Orci, faucibus. massa est condimentum In efficitur sagittis ac elit. velit. metus purus\n\n975Amet, ac vel scelerisque consectetur Integer viverra faucibus.\n\n976Massa, fames in est in quis, vel dolor pretium semper\n\n977Ligula et Duis in Integer fames ac Duis volutpat et ac ligula\n\n978Elit. ipsum ac pretium volutpat\n\n979Ac hendrerit sem. quis, tortor enim in hendrerit scelerisque primis quis, neque.\n\n980Ante posuere metus semper vel metus faucibus. orci, Sed elementum\n\n981Et efficitur volutpat orci consectetur sagittis In vitae elit. dolor\n\n982Efficitur ante efficitur consectetur Integer eget orci\n\n983Ac sagittis amet, ac aliquam nunc primis Interdum neque. vitae fringilla aliquam eget\n\n984Adipiscing orci, In posuere et aliquam Ut tortor orci iaculis. in scelerisque\n\n985Vivamus ipsum sem. ut faucibus. quis, elit. sagittis consectetur lorem adipiscing pharetra felis. lorem ante\n\n986Finibus ante metus\nLorem elit. adipiscing pharetra scelerisque quis,\n\n987Tincidunt. felis. vitae tincidunt. consectetur hendrerit in in ipsum amet, volutpat\n\n988Tincidunt. in ante ac amet, vitae efficitur posuere sem. scelerisque condimentum\n\n989Vitae fames dui consectetur ante amet, hendrerit\n\n990Molestie in viverra fames ante ante lorem viverra Interdum\n\n991Elementum in quis, primis scelerisque sagittis\n\n992Ut metus Interdum efficitur orci,\n\n993Faucibus. amet, In neque. velit. ante enim scelerisque primis malesuada elit.\n\n994Elementum nec ligula primis massa, In\n\n995Semper Vivamus aliquam efficitur condimentum consectetur\n\n996Fusce Interdum efficitur tincidunt. orci elit. et rutrum in,\n\n997Sit tortor sit hendrerit vitae fames nec elementum nunc malesuada aliquam\n\n998Eget massa in in tincidunt. Sed molestie nunc Ut metus ipsum\n\n999Metus vel condimentum Vivamus neque. quis, ligula in rutrum neque. iaculis. malesuada Mauris\n\n1000Et Fusce ac elit. est est consectetur enim Interdum felis.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |",
+    "lead": "Dropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.",
+    "summary": "Dropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.",
+    "searchText": "Dropdowns\nDropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.\nDropdowns\nButtonDropdown\nNormal Button\nnoCaret\nDropup\nSplitButton\n\nSplitButton\n\nLarge button\nDefault button\nSmall button\nMini button\n\nDropdown with max-height\nDropdown with dopup\nDropdown with pullRight\nControlled Dropdown\n\nDropdown variantsText dropdown\n\nCustom dropdowns for filter tagsTag dropdown\n\nTag small dropdown\n\nCustom dropdowns for labelsActive\n\nActive\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nSimpleButtonDropdown\nWrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.\nSingleButtonDropdown\nWrapper component for ButtonDropdown, kept for backwards compatibility.\nSingleButtonDropdown\nSplitButtonDropdown\nWrapper component for ButtonDropdown where prop \"splitButton\" is set automatically.\nSplitButton\n\nSplitButton ButtonDropdown\nDropdownSubmenu\nNormal ButtonDropdown\nnoCaret ButtonDropdown\nSplitButton ButtonDropdown\n\nNormal ButtonDropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | string \\| React.ReactNode | '' | Displayed button title. |\n| items | MenuItem[] | — | Items to display in the dropdown sub menu. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables every entry on the title list item. |\n| className | string | — | Additional classes to be set on the dropdown-submenu element. |\nCustom Dropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nDropdown using React Portal\nA typical use case for ButtonDropdown using portal is when a parent component has an overflow: hidden or z-index style, but you need the dropdown to visually “break out” of its container.\nNormal Button\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nLarge amount of dropdowns in a list or table\nIDContentAction\n\n1Dui iaculis. iaculis. nunc iaculis.\n\n2Nec Ut consectetur faucibus. in, efficitur elit. fames posuere libero sem. elementum\n\n3Et scelerisque ac consectetur elementum massa, neque. tortor est consectetur quis, ipsum Ut sagittis\n\n4Amet, semper Ut vitae primis in, vitae Vivamus\n\n5Vel massa condimentum orci, malesuada quis, elit. pharetra primis sem. orci, orci semper. sit condimentum\n\n6Nunc nec vitae in viverra posuere Ut condimentum ac ac ac eget rutrum eget semper\n\n7Est faucibus. libero ut consectetur\n\n8Scelerisque ante molestie fringilla ac\n\n9Metus ante in, posuere et hendrerit faucibus. ac nec vel Integer Vivamus et\n\n10Consectetur lorem quis, ut ligula ut bibendum, ante ut nunc sagittis in molestie et fringilla\n\n11Ac faucibus. volutpat vel condimentum rutrum Ut nec felis. efficitur\n\n12In velit. libero Ut Duis in ipsum\n\n13Elementum orci ligula est primis et eget dui ante sagittis vitae Duis\n\n14Ante elementum ante dui primis ligula nunc eget sem. libero consectetur tortor ante et\n\n15In posuere molestie ante semper Fusce finibus ac ac ante bibendum, condimentum\n\n16Purus in eget posuere ipsum enim purus ac velit.\n\n17In ante posuere ante dui efficitur enim tincidunt. adipiscing tortor consectetur consectetur et\n\n18Lorem velit. nunc ipsum finibus bibendum,\n\n19Lorem tincidunt. tincidunt. sit amet, tortor vel et Fusce Sed ut volutpat\n\n20Ipsum condimentum ante in in efficitur\nLorem volutpat scelerisque felis. scelerisque dui\n\n21Scelerisque semper. aliquam purus felis. Interdum\n\n22Bibendum, Sed Interdum in, viverra\n\n23Et condimentum scelerisque Ut adipiscing metus semper amet, efficitur faucibus.\n\n24Ac et in faucibus. adipiscing bibendum, ante et Duis sem. In ac ante dui velit.\n\n25Ut consectetur iaculis. Ut consectetur molestie\n\n26Condimentum ante neque. ut vel In efficitur\n\n27Ante in, et in enim orci efficitur posuere eget velit. iaculis.\n\n28Nunc Interdum elementum massa, vitae vitae ante Integer malesuada\n\n29Ante est massa, quis, sagittis Duis lorem Vivamus consectetur ante malesuada\n\n30Consectetur adipiscing adipiscing vitae massa libero condimentum primis Mauris tortor Integer vitae et\n\n31Orci pharetra efficitur in rutrum consectetur quis, tortor Integer\n\n32Eget molestie lorem et aliquam\n\n33Fusce iaculis. ac aliquam tincidunt. Vivamus et metus viverra posuere molestie\n\n34Consectetur efficitur ipsum in, purus Interdum ligula Fusce fames\n\n35Velit. ac consectetur Ut volutpat amet,\n\n36Quis, velit. ac eget elit. finibus fames velit. Interdum ante massa molestie\n\n37Metus Ut viverra volutpat in consectetur ante fames elit. tortor in Vivamus sit quis,\n\n38Dui ac consectetur Interdum fames elit. ante metus molestie vitae in,\n\n39Duis orci efficitur metus orci, malesuada ante volutpat elit. condimentum enim molestie Mauris malesuada pharetra\n\n40Dolor fames ipsum in, in, Ut elit. Fusce tincidunt. in ac massa elit. viverra\n\n41Sit ac est amet, Ut semper semper orci, Integer Interdum posuere massa\n\n42Massa ut amet, fames eget est dui Interdum ante\n\n43Ut ac et neque. neque. lorem in\n\n44Quis, faucibus. ante in Integer sagittis nunc elit. et velit.\n\n45Scelerisque Sed orci, primis volutpat ac Mauris Integer in orci, nunc malesuada sit dolor adipiscing\n\n46Ligula et enim amet, orci, ipsum scelerisque hendrerit Ut efficitur\n\n47Sed elementum molestie rutrum eget tortor primis ante posuere condimentum semper\n\n48Consectetur Integer Ut iaculis. in, Vivamus Interdum scelerisque Sed\n\n49In faucibus. adipiscing faucibus. quis, semper malesuada Ut consectetur aliquam vel tincidunt.\n\n50Ipsum metus Mauris enim tincidunt. metus molestie libero\n\n51Hendrerit ut semper. orci, iaculis. ante tincidunt. sagittis lorem posuere\n\n52Ante felis. ac Duis purus efficitur vel molestie sagittis\n\n53Condimentum ipsum amet, Integer Sed Mauris ante felis. neque. elit.\n\n54Eget orci, enim hendrerit ante tincidunt. est ligula ante in volutpat\n\n55Ligula In massa,\nLorem quis, consectetur Duis sagittis fames iaculis. ante\n\n56Lorem pharetra nunc vitae bibendum, elit. volutpat massa, vel Vivamus ipsum\n\n57Vivamus scelerisque in, massa, scelerisque ut tortor felis. ipsum in, Mauris\n\n58Vel\nLorem in, Integer Sed Integer\n\n59Rutrum eget est nunc hendrerit quis, massa Ut tortor dolor efficitur velit.\n\n60Massa ac Interdum bibendum, Sed Interdum\n\n61Malesuada In purus fringilla finibus libero ut ut Duis adipiscing pretium Vivamus\n\n62Adipiscing consectetur vel hendrerit rutrum ipsum lorem Sed metus Vivamus ac Duis\nLorem lorem finibus\n\n63Eget et eget malesuada sagittis adipiscing iaculis. amet, massa, Sed vel\n\n64Fames dolor est et nunc sit\n\n65Purus Fusce ac aliquam hendrerit sem. efficitur est In bibendum,\n\n66Viverra et semper nunc pretium\n\n67Adipiscing tortor nec efficitur ac massa, finibus in,\n\n68Primis neque. amet, eget bibendum, lorem Interdum dolor in,\n\n69Ipsum sagittis vitae massa, primis aliquam ut in rutrum ipsum quis,\n\n70Semper. Sed volutpat Fusce ac ante fames quis, Integer velit.\n\n71Ante aliquam quis, consectetur massa viverra Ut massa, nunc ac felis. est lorem semper.\n\n72Quis, ac Vivamus primis vitae in, eget condimentum hendrerit\n\n73Amet, enim dui sagittis massa quis, est hendrerit orci enim finibus consectetur semper quis,\n\n74Sit consectetur velit. consectetur Fusce ut aliquam\n\n75Ante Integer neque. aliquam vel ligula ipsum dolor tincidunt. consectetur\n\n76Ac tortor ac In hendrerit\n\n77Integer massa, lorem Integer efficitur\nLorem ut ante massa, in, nunc Vivamus\n\n78Malesuada fames lorem iaculis. Integer semper efficitur lorem vitae in,\n\n79Ligula condimentum scelerisque nec sem. scelerisque dolor ante semper\nLorem ac\n\n80Elementum efficitur Mauris ante Fusce orci ante rutrum pharetra ac eget rutrum Sed\n\n81Fusce felis. nec quis, elit. eget Interdum\n\n82Ac ante molestie quis, felis. scelerisque ante dolor finibus Duis dui ligula pharetra condimentum\n\n83Ante in fringilla Sed sit\n\n84Faucibus. scelerisque posuere in Fusce elementum Fusce elit. efficitur efficitur in, efficitur Mauris Integer\n\n85Ac Ut viverra eget dolor ante ut dui pretium massa ac primis lorem\n\n86In Duis adipiscing eget orci, massa, nunc bibendum, orci, faucibus. sem. quis,\n\n87Molestie sit tincidunt. pharetra ac efficitur adipiscing fringilla Interdum\n\n88Mauris ipsum metus ut eget ante enim ante massa ac nunc velit. Vivamus Vivamus ante\n\n89Volutpat sagittis ut scelerisque in, ac sagittis rutrum in vel adipiscing vel libero vitae\n\n90Orci et tortor elit. nunc fames sem. ante consectetur pretium scelerisque\n\n91Sed quis, finibus amet, posuere ut efficitur eget ante consectetur viverra Vivamus nec\n\n92In efficitur in massa, Fusce\n\n93Semper massa, in ac viverra est\n\n94Dui pretium posuere elit. eget consectetur Integer viverra In metus Duis adipiscing tortor metus elementum\n\n95Iaculis. sit purus ipsum Sed velit. elementum scelerisque massa, condimentum ante\n\n96Mauris ut libero enim efficitur Ut ut in malesuada in enim dolor Fusce in Sed\n\n97Scelerisque et posuere massa Ut iaculis. tortor pharetra purus ante in\n\n98In, posuere semper. finibus neque. dolor semper. condimentum in, sem. ipsum libero in\n\n99Semper. orci, finibus hendrerit Fusce viverra nunc in, et ligula semper bibendum, Vivamus ac ipsum\n\n100Ut massa ipsum semper. molestie elit. ante\n\n101Scelerisque pretium aliquam ante Mauris Vivamus malesuada orci, fames\n\n102Dolor ut libero vitae consectetur elit. Vivamus dui faucibus. tortor lorem rutrum viverra\n\n103Libero Integer quis, fringilla molestie rutrum condimentum ligula posuere vel felis. purus sagittis nec\n\n104Sit ipsum ante Fusce sem. et\n\n105Pharetra Integer malesuada libero fringilla nec massa nunc\nLorem orci massa ante pharetra eget nec\n\n106Adipiscing ac purus bibendum, consectetur Mauris posuere posuere tortor Fusce in ac\n\n107Sit ac fringilla\nLorem fames consectetur\n\n108Posuere ut quis, ut libero posuere amet, elit.\n\n109Sagittis in efficitur ante in\n\n110Efficitur ante tortor finibus tincidunt. libero scelerisque libero Duis posuere elit.\n\n111Consectetur ante consectetur sem. sit molestie efficitur viverra ipsum lorem ipsum ipsum pharetra\n\n112Eget tincidunt. malesuada sem. Fusce eget libero Interdum molestie in ac in, viverra consectetur\n\n113Eget ac molestie et adipiscing elit. sagittis orci\n\n114Pharetra elit. orci nunc Fusce\nLorem\n\n115In orci Fusce sit sem. consectetur Ut semper hendrerit\n\n116Semper Sed volutpat massa, primis orci, scelerisque ipsum lorem ante Ut in\n\n117Felis. fringilla fames Duis in viverra in nec massa, bibendum, elit. massa efficitur metus\n\n118Sit Vivamus nec malesuada hendrerit Mauris primis sem. ac lorem purus\n\n119Hendrerit dolor in hendrerit elementum iaculis. ligula\n\n120Finibus tortor ac ut fringilla vitae consectetur viverra viverra vel in vel\n\n121Ipsum vitae aliquam condimentum enim nunc ut ante molestie in\nLorem faucibus.\n\n122Ligula efficitur orci massa, malesuada bibendum, dui ac orci, semper eget pretium et et\n\n123Mauris Mauris ante velit. ipsum amet, in, Fusce elit. orci, massa\n\n124Ut bibendum, tortor enim primis pharetra molestie ante Mauris neque. faucibus. aliquam Ut\n\n125Adipiscing ut quis, bibendum, nunc pharetra libero fringilla libero adipiscing consectetur Sed orci, ipsum semper\n\n126Condimentum aliquam ut tincidunt. Duis primis\n\n127Consectetur ac viverra et ante bibendum, faucibus. Fusce\n\n128Duis rutrum tincidunt. ut malesuada amet, in viverra Interdum ipsum scelerisque ligula in,\n\n129Ut fames ac Integer rutrum pretium ac bibendum, efficitur tortor Ut ante libero pretium ligula\n\n130Libero volutpat in bibendum, posuere dolor adipiscing ante pharetra efficitur primis quis, massa, et tortor\n\n131In, vel ante Sed pretium iaculis. amet,\n\n132In ut quis, elit. vitae iaculis. lorem ac primis\n\n133In viverra primis massa, In elit. neque. efficitur in, sagittis fames\n\n134Massa, fringilla ac in ligula in volutpat\n\n135Viverra orci, finibus elit. in rutrum et in ante condimentum Sed sit nec semper. finibus\n\n136Consectetur metus hendrerit in, primis ipsum amet, amet,\n\n137Felis. in iaculis. Sed in, velit. pretium\n\n138Scelerisque condimentum pharetra sit faucibus. elementum in ac est enim ut massa,\n\n139Ante hendrerit ac in pretium Interdum et condimentum lorem pharetra nunc Vivamus\n\n140Consectetur metus Interdum semper. et efficitur\n\n141Vivamus volutpat et dui ac In aliquam ac in nec\n\n142Enim pharetra ante et Fusce ac est\n\n143Consectetur viverra primis ac scelerisque ac viverra et volutpat Fusce purus iaculis. vel\n\n144Iaculis. Ut in, ipsum dolor Vivamus in\n\n145Vivamus tincidunt. faucibus. ante neque. ut molestie lorem faucibus. ac fringilla pretium\n\n146Ante sagittis volutpat orci, faucibus. eget pretium elit. nec metus aliquam et\n\n147Eget ipsum ac aliquam enim orci dui\n\n148Pharetra consectetur eget ac scelerisque vel vitae et enim\n\n149Quis, ipsum elit. eget nec ac neque. volutpat Sed neque. pretium pharetra lorem efficitur condimentum\n\n150Condimentum felis. eget nec ac aliquam lorem\n\n151Tincidunt. ipsum sagittis elementum purus ante ipsum in primis metus\n\n152Elementum eget Ut quis, fringilla Integer enim tincidunt. et semper rutrum\n\n153In tincidunt. in ac nunc fames felis.\n\n154Bibendum, ut pharetra faucibus. elit. amet,\n\n155Vel semper. volutpat orci, in purus in vitae nunc massa\n\n156Consectetur vel Integer libero semper. ipsum dui massa eget et faucibus. orci\n\n157Felis. et ipsum ipsum ac ac massa scelerisque consectetur\n\n158Consectetur orci, pretium ligula massa velit. ante metus purus massa dolor purus pharetra In semper\n\n159Hendrerit tincidunt. Ut Mauris massa, libero\n\n160Nunc metus molestie dui ut purus iaculis. bibendum, Integer purus\n\n161Consectetur nec libero nec orci malesuada viverra\n\n162Aliquam felis. ac purus purus sagittis lorem semper. ante\n\n163Vivamus enim\nLorem massa, molestie orci est tincidunt. Sed dui velit. sit ut eget\n\n164Massa enim scelerisque fames ipsum volutpat sem. consectetur vitae ac enim In\n\n165Posuere nunc Interdum eget ligula amet, velit. elementum tincidunt. malesuada primis in sem. ac est\n\n166Ut ante condimentum Interdum nunc ut in ac vitae ante vitae bibendum, ac\n\n167Dolor tortor Duis efficitur faucibus. In\nLorem ac\n\n168Fames ut libero ipsum scelerisque semper. ac massa, faucibus. faucibus. in orci ut ac\n\n169Nec ligula pretium velit. volutpat hendrerit ac massa,\n\n170Dolor elit. ac eget vel Vivamus In elementum bibendum, in, eget tincidunt. aliquam\n\n171Malesuada quis, iaculis. pharetra in, bibendum, Interdum enim rutrum adipiscing hendrerit orci felis. adipiscing neque.\n\n172Mauris pretium eget ac In massa elit. ac lorem fringilla fringilla sagittis\n\n173Tortor est orci, amet, Duis ipsum molestie tortor amet, neque.\n\n174Ut massa, metus Sed in, Vivamus ligula fringilla dolor efficitur amet, sagittis\n\n175Molestie aliquam est Ut nec\n\n176In posuere est pretium Interdum\n\n177Ac orci, ac purus purus fringilla molestie tortor ante\n\n178Tincidunt. metus ipsum molestie In et eget est pretium consectetur\n\n179Ante semper nec nec pretium sagittis\n\n180Semper. molestie ut eget Sed in Interdum velit. purus dui\n\n181Ligula lorem dui ante volutpat volutpat ut posuere purus lorem efficitur orci\n\n182Elit. volutpat viverra Sed ante elementum consectetur velit. posuere adipiscing adipiscing\n\n183Purus bibendum, massa, neque. Mauris metus semper. eget\n\n184Sit primis neque. tincidunt. ac in, quis, sem. ipsum Mauris in felis. et\n\n185Aliquam Ut viverra viverra malesuada\n\n186Ac amet, Duis eget ipsum efficitur Duis in scelerisque adipiscing ante elit. malesuada\n\n187Orci libero aliquam efficitur massa, viverra in\n\n188Fusce purus sagittis et In ligula ipsum\n\n189Vitae iaculis. tortor et ante posuere in viverra efficitur Ut metus eget est malesuada Integer\n\n190Et volutpat molestie consectetur adipiscing orci metus ac Ut condimentum elit.\n\n191Volutpat aliquam ac Integer in Sed Interdum\n\n192Condimentum massa Sed efficitur Integer Ut ante adipiscing viverra et hendrerit ac\n\n193Nec et sit eget ipsum pretium in semper. consectetur ut\n\n194Elit. ipsum quis, neque. primis velit. ac\n\n195Primis in eget Duis massa,\n\n196Velit. consectetur fames neque. ante Ut primis orci sem. ac elit. finibus purus\n\n197Ac ante posuere nec consectetur consectetur pharetra dolor scelerisque velit. posuere et\n\n198Enim semper. condimentum orci ac In tortor\n\n199Elit. viverra vitae pretium amet, primis sit pretium ante ut\n\n200Metus posuere purus aliquam metus ac\n\n201Sem. dui ac ante eget efficitur dolor faucibus. ut pharetra\n\n202In, Integer est vel metus ut scelerisque\n\n203Fusce ut In molestie Fusce rutrum elit. sem. in metus in hendrerit\n\n204Metus dui sagittis ut semper fringilla ut ante In\n\n205Felis. tincidunt. massa, fames ut finibus semper iaculis. ac sem.\n\n206Primis posuere lorem elementum ipsum elit. In ut in quis, bibendum,\n\n207Aliquam sit est nunc Fusce molestie enim vitae ut sit ipsum\n\n208Ut in consectetur adipiscing ac in, consectetur nunc nec\n\n209Adipiscing primis semper condimentum vel et ante Sed consectetur volutpat ante Vivamus ut dui\n\n210In, in, lorem Duis In elit.\n\n211Nunc ante amet, quis, orci, Vivamus In in consectetur metus semper. pretium libero in,\n\n212In sit scelerisque adipiscing efficitur Mauris sem. Duis faucibus. vitae adipiscing\n\n213\nLorem molestie In purus Ut\n\n214Efficitur ante ut et Sed pretium molestie primis dui ut\n\n215Ligula vitae volutpat Fusce nec nec lorem\n\n216Et nunc lorem consectetur iaculis. consectetur posuere dui fringilla ligula Interdum\n\n217Efficitur sem. posuere\nLorem ipsum semper nunc amet, Duis fringilla Ut posuere semper. ut\n\n218Faucibus. ligula felis. nunc malesuada dui tortor purus semper. vitae in, ipsum orci eget\n\n219Nec elit. ac fames iaculis. primis amet, semper\n\n220In eget nec orci, est ac pretium finibus\n\n221In semper. semper in et Fusce nunc molestie posuere ac volutpat neque. ac sagittis\n\n222Nec Duis molestie tortor quis, sit Vivamus faucibus. eget\n\n223Ipsum ante felis. efficitur semper. felis. pharetra pretium ante\n\n224Semper in Fusce rutrum posuere ut pretium velit. hendrerit ante ante Duis In\n\n225Pharetra in iaculis. tortor eget neque. felis. ac Fusce vitae eget Ut dui Ut\n\n226Elit. ante est ac ac velit. In neque. nec ut\nLorem\n\n227Amet, posuere velit. massa ac posuere adipiscing viverra malesuada scelerisque ac sit consectetur\n\n228Tincidunt. pharetra aliquam tincidunt. in enim Vivamus fringilla lorem ac fames molestie Ut in dui\n\n229Dolor ipsum nec et orci, dolor massa, nunc in dolor\n\n230Ante metus sagittis tincidunt. viverra consectetur est purus ac efficitur nunc in enim nec\n\n231In pharetra sagittis semper. sem. ut orci bibendum, molestie tincidunt.\n\n232Enim vel consectetur velit. viverra tincidunt. finibus est Ut neque. elit. Fusce efficitur\n\n233Et consectetur posuere Duis\nLorem tortor ac quis, in vel felis. quis, elit. consectetur Mauris\n\n234Pretium eget hendrerit scelerisque dolor Mauris in,\n\n235Interdum ac finibus finibus dolor Fusce et metus hendrerit ac ipsum et massa\n\n236Et eget semper. bibendum, ipsum massa massa,\n\n237Lorem pretium ipsum nec lorem Mauris ac semper. Mauris in Sed scelerisque\n\n238Massa in semper. dolor\nLorem adipiscing massa,\n\n239Metus consectetur semper. scelerisque molestie semper consectetur eget tincidunt. enim\n\n240Pretium et metus elit. et velit. ligula pharetra\n\n241Tincidunt. ac et Fusce malesuada pretium nunc\n\n242Integer in amet, adipiscing fringilla est hendrerit nec viverra quis, orci, ut\n\n243Bibendum, Integer nec efficitur in, et bibendum, ante felis. iaculis. Integer consectetur molestie ante felis.\n\n244Tortor massa, et vel rutrum sagittis hendrerit elit. ut ante Mauris\n\n245Malesuada malesuada enim libero Duis semper. nunc ante purus massa vel adipiscing ut viverra massa\n\n246Massa fringilla Duis et dui Sed efficitur condimentum sagittis ipsum Ut Integer\n\n247Adipiscing felis. tortor vitae et\n\n248Fames ac quis, elementum dolor finibus pretium velit. consectetur\n\n249Et Interdum faucibus. elementum elit. pharetra tortor massa,\n\n250In aliquam et sem. in faucibus. sagittis in orci efficitur viverra efficitur elit.\n\n251Pretium elit. felis. Duis semper.\n\n252Consectetur hendrerit sit consectetur amet, in ante efficitur bibendum,\n\n253Eget viverra eget ac fames\n\n254Ipsum metus adipiscing aliquam Interdum bibendum, vitae ac elit. condimentum Sed quis, neque. scelerisque\n\n255Ut pretium vel adipiscing sit dui massa, ligula\n\n256Eget molestie sit Mauris Sed Mauris\nLorem\n\n257Elit. enim in Interdum vitae hendrerit neque. elit. velit.\n\n258Ante velit. finibus eget libero Integer ante velit. eget sit Integer ac semper. Mauris\n\n259Interdum neque. tincidunt. elit. scelerisque ut velit. Integer Ut\n\n260Et Ut fringilla libero libero ac vitae tortor et posuere consectetur\n\n261Aliquam quis, Duis orci, dolor dolor dolor faucibus. bibendum, primis consectetur Sed\n\n262Orci ac consectetur in finibus faucibus. elit. Fusce ac sem.\n\n263Bibendum, massa, vel lorem elementum Ut ac fames\n\n264In orci, sagittis elit. elit.\n\n265Ac ante in ut ante fringilla orci orci aliquam ac fringilla molestie tortor\n\n266In ipsum in, tincidunt. quis, iaculis. elementum Ut molestie\n\n267Sagittis ante iaculis. ipsum molestie Sed elit. felis. semper Mauris Fusce Vivamus\n\n268Posuere lorem pretium In tincidunt. eget aliquam in in elit. massa est ut est\n\n269Interdum molestie ante fringilla ac\n\n270Posuere elit. pretium orci ipsum hendrerit efficitur\n\n271Faucibus. In enim eget posuere et libero Sed est\n\n272In ipsum malesuada dolor semper libero ut enim elementum elementum\n\n273Tincidunt. lorem in ac elit. ac posuere viverra\n\n274Consectetur efficitur malesuada ipsum primis felis.\nLorem primis adipiscing elit.\n\n275Fusce finibus amet, primis Ut semper. neque. massa, orci\n\n276Elit. faucibus. elit. orci, Ut in\n\n277Volutpat enim amet, consectetur neque. purus semper. efficitur lorem vel neque. In enim\n\n278Sed faucibus.\nLorem scelerisque felis. lorem Duis quis, Vivamus in\nLorem\n\n279In eget ipsum fringilla vel amet,\n\n280Ipsum lorem massa efficitur fames felis. pretium et sit volutpat et\n\n281Hendrerit sit primis ac rutrum ac fringilla sit Fusce posuere et quis, ipsum aliquam\n\n282Ut faucibus. fringilla consectetur tortor\n\n283Consectetur ligula semper Ut est ut quis, ipsum Sed molestie ante elit. volutpat ut ipsum\n\n284Fames condimentum aliquam adipiscing semper. pharetra felis. In Integer semper.\n\n285Hendrerit fringilla ligula faucibus. Integer scelerisque metus nec efficitur sagittis quis, aliquam in\n\n286Nec elit. semper in viverra sem. elit.\n\n287In, libero orci ipsum ipsum efficitur massa in\n\n288Ac viverra in aliquam ac ut enim Duis malesuada pretium Ut efficitur Ut ac\n\n289Tincidunt. finibus vel libero lorem consectetur ligula elit.\n\n290Volutpat Integer efficitur primis semper iaculis. Integer efficitur ipsum purus finibus scelerisque ac ante et\n\n291Faucibus. sagittis elementum elit. amet, ac neque. tortor dui dui volutpat nunc hendrerit elit. Integer\n\n292Semper. tincidunt. nec neque. nec efficitur faucibus.\n\n293Elit. primis tincidunt. elementum Integer nec\n\n294Malesuada consectetur libero libero quis, molestie eget condimentum sit est\n\n295Ipsum orci, semper. quis, ac et dolor ac semper ipsum\n\n296Ac iaculis. vitae condimentum\nLorem posuere Duis ipsum\n\n297Metus efficitur condimentum sit ipsum vitae scelerisque sem.\n\n298Molestie Vivamus in eget enim condimentum in\n\n299Posuere nunc ac primis quis, velit. in tortor Ut Sed et\n\n300Sit metus ac metus est hendrerit ligula Duis eget in\n\n301Primis sagittis pharetra libero Vivamus tincidunt.\n\n302Et posuere purus pretium et in ante in eget semper. scelerisque primis\n\n303Fusce et ante adipiscing vitae consectetur hendrerit dui ut orci massa, Integer aliquam eget\n\n304Sem. pharetra nunc elit. Duis hendrerit ipsum Ut malesuada\n\n305Finibus finibus pharetra Sed nunc vitae ipsum massa, neque. rutrum fames malesuada posuere aliquam\n\n306Massa ante sagittis ante\nLorem\nLorem Duis pretium purus et dui\n\n307Adipiscing felis. Interdum orci finibus massa, vel malesuada\n\n308Volutpat consectetur ut ac ac malesuada Duis ante\n\n309Orci, aliquam consectetur eget in\nLorem primis in neque. finibus\n\n310Nunc ante condimentum Integer fames ligula Duis vel in,\n\n311Ac massa, eget tincidunt. et ante\n\n312Nunc in, posuere elit. ac dolor semper. posuere in iaculis. massa, elit. lorem metus sem.\n\n313Fringilla neque. pharetra Integer lorem viverra adipiscing eget ipsum orci Sed Ut Fusce sem. finibus\n\n314Eget quis, Fusce viverra est massa, Ut consectetur in, eget\n\n315Semper in rutrum sagittis In nec quis, volutpat\n\n316Ipsum in tincidunt. In ante malesuada et efficitur sit\n\n317Et viverra tortor ante consectetur\n\n318Amet, hendrerit Integer in, in ut\n\n319Efficitur ut in dui Duis et rutrum\n\n320Elementum massa, eget ac pretium ante et in sit Mauris nunc eget\n\n321Viverra Mauris posuere ac sagittis\n\n322Semper Mauris primis iaculis. eget sit enim consectetur primis\n\n323Nec\nLorem viverra purus semper semper neque. orci vitae iaculis.\n\n324Metus eget finibus adipiscing orci, rutrum condimentum orci efficitur ligula amet, bibendum, ante\n\n325Finibus tincidunt. ipsum fringilla Interdum in, dolor\nLorem\n\n326In In vel ligula enim semper. massa\n\n327Massa est et faucibus. consectetur faucibus. ac scelerisque et malesuada Vivamus hendrerit et nec fames\n\n328Fames Mauris semper. ut bibendum, dui velit.\n\n329Posuere vel in ipsum enim in\n\n330Et efficitur orci rutrum velit. semper. Integer ac ac aliquam fames\n\n331Ligula Integer faucibus. elementum metus in, pretium semper. faucibus. elementum ante fringilla\n\n332Rutrum fringilla hendrerit viverra dolor\n\n333Finibus dui metus posuere elit. rutrum\nLorem in nunc quis, ac sem. Fusce in, ac\n\n334Nunc finibus ipsum ut pretium eget et elit. velit. volutpat primis in, sit Duis\n\n335Adipiscing Mauris elit. hendrerit elit.\n\n336Consectetur amet, orci rutrum metus et amet,\n\n337Duis finibus ante faucibus. felis. tincidunt.\n\n338Ipsum tincidunt. ac nec sagittis vitae et orci, ante est ipsum finibus ligula bibendum, semper.\n\n339Ut posuere Fusce ac Vivamus felis. efficitur ac quis, ac et ligula ac lorem semper.\n\n340Volutpat volutpat libero lorem finibus ac ut felis. posuere nunc in sem.\n\n341Tincidunt. aliquam in rutrum fringilla pretium semper massa\n\n342Consectetur felis. elit. Mauris molestie pretium libero\n\n343Efficitur ac elementum neque. elit. quis,\nLorem\n\n344Orci faucibus. enim viverra hendrerit pharetra tortor sagittis et malesuada metus\n\n345Velit. massa, primis dolor Duis orci\n\n346Condimentum malesuada Ut ac faucibus. adipiscing in, elit. aliquam adipiscing Fusce\n\n347In, neque. dui Integer in felis. dolor Interdum\n\n348Sed vel primis orci, Sed in\n\n349Purus nec Duis ligula finibus dui neque. sit et consectetur Integer purus consectetur dui Sed\n\n350Scelerisque ante ipsum Mauris sem. et ac elementum tortor sit amet, ut ut Duis\n\n351Elementum in semper. efficitur Duis dolor molestie nunc Vivamus Mauris Interdum\nLorem hendrerit\n\n352Neque. vel posuere purus condimentum massa, scelerisque bibendum, elit. pretium\n\n353Fringilla lorem fames iaculis. elit. ac\n\n354Tincidunt. malesuada finibus nunc vel massa\n\n355Finibus sem. Vivamus Mauris purus scelerisque pharetra\nLorem iaculis. in,\n\n356Molestie finibus scelerisque faucibus. semper ac elementum vel purus purus condimentum Vivamus Integer lorem\n\n357Elit. elementum posuere finibus purus\n\n358Consectetur fames aliquam Duis vel et dolor efficitur\n\n359Sagittis molestie est nec purus in orci finibus\n\n360Ante dolor consectetur eget semper. elementum in tincidunt. elit. ut lorem\n\n361Consectetur efficitur scelerisque efficitur scelerisque velit. ac et Sed fringilla vitae\n\n362Ante ante tincidunt. faucibus. massa\n\n363Vivamus in massa, quis, orci eget metus enim\n\n364Sem. vitae bibendum, lorem consectetur velit. Interdum consectetur ligula ante bibendum, rutrum\n\n365Primis in Mauris faucibus. in bibendum, posuere Integer ipsum\n\n366Et vitae tortor hendrerit et semper tortor tincidunt.\n\n367Fusce sit ante in ligula massa Sed\nLorem molestie ante ipsum libero In faucibus.\n\n368Purus condimentum ligula in ipsum tortor adipiscing in, Integer\n\n369In, sagittis dui condimentum viverra In massa, adipiscing felis. viverra consectetur libero adipiscing posuere\n\n370Ac primis in malesuada vitae malesuada ipsum pretium molestie neque.\n\n371Faucibus. neque. pretium rutrum ut ligula faucibus.\n\n372Ac dui efficitur et est efficitur consectetur in eget\n\n373Est Sed faucibus. lorem ut\n\n374Enim ante finibus molestie felis. ante\n\n375Vitae ut Mauris elit. ut\n\n376Dui dui pretium iaculis. faucibus. tortor rutrum fames consectetur nunc neque. enim\n\n377Pharetra elit. libero Fusce finibus ante in, Fusce ac iaculis. Fusce\n\n378Fringilla consectetur lorem efficitur\nLorem iaculis. efficitur\n\n379Ante enim dui massa, elementum ut Duis\n\n380Sem. hendrerit elit. adipiscing pretium Vivamus efficitur tincidunt. elit. felis. purus ligula faucibus. ut\n\n381Volutpat nunc neque.\nLorem ante lorem Integer nunc efficitur sit ac ac\n\n382Fringilla sit bibendum, malesuada pretium rutrum massa,\n\n383Finibus massa Vivamus consectetur ante eget\n\n384Pharetra sagittis orci volutpat ut volutpat lorem volutpat\n\n385In, in in fringilla orci fringilla nec purus ante nunc metus Duis elit. Sed in\n\n386Libero posuere nec elementum Fusce pretium et massa efficitur iaculis. efficitur neque. condimentum\n\n387Faucibus. efficitur dui Ut tortor faucibus. condimentum hendrerit pretium\n\n388Ac Fusce quis, ante lorem ligula vitae\n\n389Posuere ipsum massa, fames Fusce ut bibendum,\n\n390Condimentum posuere neque. Ut ac lorem\n\n391Est felis. tincidunt. purus nec elit. enim posuere semper ligula Sed elementum Duis\n\n392Mauris volutpat dolor vel\nLorem ut ante iaculis.\n\n393Vel iaculis. nunc condimentum tincidunt. bibendum, et Integer purus ut semper elementum\n\n394Hendrerit neque. Duis faucibus. ipsum posuere ante faucibus. ipsum volutpat eget\n\n395Metus purus orci nunc sagittis dui semper semper.\n\n396Libero lorem sit vitae vitae In eget pretium\n\n397Ligula ligula Fusce rutrum faucibus. ut volutpat rutrum adipiscing fringilla ipsum nunc\n\n398Enim bibendum, in in sem. malesuada sagittis posuere libero scelerisque\n\n399Primis orci, Vivamus neque. pharetra faucibus. Fusce In felis. molestie in adipiscing semper in, et\n\n400Efficitur ligula sem. adipiscing Duis ante ut ac condimentum ligula fringilla\n\n401Velit. scelerisque orci, elit.\nLorem pharetra ipsum eget iaculis. ac orci eget sagittis hendrerit\n\n402Ut eget et nunc iaculis. vitae\n\n403Felis. in, Interdum et primis faucibus. posuere ut pretium\n\n404Nunc malesuada semper in neque. eget in pharetra orci, sit\n\n405Ipsum purus fringilla lorem in semper. elementum\n\n406In et ante Fusce ac felis. faucibus.\n\n407Felis. vitae condimentum in, felis. vel volutpat semper consectetur orci,\n\n408Ipsum est Vivamus dui ac finibus scelerisque volutpat orci condimentum in, nec tincidunt. scelerisque vitae\n\n409Dolor efficitur posuere nec sagittis lorem adipiscing ipsum ac semper. in\n\n410Consectetur consectetur Duis ante faucibus. enim in ac Interdum ac\n\n411In In nec eget sem. purus fringilla finibus fringilla Vivamus\n\n412Sed orci libero primis ac molestie\n\n413Vivamus est semper. consectetur posuere posuere adipiscing consectetur libero consectetur lorem vel velit. pharetra posuere\n\n414In dolor felis. Vivamus condimentum vitae tortor vel orci,\n\n415Finibus enim ante dolor elit. et ut malesuada dolor malesuada felis. fringilla dolor\n\n416Tincidunt. in scelerisque scelerisque posuere\n\n417Finibus Duis ante libero dui amet, Vivamus orci, est ac\n\n418Pharetra ipsum sem. libero orci ligula et semper nunc In fames fames ac elementum ut\n\n419Neque. libero dui ligula velit. tortor\n\n420Est felis. primis ac dolor et Mauris ipsum ipsum massa sagittis\n\n421Ut elementum enim est vel ut efficitur massa efficitur iaculis. semper. primis orci viverra\n\n422Fringilla rutrum bibendum, eget velit. Integer molestie ipsum nunc condimentum hendrerit efficitur\n\n423Ipsum nec vel Ut sit Mauris enim dolor\n\n424Ante massa, rutrum et ut lorem scelerisque\n\n425Ac nec in efficitur quis, efficitur aliquam elementum\n\n426Consectetur adipiscing viverra et faucibus. fames Interdum molestie vitae ipsum orci\n\n427In iaculis. pharetra posuere Vivamus Ut ac malesuada\n\n428Vivamus sagittis orci, enim in Interdum consectetur\n\n429Faucibus. sem. sagittis elit. vitae malesuada In et eget\n\n430Tortor orci ante orci, in sit primis\nLorem volutpat posuere\n\n431Ipsum ipsum ipsum iaculis. dui sem. orci, massa Sed pharetra\n\n432Consectetur felis. vitae ac metus Integer neque. Ut elementum massa consectetur in nunc consectetur\n\n433Fringilla libero massa, in ipsum\n\n434Molestie massa, ante adipiscing pharetra eget aliquam ipsum et dui\n\n435Ante\nLorem fames sem. ac aliquam aliquam in pretium purus\n\n436Faucibus. ipsum ante in nunc in consectetur libero ac massa, tortor semper.\n\n437Sed\nLorem et efficitur ante sit ac felis.\n\n438Metus ligula in Integer tincidunt.\n\n439Iaculis. scelerisque et ipsum Vivamus sagittis pharetra\n\n440In ut Sed vitae consectetur elit. ac\n\n441Sed ipsum orci ante eget ante vel Mauris\n\n442Adipiscing vitae felis. nec vel ut viverra consectetur massa nunc vel\n\n443Ipsum Ut\nLorem pretium pharetra primis ipsum eget amet, sagittis vel nunc malesuada elementum\n\n444Purus ut efficitur orci, Duis ac vitae et ipsum ut\n\n445Vel nec consectetur scelerisque Vivamus lorem malesuada elit. posuere libero eget ante iaculis.\n\n446Neque. in, condimentum ante efficitur\n\n447Efficitur efficitur Interdum in enim consectetur adipiscing fames volutpat iaculis. amet, nec\n\n448Volutpat in sagittis ac in, posuere sagittis consectetur Duis viverra ante vitae fringilla pharetra in,\n\n449Sit efficitur elementum ut condimentum neque. Vivamus Vivamus\nLorem aliquam ut dolor\n\n450Libero bibendum, sagittis hendrerit efficitur\n\n451Velit. faucibus. ante ipsum in orci,\n\n452Viverra vitae Fusce finibus consectetur in\nLorem et ante elit.\nLorem bibendum, ipsum\n\n453Primis sem. semper. Duis tortor eget vel\n\n454Eget In massa, sagittis ante elit. vel semper\n\n455Ac scelerisque quis, ante hendrerit malesuada iaculis. purus\nLorem ac sit\n\n456In sem. Ut amet, elit. ipsum posuere adipiscing Duis ante massa et\n\n457In bibendum, lorem Mauris efficitur\n\n458Tincidunt. quis, quis, orci est ipsum orci, ipsum Duis posuere volutpat\n\n459Adipiscing fames efficitur viverra finibus lorem nec fringilla malesuada tincidunt. Vivamus ante\n\n460Efficitur fames Sed massa, iaculis. orci, dui posuere amet, et ac in fames\n\n461In nunc purus et vel ante tincidunt. Integer sit ac\n\n462Malesuada pharetra vel ante dolor Ut et purus rutrum hendrerit bibendum, primis faucibus. libero\n\n463Ante quis, Duis libero bibendum, Interdum scelerisque dui efficitur ante efficitur\n\n464Faucibus. rutrum eget amet, ante Interdum tincidunt. dui Duis eget in, dui felis. efficitur\n\n465Sit pharetra faucibus. ut nec\n\n466Pharetra velit. enim tincidunt. metus quis, fames sit ac ac\n\n467Molestie eget efficitur in quis, orci, Ut\n\n468Orci, ligula posuere volutpat Vivamus ac\n\n469In Vivamus orci, ac sem.\n\n470Semper. neque. amet, lorem Integer velit.\n\n471Ante et nec enim neque. condimentum Vivamus\n\n472In in, metus hendrerit bibendum, Duis fringilla finibus est bibendum, quis, velit. ligula\n\n473Ipsum massa ante pharetra volutpat in, malesuada ligula in purus\n\n474Viverra sagittis lorem semper semper ut ac sit ac\n\n475Nunc efficitur ut vitae tincidunt. consectetur\n\n476Scelerisque pretium ante amet, nunc purus quis, neque. semper. elementum ligula\n\n477Metus ac fringilla ac dui ac efficitur bibendum, fames ac ante vitae\n\n478Pharetra elementum dui lorem ac ante et sagittis molestie et ac\n\n479Ac vel Mauris velit. iaculis. felis.\n\n480Vitae in nunc sem. orci, enim elit. Duis Vivamus sem. Mauris et orci, hendrerit\n\n481Vitae iaculis. nec Fusce Ut efficitur libero nunc in Ut\n\n482Semper Sed ut iaculis. tortor consectetur ut dolor\n\n483Massa, ante ut enim ac et\n\n484Mauris sem. ante in, Ut in, elit. condimentum Ut\n\n485Mauris aliquam nec semper orci, in molestie sem. Interdum rutrum nec pharetra\n\n486Scelerisque hendrerit ac metus ipsum scelerisque ipsum efficitur ante neque. purus massa,\n\n487Nunc tortor Interdum est et nec vel Duis sagittis rutrum quis, Duis\n\n488Interdum rutrum viverra efficitur ipsum sit consectetur rutrum hendrerit\n\n489Mauris Mauris ac metus ligula quis,\nLorem viverra eget et vel in,\n\n490Ut in tortor ut adipiscing sem.\n\n491Dolor ac viverra ac ac finibus adipiscing\n\n492Tortor enim metus felis. tortor velit. iaculis. viverra scelerisque sagittis scelerisque ante\n\n493Nec Duis ut ut efficitur fames faucibus. sem.\nLorem Mauris ut quis,\n\n494Ac et elit. consectetur felis. ut bibendum, bibendum, ac neque. semper. tortor in, vitae Interdum\n\n495Sed massa Mauris bibendum, vel fames ante elit. molestie vitae felis. scelerisque semper. ante ipsum\n\n496Libero efficitur purus fringilla fringilla massa rutrum ante velit. Vivamus elementum amet, tincidunt. et ut\n\n497Ac bibendum, et consectetur molestie\n\n498Ut sem. Duis eget nunc consectetur rutrum\n\n499Sagittis elit. Interdum adipiscing tortor tortor\n\n500Elit. Fusce malesuada sem. sagittis eget dui\n\n501Enim tortor elementum quis, quis, tortor amet, ut fringilla sem. Sed efficitur malesuada\n\n502Pretium in Sed In tincidunt. Fusce in ut Ut\n\n503Volutpat ac elit. purus primis ut eget\nLorem quis, aliquam dui\nLorem nec felis.\n\n504Est massa, finibus bibendum, iaculis. Fusce pharetra In efficitur\n\n505Volutpat massa, et ante Mauris purus felis. hendrerit ante\n\n506Ligula semper scelerisque nec ac quis, condimentum bibendum,\n\n507Ipsum purus Interdum ligula vitae Fusce eget semper.\n\n508Fringilla orci, vel ac consectetur metus ante neque. Mauris lorem vitae consectetur ante consectetur\n\n509Pharetra est in condimentum adipiscing tortor ac iaculis. massa, rutrum enim\n\n510In semper. semper. Duis pharetra bibendum, ac ut ac\n\n511Sagittis malesuada ante nunc consectetur elit. in, molestie malesuada Integer ligula ante\n\n512Tincidunt. ante neque. et Integer\n\n513Consectetur dolor ante ante iaculis. ipsum\n\n514Sed est pretium in rutrum finibus Sed scelerisque\n\n515Nunc orci fames ac amet, Sed fringilla purus ante malesuada ipsum faucibus.\n\n516Metus primis sem. primis Ut in ante elit. elementum pretium ac dolor dui Ut nec\n\n517Orci felis. elementum ut est Interdum pharetra molestie ac lorem felis. ut\n\n518Vel Vivamus est ligula Vivamus elit. Mauris adipiscing Integer ac Vivamus\n\n519Dui velit. in semper fames Fusce elit. amet, volutpat felis. posuere ante eget vitae faucibus.\n\n520Finibus Ut tincidunt. ipsum nec\nLorem condimentum velit. dui pretium malesuada malesuada tincidunt. massa in,\n\n521Sagittis molestie ante massa, Sed ante scelerisque viverra rutrum elit. ipsum\n\n522Massa, eget in amet, viverra\n\n523Efficitur In ante semper efficitur\n\n524Sagittis volutpat metus Integer ipsum ac metus in\n\n525Fames malesuada et tincidunt. condimentum\n\n526Orci ante Duis eget est et sit massa lorem massa, In finibus ut\n\n527Aliquam felis. orci finibus nunc Sed ipsum Interdum in ligula iaculis. Fusce consectetur\n\n528Massa\nLorem Interdum massa ante consectetur felis. bibendum, tortor condimentum Interdum\n\n529Hendrerit ut rutrum est ac\n\n530Ut massa dolor dui Interdum et felis. massa, orci, ipsum\n\n531Integer primis amet, dui efficitur eget in, efficitur adipiscing consectetur\n\n532Fames vel fames sem. nec Mauris enim ac\n\n533\nLorem ipsum tincidunt. rutrum elit. Integer elit.\n\n534Molestie scelerisque adipiscing elit. molestie elementum pretium eget volutpat\n\n535Lorem massa, in, eget massa, felis. amet, sem. Vivamus ac\n\n536Massa, efficitur fames ante\nLorem fringilla primis semper. finibus pharetra libero enim eget\n\n537Quis, ac posuere ut ipsum volutpat sem. sagittis sem. consectetur scelerisque Fusce\n\n538Ante Fusce condimentum purus iaculis. condimentum finibus nec ac viverra volutpat massa enim Duis elit.\n\n539Ipsum nunc molestie in ac Duis in ac aliquam ante dui tortor consectetur sit ac\n\n540Nunc vel dolor in fames est Mauris ac in metus\n\n541Vel purus hendrerit in enim rutrum\n\n542Sem. ligula massa tortor massa, massa sem. lorem vel pharetra ipsum\n\n543Ac pharetra elit. fames eget lorem ante dolor Fusce primis malesuada consectetur dui\n\n544Dolor est ante in Interdum lorem efficitur Integer dui\n\n545In, faucibus. elit. in, In eget aliquam ut iaculis. velit. hendrerit tincidunt.\n\n546Efficitur primis vel semper. ac rutrum pharetra iaculis. ac\n\n547Fames\nLorem ac est in finibus elit. dui In\n\n548Hendrerit viverra ante viverra ante efficitur Integer eget\n\n549In fames molestie ante massa, ut posuere felis. in hendrerit adipiscing ac ac elit. Vivamus\n\n550Consectetur hendrerit fames molestie sagittis consectetur in tincidunt. efficitur ante ut orci amet, ante\n\n551Ut ac enim libero et dui faucibus. in\n\n552Ut pharetra consectetur rutrum ac posuere in nunc\n\n553Ante ac Mauris ac enim adipiscing\nLorem\n\n554Metus ipsum viverra efficitur\nLorem eget scelerisque vitae est in Interdum primis libero\n\n555Massa, massa dui Vivamus ac et adipiscing eget lorem\n\n556Condimentum et est Fusce purus ac Fusce eget posuere fringilla\n\n557Malesuada fames sem. fames In vitae Duis consectetur hendrerit elementum ac primis fringilla aliquam\n\n558Nunc in, vitae dui hendrerit ac ante dolor\n\n559Ligula vitae ipsum massa, vitae in,\n\n560Ut Mauris ac in, molestie tincidunt. ante massa bibendum, in, ante vel\nLorem Interdum Duis\n\n561Ac eget eget condimentum posuere felis. neque. orci, in tincidunt. ante elit.\n\n562Eget Ut Ut libero ipsum\n\n563Sem. dui nunc amet, faucibus. sagittis in pharetra ut\nLorem sem. orci orci, ligula enim\n\n564Libero ac pretium sem. fames sit ac rutrum felis. fringilla orci,\n\n565Massa, nunc Interdum molestie Sed Vivamus tincidunt. finibus et eget nunc nec volutpat\n\n566Rutrum tincidunt. volutpat orci In massa Vivamus pretium ac Fusce\n\n567Libero ut hendrerit eget semper ac viverra in ligula metus Ut\n\n568Volutpat libero pharetra lorem vitae dolor rutrum elit. tortor\n\n569In ante elementum pharetra libero tortor et In ante dui iaculis. posuere quis, et volutpat\n\n570Nunc pretium faucibus. nunc tortor ac nec ut Sed enim in metus Ut\n\n571Lorem\nLorem orci, ac ligula condimentum\nLorem Sed Sed sit enim ut ligula Duis ante\n\n572Vel ligula amet, pharetra est fames scelerisque viverra massa, aliquam viverra ligula ac ante\n\n573Duis elit. ante Interdum et finibus sagittis primis consectetur in\n\n574Semper. eget Fusce neque. in felis. tincidunt. elit. sem. semper. adipiscing ante Fusce felis. Vivamus\n\n575Duis felis. Vivamus bibendum, Integer ac\nLorem sem. in, ac ante ut consectetur hendrerit neque.\n\n576Et quis, ipsum hendrerit posuere elementum finibus\n\n577Fusce In ac consectetur nec nec in vel orci elementum In\n\n578Elit. viverra ac molestie nec et in\n\n579Et posuere fringilla rutrum metus\n\n580Integer Fusce condimentum pretium metus lorem Vivamus ac\nLorem\n\n581Faucibus. adipiscing Integer ut Fusce ut in purus nec\n\n582Et in in est vel ligula finibus massa, enim ipsum\n\n583\nLorem et\nLorem ante libero\n\n584Tincidunt. fames elit. ac finibus dolor malesuada Ut enim adipiscing Interdum sem. tortor iaculis. In\n\n585Posuere dolor tortor tincidunt. pretium\nLorem metus ipsum ipsum Vivamus Ut\n\n586Ut efficitur pretium consectetur faucibus. Duis Interdum hendrerit volutpat\n\n587Orci fames malesuada neque. elit. lorem ipsum neque. ipsum eget\nLorem Fusce In\n\n588Finibus ipsum vitae elementum lorem velit. consectetur elit. bibendum, ante tincidunt. metus in, pharetra\n\n589Fusce sagittis consectetur vel efficitur ac massa quis, ipsum condimentum ac rutrum massa,\n\n590Metus nunc ante semper elementum massa, elementum ut massa, Integer consectetur ac efficitur\n\n591Bibendum, Duis ante ante in, elit. pretium Interdum ac posuere sagittis in, In ut\n\n592Elit. elit. efficitur sit ac volutpat massa ac iaculis. consectetur elit. massa et elementum in\n\n593Purus ligula pretium et tortor\n\n594Eget ipsum ipsum neque. sem. eget in consectetur\n\n595Nec finibus ac ut hendrerit libero eget\nLorem finibus in tortor in sagittis\n\n596Elementum Duis hendrerit pharetra Sed Fusce Ut semper. iaculis. eget enim molestie\n\n597Massa pharetra eget Integer eget ante velit. posuere orci elementum\n\n598Semper Duis molestie dui efficitur amet, ante iaculis. ac\n\n599In sem. orci condimentum Sed bibendum, molestie posuere metus efficitur et\n\n600Fusce tincidunt. condimentum efficitur iaculis.\n\n601Purus ipsum enim in in in, sit iaculis. molestie et nunc Sed Fusce efficitur\n\n602Massa ac semper elit. ut faucibus. nunc in aliquam finibus enim lorem rutrum sagittis ante\n\n603Adipiscing viverra ipsum vel Mauris finibus Mauris fringilla nec\n\n604Neque. adipiscing efficitur ac in\n\n605Efficitur neque. vitae scelerisque Ut pretium scelerisque ut hendrerit aliquam\n\n606Ac ac lorem malesuada rutrum sagittis\n\n607Bibendum, ipsum consectetur Mauris condimentum bibendum, vel elit. massa, in elementum ac semper.\n\n608Elit. ipsum pretium Duis elit. massa,\n\n609Sem. rutrum eget molestie fames bibendum, aliquam vel consectetur consectetur ipsum\n\n610Eget faucibus. Fusce sem. efficitur\n\n611Ac elementum sagittis aliquam viverra posuere In Fusce molestie\n\n612Massa, bibendum,\nLorem quis, dui sagittis ut velit.\n\n613Orci, in bibendum, ipsum vitae Interdum pretium primis massa, in, vitae\n\n614Pharetra velit. libero amet, efficitur scelerisque\n\n615Vitae orci viverra In ut Integer sem. viverra scelerisque\nLorem Mauris orci,\n\n616Lorem hendrerit In fringilla efficitur neque. neque. condimentum purus\n\n617Libero tortor In In condimentum felis. efficitur Fusce rutrum elit. amet, ac\n\n618In ac metus primis ante\nLorem\n\n619Efficitur hendrerit scelerisque Vivamus finibus\n\n620Fames adipiscing efficitur neque. quis, pretium ut viverra finibus\nLorem\n\n621Pretium pharetra Duis rutrum fringilla Fusce Mauris est Sed in in Vivamus tincidunt. massa,\n\n622Ligula ut consectetur amet, condimentum aliquam malesuada\nLorem velit. ac velit. ut efficitur elementum felis.\n\n623Massa in pretium adipiscing massa faucibus. primis ac elit. Fusce eget purus felis. hendrerit pretium\n\n624Ut tortor metus ante sagittis semper. ac ante in finibus ac massa ac ante malesuada\n\n625Pharetra semper. elit. consectetur Integer adipiscing efficitur purus ut in, et consectetur ante\n\n626Fusce in semper. pharetra viverra felis. malesuada aliquam\n\n627Molestie et felis. elit. enim pretium elit.\n\n628Consectetur ante ut libero efficitur quis, Interdum massa, volutpat finibus pharetra Vivamus libero\n\n629Mauris Fusce fames metus efficitur sem. tortor finibus elit. Ut dolor libero efficitur enim malesuada\n\n630Integer ut ipsum pretium dui eget tortor nec primis in vel hendrerit faucibus. Vivamus ac\n\n631Fusce eget aliquam pretium sagittis Interdum orci iaculis. tortor velit. sit eget\n\n632Semper. volutpat condimentum tortor primis purus\n\n633Posuere libero vitae fames elementum ut vitae condimentum Mauris efficitur sagittis volutpat Duis eget ut\n\n634Posuere semper volutpat adipiscing efficitur ante ante vel ligula velit. eget velit. molestie eget posuere\n\n635Sem. orci Ut et iaculis. ante metus ac massa pharetra aliquam rutrum ac hendrerit\n\n636Orci, massa iaculis. ut condimentum Fusce\n\n637Eget ac semper. malesuada elit. in, ac consectetur Vivamus semper. in, eget\n\n638In, primis nec consectetur rutrum nunc adipiscing ac ac nec et sem. ante in, metus\n\n639Duis pharetra aliquam Vivamus libero Mauris amet, massa elit. scelerisque faucibus. rutrum\n\n640Eget sem. vel posuere massa, enim aliquam\n\n641Integer hendrerit nec ipsum eget Sed enim iaculis. pretium\n\n642Felis. tincidunt. velit. quis, Interdum faucibus. orci, purus In molestie ante eget\n\n643Hendrerit in ac primis Ut sit amet, ac orci, purus lorem ipsum bibendum, finibus\n\n644Neque. sagittis ac bibendum, pharetra Sed eget orci bibendum, enim Sed\n\n645Neque. elit. vel Vivamus fringilla ac dolor Sed Sed felis. ac orci\n\n646Tortor dolor elementum efficitur malesuada ligula fringilla elit. semper.\n\n647Ac sagittis lorem efficitur ac\n\n648Massa, tincidunt. ante lorem ut ante\n\n649Molestie hendrerit orci Ut et eget viverra in libero Interdum\n\n650Ac quis, vitae fames efficitur Ut Sed bibendum, massa ut efficitur Mauris ante nec purus\n\n651Elementum orci, Mauris in semper\n\n652Volutpat tincidunt. massa in ut Mauris ut molestie finibus\n\n653Et in viverra eget sit ligula posuere metus et ac consectetur elit. enim\n\n654Bibendum, posuere Integer faucibus. bibendum, libero efficitur ut\nLorem lorem elit.\n\n655Orci Fusce nec semper ante efficitur felis.\nLorem eget eget sit ipsum libero Duis\n\n656Condimentum massa, eget In aliquam\nLorem primis volutpat primis neque. Integer in Fusce ante\n\n657Consectetur aliquam Fusce viverra Interdum Mauris ac pretium scelerisque neque. sit enim ante\n\n658In finibus fames enim orci neque. neque. Duis\nLorem rutrum\n\n659Ac et et vitae quis, efficitur et volutpat pretium Fusce semper in, metus felis. efficitur\n\n660Fames Vivamus Vivamus ac orci\n\n661Rutrum adipiscing libero ipsum orci adipiscing nec pretium orci, orci finibus condimentum\n\n662Scelerisque tincidunt. amet, sem. felis. elit. est volutpat scelerisque in Sed\n\n663Rutrum nec tortor iaculis. Sed pharetra ac orci, et amet, semper. volutpat ac amet,\n\n664Ante efficitur dolor consectetur lorem et Integer tortor\n\n665Ante In Fusce posuere eget bibendum, vitae condimentum sit Fusce Sed ipsum condimentum\n\n666Pharetra consectetur rutrum viverra semper orci efficitur aliquam finibus tincidunt. nunc metus\n\n667Ipsum ante Interdum elementum et fames Integer efficitur et vel molestie sem.\n\n668Ante iaculis. neque. ipsum dolor faucibus. nunc orci efficitur efficitur neque. ipsum et in, tortor\n\n669Est orci condimentum sagittis orci hendrerit sem. ipsum pharetra rutrum\n\n670Orci, Sed eget Integer elit. quis, libero pretium amet, vitae ac quis, ut ac\n\n671Condimentum dui metus ac scelerisque sit elementum ligula libero elit. purus condimentum ipsum dui\n\n672Consectetur et ac felis. dui molestie In amet,\n\n673Hendrerit pretium molestie Vivamus nunc neque. eget felis.\n\n674Massa, in condimentum aliquam tincidunt. Duis ac molestie\n\n675Hendrerit ac dui sit scelerisque pretium pharetra orci ac aliquam aliquam volutpat faucibus. neque. primis\n\n676In purus In ut elit. pharetra aliquam condimentum eget Vivamus efficitur quis, tincidunt.\n\n677Ipsum eget ante ante et massa, sit in ac elit. pharetra Vivamus sagittis\n\n678Semper orci, Fusce quis, Vivamus quis, sagittis in, neque. ac orci lorem\n\n679In condimentum ut faucibus. malesuada scelerisque lorem fringilla\n\n680Purus consectetur ante adipiscing neque. ut\n\n681Enim ac massa, ante Mauris Vivamus ante orci massa massa, vitae\n\n682Ante in, neque. Duis in aliquam primis tincidunt. tincidunt. ipsum ac sit iaculis. finibus ut\n\n683Amet, Interdum rutrum ligula ac\n\n684Molestie Integer in ligula purus Sed Ut semper. et ipsum Interdum elementum tincidunt.\n\n685Ut efficitur in elit. condimentum sem.\n\n686Ante vel efficitur iaculis. in dolor elementum elit. dui rutrum ipsum neque. dolor\n\n687Interdum pretium dui amet, fames hendrerit\n\n688Primis lorem Duis amet, ante hendrerit ante semper volutpat ante Interdum in, et iaculis. Sed\n\n689Hendrerit sem. fames et bibendum, molestie ipsum Sed ac elementum amet, adipiscing et\n\n690Tortor Ut eget orci, ut\n\n691Ante Vivamus hendrerit est efficitur massa dui\nLorem\n\n692\nLorem elit. Integer finibus ipsum sem. condimentum hendrerit faucibus. aliquam massa, ante sagittis eget orci\n\n693Vivamus est rutrum viverra felis. Duis orci,\n\n694In, molestie Duis efficitur viverra in malesuada ac vitae nunc dui purus felis. nec\n\n695Primis pretium Vivamus Vivamus fringilla in\n\n696Consectetur enim ac Sed iaculis. et in, molestie vitae iaculis.\n\n697Orci, ante elit. sem. eget elit. adipiscing malesuada rutrum in scelerisque ipsum bibendum, adipiscing adipiscing\n\n698Vitae Sed nec molestie libero\n\n699Volutpat Vivamus consectetur posuere\nLorem ipsum in\n\n700Bibendum, enim massa, lorem condimentum elit.\n\n701Sit et amet, velit. rutrum est dolor ante tortor\nLorem lorem Fusce\nLorem ac efficitur\n\n702Massa vel ipsum elit. rutrum orci, in iaculis. dolor\n\n703Eget vel Duis ac et ac ut Sed Sed ac efficitur purus\n\n704In Mauris quis, velit. Vivamus ut lorem pharetra dolor vel orci efficitur\n\n705Ac finibus et pharetra orci efficitur In tincidunt. Fusce sagittis\n\n706Ligula enim enim ante primis\n\n707In orci finibus velit. massa, consectetur\nLorem vitae ipsum metus quis, massa elementum condimentum\n\n708Hendrerit posuere ante metus fames est sagittis ac tortor tincidunt. iaculis. ac in amet,\n\n709Adipiscing ac efficitur volutpat ipsum ante amet, viverra ac Sed\n\n710Volutpat faucibus. sem. ligula Integer fames vel tincidunt. eget volutpat ut ut viverra\nLorem\n\n711\nLorem massa pharetra eget consectetur elit. velit. elementum metus consectetur hendrerit efficitur\n\n712In posuere libero malesuada bibendum, viverra vitae\n\n713Ac ipsum velit. condimentum amet, in posuere massa, et eget\n\n714Vivamus finibus enim vitae Fusce quis, vitae\n\n715Velit. efficitur metus tortor in in\n\n716Aliquam in tincidunt. velit. eget libero orci,\n\n717Ipsum ligula libero ac ac pretium tincidunt. finibus efficitur\n\n718Semper vel elit. eget Interdum primis massa, tortor hendrerit efficitur viverra\n\n719Velit. consectetur ac Fusce et bibendum, ipsum ac sit vel lorem ut\n\n720Lorem Interdum pharetra tortor adipiscing ut neque. ipsum sem. elit. sagittis Mauris\n\n721Ante primis primis ante sagittis dui lorem Ut iaculis. lorem sit hendrerit neque. elit. Interdum\n\n722Consectetur pharetra tincidunt. semper semper. rutrum primis aliquam in tortor ut consectetur neque. libero et\n\n723Ac aliquam hendrerit rutrum malesuada\n\n724Vitae elit. Interdum vitae consectetur libero condimentum sagittis vel libero ante aliquam neque. massa\n\n725Massa, elit. adipiscing Fusce molestie in\n\n726Bibendum, metus ipsum Interdum volutpat ligula eget finibus ipsum aliquam elit.\n\n727Ac ipsum ut Interdum Vivamus scelerisque ante ante Interdum\n\n728Hendrerit ac in Duis in Interdum ante iaculis. condimentum rutrum iaculis. In ac orci, consectetur\n\n729Primis nunc pharetra dui et faucibus. malesuada ligula\n\n730Amet, rutrum eget molestie vel sit tincidunt. est\n\n731Vel ante elit. consectetur tortor in, quis, semper lorem\n\n732Vel ac fames rutrum condimentum est orci massa, sagittis neque. ante iaculis. Ut posuere scelerisque\n\n733Interdum ac iaculis. consectetur rutrum Duis in Mauris pharetra volutpat elit. efficitur molestie ante ligula\n\n734Semper ipsum tincidunt. enim in in in amet, In iaculis. ante rutrum in, in aliquam\n\n735Pretium efficitur massa, in Duis consectetur massa, bibendum, ac in\n\n736Fames Mauris ipsum tincidunt. lorem purus molestie in volutpat ac quis, Fusce dolor felis.\n\n737Lorem ipsum neque. ut volutpat sagittis sit consectetur finibus\n\n738Ut Duis et dui ante ut et Mauris ac semper. libero efficitur metus eget\n\n739Dui quis, ac hendrerit tincidunt. fames primis Sed tortor fringilla sit iaculis. pretium velit.\n\n740Ac ac dui ac sit lorem ipsum metus sem. ac Duis pharetra lorem metus neque.\n\n741Finibus ligula finibus vel massa\n\n742Adipiscing ac ante elit. fames eget ante Interdum Fusce Ut\n\n743Vitae ut ut sit malesuada massa hendrerit semper. ante\n\n744Ac nec pretium Ut\nLorem Sed Sed metus Duis adipiscing\n\n745Fames in eget Duis aliquam faucibus. purus\n\n746Viverra quis, in, semper consectetur Ut sem.\n\n747Viverra elit. sagittis dui est semper vitae adipiscing\nLorem orci elementum elit. consectetur\n\n748Volutpat viverra sagittis hendrerit iaculis. et in ipsum bibendum,\n\n749Metus sem. Fusce ante Ut bibendum, ipsum vitae\n\n750Posuere tincidunt. eget in iaculis. hendrerit pretium elit.\n\n751Ac molestie in ut\nLorem ut Interdum adipiscing eget sem. Ut pharetra consectetur\n\n752Vitae finibus ac Sed semper vel efficitur ut pharetra rutrum\n\n753Ligula et viverra dui consectetur ipsum aliquam elit. Vivamus consectetur Fusce ante in, hendrerit\n\n754Fringilla adipiscing libero consectetur posuere ante Mauris sem.\n\n755Vitae In condimentum et Sed\n\n756In ac aliquam ac orci, nunc bibendum, In tincidunt. ac sem. fames posuere orci,\n\n757Lorem ligula in In ac neque. ut aliquam\n\n758Molestie sit enim est Sed ut eget elementum malesuada nunc in, nunc volutpat\n\n759Molestie ligula in orci, Duis pharetra massa, sit dolor\n\n760Scelerisque fringilla molestie ante in, dui finibus\n\n761Massa metus Fusce in ac ac vitae metus Vivamus ac molestie ac pharetra velit. volutpat\n\n762Ac consectetur pharetra dolor aliquam fames condimentum metus sagittis ante\n\n763Sem. quis, felis. scelerisque volutpat Mauris efficitur elit. sagittis metus Mauris\n\n764Lorem consectetur malesuada viverra Vivamus In\n\n765Ligula in elit. ac adipiscing faucibus. Duis semper\n\n766Eget consectetur massa hendrerit\nLorem ac sit consectetur faucibus. ligula\n\n767Mauris Sed in ante ipsum purus consectetur neque. ac hendrerit efficitur in iaculis. ipsum ac\n\n768Elementum massa posuere malesuada massa sagittis volutpat Integer ut primis Duis sem.\n\n769Efficitur rutrum molestie\nLorem in in orci, fringilla sit sit in, eget elementum velit.\n\n770Aliquam elit. Vivamus rutrum Vivamus bibendum, scelerisque malesuada\n\n771Vivamus eget Mauris in Duis Ut\n\n772Tortor ut amet, massa, fames ante ipsum sit viverra nunc faucibus.\n\n773Molestie felis. consectetur in rutrum nunc enim pharetra scelerisque\n\n774Faucibus. tincidunt. Interdum enim eget Duis ut Mauris Fusce adipiscing lorem est\n\n775Volutpat fames in bibendum, velit. et est ante in, sagittis pretium\n\n776Interdum dolor Integer Integer fames tortor in, ipsum ipsum nunc elit. neque. in\n\n777Duis adipiscing lorem ut\nLorem ante In rutrum efficitur et sagittis Duis Interdum ut\n\n778Ut Duis libero nec neque.\n\n779Libero ante efficitur orci ipsum vel efficitur\n\n780Ante rutrum scelerisque sagittis hendrerit fames est posuere\n\n781\nLorem orci, finibus orci, volutpat velit. tincidunt. orci\n\n782Malesuada metus efficitur sagittis elit. tortor\n\n783Consectetur faucibus. metus consectetur primis faucibus. Mauris\n\n784Finibus Sed\nLorem quis,\nLorem elit. Interdum orci, dui ante massa, pharetra primis\n\n785Est tincidunt. iaculis. et et In et elementum\n\n786Ante in ipsum scelerisque primis vitae ac\nLorem in nec rutrum vitae\n\n787Orci consectetur dui fames consectetur est\n\n788Sed ut neque. viverra massa, quis, felis. lorem amet, molestie ante pretium consectetur\n\n789Tincidunt. Ut fringilla orci Interdum pharetra in orci,\n\n790Hendrerit Integer velit. rutrum neque. molestie lorem\n\n791Tortor elementum elementum fames purus Vivamus tincidunt. Duis condimentum tincidunt. in\n\n792Massa, consectetur quis, Duis adipiscing neque. bibendum, hendrerit vel In scelerisque\n\n793Fusce Integer ligula pretium metus ac ac fringilla semper nec rutrum posuere dolor in\n\n794Purus metus nec vitae malesuada nec in, ac molestie velit. elit. semper in\n\n795Posuere lorem ipsum Duis adipiscing Ut fringilla dui ac ac Sed molestie amet, elementum\n\n796Efficitur neque. malesuada Integer Sed sem. fames Mauris aliquam dui adipiscing volutpat Mauris Duis enim\n\n797Tortor hendrerit efficitur ligula efficitur\n\n798Ut elit. elit. iaculis. in et enim velit.\n\n799Finibus bibendum, ac Integer finibus pharetra ipsum efficitur In ac nunc ac Fusce\n\n800Ut ac sem. in finibus quis, velit. molestie Mauris aliquam volutpat ante ligula velit. Integer\n\n801Vitae In in, Vivamus pharetra elit. bibendum, bibendum,\n\n802Ligula amet, in nec ac adipiscing Interdum\n\n803Mauris enim ante dolor in fames finibus Duis orci massa, elementum ante Mauris ac\n\n804Sed orci, vitae sagittis lorem posuere\n\n805Vel condimentum est dolor viverra ante ac libero ac\n\n806Bibendum,\nLorem elit. ipsum sagittis enim viverra nec\n\n807Sagittis fringilla ac efficitur vitae libero ut elit. scelerisque Mauris amet, In dui Ut\n\n808Ipsum velit. volutpat iaculis. dolor ac ac\n\n809Semper. consectetur Integer vel scelerisque Fusce amet, malesuada et bibendum, in, felis.\n\n810Condimentum ipsum molestie rutrum dui ut lorem Duis metus\nLorem enim ut\n\n811Eget amet, efficitur neque. in aliquam\nLorem semper Ut neque. libero primis\n\n812Semper. pharetra elit. Ut primis in adipiscing in, semper.\n\n813In bibendum, consectetur efficitur ac purus viverra Vivamus pharetra Duis\n\n814Eget Vivamus Ut et ac pharetra bibendum, rutrum primis dolor Interdum vel Interdum eget Fusce\n\n815Ac Interdum orci, Sed eget\n\n816Malesuada vitae metus ante Mauris ac et\n\n817Tortor eget finibus sem. in lorem semper nec in in, finibus\n\n818Ac et ipsum\nLorem orci metus In purus viverra ipsum ac est\n\n819Felis. ac velit. bibendum, massa Mauris\n\n820Posuere sit elit. iaculis. massa efficitur\n\n821Adipiscing efficitur lorem metus orci, pharetra et\n\n822Dui felis. Duis pretium ipsum sagittis efficitur orci, fringilla aliquam\n\n823Ut molestie dolor orci, elit. Mauris felis. finibus pharetra Duis Fusce vitae semper. lorem hendrerit\n\n824Mauris est primis elit. lorem ante ante lorem metus ut Integer\n\n825Posuere adipiscing pharetra elementum tincidunt. dolor efficitur scelerisque scelerisque sem. In nunc orci,\n\n826Ac malesuada tortor orci neque. et in Mauris\n\n827Est vitae consectetur Vivamus eget molestie pretium quis, metus sem. est elementum rutrum elit. Vivamus\n\n828Efficitur amet, viverra scelerisque condimentum consectetur ut condimentum Fusce finibus nunc massa ut ac\n\n829In semper. Integer nec sit consectetur\n\n830Metus enim massa, in, ac eget quis, pretium in faucibus. malesuada iaculis.\n\n831Semper.\nLorem finibus molestie ac Integer fringilla fringilla vitae pretium ipsum massa\n\n832Sit ipsum dolor scelerisque Vivamus rutrum\nLorem\n\n833Rutrum finibus massa eget sagittis Fusce nec purus pharetra amet, Duis velit. in, efficitur\n\n834In Interdum aliquam molestie In\nLorem volutpat lorem malesuada vel faucibus. ac\n\n835Duis elementum Fusce metus consectetur efficitur ante\n\n836Vivamus nunc ut Duis elementum ipsum elit. In\n\n837In malesuada In fringilla malesuada dolor tortor nec malesuada\n\n838Iaculis. pretium condimentum iaculis. adipiscing consectetur et rutrum eget sagittis lorem In\n\n839Fringilla in fringilla tortor finibus\n\n840Elit. Mauris in aliquam faucibus. tincidunt. ante ac massa, ut\n\n841Molestie bibendum, ante dolor ac sagittis\n\n842Elit. ut ante faucibus. faucibus. tortor ac Vivamus In hendrerit\n\n843Vivamus efficitur ac metus aliquam\n\n844Orci ac primis malesuada ac vel Ut finibus felis. malesuada malesuada fames volutpat scelerisque viverra\n\n845Ut orci aliquam hendrerit in tincidunt. pretium Fusce volutpat lorem amet, lorem sem. fames\n\n846Ante quis, purus in metus condimentum malesuada fringilla ac massa est\n\n847Dolor pretium semper. Fusce finibus nec ut et\n\n848Eget faucibus. eget massa, consectetur\n\n849Velit. volutpat in, rutrum rutrum orci,\n\n850Ipsum in in Ut eget in vel dui volutpat Sed Mauris massa, ut\n\n851Scelerisque Integer primis Vivamus metus\n\n852Semper. ac eget bibendum, dui dolor ligula ac\n\n853Malesuada lorem ut finibus scelerisque malesuada nec tortor consectetur felis. libero\n\n854\nLorem Duis sit efficitur eget ac\n\n855In libero massa vel libero ligula est\n\n856Efficitur in Integer consectetur dui nunc tortor Vivamus Integer ac finibus felis.\n\n857Pharetra ut orci elementum faucibus.\n\n858In, ante amet, ac ipsum et metus tortor ligula\n\n859Ipsum primis elit. lorem molestie dui Integer\n\n860Sagittis eget condimentum massa, elementum sem. Mauris\n\n861Mauris in posuere eget in felis. massa dui iaculis. Vivamus\n\n862In eget est posuere fringilla Duis in,\n\n863Dolor enim ac nec malesuada ac neque.\n\n864Massa, bibendum, libero fringilla rutrum\n\n865Vel neque. orci neque. vitae eget malesuada Interdum Duis bibendum, massa Fusce et Duis\n\n866Ipsum Integer dui ante ipsum\n\n867Faucibus. malesuada in, Duis elementum iaculis. Sed nec consectetur quis, et\nLorem\n\n868Eget ipsum nec sagittis ipsum eget ligula eget massa,\n\n869Volutpat Interdum consectetur ac efficitur ut\n\n870Purus elit. lorem Ut tortor in\n\n871Primis faucibus. tincidunt. et adipiscing Duis sit Fusce est libero sem.\n\n872Tortor sem. ut pretium nec ut et ligula ac ut volutpat primis dui vitae\n\n873\nLorem elit. massa vitae consectetur sit faucibus. est dolor In tortor\n\n874Massa ante bibendum, ipsum est est In Integer fringilla lorem rutrum in\n\n875Quis, Interdum orci, eget et malesuada efficitur Duis in nunc\n\n876Elit. fringilla Fusce ut semper massa dui\n\n877Interdum tincidunt. Mauris vel semper. nunc quis, in semper in, nec ut efficitur posuere hendrerit\n\n878Ut ante semper. ante orci, massa in, ligula pretium Ut primis faucibus.\n\n879Iaculis. efficitur metus ligula Interdum primis amet, elit. ligula ante scelerisque volutpat rutrum et\n\n880Ante faucibus. quis, metus ante volutpat Vivamus in felis. felis. ipsum\n\n881Pretium purus consectetur vitae aliquam ante ac dui ante pretium eget\n\n882Orci, pharetra ac nunc sagittis ante malesuada\n\n883Neque. primis Mauris sit velit.\n\n884Ut ac quis, ipsum eget et in\n\n885Efficitur pharetra dolor fringilla efficitur ante\n\n886Elit. Integer efficitur elit. est sem. ac Integer ac in, In scelerisque finibus\n\n887Tincidunt. eget volutpat elit. libero metus\n\n888Tincidunt. bibendum, aliquam efficitur Vivamus ante Integer ac pretium scelerisque ligula in efficitur Integer efficitur\n\n889Consectetur vitae ante fames Integer neque.\n\n890Ac amet, sit velit. semper. et nunc massa condimentum\n\n891Ipsum est pretium elit. condimentum purus bibendum,\n\n892Ac dolor enim in ligula et volutpat vitae elit. ipsum Vivamus in hendrerit ac consectetur\n\n893Amet, velit. primis Mauris aliquam faucibus.\n\n894Metus volutpat ut adipiscing faucibus. adipiscing\n\n895Ac ac efficitur metus aliquam dolor metus elit. purus efficitur ac sagittis primis molestie tortor\n\n896Velit. Vivamus eget orci Sed malesuada ipsum\n\n897Interdum purus orci, tincidunt. Fusce\nLorem in malesuada volutpat fringilla Integer pretium\n\n898Malesuada scelerisque nec purus metus in\n\n899Sed sit posuere ante Mauris Integer est\n\n900Interdum vitae metus malesuada est\nLorem Sed rutrum\nLorem enim vel efficitur metus\n\n901Quis, purus elementum bibendum, bibendum, elit. efficitur vitae massa consectetur eget felis. semper\n\n902Ipsum felis. et tincidunt. ut quis, efficitur\n\n903Elementum pharetra nunc ipsum vitae primis eget ligula Vivamus ac consectetur tortor\n\n904Dolor Mauris viverra eget aliquam enim ac sit sem. semper tincidunt.\n\n905Adipiscing volutpat in in, hendrerit amet, tortor In pretium orci\n\n906Mauris quis, ac posuere in in ipsum semper. pretium nunc nec efficitur\n\n907Elit. vitae Vivamus dolor ante sem. ut neque. orci, vitae In faucibus. In Mauris adipiscing\n\n908Integer est nunc Interdum bibendum,\n\n909Malesuada tincidunt. Interdum iaculis. sem. faucibus.\n\n910Faucibus. purus consectetur orci, massa, In nec vel\n\n911Ipsum orci velit. ante ac orci, neque. eget fames\n\n912Integer in ac ut ut amet, nec neque. libero vel ante Sed ante Mauris faucibus.\n\n913Eget quis, et Mauris fames ut nec enim\n\n914In ac Interdum viverra in, primis elementum pretium ac elit.\n\n915Primis dolor Sed in est ac orci, nunc molestie enim sit Interdum ut ante ante\n\n916Amet, et eget neque. ante libero\n\n917Molestie nunc eget enim et fringilla efficitur orci, pretium quis, Duis iaculis. orci,\n\n918Scelerisque ante fringilla ut volutpat rutrum Interdum Interdum fames efficitur\n\n919Finibus malesuada metus ac ligula elementum ac fames in in massa semper in ante Integer\n\n920Primis in, faucibus. nec Sed adipiscing metus bibendum, volutpat Ut Fusce adipiscing ipsum elit.\n\n921Tincidunt. elementum quis, dui enim ante orci, efficitur neque. neque. ac\n\n922In ligula consectetur posuere\nLorem sit sem. aliquam viverra\n\n923Sagittis eget Interdum Mauris nec enim sit hendrerit enim fringilla ac consectetur\n\n924Hendrerit est molestie bibendum, efficitur consectetur ac\n\n925Finibus elementum in, ipsum rutrum fringilla ante ligula libero Duis ac consectetur ut et sagittis\n\n926Nec ipsum dolor ante ut pretium ante pretium in in metus\n\n927\nLorem semper. neque. Ut ut\nLorem consectetur ac Integer massa\n\n928Ac adipiscing orci, ante primis finibus Fusce posuere amet, Ut in\n\n929Ac neque. elit. consectetur in, dolor massa vitae velit. tortor tincidunt. In sit eget\n\n930Enim nec ac pharetra ipsum fames ipsum\n\n931Condimentum elit. neque. adipiscing sagittis tincidunt. adipiscing consectetur primis vitae\n\n932Ut ut adipiscing in felis. Sed viverra\n\n933Condimentum purus efficitur bibendum, semper. Duis faucibus. in Integer in ut finibus\n\n934Ac elit. orci enim ac consectetur pharetra metus consectetur\n\n935Elit. viverra adipiscing condimentum malesuada efficitur viverra sagittis est molestie\n\n936In fames finibus ligula pretium consectetur libero Integer felis. Vivamus vitae dui neque.\n\n937Dolor ac elementum faucibus. quis, et eget faucibus.\n\n938Purus ante ante dui ac orci, volutpat Fusce in, semper.\n\n939Dolor sem. neque. Integer volutpat in, viverra molestie Sed consectetur primis semper. ante est\n\n940Dui nunc neque. elit. ut ante sit iaculis. consectetur est ipsum orci,\n\n941Aliquam Interdum Fusce ligula ut\n\n942Ante ante sem. ut molestie in ac bibendum, malesuada primis viverra\n\n943Elit. semper purus elit. scelerisque in ante massa velit. ante consectetur\n\n944Adipiscing rutrum semper posuere ante tortor pretium ipsum malesuada\n\n945Condimentum molestie ante faucibus. malesuada Sed in, ac in ac fringilla Interdum purus volutpat est\n\n946Ut finibus efficitur in ante felis. orci eget elit. pharetra massa, Vivamus ante tincidunt.\n\n947In, quis, molestie vel in ipsum viverra In Integer\n\n948Ac\nLorem lorem Duis volutpat sit Sed Interdum vitae hendrerit ligula massa faucibus. dolor ac\n\n949Faucibus. orci, Mauris ligula velit. ut neque. aliquam elit. elit. Sed malesuada pharetra quis, Fusce\n\n950Volutpat eget faucibus. lorem orci adipiscing bibendum, et massa vitae metus semper. faucibus. ut\n\n951Ac neque. Sed aliquam et consectetur aliquam ut ac iaculis. metus efficitur Interdum ac massa\n\n952Sagittis dui sem. metus in hendrerit fames in hendrerit in\n\n953Pretium elementum in ipsum Sed pharetra faucibus. elit. ipsum et volutpat aliquam\n\n954Mauris volutpat in elit. vel\n\n955In nec Interdum bibendum, eget in molestie ante amet, Duis\n\n956Neque. efficitur in malesuada ligula elit. faucibus. et iaculis. quis,\n\n957Eget efficitur enim Fusce nec Ut condimentum neque. velit.\n\n958Fames Mauris dui adipiscing consectetur ac efficitur hendrerit in\n\n959In, Fusce nunc nec enim Integer fringilla et posuere semper posuere lorem eget tincidunt.\n\n960Et ac efficitur Integer fringilla in quis, in in, eget est sem. primis sit\n\n961Ac eget sem. vitae ac dolor nec\n\n962Ante faucibus. felis. ante metus ante Duis orci Interdum\n\n963Ac iaculis. elementum Vivamus metus libero pharetra est ac\nLorem ante nunc felis. ipsum bibendum,\n\n964Semper semper. ante posuere enim massa in ligula malesuada purus ac ut ac aliquam ante\n\n965Iaculis. primis condimentum massa, velit. et quis, Mauris in et ipsum ac adipiscing bibendum, Fusce\n\n966Est tincidunt. neque. orci sem. Vivamus\n\n967Ipsum nunc Mauris massa, pharetra adipiscing vitae ligula\n\n968Ac tortor ac ut et massa, ac elit. orci, Interdum\n\n969Sit In ante neque. pharetra in elementum ante dolor Sed aliquam\n\n970Orci elit. iaculis. elit. libero vitae tortor rutrum elit. semper ligula Vivamus lorem bibendum,\n\n971Velit. rutrum consectetur vitae posuere fringilla elit. Mauris primis ut fringilla ac sit\n\n972Ante fames est efficitur ante consectetur Mauris ante semper. elit.\n\n973Ut in lorem Mauris neque. In efficitur iaculis. hendrerit Interdum tortor volutpat consectetur rutrum\n\n974Ac elementum Fusce sem. viverra quis, consectetur bibendum,\n\n975Vitae sem. efficitur est adipiscing consectetur Ut dui massa, ipsum volutpat\n\n976Ante fringilla ut bibendum, Ut dolor efficitur condimentum Duis In ligula\n\n977Dui felis. scelerisque massa ac eget elit. Ut efficitur in sem. bibendum, sit hendrerit\n\n978Elit. efficitur Vivamus Sed ante ut ante ac fringilla\n\n979Posuere primis sagittis in pharetra efficitur\nLorem\n\n980Orci massa, fringilla sagittis dolor massa, massa\nLorem finibus\n\n981Condimentum molestie volutpat pretium orci et faucibus. malesuada elit. in ac ante\n\n982Integer elementum pharetra sagittis primis et ac neque. ut dolor elit. bibendum,\n\n983Condimentum ac volutpat fames efficitur tortor ante\n\n984Elit. malesuada tincidunt. quis, iaculis. ligula metus hendrerit nec in eget in, libero neque. elementum\n\n985Pharetra ante molestie orci volutpat fames orci, consectetur neque. ac velit. Vivamus elementum ut\n\n986Semper fringilla orci et elit. semper metus in, lorem elit. est\n\n987Efficitur dui consectetur felis. hendrerit ut ipsum\n\n988Mauris sem. tincidunt. massa ligula enim in Fusce nec fames massa in eget eget\nLorem\n\n989Duis rutrum ante ipsum eget bibendum, malesuada In\n\n990Ac ligula dui nec pretium Interdum\n\n991Pretium faucibus. hendrerit finibus volutpat In massa,\nLorem finibus\n\n992Et massa, massa, elementum Duis elit. Integer elit. sem. metus efficitur felis. fames velit. ipsum\n\n993Hendrerit malesuada neque. primis in orci, elementum sit purus velit. viverra volutpat\n\n994\nLorem Ut iaculis. sit scelerisque massa ac iaculis. consectetur orci, nec volutpat orci,\n\n995Vitae eget molestie volutpat ac ac primis efficitur amet, eget ut aliquam ligula fringilla ipsum\n\n996Vel ante et malesuada fringilla ut Fusce ipsum ante libero Vivamus sagittis\n\n997Ut Mauris viverra finibus ac\nLorem ipsum pretium lorem et pretium\n\n998Tortor aliquam bibendum, Fusce ligula vitae efficitur\n\n999Ante libero ac hendrerit ac sit ac eget aliquam massa orci iaculis.\n\n1000Est ligula consectetur scelerisque ac purus\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |",
     "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!\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | undefined | 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 it's 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 | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | React.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. |\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 | 'md' \\| 'lg' | '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. When a single line is used, the input is saved on \"enter\" key. |\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 | undefined | 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 it's 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 | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | React.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. |\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 | 'md' \\| 'lg' | '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. When a single line is used, the input is saved on \"enter\" key. |\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 | undefined | 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 it's 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 | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | React.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. |\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 | 'md' \\| 'lg' | '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. When a single line is used, the input is saved on \"enter\" key. |\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 | undefined | 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 it's 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 | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | React.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. |\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 | 'md' \\| 'lg' | '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. When a single line is used, the input is saved on \"enter\" key. |\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 | undefined | 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 it's 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 | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | React.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. |\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 | 'md' \\| 'lg' | '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. When a single line is used, the input is saved on \"enter\" key. |\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 | undefined | 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 it's 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 | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | React.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. |\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 | 'md' \\| 'lg' | '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. When a single line is used, the input is saved on \"enter\" key. |\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 | undefined | 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 it's 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 | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | React.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. |\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 | 'md' \\| 'lg' | '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. When a single line is used, the input is saved on \"enter\" key. |\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 | undefined | 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 it's 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 | React.ReactNode | — | The error message that shall be shown to the user in case the validation fails. |\n| customEditor | React.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. |\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 | 'md' \\| 'lg' | '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. When a single line is used, the input is saved on \"enter\" key. |\n| inputClassName | string | — | Additional classes to be set on the editor input itself. |\n| editorClassName | string | — | Additional classes to be set on the editor wrapper element. |\n| className | string | — | Additional classes to be set on the text wrapper element. |",
     "category": "Components",
     "section": "Interaction",
     "boost": "EditableContent components/editableContent #components/editableContent Components Interaction"
@@ -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| title | string \\| React.ReactNode | — | The title to be shown in the expander header. |\n| bsStyle | 'blank' \\| 'default' \\| 'separator' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' | 'blank' | Component visual or contextual style variants. |\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| 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| 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| iconClassName | string | — | Additional classes added to the chevron icon |\n| className | string | — | Additional classes to be set on the wrapper element. |\n| children | React.ReactNode \\| ((isOpen: boolean) =React.ReactNode \\| JSX.Element) | — | Any element to be rendered inside the panel body. Providing a function enables the render prop approach. See https://reactjs.org/docs/render-props.html 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 \\| React.ReactNode | — | The title to be shown in the expander header. |\n| bsStyle | 'blank' \\| 'default' \\| 'separator' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' | 'blank' | Component visual or contextual style variants. |\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| 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| 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| iconClassName | string | — | Additional classes added to the chevron icon |\n| className | string | — | Additional classes to be set on the wrapper element. |\n| children | React.ReactNode \\| ((isOpen: boolean) =React.ReactNode \\| JSX.Element) | — | Any element to be rendered inside the panel body. Providing a function enables the render prop approach. See https://reactjs.org/docs/render-props.html 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 | ExpanderListItem[] | — | List of items to be rendered. The expanded state can be defined via the items open prop. |\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 \\| React.ReactNode | — | The header content. |\n| └body | string \\| React.ReactNode | — | 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| └onOpen | VoidFunction | — | Callback fired when item toggles to open after a click. |\n| └onClose | VoidFunction | — | Callback fired when item toggles to close after a click. |\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| └className | string | — | Additional classes to be set on list item node. |\n| rounded | boolean | true | Defines whether the \"expander-list-body\" is rounded or not. |\n| bordered | boolean | true | Defines whether the \"expander-list-body\" has a border or not. |\n| unmountOnExit | boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |\n| className | string | — | Additional classes to be set on the unordered list itself. |",
     "category": "Components",
     "section": "Show/Hide",
     "boost": "ExpanderPanel components/expander #components/expander Components Show/Hide"
@@ -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| show | boolean | true | Defines whether to show the content. |\n| duration | number | 0.2 | Duration of the fade animation in seconds. |\n| initial | boolean | false | Defines whether the animation is triggered initially when showing the content. |\n| animationStyle | 'fade' \\| 'tabs' \\| 'page' \\| 'pageBack' \\| 'fromLeft' \\| 'fromRight' \\| 'fromTop' \\| 'fromBottom' | 'fade' | Defines the desired animation style. Possible values are: - fade - tabs - page - pageBack - fromLeft - 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 | VoidFunction | () ={} | 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 &lt;motion.div&gt; component. 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. |\n| duration | number | 0.2 | Duration of the fade animation in seconds. |\n| initial | boolean | false | Defines whether the animation is triggered initially when showing the content. |\n| animationStyle | 'fade' \\| 'tabs' \\| 'page' \\| 'pageBack' \\| 'fromLeft' \\| 'fromRight' \\| 'fromTop' \\| 'fromBottom' | 'fade' | Defines the desired animation style. Possible values are: - fade - tabs - page - pageBack - fromLeft - 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 | VoidFunction | () ={} | 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 &lt;motion.div&gt; component. 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. |\n| duration | number | 0.2 | Duration of the fade animation in seconds. |\n| initial | boolean | false | Defines whether the animation is triggered initially when showing the content. |\n| animationStyle | 'fade' \\| 'tabs' \\| 'page' \\| 'pageBack' \\| 'fromLeft' \\| 'fromRight' \\| 'fromTop' \\| 'fromBottom' | 'fade' | Defines the desired animation style. Possible values are: - fade - tabs - page - pageBack - fromLeft - 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 | VoidFunction | () ={} | 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 &lt;motion.div&gt; component. 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. |\n| duration | number | 0.2 | Duration of the fade animation in seconds. |\n| initial | boolean | false | Defines whether the animation is triggered initially when showing the content. |\n| animationStyle | 'fade' \\| 'tabs' \\| 'page' \\| 'pageBack' \\| 'fromLeft' \\| 'fromRight' \\| 'fromTop' \\| 'fromBottom' | 'fade' | Defines the desired animation style. Possible values are: - fade - tabs - page - pageBack - fromLeft - 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 | VoidFunction | () ={} | 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 &lt;motion.div&gt; component. 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. |\n| duration | number | 0.2 | Duration of the fade animation in seconds. |\n| initial | boolean | false | Defines whether the animation is triggered initially when showing the content. |\n| animationStyle | 'fade' \\| 'tabs' \\| 'page' \\| 'pageBack' \\| 'fromLeft' \\| 'fromRight' \\| 'fromTop' \\| 'fromBottom' | 'fade' | Defines the desired animation style. Possible values are: - fade - tabs - page - pageBack - fromLeft - 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 | VoidFunction | () ={} | 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 &lt;motion.div&gt; component. Use this for additional customizations. |",
     "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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| show | boolean | false | Defines if the content is shown or not. |\n| duration | number | 0.2 | Allows customization of animation duration. |\n| delay | number | 0 | Delay in seconds before starting the animation. |\n| className | string | — | Additional classes set to the wrapper element. |",
     "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.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| delay | number | 0 | Defines the time the animation should wait until it starts. |\n| duration | number | 0.4 | Defines the duration in seconds of the fade up animation. |\n| offset | number | 15 | Defines the y offset from the bottom where the element starts to fade in. |\n| className | string | — | Additional classes names added to the motion div wrapper. |\nLorem ipsum dolor sit amet\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| delay | number | 0 | Defines the time the animation should wait until it starts. |\n| duration | number | 0.4 | Defines the duration in seconds of the fade up animation. |\n| offset | number | 15 | Defines the y offset from the bottom where the element starts to fade in. |\n| className | string | — | Additional classes names added to the motion div wrapper. |",
     "category": "Components",
     "section": "Show/Hide",
     "boost": "FadeUp components/fadeUp #components/fadeUp Components Show/Hide"
@@ -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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| headline | React.ReactNode | — | Optional headline |\n| count | number | 1 | The amount of toggle buttons used to rate. |\n| circleButtons | boolean | false | Defines whether the buttons are round. |\n| buttonClassName | string | — | Optional class names applied to all the buttons. If you need more control on styling individual buttons, see buttonStyles. |\n| buttonLabels | React.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. |\n| leftLabel | React.ReactNode | — | Left aligned label to name the lowest rating option. |\n| rightLabel | React.ReactNode | — | Right aligned label to name the highest rating option. |\n| leadingIcon | React.ReactNode | — | Additional icon placed in front of the rating buttons. |\n| trailingIcon | React.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 | React.ReactNode | — | Optional headline inlined with the buttons. |\n| buttons | React.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 | React.ReactNode | — | Optional headline inlined with the buttons. |\n| size | 'sm' \\| 'md' | 'md' | Size of the reaction buttons. |\n| labelPosition | 'right' \\| 'bottom' | 'bottom' | Position of the reaction button labels. |\n| labelUp | React.ReactNode | — | Label for the up button. |\n| labelDown | React.ReactNode | — | Label for the down button. |\n| colorFillUp | string | 'bg-lightest' | Custom fill color for the up button. |\n| colorFillDown | string | 'bg-lightest' | Custom fill color for the down button. |\n| colorHoverUp | string | 'primary' | Custom hover color for the up button. |\n| colorHoverDown | string | 'primary' | Custom hover color for the down button. |\n| onVoteUp | VoidFunction | — | Callback function triggered on up vote. |\n| onVoteDown | VoidFunction | — | Callback function triggered on down vote. |\n| itemClassName | string | — | Additional classes applied to the individual reaction item (button and label). |\n| animated | boolean | false | Defines whether the reaction icon is animated. |",
     "category": "Components",
     "section": "Misc",
     "boost": "FeedbackRating components/feedback #components/feedback Components Misc"
@@ -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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| displayMode | 'button' \\| 'dropzone' \\| 'full' | '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 \\| ReactNode | 'Select files' | Text to display on Button if displayMode is set to \"button\". |\n| maxSize | number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |\n| onPick | (files: File[], rejectedFiles: FileRejection[]) =void | — | Function called after one or multiple files have been picked. |\n| className | string | — | Additional classes for the select button. |\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| accept | { [mimeType: string]: string[]; } | — | Object list of accepted Mime Types as keys and file extensions array as value. |\n| children | ({ isDragActive }: FilePickerRenderProps) =React.ReactElement | — | 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 | 'button' \\| 'dropzone' \\| 'full' | '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 \\| ReactNode | 'Select files' | Text to display on Button if displayMode is set to \"button\". |\n| maxSize | number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |\n| onPick | (files: File[], rejectedFiles: FileRejection[]) =void | — | Function called after one or multiple files have been picked. |\n| className | string | — | Additional classes for the select button. |\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| accept | { [mimeType: string]: string[]; } | — | Object list of accepted Mime Types as keys and file extensions array as value. |\n| children | ({ isDragActive }: FilePickerRenderProps) =React.ReactElement | — | 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 | 'button' \\| 'dropzone' \\| 'full' | '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 \\| ReactNode | 'Select files' | Text to display on Button if displayMode is set to \"button\". |\n| maxSize | number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |\n| onPick | (files: File[], rejectedFiles: FileRejection[]) =void | — | Function called after one or multiple files have been picked. |\n| className | string | — | Additional classes for the select button. |\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| accept | { [mimeType: string]: string[]; } | — | Object list of accepted Mime Types as keys and file extensions array as value. |\n| children | ({ isDragActive }: FilePickerRenderProps) =React.ReactElement | — | Pass a custom dropzone element as function receiving some render props. |",
     "category": "Components",
     "section": "Pickers",
     "boost": "FilePicker components/filePickers #components/filePickers Components Pickers"
@@ -434,7 +434,7 @@
     "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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| supportingText | string \\| React.ReactElement | — | Additional supporting text displayed next to the label. |\n| className | string | — | Additional classes set to the outer 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| supportingText | string \\| React.ReactElement | — | Additional supporting text displayed next to the label. |\n| className | string | — | Additional classes set to the outer element. |",
     "category": "Components",
     "section": "Content",
     "boost": "FormLabel components/formLabel #components/formLabel Components Content"
@@ -444,7 +444,7 @@
     "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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | 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 | keyof T \\| ((item: T) =string) | 'name' | The property of the items to group by as a string, or a custom group function. Defaults to name if not provided. |\n| groupSortOrder | SortDirectionType | 'asc' | The order in which to sort the groups. Accepts asc for ascending or desc for descending. |\n| itemSortOrder | SortDirectionType | 'asc' | The order in which to sort the items inside a group. Accepts asc for ascending or desc for descending. |\n| groupSortFunction | (groups: Group[]) =Group[] | — | Sorting function for the groups. |\n| itemSortFunction | (items: T[]) =T[] | — | Sorting function for the items within each group. |\n| renderDivider | (groupKey: string) =React.ReactNode | — | A custom render function for the group divider. Receives the group key (e.g., letter or date) as a parameter. |\n| renderItem | (item: T) =React.ReactNode | — | A custom render function for individual list items. Receives an item as a parameter. |\n| listElement | 'div' \\| 'ul' | 'div' | Specifies the HTML element to use for the list inside each group. Default is div. Use ul for rendering the list items as <lielements. |\n| listElementClassName | string | — | Optional class name for the list element inside each group. Applied to the div or ul wrapping the items. |\n| dividerElementClassName | string | — | Optional class name for the divider element in each group. Applied to the div wrapping each group divider. |\n| className | string | — | Optional class name for the outer wrapper element. Applied 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 | T[] | — | 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 | keyof T \\| ((item: T) =string) | 'name' | The property of the items to group by as a string, or a custom group function. Defaults to name if not provided. |\n| groupSortOrder | SortDirectionType | 'asc' | The order in which to sort the groups. Accepts asc for ascending or desc for descending. |\n| itemSortOrder | SortDirectionType | 'asc' | The order in which to sort the items inside a group. Accepts asc for ascending or desc for descending. |\n| groupSortFunction | (groups: Group[]) =Group[] | — | Sorting function for the groups. |\n| itemSortFunction | (items: T[]) =T[] | — | Sorting function for the items within each group. |\n| renderDivider | (groupKey: string) =React.ReactNode | — | A custom render function for the group divider. Receives the group key (e.g., letter or date) as a parameter. |\n| renderItem | (item: T) =React.ReactNode | — | A custom render function for individual list items. Receives an item as a parameter. |\n| listElement | 'div' \\| 'ul' | 'div' | Specifies the HTML element to use for the list inside each group. Default is div. Use ul for rendering the list items as <lielements. |\n| listElementClassName | string | — | Optional class name for the list element inside each group. Applied to the div or ul wrapping the items. |\n| dividerElementClassName | string | — | Optional class name for the divider element in each group. Applied to the div wrapping each group divider. |\n| className | string | — | Optional class name for the outer wrapper element. Applied 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 | T[] | — | 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 | keyof T \\| ((item: T) =string) | 'name' | The property of the items to group by as a string, or a custom group function. Defaults to name if not provided. |\n| groupSortOrder | SortDirectionType | 'asc' | The order in which to sort the groups. Accepts asc for ascending or desc for descending. |\n| itemSortOrder | SortDirectionType | 'asc' | The order in which to sort the items inside a group. Accepts asc for ascending or desc for descending. |\n| groupSortFunction | (groups: Group[]) =Group[] | — | Sorting function for the groups. |\n| itemSortFunction | (items: T[]) =T[] | — | Sorting function for the items within each group. |\n| renderDivider | (groupKey: string) =React.ReactNode | — | A custom render function for the group divider. Receives the group key (e.g., letter or date) as a parameter. |\n| renderItem | (item: T) =React.ReactNode | — | A custom render function for individual list items. Receives an item as a parameter. |\n| listElement | 'div' \\| 'ul' | 'div' | Specifies the HTML element to use for the list inside each group. Default is div. Use ul for rendering the list items as <lielements. |\n| listElementClassName | string | — | Optional class name for the list element inside each group. Applied to the div or ul wrapping the items. |\n| dividerElementClassName | string | — | Optional class name for the divider element in each group. Applied to the div wrapping each group divider. |\n| className | string | — | Optional class name for the outer wrapper element. Applied to the outer div wrapping the entire component. |",
     "category": "Components",
     "section": "Content",
     "boost": "GroupedItemList components/groupedItemList #components/groupedItemList Components Content"
@@ -464,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| src | string | — | The URL of the image to load. |\n| onLoaded | (image: HTMLImageElement) =void | — | Invoked when the image is loaded. |\n| onFailed | (image: HTMLImageElement) =void | — | Invoked when the image failed to load. |\n| isAnonymous | boolean | false | Whether to set the \"crossOrigin\" to \"anonymous\". |\n| children | (props: { status: ImagePreloaderStatus; image: HTMLImageElement; }) =JSX.Element \\| null | — | A render function can be used to access both the current state and the image element. Using this, you can decide how to render the different states and/or the loaded image. The function will receive props containing the status and image properties. status will be one of PENDING, FAILED or LOADED. image is the Image element. |",
     "category": "Components",
     "section": "Misc",
     "boost": "ImagePreloader components/imagePreloader #components/imagePreloader Components Misc"
@@ -474,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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | string \\| React.ReactElement | — | The text to display for the label. |\n| htmlFor | string | — | Optional ID of the element associated with the label. |\n| labelProps | Omit<FormLabelProps, 'children'| — | 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 for styling the wrapper. |",
     "category": "Components",
     "section": "Content",
     "boost": "LabeledElement components/labeledElement #components/labeledElement Components Content"
@@ -484,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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| countryCode | string | — | The country code. Should be a string with 1-3 capital letters. |\n| hideStars | boolean | — | Whether the EU stars should be hidden. |\n| className | string | — | Additional classes added to the wrapping element. |",
     "category": "Components",
     "section": "Misc",
     "boost": "LicensePlate components/licensePlate #components/licensePlate Components Misc"
@@ -504,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\n### ListMenu\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| menuItems | ListMenuItem<T[] | — | List of menu item groups to be shown. |\n| └group | string \\| ReactNode | — | The optional group header to be shown. This can also be a component such as a FormattedMessage. |\n| └groupNavItem | string \\| ReactNode | — | The optional group header link to be shown. This can be a link component such as NavLink or Link. This way, the header can be a link itself. In this case, the group prop can be omitted. |\n| └badge | string \\| ReactNode | — | The optional badge displayed alongside the group or nav items. This can be text or a React node for additional flexibility. |\n| └badgeType | 'muted' \\| 'success' \\| 'info' \\| 'warning' \\| 'danger' | — | The type of badge to display. Determines the visual style of the badge. Available types include: muted: A subdued badge style. success: Indicates a successful state. info: Represents informational content. warning: Warns of potential issues. danger: Highlights a critical state. |\n| └navItems | T[] | — | The list of all menu items of a group. |\n| enableFilter | boolean | false | Enables the filter. |\n| focusFilter | boolean | false | Focus the filter input. |\n| filterKey | keyof T | 'key' | Define the attribute key for filtering. |\n| filterPlaceholder | string | — | The placeholder text for the filter input. |\n| onFilterChange | (value: string) =void | — | Gets called when the filter input changes. |\n| notFoundMessage | string \\| ReactNode | — | A localized message to be shown when the 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 closing 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 a list item! Using event.stopPropagation() will prevent the panel from closing. |\n| groupClassName | string | — | Additional classes to be set on the menu group element. |\n| trailingInputAddon | React.ReactNode | — | Additional addon for the input group. |\n| className | string | — | Additional classes to be set on the wrapper element. |\n### ListMenuNavItem\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| 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| item | string \\| ReactNode | — | The menu nav item itself. This can be a simple <a, <NavLink, <Link, <spanor even a <FormattedMessage. |\n| disabled | boolean | false | Disables the list item. |\n| isSubItem | boolean | — | Whether the current menu item is a child of another menu item. |\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### ListMenu\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| menuItems | ListMenuItem<T[] | — | List of menu item groups to be shown. |\n| └group | string \\| ReactNode | — | The optional group header to be shown. This can also be a component such as a FormattedMessage. |\n| └groupNavItem | string \\| ReactNode | — | The optional group header link to be shown. This can be a link component such as NavLink or Link. This way, the header can be a link itself. In this case, the group prop can be omitted. |\n| └badge | string \\| ReactNode | — | The optional badge displayed alongside the group or nav items. This can be text or a React node for additional flexibility. |\n| └badgeType | 'muted' \\| 'success' \\| 'info' \\| 'warning' \\| 'danger' | — | The type of badge to display. Determines the visual style of the badge. Available types include: muted: A subdued badge style. success: Indicates a successful state. info: Represents informational content. warning: Warns of potential issues. danger: Highlights a critical state. |\n| └navItems | T[] | — | The list of all menu items of a group. |\n| enableFilter | boolean | false | Enables the filter. |\n| focusFilter | boolean | false | Focus the filter input. |\n| filterKey | keyof T | 'key' | Define the attribute key for filtering. |\n| filterPlaceholder | string | — | The placeholder text for the filter input. |\n| onFilterChange | (value: string) =void | — | Gets called when the filter input changes. |\n| notFoundMessage | string \\| ReactNode | — | A localized message to be shown when the 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 closing 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 a list item! Using event.stopPropagation() will prevent the panel from closing. |\n| groupClassName | string | — | Additional classes to be set on the menu group element. |\n| trailingInputAddon | React.ReactNode | — | Additional addon for the input group. |\n| className | string | — | Additional classes to be set on the wrapper element. |\n### ListMenuNavItem\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| 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| item | string \\| ReactNode | — | The menu nav item itself. This can be a simple <a, <NavLink, <Link, <spanor even a <FormattedMessage. |\n| disabled | boolean | false | Disables the list item. |\n| isSubItem | boolean | — | Whether the current menu item is a child of another menu item. |",
     "category": "Components",
     "section": "Misc",
     "boost": "ListMenu components/listMenu #components/listMenu Components Misc"
@@ -514,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\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| noMoreMessage | string \\| ReactNode | — | The message that will be shown when everything is loaded. |\n| loadMoreMessage | string \\| ReactNode | — | The text for the load more button. |\n| isInteractive | boolean | true | If set to false, the button will not be rendered. The loadMoreMessage will be shown as text. |\n| onLoadMore | VoidFunction | — | Callback fired when clicking on the load more button. |\n| progressBarStyle | ProgressBarStyle | 'white' | In case the component is used on white background, set the progress bar style to gray. |\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| noMoreMessage | string \\| ReactNode | — | The message that will be shown when everything is loaded. |\n| loadMoreMessage | string \\| ReactNode | — | The text for the load more button. |\n| isInteractive | boolean | true | If set to false, the button will not be rendered. The loadMoreMessage will be shown as text. |\n| onLoadMore | VoidFunction | — | Callback fired when clicking on the load more button. |\n| progressBarStyle | ProgressBarStyle | 'white' | In case the component is used on white background, set the progress bar style to gray. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
     "category": "Components",
     "section": "Interaction",
     "boost": "LoadMoreButton components/loadMore #components/loadMore Components Interaction"
@@ -654,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"
@@ -674,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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| text | string \\| React.ReactNode | — | The actual translated \"No data\" text. |\n| tooltip | string \\| React.ReactNode | — | Additional explanation shown inside a tooltip. |\n| tooltipPlacement | ObjectValues<typeof PLACEMENT| — | 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, left-end |\n| tooltipWidth | TooltipWidth | — | The width of the tooltip. 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 \\| React.ReactNode | — | The actual translated \"No data\" text. |\n| tooltip | string \\| React.ReactNode | — | Additional explanation shown inside a tooltip. |\n| tooltipPlacement | ObjectValues<typeof PLACEMENT| — | 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, left-end |\n| tooltipWidth | TooltipWidth | — | The width of the tooltip. Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |\n| className | string | — | Additional class names to be added to the wrapping element. |",
     "category": "Components",
     "section": "Content",
     "boost": "NoData components/noData #components/noData Components Content"
@@ -694,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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A native input id attribute. Passed through as HTML attribute to the input element. |\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. Used to control the component from the outside. |\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| step | number | 1 | The size of increment or decrement (only works with number type). |\n| disabled | boolean | false | Enables or disabled the input. |\n| onChange | (value?: number) =void | — | Callback function triggered when the input value changes. When the value is removed by the user, the input is kept empty, but it triggers the callback without any value since the user has finished his input. |\n| onKeyDown | (event: React.KeyboardEvent<HTMLInputElement) =void | — | Callback function that gets triggered after filtering out invalid keystrokes. |\n| bsSize | 'sm' \\| 'md' \\| 'lg' | 'md' | Defines the size of the input to be rendered. |\n| unit | string \\| React.ReactNode | — | A unit for this value. This will be shown in a dedicated input addon. |\n| inputAddon | string | — | A rioglyph icon tio be shown in front of the input. |\n| errorMessage | string \\| React.ReactNode | — | Input error message. |\n| warningMessage | string \\| React.ReactNode | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Feedback message width. |\n| controls | React.ReactNode | — | This prop is used by the NumberControl component to pass on the +/- spinner controls. |\n| placeholder | string | — | The input placeholder if no value is given. |\n| digitPrecision | number | 3 | Number of digits after the comma the value should be fixed to. |\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| id | string | — | A native input id attribute. Passed through as HTML attribute to the input element. |\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. Used to control the component from the outside. |\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| step | number | 1 | The size of increment or decrement (only works with number type). |\n| disabled | boolean | false | Enables or disabled the input. |\n| onChange | (value?: number) =void | — | Callback function triggered when the input value changes. When the value is removed by the user, the input is kept empty, but it triggers the callback without any value since the user has finished his input. |\n| onKeyDown | (event: React.KeyboardEvent<HTMLInputElement) =void | — | Callback function that gets triggered after filtering out invalid keystrokes. |\n| bsSize | 'sm' \\| 'md' \\| 'lg' | 'md' | Defines the size of the input to be rendered. |\n| unit | string \\| React.ReactNode | — | A unit for this value. This will be shown in a dedicated input addon. |\n| inputAddon | string | — | A rioglyph icon tio be shown in front of the input. |\n| errorMessage | string \\| React.ReactNode | — | Input error message. |\n| warningMessage | string \\| React.ReactNode | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Feedback message width. |\n| controls | React.ReactNode | — | This prop is used by the NumberControl component to pass on the +/- spinner controls. |\n| placeholder | string | — | The input placeholder if no value is given. |\n| digitPrecision | number | 3 | Number of digits after the comma the value should be fixed to. |\n| className | string | — | Additional classes to be set on the component. |",
     "category": "Components",
     "section": "Interaction",
     "boost": "NumberInput components/numbercontrol #components/numbercontrol Components Interaction"
@@ -704,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\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 | TextAlignment | 'left' | Define how the text should be aligned. Possible values are: left center right |\n| width | TooltipWidth | — | The tooltip's width. Possible values are: auto 100 150 200 250 300 350 400 450 500 |\n| onHide | VoidFunction | () ={} | 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 \\| ReactNode | — | The title of the onboarding tip. |\n| content | string \\| ReactNode | — | The content of the onboarding tip. |\n| preventOverflow | boolean | true | Prevents onboarding tips from being cut off horizontally at screen borders. |\n| popperConfig | PopperConfig | — | A Popper.js config object passed to the underlying popper instance. |\n| placement | Placement | 'bottom' | Define how the component should be placed. Possible values are: auto-start auto auto-end top-start top top-end right-start right right-end bottom-start bottom bottom-end left-start left 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",
     "category": "Components",
     "section": "Misc",
     "boost": "Onboarding components/onboarding #components/onboarding Components Misc"
@@ -714,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.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page. Please make sure the element does not get stretched when using flexbox. |\n| orientation | 'portrait' \\| 'landscape' | 'portrait' | Defines the layout of the page |\n| shadow | boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |\n| border | boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |\n| className | string | — | Additional classes to be set on the wrapper element |\nPage 1\n\nPage 2\n\nPage 3\n\nPage 4\n\nPage 5\n\nPage 6\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page. Please make sure the element does not get stretched when using flexbox. |\n| orientation | 'portrait' \\| 'landscape' | 'portrait' | Defines the layout of the page |\n| shadow | boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |\n| border | boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |\n| className | string | — | Additional classes to be set on the wrapper element |\nPortrait\n\nLandscape\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page. Please make sure the element does not get stretched when using flexbox. |\n| orientation | 'portrait' \\| 'landscape' | 'portrait' | Defines the layout of the page |\n| shadow | boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |\n| border | boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |\n| className | string | — | Additional classes to be set on the wrapper element |",
     "category": "Components",
     "section": "Content",
     "boost": "Page components/page #components/page Components Content"
@@ -724,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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | string \\| React.ReactNode | — | The title or name of the section next/previous section. |\n| label | string \\| React.ReactNode | — | 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| variant | ObjectValues<typeof PagerVariant| full | Define how large the component should be rendered. Possible values are: Pager.VARIANTFULL, Pager.VARIANTCOMPACT or full, compact. |\n| disabled | boolean | false | Sets the pager disabled. |\n| onClick | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback function for when the component is clicked. |\n| className | string | — | Additional classes for the wrapper element. |",
     "category": "Components",
     "section": "Navigation",
     "boost": "Pager components/pager #components/pager Components Navigation"
@@ -744,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"
@@ -754,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′\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| latitude | number | — | The latitude to display. |\n| longitude | number | — | The longitude to display. |\n| address | string | — | Can be used to override the default output. |",
     "category": "Components",
     "section": "Misc",
     "boost": "Position components/position #components/position Components Misc"
@@ -774,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| icon | string | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconLabelPosition | 'vertical' \\| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |\n| iconSize | number | 16 | The icon Size in px. |\n| label | string \\| ReactNode | — | Defines the label text. |\n| onClick | MouseEventHandler<{ value: string \\| string[] \\| number; }| () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | ChangeEventHandler | () ={} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |\n| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |\n| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |\n| disabled | boolean | false | Defines whether the checkbox is disabled. |\n| className | string | — | Additional classes to be set on the input element. |\n| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with 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| name | string | — | Name to be given to the input element. |\n| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |\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<HTMLInputElement| — | Ref which is added to the input element. |\nControlled example\nOption 1Option 2Option 3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | string | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconLabelPosition | 'vertical' \\| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |\n| iconSize | number | 16 | The icon Size in px. |\n| label | string \\| ReactNode | — | Defines the label text. |\n| onClick | MouseEventHandler<{ value: string \\| string[] \\| number; }| () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | ChangeEventHandler | () ={} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |\n| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |\n| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |\n| disabled | boolean | false | Defines whether the checkbox is disabled. |\n| className | string | — | Additional classes to be set on the input element. |\n| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with 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| name | string | — | Name to be given to the input element. |\n| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |\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<HTMLInputElement| — | Ref which is added to the input element. |\nRadioButton with FormData\nPlease contact me viaEmailPhone\nSubmit selectionSelected value-\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | string | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconLabelPosition | 'vertical' \\| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |\n| iconSize | number | 16 | The icon Size in px. |\n| label | string \\| ReactNode | — | Defines the label text. |\n| onClick | MouseEventHandler<{ value: string \\| string[] \\| number; }| () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | ChangeEventHandler | () ={} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |\n| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |\n| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |\n| disabled | boolean | false | Defines whether the checkbox is disabled. |\n| className | string | — | Additional classes to be set on the input element. |\n| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with 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| name | string | — | Name to be given to the input element. |\n| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |\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<HTMLInputElement| — | Ref which is added to the input element. |\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| icon | string | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconLabelPosition | 'vertical' \\| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |\n| iconSize | number | 16 | The icon Size in px. |\n| label | string \\| ReactNode | — | Defines the label text. |\n| onClick | MouseEventHandler<{ value: string \\| string[] \\| number; }| () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | ChangeEventHandler | () ={} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |\n| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |\n| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |\n| disabled | boolean | false | Defines whether the checkbox is disabled. |\n| className | string | — | Additional classes to be set on the input element. |\n| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with 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| name | string | — | Name to be given to the input element. |\n| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |\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<HTMLInputElement| — | Ref which is added to the input element. |\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| icon | string | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconLabelPosition | 'vertical' \\| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |\n| iconSize | number | 16 | The icon Size in px. |\n| label | string \\| ReactNode | — | Defines the label text. |\n| onClick | MouseEventHandler<{ value: string \\| string[] \\| number; }| () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | ChangeEventHandler | () ={} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |\n| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |\n| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |\n| disabled | boolean | false | Defines whether the checkbox is disabled. |\n| className | string | — | Additional classes to be set on the input element. |\n| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with 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| name | string | — | Name to be given to the input element. |\n| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |\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<HTMLInputElement| — | Ref which is added to the input element. |\nCustom list example\nVehicle type\nTruck\n\nTrailer\n\nBus\n\nVan\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | string | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconLabelPosition | 'vertical' \\| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |\n| iconSize | number | 16 | The icon Size in px. |\n| label | string \\| ReactNode | — | Defines the label text. |\n| onClick | MouseEventHandler<{ value: string \\| string[] \\| number; }| () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | ChangeEventHandler | () ={} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |\n| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |\n| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |\n| disabled | boolean | false | Defines whether the checkbox is disabled. |\n| className | string | — | Additional classes to be set on the input element. |\n| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with 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| name | string | — | Name to be given to the input element. |\n| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |\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<HTMLInputElement| — | Ref which is added to the input element. |\nCustom example without the tick\n4 GB\n8 GB\n16 GB\n32 GB\n64 GB\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | string | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconLabelPosition | 'vertical' \\| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |\n| iconSize | number | 16 | The icon Size in px. |\n| label | string \\| ReactNode | — | Defines the label text. |\n| onClick | MouseEventHandler<{ value: string \\| string[] \\| number; }| () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | ChangeEventHandler | () ={} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |\n| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |\n| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |\n| disabled | boolean | false | Defines whether the checkbox is disabled. |\n| className | string | — | Additional classes to be set on the input element. |\n| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with 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| name | string | — | Name to be given to the input element. |\n| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |\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<HTMLInputElement| — | Ref which is added to the input element. |\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| icon | string | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| iconLabelPosition | 'vertical' \\| 'horizontal' | 'vertical' | The label position. Possible values are: 'horizontal' or 'vertical'. |\n| iconSize | number | 16 | The icon Size in px. |\n| label | string \\| ReactNode | — | Defines the label text. |\n| onClick | MouseEventHandler<{ value: string \\| string[] \\| number; }| () ={} | Callback function that is invoked when the radio button is clicked. |\n| onChange | ChangeEventHandler | () ={} | Callback function that is invoked when the radio button is toggled and the state should change (for controlled usage). |\n| checked | boolean | — | Defines whether the radio is checked (for controlled usage). |\n| defaultChecked | boolean | — | Defines whether the radio is initially checked (state can be changed on click). |\n| disabled | boolean | false | Defines whether the checkbox is disabled. |\n| className | string | — | Additional classes to be set on the input element. |\n| inline | boolean | false | Defines whether the radio button is applying an inline style. Use this in combination with 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| name | string | — | Name to be given to the input element. |\n| value | string | — | The value attribute is a string containing the radio button's value but it is never shown to the user. It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is useful when using native FormData when submitting a form to get the selected radio button value. |\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<HTMLInputElement| — | Ref which is added to the input element. |",
     "category": "Components",
     "section": "Interaction",
     "boost": "RadioButton components/radiobutton #components/radiobutton Components Interaction"
@@ -794,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):\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| position | typeof LEFT \\| typeof RIGHT \\| typeof TOP \\| typeof BOTTOM | — | Defines where the resize handle is positioned relative to the element to resize. Possible values are: Resizer.LEFT, Resizer.RIGHT, Resizer.TOP, Resizer.BOTTOM 'left', 'right', 'top', 'bottom' |\n| direction | typeof HORIZONTAL \\| typeof VERTICAL | — | Defines on which axis to resize. Possible values are: Resizer.HORIZONTAL Resizer.VERTICAL 'x' 'y' |\n| onResizeStart | (event: MouseEvent \\| TouchEvent) =void | — | Callback when the resize starts, means when the handle is pressed. It returns the respective event. |\n| onResize | (diff: number) =void | — | 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| onResizeEnd | (event: Event) =void | — | Callback when the resize ends, means when the handle is released. It returns the respective event. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
     "category": "Components",
     "section": "Misc",
     "boost": "Resizer components/resizer #components/resizer Components Misc"
@@ -804,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\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 | keyof ReactHTML | 'div' | The DOM element type of the wrapping column element. If you need a list, this might be set to \"ul\". |\n| disableAnimation | boolean | false | Set to true to skip animating pages. |\n| onPreviousClick | (pageNumber: number, columnsPerPage: number) =void | — | Callback function for when the previous page is clicked. |\n| onNextClick | (pageNumber: number, columnsPerPage: number) =void | — | Callback function for when the next page is clicked. |\n| buttonClassName | string | — | Additional classes set to the navigation buttons. |\n| columnsWrapperClassName | string | — | Additional classes set to the component wrapper element. |\n| className | string | — | Additional classes set to the column wrapper element. |",
     "category": "Components",
     "section": "Content",
     "boost": "ResponsiveColumnStripe components/responsiveColumnStripe #components/responsiveColumnStripe Components Content"
@@ -814,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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| src | string | — | The link to the source of the video file. |\n| aspectRatio | '4by3' \\| '16by9' | '16by9' | Defined the aspect ratio of the video. Possible values are: ResponsiveVideo.ASPECTRATIO4BY3 ResponsiveVideo.ASPECTRATIO16BY9 '4by3' '16by9' |\n| allowFullScreen | boolean | true | Allows the fullscreen feature of the underlying embedded iframe. |\n| className | string | — | Additional classes added to the wrapping element. |",
     "category": "Components",
     "section": "Misc",
     "boost": "Responsive Video components/responsiveVideo #components/responsiveVideo Components Misc"
@@ -824,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 | — | The rioglyph icon string OR an external .svg link |\n| iconClassName | string | — | Additional classes set to the icon span. |\n| size | 'h1' \\| 'h2' \\| 'h3' \\| 'h4' \\| 'h5' \\| 'h6' \\| '10' \\| '11' \\| '12' \\| '14' \\| '16' \\| '18' \\| '20' | — | The size (text-size) of the icon |\n| spinning | boolean | false | Spinning animation. |\n| pulsing | boolean | false | Pulsing animation. |\n| filled | boolean | false | Filled style. |\n| disabled | boolean | false | Add a disabled line |\n| disabledDanger | boolean | false | Recolor the disabled line to the danger color. |\n| disabledInverse | boolean | false | Flip the disabled line. |\n| pairIcon | IconType \\| string | — | The rioglyph icon string OR an external .svg link. |\n| pairIconClassName | string | — | Additional classes set to the pairIcon span. |",
     "category": "Components",
     "section": "Misc",
     "boost": "Rioglyph components/rioglyph #components/rioglyph Components Misc"
@@ -834,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\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 \\| JSX.Element | — | Overwrites the default connector. |\n| className | string | — | Additional classes for the wrapper element. |\n### RuleConnector\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placement | 'start' \\| 'center' \\| 'end' | '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 \\| JSX.Element | — | Overwrites the default connector. |\n| className | string | — | Additional classes for the wrapper element. |\n### RuleConnector\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placement | 'start' \\| 'center' \\| 'end' | '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 \\| JSX.Element | — | Overwrites the default connector. |\n| className | string | — | Additional classes for the wrapper element. |\n### RuleConnector\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placement | 'start' \\| 'center' \\| 'end' | 'center' | The placement for the connector. Possible values are start, center and end. |\n| icon | string | 'rioglyph-plus' | The rioglyph icon name. |\n| hidden | boolean | false | Defines whether the connector is shown. |\n| background | string | 'bg-lightest' | Background color of the connector itself. |\n| pageBackground | string | 'bg-white' | Background color of the surrounding area where the rule containers are placed. |\n| contentClassName | string | 'text-color-light' | Classes to be set on the connector content. |\n| hasBorder | boolean | false | Defines whether the connector has a border. |\n| borderColor | string | — | The border color class name. |\n| className | string | — | Additional classes for the wrapper element. |",
     "category": "Components",
     "section": "Misc",
     "boost": "RulesWrapper, RuleContainer and RuleConnector components/rules #components/rules Components Misc"
@@ -844,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‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\nControlled - Stay open on invalid (default)\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n01:11\n\nSaved value:\n\nControlled - With error\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nSaveableDateInput (disabled)\n\n‹January 2026›\nSuMoTuWeThFrSa\n\n28293031123\n45678910\n11121314151617\n18192021222324\n25262728293031\n1234567\n\n1:11 PM\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | Date \\| Moment \\| String | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: Moment \\| string, previousValue: Moment \\| string \\| Date) =void | — | Callback function triggered when the value changes and is saved. |\n| onInputChange | (value: Moment \\| string, isValid: boolean) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component and to handle the previous value on the outside. |\n| onExitEdit | (wasSaved: boolean) =void | — | Callback function that gets triggered when edit mode is exited (either saved or cancelled). |\n| onCancel | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| invalidExitBehavior | \"stay-open\" \\| \"reset-and-close\" | \"stay-open\" | Behavior when trying to exit edit mode with invalid input: stay-open: Keep edit mode open until valid input is provided reset-and-close: Close edit mode and reset to initial value |\n| buttonStyle | \"default\" \\| \"primary\" | — | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | — | Props passed directly to the date picker component. |\n| disabled | Boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |",
+    "searchText": "SaveableInput\nSaveableInput\nSaveableInput\n\nSaveableInput with value\n\nSaveableInput with previous value\nDolor sit amet\n\nSaveableInput with fixed previous value\nYou shall not pass\n\nSaveableInput with default button style\n\nSaveableInput with unit and icon\nPcs\n\nSaveableInput with feedback\nLab\n\nThis is an error message\n\nDisabled SaveableInput\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nWith error feedback and disabled save button\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput\n\nRandomize valuesClear values\n\n{\nvalue: '',\npreviousValue: ''\n}\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput with key validation\nPcs\n\n{\nvalue: '0',\npreviousValue: ''\n}\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nSaveableDateInput\nSaveableDateInput (uncontrolled)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nControlled - Stay open on invalid (default)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n03:04\n\nSaved value:\n\nControlled - With error\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nSaveableDateInput (disabled)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n3:04 PM\n### SaveableDateInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| value | Date \\| Moment \\| string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: Moment \\| string, previousValue: Moment \\| string \\| Date) =void | — | Callback function triggered when the value changes and is saved. |\n| onInputChange | (value: Moment \\| string, isValid: boolean) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component and to handle the previous value on the outside. |\n| onExitEdit | (wasSaved: boolean) =void | — | Callback function that gets triggered when edit mode is exited (either saved or cancelled). |\n| onCancel | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| invalidExitBehavior | 'stay-open' \\| 'reset-and-close' | 'stay-open' | Behavior when trying to exit edit mode with invalid input: - 'stay-open': Keep edit mode open until valid input is provided - 'reset-and-close': Close edit mode and reset to initial value |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | {} | Additional props passed to the underlying DatePicker component. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
     "category": "Components",
     "section": "Interaction",
     "boost": "SaveableInput components/saveableInput #components/saveableInput Components Interaction"
@@ -854,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"
@@ -864,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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| closed | boolean | false | Defines whether the component is hidden or not. |\n| disableClose | boolean | false | Hides the close button. This may be used when the sidebar is always visible and may not be closed. |\n| onClose | VoidFunction | — | Callback function triggered when clicking the close icon. |\n| footer | string \\| React.ReactNode | — | The Footer content. For example a save button. |\n| footerClassName | string | — | Additional classes added to the Sidebar footer. |\n| headerButtons | React.ReactNode | — | Additional buttons to be rendered in the header. |\n| headerClassName | string | — | Additional classes added to the Sidebar header. |\n| showHeaderBorder | boolean | — | Shows a sidebar header border |\n| width | number | 350 | Defines the width of the component. The value is set as pixel value as inline style. Note: In the past, the type allowed to pass in a sting value like \"400px\" but that is not possible anymore due to internal width calculations. To be backwards compatible for non Typescript projects, the width is converted to a number. |\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| 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| position | ObjectValues<typeof SidebarPosition| 'left' | Tells the sidebar where it is positioned. This will affect the resizing behavior respectively. Note: the position need to be set properly whe using the resize functionality to know on which side of the sidebar to attach the resizer handle. It is also relevant when the sidebar mode is set to fly to properly animate the sidebar into the view. Possible values are: 'left' 'right' Sidebar.LEFT Sidebar.RIGHT |\n| resizable | boolean | false | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | VoidFunction | — | Callback for when the resize is done. |\n| switchModeBreakpoint | number | — | 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| disableEsc | boolean | false | By default the fullscreen mode can be left with \"esc\". If this is unwanted it can be disabled. |\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| bodyRef | React.MutableRefObject<HTMLDivElement \\| null| — | Additional ref added to the Sidebar body. |\n| title | string \\| React.ReactNode | — | Content that will be displayed in the components header. |\n| titleClassName | string | — | Additional classes added to the Sidebar title. |\n| backdropClassName | string | — | Additional classes added to the Sidebar backdrop. |\n| bodyClassName | string | — | Additional classes added to the Sidebar body. |\n| className | string | — | Additional classes added on the wrapper element. |",
     "category": "Components",
     "section": "Application",
     "boost": "Sidebar components/sidebar #components/sidebar Components Application"
@@ -874,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 %\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| valueLabelUnit | string \\| React.ReactNode | — | Additional unit used for the slider value label. |\n| hideValueBar | boolean | false | Whether to hide the dark-colored value bar. |\n| largeValueLabels | boolean | false | Whether to show larger value labels instead of the normal ones. |\n| step | number | 1 | Selector step value. |\n| color | CurrentColor | 'primary' | Defines the color of the slider. Possible values are: 'primary' 'secondary' 'info' 'warning' 'danger' 'success' |\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 \\| React.ReactNode | — | Additional unit used for the slider value labels. |\n| step | number | 1 | Selector step value. |\n| color | CurrentColor | 'primary' | Defines the color of the slider. Possible values are: 'primary' 'secondary' 'info' 'warning' 'danger' 'success' |\n| disabled | boolean | false | Disables all pointer events. |\n| onChange | (newLeftValue: number, newRightValue: number) =void | — | Callback to get the new value every time it changes. |\n| onDragEnd | (newLeftValue: number, newRightValue: number) =void | — | Callback to get the value after the slider ended dragging. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
     "category": "Components",
     "section": "Interaction",
     "boost": "Slider components/sliders #components/sliders Components Interaction"
@@ -884,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.\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. |\n| tagName | string | 'div' | Tag name used for the scroll container. |\n| autoHeight | boolean | false | Enable auto-height behavior. |\n| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |\n| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |\n| onScroll | (event: React.UIEvent<any\\| undefined) =void | — | Scroll callback, forwarded to the underlying scrollbars instance. |\n| style | React.CSSProperties | — | Inline styles for the scroll container. |\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. |\n| tagName | string | 'div' | Tag name used for the scroll container. |\n| autoHeight | boolean | false | Enable auto-height behavior. |\n| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |\n| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |\n| onScroll | (event: React.UIEvent<any\\| undefined) =void | — | Scroll callback, forwarded to the underlying scrollbars instance. |\n| style | React.CSSProperties | — | Inline styles for the scroll container. |\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. |\n| tagName | string | 'div' | Tag name used for the scroll container. |\n| autoHeight | boolean | false | Enable auto-height behavior. |\n| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |\n| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |\n| onScroll | (event: React.UIEvent<any\\| undefined) =void | — | Scroll callback, forwarded to the underlying scrollbars instance. |\n| style | React.CSSProperties | — | Inline styles for the scroll container. |\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. |\n| tagName | string | 'div' | Tag name used for the scroll container. |\n| autoHeight | boolean | false | Enable auto-height behavior. |\n| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |\n| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |\n| onScroll | (event: React.UIEvent<any\\| undefined) =void | — | Scroll callback, forwarded to the underlying scrollbars instance. |\n| style | React.CSSProperties | — | Inline styles for the scroll container. |\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. |\n| tagName | string | 'div' | Tag name used for the scroll container. |\n| autoHeight | boolean | false | Enable auto-height behavior. |\n| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |\n| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |\n| onScroll | (event: React.UIEvent<any\\| undefined) =void | — | Scroll callback, forwarded to the underlying scrollbars instance. |\n| style | React.CSSProperties | — | Inline styles for the scroll container. |\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. |\n| tagName | string | 'div' | Tag name used for the scroll container. |\n| autoHeight | boolean | false | Enable auto-height behavior. |\n| autoHeightMin | number | 0 | Minimum height when auto-height is enabled. |\n| autoHeightMax | number | 200 | Maximum height when auto-height is enabled. |\n| onScroll | (event: React.UIEvent<any\\| undefined) =void | — | Scroll callback, forwarded to the underlying scrollbars instance. |\n| style | React.CSSProperties | — | Inline styles for the scroll container. |",
     "category": "Components",
     "section": "Misc",
     "boost": "SmoothScrollbars components/smoothScrollbars #components/smoothScrollbars Components Misc"
@@ -894,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\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. This will be 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. |\n| text | string \\| React.ReactNode | — | 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. This will be 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. |\n| text | string \\| React.ReactNode | — | 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. This will be 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. |\n| text | string \\| React.ReactNode | — | 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. This will be 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. |\n| text | string \\| React.ReactNode | — | The text shown next to the spinner icon. |",
     "category": "Components",
     "section": "Misc",
     "boost": "Spinner components/spinners #components/spinners Components Misc"
@@ -902,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| icon | string | — | The icon to be shown. Default icons are defined for all states. |\n| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |\n| └name | string | — | The name of the icon |\n| └className | string | 'text-size-300pct' | Optional class names for this icon. |\n| └color | string | 'text-color-light' | Optional color class name for the icon. |\n| image | React.ReactNode | — | Custom Image if needed. |\n| headline | string \\| React.ReactNode | — | The headline to be shown. |\n| message | string \\| React.ReactNode | — | The text to display. |\n| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |\n| └text | string \\| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | VoidFunction | () ={} | Callback fired after the component starts to collapse. |\n| └href | string | — | Instead of a callback for the button you can specify a \"href\". This way it will render a link button instead. |\n| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |\n| └className | string | — | Additional classes assigned to the button. |\n| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |\n| condensed | boolean | false | Smaller icon and headline size. |\n| alignment | TextAlignment | '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 | 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| icon | string | — | The icon to be shown. Default icons are defined for all states. |\n| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |\n| └name | string | — | The name of the icon |\n| └className | string | 'text-size-300pct' | Optional class names for this icon. |\n| └color | string | 'text-color-light' | Optional color class name for the icon. |\n| image | React.ReactNode | — | Custom Image if needed. |\n| headline | string \\| React.ReactNode | — | The headline to be shown. |\n| message | string \\| React.ReactNode | — | The text to display. |\n| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |\n| └text | string \\| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | VoidFunction | () ={} | Callback fired after the component starts to collapse. |\n| └href | string | — | Instead of a callback for the button you can specify a \"href\". This way it will render a link button instead. |\n| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |\n| └className | string | — | Additional classes assigned to the button. |\n| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |\n| condensed | boolean | false | Smaller icon and headline size. |\n| alignment | TextAlignment | '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 | 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| icon | string | — | The icon to be shown. Default icons are defined for all states. |\n| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |\n| └name | string | — | The name of the icon |\n| └className | string | 'text-size-300pct' | Optional class names for this icon. |\n| └color | string | 'text-color-light' | Optional color class name for the icon. |\n| image | React.ReactNode | — | Custom Image if needed. |\n| headline | string \\| React.ReactNode | — | The headline to be shown. |\n| message | string \\| React.ReactNode | — | The text to display. |\n| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |\n| └text | string \\| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | VoidFunction | () ={} | Callback fired after the component starts to collapse. |\n| └href | string | — | Instead of a callback for the button you can specify a \"href\". This way it will render a link button instead. |\n| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |\n| └className | string | — | Additional classes assigned to the button. |\n| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |\n| condensed | boolean | false | Smaller icon and headline size. |\n| alignment | TextAlignment | '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 | 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| icon | string | — | The icon to be shown. Default icons are defined for all states. |\n| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |\n| └name | string | — | The name of the icon |\n| └className | string | 'text-size-300pct' | Optional class names for this icon. |\n| └color | string | 'text-color-light' | Optional color class name for the icon. |\n| image | React.ReactNode | — | Custom Image if needed. |\n| headline | string \\| React.ReactNode | — | The headline to be shown. |\n| message | string \\| React.ReactNode | — | The text to display. |\n| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |\n| └text | string \\| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | VoidFunction | () ={} | Callback fired after the component starts to collapse. |\n| └href | string | — | Instead of a callback for the button you can specify a \"href\". This way it will render a link button instead. |\n| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |\n| └className | string | — | Additional classes assigned to the button. |\n| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |\n| condensed | boolean | false | Smaller icon and headline size. |\n| alignment | TextAlignment | '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 | 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| icon | string | — | The icon to be shown. Default icons are defined for all states. |\n| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |\n| └name | string | — | The name of the icon |\n| └className | string | 'text-size-300pct' | Optional class names for this icon. |\n| └color | string | 'text-color-light' | Optional color class name for the icon. |\n| image | React.ReactNode | — | Custom Image if needed. |\n| headline | string \\| React.ReactNode | — | The headline to be shown. |\n| message | string \\| React.ReactNode | — | The text to display. |\n| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |\n| └text | string \\| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | VoidFunction | () ={} | Callback fired after the component starts to collapse. |\n| └href | string | — | Instead of a callback for the button you can specify a \"href\". This way it will render a link button instead. |\n| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |\n| └className | string | — | Additional classes assigned to the button. |\n| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |\n| condensed | boolean | false | Smaller icon and headline size. |\n| alignment | TextAlignment | '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 | 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| icon | string | — | The icon to be shown. Default icons are defined for all states. |\n| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |\n| └name | string | — | The name of the icon |\n| └className | string | 'text-size-300pct' | Optional class names for this icon. |\n| └color | string | 'text-color-light' | Optional color class name for the icon. |\n| image | React.ReactNode | — | Custom Image if needed. |\n| headline | string \\| React.ReactNode | — | The headline to be shown. |\n| message | string \\| React.ReactNode | — | The text to display. |\n| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |\n| └text | string \\| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | VoidFunction | () ={} | Callback fired after the component starts to collapse. |\n| └href | string | — | Instead of a callback for the button you can specify a \"href\". This way it will render a link button instead. |\n| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |\n| └className | string | — | Additional classes assigned to the button. |\n| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |\n| condensed | boolean | false | Smaller icon and headline size. |\n| alignment | TextAlignment | '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 | 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| icon | string | — | The icon to be shown. Default icons are defined for all states. |\n| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |\n| └name | string | — | The name of the icon |\n| └className | string | 'text-size-300pct' | Optional class names for this icon. |\n| └color | string | 'text-color-light' | Optional color class name for the icon. |\n| image | React.ReactNode | — | Custom Image if needed. |\n| headline | string \\| React.ReactNode | — | The headline to be shown. |\n| message | string \\| React.ReactNode | — | The text to display. |\n| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |\n| └text | string \\| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | VoidFunction | () ={} | Callback fired after the component starts to collapse. |\n| └href | string | — | Instead of a callback for the button you can specify a \"href\". This way it will render a link button instead. |\n| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |\n| └className | string | — | Additional classes assigned to the button. |\n| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |\n| condensed | boolean | false | Smaller icon and headline size. |\n| alignment | TextAlignment | '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 | 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| features | string \\| React.ReactNode[] | — | List of features. |\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | string | — | The icon to be shown. Default icons are defined for all states. |\n| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |\n| └name | string | — | The name of the icon |\n| └className | string | 'text-size-300pct' | Optional class names for this icon. |\n| └color | string | 'text-color-light' | Optional color class name for the icon. |\n| image | React.ReactNode | — | Custom Image if needed. |\n| headline | string \\| React.ReactNode | — | The headline to be shown. |\n| message | string \\| React.ReactNode | — | The text to display. |\n| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |\n| └text | string \\| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | VoidFunction | () ={} | Callback fired after the component starts to collapse. |\n| └href | string | — | Instead of a callback for the button you can specify a \"href\". This way it will render a link button instead. |\n| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |\n| └className | string | — | Additional classes assigned to the button. |\n| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |\n| condensed | boolean | false | Smaller icon and headline size. |\n| alignment | TextAlignment | '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 | 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| icon | string | — | The icon to be shown. Default icons are defined for all states. |\n| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |\n| └name | string | — | The name of the icon |\n| └className | string | 'text-size-300pct' | Optional class names for this icon. |\n| └color | string | 'text-color-light' | Optional color class name for the icon. |\n| image | React.ReactNode | — | Custom Image if needed. |\n| headline | string \\| React.ReactNode | — | The headline to be shown. |\n| message | string \\| React.ReactNode | — | The text to display. |\n| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |\n| └text | string \\| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | VoidFunction | () ={} | Callback fired after the component starts to collapse. |\n| └href | string | — | Instead of a callback for the button you can specify a \"href\". This way it will render a link button instead. |\n| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |\n| └className | string | — | Additional classes assigned to the button. |\n| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |\n| condensed | boolean | false | Smaller icon and headline size. |\n| alignment | TextAlignment | '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 | 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| icon | string | — | The icon to be shown. Default icons are defined for all states. |\n| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |\n| └name | string | — | The name of the icon |\n| └className | string | 'text-size-300pct' | Optional class names for this icon. |\n| └color | string | 'text-color-light' | Optional color class name for the icon. |\n| image | React.ReactNode | — | Custom Image if needed. |\n| headline | string \\| React.ReactNode | — | The headline to be shown. |\n| message | string \\| React.ReactNode | — | The text to display. |\n| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |\n| └text | string \\| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | VoidFunction | () ={} | Callback fired after the component starts to collapse. |\n| └href | string | — | Instead of a callback for the button you can specify a \"href\". This way it will render a link button instead. |\n| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |\n| └className | string | — | Additional classes assigned to the button. |\n| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |\n| condensed | boolean | false | Smaller icon and headline size. |\n| alignment | TextAlignment | '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 | 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| icon | string | — | The icon to be shown. Default icons are defined for all states. |\n| icons | StateIconProps[] | [] | List of icons to show instead a single icon. |\n| └name | string | — | The name of the icon |\n| └className | string | 'text-size-300pct' | Optional class names for this icon. |\n| └color | string | 'text-color-light' | Optional color class name for the icon. |\n| image | React.ReactNode | — | Custom Image if needed. |\n| headline | string \\| React.ReactNode | — | The headline to be shown. |\n| message | string \\| React.ReactNode | — | The text to display. |\n| buttons | StateButtonProps[] | [] | Definitions for the buttons to show. |\n| └text | string \\| React.ReactNode | — | The button text. This can also be a node with an icon to be shown on the button. |\n| └onClick | VoidFunction | () ={} | Callback fired after the component starts to collapse. |\n| └href | string | — | Instead of a callback for the button you can specify a \"href\". This way it will render a link button instead. |\n| └bsStyle | BUTTON_STYLE | 'primary' | The style of the button. |\n| └className | string | — | Additional classes assigned to the button. |\n| fullWidth | boolean | false | Defines whether to use 100% width or default width. Note: Only to be used for special cases on the CustomState component. |\n| condensed | boolean | false | Smaller icon and headline size. |\n| alignment | TextAlignment | '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 | any | — | Additional elements that are rendered below the headline and text. |",
     "category": "Components",
     "section": "Content",
     "boost": "ErrorState components/states #components/states Components Content"
@@ -914,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\n### StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names to be added to the element. |\n### StatsWidget\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| onFilterReset | MouseEventHandler | — | Callback to reset the filter. |\n| hasFilter | boolean | false | Defines whether a filter is active for this widget. |\n| className | string | — | Additional class names to be added to the element. |\n### StatsWidgetBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fullWidth | boolean | false | Whether to use flex space-between for StatsWidgetNumbers. |\n| className | string | — | Additional class names to be added to the element. |\n### StatsWidgetNumber\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string \\| number \\| ReactNode | 0 | The value to be shown. |\n| total | string \\| number \\| ReactNode | — | The total value to be shown i.e. in combination with an active filter. |\n| label | string \\| ReactNode | — | The label shown below the number. |\n| clickable | boolean | false | Defines whether the number is clickable i.e. in combination with a filter. |\n| onClick | MouseEventHandler | — | Callback for when the user clicks the number widget. |\n| className | string | — | Additional class names to be added to the element. |\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 | — | Additional class names to be added to the element. |\n### StatsWidget\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| onFilterReset | MouseEventHandler | — | Callback to reset the filter. |\n| hasFilter | boolean | false | Defines whether a filter is active for this widget. |\n| className | string | — | Additional class names to be added to the element. |\n### StatsWidgetBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fullWidth | boolean | false | Whether to use flex space-between for StatsWidgetNumbers. |\n| className | string | — | Additional class names to be added to the element. |\n### StatsWidgetNumber\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string \\| number \\| ReactNode | 0 | The value to be shown. |\n| total | string \\| number \\| ReactNode | — | The total value to be shown i.e. in combination with an active filter. |\n| label | string \\| ReactNode | — | The label shown below the number. |\n| clickable | boolean | false | Defines whether the number is clickable i.e. in combination with a filter. |\n| onClick | MouseEventHandler | — | Callback for when the user clicks the number widget. |\n| className | string | — | Additional class names to be added to the element. |\nNotifications\n45\n\nExceptions\n\n144\n\nWarnings\n### StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names to be added to the element. |\n### StatsWidget\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| onFilterReset | MouseEventHandler | — | Callback to reset the filter. |\n| hasFilter | boolean | false | Defines whether a filter is active for this widget. |\n| className | string | — | Additional class names to be added to the element. |\n### StatsWidgetBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fullWidth | boolean | false | Whether to use flex space-between for StatsWidgetNumbers. |\n| className | string | — | Additional class names to be added to the element. |\n### StatsWidgetNumber\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string \\| number \\| ReactNode | 0 | The value to be shown. |\n| total | string \\| number \\| ReactNode | — | The total value to be shown i.e. in combination with an active filter. |\n| label | string \\| ReactNode | — | The label shown below the number. |\n| clickable | boolean | false | Defines whether the number is clickable i.e. in combination with a filter. |\n| onClick | MouseEventHandler | — | Callback for when the user clicks the number widget. |\n| className | string | — | Additional class names to be added to the element. |",
     "category": "Components",
     "section": "Content",
     "boost": "StatsWidgets components/statsWidgets #components/statsWidgets Components Content"
@@ -924,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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| icon | StatusBarIcon | — | 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 | 'left' \\| 'right' | 'left' | The position of the icon. |\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 | StatusBarLabel | — | The label to be shown for the progress bar. |\n| └value | string \\| React.ReactNode | — | The label content. |\n| └alignment | 'left' \\| 'top' \\| 'right' | 'right' | The position of the icon. |\n| └weight | 'light' \\| 'bold' | 'bold' | The text weight of the label. |\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 | StatusBarProgress[] | — | 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 \\| React.ReactNode | — | Optional tooltip content to be shown for the progress bar. |\n| └tooltipPosition | 'top' \\| 'right' \\| 'bottom' \\| 'left' | 'top' | The position of the tooltip for the progress bar. |\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 | 'small' \\| 'large' | 'small' | The size of the icon and progress bar. Possible values are: 'small' 'large' |\n| useProgressDivider | boolean | true | Uses a divider for multiple progress bars when defined. |\n| className | string | — | Optional class names for the wrapper element. |",
     "category": "Components",
     "section": "Progress",
     "boost": "StatusBar components/statusBar #components/statusBar Components Progress"
@@ -934,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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| direction | 'next' \\| 'previous' | 'next' | Defines the chevron icon for the respective direction. |",
     "category": "Components",
     "section": "Interaction",
     "boost": "StepButton components/stepButton #components/stepButton Components Interaction"
@@ -944,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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| labels | SteppedProgressBarLabel[] | — | Objects to defining the icon and the label of the navigation items. The icon can be a string or an icon. |\n| └icon | string \\| ReactNode | — | The element shown in the step element. This can be a single step number or an icon element. |\n| └label | string \\| ReactNode | — | 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 | (selectedKey: number) =void | — | Called with the new selected index after the user clicked a nav item. |\n| variant | 'circle' \\| 'rectangle' \\| 'roadsign' | '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 | SteppedProgressBarLabel[] | — | Objects to defining the icon and the label of the navigation items. The icon can be a string or an icon. |\n| └icon | string \\| ReactNode | — | The element shown in the step element. This can be a single step number or an icon element. |\n| └label | string \\| ReactNode | — | 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 | (selectedKey: number) =void | — | Called with the new selected index after the user clicked a nav item. |\n| variant | 'circle' \\| 'rectangle' \\| 'roadsign' | '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 | SteppedProgressBarLabel[] | — | Objects to defining the icon and the label of the navigation items. The icon can be a string or an icon. |\n| └icon | string \\| ReactNode | — | The element shown in the step element. This can be a single step number or an icon element. |\n| └label | string \\| ReactNode | — | 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 | (selectedKey: number) =void | — | Called with the new selected index after the user clicked a nav item. |\n| variant | 'circle' \\| 'rectangle' \\| 'roadsign' | '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 | SteppedProgressBarLabel[] | — | Objects to defining the icon and the label of the navigation items. The icon can be a string or an icon. |\n| └icon | string \\| ReactNode | — | The element shown in the step element. This can be a single step number or an icon element. |\n| └label | string \\| ReactNode | — | 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 | (selectedKey: number) =void | — | Called with the new selected index after the user clicked a nav item. |\n| variant | 'circle' \\| 'rectangle' \\| 'roadsign' | 'circle' | The SteppedProgressBar Variant. One of circle, rectangle or roadsign. |\n| disableFollowingPages | number | — | All navigation items with a higher index than this will be disabled. |\n| mobileBreakpoint | boolean | true | Deactivating the wrapping of bubbles on mobile. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
     "category": "Components",
     "section": "Progress",
     "boost": "SteppedProgressBar - Circle components/steppedProgressBars #components/steppedProgressBars Components Progress"
@@ -954,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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| navItems | ModulePropType[] | — | List of navigation items with key and route prop. The route prop is a react-router NavLink component with an active style. |\n| className | string | — | Additional classes for the wrapper element. |\nSubNavigation with offset\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\nSubNavigation without offset\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3",
     "category": "Components",
     "section": "Navigation",
     "boost": "SubNavigation components/subNavigation #components/subNavigation Components Navigation"
@@ -974,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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | string | — | The name of the image file without extension. |\n| size | number | 150 | The height and width of the SVG image in pixels. |\n| baseUrl | string | 'https://cdn.rio.cloud/riosvg' | The CDN base URL where the images are located. |\n| colorMap | ColorOverridesMap | — | Customize color using the color map and define the CSS variable name that shall be used. |\n| className | string | — | Additional class names added to the SVG element. |",
     "category": "Components",
     "section": "Misc",
     "boost": "SvgImage components/svgImage #components/svgImage Components Misc"
@@ -984,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| keyName | string | — | Optional key that is used as key and as the id on the internal input. |\n| onChange | (toggleState: boolean) =void | — | Callback function triggered when clicking the button. |\n| checked | boolean | false | Set active / inactive state. |\n| color | string | 'primary' | Defines the color of the switch. Possible values are: 'primary' 'secondary' 'info' 'success' 'warning' 'danger' |\n| minWidth | number | 40 | The min-width of the switch. |\n| disabled | boolean | false | Disables the component. |\n| enabledText | string | — | The text used for the ON state. |\n| disabledText | string | — | The text used for the OFF state. |\n| labelPosition | 'left' \\| 'right' | — | Defines the position of the switch label. Defaults to 'right' when children are present. Possible values are 'left' and 'right'. |\n| className | string | — | Additional class names added to the SVG element. |",
     "category": "Components",
     "section": "Interaction",
     "boost": "Switch components/switch #components/switch Components Interaction"
@@ -1014,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\n### Tag\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| active | boolean | false | Defines if the tag is active. |\n| clickable | boolean | false | Defines if the tag is clickable. |\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| icon | string | — | Define any rioglyph icon like \"rioglyph-truck\". |\n| muted | boolean | false | Sets a more subtle style for border and background. |\n| round | boolean | true | Defines if the tag is round. |\n| selectable | boolean | false | Defines if the tag is selectable. |\n| size | 'small' \\| 'medium' | — | Defines if you want to render the tag in a different size. Possible values are: 'small' and 'medium' |\n| multiline | boolean | false | Allows to render text on multiple lines. |\n| className | string | — | Additional classes to be set on the wrapper element. |\n### TagList\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| inline | boolean | true | Defines if the tag list is rendered inline or vertically. |\n| autoTagWidth | boolean | false | Defines if the tag has the same with as it`s parent container. |\n| tagsPerRow | 1 \\| 2 \\| 3 \\| 4 \\| 6 | — | Possible values are 1-6 |\n| className | string | — | Additional classes to be set on the wrapper element. |",
     "category": "Components",
     "section": "Misc",
     "boost": "Tag components/tags #components/tags Components Misc"
@@ -1024,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 | — | 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 regard 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 \"teasersPerRow\" when having more than 4 teasers. Possible values are: 1 2 3 4 6 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 \\| React.ReactNode | — | The headline for the teaser. |\n| content | string \\| React.ReactNode | — | The actual content to show e.g. some kind of text. |\n| image | TeaserImage | — | Defines an image to render. |\n| └src | string | — | The src URL for the image. |\n| └alt | string | — | The alternate text for the image. |\n| └align | 'left' \\| 'right' | — | Defines whether the image is on the left or right side of the component. Possible values are: 'left' and 'right'. |\n| └onClick | VoidFunction | — | Callback function for the image. |\n| └aspectRatio | '1:1' \\| '3:1' \\| '3:2' \\| '16:9' | — | Ratio of the transparent image placeholder. Possible values are '1:1', '3:1', '3:2' and '16:9'. |\n| └className | string | — | Additional classes added to the image wrapper. |\n| button | TeaserButton | — | Defines a button to render with. |\n| └text | string \\| React.ReactNode | — | The text content for the button. |\n| └bsStyle | BUTTON_STYLE | 'primary' | The button style. See the button styles definition for possible values. |\n| └onClick | (event: SyntheticEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function for the button. |\n| └className | string | — | Additional classes added to the button. |\n| verticalAlignment | 'top' \\| 'center' | 'top' | Defines where the teaser content is aligned including headline and image. Possible values are: 'top' and 'center'. |\n| segmentation | '50' \\| '25:75' \\| '75:25' \\| '100' | — | Defines how the teaser content is segmented. Possible values are: '50', '25:75', '75:25' and '100'. |\n| footer | string \\| React.ReactNode | — | Optional content for footer in case the prop \"button\" is not sufficient. |\n| className | string | — | Additional classes added to the wrapper. |",
     "category": "Components",
     "section": "Content",
     "boost": "Teaser components/teaser #components/teaser Components Content"
@@ -1044,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\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |\n| onChange | (value: string) =void | — | Callback function when the value changes and is a valid time format. If not it handles the state internally until the time is valid and filled. |\n| alwaysShowMask | boolean | true | Defines whether to always show the input mask placeholder. |\n| showIcon | boolean | false | Defines whether to show the input icon. |\n| errorMessage | string \\| React.ReactNode | — | Input error message. |\n| warningMessage | string \\| React.ReactNode | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Feedback message width. |\n| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement, 'value' \\| 'onChange'| — | Additional properties to be set on the input element. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nDefaultPlease insert a valid time\n\nWith iconJust a normal warning message\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |\n| onChange | (value: string) =void | — | Callback function when the value changes and is a valid time format. If not it handles the state internally until the time is valid and filled. |\n| alwaysShowMask | boolean | true | Defines whether to always show the input mask placeholder. |\n| showIcon | boolean | false | Defines whether to show the input icon. |\n| errorMessage | string \\| React.ReactNode | — | Input error message. |\n| warningMessage | string \\| React.ReactNode | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Feedback message width. |\n| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement, 'value' \\| 'onChange'| — | Additional properties to be set on the input element. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
     "category": "Components",
     "section": "Pickers",
     "boost": "TimePicker components/timepicker #components/timepicker Components Pickers"
@@ -1054,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| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| type | 'button' \\| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | \"default\" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\nControlled ToggleButton\n\nControl the toggle\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| type | 'button' \\| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | \"default\" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |",
     "category": "Components",
     "section": "Interaction",
     "boost": "ToggleButton components/toggleButton #components/toggleButton Components Interaction"
@@ -1064,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\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.",
     "category": "Components",
     "section": "Misc",
     "boost": "Tooltips components/tooltip #components/tooltip Components Misc"
@@ -1074,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\nSed ac in vel et in ac\n\nItem 2\nVelit. aliquam ante primis orci dui ipsum amet, nunc Duis ac eget ante pretium in,\n\nItem 3\nAc\nLorem orci, nec primis lorem\n\nItem 4\nEfficitur massa, iaculis. ligula nunc\n\nItem 5\nAc nec iaculis. viverra bibendum, eget hendrerit ac vel Mauris nunc\n\nItem 6\nPretium quis, Ut posuere viverra Sed Mauris in, massa velit. fames rutrum orci amet, semper\n\nItem 7\nInteger dolor faucibus. pretium Mauris viverra Mauris massa Integer aliquam Sed\n\nItem 8\nBibendum, Sed iaculis. consectetur ac dolor in, In fringilla orci,\n\nItem 9\nEt massa ante Fusce hendrerit ipsum consectetur in, ipsum ut Sed volutpat\n\nItem 10\nUt ligula\nLorem lorem tortor primis libero\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container. |\nVirtual list with 5000 items\nVehicle 1\nVel ipsum ac primis hendrerit sem. ipsum sem. Vivamus metus quis, ac\n\nVehicle 2\nFringilla Fusce eget pharetra Vivamus\n\nVehicle 3\nIn felis. dui metus malesuada fames\n\nVehicle 4\nAliquam malesuada amet, ac ac fames orci ligula ante in consectetur in, ipsum primis felis.\n\nVehicle 5\nAnte Sed ligula dolor molestie\n\nVehicle 6\nVolutpat nec fames Duis metus sit bibendum, ligula velit. sagittis Sed vel vel ante\n\nVehicle 7\nDuis et Fusce vitae elit. est sit ac\n\nVehicle 8\nUt sagittis elementum adipiscing iaculis. iaculis.\n\nVehicle 9\nLibero sit Integer ligula nec nunc viverra elementum pretium Duis sagittis hendrerit semper elementum ante\n\nVehicle 10\nDuis viverra massa, scelerisque Vivamus in elit. tortor in, et Vivamus\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container. |",
+    "searchText": "VirtualList\nThe VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.\nVirtualList\nIt allows a specified number of items outside the viewport for smoother scrolling. It optimizes performance by minimizing DOM updates and provides a customizable rendering function for each item, making it ideal for applications that require dynamic and responsive list displays.\nVirtual list with 100 itemsItem 1\nConsectetur primis adipiscing ac pharetra\n\nItem 2\nFusce Ut sagittis ac sit ut in, efficitur finibus pretium Vivamus pretium amet, amet, orci,\n\nItem 3\nAc Sed Mauris amet, molestie sem.\n\nItem 4\nConsectetur tortor efficitur rutrum vitae in vel efficitur sem. scelerisque efficitur Fusce velit.\n\nItem 5\nUt ac Integer rutrum nunc sem. efficitur ante Duis finibus ac ut purus\n\nItem 6\nElit. ante felis. finibus in\n\nItem 7\nMetus rutrum ante ac consectetur aliquam\n\nItem 8\nMalesuada ac Vivamus purus massa, efficitur Vivamus hendrerit\n\nItem 9\nNunc libero\nLorem in elementum\n\nItem 10\nFringilla massa, quis, sit orci scelerisque ante elit. ut fringilla faucibus. Vivamus\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container |\nVirtual list with 5000 items\nVehicle 1\nFringilla semper. faucibus. lorem ac Ut condimentum semper.\n\nVehicle 2\nFinibus aliquam in Vivamus consectetur sit ante\n\nVehicle 3\nPrimis orci purus elementum libero tortor sit\n\nVehicle 4\nSed aliquam semper ipsum orci et metus Mauris ligula Ut consectetur nec elementum\n\nVehicle 5\nEfficitur Integer malesuada adipiscing vel malesuada elit. pharetra elit. fringilla pretium orci, elit.\n\nVehicle 6\nOrci, Fusce et condimentum scelerisque dolor metus fringilla consectetur consectetur primis nunc\n\nVehicle 7\nFelis. ipsum condimentum efficitur tortor iaculis. amet, hendrerit dolor dolor massa molestie ut ac\nLorem\n\nVehicle 8\nFringilla ac ipsum Mauris ac ac et semper. semper Fusce ut\n\nVehicle 9\nScelerisque ante orci, in nec elementum rutrum adipiscing hendrerit molestie in, fames orci,\n\nVehicle 10\nNunc nec bibendum, velit. Mauris\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container |",
     "category": "Components",
     "section": "Content",
     "boost": "VirtualList components/virtualList #components/virtualList Components Content"
@@ -1084,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‹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",
+    "searchText": "Foundations\nYou can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light\nButtons\nSee also our Button component.\n\nNote: For having spacing between buttons in a single row you may want to wrap them with<div class=\"btn-toolbar\"</div\n\nNote: You can use link buttons within text blocks by adding btn-linkbtn-link-inline\nDefault buttons\n\nDefaultDefault\n\nIcon buttons\n\nMuted buttons\n\nMuted filledMuted\n\nLink buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nColored buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nOutline buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nSplit buttons\n\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted-filled\nButton states\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButton sizes\nXS buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nXS icon buttons\n\nSM buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nSM icon buttons\n\nMD buttons (default)\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nMD icon buttons (default)\n\nLG buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nLG icon buttons\nButton examples\nButton toolbar\n\nPrevNext\n\nButton group\n\n1234\n\nButtonButtonButton\n\nMultiline button\n\nThis is a multiline button with a lot of Text\nBlock button\n\nBlock level button\nTooltip buttons\n\nButton with tooltipDisabled button with tooltip\nAction buttons\nClick meClick meClick meClick meClick meClick me\nBackground colors\nBasic\nbg-white\nbg-black\n\nBrand\nbg-primary\nbg-secondary\n\nStatus\nbg-info\nbg-success\nbg-warning\nbg-danger\n\nDriving status\nbg-status-available\nbg-status-driving\nbg-status-resting\nbg-status-working\n\nMap marker\nbg-map-marker-asset\nbg-map-marker-poi\nbg-map-marker-geofence\nbg-map-marker-route\n\nRating\nbg-rating-1\nbg-rating-2\nbg-rating-3\nbg-rating-4\nbg-rating-5\n\nGray\nbg-decent\nbg-lightest\nbg-lighter\nbg-light\nbg-gray\nbg-dark\nbg-darker\nbg-darkest\n\nHighlight\nbg-highlight-decent\nbg-highlight-lightest\nbg-highlight-lighter\nbg-highlight-light\nbg-highlight\nbg-highlight-dark\nbg-highlight-darker\nbg-highlight-darkest\nHover background colors\nBasic\nhover-bg-white\nhover-bg-black\n\nBrand\nhover-bg-primary\nhover-bg-secondary\n\nStatus\nhover-bg-info\nhover-bg-success\nhover-bg-warning\nhover-bg-danger\n\nDriving status\nhover-bg-status-available\nhover-bg-status-driving\nhover-bg-status-resting\nhover-bg-status-working\n\nMap Marker\nhover-bg-map-marker-asset\nhover-bg-map-marker-poi\nhover-bg-map-marker-geofence\nhover-bg-map-marker-route\n\nRating\nhover-bg-rating-1\nhover-bg-rating-2\nhover-bg-rating-3\nhover-bg-rating-4\nhover-bg-rating-5\n\nGray\nhover-bg-decent\nhover-bg-lightest\nhover-bg-lighter\nhover-bg-light\nhover-bg-gray\nhover-bg-dark\nhover-bg-darker\nhover-bg-darkest\n\nHighlight\nhover-bg-highlight-decent\nhover-bg-highlight-lightest\nhover-bg-highlight-lighter\nhover-bg-highlight-light\nhover-bg-highlight\nhover-bg-highlight-dark\nhover-bg-highlight-darker\nhover-bg-highlight-darkest\nText\nBasic\ntext-color-white\ntext-color-black\n\nBrand\ntext-color-primary\ntext-color-secondary\n\nStatus\ntext-color-info\ntext-color-success\ntext-color-warning\ntext-color-danger\n\nDriving status\ntext-color-status-available\ntext-color-status-driving\ntext-color-status-resting\ntext-color-status-working\n\nMap marker\ntext-color-map-marker-asset\ntext-color-map-marker-poi\ntext-color-map-marker-geofence\ntext-color-map-marker-route\n\nRating\ntext-color-rating-1\ntext-color-rating-2\ntext-color-rating-3\ntext-color-rating-4\ntext-color-rating-5\n\nGray\ntext-color-decent\ntext-color-lightest\ntext-color-lighter\ntext-color-light\ntext-color-gray\ntext-color-dark\ntext-color-darker\ntext-color-darkest\n\nHighlight\ntext-color-highlight-decent\ntext-color-highlight-lightest\ntext-color-highlight-lighter\ntext-color-highlight-light\ntext-color-highlight\ntext-color-highlight-dark\ntext-color-highlight-darker\ntext-color-highlight-darkest\nHover text\nBasic\nhover-text-color-white\nhover-text-color-black\n\nBrand\nhover-text-color-primary\nhover-text-color-secondary\n\nStatus\nhover-text-color-info\nhover-text-color-success\nhover-text-color-warning\nhover-text-color-danger\n\nDriving status\nhover-text-color-status-available\nhover-text-color-status-driving\nhover-text-color-status-resting\nhover-text-color-status-working\n\nMap marker\nhover-text-color-map-marker-asset\nhover-text-color-map-marker-poi\nhover-text-color-map-marker-geofence\nhover-text-color-map-marker-route\n\nRating\nhover-text-color-rating-1\nhover-text-color-rating-2\nhover-text-color-rating-3\nhover-text-color-rating-4\nhover-text-color-rating-5\n\nGray\nhover-text-color-decent\nhover-text-color-lightest\nhover-text-color-lighter\nhover-text-color-light\nhover-text-color-gray\nhover-text-color-dark\nhover-text-color-darker\nhover-text-color-darkest\n\nHighlight\nhover-text-color-highlight-decent\nhover-text-color-highlight-lightest\nhover-text-color-highlight-lighter\nhover-text-color-highlight-light\nhover-text-color-highlight\nhover-text-color-highlight-dark\nhover-text-color-highlight-darker\nhover-text-color-highlight-darkest\nSVGs\nBackground\nBackground size\n\nBackground position\n\nBackground repeat\nBorder\nHover Border Color\n\nHover Border Color with Transition\n\nHover Border Style\nLast Child (Self Class)\n\nChild\nChild\nChild\nChild\nChild\n\nLast Child (Parent Class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst Child (Self Class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst Child (Parent Class)\n\nChild\nChild\nChild\nChild\nChild\nDivider\nYou can use the the shorthanddivider-yfor the automatic combination ofdivider-y-1,divider-style-solidanddivider-color-light\ndivider-y-1\ndivider-y-1\ndivider-y-1\ndivider-y-1\n\ndivider-y-2\ndivider-y-2\ndivider-y-2\ndivider-y-2\n\ndivider-y-3\ndivider-y-3\ndivider-y-3\ndivider-y-3\n\ndivider-x-1\ndivider-x-1\ndivider-x-1\n\ndivider-x-1\ndivider-x-1\ndivider-x-1\n\ndivider-x-2\ndivider-x-2\ndivider-x-2\nOpacity\n0\n10\n20\n30\n40\n50\n60\n70\n80\n90\n100\nHover opacity\n0\n10\n20\n30\n40\n50\n60\n70\n80\n90\n100\nRounded\nrounded\n...-circle\n\n...-top\n...-bottom\n...-left\n...-right\n\n...-top-left\n...-top-right\n...-bottom-right\n...-bottom-left\n...-small\n...\n...-large\n...-extra-large\nShadows\nThe default shadow class is intended to be used on panels or blocks which should stand out from the light gray background and should be avoided to put everywhere. Use it to emphasize certain blocks or panels e.g. on a dashboard or items of a drag and drop list.\n\nDo not use hard shadows on tables, in dialogs, or on elements placed on white background.\n\nThe exception for not using shadows on a white background is for floating elements placed above the content for instance via position absolute.\nshadow-default\nPanel with shadow\nshadow-default\nShadow variants\nSurrounding shadows\n\nshadow-subtle\nshadow-muted\nshadow-accent\nshadow-default\nshadow-smooth\nshadow-hard\n\nDirection shadows\n\nshadow-muted-down\nshadow-default-down\n\nshadow-smooth-up\nshadow-smooth-down\nshadow-hard-up\nshadow-hard-down\n\nAccent shadow for list items\n\nNote\nWhen utilizing the shadow-accent avoid combining it with a border style, as the shadow is optimized for small block items like those in a list and works best without a border.\n\nItem\nItem\nItem\nItem\nItem\nItem\nRIOglyph\nDefault\n\nSized icons\n\nColored icons\nVehicle icons\nVehicle icons\n\nBaseline vehicle icons\nPair icons\nDefault\n\nWith background\n\nDisplay engine types\n\nSized\nAnimated icons\nSpinning icons\n\nPulsing icons\nDisabled icons\nDefault\n\nWith red line\n\nInverse\nFilled icons\nDefault filled icons\n\nColored filled icons\n\nGood use cases examples for icons with a filled circle background\n\nHeadline enhancements: For emphasizing key points in headings or subheadings, like \"New features\" or \"Highlights,\" where the icon in a filled circle draws attention without being too overwhelming.\n\nHelp/Documentation pages: Icons with filled circles are perfect for highlighting actions or key steps in a guide. They help break down text-heavy content and make instructions visually appealing. Example: For \"step-by-step\" instructions, an icon inside a circle could represent each action (e.g., a checkmark icon to signify completed tasks or a question mark for additional help).\n\nFeature lists and cards: Use filled circle icons as design elements for feature lists, product highlights, or feature comparisons. This works especially well when listing distinct features of a product, app, or service.\n\nWhen NOT to use a filled circle icon\nAvoid inconsistent usage in buttons – If some buttons have a filled circle and others don’t, the UI becomes inconsistent.\n\nDon’t use it for simple inline icons – Icons inside text (e.g., \"🔍 Search\") or standalone icons in tables don’t need a background.\n\nNot for decorative or unnecessary elements – If an icon doesn’t need extra emphasis, the filled circle is overkill.\nCustom icons\nUse external svgs as RIOglyph icons. Please read our guidelines\nRIOglyph text alignment\nWhen an icon is used alongside text in a flex, grid, or inline text layout, additional alignment adjustments may be needed. To ensure proper alignment, the following classes are available:\nrioglyph-align-top - assuming a display-flex and default line-height\nrioglyph-align-bottom - assuming a display-flex and line-height 1.25\nrioglyph-align-baseline - assuming an inline text and default line-height\n\nThese classes help align icons correctly within different layouts where they are used alongside text.\nNote: Setting a text line-height class will also affect the icon alignment and may require manual adjustments to ensure proper positioning.\nBaseline-aligned icon with inline text\nLorem ipsum dolor\n\nTop-aligned icon with text inside a flex-box layout\nMalesuada tincidunt. sem. In ante scelerisque adipiscing et enim\n\nBottom-aligned icon inside an inline-flex layout and line-height-125rel\nMalesuada tincidunt. sem. In ante scelerisque adipiscing et enim\n\nIcons inside a link usually don't need to be aligned manually\nLorem ipsum\n\nBaseline-aligned icon inside an inline h3 header text\nPrimis ante volutpat Vivamus\nPrimis ante volutpat Vivamus\n\nBaseline-aligned icon inside an inline h4 header text\nPrimis ante volutpat Vivamus\nPrimis ante volutpat Vivamus\nIcon library\nSearch\n\nrioglyph rioglyph-academic-cap\nrioglyph rioglyph-addressbook\nrioglyph rioglyph-ai\nrioglyph rioglyph-air-pay\nrioglyph rioglyph-am\nrioglyph rioglyph-angle-double-down\nrioglyph rioglyph-angle-double-left\nrioglyph rioglyph-angle-double-right\nrioglyph rioglyph-angle-double-up\nrioglyph rioglyph-antenna\nrioglyph rioglyph-api\nrioglyph rioglyph-archive\nrioglyph rioglyph-area-chart\nrioglyph rioglyph-area-in\nrioglyph rioglyph-area-out\nrioglyph rioglyph-arrow-down\nrioglyph rioglyph-arrow-left\nrioglyph rioglyph-arrow-right\nrioglyph rioglyph-arrow-up\nrioglyph rioglyph-arrows-collapse\nrioglyph rioglyph-arrows-combine\nrioglyph rioglyph-arrows-expand\nrioglyph rioglyph-arrows-horizontal\nrioglyph rioglyph-arrows-split\nrioglyph rioglyph-assigned\nrioglyph rioglyph-axis-x\nrioglyph rioglyph-axis-y\nrioglyph rioglyph-axis-z\nrioglyph rioglyph-axle\nrioglyph rioglyph-ban-circle\nrioglyph rioglyph-bar-chart-box\nrioglyph rioglyph-battery-charging\nrioglyph rioglyph-battery-level-empty\nrioglyph rioglyph-battery-level-full\nrioglyph rioglyph-battery-level-low\nrioglyph rioglyph-beacon\nrioglyph rioglyph-book\nrioglyph rioglyph-bookable-poi\nrioglyph rioglyph-bookmark-square\nrioglyph rioglyph-bookmark\nrioglyph rioglyph-border-crossing\nrioglyph rioglyph-brain\nrioglyph rioglyph-brake\nrioglyph rioglyph-branch-horizontal\nrioglyph rioglyph-branch-remove\nrioglyph rioglyph-branch-vertical\nrioglyph rioglyph-broadcast\nrioglyph rioglyph-building\nrioglyph rioglyph-bulb\nrioglyph rioglyph-bus-baseline\nrioglyph rioglyph-bus-breakdown\nrioglyph rioglyph-bus\nrioglyph rioglyph-businessman\nrioglyph rioglyph-calendar-parking\nrioglyph rioglyph-calendar-plus\nrioglyph rioglyph-calendar-today\nrioglyph rioglyph-calendar\nrioglyph rioglyph-camera\nrioglyph rioglyph-car-baseline\nrioglyph rioglyph-car-wash\nrioglyph rioglyph-car\nrioglyph rioglyph-card-hotel\nrioglyph rioglyph-card-reader\nrioglyph rioglyph-cards-add\nrioglyph rioglyph-cards-grid\nrioglyph rioglyph-cards-list\nrioglyph rioglyph-cards-table\nrioglyph rioglyph-cargo\nrioglyph rioglyph-carrier\nrioglyph rioglyph-chat\nrioglyph rioglyph-check-badge\nrioglyph rioglyph-check-shield\nrioglyph rioglyph-checkbox-checked\nrioglyph rioglyph-checkbox\nrioglyph rioglyph-checkboxes\nrioglyph rioglyph-chevron-down\nrioglyph rioglyph-chevron-left\nrioglyph rioglyph-chevron-right\nrioglyph rioglyph-chevron-up\nrioglyph rioglyph-chip\nrioglyph rioglyph-circle-dashed\nrioglyph rioglyph-circle-stack\nrioglyph rioglyph-click\nrioglyph rioglyph-climate-control\nrioglyph rioglyph-clipboard\nrioglyph rioglyph-cloud-download\nrioglyph rioglyph-cloud-not-saved\nrioglyph rioglyph-cloud-progress\nrioglyph rioglyph-cloud-upload\nrioglyph rioglyph-cloud\nrioglyph rioglyph-coasting\nrioglyph rioglyph-code-braces\nrioglyph rioglyph-code-brackets\nrioglyph rioglyph-coffee\nrioglyph rioglyph-cog\nrioglyph rioglyph-color-swatch\nrioglyph rioglyph-comment\nrioglyph rioglyph-compare\nrioglyph rioglyph-compass\nrioglyph rioglyph-component-custom-recurrent\nrioglyph rioglyph-component-custom\nrioglyph rioglyph-construction\nrioglyph rioglyph-convert\nrioglyph rioglyph-conveyor-belt\nrioglyph rioglyph-cookie\nrioglyph rioglyph-cooling\nrioglyph rioglyph-cost-efficiency\nrioglyph rioglyph-crown\nrioglyph rioglyph-cruise-control\nrioglyph rioglyph-csv\nrioglyph rioglyph-cube-dashed\nrioglyph rioglyph-cube\nrioglyph rioglyph-currency-euro\nrioglyph rioglyph-damages\nrioglyph rioglyph-dangerousgoods\nrioglyph rioglyph-dashboard-view\nrioglyph rioglyph-dashboard\nrioglyph rioglyph-delivery-completed\nrioglyph rioglyph-delivery-error\nrioglyph rioglyph-delivery-late\nrioglyph rioglyph-delivery-on-track\nrioglyph rioglyph-delivery-warning\nrioglyph rioglyph-delivery\nrioglyph rioglyph-design\nrioglyph rioglyph-desktop\nrioglyph rioglyph-detail-view-info\nrioglyph rioglyph-detail-view\nrioglyph rioglyph-direction\nrioglyph rioglyph-discount-badge\nrioglyph rioglyph-document-out\nrioglyph rioglyph-document\nrioglyph rioglyph-download\nrioglyph rioglyph-drag-n-drop\nrioglyph rioglyph-drive-history\nrioglyph rioglyph-driver-card\nrioglyph rioglyph-driver\nrioglyph rioglyph-drivercard-in\nrioglyph rioglyph-drivercard-out\nrioglyph rioglyph-duplicate\nrioglyph rioglyph-earphone\nrioglyph rioglyph-emergency-stop\nrioglyph rioglyph-empty\nrioglyph rioglyph-engine\nrioglyph rioglyph-envelope-indicator\nrioglyph rioglyph-envelope-open\nrioglyph rioglyph-envelope\nrioglyph rioglyph-erase\nrioglyph rioglyph-error-sign\nrioglyph rioglyph-euro-note\nrioglyph rioglyph-exclamation-sign\nrioglyph rioglyph-exclamation\nrioglyph rioglyph-eye-close\nrioglyph rioglyph-eye-closed\nrioglyph rioglyph-eye-open\nrioglyph rioglyph-face-frown\nrioglyph rioglyph-face-neutral\nrioglyph rioglyph-face-smile\nrioglyph rioglyph-facetime-video\nrioglyph rioglyph-factory\nrioglyph rioglyph-file-signature\nrioglyph rioglyph-files\nrioglyph rioglyph-fill\nrioglyph rioglyph-filling-e-station\nrioglyph rioglyph-filling-station\nrioglyph rioglyph-filter-active\nrioglyph rioglyph-filter-reset\nrioglyph rioglyph-filter\nrioglyph rioglyph-fingerprint\nrioglyph rioglyph-finish\nrioglyph rioglyph-fire\nrioglyph rioglyph-flag\nrioglyph rioglyph-flash\nrioglyph rioglyph-folder-closed\nrioglyph rioglyph-folder-open\nrioglyph rioglyph-fuel-electric\nrioglyph rioglyph-fuel-gas\nrioglyph rioglyph-fuel-hydrogen\nrioglyph rioglyph-fuel-liquid\nrioglyph rioglyph-fuel-mix\nrioglyph rioglyph-fullscreen\nrioglyph rioglyph-geofence\nrioglyph rioglyph-get\nrioglyph rioglyph-give\nrioglyph rioglyph-globe-alt\nrioglyph rioglyph-globe\nrioglyph rioglyph-group-blocks\nrioglyph rioglyph-group\nrioglyph rioglyph-hand-down\nrioglyph rioglyph-hand-left\nrioglyph rioglyph-hand-right\nrioglyph rioglyph-hand-up\nrioglyph rioglyph-handshake\nrioglyph rioglyph-hash\nrioglyph rioglyph-heart\nrioglyph rioglyph-heating\nrioglyph rioglyph-hierarchy\nrioglyph rioglyph-history\nrioglyph rioglyph-home-sign\nrioglyph rioglyph-home\nrioglyph rioglyph-hour-glass\nrioglyph rioglyph-id\nrioglyph rioglyph-inbox-in\nrioglyph rioglyph-inbox-out\nrioglyph rioglyph-inbox-stack\nrioglyph rioglyph-inbox\nrioglyph rioglyph-info-sign\nrioglyph rioglyph-info\nrioglyph rioglyph-insert\nrioglyph rioglyph-issue-tracking\nrioglyph rioglyph-key\nrioglyph rioglyph-kickdown\nrioglyph rioglyph-language\nrioglyph rioglyph-layer-pois\nrioglyph rioglyph-layer\nrioglyph rioglyph-leafs\nrioglyph rioglyph-light-bulb\nrioglyph rioglyph-line-chart\nrioglyph rioglyph-link\nrioglyph rioglyph-load-unload\nrioglyph rioglyph-load\nrioglyph rioglyph-location-arrow\nrioglyph rioglyph-lock-open\nrioglyph rioglyph-lock\nrioglyph rioglyph-log-in\nrioglyph rioglyph-logout\nrioglyph rioglyph-looking-glass-man\nrioglyph rioglyph-looking-glass\nrioglyph rioglyph-magic-wand\nrioglyph rioglyph-maintenance-components\nrioglyph rioglyph-map-location\nrioglyph rioglyph-map-marker\nrioglyph rioglyph-map\nrioglyph rioglyph-megaphone\nrioglyph rioglyph-menu-hamburger\nrioglyph rioglyph-merge\nrioglyph rioglyph-migrate\nrioglyph rioglyph-milage\nrioglyph rioglyph-minus-light\nrioglyph rioglyph-minus-sign\nrioglyph rioglyph-minus\nrioglyph rioglyph-missing\nrioglyph rioglyph-mode-dark-light\nrioglyph rioglyph-more\nrioglyph rioglyph-new-window\nrioglyph rioglyph-newspaper\nrioglyph rioglyph-note\nrioglyph rioglyph-notification\nrioglyph rioglyph-number-1\nrioglyph rioglyph-number-2\nrioglyph rioglyph-number-3\nrioglyph rioglyph-off\nrioglyph rioglyph-oil-can\nrioglyph rioglyph-ok-circle\nrioglyph rioglyph-ok-dashed\nrioglyph rioglyph-ok-sign\nrioglyph rioglyph-ok\nrioglyph rioglyph-onboarding\nrioglyph rioglyph-ongoing\nrioglyph rioglyph-option-horizontal\nrioglyph rioglyph-option-vertical\nrioglyph rioglyph-order\nrioglyph rioglyph-palette-broken\nrioglyph rioglyph-palette\nrioglyph rioglyph-paper-clip\nrioglyph rioglyph-parcel-broken\nrioglyph rioglyph-parcel\nrioglyph rioglyph-parking\nrioglyph rioglyph-pause-circle\nrioglyph rioglyph-pause\nrioglyph rioglyph-pdf-file\nrioglyph rioglyph-pencil-square\nrioglyph rioglyph-pencil\nrioglyph rioglyph-phone\nrioglyph rioglyph-pictures\nrioglyph rioglyph-pin-range\nrioglyph rioglyph-pin\nrioglyph rioglyph-play-circle\nrioglyph rioglyph-play\nrioglyph rioglyph-plugged-off\nrioglyph rioglyph-plugged-on\nrioglyph rioglyph-plus-light\nrioglyph rioglyph-plus-sign\nrioglyph rioglyph-plus\nrioglyph rioglyph-pm\nrioglyph rioglyph-poi\nrioglyph rioglyph-polygon\nrioglyph rioglyph-position\nrioglyph rioglyph-print\nrioglyph rioglyph-progress-ongoing\nrioglyph rioglyph-progress-remaining\nrioglyph rioglyph-progression\nrioglyph rioglyph-prompt\nrioglyph rioglyph-pto-off\nrioglyph rioglyph-pto-on\nrioglyph rioglyph-pushpin\nrioglyph rioglyph-puzzle\nrioglyph rioglyph-pylon\nrioglyph rioglyph-qr-code\nrioglyph rioglyph-question-sign\nrioglyph rioglyph-question\nrioglyph rioglyph-record\nrioglyph rioglyph-recycle\nrioglyph rioglyph-refresh\nrioglyph rioglyph-remove-circle\nrioglyph rioglyph-remove-sign\nrioglyph rioglyph-remove\nrioglyph rioglyph-repeat-square\nrioglyph rioglyph-repeat\nrioglyph rioglyph-resize-full\nrioglyph rioglyph-resize-horizontal\nrioglyph rioglyph-resize-small\nrioglyph rioglyph-resize-vertical\nrioglyph rioglyph-retrofit\nrioglyph rioglyph-revert\nrioglyph rioglyph-rio-marker\nrioglyph rioglyph-rio\nrioglyph rioglyph-road-restrictions\nrioglyph rioglyph-road\nrioglyph rioglyph-robot\nrioglyph rioglyph-rocket\nrioglyph rioglyph-role-management\nrioglyph rioglyph-route-option\nrioglyph rioglyph-route-view\nrioglyph rioglyph-route\nrioglyph rioglyph-ruler\nrioglyph rioglyph-satellite-radar\nrioglyph rioglyph-save\nrioglyph rioglyph-scale\nrioglyph rioglyph-scan\nrioglyph rioglyph-scissors\nrioglyph rioglyph-search-list\nrioglyph rioglyph-search-truck\nrioglyph rioglyph-search\nrioglyph rioglyph-send\nrioglyph rioglyph-series\nrioglyph rioglyph-server-stack\nrioglyph rioglyph-settings\nrioglyph rioglyph-share-alt\nrioglyph rioglyph-share-nodes\nrioglyph rioglyph-share\nrioglyph rioglyph-shelve\nrioglyph rioglyph-ship\nrioglyph rioglyph-shopping-bag\nrioglyph rioglyph-shopping-cart\nrioglyph rioglyph-signature\nrioglyph rioglyph-slope-down-max\nrioglyph rioglyph-slope-down-min\nrioglyph rioglyph-slope-up-max\nrioglyph rioglyph-slope-up-min\nrioglyph rioglyph-sort-by-attributes-alt\nrioglyph rioglyph-sort-by-attributes\nrioglyph rioglyph-sort\nrioglyph rioglyph-sparkles\nrioglyph rioglyph-speed\nrioglyph rioglyph-sphere\nrioglyph rioglyph-spinner\nrioglyph rioglyph-split-view\nrioglyph rioglyph-square-dashed\nrioglyph rioglyph-stack-add\nrioglyph rioglyph-stack-iso\nrioglyph rioglyph-stack\nrioglyph rioglyph-star-empty\nrioglyph rioglyph-star\nrioglyph rioglyph-stars\nrioglyph rioglyph-start\nrioglyph rioglyph-stats-high\nrioglyph rioglyph-stats-line-dots\nrioglyph rioglyph-stats-low\nrioglyph rioglyph-stats-medium\nrioglyph rioglyph-stats\nrioglyph rioglyph-status-available\nrioglyph rioglyph-status-change-horizontal\nrioglyph rioglyph-status-change\nrioglyph rioglyph-status-driving\nrioglyph rioglyph-status-resting\nrioglyph rioglyph-status-working\nrioglyph rioglyph-steering-wheel\nrioglyph rioglyph-stopover\nrioglyph rioglyph-support\nrioglyph rioglyph-table-view\nrioglyph rioglyph-tachograph-download\nrioglyph rioglyph-tachograph\nrioglyph rioglyph-tag\nrioglyph rioglyph-tasks\nrioglyph rioglyph-temperature\nrioglyph rioglyph-th-list\nrioglyph rioglyph-thumbs-down\nrioglyph rioglyph-thumbs-up\nrioglyph rioglyph-tickets\nrioglyph rioglyph-time-alt\nrioglyph rioglyph-time-cancle\nrioglyph rioglyph-time-incomplete\nrioglyph rioglyph-time\nrioglyph rioglyph-tire\nrioglyph rioglyph-tms\nrioglyph rioglyph-to-bottom\nrioglyph rioglyph-to-left\nrioglyph rioglyph-to-right\nrioglyph rioglyph-to-top\nrioglyph rioglyph-tracking-package\nrioglyph rioglyph-traffic-lights\nrioglyph rioglyph-trailer-baseline\nrioglyph rioglyph-trailer\nrioglyph rioglyph-trailerposition\nrioglyph rioglyph-train\nrioglyph rioglyph-transfer\nrioglyph rioglyph-transition-push-right\nrioglyph rioglyph-transition-right\nrioglyph rioglyph-trash\nrioglyph rioglyph-triangle-bottom\nrioglyph rioglyph-triangle-left\nrioglyph rioglyph-triangle-right\nrioglyph rioglyph-triangle-top\nrioglyph rioglyph-trophy\nrioglyph rioglyph-truck-baseline\nrioglyph rioglyph-truck-breakdown\nrioglyph rioglyph-truck-unit\nrioglyph rioglyph-truck\nrioglyph rioglyph-unassigned\nrioglyph rioglyph-unavailable\nrioglyph rioglyph-unlink\nrioglyph rioglyph-upload\nrioglyph rioglyph-user-add\nrioglyph rioglyph-user-group\nrioglyph rioglyph-user-ok\nrioglyph rioglyph-user-remove\nrioglyph rioglyph-user-sign-off\nrioglyph rioglyph-user-sign\nrioglyph rioglyph-user\nrioglyph rioglyph-van-baseline\nrioglyph rioglyph-van\nrioglyph rioglyph-variable\nrioglyph rioglyph-video\nrioglyph rioglyph-volume\nrioglyph rioglyph-wallet\nrioglyph rioglyph-warehouse\nrioglyph rioglyph-warning-sign\nrioglyph rioglyph-weather-cloudy\nrioglyph rioglyph-weather-icy\nrioglyph rioglyph-weather-overcast\nrioglyph rioglyph-weather-raining\nrioglyph rioglyph-weather-snowing\nrioglyph rioglyph-weather-stormy\nrioglyph rioglyph-weather-sunny\nrioglyph rioglyph-weather-thundering\nrioglyph rioglyph-weather-windy\nrioglyph rioglyph-weight\nrioglyph rioglyph-width\nrioglyph rioglyph-wifi\nrioglyph rioglyph-window\nrioglyph rioglyph-workflow-step\nrioglyph rioglyph-workflow\nrioglyph rioglyph-workshop\nrioglyph rioglyph-wrench\nrioglyph rioglyph-xmas-raindeer\nrioglyph rioglyph-xmas-santa\nText styles\nHeadline size\n\ntext-size-h1\ntext-size-h2\ntext-size-h3\ntext-size-h4\ntext-size-h5\ntext-size-h6\n\nText size\n\ntext-size-10\ntext-size-11\ntext-size-12\ntext-size-14\ntext-size-16\ntext-size-18\ntext-size-20\n\nText weight\n\ntext-thin\ntext-light\ntext-normal\ntext-medium\ntext-bold\nText style\n\ntext-style-normal\ntext-style-italic\n\nText decoration\n\ntext-decoration-none\nhover-text-decoration-none\ntext-decoration-line-through\ntext-decoration-underline\nunderline-offset-2\nunderline-offset-3\nunderline-offset-4\nunderline-offset-5\n\nText wrapping\n\nwhite-space-nowrap\nwhite-space-normal\n\nText transform\n\ntext-capitalize\nTEXT-LOWERCASE\ntext-uppercase\ntext capitalize first word\ntext-transform-none\nHeadings\n\nThe reason why there are heading tags like <h2> and heading classes like .h2 is due to different use cases. A <h2> tag for instance is an essential SEO tag often used by a CMS like WordPress or Typo3. For these Tools, we can not change the code but we need some styling for the HTML element itself.\nAnother example is the <strong> or <b> tags and the .text-bold class. The heading classes like the .h2 class can be used in a service application, as those are not SEO relevant. As the UIKIT uses an atomic CSS approach, the same style can be achieved when combining .text-size-h2 .text-bold margin-top-10 margin-bottom-20 classes.\n\nHeadline tags\n\nHeading 1\nHeading 2\nHeading 3\nHeading 4\nHeading 5\nHeading 6\n\nHeadline classes\n\nh1\nh2\nh3\nh4\nh5\nh6\n\nMisc tags\n\nThis line of text is meant to be treated as fine print.\nThe following snippet of text is rendered as bold text.\nThe following snippet of text is rendered as italicized text.\nAn abbreviation of the word attribute is attr.\nAlignment\ntext-left\ntext-center\ntext-right\nBlockquote\nLorem ipsum white.Lorem ipsum black.Lorem ipsum decent.Lorem ipsum lightest.Lorem ipsum lighter.Lorem ipsum light.Lorem ipsum gray.Lorem ipsum dark.Lorem ipsum darker.Lorem ipsum darkest.\nCode\nvar test = 'Hello World!';\nThis is an inline Codeblock for use in text.\n\n// This is a JS example\nvar test = \"Hello World\";\nconsole.log(test);\nCursor\nYou can disable all pointer events by addingpointer-events-none\ncursor-default\ncursor-pointer\ncursor-text\ncursor-move\ncursor-grabbing\ncursor-grab\ncursor-not-allowed\ncursor-row-resize\ncursor-col-resize\ncursor-col-resize\ncursor-ew-resize\ncursor-help\ncursor-cell\ncursor-copy\ncursor-crosshair\nEllipsis\nNote: Ellipsis only works with block elements. It does not work withdisplay-grid. Combine the classes withdisplay-block or display-flex\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\nLine height\nWhen working with text, it's important to consider the relationship between the text size and the line height. For larger headlines, a line height of 1.2 to 1.25 is recommended to maintain readability and visual balance. For plain body text or text inside promotion blocks, a slightly larger line height of 1.4 to 1.5 is suggested to improve readability and the overall reading experience.\n\nRule of thumb: the larger the text size, the smaller the line height should be.\n\nNote: The listed classes are not necessary for the use of ourtext-size classes. Use them only if you want to have the exact the same line-height as your text-size is.\nline-height-10\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-11\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-12\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-14\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-16\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-18\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-20\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-125rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-130rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-135rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-150rel\n\nLorem ipsum dolor sit amet, dui eget elit.\nline-height-h1\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h2\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h3\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h4\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h5\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h6\n\nLorem ipsum dolor sit amet, dui eget elit.\nUser select\nuser-select-all\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nuser-select-none\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nText box\ntext-box-trim-start\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\ntext-box-trim-both\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\ntext-box-auto\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nno text-box\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nText wrapping\nWord break\n\nFinanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.\n\nHyphens\n\nFinanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.\n\nBalance\ncaniuse\n\nAllows text to have it's lines broken that each line is roughly the same width.\n\nPretty\ncaniuse\n\nIt evaluate the last four lines in a text block to work out adjustments as needed to ensure the last line has two or more words.\nCols\nNote: Col classes without a breakpoint addition are always weaker than with an addition. To reset a breakpoint class, you always have to set another larger breakpoint class, otherwise the set breakpoint is always active.Right example col-xs-6col-sm-12 col-xs-6 will only be active on small screensWrong example col-xs-6col-12 col-xs-6 will always be active\ncol-12\n\ncol-6\n\ncol-6\n\ncol-4\n\ncol-4\n\ncol-4\n\ncol-3\n\ncol-3\n\ncol-3\n\ncol-3\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\nResponsive cols\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\nEqual Height Cols\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nContainer fluid\ncontainer fluid-small\ncontainer fluid-default\ncontainer fluid-large\ncontainer fluid-extra-large\ncontainer fluid-ultra-large\nContainer\nNote: If a container is used without the fluid classes, it has a maximum width per breakpoint and will jump when the screen is resized.\ncontainer\nContainer queries\nWhat are container queries?\nWhile traditional container classes like container and fluid-default respond to the viewport width,container queries respond to the size of the component’s parent container. This allows components to adapt their layout based on context, not just screen size.\n\nBy reacting to the container's width instead of the screen, container queries enable components to become context-aware—adapting their layout depending on where they are used. Whether inside a narrow sidebar or a wide content area, components can now behave responsively within their own environment, making designs more modular, flexible, and reusable.\nUsage\nThe UIKIT provides atomic utility classes for container queries, enabling you to quickly apply conditional styles directly in your JSX/HTML based on container width.\n\n1. Define the container: mark an ancestor element as a container using the specific cq-container class. This tells the browser which element's size should be monitored. <div class=\"cq-container\"<!-- content goes here --</div\n2. Apply CQ utility classes: add cq-300:... classes to the descendant elements you want to style conditionally based on the container's. <div class=\"cq-container\"<div class=\"padding-10 cq-400:padding-15 cq-600:padding-25\"<!-- more content goes here --</div</div\n\nhtml\n<div class=\"cq-container\"\n<!-- content goes here --\n</div\n\nhtml\n<div class=\"cq-container\"\n<div class=\"padding-10 cq-400:padding-15 cq-600:padding-25\"\n<!-- more content goes here --\n</div\n</div\n\nThe class naming convention is: cq: + [breakpointValue] + : + [property] + - + [value]\n\n- cq: is the prefix for all container query utilities.\n- [breakpointValue] is one of the numeric identifiers from the table above (e.g., 300, 400, 500, 600, 700).\n- [property] is the type of property being styled (e.g., padding, margin-top, flex-column, grid-cols).\n- [value] is the value from the library's scale (e.g., 10, 25, auto).\nContainer query breakpoints\nOur container query utilities are based on a set of predefined width breakpoints. The breakpoint value is included directly in the class name for clarity.\n\nWe use a \"max-width\" query for the smallest breakpoint (300px) to target styles up to that size, and \"min-width\" queries for all larger breakpoints to target styles from that size upwards.\nContainer query example and classes\nItem 1\nItem 2\nItem 3\nFlexbox\nCenter\n\nLorem ipsum dolor\n\nTop start\n\nLorem ipsum dolor\n\nBottom start\n\nLorem ipsum dolor\n\nTop end\n\nLorem ipsum dolor\n\nBottom end\n\nLorem ipsum dolor\n\nSpace between\n\nLorem ipsum dolor\nLorem ipsum dolor\nLorem ipsum dolor\n\nEven split columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nMultiple even columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\n\n70/30 columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\nGrid\ngrid-cols-1\n\ngrid-cols-2\ngrid-cols-2\n\ngrid-cols-3\ngrid-cols-3\ngrid-cols-3\n\ngrid-cols-4\ngrid-cols-4\ngrid-cols-4\ngrid-cols-4\n\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\n\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\n\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\n\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\n\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\n\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\n\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\n\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\nGrid colspan / rowspan\ngrid-colspan-3\nGrid column-start / column-end\nGrid auto-fit\nIn CSS Grid, the auto-fit keyword is used with the repeat() function to automatically adjust the number of columns (or rows) based on the available space in the container. It helps create responsive layouts by filling the container with as many columns (or rows) of a specified size as possible.\n\nDynamic Column Creation: \"auto-fit\" automatically creates as many columns as will fit in the available space, potentially adding or removing columns as the container resizes.\n\nResponsive Design: Ensures that the grid adapts to different screen sizes by adjusting the number of columns.\nGrid max-content / auto content\nThe max-content value sizes the grid column to be as wide as the largest piece of content inside it. Essentially, it takes up as much space as necessary to fit the longest word or item without breaking. This is useful when you want the column to expand to fit its content, ensuring no content is clipped or wrapped unnecessarily.\n\nThe auto value sizes the grid column based on the content, but it can also take into account the available space and other factors. If there's more space available, \"auto\" can expand to fill it, but it won't exceed the available space like \"max-content\". This is useful when you want the column to take up space according to its content but also adapt to the overall layout and available space.\n\nChoosing between max-content and auto depends on whether you want the column to strictly fit its content (potentially ignoring the available space) or to adapt to the content while also being flexible within the grid layout.\nmax-content\n1fr\n\nmax-content\n1fr\nmax-content\n1fr\n\n1fr\nmax-content\n\n1fr\nmax-content\n1fr\nmax-content\n\nauto\n1fr\n\nauto\n1fr\nauto\n1fr\n\n1fr\nauto\n\n1fr\nauto\n1fr\nauto\nGrid rows\nHelper class for 3 rows where the middle row expands and can scroll\nLorem item 0\nLorem ipsum dolor sit amet\n\nLorem item 1\nLorem ipsum dolor sit amet\n\nLorem item 2\nLorem ipsum dolor sit amet\n\nLorem item 3\nLorem ipsum dolor sit amet\n\nLorem item 4\nLorem ipsum dolor sit amet\n\nLorem item 5\nLorem ipsum dolor sit amet\n\nLorem item 6\nLorem ipsum dolor sit amet\n\nLorem item 7\nLorem ipsum dolor sit amet\n\nButton\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nGrid placement\nplace-items-center\nGrid stacking\nstack item 1\nstack item 2\n\nstack item 1\nstack item 2\nSubgrid\nThe subgrid value in CSS Grid Layout is a feature that allows a nested grid to inherit the column and/or row definitions from its parent grid container. This means that the subgrid can align its items according to the tracks defined in the parent grid, creating a more consistent and aligned layout structure. It is particularly useful for complex layouts where nested elements need to align with the overall grid structure without redefining the grid tracks. By using subgrid, you can maintain a cohesive design while simplifying the CSS code needed for layout alignment. This feature enhances the flexibility and power of CSS Grid, making it easier to manage nested grid layouts.\nForm example\nConnection\nHostPortReally long label\nCredentials\nUsernamePasswordCheckboxYet another level of nesting\n\nSubgrid enabled\nSubmit\nFull NameEmailMessage\n\nSubgrid enabled\nSubmit\nSubgrid Cards\nArticle title\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla? Consectetur adipisci illum ipsa reprehenderit deleniti quia qui aliquid tempora ea accusamus. Quibusdam.\nby Mia at Company\nLove it\nArticle title\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla?\nby Mia at Company\nLove it\nWhat if we have a much longer article title?\nLorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus eveniet, tempore error maxime praesentium eos.\nby Jen \"Boss\" Simmons at Company\nLove it so\nArticle titles aren't consistent\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.\nby Deja \"Empathic Dev\" Hodge at Company\nLove it\nThis article title will need to be fixed in Post-Production with a much shorter and catchier click-bait title\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.\nby Ryanne \"Fix It In Post\" Hodson at Company\nLove it\nShort title\nLorem ipsum dolor sit amet consectetur adipisicing elit. Optio enim maxime repellat illo!\nby Jay \"Do It\" Dedman at Company\nLove it\n\nSubgrid enabled\nPosition\nLorem ipsum dolor sit amet\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nGap\nNote: Since using a percentage vertical gap requires a fixed height of the wrapping element, we decided to offer only horizontal percentage gap classes. Vertical gap in px is of course possible.\ngap-0\ngap-0\ngap-0\n\ngap-1\ngap-1\ngap-1\n\ngap-2\ngap-2\ngap-2\n\ngap-3\ngap-3\ngap-3\n\ngap-4\ngap-4\ngap-4\n\ngap-5\ngap-5\ngap-5\n\ngap-10\ngap-10\ngap-10\n\ngap-15\ngap-15\ngap-15\n\ngap-20\ngap-20\ngap-20\n\ngap-25\ngap-25\ngap-25\n\ngap-50\ngap-50\ngap-50\nSpace\nNote: For flex or grid solutions please use gap instead.\nspace-y-0\nspace-y-0\nspace-y-0\n\nspace-y-1\nspace-y-1\nspace-y-1\n\nspace-y-2\nspace-y-2\nspace-y-2\n\nspace-y-3\nspace-y-3\nspace-y-3\n\nspace-y-4\nspace-y-4\nspace-y-4\n\nspace-y-5\nspace-y-5\nspace-y-5\n\nspace-y-10\nspace-y-10\nspace-y-10\n\nspace-y-15\nspace-y-15\nspace-y-15\n\nspace-y-20\nspace-y-20\nspace-y-20\n\nspace-y-25\nspace-y-25\nspace-y-25\n\nspace-y-50\nspace-y-50\nspace-y-50\nMargin\nSurrouding\n\nmargin-0\n\nmargin-1\n\nmargin-2\n\nmargin-3\n\nmargin-4\n\nmargin-5\n\nmargin-10\n\nmargin-15\n\nmargin-20\n\nmargin-25\n\nmargin-50\n\nHorizontal\n\nmargin-x-0\n\nmargin-x-1\n\nmargin-x-2\n\nmargin-x-3\n\nmargin-x-4\n\nmargin-x-5\n\nmargin-x-10\n\nmargin-x-15\n\nmargin-x-20\n\nmargin-x-25\n\nmargin-x-50\n\nVertical\n\nmargin-y-0\n\nmargin-y-1\n\nmargin-y-2\n\nmargin-y-3\n\nmargin-y-4\n\nmargin-y-5\n\nmargin-y-10\n\nmargin-y-15\n\nmargin-y-20\n\nmargin-y-25\n\nmargin-y-50\n\nLeft\n\nmargin-left-0\n\nmargin-left-1\n\nmargin-left-2\n\nmargin-left-3\n\nmargin-left-4\n\nmargin-left-5\n\nmargin-left-10\n\nmargin-left-15\n\nmargin-left-20\n\nmargin-left-25\n\nmargin-left-50\n\nRight\n\nmargin-right-0\n\nmargin-right-1\n\nmargin-right-2\n\nmargin-right-3\n\nmargin-right-4\n\nmargin-right-5\n\nmargin-right-10\n\nmargin-right-15\n\nmargin-right-20\n\nmargin-right-25\n\nmargin-right-50\n\nTop\n\nmargin-top-0\n\nmargin-top-1\n\nmargin-top-2\n\nmargin-top-3\n\nmargin-top-4\n\nmargin-top-5\n\nmargin-top-10\n\nmargin-top-15\n\nmargin-top-20\n\nmargin-top-25\n\nmargin-top-50\n\nBottom\n\nmargin-bottom-0\n\nmargin-bottom-1\n\nmargin-bottom-2\n\nmargin-bottom-3\n\nmargin-bottom-4\n\nmargin-bottom-5\n\nmargin-bottom-10\n\nmargin-bottom-15\n\nmargin-bottom-20\n\nmargin-bottom-25\n\nmargin-bottom-50\nMargin helper\nLast child (self class)\n\nChild\nChild\nChild\nChild\nChild\n\nLast child (parent class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst child (self class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst child (parent class)\n\nChild\nChild\nChild\nChild\nChild\nPadding\nSurrouding\n\npadding-0\n\npadding-1\n\npadding-2\n\npadding-3\n\npadding-4\n\npadding-5\n\npadding-10\n\npadding-15\n\npadding-20\n\npadding-25\n\npadding-50\n\nHorizontal\n\npadding-x-0\n\npadding-x-1\n\npadding-x-2\n\npadding-x-3\n\npadding-x-4\n\npadding-x-5\n\npadding-x-10\n\npadding-x-15\n\npadding-x-20\n\npadding-x-25\n\npadding-x-50\n\nVertical\n\npadding-y-0\n\npadding-y-1\n\npadding-y-2\n\npadding-y-3\n\npadding-y-4\n\npadding-y-5\n\npadding-y-10\n\npadding-y-15\n\npadding-y-20\n\npadding-y-25\n\npadding-y-50\n\nLeft\n\npadding-left-0\n\npadding-left-1\n\npadding-left-2\n\npadding-left-3\n\npadding-left-4\n\npadding-left-5\n\npadding-left-10\n\npadding-left-15\n\npadding-left-20\n\npadding-left-25\n\npadding-left-50\n\nRight\n\npadding-right-0\n\npadding-right-1\n\npadding-right-2\n\npadding-right-3\n\npadding-right-4\n\npadding-right-5\n\npadding-right-10\n\npadding-right-15\n\npadding-right-20\n\npadding-right-25\n\npadding-right-50\n\nTop\n\npadding-top-0\n\npadding-top-1\n\npadding-top-2\n\npadding-top-3\n\npadding-top-4\n\npadding-top-5\n\npadding-top-10\n\npadding-top-15\n\npadding-top-20\n\npadding-top-25\n\npadding-top-50\n\nBottom\n\npadding-bottom-0\n\npadding-bottom-1\n\npadding-bottom-2\n\npadding-bottom-3\n\npadding-bottom-4\n\npadding-bottom-5\n\npadding-bottom-10\n\npadding-bottom-15\n\npadding-bottom-20\n\npadding-bottom-25\n\npadding-bottom-50\nHeight\nWidth\n30px\n35px\n40px\n45px\n50px\n60px\n70px\n80px\n90px\n100px\n\n10pct\n20pct\n25pct\n30pct\n33pct\n40pct\n50pct\n60pct\n66pct\n70pct\n75pct\n80pct\n90pct\n100pct\nContent based min-width\nThe min-width property defines the smallest width an element can shrink to. When using keywords like max-content, min-content, orfit-content, you tell the browser how the element should behave in relation to its content size. These values are especially useful in responsive layouts or flexible components where content-driven sizing is required.\n\n- min-width-min-content The element’s minimum width becomes the smallest possible width without causing content overflow. It allows text wrapping, meaning the element will compress as much as possible while still displaying all content correctly.\n- min-width-max-content The element’s minimum width equals the longest unbreakable line of its content. It prevents text or inline items from wrapping, forcing the box to expand horizontally to fit the entire content in one line. This may cause overflow if the content is too wide for its container.\n- min-width-fit-content This is a hybrid behavior — the element adapts its width somewhere betweenmin-content and max-content. The browser decides the best fit for the available space, making it suitable for adaptive or flexible layouts.\nmax-contentThis_is_a_really_long_word_that_will_not_break.\n\nmin-contentThis is a really long text that will break and wrap.\n\nfit-contentThis text fits naturally within the box.\nBreadcrumb\nlevel 1\nlevel 2\nlevel 3\nlevel 4\nPager\nSee Pager for the actual React component.\nPager with label\n\nPrevious\nThe previous chapter\n\nNext\nThe next chapter\n\nCompact Pager without label\n\nPrevious\n\nNext\nPagination\n1\n2\n3\n4\n5\n\nUsage\nUse pagination buttons only for UI elements that benefit from stepping through discrete content pages, such as: Image carousels – where users navigate through multiple slides or multi-step flows – to guide users through a process one step at a time.\nNot for Tables\nTables should use a “Load more” button instead of pagination.\nWhy \"Load more\" is preferred\nContinuous scanning:\nUsers can scroll down and view more data without breaking flow.\nLess disruption:\nAvoids jarring page reloads or resets when switching pages.\nImproved comparability:\nAll previously loaded data stays in view, enabling easier side-by-side comparison of rows.\nLess cognitive load:\nUsers rarely remember what was on “Page 6”, especially when rows are changing. Sequential pages interrupt scanning and exploration.\nNo page size UI:\nYou don’t need to offer dropdowns for rows per page, reducing UI clutter.\nPills\nStandard\n\nPill 1\nPill 2\nPill 3\nDisabled Pill\n\nJustified\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\n\nJustified with icons\n\nPill 1\n\nPill 2\n\nPill 3\n\nDisabled Pill\n\nJustified with word-wrap\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\nFilled\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\n\nFilled with icons only\nStacked\n\nStacked pill 1\nStacked pill 2\nStacked pill 3\nDisabled stacked pill\n\nStacked decent\n\nStacked pill 1\nStacked pill 2\nStacked pill 3\nDisabled stacked pill\n\nStacked decent menu\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\nTabs\nStandard\n\nTab 1\nTab 2\nTab 3\nDisabled tab\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nBordered content\n\nTab 4\nTab 5\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nJustified\n\nTab 1\nTab 2\nTab 3\nLong tab name with line-break\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nJustified with word-wrap\n\nTab 1\nTab 2\nTab 3\nLong tab name with line-break\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\nTable\nSee also our Table components like TableToolbar, TableSearch,TableViewToggles, TableCardsSorting, and TableSettingsDialog. For a more advanced table demo checkout our demo service\nCommon table style\nLabelNewAction\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nLabel\n\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nTable head\nDefault table head\n\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\n\nTable head filled\n\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\nRounded table\nUse the table rounded classed when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners without needing to add additional padding.\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nHover table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nBordered table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nStriped table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nGrouped table\nHead columnHead columnHead columnHead column\n\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nSticky table header\nSticky column headSticky column headSticky column headSticky column head\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nSticky table columns\nHeadHeadHeadHeadHeadHeadHeadHeadHead\n\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nHeadHeadHeadHeadHeadHeadHeadHeadHead\n\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nTable grid lines\nShowing table grid lines my be used in data heavy tables also known as DataTables.\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nTable row span\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumn\nTable double row header\nDouble row header with filled header\nScores\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\n\nDouble row header with border and footer\nYears\n20212022202320242025\n\nProduct 1Income50708090100\nExpense3763708291\nProfit1371089\n\nProduct 2Income5067799054\nExpense3370507930\nProfit17-3191221\n\nTotal Profit304292030\nCondensed table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nFixed table layout\nThe table-layout-fixed class avoids a horizontal overflow by squeezing all columns together. Use this option with caution since columns with a fixed width cannot be compressed any further, and the content of the squeezed columns may not be readable anymore.\nHead columnHead columnHead columnHead columnHead column\n\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nResponsive tables\nTables - by design - are not great for small screens. Columns get squeezed together, and content is hard to read or gets cut off.\n\nThere are some options to tackle this problem\n\n- Wrapping the table in another div element and using the class table-responsive on that wrapper. That will create a horizontal overflow of the table when the available space exceeds.\n- Try to avoid defining a fixed width on all columns as that avoids shrinking columns automatically for smaller screens.\n- Use alternative representations for the table by either rendering a list instead of on small screens or using the table cards view on mobile screens.\n- Use class ellipsis-1 for column header or table cell content when the text gets truncated and to show the \"...\" at the end.\nTable cards\nNewButton\n\nFilter\n\nLabel\n\nIdId\nName\nVIN\nStatus\nDuration\n\nIdNameVINStatusDuration\n\n233IpsumNo dataInactive5h 15m\n\n456No data456Active4h 55m\n\n878No data878Active9h 10m\n\n895No data895Active8h 45m\n\n978IpsumNo dataInactive6h 35m\n\n2345Lorem2345Active11h 50m\n\n2445No data2445Active7h 25m\n\n3456No data3456Active12h 00m\n\n4567No data4567Active10h 20m\n\n7354Lorem7354Active10h 30m\n\n70/100\n\nLoad more\nStates in tables\nHead columnHead columnHead columnHead columnHead column\n\nNo entries found\nWe could not find any data entries for your search query. Please refine your search\nAlerts\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\nBadges\nUnlike labels, which are used for categorization and emphasis, badges provide quick contextual information in a compact and visually distinct manner.\nUse badges for numeric indicators, such as showing counts (e.g., unread messages, notifications, cart items). They are also useful for small floating highlights on UI elements (e.g., \"New\" or \"Beta\"). Badges are commonly placed on icons, buttons, menus, or navigation elements.\nHome1\nProfile\nMessages3\n\n01234567\n01234567\n1011121314151617\nBadges on Icons\n\n2323232323232323\nBadges as Indicator\n\nInbox3\nInbox99+\nCallouts\nCallout default\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout primary\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout secondary\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout info\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout success\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout warning\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout danger\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\nCounter\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nKey\nKeys examplePro tip: press m to comment\nPress ctrl + a to select all\n\nUse lower-case namesshiftenterctrlalt\nUnicode symbols⇧⇪↵⌫→←↑↓⇥⇤␣\n\nMac specific keys - see DeviceUtils⌘⌥⌃\nLabels\nNote: For having icons in labels, the text must be wrapped with a span to ensure the correct spacing.\nLabels are small, colored indicators used to represent statuses, categories, or highlights in the UI.\nThe standard labels have a light background and are ideal for subtle status indications that blend naturally with the interface.\nThe filled labels use a bold background color, making them more prominent—best suited for drawing attention to critical statuses or highlighting important information.\n\nStandard labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nFilled labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nLabels width icons\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nFilled labels width icons\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nCondensed labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nCondensed and filled labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\nLists\nOrdered list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nUnordered list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nSquare list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\nList groups\nList group item default\nList group item primary\nList group item secondary\nList group item info\nList group item success\nList group item warning\nList group item danger\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nList group item link (a)List group item link (a)List group item link (a)List group item link (a)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\n\nHeadline default\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ndefault\n\nHeadline primary\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nprimary\n\nHeadline secondary\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nsecondary\n\nHeadline info\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ninfo\n\nHeadline success\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nsuccess\n\nHeadline warning\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nwarning\n\nHeadline danger\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ndanger\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\nPanels\npanel-heading1\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\nProgress bars\nStandard\n\nStriped\n\nAnimated\n\nIndeterminate\n\nStacked\n\nStacked ratings\n\nStacked ratings with custom icon overlay\nPoorExcelent\nWells\nHi, my name is well-sm\n\nHi, my name is well\n\nHi, my name is well-lg\nForms\nLegend\n\nEmail\nPassword\nTextarea\n\nNumber with controls\nNumber without controls\n\nRadiosOption one\nOption two\n\nCheckboxLorem ipsum dolor sit amet.\n\nNative Selects12345\nCancelSubmit\n\nDisabled input\nInput success\nInput warning\nInput error\n\nTotal lengthm\n\nHeightm\n\nTotal lengthm\n\nHeightm\n\nTotal lengthm\n\nHeightm\n\nDefault inputSome input info for the user\nInput addon labelLabelLabel\n\nInput addons.00\n\nInput groupsButton\n\nButton\n\nInput with dropdownAction\n\nAction\n\nDefault inputSome input info for the userThis is an error message\nInput addon labelLabelThis is a warning message\nLabel\n\nInput addons\n.00\n\nInput groupsButton\n\nButton\n\nInput with dropdownAction\n\nAction\nForm sized examples\nSize by form-Group class\nform-group-sm\nform-group-smXX\n\nform-group-sm12345\nform-group-sm\nform-group\nform-groupXX\n\nform-group\nform-group12345\nform-group-lgXX\n\nform-group-lg\nform-group-lg\nform-group-lg12345\n\nSize by Input Class\ninput-sm\ninput-group-smXX\n\ninput-sm\ninput-group-sm12345\n\ninput\ninput-groupXX\n\ninput\ninput-group12345\n\ninput-lg\ninput-group-lgXX\n\ninput-lg\ninput-group-lg12345\nForm with fieldset and legend\nAn HTML <fieldsetelement is used to group related elements within a form. It is particularly useful for organizing complex forms by creating logical sections, improving both the form's structure and user experience. The <fieldsetcan be paired with a <legendelement to provide a caption for the grouped content, making the form easier to understand and navigate.\n\nAllows for selective processing of grouped data, making it useful for handling specific sections of a form independently when used with the FormData API.\nA form with fieldsetLorem ipsum\nDolor Sit amet\n\nLorem ipsum\n\nLorem ipsum\n\nA form with fieldset disabledLorem ipsum\nDolor Sit amet\n\nLorem ipsum\n\nLorem ipsum\nInput resize\nresize-noneresize-vertical\nAnimations\nslide-out\nleftupdownright\n3s2s1s09s08s07s06s05s04s03s02s01s\nlooprestart\nlineareaseease-inease-outease-in-out\ninfiniterepeat-1repeat-2repeat-3\nTest animationReset\nTransition\nTransition properties\n\ntransition-opacity\ntransition-position\ntransition-all\n\nTransition timing functions\n\ntransition-ease\ntransition-ease-in-out\n\nTransition duration\n\ntransition-duration-01\ntransition-duration-02\ntransition-duration-03\ntransition-duration-04\ntransition-duration-05\nBlur\nBackdrop blur\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis elementum ante et est sagittis integer eget metus vel nunc semper.\nAspect ratio\nWith fixed width\n\n1\n1-2\n2-1\n4-3\n16-9\n16-10\n\nWith fixed height\n\n1\n1-2\n2-1\n4-3\n16-9\n16-10\nInset\ninset-0\n\ninset-x-0\n\ninset-y-0\n\nBase element\nShorthand element\nHelper\nclearanceclearfixchildren-first-border-top-nonefirst-child-border-top-nonechildren-last-border-bottom-nonelast-child-border-bottom-nonechildren-first-margin-top-0first-child-margin-top-0children-last-margin-bottom-0last-child-margin-bottom-0\nRotate\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.\nRotate 360°\n\nRotate -5° to 5°\nScale\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.\nScale\n\nHover scale\nTranslate\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform Syntax.\nDisplay\ndisplay-blockdisplay-inline-blockdisplay-flexdisplay-inline-flexdisplay-inlinedisplay-none\nOverflow\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\nVisibility\nVisible only at a certain breakpoint\n\nvisible-xsvisible-lsvisible-smvisible-mdvisible-lgvisible-xl\nVisible from a certain breakpoint\n\nvisible-min-lsvisible-min-smvisible-min-mdvisible-min-lg\nHidden only at a certain breakpoint\n\nhidden-xshidden-lshidden-smhidden-mdhidden-lghidden-xl\nHidden from a certain breakpoint\n\nhidden-min-lshidden-min-smhidden-min-mdhidden-min-lg\nHidden when element is empty\n\nhidden-empty\nscreen-xs: >480pxscreen-ls: 480pxscreen-sm: 768pxscreen-md: 992pxscreen-lg: 1200pxscreen-xl: 1700px\n\n.visible-xsVisibleHiddenHiddenHiddenHiddenHidden\n.visible-lsHiddenVisibleHiddenHiddenHiddenHidden\n.visible-smHiddenHiddenVisibleHiddenHiddenHidden\n.visible-mdHiddenHiddenHiddenVisibleHiddenHidden\n.visible-lgHiddenHiddenHiddenHiddenVisibleHidden\n.visible-xlHiddenHiddenHiddenHiddenHiddenVisible\n\n.hidden-xsHiddenVisibleVisibleVisibleVisibleVisible\n.hidden-lsVisibleHiddenVisibleVisibleVisibleVisible\n.hidden-smVisibleVisibleHiddenVisibleVisibleVisible\n.hidden-mdVisibleVisibleVisibleHiddenVisibleVisible\n.hidden-lgVisibleVisibleVisibleVisibleHiddenVisible\n.hidden-xlVisibleVisibleVisibleVisibleVisibleHidden\n\n.visible-min-lsHiddenVisibleVisibleVisibleVisibleVisible\n.visible-min-smHiddenHiddenVisibleVisibleVisibleVisible\n.visible-min-mdHiddenHiddenHiddenVisibleVisibleVisible\n.visible-min-lgHiddenHiddenHiddenHiddenVisibleVisible\n\n.hidden-min-lsVisibleHiddenHiddenHiddenHiddenHidden\n.hidden-min-smVisibleVisibleHiddenHiddenHiddenHidden\n.hidden-min-mdVisibleVisibleVisibleHiddenHiddenHidden\n.hidden-min-lgVisibleVisibleVisibleVisibleHiddenHidden\n\nPrint\n\nvisible-printvisible-print-inlinehidden-print\n\nVisibility only classes\n\nAll the above classes for hidden and visible are based on \"display: none\". The following class affects only visibility, allowing it to impact surrounding elements.\nvisibility-hidden\nZ-index",
     "category": "Foundations",
     "section": "Interaction",
     "boost": "Foundations foundations #foundations Foundations Interaction"
@@ -1093,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"
@@ -1152,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"
@@ -1214,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"
@@ -1274,7 +1274,7 @@
     "title": "Feature cards",
     "lead": null,
     "summary": "Lorem ipsum dolor sit amet",
-    "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nPeccatus speciosus demergo textilis vulticulus agnitio tum thalassinus tristis.\nEa repellat averto crepusculum architecto quas alioqui aestivus anser.\nVelit animus officiis valens laboriosam substantia usus abeo adimpleo desino.\nAer vulgus coma arceo.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nAscit vero atrocitas caveo delinquo torqueo.\nCuro aliquid appositus.\nCapto acsi approbo strues conculco aggero.\nVolup titulus sed claustrum sol vinitor pecus dolorem depopulo degusto.\nRead more\nLorem ipsum dolor sit amet\nTutis aegrus dolores truculenter ulterius molestias.\nCarcer sophismata tumultus vacuus dolores nihil ut vociferor virtus.\nConsectetur vix virgo tamdiu.\nQuisquam subnecto civis adsum terror.\nTabesco architecto decretum ambulo cunae quas curtus thema dens.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nBos temporibus perspiciatis.\nDeficio termes curto dolorum cunae agnitio copiose maiores defero culpa.\nAdipisci tumultus aperio.\nTimor cohibeo vigilo tempore cubitum.\nUtroque voveo accommodo blanditiis clarus curia claro tonsor bardus voluptatibus.\n\nView detailsGet started\nCustomize\nImport your own data\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more\n\nUse on mobile\nGet the app\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nDownload now\n\nTips\nDiscover new features\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more",
+    "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nUberrime stabilis ratione solio possimus pel conturbo vallum decens.\nFugit talis adipisci timidus concido cornu.\nValeo traho velociter accommodo sordeo tenax agnosco derelinquo.\nAsperiores ascit suasoria temptatio tabernus pax.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nAmiculum templum vesper vehemens antea canis annus tendo suasoria.\nCorreptius tonsor stultus antiquus barba sunt.\nAbundans agnosco cubicularis vivo.\nMolestias accusamus cotidie coniecto textus summisse theatrum astrum benevolentia.\nRead more\nLorem ipsum dolor sit amet\nAestas bonus ambitus assentator audio magnam viduo arceo vulticulus uxor.\nAddo denego decerno aspicio succedo.\nEum ipsa contego.\nUmerus tolero pectus demergo vulnero civitas agnosco tametsi.\nDolorem sulum credo voveo vos ullus.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nVallum magni terminatio numquam.\nPax appello cerno audax truculenter peior.\nTrado adicio adsidue debilito benigne usus.\nVesica arceo sufficio.\nPaens color sordeo derideo tam temeritas amitto despecto suus debitis.\n\nView detailsGet started\nCustomize\nImport your own data\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more\n\nUse on mobile\nGet the app\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nDownload now\n\nTips\nDiscover new features\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more",
     "category": "Templates",
     "section": "Content",
     "boost": "Feature cards templates/feature-cards #templates/feature-cards Templates Content"
@@ -1284,7 +1284,7 @@
     "title": "Form summary",
     "lead": null,
     "summary": "Request summary",
-    "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact personGerardo Osinski\nRequested roleInternational Response Director\nContact emailWerner.Lindgren@hotmail.com\nAnnual budget€162,294.00\nProject descriptionSpeculum terebro ducimus surculus benevolentia fuga tricesimus auctor.\nThema aedificium quod.\nPecto autus vinum adhuc venio.\nSupporting filesproject-outline.pdf\n2.4MB\nDownload\n\nwireframes.pdf\n3.7MB\nDownload",
+    "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact personLonnie Veum\nRequested roleChief Metrics Technician\nContact emailAnderson_Thompson89@gmail.com\nAnnual budget€183,921.00\nProject descriptionVeniam tam statim amplus quis arbor tertius.\nUndique demitto armarium deludo valetudo degusto.\nDeserunt ducimus demens vinitor reiciendis desino comitatus.\nSupporting filesproject-outline.pdf\n2.4MB\nDownload\n\nwireframes.pdf\n3.7MB\nDownload",
     "category": "Templates",
     "section": "Forms",
     "boost": "Form summary templates/form-summary #templates/form-summary Templates Forms"
@@ -1304,7 +1304,7 @@
     "title": "List blocks",
     "lead": null,
     "summary": "Lorem ipsum dolor",
-    "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nCenaculum aegrus deprimo viriliter autem sumptus paens.\n\nJacobi Group\nSit aeger dedico uxor audax quaerat volaticus sumptus.\n\nConnect\n\nGorczany LLC\nAutus terebro cibus tantillus comitatus consequuntur itaque deporto.\nContego viscus celebrer cetera sopor tres tubineus arguo curso.\n\nConnect\n\nKessler - Reichert\nSol umbra vilis calamitas.\n\nConnect\nMeeting type\n\nChoose the logistics session that fits your process\nFreight pickup\nSchedule cargo collection at origin\n\n30 min\n\nRoute planning\nDiscuss optimal route and ETA\n\n45 min\n\nDelivery coordination\nAlign final drop-off and documents\n\n60 min\nLorem ipsum dolor\nDespecto carbo sonitus tum ambitus necessitatibus vitium.\n\nRomaguera, Prohaska and Predovic\nComminor suppono arbitro cognomen.\n\nWalter LLC\nDebeo vestrum bibo accedo auctus aperiam calamitas reiciendis colo cinis.\nAuctor verumtamen culpo.\n\nProsacco Inc\nDefluo trucido vomer calcar.\nDesidero theologus bonus termes umquam uter deprimo.\nLorem ipsum dolor sit amet\nVorago volutabrum culpo denuo.\nCurvo numquam demulceo cavus stultus.\n\nKoelpin, Schuppe and Mueller\nIllum deleniti nemo colo decor corporis vere soleo advoco.\nSum culpo spectaculum communis deorsum ager somnus.\nReiciendis terga confugo pauci dignissimos decet copia velut.\n\nHomenick, Johnston and Will\nTot adamo nihil deporto.\nStips vallum tenus volup cervus aperte theatrum conspergo capio.\nAbduco spiritus vereor decerno aureus suggero doloribus audentia acervus conscendo.\n\nBlanda, Kessler and Mueller\nTaceo surculus paens non adstringo strues thema solio facere fugit.\nCruentus adipiscor vindico magnam venio tenus cupiditate.\nAdeptio teneo calco calcar veritatis optio succurro ipsam decerno adipiscor.\n\nZemlak Group\nSolum subito speculum.\nAdulescens et tempus utilis.\nDesolo autus cognomen.\nEnhance your application with powerful add-ons!\n\nUnbranded Plastic Chair\nExperience the grey brilliance of our Shirt, perfect for gaseous environments\n\n€91.30\nTotal per month\n\nGet Add-on\n\nSleek Rubber Cheese\nProfessional-grade Chicken perfect for criminal training and recreational use\n\n€41.79\nPer 1000 messages / month\n\nGet Add-on\n\nElegant Silk Towels\nThe Isaiah Shoes is the latest in a series of flashy products from Fahey Group\n\n€38.79\nPer 1000 messages / month\n\nGet Add-on\n\nTasty Rubber Chicken\nInnovative Chair featuring puzzled technology and Ceramic construction\n\n€83.95\nTotal per user / month\n\nGet Add-on\n\nModern Bamboo Ball\nSpencer LLC's most advanced Car technology increases known capabilities\n\n€74.20\nTotal per month\n\nGet Add-on\nFeatures\n\nLuxurious Plastic Tuna\nFeaturing Ytterbium-enhanced technology, our Ball offers unparalleled decent performance\n\nGorgeous Ceramic Chair\nFeaturing Moscovium-enhanced technology, our Cheese offers unparalleled idealistic performance\n\nBespoke Plastic Pizza\nIntroducing the Saint Martin-inspired Soap, blending wilted style with local craftsmanship\n\nFantastic Bamboo Bike\nStylish Pants designed to make you stand out with haunting looks\n\nElegant Silk Keyboard\nInnovative Shirt featuring firm technology and Ceramic construction\n\nBespoke Aluminum Sausages\nThe Organic intangible algorithm Bike offers reliable performance and married design",
+    "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nUna colo compono vado tutamen vel canis ante.\n\nStoltenberg - Dicki\nAmo sollicito recusandae molestiae acquiro talio arma demergo conspergo.\n\nConnect\n\nKuhic - Lebsack\nBene candidus cervus.\nCanto confugo adeptio clam.\n\nConnect\n\nFeeney, Leuschke and Zboncak\nAppositus villa ulterius.\n\nConnect\nMeeting type\n\nChoose the logistics session that fits your process\nFreight pickup\nSchedule cargo collection at origin\n\n30 min\n\nRoute planning\nDiscuss optimal route and ETA\n\n45 min\n\nDelivery coordination\nAlign final drop-off and documents\n\n60 min\nLorem ipsum dolor\nAverto sono demo vinitor abstergo cruciamentum tergo calculus.\n\nHirthe, Bahringer and Wunsch\nAuctor omnis velut timidus degusto.\n\nRosenbaum Inc\nAbsconditus decimus venio nulla deinde.\nPaens toties cunabula.\n\nZieme LLC\nUsque occaecati trucido dedecor ratione excepturi adiuvo solvo.\nComparo derideo curiositas substantia temporibus ambulo tui peccatus tenus.\nLorem ipsum dolor sit amet\nNeque fugit pariatur aperiam versus eaque tepidus.\nTamquam arguo summopere delectatio sum depopulo abscido aequitas deficio.\n\nHaley Inc\nSponte thalassinus amplexus speculum aer supra.\nAcquiro solitudo titulus alienus pauci laudantium voluntarius.\nAut vinculum conatus cinis acceptus caelum vacuus illo.\n\nKoelpin, Altenwerth and Maggio\nCalculus audio aequitas absum thalassinus depopulo.\nArcesso toties capillus amet explicabo.\nNon tempore vesco toties adopto annus centum socius.\n\nLindgren, Haag and Wintheiser\nCampana reiciendis pauper comminor solutio curtus venia.\nCiminatio casso cado sumo tabella.\nSpiculum deduco concido vorago abutor esse tum cervus charisma.\n\nLarson - Paucek\nDefleo commodo cognatus volubilis tergum undique concido.\nDefungo dolor vero tardus spero animi voluptatum accusamus.\nTergiversatio capillus tricesimus spes cuius vesica accusamus cuius conduco varietas.\nEnhance your application with powerful add-ons!\n\nPractical Wooden Chips\nIntroducing the Argentina-inspired Pizza, blending definitive style with local craftsmanship\n\n€83.79\nTotal per month\n\nGet Add-on\n\nOriental Granite Sausages\nThe turquoise Bike combines Argentina aesthetics with Ruthenium-based durability\n\n€96.90\nTotal per user / month\n\nGet Add-on\n\nHandmade Bamboo Cheese\nSavor the creamy essence in our Tuna, designed for memorable culinary adventures\n\n€87.29\nPer 1000 messages / month\n\nGet Add-on\n\nTasty Metal Sausages\nInnovative Shirt featuring decisive technology and Concrete construction\n\n€91.85\nTotal per user / month\n\nGet Add-on\n\nFrozen Gold Fish\nErgonomic Gloves made with Wooden for all-day wee support\n\n€36.49\nTotal per user / month\n\nGet Add-on\nFeatures\n\nRustic Concrete Shirt\nThe Webster Gloves is the latest in a series of responsible products from Hills and Sons\n\nFresh Wooden Car\nInnovative Cheese featuring unhealthy technology and Rubber construction\n\nPractical Granite Mouse\nStylish Gloves designed to make you stand out with homely looks\n\nIntelligent Granite Towels\nDiscover the queasy new Chips with an exciting mix of Ceramic ingredients\n\nFantastic Bamboo Shoes\nOur spicy-inspired Gloves brings a taste of luxury to your blue lifestyle\n\nHandmade Gold Sausages\nNew Salad model with 73 GB RAM, 854 GB storage, and well-made features",
     "category": "Templates",
     "section": "Content",
     "boost": "List blocks templates/list-blocks #templates/list-blocks Templates Content"
@@ -1364,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\nIntuitive methodical artificial intelligence\n\nCompany email\nYour contact email address for customer communication\n\nDisplay email on team page\n\nOffice location\nPrimary business address used for official correspondence\n\nPennsylvaniaPennsylvania\nUtah\n\nTurks and Caicos IslandsTurks and Caicos Islands\nDominican Republic\n\nPreferred currency\nAll pricing and payouts will be shown in this currency\n\nEUR - EuroUSD - US Dollar\nEUR - Euro\nGBP - British Pound\n\nDiscardApply changes",
+    "searchText": "Form blocks\nForm blocks\nSettingsCompany display name\nThis name will appear on your team profile page\n\nAbout the team\nWrite a short summary about your organization or group (max 240 characters).\n\nOpen-source methodical capability\n\nCompany email\nYour contact email address for customer communication\n\nDisplay email on team page\n\nOffice location\nPrimary business address used for official correspondence\n\nVermontVermont\nIowa\n\nIraqIraq\nGreece\n\nPreferred currency\nAll pricing and payouts will be shown in this currency\n\nEUR - EuroUSD - US Dollar\nEUR - Euro\nGBP - British Pound\n\nDiscardApply changes",
     "category": "Templates",
     "section": "Forms",
     "boost": "Form blocks templates/settings-form #templates/settings-form Templates Forms"
@@ -1374,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\n1405 units\n\n12%from last month\n\nOpen orders\n57\n\n5%from last month\n\nIn transit\n12\n\n-3%from last month\n\nIssues\n4\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\nOrders delivered\n25M +\n\nTotal uptime\n99.99%\n\nCustomer score\n4.8\nOrders processed\n72,678\nfrom 68,345\n\n11.5%\n\nOpen rate\n43.6\nfrom 41.6\n\n3.1%\n\nError rate\n3.6\nfrom 2.4\n\n2.01%\nSeptember, 2025\nRequests sent\n185\n\nNumber of data brokers removal requests have been sent to.\n\nRequests in progress\n185\n\nNumber of data brokers that have started processing our removal requests.\n\nRequests completed\n0\n\nNumber of data brokers that checked and confirmed that they are now not holding your data.\nLorem ipsum dolor\n\nJanuaryFebruaryMarchAprilMayJune\n\nLorem ipsum dolor\n\nStatusLocationETA\n\nIn transit\nHamburg, DE2024-02-02\n\nDelivered\nRotterdam, NL2024-01-29\n\nAwaiting pickup\nWarsaw, PL2024-02-05\n\nCustoms clearance\nAntwerp, BE2024-02-03\n\nTransport ipsum dolor\n\nOn-time delivery\n\nWarehouse efficiency\n\nTruck utilization\n\nFreight cost/km\n\nFuel consumption index\n\n92%\n\n84%\n\n78%\n\n65%\n\n15%",
+    "searchText": "Stats blocks\nStats blocks\nStats page\nOverview of your supply chain operations\n\nTotal inventory\n1307 units\n\n12%from last month\n\nOpen orders\n33\n\n5%from last month\n\nIn transit\n10\n\n-3%from last month\n\nIssues\n6\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\nOrders delivered\n25M +\n\nTotal uptime\n99.99%\n\nCustomer score\n4.8\nOrders processed\n72,678\nfrom 68,345\n\n11.5%\n\nOpen rate\n43.6\nfrom 41.6\n\n3.1%\n\nError rate\n3.6\nfrom 2.4\n\n2.01%\nSeptember, 2025\nRequests sent\n185\n\nNumber of data brokers removal requests have been sent to.\n\nRequests in progress\n185\n\nNumber of data brokers that have started processing our removal requests.\n\nRequests completed\n0\n\nNumber of data brokers that checked and confirmed that they are now not holding your data.\nLorem ipsum dolor\n\nJanuaryFebruaryMarchAprilMayJune\n\nLorem ipsum dolor\n\nStatusLocationETA\n\nIn transit\nHamburg, DE2024-02-02\n\nDelivered\nRotterdam, NL2024-01-29\n\nAwaiting pickup\nWarsaw, PL2024-02-05\n\nCustoms clearance\nAntwerp, BE2024-02-03\n\nTransport ipsum dolor\n\nOn-time delivery\n\nWarehouse efficiency\n\nTruck utilization\n\nFreight cost/km\n\nFuel consumption index\n\n92%\n\n84%\n\n78%\n\n65%\n\n15%",
     "category": "Templates",
     "section": "Content",
     "boost": "Stats blocks templates/stats-blocks #templates/stats-blocks Templates Content"
@@ -1444,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"
@@ -1524,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\": 1767787967247\n}\n\nToggleIncrement\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| component | String | — | The name of the component that will be printed out. |\n| props | Object | — | The component props that will be checked for changed values. |",
+    "searchText": "useDebugInfo\nThe useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.\nuseDebugInfo\nComponent props:isToggled: false\ncount: 0\n\nDebug Info:{\n\"renderCount\": 1,\n\"changedProps\": {},\n\"timeSinceLastRender\": 0,\n\"lastRenderTimestamp\": 1770127563175\n}\n\nToggleIncrement\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| component | String | — | The name of the component that will be printed out. |\n| props | Object | — | The component props that will be checked for changed values. |",
     "category": "Utilities",
     "section": "UI state & input hooks",
     "boost": "useDebugInfo utilities/useDebugInfo #utilities/useDebugInfo Utilities UI state & input hooks"
@@ -1814,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\n1PaxtonHeidenreichBrice.Leannon@yahoo.com\n2CatalinaKihnFrancesco.Ondricka40@yahoo.com\n3FletcherHowellSidney.Abshire4@gmail.com\n4JosefaCartwrightJackeline97@gmail.com\n5RoyLednerLillian_McCullough@hotmail.com\n6ShakiraMillerGene_Bergstrom40@gmail.com\n7LeolaRathThad.Blick@hotmail.com\n8DamonTillmanDonna.Streich@hotmail.com\n9NyahRueckerSterling_Roob@hotmail.com\n10SimoneManteTyrell.Tillman44@hotmail.com\n### Options of the returned exportToCSV function\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| data | T[] | — | Array of data objects to export. Each object represents one row in the table. |\n| fileName | string | export.csv | Optional name for the exported file. |\n| columns | (keyof T)[] | — | Optional list of object keys to export as columns. If omitted, all keys from the first row will be used. |\n| headers | Partial<Record<keyof T, string| — | Optional map of column keys to custom header labels. Example: { firstName: 'First Name' } |\n| delimiter | string | , | Optional delimiter to use between values in the CSV. You can use \";\" or \"\\t\" for other formats. |\n| withBom | boolean | true | Whether to include UTF-8 BOM (useful for Excel). |",
+    "searchText": "useTableExport\nThe useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.\nuseTableExport\nExport data\n\nIdFirst nameLast nameE-mail\n\n1RaymondBarrowsAlanis62@yahoo.com\n2JeremyO'ReillyNaomi.Hauck@yahoo.com\n3LukasHerzogNickolas28@gmail.com\n4DennisDouglasSilas.Pfeffer@hotmail.com\n5CamdenVonJasper_Leuschke@gmail.com\n6AndrewWindlerKane.Fisher14@yahoo.com\n7UrbanJakubowskiRylee_Price@hotmail.com\n8StanleyBosco-SchillerNona_Schuster50@hotmail.com\n9MaidaLoweNorris_Goldner@gmail.com\n10BreanneNitzscheIsmael_Ratke73@hotmail.com\n### Options of the returned exportToCSV function\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| data | T[] | — | Array of data objects to export. Each object represents one row in the table. |\n| fileName | string | export.csv | Optional name for the exported file. |\n| columns | (keyof T)[] | — | Optional list of object keys to export as columns. If omitted, all keys from the first row will be used. |\n| headers | Partial<Record<keyof T, string| — | Optional map of column keys to custom header labels. Example: { firstName: 'First Name' } |\n| delimiter | string | , | Optional delimiter to use between values in the CSV. You can use \";\" or \"\\t\" for other formats. |\n| withBom | boolean | true | Whether to include UTF-8 BOM (useful for Excel). |",
     "category": "Utilities",
     "section": "Table & data hooks",
     "boost": "useTableExport utilities/useTableExport #utilities/useTableExport Utilities Table & data hooks"
@@ -1824,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\n1VinniePredovicDorris.Hilpert2@hotmail.com\n2FlorencioRitchieLucius.Walker@gmail.com\n3BennieMetzCatharine35@gmail.com\n4NiaBotsfordDuncan_Kling@gmail.com\n5DennisToyMargot_Schoen@gmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |\nMulti-selection\nActive row\n-\n\nSelected rows\n4\n\nDeselect all ItemsSelect some rows\n\nIdFirst nameLast nameE-mail\n\n1RayLebsackDonavon70@yahoo.com\n\n2CynthiaKesslerCamron.Heathcote41@hotmail.com\n\n3AlekDenesikTanner3@hotmail.com\n\n4LeifKeelingAkeem85@hotmail.com\n\n5JaredKlockoRupert.Hilll48@hotmail.com\n\n6ShirleyGrahamRuthie_Gorczany9@hotmail.com\n\n7RoxanneBeahanMarion.Shields@gmail.com\n\n8TyraWalterJanae73@gmail.com\n\n9ClintonWeimannAndre_Hoeger@hotmail.com\n\n10OnieChristiansenTristin88@gmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |",
+    "searchText": "useTableSelection\nThe useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.\nuseTableSelection\nNote: , when using a checkbox column for multi-selection and a column for some action buttons, make sure to apply the classes \"table-checkbox\" and \"table-action\" to the respective row \"td\" elements. The latter class automatically stops event propagation, preventing the row from being selected when an action button is clicked.\nActive row\n-\n\nIdFirst nameLast nameE-mail\n\n1FranciscoRempelKeegan_Bauch@gmail.com\n2JerrellStarkJosh.Nikolaus55@yahoo.com\n3DeclanMannHosea_Gorczany@yahoo.com\n4SusieCroninNeha97@gmail.com\n5SaigeBogisichDavid37@gmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |\nMulti-selection\nActive row\n-\n\nSelected rows\n4\n\nDeselect all ItemsSelect some rows\n\nIdFirst nameLast nameE-mail\n\n1MelyssaBoscoGreta.Lowe18@yahoo.com\n\n2LeonErnserBeatrice60@hotmail.com\n\n3MariamRempelGerhard80@hotmail.com\n\n4MercedesYundtCasey_Swaniawski48@gmail.com\n\n5MableLangoshMafalda.Wuckert96@yahoo.com\n\n6DannieHoweJenifer40@yahoo.com\n\n7KennediSchusterDestiny_Rogahn18@hotmail.com\n\n8WillardKundeNels_Weissnat68@hotmail.com\n\n9AlvisBotsfordGeorge.Raynor16@gmail.com\n\n10GretaKleinArianna_Boyle75@hotmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |",
     "category": "Utilities",
     "section": "Table & data hooks",
     "boost": "useTableSelection utilities/useTableSelection #utilities/useTableSelection Utilities Table & data hooks"