@rio-cloud/uikit-mcp 1.1.11 → 1.1.12

package/dist/doc-metadata.json

@@ -54,7 +54,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 Item Item IAR07Q32FDL\n\nItem 8QCRTQ3YH2\n\nItem EFVUWAQJLM\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit 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 Items Item KDQ20F8ANB\n\nItem 0GHO5M48WH\n\nItem Y0653RI8HK\n\nItem YQM8A4TWMJ\n\nItem 6BTIZQ3HCS\n\nItem C6HLMLK7N1",
+    "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 Item Item NT0067EDY8K\n\nItem 7OCH1AZ4M6\n\nItem NWYK28WEXM\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit 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 Items Item VGIIB8OSZU\n\nItem LQCBFYXCYX\n\nItem QNTAKZWZVE\n\nItem JR8BGIREBK\n\nItem T8JQ51GSW4\n\nItem BHA9RW1WPO",
     "category": "Components",
     "section": "Content",
     "boost": "Animations components/animations #components/animations Components Content"
@@ -74,7 +74,7 @@
     "title": "ApplicationLayout",
     "lead": "The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar",
     "summary": "The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar",
-    "searchText": "ApplicationLayout\nThe ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar\nApplicationLayout\nThe ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.\n\nNote: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragmentinstead\n\nNote: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <bodynode.\nDefault example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nSubNavigation example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nBody banner example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nBottom bar example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nSidebar Example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSidebar Right\n\nSidebar components may be added here...\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n5\n4\n2\n\nAsset Group 3\nVehicle-6700 Asset 1001\nVehicle-7557 Asset 1009\nVehicle-7869 Asset 1000\n\nUngrouped 8\n\n200\n\nSidebar Right\n\nSidebar components may be added here...\n\nClose\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\nSample Service Content\nOpen Sidebar\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nBottom Button\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |",
+    "searchText": "ApplicationLayout\nThe ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar\nApplicationLayout\nThe ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.\n\nNote: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragmentinstead\n\nNote: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <bodynode.\nDefault example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nSubNavigation example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nBody banner example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nBottom bar example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nSidebar Example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSidebar Right\n\nSidebar components may be added here...\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n5\n2\n1\n\nAsset Group 4\nVehicle-5592 Asset 1000\nVehicle-6497 Asset 1003\nVehicle-9257 Asset 1006\nVehicle-9265 Asset 1002\n\nUngrouped 4\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"
@@ -114,7 +114,7 @@
     "title": "AssetTree",
     "lead": null,
     "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\nAssetTree\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.\nFilter\n\n5241\n4\n\nGroup - Abbie D'Amore - 4617 14\n\nGroup - Abdullah Gorczany - 4604 12\n\nGroup - Ada Bergnaum - 6885 15\n\nGroup - Adam Spencer - 1326 6\n\nGroup - Adrain Rice - 3568 7\n\nGroup - Agustin Sawayn - 9288 13\n\nGroup - Agustina Mitchell - 7938 12\n\nGroup - Alba Dickens - 4029 15\n\nGroup - Albert Larkin Jr. - 4366 12\n\nGroup - Albert Turcotte - 3213 17\n\nGroup - Albertha Maggio Jr. - 5254 14\n\nGroup - Alejandro Dach Jr. - 7483 17\n\nGroup - Alek Goldner - 1787 12\n\nGroup - Alek Hettinger V - 4864 13\n\nGroup - Alessandra Effertz - 8203 14\n\n200\n\n200\n\nLoad trucks Clear tree Toggle 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\n9\n10\n5\n6\n\nMy Empty Group 3\n\nTruck Group East 5\n\nTruck Group North 4\nN18-G259 / M-AN 1006\nN18-G545 / M-AN 1029\nN18-G632 / M-AN 1011\nN18-G845 / M-AN 1003\n\nTruck Group South 7\n\nTruck Group West 6\n\nAll my unassigned Trucks 5\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\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.\n3\n8\n6\n3\n\n9\n2\n7\n1\n1\n\nMixed Vehicles 14\n\nVehicle-1032 Debug: lpg\n\nVehicle-1530 Debug: diesel\n\nVehicle-1885 Debug: electric\n\nVehicle-2261 Debug: electric\n\nVehicle-3321 Debug: electric\n\nVehicle-6234 Debug: gas\n\nVehicle-6675 Debug: gas\n\nVehicle-6884 Debug: dual_fuel_diesel_cng\n\nVehicle-7323 Debug: hydrogen\n\nVehicle-8654 Debug: diesel\n\nVehicle-8759 Debug: electric\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\nJohn Doe\nMaxl Rainer\nJohan Schmidt\n\nSome small dummy text at the bottom to showcase that you can put something here\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree with custom icons\nGroup 01 11\n\nGroup 02 3\n\nGroup 03 6\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 01 3\n\nFolder 02 7\n\nFolder 03 7\n\nFolder 04 3\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 01 6\n\nFolder 02 7\n\nFolder 03 3\n\nFolder 04 4\n\nSelected items:\n\nExpanded folders:\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\nTreeSummary with assetCounts\n12\n7\n2\n2\n10\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\nTreeSummary with TypeCounter\n9\n15\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |",
+    "searchText": "AssetTree\nAssetTree\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.\nFilter\n\n5769\n4\n\nGroup - Aaron Reichel-Spinka - 2765 19\n\nGroup - Abbie Bergnaum - 1001 5\n\nGroup - Abdiel Schuppe III - 8694 11\n\nGroup - Adela Waelchi - 1464 17\n\nGroup - Adelle Howell - 2115 13\n\nGroup - Adolph King - 5247 4\n\nGroup - Agustin Hessel - 4826 17\n\nGroup - Aida Swift - 1894 15\n\nGroup - Aiyana Hodkiewicz-Schaefer - 9882 17\n\nGroup - Al Mertz - 1581 15\n\nGroup - Alaina Douglas - 6722 7\n\nGroup - Alma Russel - 2281 21\n\nGroup - Amaya Gerlach - 1747 8\n\nGroup - Amaya Nienow - 7799 14\n\n200\n\n200\n\nLoad trucks Clear tree Toggle 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\n13\n7\n5\n5\n\nMy Empty Group 5\n\nTruck Group East 4\n\nTruck Group North 6\nN18-G134 / M-AN 1020\nN18-G215 / M-AN 1011\nN18-G538 / M-AN 1007\nN18-G666 / M-AN 1019\nN18-G760 / M-AN 1014\nN18-G959 / M-AN 1001\n\nTruck Group South 6\n\nTruck Group West 5\n\nAll my unassigned Trucks 4\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\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\n2\n4\n7\n\n9\n4\n2\n3\n2\n\nMixed Vehicles 11\nVehicle-1022 Debug: lpg\nVehicle-1671 Debug: dual_fuel_diesel_cng\nVehicle-2974 Debug: cng\nVehicle-3862 Debug: heavy_fuel_oil\nVehicle-4135 Debug: heavy_fuel_oil\nVehicle-5935 Debug: cng\nVehicle-6836 Debug: heavy_fuel_oil\nVehicle-6932 Debug: diesel\nVehicle-7229 Debug: heavy_fuel_oil\nVehicle-7606 Debug: dual_fuel_diesel_cng\nVehicle-8721 Debug: hydrogen\n\nUngrouped 9\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\nJohn Doe\nMaxl Rainer\nJohan Schmidt\n\nSome small dummy text at the bottom to showcase that you can put something here\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree with custom icons\nGroup 01 7\n\nGroup 02 8\n\nGroup 03 5\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 01 5\n\nFolder 02 8\n\nFolder 03 2\n\nFolder 04 5\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 01 4\n\nFolder 02 6\n\nFolder 03 5\n\nFolder 04 5\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"
@@ -214,7 +214,7 @@
     "title": "CalendarStripe",
     "lead": "A headless component where you provide a function that renders the UI for every day to be displayed.",
     "summary": "A headless component where you provide a function that renders the UI for every day to be displayed.",
-    "searchText": "CalendarStripe\nA headless component where you provide a function that renders the UI for every day to be displayed.\nCalendarStripe\nTuesday\n28 April 2026\n\nWednesday\n29 April 2026\n\nThursday\n30 April 2026\n\nFriday\n1 May 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. |\nApr\n28\n2026\n\nApr\n29\n2026\n\nApr\n30\n2026\n\nMay\n1\n2026\n\nMay\n2\n2026\n\nMay\n3\n2026\n\nMay\n4\n2026\n\nSet to January Toggle Weekends\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | number | 200 | The minimum width in pixel of a single day column This value determines how many days are shown per page depending on the parent width. |\n| minDays | number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | number | 7 | The maximum amount of days that should be shown per page. |\n| renderDay | (date: Date) =React.JSX.Element | — | A function that renders each individual day to be displayed. |\n| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |\n| startDate | Date | the current date | The date of the first day that are rendered. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| buttonClassName | string | — | Additional classes set to the navigation buttons. |\n| className | string | — | Additional classes set to the calendar element. |\n| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |",
+    "searchText": "CalendarStripe\nA headless component where you provide a function that renders the UI for every day to be displayed.\nCalendarStripe\nThursday\n7 May 2026\n\nFriday\n8 May 2026\n\nSaturday\n9 May 2026\n\nSunday\n10 May 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. |\nMay\n7\n2026\n\nMay\n8\n2026\n\nMay\n9\n2026\n\nMay\n10\n2026\n\nMay\n11\n2026\n\nMay\n12\n2026\n\nSet to January Toggle 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"
@@ -344,7 +344,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\nDeprecated warningThe DatePicker is no longer being further developed and is based on Moment.js, which is itself a no-longer-maintained library. Please use the new DayPicker instead. It offers a much more flexible API for dropdown composition, validation, presets, sidebars, footers, and date/time workflows.DayPicker\n\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';\nDefault Format: YYYY-MM-DD HH:mm\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00\n\nNo time Format: YYYY-MM-DD\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\nOnly month\n\n‹ 2026 ›\n\nJan Feb Mar Apr\nMay Jun Jul Aug\nSep Oct Nov Dec\n\nOnly time\n\n▲ 12\n▼\n:\n▲ 00\n▼\n▲ AM\n▼\n\nNot closing when selecting\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nWith min-width\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nClearableInput and optional value\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n04:57\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nTo:\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nUnspecified locale Format: MM/DD/YYYY\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\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‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nReset\nSelects are a simple alternative for choosing dates 01 01\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\nJanuary January\nFebruary\nMarch\nApril\nMay\nJune\nJuly\nAugust\nSeptember\nOctober\nNovember\nDecember\n\n2022 2022\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\nDeprecated warningThe DatePicker is no longer being further developed and is based on Moment.js, which is itself a no-longer-maintained library. Please use the new DayPicker instead. It offers a much more flexible API for dropdown composition, validation, presets, sidebars, footers, and date/time workflows.DayPicker\n\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';\nDefault Format: YYYY-MM-DD HH:mm\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n12:00\n\nNo time Format: YYYY-MM-DD\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\nOnly month\n\n‹ 2026 ›\n\nJan Feb Mar Apr\nMay Jun Jul Aug\nSep Oct Nov Dec\n\nOnly time\n\n▲ 12\n▼\n:\n▲ 00\n▼\n▲ AM\n▼\n\nNot closing when selecting\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n12:00 AM\n\nWith min-width\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n12:00 AM\n\nClearableInput and optional value\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n02:13\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n12:00 AM\n\nTo:\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n12:00 AM\n\nUnspecified locale Format: MM/DD/YYYY\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\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‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n12:00 AM\n\nReset\nSelects are a simple alternative for choosing dates 01 01\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\nJanuary January\nFebruary\nMarch\nApril\nMay\nJune\nJuly\nAugust\nSeptember\nOctober\nNovember\nDecember\n\n2022 2022\n2023\n2024\n2025\n2026\n2027\n\nSat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)",
     "category": "Components",
     "section": "Pickers",
     "boost": "DatePicker components/datepickers #components/datepickers Components Pickers"
@@ -354,7 +354,7 @@
     "title": "DayPicker",
     "lead": "DayPicker is the composable input and dropdown wrapper that should replace the legacy DatePicker. It keeps the UIKIT API small while still allowing presets, footer actions, and additional controls to be injected from the outside.",
     "summary": "DayPicker is the composable input and dropdown wrapper that should replace the legacy DatePicker. It keeps the UIKIT API small while still allowing presets, footer actions, and additional controls to be injected from the outside.",
-    "searchText": "DayPicker\nDayPicker is the composable input and dropdown wrapper that should replace the legacy DatePicker. It keeps the UIKIT API small while still allowing presets, footer actions, and additional controls to be injected from the outside.\nDayPicker\nUse this component for form fields, filters, and composed dropdown workflows. The standalone calendar API is documented separately on the DayPickerCalendar page.\nSingle day picker\nThe default entry point wraps an input and dropdown around the calendar for the common single-date case.\nSingle day picker\n\nYou picked: No date selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nSingle day with dateFormat\nUse dateFormat when you want a migration-friendly custom input format similar to the legacyDatePicker.\nSingle day with custom format\n\nYou picked: 2026-03-26\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nLocalization\nSwitch the locale to see how the default input formatting changes between localized date conventions.\nLocalized input formatting en-GB bg-BG\ncs-CZ\nda-DK\nde-DE\nel-GR\nen-GB\nes-ES\net-EE\nfi-FI\nfr-FR\nhr-HR\nhu-HU\nit-IT\nlt-LT\nlv-LV\nnb-NO\nnl-NL\npl-PL\npt-BR\npt-PT\nro-RO\nsk-SK\nsl-SI\nsv-SE\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nCustom triggers\nThe dropdown does not depend on an editable input. You can swap in custom triggers like icon buttons or compact labels for places with limited space.\nIcon button trigger\n\nYou picked: No date selected\n\nMuted label trigger 30/03/2026\n\nYou picked: 30/03/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRange picker\nRange mode keeps the same input shell but changes the calendar selection behavior and the rendered value. It can also show two visible months for faster range selection.\nRange picker\n\nYou picked: No range selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nWeek selection\nSet selectionVariant='week' to select the whole week of the clicked day while keeping the same range value shape.\nWeek selection\n\nYou picked: No week selected\nWeeks start on Monday. You can click a day or the calendar week number.\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nMonth selection\nSet selectionVariant='month' to select the whole month of the clicked day as one range.\nMonth selection\n\nYou picked: No month selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRolling range\nSet selectionVariant='rolling' with rollingDays to create a fixed-length range starting from the clicked day.\nRolling 7-day window\n\nYou picked: No rolling range selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nFooter actions\nFooter actions can also select values directly, for example a Today button for single-date workflows.\nSingle date with Today action\n\nYou picked: No date selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRange picker with presets and footer actions\nSidebar presets and footer controls are passed in from the outside. The picker keeps draft state internally, but the surrounding UI remains fully composable.\nRange with presets and footer actions\n\nYou picked: No range selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nPresets with external select\nThe same preset ranges can be offered both inside the dropdown and through a separate Select outside the picker.\nRange picker with synced presets Last 14 days Today\nThis week\nLast 7 days\nLast 14 days\nLast 90 days\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nDate and time footer\nThe footer slot can host a TimePicker while renderValue shows the combined date and time in the trigger. The examples use the existing 24-hour TimePicker; AM/PM is currently not part of the default UIKIT time input.\nDate and time\n\nYou picked: 30.03.2026 14:30\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRange with start and end times\nFor range selection, the footer can render two independent TimePicker controls for start and end times while the trigger displays the final combined value. The examples use the existing 24-hour TimePicker; AM/PM is currently not part of the default UIKIT time input.\nRange with start and end times\n\nYou picked: 03.04.2026 09:00 - 06.04.2026 17:30\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nAvailable times in a sidebar\nInstead of a free-form time input, the dropdown can also render a curated list of available time slots in a sidebar.\nDate with available times\n\nYou picked: 27.03.2026 09:00\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nMultiple dates\nThe same dropdown shell also supports multiple independent dates and renders the current selection as a compact list in the input.\nMultiple dates\n\nYou picked: 27/03/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nCalendar weeks\nIf you need ISO calendar weeks in the dropdown, enable showWeekNumber. The input still keeps the regular date display.\nCalendar weeks in dropdown\n\nYou picked: 30/03/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRestricted month range\nUse startMonth and endMonth to limit the dropdown to a fixed month interval. This example only allows choosing from two visible months.\nLimited to two months\n\nYou picked: 14/04/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nDisabled days\nUse disabledDays to block individual dates from being selected while keeping the normal input behavior.\nDisabled days\n\nYou picked: 12/04/2026\nDisabled: 10/04/2026, 14/04/2026, 22/04/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nHidden days\nUse hiddenDays to remove matching dates from the dropdown calendar grid entirely.\nHidden days in a month\n\nYou picked: No date selected\nHidden: 10/05/2026, 11/05/2026, 20/05/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nFilter icon for date ranges\nUse iconName on the default trigger to turn a range picker into a filter control. This example switches from rioglyph-filter to rioglyph-filter-active once a complete range is selected.\nDate range filter\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nISO date format\nA common integration pattern is to keep the value as a date-only ISO string like 2026-05-10 and only map it to Date for the picker UI.\nISO date format\n\nISO value: 2026-05-10\nParsed UI value: 10/05/2026\nThe demo keeps the value as a date-only ISO string and only maps it to Date for the picker.\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nTimezones and UTC payloads\nAdditional form elements like timezone selectors can be rendered into the dropdown from the outside. This example combines a date, time, and timezone and shows the resulting full UTC datetime string.\nDate, time and timezone\n\nLocal wall time: 2026-05-10 09:30 Europe/Berlin\nUTC ISO payload: 2026-05-10T07:30:00.000Z\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nValidation and error states\nDayPicker includes the common feedback markup directly via errorMessage and warningMessage. For custom validation flows, especially manual input parsing, use onInputChange to drive the messages from outside.\nStatic error styling with built-in feedback props This is an error message\n\nControlled error feedback with built-in message This is an error message\n\nLive format validation with yyyy-MM-dd\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nReact Hook Form\nThe component works well with Controller by passing through name and onBlur while using the built-in feedback props for form errors.\nDelivery date\n\nSubmit\n\nSubmitted value: Nothing submitted yet\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nCustom renderValue and parseInput\nFor specialized cases, you can override both how the value is shown in the input and how manual input gets parsed, without exposing the full third-party picker API.\nCustom parsing and rendering\n\nInput accepts: yyyyMMdd\nRendered value: Fri, 27 Mar 2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |",
+    "searchText": "DayPicker\nDayPicker is the composable input and dropdown wrapper that should replace the legacy DatePicker. It keeps the UIKIT API small while still allowing presets, footer actions, and additional controls to be injected from the outside.\nDayPicker\nUse this component for form fields, filters, and composed dropdown workflows. The standalone calendar API is documented separately on the DayPickerCalendar page.\nSingle day picker\nThe default entry point wraps an input and dropdown around the calendar for the common single-date case.\nSingle day picker\n\nYou picked: No date selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nSingle day with dateFormat\nUse dateFormat when you want a migration-friendly custom input format similar to the legacyDatePicker.\nSingle day with custom format\n\nYou picked: 2026-03-26\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nLocalization\nSwitch the locale to see how the default input formatting changes between localized date conventions.\nLocalized input formatting en-GB bg-BG\ncs-CZ\nda-DK\nde-DE\nel-GR\nen-GB\nes-ES\net-EE\nfi-FI\nfr-FR\nhr-HR\nhu-HU\nit-IT\nlt-LT\nlv-LV\nnb-NO\nnl-NL\npl-PL\npt-BR\npt-PT\nro-RO\nsk-SK\nsl-SI\nsv-SE\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nCustom triggers\nThe dropdown does not depend on an editable input. You can swap in custom triggers like icon buttons or compact labels for places with limited space.\nIcon button trigger\n\nYou picked: No date selected\n\nMuted label trigger 30/03/2026\n\nYou picked: 30/03/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRange picker\nRange mode keeps the same input shell but changes the calendar selection behavior and the rendered value. It can also show two visible months for faster range selection.\nRange picker\n\nYou picked: No range selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nWeek selection\nSet selectionVariant='week' to select the whole week of the clicked day while keeping the same range value shape.\nWeek selection\n\nYou picked: No week selected\nWeeks start on Monday. You can click a day or the calendar week number.\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nMonth selection\nSet selectionVariant='month' to select the whole month of the clicked day as one range.\nMonth selection\n\nYou picked: No month selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRolling range\nSet selectionVariant='rolling' with rollingDays to create a fixed-length range starting from the clicked day.\nRolling 7-day window\n\nYou picked: No rolling range selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nFooter actions\nFooter actions can also select values directly, for example a Today button for single-date workflows.\nSingle date with Today action\n\nYou picked: No date selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRange picker with presets and footer actions\nSidebar presets and footer controls are passed in from the outside. The picker keeps draft state internally, but the surrounding UI remains fully composable.\nRange with presets and footer actions\n\nYou picked: No range selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nPresets with external select\nThe same preset ranges can be offered both inside the dropdown and through a separate Select outside the picker.\nRange picker with synced presets Last 14 days Today\nThis week\nLast 7 days\nLast 14 days\nLast 90 days\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nDate and time footer\nThe footer slot can host a TimePicker while renderValue shows the combined date and time in the trigger. The examples use the existing 24-hour TimePicker; AM/PM is currently not part of the default UIKIT time input.\nDate and time\n\nYou picked: 30.03.2026 14:30\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRange with start and end times\nFor range selection, the footer can render two independent TimePicker controls for start and end times while the trigger displays the final combined value. The examples use the existing 24-hour TimePicker; AM/PM is currently not part of the default UIKIT time input.\nRange with start and end times\n\nYou picked: 03.05.2026 09:00 - 06.05.2026 17:30\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nAvailable times in a sidebar\nInstead of a free-form time input, the dropdown can also render a curated list of available time slots in a sidebar.\nDate with available times\n\nYou picked: 27.03.2026 09:00\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nMultiple dates\nThe same dropdown shell also supports multiple independent dates and renders the current selection as a compact list in the input.\nMultiple dates\n\nYou picked: 27/03/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nCalendar weeks\nIf you need ISO calendar weeks in the dropdown, enable showWeekNumber. The input still keeps the regular date display.\nCalendar weeks in dropdown\n\nYou picked: 30/03/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRestricted month range\nUse startMonth and endMonth to limit the dropdown to a fixed month interval. This example only allows choosing from two visible months.\nLimited to two months\n\nYou picked: 14/04/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nDisabled days\nUse disabledDays to block individual dates from being selected while keeping the normal input behavior.\nDisabled days\n\nYou picked: 12/04/2026\nDisabled: 10/04/2026, 14/04/2026, 22/04/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nHidden days\nUse hiddenDays to remove matching dates from the dropdown calendar grid entirely.\nHidden days in a month\n\nYou picked: No date selected\nHidden: 10/05/2026, 11/05/2026, 20/05/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nFilter icon for date ranges\nUse iconName on the default trigger to turn a range picker into a filter control. This example switches from rioglyph-filter to rioglyph-filter-active once a complete range is selected.\nDate range filter\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nISO date format\nA common integration pattern is to keep the value as a date-only ISO string like 2026-05-10 and only map it to Date for the picker UI.\nISO date format\n\nISO value: 2026-05-10\nParsed UI value: 10/05/2026\nThe demo keeps the value as a date-only ISO string and only maps it to Date for the picker.\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nTimezones and UTC payloads\nAdditional form elements like timezone selectors can be rendered into the dropdown from the outside. This example combines a date, time, and timezone and shows the resulting full UTC datetime string.\nDate, time and timezone\n\nLocal wall time: 2026-05-10 09:30 Europe/Berlin\nUTC ISO payload: 2026-05-10T07:30:00.000Z\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nValidation and error states\nDayPicker includes the common feedback markup directly via errorMessage and warningMessage. For custom validation flows, especially manual input parsing, use onInputChange to drive the messages from outside.\nStatic error styling with built-in feedback props This is an error message\n\nControlled error feedback with built-in message This is an error message\n\nLive format validation with yyyy-MM-dd\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nReact Hook Form\nThe component works well with Controller by passing through name and onBlur while using the built-in feedback props for form errors.\nDelivery date\n\nSubmit\n\nSubmitted value: Nothing submitted yet\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nCustom renderValue and parseInput\nFor specialized cases, you can override both how the value is shown in the input and how manual input gets parsed, without exposing the full third-party picker API.\nCustom parsing and rendering\n\nInput accepts: yyyyMMdd\nRendered value: Fri, 27 Mar 2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |",
     "category": "Components",
     "section": "Pickers",
     "boost": "DayPicker components/dayPicker #components/dayPicker Components Pickers"
@@ -364,7 +364,7 @@
     "title": "DayPickerCalendar",
     "lead": "DayPickerCalendar is the lower-level calendar wrapper without input or dropdown. Use it when you only need calendar selection or when you want to build your own shell around it.",
     "summary": "DayPickerCalendar is the lower-level calendar wrapper without input or dropdown. Use it when you only need calendar selection or when you want to build your own shell around it.",
-    "searchText": "DayPickerCalendar\nDayPickerCalendar is the lower-level calendar wrapper without input or dropdown. Use it when you only need calendar selection or when you want to build your own shell around it.\nDayPickerCalendar\nIt keeps the public API small while still supporting custom selection variants, hidden and disabled days, custom modifiers, and injected day content.\nSingle selection\nThe calendar wrapper exposes the supported selection modes without coupling consumers to the rawreact-day-picker component API.\nSingle date\nJanuary February March April May June July August September October November December April 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 April 2026 Mo Tu We Th Fr Sa Su\n\n30 31 1 2 3 4 5\n6 7 8 9 10 11 12\n13 14 15 16 17 18 19\n20 21 22 23 24 25 26\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n\nYou picked: No date selected\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nCalendar sizes\nUse size to adjust the density of the day grid. The size variant changes the spacing and dimensions of the day cells themselves.\nSmall\nJanuary February March April May June July August September October November December April 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 April 2026 Mo Tu We Th Fr Sa Su\n\n30 31 1 2 3 4 5\n6 7 8 9 10 11 12\n13 14 15 16 17 18 19\n20 21 22 23 24 25 26\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n\nMedium (default)\nJanuary February March April May June July August September October November December April 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 April 2026 Mo Tu We Th Fr Sa Su\n\n30 31 1 2 3 4 5\n6 7 8 9 10 11 12\n13 14 15 16 17 18 19\n20 21 22 23 24 25 26\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n\nLarge\nJanuary February March April May June July August September October November December April 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 April 2026 Mo Tu We Th Fr Sa Su\n\n30 31 1 2 3 4 5\n6 7 8 9 10 11 12\n13 14 15 16 17 18 19\n20 21 22 23 24 25 26\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nRange selection\nRange mode keeps a two-step selection flow, can show two months at once, and can optionally be constrained to a specific month interval.\nDate ranges\nJanuary February March April May June July August September October November December March 2015 2015 March 2015\n\nMo Tu We Th Fr Sa Su\n\n23 24 25 26 27 28 1\n2 3 4 5 6 7 8\n9 10 11 12 13 14 15\n16 17 18 19 20 21 22\n23 24 25 26 27 28 29\n30 31 1 2 3 4 5\n\nJanuary February March April May June July August September October November December April 2015 2015 April 2015 Mo Tu We Th Fr Sa Su\n\n30 31 1 2 3 4 5\n6 7 8 9 10 11 12\n13 14 15 16 17 18 19\n20 21 22 23 24 25 26\n27 28 29 30\n\nYou picked: No range selected\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nCalendar in a dialog\nThe calendar wrapper also works well inside larger dialog layouts, where the selection is combined with additional form controls and only committed on apply.\nOpen event calendar dialog Scheduled delivery slot: 15.04.2026 09:00 - 21.04.2026 09:00\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nMultiple selection\nMultiple mode is useful for scenarios like booking, planning, or marking several independent dates.\nMultiple dates\nJanuary February March April May June July August September October November December April 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 April 2026 Mo Tu We Th Fr Sa Su\n\n30 31 1 2 3 4 5\n6 7 8 9 10 11 12\n13 14 15 16 17 18 19\n20 21 22 23 24 25 26\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n\nYou picked: 27/04/2026\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nModifiers and custom marked days\nModifiers let you attach domain-specific meaning like booked or available dates and style them separately.\nSingle date with modifiers\nJanuary February March April May June July August September October November December June 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2024 June 2024 Mo Tu We Th Fr Sa Su\n\n27 28 29 30 31 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n1 2 3 4 5 6 7\n\nYou picked: No date selected\nTry to pick a booked day.\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nReserved days\nReserved days can be modeled with disabledDays plus custom modifiers and CSS classes from the outside.\nReserved days\nJanuary February March April May June July August September October November December March 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 March 2026 Mo Tu We Th Fr Sa Su\n\n23 24 25 26 27 28 1\n2 3 4 5 6 7 8\n9 10 11 12 13 14 15\n16 17 18 19 20 21 22\n23 24 25 26 27 28 29\n30 31 1 2 3 4 5\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nHidden days\nHidden days are not rendered at all, which is useful for compact calendars that should only expose certain weekdays.\nHidden days in a month\nJanuary February March April May June July August September October November December May 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 May 2026 Mo Tu We Th Fr Sa Su\n\n1 2 3\n4 5 6 7 8 9\n12 13 14 15 16 17\n18 19 21 22 23 24\n25 26 27 28 29 30 31\n\nYou picked: No date selected\nHidden: 10/05/2026, 11/05/2026, 20/05/2026\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nMarker dots\nMarker dots can be rendered with custom day content to visualize additional events or statuses per day.\nMarker dots\nJanuary February March April May June July August September October November December March 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 March 2026 Mo Tu We Th Fr Sa Su\n\n23 24 25 26 27 28 1\n2 3 4 5 6 7 8\n9 10 11 12 13 14 15\n16 17 18 19 20 21 22\n23 24 25 26 27 28 29\n30 31 1 2 3 4 5\n\nLogistics events\nSelect a day to inspect planned logistics events.\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nCustom day icons\nUse renderDayContent to render optional React nodes inside specific day cells, for example custom icons or tooltip anchors.\nCustom day content\nJanuary February March April May June July August September October November December March 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 March 2026 Mo Tu We Th Fr Sa Su\n\n23 24 25 26 27 28 1\n2 3 4 5 6 7 8\n9 10 11 12 13 14 15\n16 17 18 19 20 21 22\n23 24 25 26 27 28 29\n30 31 1 2 3 4 5\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |",
+    "searchText": "DayPickerCalendar\nDayPickerCalendar is the lower-level calendar wrapper without input or dropdown. Use it when you only need calendar selection or when you want to build your own shell around it.\nDayPickerCalendar\nIt keeps the public API small while still supporting custom selection variants, hidden and disabled days, custom modifiers, and injected day content.\nSingle selection\nThe calendar wrapper exposes the supported selection modes without coupling consumers to the rawreact-day-picker component API.\nSingle date\nJanuary February March April May June July August September October November December May 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 May 2026 Mo Tu We Th Fr Sa Su\n\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n11 12 13 14 15 16 17\n18 19 20 21 22 23 24\n25 26 27 28 29 30 31\n1 2 3 4 5 6 7\n\nYou picked: No date selected\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nCalendar sizes\nUse size to adjust the density of the day grid. The size variant changes the spacing and dimensions of the day cells themselves.\nSmall\nJanuary February March April May June July August September October November December May 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 May 2026 Mo Tu We Th Fr Sa Su\n\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n11 12 13 14 15 16 17\n18 19 20 21 22 23 24\n25 26 27 28 29 30 31\n1 2 3 4 5 6 7\n\nMedium (default)\nJanuary February March April May June July August September October November December May 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 May 2026 Mo Tu We Th Fr Sa Su\n\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n11 12 13 14 15 16 17\n18 19 20 21 22 23 24\n25 26 27 28 29 30 31\n1 2 3 4 5 6 7\n\nLarge\nJanuary February March April May June July August September October November December May 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 May 2026 Mo Tu We Th Fr Sa Su\n\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n11 12 13 14 15 16 17\n18 19 20 21 22 23 24\n25 26 27 28 29 30 31\n1 2 3 4 5 6 7\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nRange selection\nRange mode keeps a two-step selection flow, can show two months at once, and can optionally be constrained to a specific month interval.\nDate ranges\nJanuary February March April May June July August September October November December March 2015 2015 March 2015\n\nMo Tu We Th Fr Sa Su\n\n23 24 25 26 27 28 1\n2 3 4 5 6 7 8\n9 10 11 12 13 14 15\n16 17 18 19 20 21 22\n23 24 25 26 27 28 29\n30 31 1 2 3 4 5\n\nJanuary February March April May June July August September October November December April 2015 2015 April 2015 Mo Tu We Th Fr Sa Su\n\n30 31 1 2 3 4 5\n6 7 8 9 10 11 12\n13 14 15 16 17 18 19\n20 21 22 23 24 25 26\n27 28 29 30\n\nYou picked: No range selected\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nCalendar in a dialog\nThe calendar wrapper also works well inside larger dialog layouts, where the selection is combined with additional form controls and only committed on apply.\nOpen event calendar dialog Scheduled delivery slot: 15.05.2026 09:00 - 21.05.2026 09:00\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nMultiple selection\nMultiple mode is useful for scenarios like booking, planning, or marking several independent dates.\nMultiple dates\nJanuary February March April May June July August September October November December May 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 May 2026 Mo Tu We Th Fr Sa Su\n\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n11 12 13 14 15 16 17\n18 19 20 21 22 23 24\n25 26 27 28 29 30 31\n1 2 3 4 5 6 7\n\nYou picked: 06/05/2026\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nModifiers and custom marked days\nModifiers let you attach domain-specific meaning like booked or available dates and style them separately.\nSingle date with modifiers\nJanuary February March April May June July August September October November December June 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2024 June 2024 Mo Tu We Th Fr Sa Su\n\n27 28 29 30 31 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n1 2 3 4 5 6 7\n\nYou picked: No date selected\nTry to pick a booked day.\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nReserved days\nReserved days can be modeled with disabledDays plus custom modifiers and CSS classes from the outside.\nReserved days\nJanuary February March April May June July August September October November December March 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 March 2026 Mo Tu We Th Fr Sa Su\n\n23 24 25 26 27 28 1\n2 3 4 5 6 7 8\n9 10 11 12 13 14 15\n16 17 18 19 20 21 22\n23 24 25 26 27 28 29\n30 31 1 2 3 4 5\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nHidden days\nHidden days are not rendered at all, which is useful for compact calendars that should only expose certain weekdays.\nHidden days in a month\nJanuary February March April May June July August September October November December May 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 May 2026 Mo Tu We Th Fr Sa Su\n\n1 2 3\n4 5 6 7 8 9\n12 13 14 15 16 17\n18 19 21 22 23 24\n25 26 27 28 29 30 31\n\nYou picked: No date selected\nHidden: 10/05/2026, 11/05/2026, 20/05/2026\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nMarker dots\nMarker dots can be rendered with custom day content to visualize additional events or statuses per day.\nMarker dots\nJanuary February March April May June July August September October November December March 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 March 2026 Mo Tu We Th Fr Sa Su\n\n23 24 25 26 27 28 1\n2 3 4 5 6 7 8\n9 10 11 12 13 14 15\n16 17 18 19 20 21 22\n23 24 25 26 27 28 29\n30 31 1 2 3 4 5\n\nLogistics events\nSelect a day to inspect planned logistics events.\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nCustom day icons\nUse renderDayContent to render optional React nodes inside specific day cells, for example custom icons or tooltip anchors.\nCustom day content\nJanuary February March April May June July August September October November December March 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 March 2026 Mo Tu We Th Fr Sa Su\n\n23 24 25 26 27 28 1\n2 3 4 5 6 7 8\n9 10 11 12 13 14 15\n16 17 18 19 20 21 22\n23 24 25 26 27 28 29\n30 31 1 2 3 4 5\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |",
     "category": "Components",
     "section": "Pickers",
     "boost": "DayPickerCalendar components/dayPickerCalendar #components/dayPickerCalendar Components Pickers"
@@ -394,7 +394,7 @@
     "title": "Dropdowns",
     "lead": "Dropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.",
     "summary": "Dropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.",
-    "searchText": "Dropdowns\nDropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.\nDropdowns\nButtonDropdown\nNormal Button\nnoCaret\nDropup\nSplitButton\n\nSplitButton\n\nLarge button\nDefault button\nSmall button\nMini button\n\nDropdown with max-height\nDropdown with dopup\nDropdown with pullRight\nControlled Dropdown\n\nDropdown variants Text dropdown\n\nCustom dropdowns for filter tags Tag dropdown\n\nTag small dropdown\n\nCustom dropdowns for labels Active\n\nActive\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| aria-label | string | — | Accessible label applied to the dropdown toggle button. |\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| iconName | string | — | Optional rioglyph icon name forwarded to the underlying button toggle. |\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| aria-label | string | — | Accessible label applied to the dropdown toggle button. |\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| iconName | string | — | Optional rioglyph icon name forwarded to the underlying button toggle. |\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| aria-label | string | — | Accessible label applied to the dropdown toggle button. |\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| iconName | string | — | Optional rioglyph icon name forwarded to the underlying button toggle. |\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\nID Content Action\n\n1 Consectetur tortor pharetra massa, et amet, pharetra massa, sit vel\n\n2 Eget in, vitae dui In purus in In\nLorem\nLorem dolor Interdum Integer purus\n\n3 Tortor orci et adipiscing pretium\n\n4 Est et est finibus ac enim semper. massa\n\n5 Viverra fames\nLorem efficitur efficitur amet, pretium eget pharetra metus in amet,\n\n6 Ipsum neque. eget ac in libero in faucibus. orci, sagittis velit. ac ipsum vitae\n\n7 Elementum vitae semper. eget ut aliquam ante in aliquam posuere ac vel aliquam\n\n8 Molestie sagittis metus pretium malesuada ac\n\n9 Semper. semper massa, consectetur massa, libero amet, efficitur consectetur Vivamus elit.\n\n10 Finibus amet, molestie eget efficitur et purus In fringilla Fusce\n\n11 Vivamus amet, viverra elementum dui ante condimentum sit ac fringilla elementum ante In ipsum\n\n12 In consectetur Mauris quis, pretium ligula est Fusce efficitur ac fames Vivamus metus pharetra ante\n\n13 Ut massa, massa tincidunt. efficitur consectetur malesuada\n\n14 Massa, est viverra ante neque. semper. ac Mauris sem.\n\n15 Viverra purus velit. ac Interdum efficitur\n\n16 Malesuada lorem primis rutrum dui dui ut adipiscing\n\n17 Malesuada sagittis purus semper rutrum\n\n18 Pharetra nec purus Mauris ac\n\n19 Viverra pretium metus ac viverra bibendum, molestie ante in condimentum quis, metus metus\n\n20 Efficitur hendrerit libero quis, et aliquam bibendum, rutrum primis scelerisque malesuada elit. condimentum et consectetur\n\n21 Duis lorem pharetra Integer enim massa, Ut massa eget semper Sed\nLorem\n\n22 Viverra et Fusce velit. ac\n\n23 Orci, purus est fames elit. efficitur ipsum\n\n24 Condimentum adipiscing et In tincidunt. dolor molestie iaculis. vitae ac metus ipsum Sed libero nunc\n\n25 Et tincidunt. ac Vivamus neque. neque. condimentum consectetur ligula\n\n26 Vel consectetur ante orci, efficitur massa, vel neque. efficitur adipiscing in dolor efficitur fames aliquam\n\n27 Fames purus eget faucibus. ac ligula ante Integer Interdum semper Interdum\n\n28 Fusce viverra ipsum Mauris massa In pretium primis vel Integer lorem et efficitur\n\n29 Purus bibendum, primis efficitur enim et eget posuere et velit. lorem elit. ac\n\n30 Dolor malesuada ligula ac sagittis felis. pharetra Vivamus fringilla faucibus. nec eget in,\n\n31 Ante scelerisque In\nLorem massa, efficitur ac Ut in In\nLorem\n\n32 Tincidunt. in eget velit. pretium est pharetra orci, tincidunt. nec bibendum, iaculis. metus volutpat In\n\n33 Enim aliquam ac pharetra amet, primis fames primis faucibus. ipsum Sed Integer hendrerit\n\n34 Iaculis. efficitur tincidunt. amet, Integer ac ut ac enim ac rutrum massa\n\n35 Nunc tincidunt. malesuada finibus metus libero\n\n36 Ante hendrerit iaculis. efficitur dolor ut neque. orci\n\n37 Ut eget in, quis, sit ipsum orci, adipiscing in,\n\n38 Consectetur ac felis. Ut fringilla pharetra ipsum aliquam consectetur aliquam ac est tortor\n\n39 Efficitur Sed Mauris ac libero pharetra et fringilla ac in semper hendrerit Integer pretium\n\n40 In ut elementum sit tortor purus iaculis. Integer fringilla ipsum finibus orci, ante In\n\n41 Et sem. purus volutpat massa efficitur\n\n42 Ipsum iaculis. orci, elementum ac primis primis consectetur volutpat ut\n\n43 Libero Duis\nLorem in posuere ligula ut nunc Interdum tortor elit. vitae orci,\n\n44 Eget lorem massa, condimentum ante consectetur est in sagittis vitae viverra\n\n45 Vitae finibus in, Duis elementum\n\n46 Tincidunt. Integer quis, elit. Integer vel pretium finibus orci fames ac eget ante molestie Mauris\n\n47 Bibendum, ut massa et sagittis Ut orci consectetur Mauris semper ac metus ut\n\n48 Integer nec in massa in nec sit\n\n49 Consectetur lorem massa elementum in eget nunc in, condimentum metus in\n\n50 Ac sagittis pharetra eget enim elit.\nLorem faucibus. semper. in tincidunt. in, nunc semper\n\n51 Faucibus. ante vitae Mauris lorem ut velit. tortor nec velit. consectetur efficitur fringilla elit. semper\n\n52 Massa quis, in nec adipiscing ante et elementum faucibus.\n\n53 Faucibus. Sed in semper. aliquam Vivamus sit\n\n54 Ante nunc fames ligula massa, elementum in in Fusce efficitur nunc\n\n55 Et libero neque. nec eget condimentum ipsum lorem\n\n56 Nunc in, lorem efficitur semper. pretium sagittis Mauris Duis scelerisque Ut consectetur\n\n57 Ipsum sit dolor neque. dui in\n\n58 Molestie ac pretium orci sit dui finibus amet, metus\n\n59 Ante Mauris ut in, scelerisque ut dui\n\n60 Dolor eget enim ut malesuada efficitur semper Sed volutpat semper. ipsum efficitur condimentum eget\n\n61 Neque. vel tortor elit. neque. eget Integer Fusce\n\n62 Amet, ut bibendum, quis, sem. molestie molestie tortor nunc in viverra vitae\n\n63 Ipsum neque. felis. ante ante pretium neque. tincidunt. efficitur massa,\n\n64 In, adipiscing rutrum fames ut in eget ac nunc neque. in, Duis in Interdum\n\n65 Efficitur lorem posuere ut primis Duis viverra scelerisque hendrerit\n\n66 Viverra tincidunt. ut ac efficitur Mauris sagittis tortor sit semper.\n\n67 Enim Ut elit. vitae nunc In scelerisque et Sed elementum Fusce ut eget amet,\n\n68 Malesuada hendrerit tincidunt. amet, massa, bibendum, Mauris dolor et in\n\n69 Felis. Interdum orci ante pretium elit. et orci eget felis. ante sem.\n\n70 Vivamus lorem neque. posuere consectetur et elit. primis lorem viverra condimentum massa libero\n\n71 Ac ac in elementum rutrum orci, Integer in vel pharetra enim in dolor neque.\n\n72 Nec quis, ac sit Sed\n\n73 Massa Vivamus tincidunt. vitae sem.\n\n74 Duis libero aliquam ante libero ac in, Integer volutpat purus orci eget ut\n\n75 Ac posuere\nLorem Interdum Vivamus sagittis faucibus. massa, Fusce massa,\n\n76 In sem. pharetra in dolor vitae ac primis condimentum dolor\nLorem elit. Interdum tortor viverra\n\n77 Malesuada nunc dolor Sed felis. rutrum et tincidunt. in, nunc felis. ac nunc Ut\n\n78 In lorem ante pretium elementum\n\n79 In, orci Vivamus eget malesuada Sed est viverra\n\n80 Fusce tortor Duis enim et ac in in, Interdum Fusce iaculis.\n\n81 Fusce dolor pharetra elementum sagittis faucibus. hendrerit aliquam purus condimentum pretium\n\n82 Adipiscing elit. nunc massa, adipiscing In elementum scelerisque condimentum ac ipsum ante ante aliquam efficitur\n\n83 Fringilla ac dolor scelerisque fringilla semper\n\n84 Aliquam neque. orci, orci ac scelerisque eget primis quis, metus\n\n85 Ac elit. vel rutrum ipsum fringilla Interdum hendrerit scelerisque\n\n86 In, ac adipiscing semper finibus\n\n87 Sed Vivamus hendrerit tortor sagittis purus neque. massa\n\n88 Ipsum sem. quis, tincidunt. in,\n\n89 Tincidunt. lorem enim viverra metus eget eget primis et ac\n\n90 Orci, purus semper. iaculis. orci in rutrum\n\n91 Massa, velit. eget Integer metus felis. volutpat ante elit. vel fames purus\n\n92 Sagittis eget libero aliquam eget sem. in eget enim elit. fringilla finibus velit. in,\n\n93 Faucibus. volutpat primis consectetur ipsum ac purus Integer Duis aliquam aliquam\n\n94 Orci, neque. pharetra orci, et quis, sit tortor eget ac quis,\n\n95 Semper. metus et Fusce iaculis. et efficitur massa,\n\n96 Lorem consectetur sagittis tortor tincidunt. elit.\nLorem in\n\n97 Efficitur rutrum posuere efficitur neque. amet, nec viverra\n\n98 Viverra ipsum Interdum eget fringilla\n\n99 Et ut velit. Interdum ac finibus fames semper ut vitae Integer\n\n100 Vivamus scelerisque condimentum eget orci sagittis tincidunt. Integer\n\n101 Ac ante hendrerit ante Fusce enim neque. ac viverra molestie massa,\n\n102 Vitae eget faucibus. ut et\n\n103 Sem. adipiscing ipsum metus et amet, in condimentum orci, in velit. semper ipsum\n\n104 Ut dolor libero est purus sagittis massa, sem. vitae in efficitur Vivamus iaculis.\n\n105 Est velit. eget ante faucibus. fringilla nunc\n\n106 Pharetra et posuere vitae in faucibus. vitae adipiscing sem. pretium sem. efficitur et\n\n107 Consectetur viverra purus pharetra dui elit. Vivamus Ut\n\n108 Ante neque. semper. ligula neque. dui fringilla consectetur\n\n109 Sem. nec aliquam\nLorem fringilla ut ut metus ipsum in libero\n\n110 Ac sagittis libero efficitur velit. lorem ac nunc Integer in metus posuere\n\n111 Scelerisque pharetra neque. vitae ante vel aliquam Mauris Interdum Fusce eget Ut enim ipsum vel\n\n112 Felis. massa felis. In\nLorem massa, semper. sit\nLorem bibendum, ac lorem velit. eget\n\n113 Ac quis, lorem Sed rutrum ac in volutpat elementum libero In\n\n114 Purus ligula efficitur Ut in, et Ut\n\n115 Sed condimentum ante aliquam efficitur in ac pretium\n\n116 Velit. purus et elit. molestie ligula elit. finibus Ut\n\n117 Aliquam orci, lorem viverra hendrerit vel ipsum ac Mauris orci dolor tortor\n\n118 In ac neque. tortor finibus lorem consectetur ipsum iaculis. libero\n\n119 Quis, eget adipiscing elementum Interdum sem. semper. fringilla efficitur Sed libero elit.\n\n120 Duis pharetra elit. in condimentum semper. consectetur ligula\n\n121 Nec pretium metus ipsum ante ut massa, rutrum efficitur\n\n122 Massa sit massa, vitae amet, eget vitae consectetur iaculis. quis, tincidunt. iaculis.\n\n123 Elit.\nLorem efficitur eget Duis est semper ut efficitur enim et ante ac ut\n\n124 Ut Fusce adipiscing ac eget nec\n\n125 Dui in tortor vel ut elit. consectetur metus orci in,\n\n126 Et quis, amet, ac purus molestie eget velit.\n\n127 Est purus semper Interdum finibus vel ligula condimentum velit. fames\n\n128 Nec consectetur pretium nec ut lorem elit.\nLorem bibendum, Sed Integer consectetur sem.\n\n129 Finibus in\nLorem purus ut pretium aliquam\n\n130 Et Duis ac ligula In primis dolor bibendum, volutpat elit. lorem fringilla est condimentum In\n\n131 Lorem consectetur\nLorem et pharetra Duis aliquam ante\n\n132 Hendrerit iaculis. est scelerisque\nLorem efficitur tortor Sed\n\n133 Volutpat Sed pharetra malesuada nec\n\n134 In semper dolor ac vitae aliquam dui Fusce ac ipsum in vel\n\n135 Est enim dolor libero in ac vitae efficitur Integer vitae posuere ipsum sagittis\n\n136 Neque. et sem. pretium in Fusce\n\n137 Pretium ut eget adipiscing et ac Interdum felis. Vivamus hendrerit efficitur semper.\n\n138 Interdum pretium semper semper. in viverra elit. elit. In\n\n139 Scelerisque nec ante in, hendrerit malesuada ligula ante ante\n\n140 Amet, sem. et dui in ac efficitur orci, condimentum ac sit Vivamus in velit.\n\n141 Bibendum, faucibus. libero condimentum massa libero Fusce sit ac in ut\n\n142 Fames primis efficitur condimentum et eget felis. primis Mauris pharetra ipsum\n\n143 Ipsum ipsum volutpat et ut in, hendrerit\n\n144 In elit. orci in tincidunt. vel orci, nunc consectetur malesuada dui neque. et\n\n145 Primis eget primis nunc orci,\n\n146 Semper. volutpat orci, est sem. semper ligula et et in, et\nLorem malesuada est\n\n147 Enim ante vel adipiscing aliquam ut Duis semper efficitur ut nunc est ut enim ac\n\n148 Ac viverra et orci massa efficitur hendrerit ligula Ut libero efficitur ac ipsum\n\n149 Fames Interdum ac ante et iaculis. pretium velit. malesuada fames\n\n150 Et eget aliquam Ut nec molestie ac Interdum\n\n151 Scelerisque in quis, aliquam felis. iaculis. iaculis. libero vel posuere hendrerit efficitur malesuada\n\n152 Interdum posuere in dui massa sem. ante posuere\n\n153 Elementum ipsum semper consectetur In viverra In Interdum in\n\n154 Pharetra rutrum semper. in efficitur\n\n155 Efficitur finibus vel in, hendrerit rutrum condimentum\n\n156 Primis nec rutrum tortor ante Fusce\n\n157 Ipsum et sit molestie dolor sem.\nLorem\n\n158 Consectetur iaculis. in purus lorem consectetur dui fames est Duis elit. Duis dolor orci aliquam\n\n159 Viverra sem. efficitur pretium volutpat nec\n\n160 Fringilla ante ac semper vel\n\n161 Eget semper sit ut rutrum vel vitae sagittis enim in enim nec semper\n\n162 Ac tincidunt. efficitur est Vivamus vitae in ut iaculis. condimentum massa\n\n163 Ut posuere vel finibus ante Mauris semper. eget lorem vel\n\n164 Velit. efficitur Integer tortor massa posuere ipsum ac Vivamus rutrum nunc tincidunt. Sed velit. aliquam\n\n165 Ac consectetur consectetur ac nunc efficitur malesuada Fusce consectetur pharetra\n\n166 Est elit. faucibus. dolor dolor\n\n167 Nec tortor in, est ligula efficitur\nLorem ipsum Mauris semper Sed Ut viverra\n\n168 Massa, consectetur scelerisque vitae bibendum, hendrerit amet, aliquam massa ac felis. tincidunt. Sed\n\n169 In eget aliquam eget Sed\n\n170 Dui felis. Interdum sit orci semper. consectetur tincidunt. dolor ut pretium fringilla\n\n171 Ligula volutpat aliquam ac tincidunt.\n\n172 Massa, iaculis. neque. orci finibus\n\n173 Amet, finibus ante et sagittis sit pretium lorem Duis\n\n174 Sem. ac viverra purus ac in, nec nunc Ut semper ante purus metus posuere\n\n175 In, in in, semper. semper. purus Fusce in,\n\n176 Ac sem. primis aliquam purus in tincidunt. scelerisque efficitur vitae malesuada condimentum orci ante\n\n177 Viverra semper. efficitur Duis primis faucibus. vitae consectetur molestie Interdum nunc\n\n178 Elementum fames ut Fusce adipiscing hendrerit lorem in hendrerit massa,\n\n179 Sit est ac Vivamus massa dui ac dolor finibus sagittis Ut est orci, eget consectetur\n\n180 Finibus\nLorem nunc finibus scelerisque elit. sagittis dui orci Fusce aliquam volutpat vitae nunc efficitur\n\n181 Interdum bibendum, ligula semper. Interdum posuere felis.\n\n182 Consectetur est sagittis massa massa, In semper tincidunt. Duis\n\n183 In Interdum nec consectetur neque. dui pretium condimentum\n\n184 Et ac amet, ac eget efficitur et eget orci Ut ac consectetur sem.\n\n185 Lorem sit malesuada elit. nec elit. condimentum volutpat primis ante efficitur orci Interdum est\n\n186 Viverra in, elit. Sed ante pharetra\nLorem ut eget rutrum purus In scelerisque\n\n187 Fusce in\nLorem condimentum est semper ac ac velit. viverra dui In ut\n\n188 Molestie rutrum ac felis. faucibus. amet, condimentum aliquam neque. et rutrum massa malesuada in,\n\n189 Semper fames aliquam iaculis. ante finibus In massa, neque.\n\n190 In amet, ligula ac in Vivamus Fusce Interdum fringilla vitae Vivamus bibendum, viverra iaculis. semper.\n\n191 Semper. hendrerit primis et metus massa, ac\n\n192 Posuere viverra vitae rutrum eget finibus in ac enim Integer massa\n\n193 Elit. hendrerit tortor in, molestie Ut volutpat fames dui ut sagittis viverra\n\n194 Ac tortor elit. ut vitae ligula metus massa felis. efficitur bibendum, aliquam\nLorem quis, semper.\n\n195 Fames massa, in felis. sem. dolor semper\n\n196 Volutpat\nLorem Duis hendrerit in quis,\nLorem vel\n\n197 Elementum eget orci, malesuada libero felis.\n\n198 Et condimentum tincidunt. velit. In pharetra\n\n199 Iaculis. Interdum tincidunt.\nLorem Sed Mauris faucibus. nunc\n\n200 Efficitur et elit. neque. semper tortor Fusce\n\n201 Integer ut volutpat vitae elit. ac elit. Vivamus Sed semper. amet,\n\n202 Viverra In tortor pharetra felis. molestie\n\n203 Ut massa, velit. in, lorem in, posuere sit fames posuere posuere ac ante in scelerisque\n\n204 Nunc elit. dui orci Integer amet, ipsum Integer metus\n\n205 Ut et faucibus. purus ante ut ut ut\n\n206 Et nec ante consectetur ante Sed ante metus eget\n\n207 Ligula elit. Duis efficitur Mauris\n\n208 Eget finibus elit. ante metus ut posuere felis. neque. purus malesuada\n\n209 Tincidunt. Fusce Duis aliquam consectetur quis, ipsum bibendum, consectetur elit. orci neque. eget in\n\n210 Fringilla malesuada faucibus. est est elit. ligula\n\n211 Fusce sem. eget ac vitae neque. consectetur In in\nLorem\n\n212 Consectetur et in iaculis. vitae sem. volutpat fringilla efficitur ac efficitur iaculis. consectetur\n\n213 Consectetur sem. libero in tortor finibus condimentum et pretium hendrerit Integer viverra\n\n214 Adipiscing Fusce primis fringilla amet, et Mauris finibus ligula\n\n215 Ante nunc sit efficitur semper. massa, Fusce In condimentum semper. tincidunt.\n\n216 Tortor amet, molestie semper. ut viverra volutpat Ut sem. fames ligula ut efficitur aliquam\n\n217 Elementum iaculis. ac sagittis molestie orci ante ut ipsum lorem orci, in, Duis ac scelerisque\n\n218 Eget metus Interdum Integer enim molestie In\n\n219 Semper. elementum est felis. ligula\n\n220 Sit ipsum aliquam In faucibus. ac elementum aliquam velit. in vitae nec ut\n\n221 Ac volutpat fringilla finibus fames molestie orci in Interdum elit. primis finibus malesuada faucibus. sem.\n\n222 Orci, iaculis. elementum orci Mauris efficitur ut ac enim\n\n223 Mauris finibus Sed amet, enim\n\n224 In\nLorem amet, ac vel lorem ante Fusce lorem eget\n\n225 Aliquam ante sem. velit. efficitur\n\n226 Tortor condimentum massa Vivamus ut metus sagittis in, scelerisque\n\n227 Aliquam ac nunc Interdum ac sit tortor nec lorem elit. ipsum\n\n228 Eget ligula amet, ipsum est in orci dolor Ut efficitur ut eget in Sed bibendum,\n\n229 Efficitur faucibus. condimentum Fusce volutpat sit purus quis, in, libero velit. bibendum, et est\n\n230 Vivamus Mauris Interdum in scelerisque In amet, vel\nLorem tincidunt.\n\n231 Posuere rutrum molestie orci, pharetra in elementum efficitur pharetra\n\n232 Integer Ut in, et dui neque. iaculis. neque. orci enim\n\n233 Nec ut neque. in et adipiscing\n\n234 In ligula Interdum Interdum vitae velit. vel hendrerit purus malesuada vel\n\n235 Ipsum in est massa, eget Duis purus nunc massa\n\n236 Et nunc Vivamus scelerisque enim eget Duis viverra in libero dolor\n\n237 Iaculis. neque. purus lorem in massa lorem Vivamus molestie finibus ante Ut In ut scelerisque\n\n238 Orci, in, fringilla purus ipsum\n\n239 Et sit nec efficitur Ut eget Ut\n\n240 In neque. Fusce molestie et efficitur consectetur ipsum sit tincidunt. Vivamus\n\n241 Hendrerit dui consectetur nunc elementum viverra ut dui\n\n242 Dui sagittis aliquam hendrerit Integer ipsum rutrum amet, eget Vivamus\n\n243 Amet, ante enim sit vel sagittis ut est est semper massa Mauris purus malesuada\n\n244 Orci massa, felis. ac eget bibendum, amet, ac dui nunc\n\n245 Vitae faucibus. vitae Fusce fames posuere\n\n246 Et ante in vel Integer Interdum Ut\n\n247 Ante pretium faucibus. amet, hendrerit eget dolor in ac dolor amet, ac ac fringilla\n\n248 Consectetur sagittis sem. ac Sed\n\n249 Et elit. malesuada neque. libero scelerisque rutrum consectetur in, elit. ac\n\n250 Primis fringilla et in, lorem In vel pretium\n\n251 Mauris in, finibus vitae viverra condimentum metus neque. est malesuada purus\n\n252 Finibus bibendum, ipsum viverra massa,\nLorem ante quis, elementum ipsum in\n\n253 Pretium sit libero ac vel orci sagittis felis. condimentum vitae pharetra enim pretium\n\n254 Pretium adipiscing Sed neque. est libero vel semper. vel ipsum et semper in in ipsum\n\n255 Ut efficitur in, Ut neque. ac orci\n\n256 Orci, finibus Vivamus sit dui in vitae bibendum, vel\n\n257 Ut ligula primis vel Interdum est ante metus Integer et elementum semper. ligula\n\n258 Duis semper pharetra massa, ac neque. amet, velit. est pharetra nunc vitae ut et\n\n259 Malesuada quis, ac efficitur Vivamus viverra purus Vivamus\n\n260 Molestie enim vel ac posuere est hendrerit consectetur bibendum, neque. massa\n\n261\nLorem dui condimentum purus ligula elementum nec Interdum Mauris fames primis elit. Vivamus\n\n262 Ut efficitur velit. Sed elit. ac consectetur fringilla Mauris lorem\n\n263 Eget lorem ante vitae scelerisque quis, faucibus. efficitur Mauris pretium et orci In orci orci\n\n264 Ut elit. semper amet, in ac Vivamus tincidunt. Vivamus Ut\n\n265 Ac vel tortor posuere Sed amet,\n\n266 Ante in nunc eget et Integer scelerisque\n\n267 Dolor orci Fusce eget ante iaculis. elementum viverra primis ipsum efficitur scelerisque condimentum\n\n268 Orci volutpat pretium elementum sagittis in ac ligula Ut felis. sem. et ante elit. molestie\n\n269 Ut est sagittis sagittis ipsum\n\n270 Viverra in Fusce Integer volutpat et\n\n271 Ac ipsum eget dolor condimentum sagittis nunc tortor\n\n272 Efficitur massa, est eget Vivamus ante ut efficitur semper.\n\n273 Sagittis Vivamus vitae ut ipsum Ut eget orci, elit. et eget\n\n274 Neque. ac condimentum massa, massa ipsum ac sem. nec elit. consectetur\n\n275 Ipsum elit. libero est ac molestie\n\n276 In finibus tincidunt. iaculis. in, ut massa fringilla et tincidunt. elementum felis. ut eget\n\n277 Ligula in enim velit. molestie purus\n\n278 Enim semper viverra orci, hendrerit ut primis purus eget tincidunt. ipsum quis,\n\n279 Aliquam in Fusce Sed consectetur viverra ipsum libero tincidunt. semper dui fringilla sem.\n\n280 Tortor sit massa elit. efficitur nunc rutrum ipsum bibendum, volutpat ut fames nec adipiscing\n\n281 Ante nunc rutrum elementum adipiscing volutpat sit tortor elit.\n\n282 Malesuada vitae orci, malesuada elit. ut\n\n283 Amet, semper libero ac Sed bibendum, finibus eget amet, quis, iaculis. dui\n\n284 Felis. ut ipsum dui volutpat\n\n285 Ante aliquam lorem ac Ut sem. primis nunc et Mauris ipsum rutrum nec sem.\n\n286 Faucibus. elit. sagittis nunc ac elementum eget fringilla ac consectetur purus elit. in Vivamus Integer\n\n287 Malesuada neque. est est viverra dui semper ut ipsum primis tincidunt.\n\n288 Consectetur nec ut efficitur iaculis.\n\n289 In sit scelerisque orci, ac et consectetur et\n\n290 Nec sagittis dui molestie tortor efficitur vel et felis. Duis massa et\n\n291 In bibendum, scelerisque velit. amet, ac Interdum lorem ac est ac sit\n\n292 Ante ac semper. elit. lorem ac purus in elit.\n\n293 Amet, hendrerit amet, ante nunc semper consectetur finibus orci efficitur in ligula efficitur neque.\n\n294 Ac adipiscing elementum adipiscing pharetra et enim ante in consectetur lorem primis in volutpat\n\n295 Interdum rutrum efficitur eget fringilla\n\n296 Neque. ut ac dolor in semper. posuere aliquam rutrum quis, volutpat elementum sem. In\n\n297 Elementum fames tincidunt. felis. ipsum hendrerit in primis ante nec molestie ac sit rutrum\n\n298 Eget velit. tincidunt. et fringilla tincidunt. et in ac pharetra elementum in\n\n299 Ac orci elit. ante ipsum\n\n300 In malesuada Fusce neque. posuere\n\n301 Est ac\nLorem fringilla ante pharetra purus efficitur purus velit. orci, metus in volutpat quis,\n\n302 Fringilla Vivamus molestie aliquam ligula condimentum lorem eget eget eget adipiscing ac ante in pretium\n\n303 Faucibus. massa Fusce ipsum ipsum purus Duis\n\n304 Posuere vitae aliquam tincidunt.\nLorem bibendum, eget dolor sem. lorem elit. dolor semper. primis\n\n305 Ac ipsum velit. orci, ligula Sed\n\n306 Tortor posuere consectetur hendrerit tortor malesuada eget orci, adipiscing elit. pharetra Fusce\n\n307 Lorem dolor ipsum ac ac finibus bibendum, felis. consectetur bibendum, Duis neque. Sed in efficitur\n\n308 Est finibus Vivamus finibus in primis elit. malesuada orci, eget\n\n309 Elementum ut dui Interdum enim Mauris ligula\n\n310 Ac in elit. ante iaculis. libero semper vitae bibendum,\n\n311 Viverra quis, molestie consectetur ante nunc semper\n\n312 Rutrum dui purus primis sem.\n\n313 Semper libero condimentum orci, sagittis massa, et viverra Integer scelerisque ut Interdum efficitur Integer\n\n314 Pharetra primis viverra Duis scelerisque iaculis. et vel in ante scelerisque scelerisque ipsum\n\n315\nLorem viverra et Vivamus vitae velit. faucibus. orci tortor tincidunt. nec\n\n316 In ac sem. est libero Sed ante metus volutpat posuere libero ante\n\n317 Faucibus. fringilla lorem Sed ipsum neque. et ut ipsum posuere\nLorem fringilla\n\n318 In, consectetur hendrerit neque. felis. elit. ac consectetur Vivamus in, pretium ac\n\n319 Vivamus elit. in, finibus Mauris tincidunt. ante orci, est ante Fusce ante ac elementum Duis\n\n320 Elementum scelerisque efficitur ut rutrum ac ante lorem vel\n\n321 Elit. velit. nunc\nLorem ac\n\n322 Ante ac ac ipsum sit dui ipsum orci, vel fringilla rutrum Fusce\n\n323 Orci, amet, finibus ut ante ante pretium ac efficitur dolor Mauris ut ipsum eget\nLorem\n\n324 Et ligula ut condimentum sagittis Integer enim primis rutrum\n\n325 Pharetra ligula scelerisque ante consectetur et sem. massa hendrerit neque. Mauris condimentum ante\n\n326 Faucibus. massa consectetur libero et orci viverra bibendum, enim ligula sit iaculis. efficitur molestie\n\n327 Libero ligula neque. Fusce elit. Integer fames primis finibus in Integer consectetur enim amet,\n\n328 Et eget ipsum In Ut ut elit. et et fames malesuada pharetra quis,\n\n329 In viverra Fusce elementum vel ante In viverra semper et Mauris primis\n\n330 Consectetur Mauris ac Duis sem. Integer semper ac\n\n331 In semper In elit. ipsum eget sem. sagittis efficitur orci hendrerit aliquam lorem\n\n332 In libero faucibus. ac massa, massa, dui orci In metus ipsum malesuada\n\n333 Tortor nunc scelerisque aliquam volutpat hendrerit ipsum Mauris ac posuere tincidunt. metus libero amet, Interdum\n\n334 Tortor sit amet, in condimentum metus ac Integer bibendum, ac felis. eget ante tincidunt.\n\n335 Ac elit. bibendum, metus Integer sem. semper ipsum nunc ac ut condimentum ipsum felis. ut\n\n336 Purus In est felis. semper. quis, dui purus metus iaculis. scelerisque in massa\nLorem faucibus.\n\n337 Pharetra Ut sem. Duis ut ante\n\n338 Dolor purus rutrum ut primis Mauris in in eget neque. ante\n\n339 In massa, ut sit aliquam neque. ligula ante eget vitae\n\n340 Pharetra fringilla ante aliquam Vivamus Vivamus est nunc elit. neque.\n\n341 Libero vel elementum iaculis. faucibus. fames et ut\nLorem eget\nLorem metus\n\n342 Sem. ipsum nec neque. bibendum, orci,\n\n343 Ac ante nec orci orci, ac orci finibus vitae in, scelerisque in amet,\n\n344 Ac Sed nec dui neque. massa\n\n345 Ac elementum ut hendrerit Interdum quis, volutpat primis amet, ipsum\n\n346 Ante posuere et viverra ante purus ante enim vitae In ipsum tortor elit.\n\n347 Elit. condimentum Interdum tincidunt. ac condimentum malesuada\n\n348 Est volutpat neque. Fusce vitae dolor in eget\n\n349 Amet, ac ante faucibus. pretium efficitur tincidunt.\n\n350 Elit. consectetur eget ipsum\nLorem Sed sem. iaculis. Fusce ac vel rutrum pretium ipsum orci,\n\n351 Massa in fringilla volutpat eget adipiscing Duis viverra aliquam in hendrerit dolor\n\n352 Est nunc viverra scelerisque elementum viverra sem. ut nunc hendrerit finibus ante ac\n\n353\nLorem in efficitur Sed Mauris pharetra felis. viverra adipiscing\nLorem vel elit. orci lorem\n\n354 Metus elit. ac sem. felis. nec semper aliquam\n\n355 Eget ipsum purus scelerisque sagittis purus\nLorem vitae\n\n356 Ipsum metus tortor elit. est ac malesuada Fusce adipiscing volutpat amet, efficitur dui fringilla tincidunt.\n\n357 Ipsum Ut vel vel metus lorem posuere in elementum ac volutpat viverra primis orci, posuere\n\n358 Fringilla velit. et elementum malesuada\n\n359\nLorem enim in, massa, In dolor et ac posuere elit. elementum bibendum, ligula\n\n360 Ante ac posuere elementum massa elit. ac\n\n361 Bibendum, purus ipsum orci, in, eget condimentum orci, nunc aliquam\n\n362 Fames ante molestie Integer dui\n\n363 Enim In Duis bibendum, pharetra Integer enim in\n\n364 Pharetra consectetur est ut elit. In elementum semper In adipiscing elit. Fusce elit. pretium Fusce\n\n365 Velit. vitae fames finibus massa viverra Interdum aliquam\n\n366 Sit felis. ante est rutrum\n\n367 Primis semper orci, orci, volutpat purus\n\n368 Felis. adipiscing nec vitae ante dolor ipsum velit. et adipiscing faucibus. Interdum\n\n369 Tincidunt. semper. ac bibendum, sem. eget dolor sagittis\n\n370 Scelerisque viverra lorem primis amet, quis, adipiscing ligula posuere consectetur ipsum\n\n371 Semper consectetur efficitur Vivamus quis, ipsum ante et velit. metus\n\n372 Ligula sem. sem. adipiscing metus metus efficitur efficitur elementum sagittis\n\n373 Sem. pretium finibus metus purus scelerisque nunc viverra Integer ac faucibus. dui elementum\n\n374 Sit ipsum Sed vitae metus dolor tincidunt. in aliquam pharetra sagittis\n\n375 Libero amet, nec ut massa, eget iaculis.\n\n376 Dolor scelerisque pretium dolor molestie Integer Ut in semper viverra consectetur efficitur\n\n377 Aliquam aliquam ac in ipsum in, adipiscing pretium vel et viverra nec\n\n378 Massa viverra finibus elit. consectetur efficitur Interdum in ligula ante\n\n379 Vel semper. eget adipiscing massa malesuada\nLorem purus tortor ante primis primis purus ut\n\n380 Adipiscing lorem Vivamus rutrum scelerisque\n\n381 In elementum semper. est aliquam in hendrerit efficitur eget posuere\n\n382 Et semper consectetur ipsum libero finibus\n\n383\nLorem quis, in et rutrum Sed ante et et\n\n384 Vel nec hendrerit scelerisque nec velit.\n\n385 Fames malesuada consectetur ut sem. lorem nec in, ante Duis orci felis.\n\n386 Aliquam bibendum, Interdum dolor pretium efficitur ac\n\n387 Scelerisque Duis neque. Mauris libero Mauris massa et dolor felis. malesuada felis.\n\n388 In nec fringilla pharetra fames Interdum in Fusce vitae In ac\n\n389 Ligula in enim scelerisque et In ut\n\n390 Hendrerit semper. efficitur massa ut\n\n391 Sagittis volutpat sem. dui ut sit consectetur in neque. volutpat Mauris ipsum est\n\n392 Bibendum, ipsum dui est ipsum\n\n393 Et et semper et Ut enim nunc ante fames ut massa\n\n394 In, ante ante ipsum ac Duis ante elementum et fringilla est dolor\n\n395 Ac purus bibendum, eget Vivamus orci\n\n396 Iaculis. posuere adipiscing posuere purus\n\n397 Et et in scelerisque fames eget nunc condimentum ut fringilla rutrum ligula elementum\n\n398 Elementum orci, fringilla tincidunt. ac ut vel eget\n\n399 Fames ante et massa aliquam eget\n\n400 Dolor elit. pretium nunc consectetur ipsum\n\n401 Purus lorem ac dui semper.\n\n402 Efficitur nunc libero velit. ac eget\n\n403 Posuere elementum faucibus. felis. Interdum in fringilla hendrerit elementum\n\n404 In, nunc Ut ut Interdum nunc\n\n405 Hendrerit molestie tincidunt. ac volutpat aliquam\n\n406 Vitae eget semper. aliquam\nLorem ante fames ligula\n\n407 In amet, semper elit. iaculis. ut efficitur\n\n408 Ac massa, ut pharetra orci sem. in efficitur\n\n409 Ante ipsum orci ac ac ipsum est libero posuere vel vel iaculis. pharetra velit.\n\n410 Quis, ligula dolor in orci Interdum felis. purus orci, ac\n\n411 Vivamus efficitur fames sem. ac ante Mauris tortor ac ut in\n\n412 Pretium primis aliquam Vivamus nunc elit. Vivamus lorem ac sit molestie\n\n413 Lorem Interdum massa orci Duis ac Integer sagittis ut\n\n414 Fringilla fames eget finibus iaculis. ligula\n\n415 Purus quis, ut in fames felis. in velit. Interdum nec\nLorem molestie malesuada vitae in\n\n416 Orci, ante in libero rutrum elementum\n\n417 Eget ac amet, Interdum et massa, hendrerit elit. pretium tincidunt. efficitur vitae bibendum, quis, vitae\n\n418 Elit. ac Interdum volutpat Integer sit in posuere dolor pharetra elit. orci in viverra vitae\n\n419 Finibus Sed in ipsum nunc lorem dolor adipiscing vel efficitur et\n\n420 Fusce semper dui elit. in vitae semper vel consectetur ut nec dolor enim consectetur primis\n\n421 Molestie Duis sagittis volutpat sem. ante efficitur Duis fringilla Integer pharetra fames ante\n\n422 Bibendum, orci, posuere et ac\n\n423 Fames ac eget primis Integer aliquam\n\n424 Ac In bibendum, eget elementum purus quis, condimentum semper. malesuada aliquam\n\n425 Volutpat finibus quis, lorem ut ipsum scelerisque amet, ac\n\n426 Faucibus. ac elit. fringilla condimentum\n\n427 Integer massa, elit. in, efficitur elit. Sed\n\n428 Iaculis. nec quis, in molestie eget elit. sit\n\n429 Et fringilla velit. elit. tortor malesuada elementum Sed orci molestie ut in\n\n430 Ac elementum molestie faucibus. ipsum Integer semper. Interdum tortor consectetur in, Fusce ante faucibus. Fusce\n\n431 Lorem vel amet, iaculis. ipsum dolor fames\n\n432 Integer metus semper ipsum dui purus et ligula orci Fusce orci,\n\n433 Efficitur Sed fames ante orci, quis, ante sem. Sed in\n\n434 In Interdum hendrerit Ut efficitur\n\n435 Vivamus volutpat ac libero vitae vel condimentum in, velit. metus purus ipsum\n\n436 In ipsum rutrum ut malesuada pretium semper. In\n\n437 Posuere elit. dui ante ac amet, rutrum elit. finibus malesuada pretium ipsum\n\n438 Elementum sem. pretium ante Fusce posuere condimentum quis, iaculis. finibus ante rutrum\n\n439 Aliquam ante ante molestie Ut\n\n440 Condimentum Duis tortor\nLorem malesuada\n\n441 Dolor fames finibus Sed eget ante efficitur Sed in nec dui libero pretium\n\n442 Et quis, Sed velit. semper. in enim primis ligula ipsum lorem ac et\n\n443 Quis, nunc est in, ac purus bibendum, ipsum ut ac ante\n\n444 Fames fringilla quis, pretium semper. tincidunt. ac condimentum malesuada Interdum dui lorem eget ante ante\n\n445 Ac consectetur condimentum massa, ante posuere fames iaculis. orci, enim orci lorem In tincidunt.\n\n446 Lorem iaculis. orci, ante fringilla ante ac iaculis. nec pretium massa,\n\n447 Enim massa, In efficitur vel pharetra in, et\nLorem in, In pharetra orci\n\n448 Nunc eget et in consectetur efficitur adipiscing\n\n449 Consectetur vel adipiscing in tortor Mauris fringilla metus semper.\n\n450 Eget Sed ante In elit. est condimentum hendrerit efficitur faucibus. In efficitur\n\n451 Condimentum iaculis. velit. elit. Fusce Fusce Integer\n\n452 Elit. bibendum, neque. quis, pharetra libero\n\n453 Ac orci eget semper sem. ac ante eget ipsum\n\n454 Iaculis. ante et malesuada et molestie scelerisque molestie sit in dolor primis\n\n455 In posuere orci, neque. Interdum sit consectetur metus sem. scelerisque massa\n\n456 Dui hendrerit Integer Sed molestie ac ac semper. lorem eget et elit.\n\n457 Ipsum ligula et aliquam consectetur viverra elementum fames semper efficitur\n\n458 Integer purus lorem primis sit orci enim\n\n459 Fringilla orci,\nLorem bibendum, nec in, Duis lorem in nec massa, iaculis.\n\n460 Sagittis in Fusce nunc tortor ac felis. pretium iaculis. lorem adipiscing Duis molestie\n\n461 In volutpat elementum molestie in, semper. adipiscing ante lorem\n\n462 Purus vel Vivamus posuere lorem amet, velit. dolor sagittis Sed volutpat\n\n463 Fringilla in, In orci, in\nLorem rutrum adipiscing bibendum, consectetur tincidunt. orci, vel\n\n464 In ligula molestie viverra eget in, consectetur enim\n\n465 Enim orci, et et ac massa, velit. nunc semper\n\n466 Consectetur dolor condimentum dui tortor Vivamus scelerisque efficitur malesuada\n\n467 Orci sagittis pretium quis, primis\n\n468 Ac elit. ante amet, elementum ac\n\n469 Efficitur ante In viverra velit. ante molestie efficitur sem. ac hendrerit massa, viverra elit. molestie\n\n470 In vitae finibus faucibus. sem. tortor Fusce sit et orci massa, ut ipsum ante ligula\n\n471 Orci orci bibendum, ac ac sem. finibus orci volutpat\n\n472 Bibendum, hendrerit fames libero Fusce elit. rutrum iaculis.\n\n473 Et libero vel orci elit.\n\n474 Scelerisque metus finibus malesuada enim ipsum molestie tortor Fusce et viverra vel et Integer ante\n\n475 Fames posuere faucibus. vitae elit. Integer sem.\n\n476 Massa, elementum molestie ante lorem et eget elit. elit.\n\n477 In efficitur elementum adipiscing in efficitur pharetra ipsum ligula In\n\n478 Velit. eget finibus in hendrerit posuere massa, bibendum, massa ante elit. Ut\nLorem Ut ante\n\n479 Consectetur aliquam volutpat semper. Vivamus elit. orci, semper Fusce\n\n480 Fames metus est Interdum ac iaculis. libero Integer Vivamus\n\n481 Ut fames orci, est ante neque. pretium In orci, ligula Mauris posuere volutpat tincidunt.\n\n482 Vivamus viverra amet, primis In enim in ipsum enim\n\n483 Semper aliquam dui adipiscing vitae posuere dui molestie elit. ante\n\n484 Velit. Mauris Fusce Integer quis,\n\n485 Ipsum eget neque. ligula scelerisque dolor lorem velit. pharetra purus\n\n486 Quis, Duis ac Interdum ante hendrerit elementum\n\n487 Quis, in ac et scelerisque ipsum fames velit. ante in eget malesuada ligula\n\n488 Lorem scelerisque elit. pharetra tortor ac Duis elit. posuere elementum eget Interdum eget\n\n489 Metus Integer ac ac Integer et consectetur purus fames metus in Integer ac felis.\n\n490 Orci fringilla tincidunt.\nLorem eget Mauris in, sit eget sem. tortor sit\n\n491 Scelerisque elit. sit in bibendum, libero et ipsum in, est\n\n492 Scelerisque efficitur finibus ut hendrerit Ut ac pharetra est et sit Ut\n\n493 Bibendum, Duis ante efficitur eget viverra Interdum et ipsum volutpat ante eget fames Ut elementum\n\n494 Vitae nunc ut ante consectetur in, vel sagittis hendrerit\n\n495 Elementum scelerisque fames efficitur posuere dui orci ac ligula sit\n\n496 Viverra finibus tincidunt. pharetra purus viverra ut finibus hendrerit in sit et ac\n\n497 Dui elit. ante Vivamus volutpat primis\n\n498 Lorem Integer nec tortor tortor\n\n499 Scelerisque fames semper. elementum elit. et sem. consectetur Integer ante Sed massa\n\n500 Fringilla tortor pharetra molestie dolor felis. ante amet, massa massa, Mauris consectetur dui sit\n\n501 Molestie enim iaculis. in metus\n\n502 Nunc efficitur sit Interdum iaculis. amet, ante ante tincidunt. pretium adipiscing consectetur\nLorem\n\n503 Ac ac ante ante pretium dolor primis ipsum rutrum libero volutpat Sed semper. ante\n\n504 Elit. viverra metus in primis in Duis volutpat in viverra dui rutrum hendrerit\n\n505 Molestie in eget bibendum, sit consectetur pharetra ante eget pretium elit. Duis eget massa\n\n506 In efficitur hendrerit efficitur orci elit. primis ligula amet, primis et faucibus. Ut hendrerit malesuada\n\n507 Neque. sagittis bibendum, elit. Sed nunc lorem Duis ante eget\n\n508 Interdum nec adipiscing eget elementum rutrum ipsum consectetur ac est Interdum volutpat felis. in\n\n509 Metus volutpat massa sit sagittis enim consectetur ut\n\n510 Purus sit ante ac Duis In nunc ipsum consectetur Sed fames ipsum adipiscing\n\n511 Tortor amet, est est elit. posuere\n\n512 Elit. nec ipsum ut fames Ut tincidunt. malesuada\n\n513 Finibus ut faucibus. In ut\nLorem et iaculis. adipiscing ipsum semper.\n\n514 Felis. efficitur rutrum fames consectetur\nLorem Sed In in, in quis, massa, volutpat\n\n515 In, ac malesuada finibus condimentum Duis elit. et sagittis nec\n\n516 Sagittis semper. massa, tincidunt. ante massa\nLorem\n\n517 Sem. eget elit. velit. semper. ac ante nec rutrum malesuada\n\n518 Efficitur velit. semper Integer amet,\n\n519 Purus condimentum felis. ut massa, eget molestie In pretium adipiscing et ipsum\n\n520 Fringilla dui primis ligula ac ante sem. semper. molestie faucibus. finibus ut\n\n521 Vivamus Sed nunc tortor scelerisque ante ac aliquam Integer libero consectetur Interdum vel Mauris\n\n522 Ipsum iaculis. Mauris hendrerit libero ante In ipsum\n\n523 Ac Sed Sed Interdum elit.\n\n524 Felis. Integer massa, efficitur sit orci, Interdum semper.\n\n525 Pharetra ac libero scelerisque adipiscing in semper\n\n526 Efficitur eget Integer ante Ut eget hendrerit primis efficitur consectetur elit. ante in\n\n527 Faucibus. ipsum ante in massa\n\n528 Massa massa In lorem libero Sed ipsum iaculis. semper. ante\n\n529 In nec sagittis posuere efficitur ante libero velit. ante ante quis, Sed\n\n530 Est primis nec vel iaculis.\n\n531 Duis hendrerit ante iaculis. massa, vitae sit ante ante fringilla dui\n\n532 Tortor ac adipiscing sit quis, adipiscing ligula tincidunt. ante orci, primis malesuada ipsum\n\n533 Metus enim aliquam quis, Fusce amet, consectetur eget pharetra lorem nunc in efficitur\n\n534 Integer ipsum quis, quis, primis massa efficitur ac semper. rutrum\n\n535 Elit. sit vitae purus elementum massa eget rutrum sit ante nec\n\n536 Tincidunt. metus Fusce ac Vivamus ligula elit. quis, eget ac\n\n537\nLorem vitae consectetur sagittis libero elit. ante enim adipiscing eget sagittis ligula viverra\n\n538 Ante consectetur Duis in efficitur sem. Fusce et volutpat in consectetur\n\n539 Pretium amet, faucibus. viverra efficitur\n\n540 Ipsum finibus faucibus. faucibus. felis. aliquam enim efficitur volutpat in posuere\n\n541 Bibendum, ac malesuada Duis ipsum vel bibendum, in, efficitur\nLorem velit. in\n\n542 Semper. In quis, tincidunt. nunc iaculis. rutrum felis. sem. Fusce semper Interdum Mauris\n\n543 Ut Sed fringilla metus efficitur ac ac et iaculis. dui\n\n544 Nunc pharetra faucibus. iaculis. eget elit. consectetur consectetur Vivamus hendrerit\n\n545 Ac tincidunt. condimentum neque. ac ac\n\n546 Molestie vitae semper. iaculis. pretium posuere consectetur fames ac purus neque. purus Ut sagittis finibus\n\n547 Bibendum, libero iaculis. massa, tincidunt. ut\n\n548 Metus Integer sagittis lorem ante amet,\n\n549 Nunc in aliquam velit. vitae\n\n550 Rutrum efficitur efficitur libero ipsum Sed semper. ipsum quis, In primis ante eget velit. pretium\n\n551 Orci elit. tortor eget Sed ut fringilla\nLorem massa, Mauris elit.\n\n552 Ante ipsum felis. efficitur consectetur ut ante pretium efficitur\n\n553 Rutrum nec ac eget scelerisque efficitur ac Mauris Vivamus consectetur Mauris faucibus. fringilla\n\n554 In ac molestie faucibus. ligula\n\n555 Ut Mauris ipsum malesuada Fusce ante posuere molestie tortor neque. viverra iaculis. in ac\n\n556 Elit. in ante ante ligula in consectetur ante orci, volutpat quis,\n\n557 Ipsum faucibus. amet, elit. nunc metus malesuada in primis velit. posuere ante\n\n558 Est ut sit viverra purus in ipsum elit.\n\n559 Ut primis eget orci, Interdum primis hendrerit dui dui sagittis scelerisque Ut pharetra consectetur Interdum\n\n560 Metus ac ligula elit. lorem est ut adipiscing\n\n561 Pretium sagittis sagittis in, condimentum ipsum elit. hendrerit dolor in\n\n562 Semper\nLorem semper et adipiscing purus neque. ipsum\n\n563 Pharetra adipiscing ac sit Mauris iaculis. lorem eget tortor In orci, ante enim\n\n564 Efficitur massa Duis vitae lorem rutrum tortor volutpat primis Interdum primis iaculis. ac semper elit.\n\n565 Et vitae viverra vel et tincidunt. pretium Vivamus dolor Sed adipiscing hendrerit et sit ac\n\n566 Enim volutpat tincidunt. orci, orci elit. volutpat bibendum, ligula\n\n567 Amet, neque. finibus sem. sagittis elit. molestie ante In\nLorem massa neque. sagittis primis\n\n568 Ut enim ac dolor aliquam\n\n569 Ut iaculis. metus Ut in Vivamus\n\n570 Ante nec felis. ut in Duis tortor elit. eget Fusce In in, in, ligula\n\n571 Ac ligula finibus pharetra vel Sed\n\n572 Rutrum in eget Duis vel Ut\n\n573 Sagittis ac purus ut metus tincidunt. hendrerit\n\n574 Sit ipsum libero consectetur sit nunc sit sem. hendrerit ante efficitur Sed dui\n\n575 In finibus lorem finibus Duis malesuada fringilla sem. et\n\n576 Consectetur malesuada libero elit. ut Ut semper malesuada semper iaculis. ante Integer\n\n577 Eget volutpat libero semper ac primis In Fusce felis. ac felis. enim tincidunt. molestie condimentum\n\n578 Semper. sit finibus adipiscing ante tortor ut adipiscing finibus neque. Vivamus\n\n579 Orci ante aliquam efficitur massa\n\n580 Hendrerit massa, ipsum ut sit\nLorem nec neque. eget\n\n581 Iaculis. Interdum Ut in, dui ipsum\n\n582 In ipsum massa, Mauris Fusce\n\n583 Fusce adipiscing in ac metus condimentum metus orci adipiscing ut\n\n584 Lorem in iaculis. in fringilla neque. elementum\n\n585 Orci, in rutrum dolor hendrerit sit Vivamus ac condimentum Vivamus\n\n586 In massa, metus ipsum faucibus. et\n\n587 Ac ac malesuada volutpat ipsum dolor enim efficitur ipsum Fusce ut libero\n\n588 Neque. semper malesuada tortor pretium aliquam vitae\n\n589 Nec efficitur molestie nunc vitae eget molestie enim adipiscing ac faucibus. pretium\n\n590 In scelerisque quis, ante ac semper.\n\n591 Pretium Ut adipiscing pharetra fames ipsum metus vitae sit molestie fames\n\n592 Dui molestie ac ac ac purus est scelerisque sem. et Integer sem. aliquam elit. neque.\n\n593 Eget pretium iaculis. vitae dolor in eget Sed in aliquam nec\n\n594 Elit.\nLorem efficitur ac ante Interdum nec nunc Duis bibendum, vel consectetur sagittis consectetur\n\n595 Massa, finibus massa malesuada pretium eget in malesuada eget\n\n596 Condimentum et massa Mauris metus molestie\n\n597 Tortor vitae purus ut ut Duis posuere\nLorem ante et dolor In Ut\n\n598 Sit volutpat amet, enim posuere tincidunt. in ac nec\n\n599 Elit. primis vel vitae aliquam neque. ac et purus ipsum elit. et vitae elementum finibus\n\n600 Duis pharetra primis ante lorem volutpat ac massa,\n\n601 Bibendum, neque. ipsum scelerisque nunc tortor lorem tincidunt. ante elementum molestie nunc\n\n602 Ac Integer ac efficitur Duis metus posuere velit. in,\n\n603 Et posuere pretium iaculis. ante massa dui elit. aliquam Mauris ut hendrerit et et\n\n604 Ante\nLorem adipiscing ut ante\n\n605 Aliquam et in, vel semper ante est faucibus. Duis\n\n606 Metus in eget Interdum ante condimentum tortor tincidunt. fames ante in in dolor\n\n607 Et aliquam tortor fames velit. primis elit. iaculis. efficitur volutpat nec ac orci elementum\n\n608 Integer pharetra massa enim consectetur libero bibendum, ante sem. elit. dui\n\n609 Elit. scelerisque et ante tortor ac massa est consectetur dolor pharetra in pharetra ligula\n\n610 In, vel ante orci quis, ante et efficitur lorem finibus sem. semper.\n\n611 Condimentum ac nunc vitae Integer efficitur condimentum ipsum semper. sit\n\n612 Ac orci massa massa, tincidunt. adipiscing pretium libero nec volutpat ipsum est amet, pharetra in\n\n613 Et consectetur ante Duis ante ante eget\n\n614 Elit. amet, ac ipsum dolor amet, purus scelerisque ac elementum elementum viverra\n\n615 Eget\nLorem vitae ante adipiscing et\n\n616 Semper. fames elit. Integer semper. massa, orci Interdum orci ante bibendum, consectetur\n\n617 Hendrerit ante molestie lorem ac elementum elementum Duis massa est eget malesuada\n\n618 Massa sagittis Sed dui aliquam\n\n619 Ante elit. in fames ut eget Duis elementum\n\n620 Libero nunc in nunc ipsum tortor orci in enim efficitur malesuada ante semper Fusce ac\n\n621 Scelerisque\nLorem Mauris tincidunt. efficitur\nLorem Sed ac\n\n622 Est fames eget consectetur ac\n\n623 Primis hendrerit semper. ac vel neque. In consectetur posuere dui consectetur ac ipsum\n\n624 Ut hendrerit eget Vivamus molestie\n\n625 Condimentum Ut et ante pretium amet, ac lorem scelerisque ante nunc volutpat\n\n626 Fringilla dolor ipsum in eget In metus\n\n627 Faucibus. tortor vel In Vivamus faucibus. rutrum libero in efficitur est viverra vel malesuada semper.\n\n628 Fames ut velit. ac\nLorem\n\n629 Nunc pharetra primis Integer sit Interdum tortor\n\n630 Nec massa, viverra ut bibendum, ut\n\n631 Sit faucibus. sagittis ante semper.\n\n632 Fringilla hendrerit pretium vitae pretium libero ut pharetra semper elit. condimentum\nLorem\n\n633 Pretium lorem ante tortor In ipsum aliquam finibus scelerisque\n\n634 Ligula ac ut dui ante pretium tincidunt. quis, volutpat efficitur ac scelerisque\n\n635 Ante purus ac orci, efficitur amet, elit. amet,\n\n636 Faucibus. amet, ut primis in Duis lorem libero malesuada velit. efficitur\n\n637 Elit. malesuada iaculis. ipsum efficitur In ligula ac eget hendrerit posuere\n\n638 Finibus est consectetur semper. purus libero Fusce orci, velit. condimentum condimentum condimentum semper primis\n\n639 Est lorem orci, elit. velit. metus in ante molestie faucibus.\n\n640 Primis est est pharetra eget pretium purus felis. ipsum faucibus. velit. Duis condimentum rutrum\n\n641 Mauris libero Integer malesuada sit velit. ante Ut fames condimentum\n\n642 Sagittis Interdum in, in, vitae\n\n643 Integer tincidunt. ac Duis Integer In metus iaculis. et\n\n644 Fames efficitur orci velit. pharetra viverra faucibus. ipsum et Mauris semper dolor ut\n\n645 Et eget dolor felis. in molestie rutrum volutpat Mauris In finibus bibendum,\n\n646 Mauris Mauris scelerisque metus consectetur enim consectetur sagittis sagittis In tortor neque. neque.\n\n647 Primis eget sem. purus enim iaculis. consectetur\n\n648 Est rutrum primis fringilla elementum Fusce Fusce faucibus. velit. sagittis massa est\n\n649 Elementum dolor massa, et semper consectetur fringilla purus eget Fusce efficitur enim\nLorem molestie\n\n650 Condimentum nec fringilla ac elit. Ut velit. malesuada hendrerit finibus ante\n\n651 Fringilla bibendum, finibus In vitae sagittis vitae sagittis ante\n\n652 Elit. metus libero ipsum consectetur elementum\n\n653 Condimentum massa, fames ipsum primis Vivamus\n\n654 Orci, massa In efficitur ipsum malesuada\n\n655 Efficitur semper. eget sem. nunc iaculis. Fusce eget fringilla fringilla ac felis. ante in\n\n656 Vel enim sit ac in Duis velit. efficitur efficitur aliquam ipsum et Duis\n\n657 Ante sagittis lorem elit. orci, Vivamus\n\n658 Ut dui sit ac in elementum neque. efficitur ac posuere massa enim efficitur\n\n659 Fames elementum est ipsum ac lorem felis.\n\n660 Iaculis. nunc sem. in vitae ut bibendum,\n\n661 Vel Interdum Duis velit. purus ipsum ipsum Duis efficitur in, ut sagittis massa ante sem.\n\n662 Mauris Duis lorem Mauris faucibus. quis, nunc hendrerit Interdum elit. ante Vivamus sagittis elementum\n\n663 Ipsum sit quis, dui Mauris hendrerit fames nunc ut\nLorem\n\n664 Libero massa, metus ipsum ac finibus ipsum nunc Fusce massa aliquam dui et\n\n665 Pharetra viverra in Integer quis, ac\n\n666 Consectetur vel Mauris ut ligula tortor\n\n667 Vitae vel condimentum viverra hendrerit In fringilla pretium posuere tincidunt. vel lorem vel Interdum\n\n668 Ante Mauris ut sem. Fusce ac consectetur dui Interdum bibendum, ut\n\n669 Sem. scelerisque ac ac nec\n\n670 Semper ut vel Ut purus scelerisque orci, semper malesuada In faucibus. dui\n\n671 Massa purus sit Sed nec felis. enim fames nunc elementum adipiscing amet, vel\n\n672 Ac fames ut ac ut orci, Sed Vivamus elementum vitae enim Fusce\n\n673 Efficitur in semper. Integer Sed\n\n674 Ac malesuada ut lorem finibus Ut Ut massa sem.\n\n675 Consectetur massa efficitur semper volutpat elementum in\nLorem et\n\n676 Ante finibus nunc condimentum volutpat vitae Ut\n\n677 Est velit. ac et metus posuere est consectetur vel orci, aliquam\n\n678 Purus semper sem. in ante Integer massa iaculis. viverra ante hendrerit sagittis posuere in\n\n679 Tortor in ac neque. lorem efficitur ac ipsum In\n\n680 Eget eget scelerisque pharetra Integer efficitur dolor elit.\n\n681 Fusce viverra elit. ac sagittis ligula lorem in\n\n682 Lorem elit. scelerisque eget elit. bibendum, neque.\n\n683 In viverra massa enim ac elit. Duis vel quis, iaculis.\n\n684 Ut ante hendrerit sagittis ipsum enim aliquam semper. Fusce elit. enim vitae finibus\n\n685 Metus sit in primis adipiscing\nLorem Interdum ante Interdum amet, et Integer ut amet, elit.\n\n686 Sem. et eget lorem primis ligula vel quis, sem. primis dolor vitae efficitur eget Interdum\n\n687 Libero molestie in Sed ante ac ante semper ante efficitur viverra elit. posuere orci velit.\n\n688 Orci, pharetra neque. sagittis ut sit ac tortor ac\n\n689 Orci amet, rutrum viverra fringilla fames ligula\n\n690 Ante Interdum amet, ut ac ac et velit. et condimentum ac nec et ac massa,\n\n691 Ac quis, efficitur semper hendrerit in ipsum eget et viverra\n\n692 Consectetur consectetur fringilla ligula est\n\n693 Est tortor massa massa amet, ante semper ac vitae in\n\n694 Bibendum, iaculis. ante vel metus fames felis. ligula tincidunt. sit Sed fames\n\n695 Consectetur condimentum elementum dolor est primis Integer Sed\n\n696 Finibus Fusce eget ligula in sit purus velit. neque.\n\n697 Eget dolor elementum in dui tortor massa, tincidunt. sem. ac ut consectetur nec bibendum,\n\n698 Nunc in dolor enim est volutpat vitae Fusce Integer Integer bibendum, ac ante efficitur aliquam\n\n699 Ut enim tortor Fusce elit. In ante vitae vitae adipiscing\n\n700 Vivamus ante massa et metus elit. semper\n\n701 Elementum elit. Interdum eget Duis orci, metus Fusce sit eget consectetur\n\n702 Dolor hendrerit Interdum pharetra vitae\n\n703 Sem. ante Vivamus Fusce elementum tortor orci viverra neque. metus metus elit.\n\n704 Condimentum sagittis felis. vitae molestie sagittis ante tortor ut tortor ac\n\n705 Eget ante pretium dolor Integer\nLorem neque. molestie felis. pretium ac ante hendrerit ligula semper\n\n706 Posuere malesuada efficitur primis vitae iaculis. consectetur consectetur nec\n\n707 Rutrum elit. in massa, efficitur Interdum vitae ut ligula\n\n708 Consectetur eget elit. vel in scelerisque elit. orci ipsum\n\n709 Elementum ac Sed quis, efficitur enim nunc\n\n710 Nec sem. pretium volutpat vitae Sed nunc\n\n711 Efficitur Mauris Ut iaculis. consectetur orci, tortor et Interdum\n\n712 Ante fames scelerisque Sed vel metus\n\n713 Fusce finibus eget posuere consectetur semper massa, ut\n\n714 In metus Ut\nLorem hendrerit bibendum, rutrum adipiscing consectetur fames ipsum Fusce\n\n715 Semper neque. ante iaculis. purus Mauris et\n\n716 In In enim felis. ac ac pharetra tincidunt.\n\n717 Velit. eget condimentum Integer\nLorem rutrum semper in\n\n718 Tincidunt. elit. vitae sit dui efficitur dui\n\n719 Ac adipiscing velit. elementum bibendum, elementum consectetur iaculis. malesuada malesuada Sed ante sit finibus quis,\n\n720 Efficitur amet, dui ut bibendum, libero Sed purus\n\n721 Elit. ante semper. fames scelerisque dui adipiscing vitae eget ipsum condimentum\n\n722 Ante sit sem. et consectetur ante\n\n723 Amet, Interdum rutrum Fusce Fusce hendrerit\n\n724 Vitae condimentum pharetra Ut elit. tortor\n\n725 Et condimentum eget lorem eget sem.\n\n726 Vivamus efficitur ac hendrerit nec Ut In massa, velit. semper. condimentum in\n\n727 Purus pretium in, orci ac adipiscing eget et malesuada tortor tincidunt. efficitur condimentum eget\n\n728 Tortor in, lorem elit. in, eget ac tincidunt.\n\n729 Duis in dolor in, rutrum ante\n\n730 Sed tortor efficitur est velit. ut Interdum ipsum nunc volutpat scelerisque neque.\n\n731 Vitae rutrum pharetra sit tortor\n\n732 Consectetur pretium Duis purus bibendum, ac iaculis. hendrerit elementum nunc tincidunt. Sed semper semper.\n\n733 Massa, et Sed\nLorem enim ante hendrerit viverra\n\n734 Consectetur ut felis. sagittis libero vitae Sed quis, et\n\n735 Viverra iaculis. Mauris finibus metus vel dolor ac sem. ante Fusce orci ipsum metus\n\n736 Ipsum efficitur pharetra quis, ipsum\n\n737 Amet, viverra in ac vel vel nec elit. Ut nec\n\n738\nLorem orci, massa, ac orci in,\n\n739 Nec semper. orci, elementum eget in orci, Ut orci\n\n740 Primis primis iaculis. molestie molestie\n\n741 Ac dui in in purus malesuada\n\n742 Vitae purus enim ac rutrum ac ac nunc vitae\n\n743 Pharetra felis. felis. In Interdum nunc vel rutrum elit. Integer\n\n744 Posuere felis. In Mauris massa, scelerisque iaculis. aliquam orci, libero sagittis velit. scelerisque posuere tortor\n\n745 Dolor Interdum semper ut bibendum,\n\n746 Lorem\nLorem Mauris orci ac ipsum\nLorem nec orci\n\n747 Ac felis. aliquam lorem libero in, ac efficitur\n\n748 Dolor Sed ut felis. ante ante sem. tincidunt.\n\n749 Fringilla et Sed primis vel eget pharetra nec aliquam semper ipsum elementum et\nLorem Mauris\n\n750 Hendrerit faucibus. ac dui ac ac sagittis\n\n751 Molestie ante scelerisque ut amet, metus pharetra efficitur posuere Mauris ac felis.\n\n752 Velit. adipiscing consectetur aliquam condimentum\n\n753 Primis consectetur neque. et ac in pharetra fringilla Ut pretium ante faucibus.\n\n754 Sem. ac pharetra fames eget dolor tortor rutrum in\n\n755 Viverra felis. sit et metus\n\n756 Ante fames tincidunt. condimentum ac eget iaculis. semper lorem Fusce ante viverra ligula\n\n757 Hendrerit ac elit. rutrum rutrum pharetra in quis, et In rutrum Vivamus pharetra efficitur dui\n\n758 Est sit Ut viverra massa neque. Duis felis.\n\n759 Fringilla finibus eget neque. molestie Ut efficitur Vivamus\n\n760 Dui in tortor massa Interdum hendrerit Integer ipsum nunc ac libero\n\n761 Volutpat ipsum malesuada lorem felis. efficitur malesuada elementum felis. sagittis amet, malesuada fringilla\n\n762 Ligula faucibus. Fusce ipsum finibus orci, tincidunt. in purus sit Duis\n\n763 Felis. Fusce faucibus. sit orci, elit. condimentum tincidunt. consectetur sit ut ac tincidunt.\n\n764 Enim ac eget et vel dolor in tortor finibus in, molestie massa\n\n765 Hendrerit pretium ante est faucibus. Integer nec adipiscing tortor eget\n\n766 Tincidunt. massa, in, malesuada efficitur\n\n767 Metus est Integer amet, fames\n\n768 Efficitur ut eget vitae efficitur molestie eget ac felis.\n\n769 Tincidunt. semper. ut primis bibendum, tortor pharetra libero ac molestie efficitur ante\n\n770 Dolor malesuada elit. enim consectetur\nLorem orci, efficitur tortor viverra elit. pharetra ut\n\n771 Vitae finibus adipiscing velit. faucibus. purus malesuada eget elit. fames hendrerit finibus metus Sed\n\n772 Dolor est Mauris malesuada libero sem. ac hendrerit ac malesuada primis efficitur\n\n773 Ut libero fames ligula dolor neque. scelerisque volutpat pretium dolor purus hendrerit\n\n774 Sed bibendum, ut purus posuere massa fames in\n\n775 Velit. Duis bibendum, lorem scelerisque amet, pretium\n\n776 Fusce felis. semper. in eget volutpat amet,\n\n777 Vel malesuada et Interdum metus Sed in sagittis felis. sem. faucibus. Fusce viverra Interdum\nLorem\n\n778 Condimentum in elit. amet, In tincidunt. hendrerit orci amet,\n\n779 Vel aliquam orci, orci, In In lorem massa, sagittis fringilla eget ut primis elit. tortor\n\n780 Purus elit. metus tincidunt. fringilla eget elementum\n\n781 Semper. est In elementum quis, dolor Integer purus\n\n782 Interdum libero sit\nLorem velit. elementum eget rutrum efficitur in bibendum, ipsum semper\n\n783 Ante sit in enim fringilla ut vel Mauris iaculis. molestie aliquam dolor nunc sem.\n\n784 Bibendum, enim Ut finibus orci, tortor hendrerit faucibus. eget consectetur tortor Ut\n\n785 Libero ut in condimentum hendrerit viverra massa, Fusce velit. efficitur\n\n786 Fringilla metus ante finibus metus in vel Mauris ac massa, pretium ante\n\n787 Rutrum vitae massa, Sed ut faucibus. In et\n\n788 Malesuada viverra condimentum ac consectetur\n\n789 Fringilla ipsum condimentum Interdum orci, sem. eget primis ante sit ipsum semper.\n\n790 Finibus ante fringilla semper. Fusce nec faucibus. enim ac semper. molestie adipiscing hendrerit\n\n791 Sed Fusce tortor purus consectetur velit. ipsum ac orci dui\n\n792 Nunc vel In efficitur orci, eget ut\n\n793 Dolor condimentum condimentum ante massa ac sit faucibus. in ac ante\n\n794 Sagittis velit. lorem enim Sed dolor viverra\n\n795 Pretium vitae nunc Fusce Sed consectetur Mauris in orci efficitur sem. semper purus\n\n796 Bibendum, metus consectetur Duis sem. iaculis. elit. In Integer Mauris ligula\n\n797 Vivamus In malesuada elementum ac ante\n\n798 Velit. ac viverra neque. ac viverra\n\n799 Ante pharetra lorem dui aliquam vitae Duis ante ac\n\n800 Dui elit. massa, semper ipsum et pretium sem. Ut\n\n801 Semper. Sed massa elit. pretium malesuada aliquam Integer consectetur neque. pharetra\n\n802 Purus semper orci in, et\n\n803 Sit dui Integer eget volutpat faucibus. quis, sit finibus adipiscing Mauris ac amet, fringilla\n\n804 Ligula primis viverra Sed ante ac in,\n\n805 Ac vitae sagittis pharetra ut ut elit. molestie ut\n\n806 Est Vivamus Fusce condimentum in bibendum, bibendum,\n\n807 Felis. Vivamus in finibus faucibus. malesuada ligula\n\n808 Metus sem. Mauris tincidunt. scelerisque amet, Mauris\nLorem finibus scelerisque\n\n809 Lorem metus ante ac iaculis. iaculis.\n\n810 Et finibus hendrerit\nLorem adipiscing sit efficitur fames posuere nec tortor aliquam quis, finibus ante\n\n811 In consectetur quis, quis, sem.\n\n812 Viverra quis, tortor molestie ante est rutrum tincidunt. libero posuere sagittis amet, sem. fringilla ante\n\n813 Nec Sed rutrum fames primis ante elit. ante enim massa, pharetra ligula ligula\n\n814 Libero dui condimentum vitae molestie ipsum Vivamus felis. condimentum In hendrerit Fusce lorem consectetur consectetur\n\n815 Ut fames volutpat enim ut\nLorem In ante primis metus felis. scelerisque volutpat et\n\n816 Libero semper. Mauris malesuada semper Vivamus pharetra lorem orci aliquam pharetra\n\n817 Condimentum ac ac enim bibendum, Ut consectetur sagittis\n\n818 Faucibus. ipsum in, massa in, enim felis. elit. ipsum velit. tincidunt. ante nunc fringilla amet,\n\n819 Et Sed et libero ac\n\n820 Purus ipsum In in, primis\n\n821 Lorem ipsum et condimentum semper. ut Sed felis. massa, ac\n\n822 Ac ante et hendrerit finibus purus molestie viverra massa\n\n823 Faucibus. faucibus. libero Integer molestie eget nunc Fusce efficitur viverra pretium tortor in et\n\n824 Purus quis, sem. nunc ante vel ac in hendrerit primis\n\n825 Ac orci purus nunc In\n\n826 Libero Interdum Duis faucibus. Interdum neque. Ut tortor finibus in ante ut purus\n\n827 Neque. viverra nec nec dolor ipsum nunc orci, In sagittis ante dolor tincidunt.\n\n828 Malesuada malesuada libero Interdum ac iaculis. Interdum posuere libero\n\n829 Quis, amet, purus In amet, primis ipsum in, iaculis. velit. sagittis ipsum finibus Integer hendrerit\n\n830 Sem. sagittis pharetra lorem ante condimentum orci\n\n831 Malesuada finibus purus massa ligula in Integer Ut sagittis ligula eget scelerisque efficitur dolor\n\n832 Metus et neque. consectetur pretium semper neque. velit. hendrerit\n\n833 Ac semper. adipiscing faucibus. Ut nec Sed lorem pharetra condimentum ac semper\n\n834 Condimentum massa Mauris hendrerit ante quis, ipsum Sed et ac rutrum finibus\n\n835 Amet, adipiscing In eget in Vivamus primis vel vel purus posuere ac velit. volutpat consectetur\n\n836 Orci, Integer fames Vivamus Integer condimentum finibus neque. ut pharetra\n\n837 Ante vitae ipsum consectetur ipsum\n\n838 In, sagittis tincidunt. in, Interdum ac ac fames pharetra ac adipiscing hendrerit\n\n839 Semper. ante ac iaculis. orci, metus\n\n840 Ac dolor volutpat dolor vel ipsum bibendum, Duis ante pharetra semper. velit. libero\n\n841 Ut fames posuere orci ac ut primis finibus\n\n842 Faucibus. Mauris sagittis bibendum, volutpat Fusce Integer semper. malesuada scelerisque semper. pretium\n\n843 Ac nunc finibus scelerisque fames est in eget\n\n844 Vivamus\nLorem volutpat nunc fringilla elit.\n\n845 Molestie Mauris orci, velit. et massa bibendum, vel ante libero libero ante consectetur molestie\n\n846 In ut velit. tortor efficitur elementum sagittis\n\n847 Posuere adipiscing nec ac vitae rutrum eget tincidunt.\n\n848 Ante elit. ac ipsum ut condimentum metus massa massa, volutpat\n\n849 Pharetra efficitur ut condimentum et sem. condimentum aliquam consectetur condimentum Ut\n\n850 Eget in Interdum libero in fringilla dui sagittis elit.\n\n851 Elementum velit. ante in hendrerit in, condimentum et consectetur felis.\n\n852 Ut in dolor efficitur Duis bibendum,\n\n853 Viverra faucibus. enim bibendum, Sed in in, sit ante Interdum ante\n\n854 Fringilla ante vel Duis sit ante consectetur et eget in elit. rutrum fringilla elit.\n\n855 Hendrerit tincidunt. ipsum adipiscing vel ac vel sagittis\n\n856 Vel libero ac fringilla faucibus. primis sagittis sagittis fames nec\n\n857 Rutrum et molestie Interdum fames Integer velit. semper. viverra\n\n858 Orci ac elit. Vivamus rutrum\n\n859 Ac neque. ac nec tincidunt.\n\n860 Ipsum fames vitae ut fames ut fringilla sem. est fames bibendum, nec pharetra massa,\n\n861 Et nec finibus condimentum purus primis neque. finibus Sed est fames eget\n\n862 Ac Ut Duis ac elit. Fusce ante fames posuere Mauris Sed\n\n863 Dui vel bibendum, bibendum, ac semper molestie aliquam sit massa primis neque.\n\n864 Posuere semper. sem. enim viverra sem. primis ac quis,\n\n865 Sagittis ac orci aliquam ac bibendum, Sed scelerisque est neque. In\n\n866 Scelerisque ante lorem ut ante est in, finibus primis efficitur ante quis,\n\n867 Sagittis elit. elit. felis. in, ac ligula ipsum eget bibendum, pharetra pretium\n\n868 Fusce nec elit. lorem lorem lorem orci, In finibus sit\n\n869 Efficitur Duis ligula rutrum semper. semper. ante ipsum Interdum malesuada elit. massa,\n\n870 Interdum ante et posuere scelerisque condimentum\n\n871 Elit. nec amet, faucibus. iaculis. nunc libero neque. nunc in faucibus. viverra semper. fames\n\n872 Amet, quis, ac efficitur Duis\n\n873 Ac Mauris nunc semper iaculis.\n\n874 Metus Ut enim pharetra Ut Mauris enim est ipsum et\n\n875 Tincidunt. est finibus in ac metus in, velit. elit. tortor pretium bibendum, quis,\n\n876 Ipsum quis, et molestie ac purus ac ac ac Integer est\n\n877 Integer Mauris ac ac vitae in, semper quis, fames vel in, felis. in vitae nec\n\n878 Vivamus nunc lorem dolor elementum elementum velit. scelerisque elementum enim velit. orci rutrum neque.\n\n879 Bibendum, semper. orci fames in, ligula eget fames ante consectetur in condimentum tortor semper. adipiscing\n\n880 Scelerisque\nLorem consectetur libero bibendum, elit. ut sagittis Duis efficitur pretium tortor consectetur\n\n881 Ac ac ac ipsum Ut efficitur efficitur\n\n882 Vivamus semper. pretium Interdum volutpat\n\n883 Est pharetra ac Integer semper quis,\n\n884 Efficitur lorem et semper ante scelerisque tincidunt. consectetur sit et orci, ligula viverra viverra Sed\n\n885 Hendrerit in elementum ac volutpat\n\n886 Est ligula Sed condimentum metus libero nunc ante malesuada\n\n887 Bibendum, velit. sagittis In sit dolor tortor hendrerit in eget primis elit. in\n\n888 Eget volutpat Interdum purus est fringilla consectetur vel massa viverra\n\n889 Purus iaculis. ac dui tincidunt. et ante\n\n890 Pretium dui sem. viverra ipsum\n\n891 Finibus ut ac neque. hendrerit tincidunt.\n\n892 Pharetra consectetur ac ut tortor massa, purus\n\n893 Enim bibendum, elit. metus semper\n\n894 Efficitur efficitur quis, nec hendrerit orci nec adipiscing In bibendum,\nLorem\n\n895 Massa, pharetra efficitur sagittis\nLorem lorem\n\n896 Iaculis. ac ipsum finibus primis ac orci ac condimentum in, aliquam\n\n897 Sed rutrum est finibus metus bibendum, tortor quis, ac Interdum ante\n\n898 Sed semper semper. dolor metus\n\n899 In ligula ipsum dolor pretium elit. orci enim dui ut ac\n\n900 Vitae semper elementum fames eget ut dolor malesuada Sed amet,\n\n901 Felis. bibendum, adipiscing et in ut fringilla ante faucibus. semper\n\n902 Vitae volutpat hendrerit elit. consectetur ante ante tincidunt. Mauris sagittis fringilla ac\nLorem ac\n\n903 Sagittis et pharetra vitae sem. fames ipsum aliquam efficitur tincidunt.\n\n904 Sit rutrum Ut adipiscing scelerisque efficitur primis orci, Mauris Interdum enim in elit.\n\n905 Tortor sem. dolor ac in\n\n906 Tincidunt. neque. posuere ut consectetur in ante orci,\n\n907 Felis. viverra bibendum, scelerisque est Ut tortor\n\n908 Ac in Fusce ut elit. tincidunt.\n\n909 Vivamus viverra primis finibus fames nunc consectetur semper efficitur aliquam volutpat\n\n910 Interdum et iaculis. vel condimentum efficitur finibus ante Mauris dui\n\n911 Fusce ligula ut nunc efficitur est ac in, iaculis. Duis in aliquam nec\n\n912 Aliquam malesuada ut fames nunc\n\n913 Pharetra ac primis libero orci vel volutpat hendrerit fringilla iaculis. Ut quis, molestie\n\n914 Ut faucibus. quis, et semper tincidunt. in in ac ipsum\n\n915 Ac orci in Ut et bibendum, semper. volutpat in, Sed in, primis Fusce faucibus. molestie\n\n916 Tincidunt. in semper. molestie ac sit In Mauris ante ut dolor\n\n917 Sagittis efficitur ligula Duis\nLorem pharetra libero quis, semper posuere fames molestie\n\n918 Ligula sagittis elit. ac iaculis. in amet, Interdum sem. eget condimentum in\n\n919 Bibendum, ac scelerisque in, bibendum, consectetur\nLorem orci, fringilla ante faucibus.\n\n920 Integer iaculis. Mauris sit pretium efficitur Ut iaculis. in rutrum neque. in elit. metus Vivamus\n\n921 Elit. finibus dui libero ante vel felis.\n\n922 Vivamus ac neque. Interdum ac pretium tincidunt. ipsum in\n\n923 Vitae Mauris ac tortor in semper\n\n924 Aliquam lorem posuere in, sem. Vivamus ante\n\n925 Nunc bibendum, Duis In pretium aliquam consectetur iaculis. orci, orci, ipsum quis,\n\n926 Fames scelerisque ipsum ac ut Mauris tincidunt. pharetra in eget\n\n927 Ipsum ante fames Fusce elit. et orci\n\n928 Vitae quis, elit. ac Fusce tincidunt.\n\n929 In dui efficitur neque. elit. nec et fames fames Mauris quis, tortor dolor\n\n930 Felis. velit. Mauris ut faucibus. nunc velit. nunc Interdum eget ac\n\n931 Libero nec enim Mauris ipsum purus libero Vivamus vitae fringilla ut bibendum, Interdum tortor semper.\n\n932 Hendrerit elit.\nLorem Mauris pretium ac felis. ante ante eget\n\n933 Dui massa ac ut metus in pretium rutrum ante ac tortor\n\n934 Eget amet, ante fringilla ligula aliquam adipiscing Integer sem. in eget in hendrerit\n\n935 Finibus eget quis, neque. ante hendrerit ante tortor vitae purus Sed felis. ante pharetra\n\n936 Fames Duis sit ante ac Fusce Vivamus scelerisque sem. iaculis. condimentum ligula Duis felis. consectetur\n\n937 Fusce semper. volutpat consectetur fames finibus adipiscing fringilla\n\n938 Quis, enim primis condimentum ipsum molestie volutpat ac primis pharetra consectetur molestie\n\n939 Vivamus nec hendrerit malesuada ut aliquam eget viverra volutpat dolor fames consectetur elementum\n\n940 Amet, orci, metus Mauris ipsum ante Sed Ut\n\n941 Finibus sem. purus Integer ante elementum hendrerit efficitur efficitur ipsum orci\n\n942 Nunc et nunc nec ipsum pharetra eget sit bibendum,\n\n943 Et semper. ac condimentum malesuada\n\n944 Efficitur nunc adipiscing pharetra consectetur In faucibus. semper. metus\n\n945 Orci, elementum molestie elementum elementum\n\n946 Volutpat ac vel in, tortor in in, elit. elit.\n\n947 Fusce aliquam in viverra sagittis vel eget neque. Mauris adipiscing consectetur condimentum ipsum neque. purus\n\n948 Ac quis, faucibus. tortor dolor\n\n949 Viverra Fusce ante Sed Integer massa ut volutpat iaculis. massa, tincidunt.\n\n950 Amet, vel Fusce Duis fringilla volutpat tortor libero est tortor iaculis.\n\n951 Et sagittis rutrum in lorem elit.\nLorem tortor ante volutpat fringilla consectetur felis. ut purus\n\n952 Ut ligula et in et finibus scelerisque tincidunt. consectetur dui viverra pretium\n\n953 Primis et rutrum metus finibus adipiscing Ut Fusce posuere est et\n\n954 Interdum sagittis Integer felis. purus Mauris ante in et Interdum viverra nunc et vel amet,\n\n955 Rutrum\nLorem metus tincidunt. massa, efficitur In efficitur scelerisque Sed faucibus. neque. ligula ac\n\n956 Est elit. in massa, neque. Interdum eget Sed condimentum\n\n957 Sagittis quis, dolor quis, posuere ipsum\n\n958 Pharetra scelerisque pharetra orci fames scelerisque Interdum elit. quis, vitae Sed massa,\n\n959 Malesuada ante ante ut adipiscing tincidunt. scelerisque dui nec ac scelerisque ac viverra faucibus.\n\n960 Volutpat aliquam viverra massa ligula consectetur In massa, ac ante fames semper elit. posuere quis,\n\n961 Orci, quis, libero semper massa ligula ante felis.\n\n962 Ante pharetra iaculis. tortor Mauris viverra pharetra iaculis. neque. finibus est neque. dolor enim elit.\n\n963 Malesuada sem. hendrerit pretium Duis primis posuere vitae massa, nunc in, efficitur in\nLorem\n\n964 Ipsum Interdum Mauris purus bibendum, sit in ac fringilla volutpat metus ante\n\n965 Efficitur malesuada pharetra efficitur finibus sit ac in pharetra pretium ac scelerisque vel\n\n966 Consectetur efficitur est In libero quis, ac ut adipiscing\n\n967\nLorem in tincidunt. amet, molestie\n\n968 Adipiscing nec ac ligula fringilla In et finibus eget purus primis Integer\n\n969 Tincidunt. orci libero nunc vel elit. scelerisque in, orci, eget faucibus. ipsum iaculis. ac finibus\n\n970 In purus faucibus. orci, sagittis posuere Interdum hendrerit metus fames faucibus. felis.\n\n971 Ac ipsum ac volutpat fringilla finibus vitae et tincidunt. Vivamus Interdum pretium massa\n\n972 Iaculis. In efficitur malesuada Sed tincidunt. ipsum ac ac massa\n\n973 Pharetra vitae in, in sagittis scelerisque ac\n\n974 Fusce ante iaculis. In ac\n\n975 Posuere et Vivamus molestie nunc sagittis dolor ac bibendum, ante Interdum\n\n976 Elementum amet, massa ante Ut in purus dui tincidunt. bibendum, Mauris Duis dui et neque.\n\n977 Metus ipsum adipiscing purus orci condimentum ante Sed pharetra orci, iaculis.\n\n978 Bibendum, velit. orci, tincidunt. in, rutrum Duis adipiscing tincidunt. ut volutpat purus et efficitur\n\n979 In et ac rutrum In consectetur sem.\n\n980 Vitae ante In orci elit. finibus enim hendrerit pharetra\n\n981 Iaculis. ipsum ac Mauris fames ligula in condimentum neque. fames fringilla posuere faucibus. ipsum\n\n982 Adipiscing massa, ante consectetur viverra in primis Mauris\n\n983 Ut fames sem. volutpat tincidunt.\n\n984 Viverra enim ut Fusce Fusce vel eget\n\n985 Semper ligula felis. Vivamus Vivamus Fusce ac Sed dui tortor ante nec adipiscing\n\n986 Ipsum sit Integer Mauris ut molestie viverra sagittis amet,\n\n987 Sagittis malesuada fames hendrerit Mauris in fringilla est molestie quis, posuere\n\n988 Ac tortor elit. dui primis sit consectetur\nLorem Ut orci, elit. pretium eget semper\n\n989 Amet, Mauris fringilla Interdum ac ipsum efficitur quis, aliquam iaculis. ac lorem lorem ligula metus\n\n990 Ante faucibus. Duis tincidunt. Interdum fames nec\n\n991 Fringilla rutrum adipiscing eget eget orci, et adipiscing dui\n\n992 Ac ac volutpat vel orci elit. in\nLorem\n\n993 Sed nec vel ante orci efficitur scelerisque aliquam purus neque. vel efficitur sem. ut consectetur\n\n994 Felis. finibus consectetur est velit. ac velit. condimentum eget adipiscing\nLorem Vivamus\n\n995 Ligula in finibus et volutpat orci purus efficitur finibus primis\n\n996 Tortor pretium pharetra in dui in fringilla nec semper dui Fusce massa,\n\n997 Primis semper semper efficitur felis. iaculis.\n\n998 Ligula semper. In malesuada rutrum ac Duis ut Duis condimentum\n\n999 Iaculis. Fusce ligula eget elit. vitae Duis vitae ut\n\n1000 Nec ac rutrum in, Mauris volutpat scelerisque orci, in fames ante ut enim Sed\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| aria-label | string | — | Accessible label applied to the dropdown toggle button. |\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| iconName | string | — | Optional rioglyph icon name forwarded to the underlying button toggle. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |",
+    "searchText": "Dropdowns\nDropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.\nDropdowns\nButtonDropdown\nNormal Button\nnoCaret\nDropup\nSplitButton\n\nSplitButton\n\nLarge button\nDefault button\nSmall button\nMini button\n\nDropdown with max-height\nDropdown with dopup\nDropdown with pullRight\nControlled Dropdown\n\nDropdown variants Text dropdown\n\nCustom dropdowns for filter tags Tag dropdown\n\nTag small dropdown\n\nCustom dropdowns for labels Active\n\nActive\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| aria-label | string | — | Accessible label applied to the dropdown toggle button. |\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| iconName | string | — | Optional rioglyph icon name forwarded to the underlying button toggle. |\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| aria-label | string | — | Accessible label applied to the dropdown toggle button. |\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| iconName | string | — | Optional rioglyph icon name forwarded to the underlying button toggle. |\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| aria-label | string | — | Accessible label applied to the dropdown toggle button. |\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| iconName | string | — | Optional rioglyph icon name forwarded to the underlying button toggle. |\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\nID Content Action\n\n1 Semper pharetra fames hendrerit vel libero elit. adipiscing nunc ante eget neque. Mauris eget\n\n2 Pharetra semper pharetra Integer Vivamus sem. vel efficitur tincidunt. In elit. Duis bibendum, pretium\n\n3 Mauris elit. rutrum tincidunt. malesuada semper\n\n4 Sagittis faucibus. rutrum in libero eget viverra consectetur\n\n5 Ante vel ante elit. metus dolor vitae velit. volutpat libero\n\n6 Tincidunt. Vivamus velit. massa ut ac ligula vitae fames\n\n7 Orci, et bibendum, Mauris sagittis metus iaculis. molestie Fusce Fusce lorem ac ut\n\n8 Molestie ante bibendum, eget vitae ac\n\n9 Ipsum iaculis. in in, ipsum massa sagittis Ut ut elit.\n\n10 Quis, consectetur tincidunt. enim semper.\n\n11 Duis efficitur fames scelerisque Ut tincidunt. dolor et in, amet, rutrum iaculis. felis.\n\n12 Mauris Mauris et tortor finibus ac tincidunt. vitae Duis sit iaculis. efficitur libero vitae in\n\n13 Orci, posuere ac molestie hendrerit finibus scelerisque velit.\n\n14 Pharetra ut volutpat est elit. ac dui ac sit semper ante elit. molestie\n\n15 Metus dolor primis ipsum orci aliquam nec ipsum finibus pretium Mauris dolor\n\n16 Sem. orci, ante enim ipsum ac ac\n\n17 Orci, tortor dolor velit. elit. eget Fusce Mauris ac ipsum efficitur\n\n18 Metus semper. fringilla lorem ac sit dolor ipsum iaculis. Ut semper Interdum\n\n19 Purus Integer Ut quis, ante aliquam consectetur orci ante est elit. rutrum In\n\n20 Elementum iaculis. ac elementum condimentum aliquam dolor elit. lorem ut in nec volutpat\n\n21 Fringilla sem. molestie molestie volutpat ante ut libero ante elit. Integer ipsum\n\n22 Vitae est dui orci sagittis rutrum massa,\n\n23 Viverra consectetur semper ac bibendum, est semper Duis tincidunt.\n\n24 Volutpat ac sit Mauris dolor felis. rutrum libero in enim Fusce velit. quis, adipiscing amet,\n\n25 Ac tortor primis ipsum ac adipiscing Fusce\n\n26 Eget nec condimentum consectetur massa, semper ac in\n\n27 Hendrerit vitae quis, et ante ligula ut ante ipsum\n\n28\nLorem vitae felis. neque. neque. ac dolor\n\n29 Enim sagittis purus eget Integer ac\n\n30 Sagittis velit. ac Sed volutpat orci, vitae scelerisque\nLorem fringilla aliquam enim ante\n\n31 Ante ipsum vitae in faucibus. neque. Sed libero massa lorem\nLorem ut orci, ligula libero\n\n32 Efficitur neque.\nLorem in in, est hendrerit condimentum\n\n33 Ligula Fusce metus adipiscing semper dolor ut scelerisque\n\n34 Vivamus elementum fames Ut primis enim Ut metus vitae efficitur Sed tortor in\n\n35 Ac consectetur nec ac Integer dui bibendum,\n\n36 In quis, Fusce consectetur quis, ante purus est Duis sem. malesuada vel\n\n37 Quis, enim malesuada elementum viverra massa sagittis viverra dolor massa rutrum ac viverra nunc\n\n38 Sit viverra rutrum tincidunt. semper. ac lorem ipsum tortor\n\n39 Adipiscing volutpat ante elit. rutrum finibus felis. purus\n\n40 Rutrum ipsum dolor neque. ac semper. ante eget Vivamus ut consectetur\n\n41 Pretium ac metus vitae pretium posuere\n\n42 Semper. ac Fusce ac ante efficitur ante viverra in rutrum consectetur tortor\n\n43 Ante amet, ante ut fringilla rutrum\n\n44 Bibendum, velit. aliquam ut ante amet, aliquam adipiscing pharetra fames orci\n\n45 Ligula rutrum dolor Fusce massa in\n\n46 Aliquam ac dui In et volutpat faucibus. lorem ac felis. quis, massa fringilla massa,\n\n47 Scelerisque est elit. rutrum ac primis dui ut\n\n48 Ante elit. fringilla Mauris eget efficitur efficitur\n\n49 Purus ac eget fringilla ut finibus hendrerit et Integer ipsum elementum lorem\n\n50 Ac et Interdum ut fames nunc efficitur ac quis, quis, libero nunc orci semper.\n\n51 Velit. elit. fringilla neque. faucibus. hendrerit\n\n52 Neque. efficitur elit. enim orci Interdum\n\n53 Molestie aliquam Ut molestie metus in tortor fringilla in posuere condimentum in in ut\n\n54 Est ligula condimentum ut adipiscing Mauris\n\n55 Sagittis nunc massa vitae ipsum volutpat aliquam viverra et efficitur faucibus. metus\n\n56 Orci ante hendrerit Mauris ut Ut massa tortor semper fringilla elit.\n\n57 Dolor elit. dolor posuere aliquam In\n\n58 Duis et elit. ipsum ante consectetur efficitur rutrum\n\n59 Orci adipiscing massa amet, orci faucibus. ligula\n\n60 Tortor ac ipsum ut\nLorem dolor ac ut Vivamus vel nunc dui in malesuada\n\n61 Et semper ut Fusce amet, condimentum ac dui eget quis, est metus ipsum ipsum\n\n62 Et efficitur ligula ut ante enim\n\n63 Orci, Duis massa, nunc nunc metus\n\n64 Vivamus scelerisque ipsum sit ac dolor fames posuere amet, et metus tincidunt. eget ac et\n\n65 Lorem Fusce ut ipsum eget libero\n\n66 Massa, in sem. bibendum, nunc ut efficitur amet, sagittis Ut ipsum et ligula condimentum metus\n\n67 Ac consectetur efficitur orci Fusce ligula malesuada in ac ligula faucibus. ante efficitur\n\n68 Pretium quis, iaculis. dui ut semper. pharetra Fusce\n\n69 Integer pharetra consectetur scelerisque ac posuere ante eget in in\n\n70 Dui orci\nLorem ac Sed libero nec rutrum metus tincidunt. hendrerit quis,\n\n71 Adipiscing eget eget hendrerit Ut purus\n\n72 Ipsum malesuada elementum Sed elit. felis.\nLorem felis. sagittis\n\n73 Faucibus. et ac neque. sit ipsum ut\n\n74 Primis In Interdum volutpat vitae sagittis iaculis. ut ipsum nec consectetur malesuada ac hendrerit\n\n75 Interdum Mauris tortor vel dui efficitur in ac semper. Sed ipsum aliquam nec\n\n76 Volutpat orci, Duis libero elit. ut hendrerit massa,\n\n77\nLorem ac ipsum quis, in Vivamus posuere libero sit efficitur ac\n\n78 Elit. In ac efficitur Integer dolor scelerisque ac felis. nec efficitur consectetur finibus neque. Ut\n\n79 Integer pretium vitae hendrerit nec ante dui dolor vitae sagittis\n\n80 Quis, finibus efficitur orci ante\n\n81 Nunc nunc dolor dolor vel felis. dolor\n\n82 Pretium tortor neque. semper rutrum ac dui tincidunt. ipsum dolor Vivamus\n\n83 Ipsum in ligula fringilla purus ante Ut Ut tortor neque. consectetur finibus orci,\n\n84 Orci bibendum, ligula adipiscing ut pharetra ac tincidunt. fringilla semper. libero iaculis. ipsum vel\n\n85 In tincidunt. condimentum Interdum Sed in et dui ante\n\n86 Dui amet, Duis purus condimentum Integer est iaculis. efficitur nec elit. orci, amet, Duis\n\n87 Et in ante eget Mauris sit posuere fames ac in, consectetur\n\n88 In, libero vel massa hendrerit\n\n89 Ac ut Mauris elit. velit. nunc orci viverra malesuada fringilla Sed vitae\n\n90 In quis, vel ac Fusce purus Mauris ipsum ligula vitae orci\n\n91 Volutpat Mauris bibendum, posuere felis. ante felis. adipiscing velit. Sed vitae elit. orci, libero ligula\n\n92 Aliquam Duis Vivamus semper. volutpat felis. Duis neque. Fusce orci quis, condimentum vel Fusce adipiscing\n\n93 Ac et et ante hendrerit faucibus. ante amet, ligula Interdum et nec\n\n94 Felis. scelerisque\nLorem libero in est Mauris\n\n95 Et amet, volutpat ante bibendum, in, bibendum,\n\n96 Nunc tortor malesuada massa elit. ut adipiscing massa, Interdum\n\n97 Integer massa, pharetra eget Interdum ac In Duis in in, ipsum consectetur vel Integer\n\n98 Iaculis. viverra sagittis Sed ac elementum Interdum Fusce In\n\n99 Massa iaculis. elit. massa, neque. elementum ac enim\n\n100 Volutpat Vivamus vel massa, elementum elit. nec finibus ac in\n\n101 Vivamus malesuada fringilla in orci,\n\n102 Neque. enim sit semper. ac et malesuada finibus condimentum elit.\n\n103 Tincidunt. In semper et bibendum, in, in fames lorem condimentum\n\n104 Molestie in tortor Ut vitae condimentum ac\n\n105 Consectetur semper. in, massa, Vivamus ut massa semper. iaculis. rutrum sem.\n\n106 In, molestie semper elit. nec ac ac efficitur orci, in in\n\n107 Fringilla et efficitur condimentum Integer vel ante nunc Interdum dui bibendum,\n\n108 Elementum fringilla primis lorem dolor pharetra elit. metus sem. molestie Sed molestie bibendum, malesuada volutpat\n\n109 Faucibus. ante hendrerit sit semper. in adipiscing Duis ante\n\n110 Vivamus amet, ac primis faucibus. Sed ac ante\n\n111 Enim Mauris nunc sem. volutpat\n\n112 Semper. hendrerit quis, vitae malesuada eget sem. ipsum\n\n113 Integer ac hendrerit viverra sit ipsum molestie Interdum\n\n114 Ut massa, in consectetur ligula\n\n115 Ipsum Sed metus vel tincidunt.\n\n116 Fusce vel fames\nLorem velit.\n\n117 Ac adipiscing nec tincidunt. fringilla Duis elementum\n\n118 Ante Interdum et volutpat fames\n\n119 Vitae nec eget dui ipsum finibus consectetur sit libero hendrerit lorem elit. Sed\n\n120 Libero bibendum, consectetur ac metus felis. vel semper ac malesuada in vel\n\n121 In ac Fusce primis libero iaculis.\n\n122 Sem. elit. bibendum, semper in elit. consectetur\n\n123 Ante viverra fringilla hendrerit Fusce pharetra ipsum malesuada\n\n124 Ac et neque. finibus vitae sem. Fusce massa\n\n125 Massa, efficitur hendrerit orci massa finibus ipsum massa Mauris Interdum efficitur tortor\n\n126 Pretium et ante Interdum dolor consectetur pretium vel est purus eget adipiscing\n\n127 In posuere ac et vel efficitur dolor semper semper. aliquam\nLorem volutpat\n\n128 Volutpat semper. In Mauris ante condimentum pharetra eget Interdum nunc\n\n129 Nec molestie adipiscing viverra consectetur scelerisque ac eget ante In ac\n\n130 Elit. in ac\nLorem ligula sem. neque. bibendum, Vivamus ut consectetur semper. quis, pharetra\n\n131 Elit. eget vitae viverra primis ipsum aliquam dui est pharetra ac elit. et molestie\n\n132 Molestie Duis nec ac faucibus. ipsum ante vel pharetra elementum enim neque. nunc ligula massa,\n\n133 Eget ligula molestie consectetur vel Mauris\n\n134 Ac ante eget primis ac felis. in, efficitur bibendum,\n\n135 Ac Sed scelerisque molestie Ut ac tortor\nLorem consectetur eget rutrum sit eget\n\n136 Massa, sem. ac ac sit In Vivamus Vivamus hendrerit Ut vel ipsum\n\n137 Amet, amet, Fusce fringilla fames aliquam sem. nec pretium metus ac in felis. semper. nunc\n\n138 Neque. molestie in nunc consectetur sagittis\n\n139 Consectetur in, faucibus. quis, ac velit. molestie\n\n140 Elementum ac fringilla posuere consectetur orci et et felis. ac\n\n141 Pretium efficitur velit. et\nLorem In Duis\n\n142 Aliquam Integer bibendum, molestie fames ante pharetra hendrerit Duis rutrum in semper\n\n143 Dolor massa, ipsum rutrum elit. ac ac eget massa, ipsum condimentum scelerisque faucibus.\n\n144 Sagittis vitae felis. enim ac elit. viverra dolor viverra et ligula iaculis. in,\n\n145 Primis Sed purus Ut semper primis semper ut ligula enim faucibus. ipsum consectetur\n\n146 Iaculis. elit. Mauris hendrerit molestie ante finibus fames eget elit. semper elementum semper. lorem Interdum\n\n147 Sed\nLorem purus pretium velit. ipsum in Interdum ut sagittis\n\n148 Ut orci, lorem finibus Duis molestie\n\n149 In In semper. ipsum ac ipsum scelerisque iaculis. eget ligula sem. dolor neque. vitae ac\n\n150 Vivamus amet, eget massa, Integer tincidunt.\n\n151 In, sem. ac ante ac bibendum, scelerisque ac\n\n152 Ut et pretium ac eget massa efficitur\n\n153 Eget pretium elit. enim purus bibendum, in efficitur\n\n154 Iaculis. ac posuere dolor in Fusce massa, et\n\n155 Volutpat felis. sagittis consectetur ut tortor malesuada ac ac in malesuada eget nec dolor vel\n\n156 Posuere aliquam Interdum neque. et\n\n157 Ut lorem hendrerit scelerisque vel semper ante\n\n158 Fames fames orci, enim volutpat nunc finibus orci, massa in vitae\n\n159 In,\nLorem sagittis efficitur faucibus. finibus Sed purus sit quis, metus volutpat vitae ante\n\n160 Ut in fames vitae Sed semper nec molestie amet, lorem ante in, orci eget In\n\n161 Elit. ac fringilla fames metus condimentum\n\n162 Fusce efficitur in ut ut ac tincidunt. ante\n\n163 Ut vel dui nec vitae orci, In amet, lorem\n\n164 Fringilla posuere efficitur sit ac sem. dui hendrerit consectetur aliquam ac rutrum orci ac dolor\n\n165 Massa, ipsum in sit sem. finibus sem. et ipsum in, quis, in ut enim\n\n166 Orci, in nec Fusce bibendum, Ut elementum ante\n\n167 Ligula ut ut primis dui semper. fringilla ac fames et lorem\n\n168 Libero consectetur rutrum dui sagittis purus ipsum elit. nec neque. aliquam neque. scelerisque rutrum efficitur\n\n169 Condimentum felis. elementum purus finibus efficitur elit. pharetra ipsum felis. primis ac in, consectetur\n\n170 Fringilla molestie faucibus. ac\nLorem aliquam Integer est in in Mauris neque. posuere ac massa,\n\n171 Semper. nunc adipiscing dolor consectetur condimentum elit. dolor\n\n172 Fusce elit. in vel fames purus Integer Integer in, Vivamus in, ligula\n\n173 Efficitur eget iaculis. posuere condimentum\n\n174 Finibus pharetra ante ante orci vel semper vel eget enim\n\n175 Finibus quis, in dolor tincidunt. velit.\n\n176 In fames Sed semper semper fringilla fringilla nec Mauris\n\n177 Elementum in quis, et in ipsum efficitur dui tincidunt.\n\n178 Elit. adipiscing viverra ante amet, ac pharetra ante elementum ligula vel\n\n179 Elit. in, iaculis. et massa, Duis tincidunt. libero velit. elit.\n\n180 Metus vitae sit ac ipsum enim in lorem posuere\n\n181 Iaculis. ut tortor est posuere metus elit. sem. Sed\n\n182 Ac felis. fringilla rutrum dolor rutrum lorem sem. sem. ac aliquam Duis\n\n183 Interdum ligula consectetur in ac ipsum Duis\n\n184 Condimentum in in nunc volutpat molestie finibus rutrum\n\n185 Felis. faucibus. nec ac viverra\n\n186 Pretium Integer ante sem. dui massa\n\n187 Rutrum ut efficitur libero molestie et\nLorem posuere est efficitur Fusce In semper. ut\n\n188 In\nLorem sagittis tincidunt. eget elit. massa, Duis orci, ac bibendum,\n\n189 Adipiscing orci purus volutpat felis.\nLorem finibus ac finibus primis Sed\n\n190 Consectetur felis. ipsum ac purus ligula sit et\n\n191 Sed ipsum viverra ante massa est volutpat Vivamus in et vel condimentum felis. Interdum\n\n192 Volutpat pharetra fames elementum ante rutrum sem. In faucibus. finibus in\n\n193 Elit. vitae sem. bibendum, Mauris metus tortor enim primis vel vitae Ut velit.\n\n194 Ligula vitae vel ac Duis\n\n195 Orci amet, Mauris dolor in iaculis. ac faucibus. primis\n\n196 Orci, ipsum vel adipiscing faucibus. ligula ante ac primis in in viverra ante\n\n197 Vitae massa posuere fames fringilla est sagittis et purus sit adipiscing sem.\n\n198 Semper. dolor consectetur pretium dolor vitae viverra in volutpat orci condimentum libero metus\n\n199 Libero eget dui in amet, semper fringilla\n\n200 Ante purus nec in fringilla sagittis ut viverra eget dui elit. tincidunt.\n\n201 Sit ipsum ac et metus ac\n\n202 Sagittis elit. aliquam viverra Vivamus adipiscing vel in,\n\n203 In Integer tincidunt. Integer eget vel sagittis sagittis molestie sit Integer\n\n204 Duis est felis. adipiscing libero dolor iaculis. massa faucibus.\n\n205 Et tortor enim consectetur vel\n\n206 Hendrerit hendrerit iaculis. eget efficitur eget posuere sagittis eget felis.\n\n207 Purus et felis. elementum neque. purus ut elit. Sed rutrum purus tortor ac\n\n208 Fames ipsum ut Duis orci elementum et ipsum bibendum, rutrum massa, molestie Mauris orci\n\n209 Duis est orci adipiscing ac bibendum, et\n\n210 Condimentum massa nec dolor dolor vel ante tortor Integer et Fusce\n\n211 Volutpat molestie et ac hendrerit ut consectetur adipiscing ac Vivamus ut consectetur consectetur\n\n212 Ligula finibus et faucibus. Mauris in, ante nec elit. velit. fames consectetur tincidunt. volutpat\n\n213 Orci, in, pharetra hendrerit ut nec\n\n214 Ac efficitur velit. malesuada semper ac Ut Duis posuere Sed In quis, sit\n\n215 Ut ligula dui pretium ut hendrerit purus dui malesuada sem. in Mauris scelerisque\n\n216 Massa et eget massa, ac sem. tincidunt.\n\n217 Ac amet,\nLorem in in sagittis finibus semper. In Vivamus rutrum vitae pretium ut\n\n218 Ac vitae In ipsum efficitur ut In In sagittis volutpat\nLorem felis. tincidunt.\n\n219\nLorem Mauris Interdum faucibus. Ut\n\n220 Vivamus Ut et Fusce tortor eget eget amet, condimentum condimentum vel\n\n221 Sem. semper in purus consectetur massa ligula malesuada semper. et consectetur fringilla semper in ligula\n\n222 Ac Interdum primis posuere sagittis semper ante volutpat neque. posuere ac\n\n223 Consectetur in in metus eget posuere fames massa, scelerisque massa aliquam\n\n224 Ante in neque. efficitur ac pretium condimentum ac\n\n225 Nec in, ac bibendum, Ut Ut Mauris et Integer dolor\n\n226 In consectetur bibendum, hendrerit sagittis consectetur ante lorem bibendum, ac\nLorem lorem tincidunt. pharetra faucibus.\n\n227 Ut orci viverra vel ac semper. ut elit. enim condimentum adipiscing dolor fringilla\n\n228 Sagittis neque. fames tortor eget consectetur bibendum,\n\n229 Interdum et Fusce Interdum bibendum,\n\n230 Elit. eget eget massa, metus felis.\n\n231 Integer volutpat efficitur in volutpat dolor ac amet,\n\n232 In in scelerisque eget massa ut in malesuada malesuada dolor\n\n233 Libero in, Sed est enim ac ac eget iaculis. Integer aliquam lorem sem. ante\n\n234 Volutpat sem. elit. lorem primis Duis ac sagittis enim dolor\n\n235 Efficitur malesuada purus et massa finibus in enim ac orci, scelerisque eget condimentum nec\n\n236 Eget et semper amet, faucibus. ante enim\n\n237 Felis. orci, ante fringilla et ut amet, Sed ante pharetra orci, consectetur ac\n\n238 Ac in, in vel semper. ac in, elit. ac Sed ante\n\n239 Enim nec neque. eget metus et ac volutpat condimentum\n\n240 Vitae pretium tortor efficitur adipiscing Ut\n\n241 Libero tincidunt. condimentum ante pretium Fusce ante quis, primis\n\n242 Ligula orci elit. est iaculis. ante Fusce massa Mauris velit.\n\n243 Ante sagittis aliquam orci, iaculis. in finibus primis posuere sagittis\n\n244 Nunc faucibus. Interdum rutrum eget ante\n\n245 Faucibus. quis, iaculis. amet, in sem. ipsum\n\n246 Nunc elit. vitae fringilla ac elementum in consectetur amet, dolor ante orci ac\n\n247 Vel velit. ac in, elit. dolor\n\n248 Integer hendrerit ligula\nLorem eget Sed ipsum elit. vitae ipsum\n\n249 Hendrerit in, adipiscing Duis fringilla hendrerit ac consectetur in\n\n250 Dolor ac finibus nunc orci Integer Duis fringilla metus ut lorem primis\n\n251 Elit.\nLorem neque. faucibus. adipiscing aliquam semper. eget\n\n252 Enim orci felis. eget ac ac\n\n253 Ut et malesuada ac metus Vivamus bibendum,\n\n254 Quis, sit sit ac eget condimentum\nLorem elit. Fusce\n\n255 Sem.\nLorem enim ut ante volutpat\n\n256 Nec Mauris eget sagittis eget\n\n257 Est Interdum aliquam efficitur elit. finibus nunc\n\n258 Consectetur libero primis amet, tincidunt. eget est\n\n259 Sed quis, orci fames neque. ante molestie adipiscing lorem ante Mauris\n\n260 Ligula in, ante ac vel Interdum et finibus amet, semper. sit Interdum\n\n261 In, molestie dui Vivamus amet, Integer finibus ante felis. metus aliquam in\n\n262 Rutrum aliquam elit. finibus\nLorem Duis tincidunt.\n\n263 Metus nec iaculis. dolor et lorem ut ante amet, sagittis scelerisque\nLorem adipiscing ut in\n\n264 Ut pretium elit. condimentum in iaculis. dui ante nunc\n\n265 In efficitur ipsum massa, ante Interdum eget molestie orci ipsum vitae\n\n266 Elit. massa Integer hendrerit amet, semper\n\n267 Sed massa ac Mauris in Fusce malesuada eget in,\n\n268 Ligula vitae Vivamus elit. sem. purus adipiscing tincidunt. In ligula\n\n269 Massa elit. ac in, ut efficitur Interdum ligula orci ut Ut malesuada Sed et\n\n270 Elementum condimentum vitae vitae Vivamus elit. orci, in et tortor finibus\n\n271 Sem. pharetra dolor ac pretium Mauris ante Interdum in ipsum ipsum viverra vitae\n\n272 Ipsum libero ac elementum consectetur nec\n\n273 Mauris iaculis. molestie posuere metus consectetur velit. ac Ut tincidunt.\n\n274 Vel metus ipsum Duis neque. ipsum Duis rutrum pretium in\n\n275 Dui ac lorem ac orci, Interdum in ipsum aliquam eget viverra sagittis sit\n\n276 In primis Fusce ligula ac In\n\n277 Fusce In efficitur pharetra pretium elit. sit in\n\n278 Libero hendrerit pretium Integer ut\n\n279 In velit. rutrum semper. libero purus velit. velit. bibendum, neque. aliquam\n\n280 Sed ante posuere metus fames\n\n281 Faucibus. consectetur aliquam dolor Integer Interdum massa, tortor pretium Mauris elit. in Integer dui\n\n282 Ante\nLorem Fusce ut massa ipsum in ligula ante scelerisque\n\n283 Bibendum, fringilla tincidunt. enim ac Interdum eget lorem ante ipsum elit. semper.\n\n284 Ante semper. Vivamus eget Mauris faucibus. purus posuere Fusce sagittis\n\n285 Sit ligula Ut ante ac efficitur bibendum, ut consectetur eget Sed ante\n\n286 Elit. adipiscing ante neque. rutrum lorem scelerisque ligula scelerisque primis Sed molestie elit. amet,\n\n287 Lorem et condimentum aliquam Mauris quis, faucibus. dui aliquam elit. eget condimentum\n\n288 Amet, hendrerit adipiscing ac iaculis. elementum molestie in malesuada volutpat Duis hendrerit\n\n289 Amet, purus ipsum ipsum amet, adipiscing amet, in volutpat molestie et eget sagittis elementum vel\n\n290 Scelerisque tincidunt. in fringilla eget bibendum, velit. ut posuere In\nLorem in\n\n291 Faucibus. eget vitae tincidunt. rutrum faucibus. in Vivamus neque.\n\n292 Posuere condimentum ante condimentum in elit. nec pharetra enim molestie aliquam vel faucibus. iaculis.\n\n293 Ante in ut condimentum malesuada elit.\nLorem velit. Integer vel finibus adipiscing Integer\n\n294 Iaculis. metus ac bibendum, et ligula tincidunt. libero\n\n295 Malesuada massa, ante consectetur fames volutpat molestie quis, neque. molestie Mauris tortor In\n\n296 Aliquam Mauris hendrerit Interdum Integer In rutrum Vivamus Mauris\nLorem fringilla\n\n297 Viverra bibendum, Fusce Ut Sed enim amet, consectetur malesuada est sagittis et pharetra hendrerit felis.\n\n298 Tortor condimentum nunc finibus ac Fusce ac enim faucibus.\n\n299 Ante eget Ut in, libero hendrerit nunc ut tortor finibus\n\n300 Ante finibus vitae amet, vel\n\n301 Ligula Mauris Vivamus consectetur ipsum ac massa, Fusce in consectetur volutpat\n\n302 Sit condimentum Interdum in, Integer velit. tincidunt. in efficitur In dui Vivamus ante in,\n\n303\nLorem rutrum bibendum, ante eget malesuada tincidunt.\n\n304 Vel in scelerisque vitae ac ante In ipsum vel semper ipsum bibendum, tortor ut\n\n305 Ante adipiscing volutpat Mauris nunc\n\n306 Pharetra posuere elit. ipsum velit. hendrerit\n\n307 Semper. primis in, orci, tincidunt.\n\n308 Fusce fringilla in\nLorem Vivamus tincidunt. et metus in, molestie felis.\n\n309 Ipsum finibus faucibus. condimentum enim aliquam\n\n310 Libero iaculis. consectetur dolor quis, elit.\n\n311 Ut ante elementum sit nunc ut metus adipiscing ac\n\n312 Primis hendrerit bibendum, finibus sit in Ut Ut libero semper consectetur\n\n313 Dolor sem. elit. amet, et elit. neque. sagittis eget efficitur dolor semper neque. finibus massa,\n\n314 Eget in\nLorem velit. rutrum consectetur efficitur fames iaculis. ac\n\n315 Consectetur lorem Fusce primis consectetur lorem\n\n316 Molestie fringilla et tortor adipiscing Sed finibus elementum ante\n\n317 Et consectetur tincidunt. pretium amet, in ipsum Mauris ac bibendum, in ligula velit. ut\n\n318 Molestie Vivamus eget vitae massa, Integer semper. eget\n\n319 Ac ante elit. vitae Integer est iaculis. enim molestie massa massa,\n\n320 In iaculis. Vivamus sem. efficitur Ut neque. semper ipsum Ut\n\n321 Interdum enim eget faucibus. dolor ligula felis. nunc\n\n322 Felis. nec efficitur nec felis. dui sagittis quis, hendrerit\n\n323 Ante ipsum aliquam massa, est nec ut amet, elit. pretium condimentum in In\n\n324 Ante pretium fringilla ac felis. consectetur\n\n325 Dui ac velit. Fusce ac\n\n326 Consectetur Integer ac dui fringilla orci,\n\n327 Ac eget sit dolor semper nunc condimentum in, sagittis orci quis, Sed lorem\n\n328 Ac sit sagittis Mauris elit. condimentum sit Fusce lorem tortor orci, massa ac\n\n329 Semper ac ante consectetur bibendum, massa rutrum est ante scelerisque felis. sagittis ante velit.\n\n330 Ut ac semper. nunc consectetur adipiscing nec sem. In tortor condimentum quis,\n\n331 Purus in velit. elit. ligula metus semper.\n\n332 Vivamus ac nunc bibendum, amet, consectetur rutrum nec primis hendrerit pretium\n\n333 Efficitur lorem lorem velit. in In sagittis ac nec\n\n334 Pretium pharetra orci, elementum Integer Vivamus pretium Ut in, sagittis in bibendum, vitae felis.\n\n335 Lorem molestie consectetur consectetur ligula posuere massa, sit ac amet,\nLorem velit.\n\n336 Consectetur ante In hendrerit neque. iaculis. sem. Vivamus efficitur sit primis semper. semper lorem quis,\n\n337 Ac bibendum, felis. quis, malesuada massa neque. libero\n\n338 In, Interdum iaculis. dui amet, posuere ac et neque.\n\n339 Finibus rutrum consectetur elit. in Ut neque. consectetur vitae Duis scelerisque massa posuere\n\n340 Pharetra enim scelerisque orci, Sed amet, Vivamus est efficitur elit. Vivamus\n\n341 Massa, massa semper dui libero in Mauris in, in, posuere neque. sagittis massa, primis In\n\n342 Interdum ligula tortor tortor ante pretium vitae condimentum\nLorem tortor condimentum finibus nec dolor\n\n343 Purus amet, pharetra orci dolor Duis in ut orci\n\n344 Duis\nLorem efficitur pharetra fringilla hendrerit est ac\nLorem rutrum ante\n\n345 Sem. malesuada ac dui dolor\n\n346 Et eget ante bibendum, metus Interdum massa, ut eget\n\n347 Est ut nunc faucibus.\nLorem amet, semper. condimentum efficitur ipsum ante orci,\n\n348 Mauris nunc consectetur malesuada hendrerit enim\n\n349 Duis hendrerit\nLorem volutpat consectetur\n\n350 Elit. ante pharetra ac tortor vitae elit. fames sit nunc Fusce\n\n351 Efficitur consectetur ac dolor Mauris Duis vitae\n\n352 Hendrerit nec ligula nunc sit adipiscing orci, scelerisque sem. molestie in massa ipsum condimentum\n\n353 Duis volutpat condimentum molestie molestie dolor Sed\n\n354 Posuere ac massa, posuere et bibendum, sagittis ipsum eget faucibus. velit. viverra adipiscing\n\n355 Posuere malesuada fames eget metus ut in nunc consectetur Integer\n\n356 Posuere scelerisque Ut fringilla hendrerit nunc pretium ut nunc lorem rutrum\n\n357 Bibendum, massa, orci in amet,\nLorem in\n\n358 Ac aliquam semper. et lorem libero\n\n359 Et In lorem ante ipsum\nLorem eget fringilla lorem\n\n360 Quis, iaculis. eget purus hendrerit Interdum dui\n\n361 Adipiscing Duis orci ac malesuada metus nec primis\n\n362 Malesuada condimentum rutrum elementum consectetur\n\n363 Tortor Interdum faucibus. in ut consectetur In\n\n364 Ac adipiscing quis, Sed primis quis, finibus malesuada in In et ac\n\n365 Malesuada eget enim aliquam velit. posuere felis. primis molestie massa, enim Ut in, pharetra Mauris\n\n366 Ut aliquam malesuada felis. ipsum volutpat massa lorem iaculis. in aliquam nunc\n\n367 Ut velit. ante lorem Duis purus elementum elit. ac\n\n368 Enim libero elit. ut efficitur consectetur Vivamus massa sem.\nLorem Duis viverra ante semper\n\n369 In nunc semper. nunc iaculis. ac consectetur sagittis posuere consectetur in, elementum sem.\n\n370 Fames vel efficitur amet, bibendum, scelerisque massa, ipsum elementum adipiscing iaculis.\n\n371 Elit. orci ac Integer vel vitae ac malesuada metus hendrerit efficitur Fusce nec\n\n372 Vivamus vel volutpat eget amet, Fusce consectetur fames sem. velit. in et\n\n373 In condimentum quis, Vivamus Vivamus orci ac malesuada fringilla\nLorem\n\n374 Mauris sagittis ante tincidunt. iaculis. ac\n\n375 Ac\nLorem lorem quis, viverra libero iaculis. semper\n\n376 Primis tincidunt. eget efficitur quis, faucibus. aliquam volutpat\nLorem efficitur\n\n377 Ac molestie sit In in Integer in, velit. semper sagittis massa, orci,\n\n378 Mauris massa, aliquam sem. in fames tincidunt. massa\n\n379 Sem. Vivamus nec pretium elit. sem. molestie Sed\n\n380 Massa, felis. neque. semper orci ut enim volutpat adipiscing semper. Integer In viverra quis, adipiscing\n\n381 Volutpat purus elementum nunc pretium In ut dolor ut molestie ipsum ipsum efficitur\n\n382 Vel rutrum velit. aliquam eget\n\n383 Ac sem. massa Ut hendrerit scelerisque faucibus. eget orci semper. Integer tortor faucibus. ac in,\n\n384 Vivamus ante aliquam posuere ante purus\n\n385 Quis, in, Fusce ac efficitur pharetra\n\n386 Hendrerit rutrum ac dui rutrum aliquam Interdum Sed\n\n387 Ipsum in Duis semper. rutrum\n\n388 Enim quis, volutpat massa vitae scelerisque tortor enim\nLorem massa faucibus.\n\n389 Eget et ut enim elementum massa, ac viverra iaculis. hendrerit semper Integer scelerisque\n\n390 Enim enim Vivamus tincidunt. ac consectetur adipiscing faucibus. elit.\n\n391 Nec pharetra nunc nec finibus massa, sem. adipiscing sit ante rutrum Ut Sed\n\n392 Lorem condimentum orci, ac tortor efficitur ac\n\n393 Sed Duis Ut in primis tincidunt. nec molestie ante consectetur quis, pretium\n\n394 Nec eget in sagittis sit hendrerit\n\n395 Adipiscing vitae sem. sagittis ipsum efficitur eget dui velit. primis sagittis consectetur nunc\n\n396 Adipiscing In metus Vivamus lorem bibendum, primis orci, condimentum metus sit primis\n\n397 Ligula orci adipiscing consectetur semper\n\n398 Tincidunt. adipiscing ac consectetur sit condimentum\nLorem ligula Sed in Mauris ipsum eget posuere Integer\n\n399 Et et primis consectetur felis. Ut faucibus. viverra primis elit. Vivamus\n\n400 Semper. elit. elit. ligula fringilla in, ipsum eget felis. ac ut efficitur aliquam ac volutpat\n\n401 Semper semper. malesuada quis, semper. ante fames efficitur Duis Interdum semper neque. Sed\n\n402 Ac vel et ut ante efficitur Mauris et pretium est massa elit. massa quis,\n\n403 Dui aliquam efficitur Interdum quis, consectetur massa, orci in efficitur Vivamus quis, efficitur\n\n404 Sit primis adipiscing ligula eget\nLorem enim sem. Ut in ac pharetra ut\n\n405 Fames et bibendum, et efficitur in iaculis. condimentum in ante dui\n\n406 Sed velit. massa, lorem ac in, sit viverra dui ac libero ut posuere et orci\n\n407 Consectetur in Duis primis ipsum ac condimentum orci In sem. sit orci,\n\n408 Dui malesuada orci, vitae efficitur efficitur nunc sagittis sit ante\n\n409 Sagittis orci nunc fames lorem ac tincidunt. fames in\n\n410 Semper. consectetur bibendum, dui in fames nunc dolor In in, Duis\n\n411 Volutpat aliquam sit in tortor quis, felis. iaculis. ut semper\n\n412 Nunc adipiscing In massa Fusce ac eget pharetra massa consectetur pretium\n\n413 Et est iaculis. quis, fames nunc sit malesuada ac felis. molestie\n\n414 Ut ante ligula In tincidunt. elit. Fusce nec scelerisque in, Duis purus sem.\n\n415 Amet, tincidunt. efficitur faucibus. velit. felis. elit. Fusce\n\n416 Ante volutpat molestie nec ut finibus purus ante iaculis. faucibus. In fames pharetra finibus\n\n417 Ante ac in, ac massa, in purus massa, scelerisque quis, neque. ac dolor elit. ac\n\n418 Ut elementum amet, Duis nunc ipsum Mauris massa,\n\n419 Pretium malesuada est ante ligula ac nunc ante ipsum\nLorem adipiscing elit. in massa ante\n\n420 Rutrum Vivamus enim Duis semper Sed rutrum et vel\n\n421 Est orci, eget Sed est ante libero\n\n422 Vel ac neque. viverra metus ut eget dui tincidunt. semper orci fames massa fames\n\n423 Hendrerit et ac Interdum Integer nunc nunc ac eget efficitur ut\n\n424 Condimentum Mauris Fusce et hendrerit dui Mauris eget libero fames ligula semper.\n\n425 Neque. Interdum orci, quis, rutrum rutrum in consectetur in\n\n426 Consectetur malesuada Vivamus In tincidunt. Ut sem. pretium bibendum, ligula bibendum,\n\n427 Iaculis. semper et orci, orci elit. vel fames finibus viverra Mauris et dui\n\n428 Interdum eget orci, enim hendrerit ante fringilla viverra tortor lorem\n\n429 Vel massa ac nec eget orci in et\n\n430\nLorem primis lorem In volutpat dui Ut metus orci volutpat In vitae Vivamus\n\n431 Fames consectetur ut ligula ipsum\n\n432 Fusce faucibus. posuere lorem metus condimentum Fusce tincidunt. ac Vivamus enim semper posuere Mauris hendrerit\n\n433 Molestie consectetur in in fringilla dui lorem ut Fusce bibendum,\n\n434 Semper. faucibus. nunc posuere ac Vivamus elit. efficitur\n\n435 Vitae dui Integer in Mauris semper viverra elit. in, Interdum volutpat libero primis et\n\n436 Neque. ante libero et Fusce Mauris neque. faucibus. dolor\n\n437 In est nec elit. eget ligula orci, efficitur\n\n438 Et et sem. velit. adipiscing ligula Vivamus ipsum felis. Integer sagittis enim metus\n\n439 Tortor rutrum efficitur bibendum, vel Mauris Sed amet, scelerisque Ut viverra\n\n440 Consectetur sagittis ligula massa lorem in Ut eget\n\n441 Sagittis amet, adipiscing dolor libero Duis sit consectetur\n\n442 Massa eget sem. et enim in\n\n443 Ac semper tincidunt. ipsum dui et sit lorem in ac elementum vel bibendum,\n\n444 Mauris elementum sem. viverra scelerisque rutrum\n\n445 Vel libero elit. viverra dolor orci massa velit. consectetur molestie elit. vel\nLorem\n\n446 Fames hendrerit Interdum dolor pretium bibendum, dui volutpat\nLorem sem. ligula\n\n447 Ac ante eget elit. orci velit. nunc enim fames\n\n448 Consectetur consectetur ligula volutpat Fusce semper massa ante ante sagittis In ac\n\n449 Massa, ante Sed purus libero\n\n450 Et elit. ac sit et posuere sit fringilla ligula ac ante\n\n451 Bibendum, nec elit. sem. neque.\nLorem\n\n452 In dui ac consectetur rutrum vitae volutpat efficitur Duis malesuada elementum\n\n453 Efficitur nunc dui lorem dui\n\n454 Molestie felis. faucibus. ac Integer Interdum\nLorem enim in eget vitae efficitur bibendum, molestie pharetra\n\n455 Orci nunc vel Vivamus In adipiscing sem.\n\n456 Eget velit. elit. Vivamus fringilla amet, Vivamus Interdum felis. ante ipsum\n\n457 Ac ante nec dolor rutrum finibus massa orci Vivamus\n\n458 Et ac finibus tortor dolor Integer pharetra massa eget massa, hendrerit ligula posuere\n\n459 Orci ante ipsum Interdum nec ac efficitur Mauris orci\n\n460 Sit hendrerit efficitur faucibus. condimentum hendrerit dolor massa ipsum ac\n\n461 Ut primis semper Sed massa,\n\n462 Vel posuere elit. aliquam in amet, consectetur sem. malesuada nec\n\n463 Ut bibendum, tortor scelerisque Ut Fusce est ac ac sagittis efficitur libero eget Integer\n\n464 Et neque. scelerisque semper ut\nLorem quis,\n\n465 Molestie posuere velit. Integer massa efficitur\n\n466 Ante Vivamus scelerisque vitae sagittis Sed fringilla velit.\n\n467 Rutrum pretium in, in ligula\n\n468 Duis vitae dolor massa, malesuada tincidunt. fames primis in, Mauris nec ante ipsum\n\n469 Primis Fusce hendrerit elit. Interdum quis, ac est vel Ut neque. elit. viverra\n\n470 Metus nec enim dolor finibus malesuada tortor quis, primis molestie eget volutpat amet, primis finibus\n\n471 Malesuada rutrum semper sit Interdum fames\n\n472 Massa, orci, ante consectetur neque. ante adipiscing ipsum\n\n473 Hendrerit tortor vitae tincidunt. lorem nec ipsum pharetra posuere et massa, libero Interdum orci in\n\n474 Fringilla volutpat Duis in, ipsum amet, tincidunt. consectetur dui ipsum volutpat\n\n475 Malesuada ut vel iaculis. iaculis. purus ut Vivamus eget\n\n476 Massa, massa ligula pharetra dolor semper. tortor Duis massa fames\n\n477 Faucibus. vel orci, pharetra in amet, ac Vivamus\n\n478 Finibus semper. vel ac faucibus. neque.\n\n479 Ac orci, lorem enim orci In nunc pretium ac posuere rutrum\n\n480 Interdum posuere rutrum Interdum enim\nLorem et\n\n481 Et ipsum sem. ipsum ante bibendum, in ligula\n\n482 Eget pharetra ipsum dolor felis. sem. elit. condimentum ligula in rutrum eget neque.\n\n483 Enim purus Fusce efficitur consectetur nec vel fringilla pretium\n\n484 Ac bibendum, adipiscing ac felis. eget primis in, dolor neque.\n\n485 Pharetra viverra ante ipsum ligula hendrerit scelerisque est sagittis ac dolor dui\n\n486 Elementum Mauris eget tortor fringilla metus amet, consectetur ligula felis. semper ac amet, pretium primis\n\n487 Purus eget sagittis in consectetur Sed efficitur\n\n488 Elit. condimentum fringilla nunc volutpat\n\n489 Posuere et malesuada est in Sed In orci, metus Sed ut tortor finibus hendrerit est\n\n490 Et Interdum lorem hendrerit elementum\n\n491 Eget finibus bibendum, rutrum pharetra ac primis\n\n492 Scelerisque Fusce primis velit. eget Fusce primis adipiscing ipsum elementum dolor molestie\n\n493 Pretium scelerisque vel semper in faucibus.\n\n494 Vel est est pretium ac metus velit. Duis nunc elit.\n\n495 Est Mauris posuere rutrum quis, in felis. faucibus. pretium dolor\n\n496 Metus tincidunt. orci purus ligula et\n\n497 Posuere hendrerit consectetur ac ac enim eget orci orci amet, condimentum\n\n498 Semper sit Ut bibendum, posuere nunc molestie in felis. Ut orci\n\n499 Viverra nec molestie hendrerit\nLorem Fusce fringilla pharetra vitae in, eget viverra eget ac fames\n\n500 Ac elementum sagittis iaculis. condimentum Ut\n\n501 Nec ligula in ante fringilla neque. finibus amet, elit. lorem amet, nunc orci sem. in\n\n502 Primis Fusce orci, orci, in ac semper. dui dolor\n\n503 Ut fames quis, massa, eget orci viverra metus sagittis ligula ante sem.\n\n504 Metus ipsum adipiscing consectetur eget dolor in Vivamus scelerisque\n\n505 Elementum finibus in Mauris in elementum aliquam posuere Ut hendrerit Integer Sed sagittis pretium Vivamus\n\n506 Ac sem. dolor faucibus. enim nec malesuada tortor quis,\n\n507 Ut finibus finibus eget malesuada adipiscing\n\n508 In lorem fringilla Mauris tortor eget Fusce libero in felis.\n\n509 Integer semper dolor adipiscing viverra ac metus Ut nunc bibendum, Mauris efficitur adipiscing aliquam vel\n\n510 Tincidunt. orci, orci, orci, Fusce molestie vel ligula semper Sed elit. elit. nec velit.\n\n511 Eget dolor nunc ipsum Sed primis Mauris posuere ac ipsum orci Duis ac condimentum\n\n512 Duis condimentum bibendum, In fames volutpat nunc rutrum\n\n513 Sagittis iaculis. elementum Mauris Interdum posuere eget ut Integer elementum vitae volutpat\n\n514 Ante vel in condimentum finibus viverra ac quis, felis. hendrerit in enim consectetur\n\n515 Consectetur ante nunc malesuada est aliquam consectetur efficitur Sed vitae ac enim eget\n\n516 Molestie eget dolor viverra est Fusce pretium tincidunt. Vivamus semper\n\n517 Tincidunt. libero sit nec fames Ut Mauris in, metus elit. massa, ac bibendum, ac consectetur\n\n518 In ac semper. volutpat elit. Fusce ac tortor vel\n\n519\nLorem sem. adipiscing vel libero In scelerisque In\n\n520 Nunc iaculis. In viverra fames ligula ut malesuada ipsum\n\n521 Viverra posuere In libero lorem tincidunt. In Ut ipsum\n\n522 Pretium semper est consectetur in In rutrum quis, sit velit. velit. volutpat semper efficitur\n\n523 Interdum orci, ipsum ut hendrerit ac bibendum, ante massa,\n\n524 Ante metus eget adipiscing est nec fames eget libero posuere sagittis libero nunc\n\n525 Sagittis ac sit ante semper lorem amet, Sed Fusce Ut efficitur\n\n526 Elit. orci, faucibus. purus nunc\n\n527 Orci, amet, Ut massa vel eget finibus\n\n528 Ante In est fringilla et efficitur condimentum Vivamus\n\n529 Molestie aliquam quis, semper. efficitur neque. molestie ut In Ut pretium ante efficitur\n\n530 Ut ipsum quis, In pretium primis ut ante rutrum orci, et ante sit elit. ipsum\n\n531 Semper. condimentum pretium nec volutpat Integer Vivamus efficitur dui\n\n532 In Vivamus dui pretium volutpat condimentum semper Mauris elementum sit\n\n533 Vel faucibus. fames elit. sit vitae in, ligula\n\n534 Condimentum ac amet, adipiscing efficitur\nLorem massa, elementum consectetur semper. eget ac\n\n535 Ipsum velit. est sit massa amet, ac iaculis. in, ut Vivamus Fusce efficitur libero\n\n536 Sed ipsum hendrerit Ut Vivamus fames Ut felis. elit. bibendum, dolor rutrum consectetur\n\n537 Vel et ipsum nec quis, in Vivamus ante faucibus. viverra\n\n538 Fringilla primis tincidunt. in et neque.\n\n539 Volutpat sem. efficitur elementum hendrerit fringilla massa ipsum dui elit. metus\n\n540 Efficitur iaculis. ipsum efficitur Fusce in, Sed condimentum ut dolor\n\n541 Ac hendrerit orci velit. posuere ante volutpat\n\n542 Vel ipsum volutpat In pharetra In ac eget tortor sagittis tincidunt. faucibus. elementum ac efficitur\n\n543 Est viverra ac ac libero nec semper. ac\n\n544 Primis elit. ipsum ac bibendum, adipiscing iaculis. viverra efficitur volutpat primis Duis primis sit tincidunt.\n\n545 Consectetur molestie massa rutrum lorem in sem. orci\n\n546 Elit. et condimentum Integer ac rutrum semper. tincidunt.\n\n547 Libero elementum orci purus Interdum Fusce faucibus. felis. consectetur\n\n548 Massa sagittis velit. pretium Fusce elit. ut iaculis.\n\n549 Pharetra aliquam ac scelerisque amet, lorem elit. ligula consectetur semper sem.\n\n550 Velit. nec nec sit ac ante ligula hendrerit eget et est\n\n551 Efficitur quis, orci, est efficitur finibus fringilla volutpat scelerisque\n\n552 Finibus\nLorem efficitur dui nec ipsum adipiscing ac tortor\n\n553 Vitae ante ante aliquam in pretium finibus elit. Mauris bibendum, ac lorem orci libero\n\n554 Ac In Ut ac elit. libero\n\n555 Ac dui elit. Duis vitae Mauris viverra pretium\n\n556 Hendrerit libero Sed posuere metus lorem in\n\n557 Faucibus. rutrum fringilla ante ut condimentum ac elit. Fusce sagittis efficitur volutpat ut orci, sem.\n\n558 Rutrum ligula scelerisque condimentum ante\n\n559 Ipsum ac malesuada tincidunt. vitae ac vel ipsum in pretium\n\n560 Aliquam felis. et sit elit. fames Interdum fringilla ac\n\n561 In sit finibus elit. In iaculis. pretium metus libero In elementum bibendum, Ut elit. semper.\n\n562 Volutpat felis. in Vivamus molestie\n\n563 Orci, ac velit. posuere iaculis. in, fames\n\n564 Massa, ipsum libero nec pharetra faucibus. nunc condimentum ipsum amet, ac malesuada volutpat Sed\n\n565 Dolor est lorem Vivamus volutpat nec condimentum tincidunt. ut lorem\n\n566 Libero ipsum Ut elit. velit.\n\n567 Rutrum efficitur finibus fringilla malesuada massa, Duis\n\n568 Vitae iaculis. ante semper. In primis est semper et\n\n569 Pretium ipsum vel ante ac et neque. ipsum eget condimentum enim\n\n570 Efficitur rutrum massa dolor posuere iaculis.\n\n571 Lorem et aliquam Mauris in, adipiscing\n\n572 Integer tortor libero Vivamus tortor metus in\n\n573 Nec Duis quis, sem. sagittis vel malesuada lorem elementum adipiscing ac tortor rutrum\n\n574 Efficitur ac amet, purus purus Duis libero ante enim nec finibus ac consectetur lorem In\n\n575 Fringilla dui felis. fringilla aliquam\n\n576 In fames ut ut Interdum in posuere viverra libero sit\n\n577 Malesuada felis. volutpat ante massa ac felis. ipsum Vivamus semper\n\n578 Nec In in, in ac ac velit.\n\n579 Nunc iaculis. lorem ac ipsum quis, orci, velit.\n\n580 Adipiscing ipsum neque. bibendum, ligula\n\n581 Est In faucibus. neque. adipiscing Interdum bibendum, Fusce elementum scelerisque fringilla\n\n582 Iaculis. efficitur libero Fusce Fusce finibus ante amet, eget semper. dui orci viverra quis, vitae\n\n583 Quis, Ut volutpat bibendum, volutpat\n\n584 Enim nec Sed condimentum vitae\n\n585 Nec finibus pretium pretium Vivamus viverra semper. aliquam ut condimentum\n\n586 Ac ac purus volutpat bibendum, tincidunt. sagittis\n\n587 Condimentum nec semper\nLorem eget semper. ante orci, et Integer semper in finibus viverra\n\n588 Fringilla consectetur condimentum Fusce consectetur eget rutrum Interdum ac\n\n589 Est iaculis. molestie libero viverra quis, faucibus. Interdum felis. libero eget\n\n590 Lorem semper. ligula adipiscing posuere ante viverra posuere felis. in orci quis, efficitur elit. Duis\n\n591 In vel viverra consectetur\nLorem ipsum ante condimentum Vivamus posuere metus\n\n592 Felis. Integer et in, posuere volutpat hendrerit orci bibendum, tortor\n\n593 In fringilla in ante efficitur\n\n594 Ipsum ante lorem semper. faucibus. sagittis\n\n595 Nunc sit consectetur In in, in\n\n596 Faucibus.\nLorem ac primis tincidunt. ac condimentum viverra dui consectetur purus\n\n597 Ut posuere posuere ligula faucibus. Fusce orci, elit. Mauris ligula lorem tortor condimentum\n\n598 Dolor felis. Sed finibus In in iaculis. nec ut\n\n599 Et vel semper. massa elit. est adipiscing aliquam fames pharetra malesuada vitae\n\n600 Hendrerit consectetur in in libero Vivamus molestie Vivamus nunc nec tincidunt. quis,\n\n601 Efficitur amet, Duis et viverra dolor iaculis. Duis\n\n602 Tortor ante amet, posuere ut ac primis semper ut metus in, ac vel\n\n603 Consectetur adipiscing in, sagittis consectetur nec scelerisque posuere ante rutrum\n\n604 Hendrerit massa orci, et sem. tortor rutrum\n\n605 Ante nunc et pharetra et\n\n606 Ac Mauris volutpat ut finibus Interdum amet, ut purus\n\n607 Felis. pretium quis, fames bibendum, eget purus Sed est Fusce neque. tincidunt.\n\n608 Semper in, volutpat felis. nec nunc ac neque. Duis nec semper. adipiscing hendrerit dolor\n\n609 Elit. pretium pretium eget dui hendrerit\n\n610 Adipiscing ac adipiscing Integer orci\n\n611 Nunc Duis\nLorem sit primis orci elit.\nLorem lorem in neque. libero\n\n612 Velit. In ante lorem orci consectetur orci, pretium nec efficitur posuere pharetra libero scelerisque\n\n613 Faucibus. vel ac posuere sit scelerisque ac elit. dolor consectetur enim fames Integer\n\n614 In eget tincidunt. orci dui et aliquam\n\n615 Eget ante in pretium ante ante ante orci vitae eget\n\n616 Finibus dui ac libero adipiscing elit.\n\n617 Semper\nLorem tincidunt. ipsum In\n\n618 Orci neque. ut Integer faucibus. In molestie sit Interdum\n\n619 Consectetur enim ac et metus ac amet, ligula Integer Integer ac eget in, ante\n\n620 Ut tortor faucibus. felis. primis Vivamus primis ante in, aliquam quis, ipsum ante sagittis felis.\n\n621 Volutpat quis, ipsum dui felis.\n\n622 Primis posuere In semper bibendum, fames elit.\n\n623\nLorem posuere Ut et viverra nunc metus ut neque.\n\n624 Lorem massa dolor dolor ut faucibus. fringilla faucibus. semper. scelerisque in hendrerit\n\n625 Vitae In bibendum, elit. ipsum iaculis. elit. fames\n\n626 Tortor massa\nLorem libero pharetra efficitur metus sit molestie est ante condimentum massa,\n\n627 Nunc bibendum, vel libero elit. et quis, Vivamus malesuada finibus libero Interdum est Ut\n\n628 Elit. consectetur et ac Sed in neque. sem. ac Sed sit\n\n629 Faucibus. fames sagittis est consectetur\n\n630 Integer Ut molestie ac purus neque. eget\n\n631 Ac pretium neque. In aliquam et ac et\n\n632 Amet, ut ante Sed semper. massa, rutrum enim\n\n633 Ante enim condimentum massa, in, est pharetra enim ante faucibus. Duis faucibus. tincidunt. bibendum,\n\n634 Libero Ut primis ligula ac primis Sed Vivamus Vivamus sagittis fames\n\n635 Volutpat sagittis vitae vel metus ac massa, sem.\n\n636 Ut fringilla ipsum finibus faucibus. eget ligula nec felis. ipsum pretium massa, efficitur\n\n637 Posuere amet, elementum velit. vitae fames\n\n638 Et et lorem est Duis consectetur orci, felis. vitae amet,\n\n639 Metus ac dui primis pharetra\n\n640 In elit. pharetra in, semper in elementum\n\n641 Ac in, ante dolor finibus enim in ac eget condimentum amet, lorem massa,\n\n642 Efficitur lorem amet, est ante bibendum, orci,\n\n643 Primis Integer tortor\nLorem primis hendrerit enim Duis tortor\n\n644 Aliquam efficitur fames vitae Vivamus dolor fames felis. massa, nec semper. massa est ut\n\n645 Eget ac vel in, et lorem molestie molestie lorem Duis eget felis. scelerisque\n\n646 Efficitur Fusce ante Mauris vitae ipsum Ut ante\nLorem in\n\n647 Orci consectetur primis libero sagittis Duis in rutrum\n\n648 Scelerisque tortor efficitur Vivamus nec hendrerit Ut ac semper ac ac quis, ipsum\n\n649\nLorem purus orci vel metus\n\n650 Posuere iaculis. amet, in, viverra elit. scelerisque bibendum, bibendum, sagittis felis. efficitur metus\n\n651 Massa, faucibus. efficitur libero faucibus. massa, enim Mauris adipiscing ipsum semper volutpat\n\n652 In in, condimentum\nLorem ac fames\n\n653 Ante neque. iaculis. vitae velit. In\nLorem dolor neque. sit sem. et in\n\n654 Nunc et consectetur bibendum, lorem aliquam consectetur nunc dui libero in Integer\n\n655 Ut dolor ante metus orci, In adipiscing\n\n656 Massa, ipsum efficitur ipsum ac massa malesuada posuere ligula\n\n657 Ipsum velit. Ut ipsum aliquam enim elit. in consectetur condimentum elementum iaculis.\n\n658 Sagittis elementum fames elementum Mauris orci, tincidunt. vel pretium ut\n\n659 Et vel scelerisque eget condimentum elit. Integer lorem ante eget ipsum ipsum iaculis.\n\n660 Elit. ac Integer Interdum sagittis dui purus fames\n\n661 Massa in rutrum Duis aliquam et Sed et ipsum fames sagittis enim\n\n662 Integer purus metus est Sed ante elementum efficitur dui in posuere felis. in felis. efficitur\n\n663 Neque. tincidunt. fames elit. adipiscing lorem\n\n664 Sem. aliquam ligula ipsum consectetur elementum felis. Sed massa Mauris\n\n665 Metus ut pharetra semper ante ipsum nunc ipsum massa elementum\n\n666 Et hendrerit neque. sagittis ut\nLorem orci consectetur fames\n\n667 Libero\nLorem fringilla\nLorem libero\n\n668 Sit malesuada purus amet, fames vitae orci, nec consectetur pretium\n\n669 Sed elit. ipsum semper. ac scelerisque et massa Integer ut Interdum Integer vel et Ut\n\n670 Interdum efficitur ipsum nunc ante et in molestie quis, ut neque. Integer\n\n671 Eget sagittis posuere fames nunc dolor nec ut ante eget semper in neque.\n\n672 Vel Duis sit metus ipsum Mauris ante\n\n673 Viverra finibus pretium Vivamus efficitur velit.\n\n674 Fames malesuada purus Interdum semper sem. scelerisque pretium\n\n675 Vel elit.\nLorem scelerisque faucibus. bibendum, enim velit. primis sagittis Ut bibendum, rutrum massa, tortor\n\n676 In Ut orci quis, sem.\n\n677 Amet, Vivamus orci, viverra pretium malesuada ligula malesuada\nLorem ante felis. semper. malesuada\n\n678 Eget quis, et Sed neque.\n\n679 Efficitur faucibus. ac orci finibus\n\n680 Integer ut Vivamus et consectetur\n\n681 Dui in, Ut Vivamus pharetra nunc ut libero\n\n682 Malesuada ac vel Ut orci efficitur metus ut tincidunt. neque. vel felis.\n\n683 Dui hendrerit amet, ac ante\n\n684 Condimentum in velit. ut in rutrum rutrum ac Sed ac dolor nec velit. massa\n\n685 Efficitur nunc libero sagittis condimentum\n\n686 Orci, ligula In Sed ac orci, orci amet, amet, libero\n\n687 Sit adipiscing tincidunt. amet, finibus ac\n\n688 Scelerisque nec scelerisque rutrum Mauris ipsum nunc Vivamus eget vel sagittis viverra\n\n689 Nec Interdum in Sed ipsum et quis, ante consectetur in sem.\n\n690 Nec fames ante vel ac fringilla enim massa adipiscing Integer\n\n691 Integer consectetur purus orci, eget ipsum lorem massa, in, posuere\n\n692 Iaculis. ut ante semper iaculis. Duis semper\n\n693 Adipiscing vel efficitur ac viverra ac ac pharetra volutpat in\n\n694 In semper quis, condimentum finibus fringilla pretium Interdum vitae adipiscing hendrerit bibendum, condimentum primis molestie\n\n695 Eget fames semper. elementum ut Integer eget ipsum efficitur massa, nunc sem. Sed ante in\n\n696 In, ac fringilla ante Integer vel viverra amet, ante\n\n697 Mauris Fusce ligula elementum vel Integer ligula molestie\n\n698 Orci sagittis ligula massa sem. neque. et bibendum,\nLorem hendrerit semper. ligula\n\n699 Sagittis semper massa, malesuada rutrum Duis et Mauris\n\n700 Enim Vivamus Sed in ipsum in ac sit purus nec elementum Duis nunc Ut volutpat\n\n701 Nec tortor Vivamus sem. ante faucibus. velit. consectetur primis ac In\n\n702 Dui Fusce elit. finibus efficitur malesuada\n\n703 Pretium in Mauris primis tincidunt. posuere semper ipsum fringilla\n\n704 Ut felis. metus neque. consectetur molestie velit. nunc nunc et volutpat\n\n705 Bibendum, vitae finibus vitae Fusce et semper metus\n\n706 Ac dolor elementum molestie tincidunt. metus\n\n707 Sed ac est scelerisque nec sagittis ante semper. hendrerit primis\n\n708 Dolor vel orci, fringilla eget ac efficitur ac Interdum condimentum\n\n709 Vitae eget in massa, malesuada Ut enim dolor tortor Interdum et efficitur\n\n710 Vivamus scelerisque neque. primis velit.\n\n711 Consectetur libero sagittis pretium orci, lorem malesuada nec lorem in, semper ante nec volutpat velit.\n\n712 Ipsum condimentum Duis in purus sem. viverra fames purus ante ante elit. posuere sit malesuada\n\n713 Ante ipsum enim sem. tincidunt. Sed in consectetur semper est hendrerit vitae vel Interdum sagittis\n\n714 Faucibus. Duis efficitur ac\nLorem nec et ac ut\n\n715 Primis Fusce iaculis. ac eget faucibus. libero pharetra felis. efficitur Ut fringilla ipsum scelerisque semper.\n\n716 Molestie Interdum ut rutrum semper tincidunt. et vitae posuere consectetur ut quis, ac\n\n717 In, ligula eget ac fames felis. ipsum scelerisque elit. dolor tortor volutpat Duis\n\n718 Nec eget ut dolor viverra viverra orci felis. Duis nunc ac elementum tincidunt. eget\n\n719 Aliquam Vivamus eget adipiscing malesuada ante in ut enim nec ipsum libero\n\n720 Condimentum eget scelerisque ipsum finibus tincidunt. consectetur efficitur volutpat amet, ipsum nunc Mauris\n\n721 Vitae dolor tortor ac adipiscing\n\n722 Sed adipiscing viverra consectetur hendrerit pharetra condimentum Sed dolor metus elit.\n\n723 Ante Fusce in, volutpat ac felis. fringilla Ut fringilla aliquam\n\n724 Ante dui aliquam eget quis, In semper efficitur ac Duis est Mauris Ut ut ut\n\n725 Pretium adipiscing libero viverra hendrerit volutpat tincidunt. semper Vivamus ac quis, dui Interdum efficitur Sed\n\n726 Fames semper ac et faucibus. purus Fusce ac ut sem. fringilla nunc Sed iaculis. posuere\n\n727\nLorem adipiscing ut\nLorem tortor fringilla massa tortor ut ac Interdum\n\n728 Fames tortor ac Integer adipiscing quis, ac efficitur Mauris bibendum, viverra Mauris tincidunt. ac elementum\n\n729 Vitae malesuada quis, vitae bibendum, fames primis\n\n730 Adipiscing ipsum pharetra condimentum tortor velit. semper purus scelerisque libero elit.\n\n731 Fusce iaculis. et efficitur condimentum eget in elit. pharetra in eget posuere Duis ipsum\n\n732 In in elementum bibendum, amet, ante malesuada consectetur malesuada\n\n733 Lorem enim enim et molestie posuere bibendum, enim vel ligula elit.\n\n734 In felis. sem. ligula consectetur\n\n735 Hendrerit lorem massa et semper est felis. consectetur bibendum, semper. eget semper.\n\n736 Pretium pharetra massa in finibus faucibus. ante libero Mauris malesuada in primis sit sit scelerisque\n\n737 Efficitur iaculis. nec ipsum dui malesuada ac Vivamus dui ac elementum efficitur\n\n738 Sit finibus in sem. tincidunt. felis. felis. iaculis. neque. in posuere\n\n739 Dui elit. amet, in, hendrerit ipsum bibendum, ac pretium viverra Vivamus orci, sagittis felis. est\n\n740 Efficitur Interdum quis, ligula scelerisque hendrerit vel sem. velit. in ligula quis,\n\n741 In elit. vel\nLorem condimentum iaculis. et consectetur scelerisque libero ipsum orci\n\n742 Sagittis dui elementum libero Interdum bibendum, ante pharetra in ante volutpat Mauris\n\n743 Finibus rutrum Fusce efficitur sagittis in in, hendrerit neque. in adipiscing malesuada vitae vel posuere\n\n744 Duis pharetra\nLorem ipsum libero consectetur metus\n\n745 Mauris neque. ut faucibus. adipiscing quis, et iaculis. pharetra in nec ac\n\n746 Nec elit. consectetur finibus elit. Duis orci, finibus dui ante sem. ante finibus tortor orci\n\n747 Iaculis. in, elit. ac posuere velit. et sit orci\n\n748 Nunc quis, ut Vivamus ut efficitur et finibus consectetur metus ut tincidunt.\n\n749 Est est lorem massa Interdum\n\n750 In sem. ante Sed semper. In ut purus\n\n751 Vitae Vivamus pharetra velit. sem. ipsum fames\n\n752 Elit. iaculis. iaculis. velit. purus sit sit\n\n753 Orci faucibus. Vivamus elit. elementum ante neque. est Integer orci aliquam primis aliquam\n\n754 Orci pretium efficitur elementum amet, libero orci, eget dolor ac Fusce quis, orci, elit.\n\n755 Amet, scelerisque nec velit. in\n\n756 Quis, velit. ante nunc elementum et ut volutpat molestie ut\n\n757 Fringilla et metus nec condimentum orci felis. orci in\n\n758 Sagittis rutrum semper. ante pharetra ipsum rutrum dolor adipiscing ac consectetur\n\n759 Efficitur ut ipsum consectetur Duis\n\n760 Vivamus rutrum malesuada consectetur ligula Integer velit. amet, massa, malesuada fames viverra finibus bibendum,\n\n761 Ante in dolor eget Sed nunc ac est\n\n762 Fusce Fusce ipsum Sed massa, ac pretium enim adipiscing ac\nLorem est enim\n\n763 In\nLorem amet, eget hendrerit\n\n764 Ut libero fames nec efficitur condimentum volutpat pharetra Vivamus\n\n765 In, adipiscing eget eget velit. et ligula in vitae Sed\n\n766 Dolor iaculis. efficitur ac ac neque. volutpat Vivamus enim\n\n767 Massa Ut volutpat ante est enim\n\n768 Semper felis. nunc malesuada efficitur enim quis, ante pretium ac enim enim\n\n769 Est Sed ante elit. Fusce aliquam metus in semper. ac efficitur vitae in ac\n\n770 Integer eget\nLorem malesuada semper\n\n771 Viverra elementum nec efficitur orci Integer Fusce\n\n772 Elementum ac semper. felis. elementum enim ac iaculis. fringilla Sed ante enim adipiscing elit. malesuada\n\n773 Purus bibendum, Duis vitae tincidunt.\nLorem et pharetra volutpat primis\n\n774 In nunc Ut in ac sagittis massa In libero consectetur ac posuere scelerisque\n\n775 Tincidunt. aliquam Sed volutpat scelerisque purus aliquam ut\n\n776 In ante hendrerit in in scelerisque ac\nLorem efficitur Integer\nLorem finibus neque. bibendum,\n\n777 Velit. felis. sem. purus Integer pharetra ac molestie condimentum est consectetur condimentum\n\n778 Consectetur dui ipsum Sed elementum efficitur eget elit. semper\n\n779 Massa ac velit. pharetra finibus bibendum, aliquam elit. eget dui felis. consectetur orci,\n\n780 Ante libero primis ac iaculis. dolor malesuada efficitur\n\n781 Scelerisque ante Ut semper pretium ac purus\n\n782 Sed semper. primis et Integer in vel velit.\n\n783 In, aliquam hendrerit orci, felis.\n\n784 In tincidunt. sem. in in, fames libero et Vivamus adipiscing consectetur\n\n785 In amet, aliquam ligula in nunc dolor Fusce\n\n786 Libero dui malesuada consectetur ac rutrum\n\n787 Interdum sit Integer quis, ac ante posuere tincidunt.\n\n788 Vivamus et Mauris felis. ante in massa molestie Sed in sit\n\n789 Ac rutrum sem. sem. Sed purus ipsum ipsum\n\n790 Ligula in, pretium orci orci, finibus orci, sagittis et efficitur sem. libero fames velit. ac\n\n791 Condimentum in vitae in ipsum efficitur bibendum, et ligula\n\n792 Felis. est ipsum purus felis. in, vel semper purus iaculis. primis quis, sit\n\n793 Quis, Duis nec in ac Vivamus est velit. volutpat\n\n794 Iaculis. finibus elit. dolor purus adipiscing felis. ante fringilla neque.\n\n795 Tincidunt. elit. et ut sagittis et\n\n796 Finibus Interdum Mauris volutpat bibendum, scelerisque ac libero purus bibendum, bibendum, molestie\n\n797 Orci, semper ut neque. viverra et quis, sit\n\n798 Eget faucibus. hendrerit bibendum, Integer ac semper est Fusce fringilla\n\n799 Aliquam pretium Integer in sem. malesuada sagittis\n\n800 Ac Sed velit. dolor est\n\n801 In felis. vitae Ut dui ac sem. orci, hendrerit Vivamus finibus orci\n\n802 Viverra semper. in nec fringilla ipsum Vivamus ante elementum sem. purus efficitur in, est\n\n803 Posuere iaculis. neque. ante tincidunt. ipsum elementum amet, vel ipsum faucibus. ut ut\n\n804 Dui Fusce felis. et Vivamus scelerisque iaculis. In Duis tincidunt.\n\n805 Amet, adipiscing Mauris in amet, lorem orci ac metus\n\n806 Pharetra elit. metus Fusce efficitur\n\n807 Neque. elit. viverra quis, eget sagittis rutrum ante tortor consectetur malesuada Mauris\n\n808 Efficitur pretium in ante eget sem. dolor scelerisque vitae condimentum efficitur\n\n809 Et scelerisque pretium ante primis Fusce\n\n810 Vivamus purus quis, libero Interdum efficitur sit nec molestie volutpat\n\n811 Finibus neque. ligula metus fames\n\n812 Ut Interdum elementum Ut ac pretium et consectetur ac pretium primis fames semper\n\n813 In metus ante tortor\nLorem fames\n\n814 Ac elit. fames pharetra Integer Duis est\n\n815 Vel semper. fames ac nunc faucibus. Ut Duis\n\n816 Purus viverra Vivamus Interdum scelerisque massa, et ut bibendum,\n\n817 Nec orci massa faucibus. rutrum et metus efficitur ante quis, tincidunt.\n\n818 In elit. adipiscing sem. Sed elementum libero condimentum Integer et ipsum Fusce et fringilla\nLorem\n\n819 Ipsum ac scelerisque hendrerit adipiscing Vivamus iaculis. ante\nLorem vel ante et\n\n820 Consectetur elit. ante scelerisque orci, posuere ligula in pretium\n\n821 Efficitur libero ut in sem. eget ante pharetra\n\n822 Elementum In ac ipsum Duis est amet, faucibus.\n\n823 Faucibus. finibus dolor Ut elit. ac ac et\n\n824 Metus Mauris malesuada Fusce vel\n\n825 Est semper ante purus Integer Duis massa,\n\n826 In et orci dui ut metus\n\n827 Massa sem. In ut adipiscing In orci, ac ac Ut ipsum ac viverra et\n\n828 Velit. felis. massa, consectetur enim elementum sem. massa, consectetur ante sit\n\n829 Bibendum, consectetur consectetur velit. purus sagittis neque. quis, nec\n\n830 Orci fringilla hendrerit malesuada rutrum\n\n831 Pretium felis. bibendum, efficitur ut ipsum in molestie amet, ut elit. pretium velit.\n\n832 Ut semper. ante Vivamus nunc Duis In felis. dui est\n\n833 Bibendum, ut et Fusce velit. nunc adipiscing fames\n\n834 Ac ut orci, massa, elit. felis.\n\n835 Ac iaculis. tincidunt. ipsum Sed sit finibus Vivamus eget quis, adipiscing\nLorem\n\n836 Volutpat viverra quis, ante in, pharetra faucibus. ante dui tincidunt. primis Ut\n\n837 Fusce consectetur metus hendrerit adipiscing semper posuere volutpat iaculis.\n\n838 Amet, ac sit posuere orci Vivamus aliquam\n\n839 Vel in enim rutrum viverra viverra neque. et pretium\n\n840 Interdum consectetur iaculis. primis scelerisque pretium libero semper fames Interdum elit.\n\n841 Semper scelerisque lorem vitae ante Fusce in, eget\n\n842 Metus fringilla ac nunc Vivamus eget primis aliquam Fusce dolor\n\n843 Velit. semper neque. bibendum, Duis vitae est consectetur\n\n844 Volutpat malesuada lorem ante tortor est ipsum ante vitae Ut metus metus et\n\n845 Eget sit fames ac orci, malesuada sagittis in pharetra elit. Duis efficitur iaculis. ac\n\n846 Elit. dui faucibus. et ante in, faucibus. est ac ac posuere sit semper.\n\n847 Aliquam Ut semper. ut velit. condimentum purus nunc tortor aliquam Duis massa Vivamus\n\n848 Viverra et in primis ante velit.\n\n849 Ut ut ligula bibendum, tincidunt. ac dolor dui iaculis. et\n\n850 Orci ac quis, velit. in iaculis. primis metus Interdum hendrerit et eget vel\n\n851 Condimentum viverra dui metus tortor amet, elit. adipiscing ipsum dui orci Duis\n\n852 Vitae in ut Mauris semper. orci et posuere ut dui\n\n853 Pretium semper. amet, aliquam molestie ac lorem adipiscing est neque. metus ligula in\nLorem Duis\n\n854 Metus est Interdum dolor amet, dui posuere\n\n855 Neque. molestie Ut rutrum et\n\n856 Efficitur tincidunt. in, ut semper elit. tincidunt. nunc massa, in efficitur\n\n857 Dolor libero tincidunt. Vivamus pharetra vitae vitae et efficitur in orci Ut iaculis. aliquam ut\n\n858 Ac et Integer Integer in hendrerit Duis\n\n859 Enim ante et semper. tortor\n\n860 Orci, orci dui semper. pretium elit. elementum enim consectetur ut lorem orci ut\n\n861 Dui in sit quis, neque. ut viverra sit pretium\n\n862 Massa, et elit. Sed ac hendrerit ante\n\n863 Ante ac consectetur semper. efficitur malesuada tincidunt. sit sit tincidunt. volutpat iaculis.\n\n864 Massa ante lorem ac ac bibendum, ac pretium sem. finibus\n\n865 Integer ante sit\nLorem velit. enim orci In condimentum\n\n866 Nec pharetra condimentum ipsum efficitur\n\n867 Vitae\nLorem et Mauris ut ipsum metus et massa\n\n868 Amet, bibendum, elit. molestie primis malesuada ipsum malesuada\n\n869 Vivamus hendrerit tincidunt. Integer est\n\n870 Hendrerit elementum in ipsum ac\n\n871 Amet, semper molestie primis elit. elementum massa felis. elementum libero consectetur\n\n872 Efficitur felis. semper. Ut amet, ac dolor ipsum massa,\n\n873 Purus consectetur elit. fringilla massa, adipiscing metus ac vel\n\n874 Ligula consectetur ante Integer faucibus. dolor Duis ac Mauris in Sed eget et sit Fusce\n\n875 Vivamus faucibus. in, Interdum posuere Interdum velit. elit.\n\n876 Faucibus. neque. vitae malesuada et Mauris ante\n\n877 In metus adipiscing primis dui amet, malesuada molestie hendrerit\n\n878 In ut finibus semper faucibus. consectetur ac Mauris ac Fusce ante ante tortor aliquam\n\n879 Vel ac hendrerit fames rutrum massa, ut ac dui et purus ut Integer neque. Mauris\n\n880 Dolor elit. dolor in iaculis.\n\n881 Enim in orci orci quis,\nLorem purus Sed\n\n882 Consectetur massa ante Sed sagittis\n\n883 Fringilla eget ante nunc aliquam Fusce ac eget Sed malesuada elementum elit. elementum vel\n\n884 Nec felis.\nLorem fringilla ac malesuada sit nec neque. volutpat ac fringilla neque. iaculis. consectetur\n\n885 In finibus Integer nunc in velit.\n\n886 Libero Mauris tincidunt. ante finibus Fusce in eget Sed nec purus ante tortor tincidunt. velit.\n\n887 Sit lorem consectetur elit. Mauris ligula ante\nLorem lorem viverra aliquam ante adipiscing Duis\n\n888 Consectetur malesuada In vitae molestie\n\n889 Fusce faucibus. sem. viverra iaculis. ante vel in semper. consectetur semper\n\n890 Ac purus semper est sagittis purus faucibus.\n\n891 Ipsum elit. consectetur quis, sagittis Mauris ante massa, et elit. eget adipiscing ac orci fringilla\n\n892 Purus ac ac velit. tortor ac purus Ut sagittis\n\n893 Interdum fames tortor condimentum faucibus. Mauris bibendum, ligula libero\n\n894 Ut in, hendrerit ipsum ipsum primis nec ac\nLorem posuere dui volutpat\n\n895 In sit efficitur Integer scelerisque\n\n896 In, Mauris efficitur massa et sit ante et Interdum sagittis in\n\n897 Semper posuere Ut eget Vivamus Mauris et ante Duis orci,\n\n898 Nec sit elit. neque. posuere sit eget\n\n899 Ut quis, viverra pretium volutpat tortor massa Integer aliquam\n\n900 Efficitur orci, consectetur nunc in\n\n901 Massa bibendum, scelerisque aliquam adipiscing elit. et in\n\n902 Est Sed in consectetur pretium Vivamus in\n\n903 Condimentum iaculis. pharetra ac eget sagittis sit lorem pretium enim amet,\n\n904 Semper in libero ac fringilla Ut posuere\n\n905 Ac Vivamus semper. consectetur ipsum orci amet, Interdum posuere elementum quis, Vivamus\n\n906 Ligula metus molestie Interdum et quis,\n\n907 Adipiscing consectetur ac ante elit. in, in ante ligula velit. ante efficitur orci elit.\n\n908 Metus ut ac elementum posuere est in, malesuada nec in ac\n\n909 Orci, fames posuere posuere orci elit. ante et finibus faucibus. aliquam sagittis sem. dui nunc\n\n910 Consectetur ligula velit. ante\nLorem nec Sed metus Duis libero bibendum,\n\n911 Ante posuere elementum et ac pharetra ac ut Ut volutpat sem.\n\n912 Fusce iaculis. semper. ante viverra fringilla nec consectetur ante bibendum, Duis In viverra vel metus\n\n913 Amet, molestie amet, elit. velit.\n\n914 Sagittis Integer in eget ipsum ac posuere semper\n\n915 Lorem ac ac semper Ut ac massa aliquam ipsum efficitur metus Interdum Fusce elementum In\n\n916 Hendrerit rutrum rutrum orci, Fusce ante\n\n917 Ac tortor consectetur finibus elit. eget malesuada\n\n918 Dolor semper. adipiscing nunc in quis, Fusce molestie\n\n919 Ut molestie ac elementum molestie scelerisque aliquam ac fringilla ac aliquam metus sagittis est\n\n920 Metus adipiscing molestie lorem nunc elit. Interdum in iaculis. eget bibendum,\n\n921 Faucibus. enim Ut consectetur pretium ante ligula sem. ac tincidunt.\n\n922 Consectetur efficitur molestie ut in Fusce eget in quis, hendrerit orci, elementum\n\n923 Tortor orci ipsum elit. sagittis bibendum, consectetur In ut ipsum elit.\n\n924 Et viverra fames consectetur ligula Interdum faucibus. elementum\n\n925 Molestie hendrerit elit. sem. malesuada elit. ante efficitur efficitur Duis pretium elit. velit. bibendum,\n\n926 Est elit. adipiscing metus faucibus. pretium Ut finibus orci, neque. eget vel bibendum, sem.\n\n927 Ante ac semper. ipsum efficitur aliquam orci bibendum, Sed\n\n928 Ipsum elit. neque. in\nLorem semper. libero ipsum nunc nunc iaculis.\n\n929 Nunc massa, scelerisque in sit sit aliquam ac semper in felis.\n\n930 Ut in consectetur Mauris semper. efficitur Sed tortor massa Ut ac iaculis. vitae\n\n931 Metus et purus Ut hendrerit sagittis ligula ipsum ipsum ante elit. ligula\n\n932 Condimentum ligula consectetur massa pharetra semper ipsum elit. est in consectetur in in adipiscing\n\n933 Finibus et vitae elit. sagittis purus finibus orci purus in faucibus. adipiscing efficitur\n\n934 Vitae ac in, efficitur primis consectetur amet, dolor eget adipiscing elit.\n\n935 Felis. massa in neque. sagittis vitae massa, rutrum efficitur sagittis Vivamus ac eget\n\n936 Nec ac velit. Integer primis massa, pharetra ac bibendum, purus orci ut\n\n937 In libero aliquam\nLorem consectetur\n\n938 Orci, ut consectetur dui massa enim posuere orci, hendrerit ac semper malesuada tortor felis. tincidunt.\n\n939 In Duis aliquam ac Interdum malesuada pharetra metus posuere Duis efficitur consectetur et nec finibus\n\n940 Massa, nunc sit ipsum eget elementum ut\n\n941 Viverra libero in, ac Sed ante fringilla Mauris neque. semper adipiscing sit in\n\n942 Mauris primis Integer ut ipsum ligula quis, est\n\n943 Ac\nLorem felis. orci viverra sit ante viverra condimentum volutpat dui ligula\n\n944 Fringilla Vivamus volutpat posuere bibendum, adipiscing purus iaculis. ac\n\n945 Vivamus massa Interdum primis Mauris Vivamus condimentum faucibus. nunc adipiscing\n\n946 Tortor libero ligula viverra in massa, Sed consectetur velit. volutpat nec\n\n947 Iaculis. molestie et adipiscing dui Vivamus efficitur eget est\n\n948 Ante semper. nec iaculis. consectetur fames Vivamus ac ac\n\n949 Duis pretium sit in, in posuere faucibus. molestie ut\n\n950 Elementum ante libero semper. elit. est orci, dolor tortor pretium ipsum neque. elementum ac\n\n951 Interdum Duis enim felis. ut\n\n952\nLorem fringilla efficitur eget eget libero malesuada velit. faucibus. metus\n\n953 Ac viverra metus neque. Ut Interdum posuere dolor Sed et Sed et velit. eget\n\n954 Elit. metus orci iaculis. orci tortor tincidunt. semper.\n\n955 In, ante hendrerit massa fringilla fringilla sagittis ligula Ut Interdum faucibus.\n\n956 Integer ante Duis volutpat enim ac lorem eget vel faucibus. consectetur efficitur\n\n957 Dui ante consectetur fames sagittis pretium ac adipiscing semper eget quis, consectetur pharetra iaculis.\n\n958 Ac iaculis. condimentum molestie eget\n\n959 Duis neque. tincidunt. ac sem. posuere volutpat dolor Ut\n\n960 Finibus efficitur ac ante neque. sagittis Ut dolor vel rutrum\n\n961 Consectetur in malesuada adipiscing sit ante adipiscing amet, quis, In ac malesuada\nLorem pretium nec\n\n962 Ante tincidunt. In fringilla rutrum amet, massa Fusce\n\n963 Elit. Integer in, metus dolor eget vel Vivamus orci, Sed pharetra in\n\n964 Dolor nunc metus in, primis consectetur dolor sit elit. in orci, ut massa,\n\n965 Orci, in tincidunt. primis ac\nLorem\n\n966 Ipsum consectetur eget semper in lorem nec consectetur dui massa elit. Interdum\nLorem ante\n\n967 Consectetur Sed primis Duis sagittis velit. enim massa, purus amet, est sagittis ipsum vel\n\n968 Ut dui sem. nec hendrerit\n\n969 Ante elit. vitae ante et efficitur efficitur elit. quis, et in adipiscing rutrum consectetur ante\n\n970 Velit. et aliquam hendrerit semper ac in elit. in ante hendrerit Sed ac\n\n971 Ipsum in, efficitur orci condimentum bibendum, finibus et Ut semper aliquam massa purus semper.\n\n972 Sit tortor posuere\nLorem efficitur efficitur in felis. ante eget purus adipiscing ipsum aliquam\n\n973 Libero ligula scelerisque purus finibus faucibus. enim Duis faucibus. ipsum tortor sit\n\n974 Ac lorem hendrerit ipsum hendrerit ligula Vivamus adipiscing ante condimentum Vivamus est ligula eget pretium\n\n975 Sit elementum In ac aliquam dui faucibus. quis, elit. in volutpat ligula est Duis\n\n976 Semper. condimentum Vivamus Interdum eget elit. orci,\n\n977 In velit. in vel efficitur Sed viverra ac quis, in, Interdum primis elit.\n\n978 Velit. in purus in, orci Mauris quis, Sed\n\n979 Sem. ut semper. ligula est viverra sagittis\n\n980\nLorem ipsum Mauris eget pharetra Fusce ligula\n\n981 Fames et Ut in aliquam\n\n982 Consectetur in neque. neque. vitae ante ante faucibus. velit. nec\n\n983 Semper in viverra molestie efficitur eget malesuada consectetur fames ut in molestie dui ut\n\n984 Sagittis pretium Duis dui massa\n\n985 Mauris dolor fames volutpat primis posuere molestie Mauris fringilla tortor semper\n\n986 Vivamus ante et ante efficitur primis Duis ac condimentum ante aliquam molestie sit elit.\n\n987 Ac Mauris neque. fringilla orci, hendrerit neque.\n\n988 Sit ligula sagittis hendrerit efficitur adipiscing hendrerit\n\n989 Consectetur Vivamus pharetra posuere ac in, pretium ligula pharetra faucibus. ac\nLorem Sed\n\n990 Sit Duis aliquam faucibus. in libero faucibus. condimentum elit. velit. adipiscing Integer orci consectetur ipsum\n\n991 Pretium posuere lorem sem. massa, bibendum,\n\n992 Ante tortor pharetra neque. metus fames Vivamus sagittis semper. efficitur neque. sagittis elit.\n\n993 Faucibus. est hendrerit scelerisque Fusce primis consectetur metus ante\n\n994 Ac lorem condimentum efficitur pretium molestie ut nec hendrerit scelerisque Fusce In fringilla hendrerit\n\n995 In semper pharetra Sed aliquam condimentum efficitur ante\n\n996 Faucibus. ac efficitur neque. iaculis. aliquam efficitur scelerisque ut consectetur In ut In rutrum libero\n\n997 Sed metus fringilla in consectetur In\n\n998 Elit. lorem adipiscing Vivamus consectetur\n\n999 In efficitur efficitur massa condimentum hendrerit tortor elit. ac Fusce Ut hendrerit\n\n1000 Volutpat nunc vel volutpat scelerisque vitae lorem elementum\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| aria-label | string | — | Accessible label applied to the dropdown toggle button. |\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| iconName | string | — | Optional rioglyph icon name forwarded to the underlying button toggle. |\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"
@@ -494,7 +494,7 @@
     "title": "HTML table",
     "lead": "These helpers are intended for table implementations that render native <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements.",
     "summary": "These helpers are intended for table implementations that render native <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements.",
-    "searchText": "HTML table\nThese helpers are intended for table implementations that render native <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements.\nHTML table\nInfo: In order to have proper alignment of table cell content for list and cards view, it is required to wrap the content in a <spantag.\n\nInfo\n\nSee also our table controls for shared toolbar and search components, and Table component for the grid-based table component and related demos.\nTable\nCommon table style\nLabel New Action\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nLabel Table view\nCards view\nList view\n\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nTable head\nDefault table head style\n\nColumn head Column head Column head Column head\n\nColumn Column Column Column\n\nAlternative table head\n\nColumn head Column head Column head Column head\n\nColumn Column Column Column\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 head Column head Column head Column head\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nNew Button\n\nFilter\n\nTable view\nCards view\nList view\n\nId Name VIN Status Duration\n\n233 Ipsum No data Inactive 5h 15m\n\n456 No data 456 Active 4h 55m\n\n878 No data 878 Active 9h 10m\n\n895 No data 895 Active 8h 45m\n\n978 Ipsum No data Inactive 6h 35m\n\n2345 Lorem 2345 Active 11h 50m\n\n2445 No data 2445 Active 7h 25m\n\n3456 No data 3456 Active 12h 00m\n\n4567 No data 4567 Active 10h 20m\n\n7354 Lorem 7354 Active 10h 30m\n\n70 / 100\n\nLoad more\nTableSettingsDialog - column sort only\nLabel Table view\nCards view\nList view\n\nId Name VIN Status\n\n233 Ipsum No data Inactive\n\n895 No data 895 Active\n\n7354 Lorem 7354 Active\nTableRowSelection (Multiselect)\nTable view\nCards view\nList view\n\nId Name VIN Manufacturer\n\n7354 Elit.\nLorem eget 0123abc MAN\n\n7355 Dui amet, sit elit. 1123abc MAN\n\n7356 Sit amet, ipsum dolor elit. 2123abc MAN\n\n7357 Dui sit dolor 3123abc MAN\n\n7358 Eget elit. 4123abc MAN\n\n7359\nLorem amet, ipsum\nLorem dolor 5123abc MAN\n\n7360 Dui dolor dui amet, 6123abc MAN\n\n7361 Ipsum amet, sit sit ipsum 7123abc MAN\n\n7362\nLorem dui\nLorem 8123abc MAN\n\n7363 Eget elit. dolor 9123abc MAN\nNative table style variants\nBordered table\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nStriped table\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nHover table\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nCondensed table\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\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 column Head column Head column Head column Head column\n\nEvery column has a different length of content but the width of each colum is always the same\nEvery column has a different length of content but the width of each colum is always the same\nEvery column has a different length of content but the width of each colum is always the same\nEvery column has a different length of content but the width of each colum is always the 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\nNew Button\n\nFilter\n\nTable view\nCards view\nList view\n\nId Id\nName\nVIN\nStatus\nDuration\n\nId Name VIN Status Duration\n\n233 Ipsum No data Inactive 5h 15m\n\n456 No data 456 Active 4h 55m\n\n878 No data 878 Active 9h 10m\n\n895 No data 895 Active 8h 45m\n\n978 Ipsum No data Inactive 6h 35m\n\n2345 Lorem 2345 Active 11h 50m\n\n2445 No data 2445 Active 7h 25m\n\n3456 No data 3456 Active 12h 00m\n\n4567 No data 4567 Active 10h 20m\n\n7354 Lorem 7354 Active 10h 30m\n\n70 / 100\n\nLoad more\nStates in tables\nHead column Head column Head column Head column Head column\n\nNo entries found\nWe could not find any data entries for your search query. Please refine your search\nGrouped table\nHead column Head column Head column Head column\n\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column\nExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column\nExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nTable grid lines\nShowing table grid lines my be used in data heavy tables also known as DataTables.\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nSticky table header\nSticky column head Sticky column head Sticky column head Sticky column head\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nSticky table columns\nHead Head Head Head Head Head Head Head Head\n\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nHead Head Head Head Head Head Head Head Head\n\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nTable row span\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column\nColumn Column Column Column\nColumn Column Column\nTable double row header\nDouble row header with filled header\nScores\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\n\nDouble row header with border and footer\nYears\n2021 2022 2023 2024 2025\n\nProduct 1 Income 50 70 80 90 100\nExpense 37 63 70 82 91\nProfit 13 7 10 8 9\n\nProduct 2 Income 50 67 79 90 54\nExpense 33 70 50 79 30\nProfit 17 -3 19 12 21\n\nTotal Profit 30 4 29 20 30",
+    "searchText": "HTML table\nThese helpers are intended for table implementations that render native <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements.\nHTML table\nInfo: In order to have proper alignment of table cell content for list and cards view, it is required to wrap the content in a <spantag.\n\nInfo\n\nSee also our table controls for shared toolbar and search components, and Table component for the grid-based table component and related demos.\nTable\nCommon table style\nLabel New Action\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n12:00 AM\n\nLabel Table view\nCards view\nList view\n\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nTable head\nDefault table head style\n\nColumn head Column head Column head Column head\n\nColumn Column Column Column\n\nAlternative table head\n\nColumn head Column head Column head Column head\n\nColumn Column Column Column\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 head Column head Column head Column head\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nNew Button\n\nFilter\n\nTable view\nCards view\nList view\n\nId Name VIN Status Duration\n\n233 Ipsum No data Inactive 5h 15m\n\n456 No data 456 Active 4h 55m\n\n878 No data 878 Active 9h 10m\n\n895 No data 895 Active 8h 45m\n\n978 Ipsum No data Inactive 6h 35m\n\n2345 Lorem 2345 Active 11h 50m\n\n2445 No data 2445 Active 7h 25m\n\n3456 No data 3456 Active 12h 00m\n\n4567 No data 4567 Active 10h 20m\n\n7354 Lorem 7354 Active 10h 30m\n\n70 / 100\n\nLoad more\nTableSettingsDialog - column sort only\nLabel Table view\nCards view\nList view\n\nId Name VIN Status\n\n233 Ipsum No data Inactive\n\n895 No data 895 Active\n\n7354 Lorem 7354 Active\nTableRowSelection (Multiselect)\nTable view\nCards view\nList view\n\nId Name VIN Manufacturer\n\n7354 Elit. dolor\nLorem dolor ipsum 0123abc MAN\n\n7355 Amet, dui 1123abc MAN\n\n7356 Eget amet, eget 2123abc MAN\n\n7357 Dolor amet, ipsum 3123abc MAN\n\n7358 Dui amet, amet, ipsum 4123abc MAN\n\n7359 Amet, elit.\nLorem elit. 5123abc MAN\n\n7360 Elit. amet, ipsum 6123abc MAN\n\n7361 Ipsum amet, dolor elit. 7123abc MAN\n\n7362 Ipsum elit. eget 8123abc MAN\n\n7363 Elit. dolor sit\nLorem\nLorem 9123abc MAN\nNative table style variants\nBordered table\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nStriped table\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nHover table\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nCondensed table\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\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 column Head column Head column Head column Head column\n\nEvery column has a different length of content but the width of each colum is always the same\nEvery column has a different length of content but the width of each colum is always the same\nEvery column has a different length of content but the width of each colum is always the same\nEvery column has a different length of content but the width of each colum is always the 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\nNew Button\n\nFilter\n\nTable view\nCards view\nList view\n\nId Id\nName\nVIN\nStatus\nDuration\n\nId Name VIN Status Duration\n\n233 Ipsum No data Inactive 5h 15m\n\n456 No data 456 Active 4h 55m\n\n878 No data 878 Active 9h 10m\n\n895 No data 895 Active 8h 45m\n\n978 Ipsum No data Inactive 6h 35m\n\n2345 Lorem 2345 Active 11h 50m\n\n2445 No data 2445 Active 7h 25m\n\n3456 No data 3456 Active 12h 00m\n\n4567 No data 4567 Active 10h 20m\n\n7354 Lorem 7354 Active 10h 30m\n\n70 / 100\n\nLoad more\nStates in tables\nHead column Head column Head column Head column Head column\n\nNo entries found\nWe could not find any data entries for your search query. Please refine your search\nGrouped table\nHead column Head column Head column Head column\n\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column\nExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column\nExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nTable grid lines\nShowing table grid lines my be used in data heavy tables also known as DataTables.\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nSticky table header\nSticky column head Sticky column head Sticky column head Sticky column head\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nSticky table columns\nHead Head Head Head Head Head Head Head Head\n\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nHead Head Head Head Head Head Head Head Head\n\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nTable row span\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column\nColumn Column Column Column\nColumn Column Column\nTable double row header\nDouble row header with filled header\nScores\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\n\nDouble row header with border and footer\nYears\n2021 2022 2023 2024 2025\n\nProduct 1 Income 50 70 80 90 100\nExpense 37 63 70 82 91\nProfit 13 7 10 8 9\n\nProduct 2 Income 50 67 79 90 54\nExpense 33 70 50 79 30\nProfit 17 -3 19 12 21\n\nTotal Profit 30 4 29 20 30",
     "category": "Components",
     "section": "Table",
     "boost": "HTML table components/htmlTable #components/htmlTable Components Table"
@@ -714,7 +714,7 @@
     "title": "Multiselect",
     "lead": "The Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.",
     "summary": "The Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.",
-    "searchText": "Multiselect\nThe Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.\nMultiselect\nThis component allows the selection of multiple items from a list.\n\nIf no item is selected in the list a default placeholder text is displayed in the box. Otherwise the items are listed in the box. If the item list is too long for the box, it is truncated and an ellipsis is displayed.\n\nA maximum of seven items is displayed in the list at a time. If the list contains more that 6 items, a scrollbar is added in order to limit the height of the list.\n\nThis component supports items with icons and labels.\nDefault Multiselect Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9 with clear button Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9 Disabled Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\n\nwith external error feedback Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9 This is an error message\n\nwith built-in error feedback\nOption 1 Option 4 This is an error message\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nWith label component\nPlease select vehicles\n\nTruck\nVan\nBus\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nMultiline with wrapping items\nOption 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 8\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\nOption 10\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nWith selected item counter Please select Option 1\nOption 2\nOption 3 With selected item counter render function - Note: \"counterMessage\" should be favored Please select Option 1\nOption 2\nOption 3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nInline: Please select vehicles Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nPlease select vehicles Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nFull width: Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nPlease select Option 1\nOption 2\nOption 3\nOption 4\n\nPlease select Option 1\nOption 2\nOption 3\nOption 4\n\nOption 1\nOption 2\nOption 3\nOption 4\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |",
+    "searchText": "Multiselect\nThe Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.\nMultiselect\nThis component allows the selection of multiple items from a list.\n\nIf no item is selected in the list a default placeholder text is displayed in the box. Otherwise the items are listed in the box. If the item list is too long for the box, it is truncated and an ellipsis is displayed.\n\nA maximum of seven items is displayed in the list at a time. If the list contains more that 6 items, a scrollbar is added in order to limit the height of the list.\n\nThis component supports items with icons and labels.\nDefault Multiselect Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9 with clear button Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9 Disabled Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\n\nwith external error feedback Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9 This is an error message\n\nwith built-in error feedback\nOption 1 Option 4 This is an error message\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nWith label component\nPlease select vehicles\n\nTruck\nVan\nBus\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nMultiline with wrapping items\nOption 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 8\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\nOption 10\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nWith selected item counter Please select Option 1\nOption 2\nOption 3 With selected item counter render function - Note: \"counterMessage\" should be favored Please select Option 1\nOption 2\nOption 3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nInline: Please select vehicles Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nPlease select vehicles Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nFull width: Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nPlease select Option 1\nOption 2\nOption 3\nOption 4\n\nPlease select Option 1\nOption 2\nOption 3\nOption 4\n\nOption 1\nOption 2\nOption 3\nOption 4\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nMultiselect with incrementally loaded options Please select shipment states No matching shipment state\n\nLoad options in two steps Reset\nNo options loaded\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |",
     "category": "Components",
     "section": "Selection",
     "boost": "Multiselect components/multiselects #components/multiselects Components Selection"
@@ -904,7 +904,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\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 values Clear 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‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\nControlled - Stay open on invalid (default)\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n04:57\n\nSaved value:\n\nControlled - With error\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹ 2026 ›\n\nJan Feb Mar Apr\nMay Jun Jul Aug\nSep Oct Nov Dec\n\nSaveableDateInput (disabled)\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n4:57 PM\n### SaveableDateInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| value | Date \\| Moment \\| string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: Moment \\| string, previousValue: Moment \\| string \\| Date) =void | — | Callback function triggered when the value changes and is saved. |\n| onInputChange | (value: Moment \\| string, isValid: boolean) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component and to handle the previous value on the outside. |\n| onExitEdit | (wasSaved: boolean) =void | — | Callback function that gets triggered when edit mode is exited (either saved or cancelled). |\n| onCancel | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| invalidExitBehavior | 'stay-open' \\| 'reset-and-close' | 'stay-open' | Behavior when trying to exit edit mode with invalid input: - 'stay-open': Keep edit mode open until valid input is provided - 'reset-and-close': Close edit mode and reset to initial value |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | {} | Additional props passed to the underlying DatePicker component. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
+    "searchText": "SaveableInput\nSaveableInput\nSaveableInput\n\nSaveableInput with value\n\nSaveableInput with previous value\nDolor sit amet\n\nSaveableInput with fixed previous value\nYou shall not pass\n\nSaveableInput with default button style\n\nSaveableInput with unit and icon\nPcs\n\nSaveableInput with feedback\nLab\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 values Clear 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‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\nControlled - Stay open on invalid (default)\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n02:13\n\nSaved value:\n\nControlled - With error\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹ 2026 ›\n\nJan Feb Mar Apr\nMay Jun Jul Aug\nSep Oct Nov Dec\n\nSaveableDateInput (disabled)\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n2:13 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"
@@ -1064,7 +1064,7 @@
     "title": "Table controls",
     "lead": "The toolbar and its content has to be implemented by each team itself. Please use the sample as a reference and adapt it accordingly.",
     "summary": "The toolbar and its content has to be implemented by each team itself. Please use the sample as a reference and adapt it accordingly.",
-    "searchText": "Table controls\nThe toolbar and its content has to be implemented by each team itself. Please use the sample as a reference and adapt it accordingly.\nTable controls\nThese controls can be used with both Table component and HTML table components.\nTableToolbar\nTableToolbar label\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nTableToolbar button\n\nTableToolbar label\n\nTable view\nCards view\nList view\n### TableToolbar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Optional class names for the wrapper element. |\n| collapseCardClassName | string | — | Optional class names for the card that wraps collapsed toolbar controls in the compact mobile layout. |\n| responsiveCollapseBreakpoint | number | 544 | Optional toolbar width in pixels at which the toolbar switches into its compact mobile/collapsible layout. |\n| disableResponsiveCollapse | boolean | false | Disables the compact mobile/collapsible toolbar layout. Use this as an escape hatch when a consuming service needs to keep the default wrapping toolbar behavior regardless of the available toolbar width. |\n### TableCardsSorting\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| sortName | string | — | \"Name\", \"Key\", or \"Id\" of the current sorted column. |\n| sortOrder | 'asc' \\| 'desc' | 'asc' | Defines the sort direction. |\n| selectOptions | TableCardsSortingOption[] | — | List of objects for the column name select component. |\n| └id | string | — | ID to use for the select option. |\n| └label | string \\| React.ReactNode | — | Translated column label to be shown in the select. |\n| └selected | boolean | — | Defines the column which is currently sorted by. |\n| └disabled | boolean | — | Defines if the column can be sorted. Hence, it will be disabled in the select. |\n| onSortChange | (name: string, order: 'asc' \\| 'desc') =void | noop | Function that is called when the sort key or direction changes. |\n| className | string | — | Optional class names for the wrapper element. |\nTableSearch\nID\n\nName\n\nStatus\n\n7354\n\nVehicle 7354\n\nActive\n\n233\n\nVehicle 233\n\nInactive\n\n895\n\nVehicle 895\n\nActive\n\n3456\n\nVehicle 3456\n\nActive\n### TableSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Optional class names for the wrapper. |\n| ...additional props |  | — | As this component is using the ClearableInput component internally, checkout all possible props there. |\nTableViewToggles\nTable view\nCards view\nList view\n\nID\n\nName\n\nStatus\n\n7354\n\nVehicle 7354\n\nActive\n\n233\n\nVehicle 233\n\nInactive\n\n895\n\nVehicle 895\n\nMaintenance\n### TableViewToggles\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| viewType | TableViewTogglesViewType | — | The current viewType for controlling the TablesViewToggles component. Possible values are: 'SINGLECARD' 'MULTICARDS' 'TABLE' TableViewToggles.VIEWTYPETABLE TableViewToggles.VIEWTYPESINGLECARD TableViewToggles.VIEWTYPEMULTICARDS |\n| initialViewType | TableViewTogglesViewType | TableViewToggles.VIEWTYPETABLE | Defines the initial viewType (when viewType is not controlled from the outside). Possible values are: 'SINGLECARD' 'MULTICARDS' 'TABLE' TableViewToggles.VIEWTYPETABLE TableViewToggles.VIEWTYPESINGLECARD TableViewToggles.VIEWTYPEMULTICARDS |\n| disabledViewTypes | TableViewTogglesViewType[] | [] | Defines the view types which shall not be supported and are omitted. |\n| onViewTypeChange | (viewType: TableViewTogglesViewType) =void | — | Callback function for when the user wants to change the viewType. Receives the new type as an argument. |\n| tableViewTooltipContent(deprecated) | string \\| ReactNode | — | Optional tooltip content for table view button. |\n| tableViewLabel | string \\| ReactNode | — | Optional label content for the table view select item. |\n| singleCardViewTooltipContent(deprecated) | string \\| ReactNode | — | Optional tooltip content for single card view button. |\n| singleCardViewLabel | string \\| ReactNode | — | Optional label content for the single card view select item. |\n| multiCardsViewTooltipContent(deprecated) | string \\| ReactNode | — | Optional tooltip content for multi card view button. |\n| multiCardsViewLabel | string \\| ReactNode | — | Optional label content for the multi cards view select item. |\n| disabled | boolean | false | Disables all buttons. This means the buttons cannot be clicked. Used when disabling toolbar buttons during loading state or when the corresponding table is empty. |\n| className | string | — | Optional class names for the wrapper element. |\nTableRowActionsDropdown\nUse TableRowActionsDropdown as the standardized overflow trigger for secondary row actions. It keeps the horizontal options icon and button styling consistent across different table implementations.\nWorkflow\n\nWhen to use it\n\nActions\n\nArchived order\n\nSecondary actions in a compact overflow trigger.\n\nDelivery run\n\nUses the same trigger for consistent row-action menus.\n### TableRowActionsDropdown\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| aria-label | string | 'Row actions' | Accessible label applied to the icon-only trigger button. |",
+    "searchText": "Table controls\nThe toolbar and its content has to be implemented by each team itself. Please use the sample as a reference and adapt it accordingly.\nTable controls\nThese controls can be used with both Table component and HTML table components.\nTableToolbar\nTableToolbar label\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n12:00 AM\n\nTableToolbar button\n\nTableToolbar label\n\nTable view\nCards view\nList view\n### TableToolbar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Optional class names for the wrapper element. |\n| collapseCardClassName | string | — | Optional class names for the card that wraps collapsed toolbar controls in the compact mobile layout. |\n| responsiveCollapseBreakpoint | number | 544 | Optional toolbar width in pixels at which the toolbar switches into its compact mobile/collapsible layout. |\n| disableResponsiveCollapse | boolean | false | Disables the compact mobile/collapsible toolbar layout. Use this as an escape hatch when a consuming service needs to keep the default wrapping toolbar behavior regardless of the available toolbar width. |\n### TableCardsSorting\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| sortName | string | — | \"Name\", \"Key\", or \"Id\" of the current sorted column. |\n| sortOrder | 'asc' \\| 'desc' | 'asc' | Defines the sort direction. |\n| selectOptions | TableCardsSortingOption[] | — | List of objects for the column name select component. |\n| └id | string | — | ID to use for the select option. |\n| └label | string \\| React.ReactNode | — | Translated column label to be shown in the select. |\n| └selected | boolean | — | Defines the column which is currently sorted by. |\n| └disabled | boolean | — | Defines if the column can be sorted. Hence, it will be disabled in the select. |\n| onSortChange | (name: string, order: 'asc' \\| 'desc') =void | noop | Function that is called when the sort key or direction changes. |\n| className | string | — | Optional class names for the wrapper element. |\nTableSearch\nID\n\nName\n\nStatus\n\n7354\n\nVehicle 7354\n\nActive\n\n233\n\nVehicle 233\n\nInactive\n\n895\n\nVehicle 895\n\nActive\n\n3456\n\nVehicle 3456\n\nActive\n### TableSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Optional class names for the wrapper. |\n| ...additional props |  | — | As this component is using the ClearableInput component internally, checkout all possible props there. |\nTableViewToggles\nTable view\nCards view\nList view\n\nID\n\nName\n\nStatus\n\n7354\n\nVehicle 7354\n\nActive\n\n233\n\nVehicle 233\n\nInactive\n\n895\n\nVehicle 895\n\nMaintenance\n### TableViewToggles\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| viewType | TableViewTogglesViewType | — | The current viewType for controlling the TablesViewToggles component. Possible values are: 'SINGLECARD' 'MULTICARDS' 'TABLE' TableViewToggles.VIEWTYPETABLE TableViewToggles.VIEWTYPESINGLECARD TableViewToggles.VIEWTYPEMULTICARDS |\n| initialViewType | TableViewTogglesViewType | TableViewToggles.VIEWTYPETABLE | Defines the initial viewType (when viewType is not controlled from the outside). Possible values are: 'SINGLECARD' 'MULTICARDS' 'TABLE' TableViewToggles.VIEWTYPETABLE TableViewToggles.VIEWTYPESINGLECARD TableViewToggles.VIEWTYPEMULTICARDS |\n| disabledViewTypes | TableViewTogglesViewType[] | [] | Defines the view types which shall not be supported and are omitted. |\n| onViewTypeChange | (viewType: TableViewTogglesViewType) =void | — | Callback function for when the user wants to change the viewType. Receives the new type as an argument. |\n| tableViewTooltipContent(deprecated) | string \\| ReactNode | — | Optional tooltip content for table view button. |\n| tableViewLabel | string \\| ReactNode | — | Optional label content for the table view select item. |\n| singleCardViewTooltipContent(deprecated) | string \\| ReactNode | — | Optional tooltip content for single card view button. |\n| singleCardViewLabel | string \\| ReactNode | — | Optional label content for the single card view select item. |\n| multiCardsViewTooltipContent(deprecated) | string \\| ReactNode | — | Optional tooltip content for multi card view button. |\n| multiCardsViewLabel | string \\| ReactNode | — | Optional label content for the multi cards view select item. |\n| disabled | boolean | false | Disables all buttons. This means the buttons cannot be clicked. Used when disabling toolbar buttons during loading state or when the corresponding table is empty. |\n| className | string | — | Optional class names for the wrapper element. |\nTableRowActionsDropdown\nUse TableRowActionsDropdown as the standardized overflow trigger for secondary row actions. It keeps the horizontal options icon and button styling consistent across different table implementations.\nWorkflow\n\nWhen to use it\n\nActions\n\nArchived order\n\nSecondary actions in a compact overflow trigger.\n\nDelivery run\n\nUses the same trigger for consistent row-action menus.\n### TableRowActionsDropdown\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| aria-label | string | 'Row actions' | Accessible label applied to the icon-only trigger button. |",
     "category": "Components",
     "section": "Table",
     "boost": "Table controls components/tableControls #components/tableControls Components Table"
@@ -1164,7 +1164,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 items Item 1\nIn, In pharetra ante elementum ac nunc in Duis\n\nItem 2\nEfficitur efficitur elit. molestie faucibus. in, tortor volutpat Duis tincidunt. ante purus\n\nItem 3\nLibero fringilla ut ligula dolor ligula sit Vivamus semper posuere est quis, viverra in,\n\nItem 4\nConsectetur pharetra nunc efficitur volutpat\n\nItem 5\nIn nec dui aliquam adipiscing metus\n\nItem 6\nElit. eget ac quis, semper. sem.\n\nItem 7\nUt finibus hendrerit aliquam amet, consectetur\n\nItem 8\nPrimis ac et scelerisque aliquam Sed pharetra fames consectetur lorem in\nLorem velit. nunc\n\nItem 9\nDuis pretium orci, consectetur condimentum sit ante in posuere vel purus ante primis sem. nunc\n\nItem 10\nEfficitur purus pharetra faucibus. primis purus\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\nFelis. dolor et libero Vivamus massa, efficitur consectetur consectetur efficitur ligula elit. Interdum\n\nVehicle 2\nPrimis eget amet, est ante ante lorem bibendum, semper sem. elementum\n\nVehicle 3\nAdipiscing tincidunt. est Vivamus eget nec\n\nVehicle 4\nEt neque. metus ac efficitur hendrerit\n\nVehicle 5\nNeque. Mauris malesuada tincidunt. Mauris condimentum\n\nVehicle 6\nUt massa ante ante nunc ipsum et\n\nVehicle 7\nSed primis eget ligula in, purus vitae in orci pharetra\n\nVehicle 8\nAdipiscing et rutrum neque. fringilla\n\nVehicle 9\nCondimentum efficitur Mauris in dui faucibus. rutrum\n\nVehicle 10\nViverra massa, ante felis. Sed ut ligula volutpat\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 items Item 1\nSem. et consectetur ligula condimentum tincidunt.\n\nItem 2\nMassa ante in orci in efficitur et pretium\n\nItem 3\nEget fringilla pretium tincidunt. eget semper. ac ipsum primis et ipsum semper.\n\nItem 4\nDuis ac elementum malesuada vel faucibus. et Fusce\n\nItem 5\nVolutpat dui vel in aliquam\n\nItem 6\nAc volutpat faucibus. lorem ante Mauris vitae condimentum fringilla semper\n\nItem 7\nVel dui metus ut elit. massa, vitae velit. efficitur in tortor ac ac\nLorem\n\nItem 8\nSem. sem. Mauris Vivamus libero sem. neque. semper sagittis felis. ante ac Interdum dui\n\nItem 9\nInteger eget Vivamus in ligula et elit. massa sit velit. ante semper. et vitae\n\nItem 10\nOrci finibus efficitur felis. consectetur consectetur Sed Ut Vivamus Duis ante\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\nUt condimentum in volutpat molestie\n\nVehicle 2\nConsectetur fames neque. Mauris amet,\n\nVehicle 3\nSem. efficitur ipsum elementum Duis finibus pretium est tortor elit. adipiscing ante metus efficitur ante\n\nVehicle 4\nUt iaculis. eget rutrum Integer Duis massa quis, ut lorem massa libero pretium\n\nVehicle 5\nInterdum velit. massa, in enim fames in, ut nec pretium\nLorem Interdum scelerisque ut malesuada\n\nVehicle 6\nAc massa, et Mauris neque. nunc nec efficitur dolor in, et Ut nunc vitae enim\n\nVehicle 7\nEst ac dolor efficitur ac hendrerit elementum felis. nec\n\nVehicle 8\nIpsum ante dui nunc consectetur elementum in ac\n\nVehicle 9\nQuis, ut Vivamus semper. Fusce ut ut quis, semper posuere dolor\n\nVehicle 10\nTincidunt. amet, in aliquam orci, viverra finibus consectetur ante malesuada est libero et ac dui\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"
@@ -1183,8 +1183,8 @@
     "id": "start/changelog",
     "title": "Changelog",
     "lead": null,
-    "summary": "- Update Select and Multiselect Added a new variant prop with a blank variant to remove the wrapper shadow and toggle border/shadow.",
-    "searchText": "Changelog\nVersion 2.4.0 (2026-04-27)\n- Update Select and Multiselect Added a new variant prop with a blank variant to remove the wrapper shadow and toggle border/shadow.\n\n- Fixed Forms Fixed sized inputs with form-control so they use the correct font size again.\n\n- New Map viewport history Added viewport history for maps, including MapPreviousViewportButton for jumping back to previous map position states.\n\n- Fixed Map settings Fixed map settings dropdowns so they are displayed properly when opened.\n\n- New Table Added TableExpandAllGroupsButton for grouped tables and new grouped-row demos showing row selection across expandable groups and selectable group rows.\n\n- Update Table Added a new selectionCheckboxVerticalAlignment prop so checkboxes can be aligned independently.\n\n- Update Table Moved vertical alignment styling to the cell level for table head and body cells, which avoids header pixel jumping and keeps row-spanned headers aligned correctly.\n\n- Fixed Table Fixed table rows collapsing in overflow state when no rows with columns are available to define the table width.\n\n- Fixed Table Fixed header rendering for interactive header content and updated selection logic so selectable expanded group rows and selectable group rows work correctly with table selection.\nVersion 2.3.0 (2026-03-20)\n- New useDraggableElement Added a new useDraggableElement hook to make DOM elements draggable with pointer events, including support for dedicated drag handles.\n\n- New CSS Animations Added a new foundations demo page for CSS animations with interactive slide, fade, scale, and rotate examples, including controls for duration, delay, easing, repeat, looping, and playback.\n\n- New AI Assistant template Added a new template demo for AI-assisted service queries that turns a request into a structured response card with loading states and result tables.\n\n- Update Multiselect Added a new useClear prop to clear the current selection from the toggle, aligned with the existing Select API and documented in the multiselect demo page.\n\n- Update ButtonDropdown Added a new iconName prop and forward it to the underlying button toggle, so icon buttons no longer need custom title markup just to render a rioglyph with a button text.\n\n- Update Route Route interactions now show a pointer cursor for clickable routes and support an optional hoverStyle. Route clicks and hover now use an internal hit area to enlarge the clickable surface and make route interaction more reliable.\n\n- Update Polygon & Isoline Polygons and isolines now support click and hover interactions, including automatic pointer cursors for clickable shapes and an optional hoverStyle for hover feedback such as highlighted outlines.\n\n- Update Map performance Added marker icon caching for map markers and cluster markers, which avoids recreating identical marker icons, speeds up large marker sets, and can reduce memory usage by reusing shared DOM icon instances. Also added an optional zoom optimization to temporarily suppress marker pointer events during zoom interactions.\n\n- Fixed useResizeObserver Fixed repeated state updates when ResizeObserver reported the same size, which could trigger render loops under certain conditions.\n\n- Fixed routeUtils Fixed parseSorting to return the documented asc / desc sort direction values, so URL-based table sorting no longer resets after parsing in controlled integrations.\n\n- Fixed Fixed incorrect:focus-visible outlines on text links in Chrome 147 after the browser changed how outline-width and outline-style are computed.\n\n- Fixed InfoBubble Adjusted the HERE map InfoBubble to use the active theme font-family instead of HERE default font styles. Also added a new demo showing an InfoBubble opened from a POI map marker.\n\n- New DayPicker Added a new composable DayPicker component for date inputs with dropdown calendar, custom triggers, sidebars, footers, presets, validation, and composed date/time workflows.\n\n- New DayPickerCalendar Added a new standalone DayPickerCalendar component for embedded calendar use cases, including single, multiple, and range selection plus custom modifiers and day content.\n\n- New Table Added a new declarative Table component with compound subcomponents for headers, rows, cells, footers, grouped sticky rows, expandable rows, selection, sortable and resizable columns, column filters, disabled rows, row animations, and responsive card views.\n\n- New TableToolbar Added the new compound TableToolbarColumn API for declarative toolbar layouts with automatic left/right grouping via alignment, optional label and separator, plus per-column className support. Existing manual toolbar markup remains supported.\n\n- Update TableViewToggles Redesigned TableViewToggles to use a Select-based view switcher instead of the former toggle button group. Added dedicated label props for the dropdown items, while the older tooltip props are now deprecated and only kept as a fallback for item labels.\n\n- Update LoadMoreButton Added the new hideOnPrint prop, defaulting to true.\n\n- New AnalyticsAnalysisOverlay Added a new AnalyticsAnalysisOverlay component to visualize tracked elements on the page using uploaded analytics CSV data.\n\n- New googleAnalyticsUtils Added a new Utilities helper demo page for googleAnalyticsUtils with examples for getTrackingAttributes.\n\n- Update Button Added support for automatic GA tracking attributes via the new autoTrackingKey prop.\n\n- Update ExpanderPanel Added support for tracking attributes on panel headers, so getTrackingAttributes will be passed directly to ExpanderPanel.\n\n- Update ExpanderList Added support for tracking attributes on expander item, so getTrackingAttributes will be passed directly to ExpanderListItemHeader.\n\n- New New icons rioglyph- big-bag rioglyph- bulk-container rioglyph- coil rioglyph- roll-container rioglyph- shelve-empty rioglyph- stillage\nVersion 2.2.1 (2026-03-06)\n- Fixed TableSettingsDialog Fixed the TableSettingsDialog to prevent an endless loop under certain conditions.\nVersion 2.2.0 (2026-02-23)\n- Fixed Map utils Fixed getRoutePolylines to return the correct HERE map Polyline list. Also corrected the return types for getGroups, getMarkers, and getRoutePolylines to use the proper map object types.\n\n- Fixed RadialBarCharts Fixed RadialBarCharts responsive container to remove the fixed initial dimension, allowing charts to take the available width of the parent container.\n\n- Fixed Select Prevent double box-shadow on Select and Multiselect inside input groups with icon addons.\n\n- Fixed labels Fixed label heights for condensed filled labels to align with default condensed labels.\n\n- Fixed Map settings Fixed the map settings options animation so dropdowns/panels now fade in and slide up when opened.\n\n- Update MapTypeSettings Added visibleMapTypes for map-type visibility control via a single prop. The enableNightMap prop is now deprecated. Please control night visibility via visibleMapTypes instead.\n\n- Update TimePicker Add a new disabled prop to disable the TimePicker input and its control buttons. If you previously set disabled via inputProps, you can now use the dedicated component prop instead. The TimePicker now also calls onChange when the input is cleared. Added a new dropdown prop for selecting times from a dropdown, and a minuteOffset prop to define the dropdown interval and button step size.\n\n- Update Button Added support for rendering Button as an anchor element via the new as prop. Use as='a' together with a required href to render a link button while keeping native button type values for button elements.\n\n- Update Notification Improved notification message readability by balancing line wraps in notification text content.\n\n- Update Switch Added a new autoMinWidth prop. When minWidth is not set and autoMinWidth is true, the switch width uses the longer one of enabledText and disabledText.\n\n- New CircularProgress Added new CircularProgress component.\n\n- New Tracker Added a new Tracker component for compact status visualization with tooltip support, automatic block compression, and optional collapsing when the minimum block width is reached.\n\n- New RadioCardGroup Added a new RadioCardGroup component for custom card-style radio selection, including inline, stacked, and stacked-horizontal variants with both options-based and compound-item APIs.\n\n- New Pills condensed Added a nav-pills-filled-condensed version of filled nav-pills for use next to form elements like buttons and selects. This keeps heights aligned and provides a clearer way to indicate different views. Prefer these over the toggle button group for view switching.\n\n- New Shadows Added configurable hover-shadow-* utility classes with built-in transition support and a new shadow-focused utility class for a focused shadow preset.\n\n- New useSearchHighlight / SearchHighlightText Added the useSearchHighlight hook and SearchHighlightText component for native CSS highlight-based search results.\n\n- New useCookies Added a new useCookies hook for setting, deleting, and checking browser cookies.\n\n- New useRioCookieConsent Added a dedicated useRioCookieConsent hook for parsing the RIO cookie_settings consent cookie and returning typed RioCookieConsentInfo.\n\n- New useUrlState, routeUtils Added the new useUrlState hook and updated routeUtils for simpler state-in-URL parsing/serialization with native URLSearchParams and typed URL config support.\n\n- New classNames, mergeClassNameOverrides Added new utility helpers for CSS class handling: classNames for composing optional class tokens and mergeClassNameOverrides for overriding utility-class groups while keeping unrelated defaults.\n\n- New ellipsis-middle Added new ellipsis-middle utility class for truncating text in the middle while keeping the suffix visible.\n\n- New TextTruncateMiddle Added a new TextTruncateMiddle component for rendering middle-truncated text with a configurable suffix length.\n\n- New New icons rioglyph- trailer-standard rioglyph- trailer-tipping rioglyph- trailer-liquid rioglyph- palette-empty rioglyph- box rioglyph- box-open rioglyph- mesh-box\n\n- Guideline State in URL guideline Added a dedicated guideline page for deep linking and URL state, including best practices for what to store in URLs and pushState vs replaceState usage.\nVersion 2.1.0 (2026-01-13)\n- Fixed Map context menu Fixed the typing for the ContextMenuItem component.\n\n- Fixed Map route Fixed the typing for the arrowStyle prop of the Route component.\n\n- Fixed Map SimpleClusterLayer type Fixed the typings for the SimpleClusterLayer component’s simpleTheme prop. Please use the new SimpleClusterTheme type instead of the ClusterTheme.\n\n- Fixed Dialog Fixed broken fade animation of Dialogs in Firefox.\n\n- Fixed TableSettingsDialog Fixed TableSettingsDialog so reset to default remains available after reopening when settings differ from defaults.\n\n- Fixed Select Fixed select filter regressions where hitting ‘nothing found’ could leave the dropdown stuck or missing options. Backspacing or clearing now restores the full list and keeps keyboard focus/highlights in sync. Dropdown scroll now resets on reopen and keeps the keyboard-focused item in view when navigating up and down with the arrow keys.\n\n- Update URL feature toggles Replaced the internal \"qs\" library used for parsing URL search parameters with the native URLSearchParams API, allowing us to remove the external dependency. This also solves the vulnerability issue with the \"qs\" library for this version.\n\n- Update Tree Extended the Tree component to support custom external icon and logo URLs.\n\n- Demo Updated the component prop documentation for most components by deriving it directly from the component type definitions and source files. This ensures more accurate documentation and reduces maintenance effort for the demo pages.\nVersion 2.0.1 (2025-12-15)\n- Fixed DatePicker Fixed DatePicker compatibility in ESM builds by unwrapping the CommonJS default export.\n\n- Fixed Area, Line Fixed chart components type definition for prop \"dataKey\".\nVersion 2.0.0 (2025-12-12)\n- Removed We’ve modernized our build setup by removing CommonJS support and switching entirely to ESM. If your project still depends on CommonJS (for example, with older tooling like Webpack), your build may fail. Please update your development environment to support ESM.\n\n- Removed Removed the root index.js barrel file that re-exported all components. This change eliminates multiple import paths, improves IntelliSense auto-import behavior, and prevents importing the entire UIKIT, ensuring proper tree shaking. Please update your imports to use default imports, for example: import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout'.\n\n- Removed CalendarStripe Removed deprecated prop \"render\". Please use \"renderDay\" instead.\n\n- Removed Collapse Removed deprecated prop \"in\". Please use \"open\" instead.\n\n- Removed ClearableInput Removed deprecated prop \"alwaysShowMask\". Please use \"maskVisibility='always'\" instead.\n\n- Removed Dialog Removed deprecated prop \"onHide\". Please use \"onClose\" instead.\n\n- Removed SingleMapMarker Removed deprecated prop \"size\". Please use \"anchorSize\" instead. Removed deprecated prop \"visibleOnHover\". Please use \"markerOnHover\" instead.\n\n- Removed DataTab Removed the internal \"fade in\" class names from the DataTab component, which were previously kept for backward compatibility with CSS transitions used in older service tests. Please use the new onAnimationStart and onAnimationEnd callbacks instead.\n\n- Renamed Animations Renamed \"framer-motion\" component to \"motion\" as we have migrated to the latest motion library that was formerly known as Framer Motion.\n\n- Removed NotificationsContainer Removed deprecated prop \"stacked\" since it is not supported anymore. Removed legacy usage documentation.\n\n- Breaking Notification Removed deprecated prop \"priority\" since it is not supported anymore. Removed old notification API in favor of the notifications options object. If you still use the legacy API \"Notification.info(message, title, timeOut, callback, priority)\", please migrate to the format \"Notification.info(message, options)\".\n\n- Removed OnboardingTip Removed deprecated prop \"clickflow\". Please use the \"useOnboardingTour\" hook instead.\n\n- Removed Radiobutton Changed the onChange callback so it is only used in the controlled use case, as already documented in earlier versions. For uncontrolled usage, please use the onClick callback instead.\n\n- Removed NumberInput / NumberControl Removed deprecated prop \"onValueChanged\". Please use \"onChange\" instead.\n\n- Removed Sidebar Removed deprecated prop \"enableNavigationButtons\". Please use \"headerButtons\" instead. Removed deprecated prop \"disableFullscreen\". Please use \"enableFullscreenToggle\" instead. Removed deprecated prop \"fullscreen\". Please use \"openInFullscreen\" instead.\n\n- Removed Removed old class \"invisible\". Please use \"visibility-hidden\" instead.\n\n- Icons Renamed icon rioglyph- retweet rioglyph- repeat-square Renamed icon rioglyph- cost-efficency rioglyph- cost-efficiency Renamed icon rioglyph- eye-option rioglyph- eye-open Removed icon as it was a duplicate of rioglyph- component rioglyph- maintenance-components\n\n- Breaking BarChart, RadialBarChart, PieChart, Legend With this release, the internal Recharts dependency has been migrated to version 3.x. This upgrade introduces a breaking change related to the Legend component: the payload prop, which was previously used internally to inject custom legend data, has been removed from Recharts. As a result, the legend behavior in BarChart and RadialBarChart has been updated. The default legend position is now correctly rendered vertically in the top-right corner. Previously, it appeared at the bottom despite the default settings. Please review your charts to ensure the legend position remains as intended. If you use colors defined inside your data objects for BarCharts, you must now provide both the items (your data array) and a custom content render function to the Legend. This replaces the old payload-based legend behavior. Series-based legends using a formatter continue to work as before. Recharts 2.x also used to have a prop named activeIndex that was setting which item the user was interacting with. In version 3.0, this prop has been removed. For more details, see the Recharts activeIndex guide https://recharts.github.io/en-US/guide/activeIndex/ If your PieChart uses an activeShape render callback, you should now use the ChartTooltip component and set its defaultIndex to replace the previous activeIndex behavior. See the whole Recharts migration guide for more details: https://github.com/recharts/recharts/wiki/3.0-migration-guide#breaking-code-changes\n\n- Fixed FilePicker Fixed the type of the \"files\" parameter from FileList to File[] of the \"onPick\" callback.\n\n- Fixed Rioglyph Fixed Rioglyph icon typing to expose a concrete IconType union of all icon names, improving autocomplete and safety for consumers.\n\n- Update AssetTree Added new asset type \"car\" to AssetType type definition and to built-in type counter of the AssetSummary for the Tree component.\n\n- Update VolkswagenApplicationHeader Updated VolkswagenApplicationHeader with new VW Group logo. This single group logo also replaces the logo for \"VW Aktiengesellschaft\" and \"Group Logistics\" resulting in an overall smaller header height.\n\n- Update Migrated entire codebase from lodash to es-toolkit to leverage modern JavaScript.\n\n- New AnimatedTextReveal Added new AnimatedTextReveal component emphasize text through motion for showing incremental updates or loading states.\n\n- New useAutoAnimate Added a lightweight hook to animate add/remove/reorder operations of children with zero configuration.\n\n- New fit-content Added new \"min-width-fit-content\" utility classes. See detailed explanation and comparison to other content-based min-width classes.\n\n- New text-box Added new \"text-box\" utility classes to trimming off extra spacing from the block-start edge and block-end edge of a text element's block container.\n\n- New icons Added new rioglyph style for disabled icons with a line\n\n- New useIncomingPostMessages and usePostMessageSender New tooling for sending and receiving postMessage events. We recommend utilizing \"action-style\" events if you control both ends of the communication. This simply means to send event objects with a type property and an optional payload - very similar to Redux actions. To receive messages, the new useIncomingPostMessages can be used. It allows a declarative style of registering action-style event handlers in your application. You can still use the \"simple\" event handler variants, when you're interested in receiving events that don't follow the action-style approach. The usePostMessageSender hook provides easy access to methods used to send message events either to a dedicated destination or to \"broadcast\" events to all iframes. Note that the existing usePostMessage hook will be deprecated in a future release.\n\n- Icons New icons rioglyph- ai rioglyph- arrows-collapse rioglyph- arrows-combine rioglyph- arrows-expand rioglyph- arrows-horizontal rioglyph- arrows-split rioglyph- assigned rioglyph- axis-x rioglyph- axis-y rioglyph- axis-z rioglyph- bar-chart-box rioglyph- battery-charging rioglyph- brain rioglyph- branch-horizontal rioglyph- branch-remove rioglyph- branch-vertical rioglyph- broadcast rioglyph- bulb rioglyph- chip rioglyph- cloud-progress rioglyph- coffee rioglyph- compass rioglyph- crown rioglyph- discount-badge rioglyph- emergency-stop rioglyph- eye-closed rioglyph- eye-open rioglyph- filter-reset rioglyph- get rioglyph- give rioglyph- globe-alt rioglyph- hierarchy rioglyph- history rioglyph- insert rioglyph- leafs rioglyph- magic-wand rioglyph- note rioglyph- progression rioglyph- satellite-radar rioglyph- stack-add rioglyph- stack-iso rioglyph- stats-high rioglyph- stats-line-dots rioglyph- stats-low rioglyph- stats-medium rioglyph- time-incomplete rioglyph- unassigned rioglyph- unavailable rioglyph- variable rioglyph- workflow-step rioglyph- workflow Updated icons rioglyph- arrow-down rioglyph- arrow-left rioglyph- arrow-right rioglyph- arrow-up rioglyph- battery-level-empty rioglyph- battery-level-full rioglyph- battery-level-low rioglyph- cloud-download rioglyph- cloud-not-saved rioglyph- cloud-upload rioglyph- compare rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- cost-efficency rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- error-sign rioglyph- flash rioglyph- info rioglyph- maintenance-components rioglyph- merge rioglyph- missing rioglyph- off rioglyph- refresh rioglyph- repeat rioglyph- resize-full rioglyph- resize-horizontal rioglyph- resize-small rioglyph- resize-vertical rioglyph- save rioglyph- trash rioglyph- volume rioglyph- workshop rioglyph- wrench Removed icons rioglyph- video-off rioglyph- wifi-off\nVersion 1.13.2 (2025-11-19)\n- Fixed Obfuscate data Fixed a bug that triggered an infinite loop when data-pii was applied to a nested child element.\n\n- Update Button Added new \"unstyled\" buttons style\nVersion 1.13.1 (2025-10-20)\n- Fixed Fixed bundling npm package. Resolve nested folder structure in npm package build.\nVersion 1.13.0 (2025-10-20)\n- Fixed fuel type utils Fixed missing root export for fuel type utils.\n\n- Fixed Action button style Fixed the muted style for action buttons.\n\n- Fixed MapMarker Fixed the active styling for the map marker active state to visually balance the state icon.\n\n- Update Rioglyph Added the missing feature to use external SVGs as a rioglyph icon.\n\n- Update FilePicker Added new \"fullHeight\" flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow.\n\n- New max-content Added new \"min-width-max-content\" and \"min-width-min-content\" utility classes. The first prevents content from breaking by expanding to fit its full width, while the second allows content to shrink to the smallest width possible without overflowing.\n\n- New Grid Added new \"grid-template-end--1\" utility class. This class allows grid items to span until the last grid line, effectively positioning them to extend to the end of the grid.\n\n- New Obfuscate data Added new \"data-hide-pii\" attribute to the <htmlelement to obfuscate sensitive data directly in the frontend. Obfuscate names, emails, or phone numbers — without needing backend filtering or extra code changes.\n\n- Icons New icons rioglyph- circle-dashed rioglyph- square-dashed rioglyph- cube-dashed rioglyph- cube rioglyph- group-blocks rioglyph- dashboard-view rioglyph- ok-dashed rioglyph- prompt rioglyph- recycle rioglyph- warehouse rioglyph- status-change rioglyph- status-change-horizontal rioglyph- transition-right rioglyph- transition-push-right rioglyph- migrate rioglyph- convert rioglyph- shelve rioglyph- conveyor-belt rioglyph- tracking-package rioglyph- issue-tracking Updated icons rioglyph- ok-sign rioglyph- ok-circle\nVersion 1.12.0 (2025-09-22)\n- Fixed Select Fixed an issue in the Select component where clearing the filter input after a no-results search caused the option list to remain incomplete. The dropdown now correctly restores the full option set when the filter is cleared.\n\n- Fixed AssetTree Fixed an issue where clicking the checkbox on a tree group would also toggle its expanded state. Now, selecting a tree group via its checkbox only triggers selection and no longer expands or collapses the group. This prevents unintended virtualization behavior where expanding a node could cause the tree to switch into virtualized mode, resulting in the loss of tree group selections.\n\n- Fixed Callout Removed overflow hidden from callouts so dropdowns can be shown correctly.\n\n- Fixed Ellipsis Fixed \"ellipsis-1\" class.\n\n- New Rioglyph, fuel type utils Added a new component for rendering Rioglyph icons as a span element. The component also supports paired icons, allowing two glyphs to be displayed together as a combined symbol. In addition, a \"getFuelIcon\" helper function was introduced that maps fuel types to their corresponding icons, ensuring consistent and correct icon usage across the application.\n\n- Update FormLabel Added missing \"Node\" type info for supportingText the props table and changed the handling of supportingText styling so that the text-italic class is only applied when the supportingText is a string. If you provide a string wrapped in a div or span, you have to set the italic class manually.\n\n- Update Tree Added a new \"pairIcon\" prop to TreeItem allowing pair icons to be individually specified in the Tree component.\n\n- Update ClearableInput Added new input mask related props \"maskOverwrite\", \"maskDefinitions\", and \"maskDispatch\" to support dynamic masking for more complicated use cases and to give more control over the masking.\n\n- Update useOnboardingTour Updated the typings and documentation for the useOnboardingTour hook.\n\n- style Pills Updated the hover style for the application header navigation as well as for the nav pills.\n\n- Icons As RIO will support more fuel types in the future, and because of inconsistencies in existing naming conventions, we introduced a new icon: \"rioglyph-fuel-liquid\". This icon replaces \"rioglyph-fuel-diesel\" to better represent a broader range of liquid fuels. With this change, there are now four dedicated fuel icons available, plus one for a mixed fuel type. rioglyph- fuel-liquid rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- fuel-mix With this approach, frontends can use the same icon for diesel or gasoline and also for CNG and natural gas by simply using the new \"getFuelIcon\" function form the Rioglyph component. The old “rioglyph-fuel-diesel” icon will continue to work, but it will no longer be listed in the UIKIT demo page icon list. Additional new icons: rioglyph- video rioglyph- video-off\n\n- Demo Service-specific settings Updated the ApplicationHeader demo to include an example of service-specific settings, establishing a consistent approach for presenting unique configurations that cannot be included in the global user profile settings. It helps ensure a familiar user experience across different services while keeping global settings clean and focused.\nVersion 1.11.0 (2025-08-11)\n- Fixed Map settings Updated implementation for map satellite view to support zoom limits by using a hybrid map layer approach.\n\n- Fixed SteppedProgressBar Fixed styling issue in circular variant of the SteppedProgressBar when an item is active.\n\n- Fixed SplitDialog Fixed left side width for larger dialogs. Added new prop to hide the split divider.\n\n- Fixed FormLabel Fixed usage of HTML tag label only when part \"htmlFor\" is set and has a value.\n\n- Update Tree Added a new \"expandedIcon\" prop to the TreeGroups to support showing a different icon when the group is expanded.\n\n- Update Sticky table columns Renamed \"table-sticky-cell-first\" and \"table-sticky-cell-last\" to \"table-sticky-column-first\" and \"table-sticky-column-last\" for improved clarity. Updated the styles to respect the table header and prevent content from peeking through when horizontally scrolled.\n\n- New useAverage, useCount, useMin, useMax, useSum Added useAverage, useCount, useMin, and useMax, and useSum hooks for locale-aware numeric aggregation of object lists. Supports specifying a dot-separated path to the target property.\n\n- New Table grid lines Added new table class \"table-grid-lines\" that is useful when building data heavy tables.\n\n- New Table row span and Table double row header Added new table examples showcasing row span and double header layouts to demonstrate table design capabilities for data heavy tables.\n\n- New Progress bars indeterminate style Added new indeterminate style to show a progress bar even when you not know how long it will take.\n\n- Demo Templates Added new template sections and several UI block examples. Updated the template menu structure to improve navigation and discoverability.\n\n- Demo Email generator We’ve built a neat little email editor that helps you compose emails and copy the HTML code.\n\n- Demo Route generator There is a new route generator with a JSON export of the LAT/LNG coordinates.\nVersion 1.10.1 (2025-01-08)\n- Fixed Map settings Changed implementation for map satellite view as the old implementation relied on deprecated Here APIs.\nVersion 1.10.0 (2025-07-28)\n- Fixed Fixed an issue where clicking the \"Scroll to Top\" arrow button would block further scrolling down the page. The scroll behavior is now fully restored after returning to the top, ensuring smooth navigation throughout.\n\n- Fixed DatePicker Fixed styling issue in DatePicker inputs with error feedback where input text was unnecessarily cut off due to padding for the clear icon, even when no clear button was rendered.\n\n- Fixed ApplicationHeader Fixed an issue where the application header rendered in mobile style on initial page load when the container width could not be determined in time. This resolves visual jumping between mobile and desktop header layouts during mount.\n\n- Fixed SavableInput / SavableDateInput Moved error handling into the components to simplify feedback styling. Added two new props, \"errorMessage\" and \"hideErrorIcon\", to control the visual appearance of error feedback.\n\n- Fixed Panels, Pills, Badges Fixed various element styles for brand themes.\n\n- Update Tree Added a new \"icon\" prop to TreeItem allowing icons to be individually specified or explicitly omitted in the Tree component. Also updated the TreeGroups to support icon values with or without the rioglyph- prefix for improved flexibility.\n\n- New CSS Container queries Introduced new utility classes to make use of container queries, enabling responsive spacing and layout adjustments based on container width rather than viewport size. For more details, please check out our responsiveness guidelines.\n\n- New Rounded table Added new utility classes \"table-bottom-rounded\" and \"table-rounded\" for use when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners.\n\n- Icons Added icons icons rioglyph- train rioglyph- cargo rioglyph- design\n\n- Style We migrated our codebase from Less to Sass to modernize our tooling and take advantage of the latest CSS capabilities, as Less is no longer actively maintained.\n\n- Demo Renamed the main navigation items to improve clarity and consistency. “Design” is now called Foundations, and “UI Templates” has been simplified to Templates to better reflect their purpose.\n\n- Demo Added new sections and examples to UI templates that serve as a quick starting point for developing your own layouts and interfaces. See Expandable details, Details views, and Progress cards. Moved the panel example from the foundations tab to Panel variants.\nVersion 1.9.0 (2025-06-30)\n- Fixed Tooltip / SimpleTooltip Fixed delaying tooltips using a single delay number. Tooltip delay now only applies to showing, not hiding. To configure both show and hide delays, use the object format instead of a single delay number.\n\n- Fixed ClearableInput Properly pass external ref to underlying masked input component using its inputRef prop.\n\n- Fixed DatePicker Fixed an issue where the DatePicker would render incorrectly when used as a child inside a table cell.\n\n- Update TableHead, TableCol Extended table components to pass additional props to the underlying tag.\n\n- Update useTableSelection Extended useTableSelection hook to allow setting the selected rows and change the active row from the outside using the \"setSelectedRowIds\" and \"setActiveRowId\" setter functions.\n\n- Update Select, Multiselect We’ve reverted the max-width of the Select, and Multiselect dropdown to 100% to stay consistent with other components and to prevent unnecessary line breaks within dropdown items. If the dropdown appears too wide, you can use the dropdownClassName prop to apply a shorter max-width-x utility class as needed.\n\n- Update AssetTree Extend the Tree component to virtualize tree items when a certain threshold is reached. The number of items rendered beyond the visible area can be controlled using the \"overscan\" prop. This change improves performance for large trees and long lists.\n\n- Update Map Extend the Map component to allow specifying minimum and maximum zoom levels. By default, the minimum zoom level is set to 3, defining the furthest zoomed-out view. The maximum zoom level, representing the closest zoomed-in view, is set to 20. Improved zoom behavior to reduce momentum and allow for more controlled zooming.\n\n- Update FormLabel Extend the FormLabel component to allow passing in a React element as supporting text, making it easier to add question mark icons with tooltips.\n\n- New SavableDateInput Added new dedicated savable input component that wraps the DatePicker.\n\n- New BarList Added BarList component to display customizable, animated horizontal bars for comparative data.\n\n- New useTableExport Added new custom hook to easily export table data as CSV.\n\n- New useIsFocusWithin Added new custom hook to easily detect if the focus is inside a defined document node.\n\n- Docu Pagination Added usage documentation for pagination and explained why the load more button is preferred for tables.\n\n- Demo UI Templates Added new sections showcasing various UI templates and blocks that serve as a quick starting points for developing your own layouts and interfaces.\nVersion 1.8.0 (2025-05-19)\n- Fixed Map Fixed issue with satellite view layer not rendering correctly when Norwegian language is selected.\n\n- Fixed usePostMessage Remove logging of triggered events to the console.\n\n- Fixed Height classes Corrected height calculation when using \"\"...-height-100vh\" classes inside module-content; vertical padding was not properly subtracted.\n\n- Update URL feature toggles Made the feature toggle value types more precise. Added new feature toggle definition functions that allow you to specify a default value.\n\n- Update AssetTree Extended the Tree component with an onTypeFilterChange callback, allowing the service to filter selected assets accordingly.\n\n- Update Multiselect Added a maximum width of 200px for the Multiselect dropdown component. Additionally, there are two new props \"dropdownClassName\" and \"btnClassName\" to allow further customization similar to the Select component.\n\n- Update ButtonToolbar Extend alignment prop to center buttons.\n\n- Update Switch Added new \"className\" prop to the Switch.\n\n- Update ButtonDropdown Added new prop \"toggleButtonType\" to ButtonDropdown component to allow using a button, a tag or a label as toggle element.\n\n- Update ClearableInput Added a new prop \"maskVisibility\" to control when the mask pattern is visible. Deprecated the prop \"alwaysShowMask\". in favor of maskVisibility.\n\n- Update useOnboardingTour Expose internal onDestroyed callback. Add \"disableActiveInteraction\" prop to disable interaction of highlighted elements.\n\n- Update useSorting Added new callback function \"setSortDirection\" allowing to set sort direction when used with table card sorting.\n\n- New useLocationSuggestions Added new custom hook to fetch locations from Here API that can be used for search inputs.\n\n- New useSearch Added new custom hook to filter a list of objects by a search value.\n\n- New useTableSelection Added new custom hook to handle both single and multiple row selection in tables, optimized for large datasets.\n\n- New TableHead, TableCol Added new table components \"TableHead\" and \"TableCol\" to simplify table structures especially when used with custom hooks like \"useTableSelect\" and \"useSorting\".\n\n- New SvgImage Added new component that helps rendering SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes.\n\n- Icons New icons rioglyph- envelope-open rioglyph- envelope-indicator\n\n- Replaced Replaced react-input-mask with react-imask in TimePicker and ClearableInput components. The mask prop format has changed and is no longer fully compatible with the old react-input-mask syntax. The main difference is the number placeholder, which has changed from \"9\" to \"0\". Please update the mask prop accordingly when using the ClearableInput with an input mask.\nVersion 1.7.1 (2025-02-14)\n- Fixed Banner Fixed height animation of the Banner component when expanding. Added prop \"initialAnimation\" to disable initial content animation.\n\n- Fixed FormLabel Check for various input group sizes to render respective label text sizes.\n\n- Fixed SplitDialog / ListMenu Fixed the issue where a ListMenu dropdown was rendering all menu items on mobile upon mount. Now, only the dropdown is rendered initially.\n\n- Fixed RIOglyph Removed default aspect ration of 1/1 because of problems in flex/grid layouts.\n\n- Fixed Checkbox Fixed broken indeterminate state\n\n- Update RIOglyph Added new rioglyph-align-top, rioglyph-align-bottom and rioglyph-align-baseline classes for proper alignment width texts. Replaced previously introduced has-inline-icon with new rioglyph-align classes.\nVersion 1.7.0 (2025-02-10)\n- Fixed Collapse Fixed visible content overflow in the Collapse and Expander components during content animations.\n\n- Fixed ApplicationLayout Fixed the issue with passing a ref to the ApplicationLayout by exposing the underlying wrapper element. When merging the external ref with the internal ref, the wrapper is now properly exposed, eliminating the need for accessing ref.current.current in the invoking component.\n\n- Fixed ButtonDropdown / useClickOutside Fixed performance of rendering many dropdowns in a large table by introducing an \"isActive\" flag to the useClickOutside hook so that events are only registered and listening when the dropdown is actually open.\n\n- Fixed Route Fixed rendering of dashed routes via the \"lineDash\" prop.\n\n- Fixed List groups Fixed list group buttons active style.\n\n- Icons RIOGlyph We've transitioned the RIOGlyph icon font to an SVG-based system and allowing support for custom SVGs. Please read our guidelines Almost all RIOGlyph implementations will work out of the box. However, in certain cases, adjustments are required because RIOGlyph icons no longer behave as a font. What has changed? Previously, icons acted like text, inheriting line-height and vertical-align naturally. Now, as SVG elements, icons better have layout adjustments in inline text scenarios. The HTML structure for MapMarkers has been changed to accommodate the new icons. Please update the DOM selectors in your tests accordingly if they rely on the markup. All icons can now also be displayed as filled icons by adding rioglyph-filled Recommended solution < span className = \" has-inline-icon \" Lorem ipsum dolor sit amet < span className = \" rioglyph rioglyph-face-smile \" </ span </ span Lorem ipsum dolor\n\n- Update Dialog Changed dialog footer to use flex layout to ensure proper button positioning. No more need to add \"pull-right\" or custom flex classes.\n\n- Update Dialog animation Add support for the browser's \"prefers-reduced-motion\" flag. When this flag is enabled, dialog animations are disabled. This can be helpful for customers experiencing performance issues while running the application.\n\n- Update ListMenu Added new props to ListMenuItem to allow adding a badge for the list menu group header.\n\n- Update AppNavigationBar Added new props to AppNavigationBar to support a back button title, a subtitle, and a title size. The title is now always centered.\n\n- Update Notifications Replaced the underlying notification library with \"react-toastify\", introducing new options while maintaining the same API for backward compatibility. This update also includes a refreshed notification style.\n\n- Update Charts Updated internal Recharts library to latest version 2.15.0 to remove some warnings.\n\n- style Labels Updated the design of standard labels for a more modern look and added documentation on when to use them.\n\n- New Button Added new \"muted-filled\" button for occasions where the default button is to prominent and the muted button is to subtle.\n\n- New StepButton Added new \"StepButton\" component for convenience and to ensure consistent styling of this type of button.\n\n- New ButtonToolbar Added new \"ButtonToolbar\" component for convenience and to ensure consistent spacing of buttons.\n\n- New FormLabel Added new \"FormLabel\" component for convenience to be used on form elements that utilizes a \"htmlFor\" prop and a label or other form elements.\n\n- New LabeledElement Added a simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements\n\n- New Card Added new \"Card\" component for convenience to apply default styling for a card like element. This component aims to simplify and align common card styling.\n\n- New Avatar Added new \"Avatar\" component for showing the user name initials, a user image, or a user icon.\n\n- New Banner Added new \"Banner\" component for rendering informational content on a page.\n\n- New AccentBar Added new \"AccentBar\" component for visual cues.\n\n- New VirtualList Added new \"VirtualList\" component for rendering large lists using a windowing approach.\n\n- New useToggle Added new \"useToggle\" component to simplify boolean state handling. Use it to handle toggle-based logic like switches, modals, or content visibility.\n\n- New Chart colors Added new chart colors to the chart color map.\n\n- Demo Draggable map marker Added new map demo to showcase draggable map marker.\n\n- Icons New icons rioglyph- light-bulb Renamed icons rioglyph- filled-chart rioglyph- area-chart Updated icons rioglyph- am rioglyph- angle-double-down rioglyph- angle-double-left rioglyph- angle-double-right rioglyph- angle-double-up rioglyph- area-in rioglyph- area-out rioglyph- beacon rioglyph- bookable-poi rioglyph- bookmark-square rioglyph- brake rioglyph- businessman rioglyph- car-wash rioglyph- carrier rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- construction rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- document-out rioglyph- download rioglyph- driver-card rioglyph- driver rioglyph- drivercard-in rioglyph- drivercard-out rioglyph- erase rioglyph- file-signature rioglyph- fill rioglyph- folder-open rioglyph- home rioglyph- inbox-in rioglyph- inbox-out rioglyph- log-in rioglyph- logout rioglyph- map-location rioglyph- map-marker rioglyph- pencil-square rioglyph- pm rioglyph- retrofit rioglyph- role-management rioglyph- tachograph-download rioglyph- tms rioglyph- trailer rioglyph- user rioglyph- volume rioglyph- warning-sign rioglyph- weight\n\n- Update Dependencies Updated the minimum React version requirement to 18 to ensure compatibility with the latest features and optimizations. If you are using older versions of React, please update.\n\n- Removed Removed the outdated cross-browser style documentation.\n\n- Update Notifications Extended the writing style guide for guidance for using different notification types\n\n- Update Commonly misspelled words Extend the writing style guide for a list of commonly misspelled or misformatted words\n\n- Update Formatting numbers with units Extended the list of formats for examples of \"kilowatt-hour\" and \"megawatt-hour\". Please note that these units are not yet officially supported by TC39.\nVersion 1.6.1 (2024-12-09)\n- Fixed ApplicationLayout Fixed the application layout to ensure the body contains only a single child, addressing issues with the recently introduced grid layout for the body scrollbar element.\nVersion 1.6.0 (2024-12-02)\n- Fixed SplitDialog Fixed the SplitDialog prop documentation for \"useOverflow\" to clarify that its default value is \"true,\" unlike other dialogs.\n\n- Fixed Multiselect Fixed the Multiselect component to correctly manage the dropdown state and filter value when used in multiline mode with an active filter.\n\n- Update Tree Added \"treeHeaderContent\" prop to the Tree component for rendering additional custom content at the top of the tree, useful for navigation pills.\n\n- Update Dialog Extended dialog sizes for \"fullheight-lg\" and \"fullheight-xl\".\n\n- New useOnboardingTour Introducing a new way to onboard users via an onboarding tour by using the \"useOnboardingTour\" custom hook. Note that weh have deprecated the \"clickflow\" prop for the OnboardingTip component with this new feature.\n\n- New OnboardingDialog Added new OnboardingDialog to initiate a onboarding tour and acts as the welcome dialog for the user of a service.\n\n- New Grid rows Added new grid helper class \"grid-rows-auto-1fr-auto\" to support a 3 row layout with expandable middle row.\n\n- Icons Updated icons rioglyph- cost-efficency Added icons rioglyph- newspaper rioglyph- rocket rioglyph- trophy rioglyph- check-badge rioglyph- check-shield rioglyph- sparkles rioglyph- academic-cap rioglyph- onboarding rioglyph- bookmark rioglyph- bookmark-square\nVersion 1.5.3 (2024-11-05)\n- Fixed AssetTree Fixed asset tree height by setting the \"scrollbar-content-wrapper\" to display flex and let the tree wrapper grow in the flex column direction.\nVersion 1.5.2 (2024-11-04)\n- Fixed SmoothScrollbars Changed height-100pct to min-height-100pct because of height side-effects in chrome.\n\n- Icons Added icons icons rioglyph- oil-can\nVersion 1.5.1 (2024-10-22)\n- Fixed Pills Fix rendering icons in justified filled pills when there is an icon only.\n\n- Fixed SmoothScrollbars Added height-100pct to the recently introduced smooth scrollbar content wrapper. This also fixes a side-effect on the AssetTree component.\n\n- Fixed MapMarker Tone down the POI marker color to better match the new Geofence color and to work better on a large satellite map.\nVersion 1.5.0 (2024-10-21)\n- Fixed Route Fix setting route arrow style. Added color constants for using status colors for routes. Extend demo examples to showcase usage of route styles and colors.\n\n- Fixed SmoothScrollbars Fix updating the scrollbar handle when the content height changes. This fix introduces a new wrapper div to check the children's height. Please check your tests and update them in case you rely on the old structure.\n\n- Fixed Select Fixed an issue with updating the dropdown menu options after the initial render, ensuring that the filter utilizes the updated DOM nodes.\n\n- Update LineChart Extended charts to render additional axis. The demos have been extended for interactive legends to highlight active lines.\n\n- Update Route Extended Route component to allow storing custom data to it which can be used when clicking on the routes polyline to set the route active.\n\n- Update Map isoline Extended the Polygon component to import the RIO colors to use it for an isoline or other polygons. Extended the demo to also include isoline colors.\n\n- Update Colors Adapted the \"gray-decent\" slightly and with that all derived classes like \"bg-decent\" and \"hover-bg-decent\"\n\n- Update Forms All form inputs have a subtle shadow now.\n\n- New Map marker A new map marker color has been added for road restrictions. The geofence color has been updated to avoid confusion with the restriction color used by HERE maps for their road restrictions. The new geofence color provides significantly better contrast and is clearer to see on the satellite map type.\n\n- New Chat Added new pure CSS chat component\n\n- New FadeUp Added new components to fade in from the bottom when an element appears on screen. This can be used to stagger elements on scroll.\n\n- New FadeExpander Added new components to expand content. This can be used to reveal or hide additional content triggered by all kinds of interaction.\n\n- New Cursor Added more cursor-style utility classes\n\n- New Shadows Added new shadow classes \"shadow-subtle\" and \"shadow-muted\", as well as directional classes \"shadow-muted-down\" and \"shadow-default-down\" to be used on light and white backgrounds. The hard shadow direction styles are now slightly more blurred to remove the hard line in the shadow. Note: the following shadow classes are deprecated: \"shadow-smooth-to-top\", \"shadow-smooth-to-bottom\", \"shadow-hard-to-top\", and \"shadow-hard-to-bottom\". Please use \"shadow-smooth-up\", \"shadow-smooth-down\", \"shadow-hard-up\", and \"shadow-hard-down\" instead.\n\n- New useSorting Added new useSorting hook for easily sorting any list by specified key using natural sort order\n\n- New URL feature toggles Added URL-based feature toggle handling and description of how to use them\n\n- Icons Added icons icons rioglyph- bookable-poi rioglyph- car-wash Updated icons rioglyph- truck rioglyph- truck-baseline rioglyph- truck-breakdown rioglyph- truck-unit rioglyph- van rioglyph- van-baseline rioglyph- trailer rioglyph- trailer-baseline rioglyph- trailerposition rioglyph- car rioglyph- car-baseline rioglyph- bus rioglyph- bus-baseline rioglyph- bus-breakdown rioglyph- filling-e-station rioglyph- filling-station rioglyph- euro-note rioglyph- order rioglyph- palette rioglyph- palette-broken rioglyph- parcel rioglyph- parcel-broken rioglyph- empty\n\n- Update Border radius and shadows The default border radius has been increased, and new shadow styles have been introduced, affecting various elements such as buttons, inputs, and panels. These updates collectively enhance the overall design, providing a more modern, refined, and visually appealing look and feel.\nVersion 1.4.1 (2024-09-12)\n- Update ButtonDropdown Added forwardRef to ButtonDropdown and pass it to the underlying dropdown toggle button. Fixed ButtonDropdown demo page examples.\n\n- Fixed Tooltip Wrapped Tag and Switch component in forwardRef so they work with the OverlayTrigger and SimpleTooltip component\n\n- New Map fullscreen demo Added a fullscreen map demo with rendering some metrics for inspection and customer feedback\nVersion 1.4.0 (2024-09-06)\n- Fixed Fixed dark mode listener when trying to read the theme from the colorScheme cookie\n\n- Fixed Charts Fixed rendering of chart legends for all charts\n\n- Update LineChart, AreaChart Extended LineChart and AreaChart components with reference lines\n\n- Update Select Added \"isLoading\" prop to show a loading spinner inside the Select and Multiselect dropdown\n\n- Update useKey Extend useKey hook to allow specifying specific keys to listen for\n\n- New ComposedChart Added new simple ComposedChart component to render a combination of line, area, and bar charts\n\n- New GroupedItemList Added new GroupedItemList component to render a list grouped by a specific key with the flexibility to customize the group header and the rendered items\n\n- New LicensePlate Added new LicensePlate component to display license plate information with various customization options\n\n- Icons Added and updated icons rioglyph- air-pay rioglyph- euro-note rioglyph- language rioglyph- calendar-parking rioglyph- engine\n\n- Update Notifications Extended the writing style guide for notification and \"copy to clipboard\" guidelines\nVersion 1.3.0 (2024-07-26)\n- Fixed TreeOptions Fixed tree options tooltip position\n\n- Fixed DataTab Fixed DataTab title to avoid being set to the div element and used as native tooltip\n\n- Fixed SimpleDialog, SplitDialog Fixed typings of SimpleDialog and SplitDialog\n\n- Fixed Select Fixed italic placeholders for Select and Multiselect\n\n- Fixed Fixed DateRangePicker type for backwards compatibility\n\n- Update Sliders Added new \"color\" prop\n\n- Update Switch Added new \"color\" prop\n\n- Update Forms Added new focus shadow for form inputs and changed the input border color\n\n- Update OverlayTrigger, Tooltip, OnboardingTip, Popover The OverlayTrigger and Popover components are no longer based on react-bootstrap. They have been rewritten to remove the dependency and to fix some warnings when used with React 19.\n\n- New useElapsedTime Added new useElapsedTime hook to get the time since a component was mounted or from a provided starting time\n\n- New Flexbox Added class \"flex-0\" to flexbox utility classes\n\n- New Rounded Added class \"rounded-inherit\" to rounded utility classes\n\n- Update RIO Theme The danger color has been slightly adjusted to better match the other colors. Dark mode colors for danger, warning, and success have also been updated.\n\n- Update VW Theme Adapt highlight colors to VWAG guidelines\n\n- Update Formatting guide Extracted number and date formatting guidelines into a dedicated formatting guide page. This makes it easier to find and to keep the writing style guide shorter.\n\n- New Form labels and placeholders Extended the writing style guide for form labels and placeholders\nVersion 1.2.2 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown header items\n\n- Fixed Checkbox Fixed the rendering position of the checkbox in the grid layout using align-baseline, ensuring it remains stable when checked and unchecked\nVersion 1.2.1 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown when used in unit tests\n\n- Fixed Tree Fixed Tree scrolling when used as a standalone component without the wrapping AssetTree and when a \"scrollHeight\" is defined\n\n- Fixed AssetTree Merged the nested elements \".TreeLabel\" and \".TreeLabelName\" into a single element for TreeNode and TreeLeaf. This reduces the number of DOM elements and enhances performance. Note that you may need to update selector paths in integration tests if they reference tree items.\n\n- Fixed Key Fixed key style for dark mode\nVersion 1.2.0 (2024-06-26)\n- Fixed SmoothScrollbars Added missing root export for SmoothScrollbars component\n\n- Fixed ErrorState, EmptyState, CustomState Fixed button alignment for mobile screens\n\n- Fixed Marker Fixed \"list-group-item\" style when using color indicators\n\n- Fixed Multiselect Fixed filter input padding when Multiselect is used with a leading input addon\n\n- Fixed useAfterMount Fixed hook useAfterMount functionality\n\n- Update MapSettings Enhance MapSettings to include item labels. Substitute MapSettingsPanel with a Dropdown when labels are available. Please provide labels for users to improve usability. Note that providing labels will become mandatory in the future.\n\n- Update Marker Added new mapMarker \"cursor\" props\n\n- Update ListMenu Added new prop \"trailingInputAddon\" to allow adding additional elements to the filter input\n\n- Update DeviceUtils Added new device utils helper function to check for Apple Mac OS to be used for showing mac specific keys\n\n- New Feedback Added new feedback components to simplify requesting user feedback for various use cases\n\n- New Key Added style for keys by using the \"<kbd\" HTML tag\n\n- New Visibility Added new \"visibility-hidden\" class to only target the visibility without setting display to none\n\n- New Input resize Added new input resize classes\n\n- Icons Added new Icon rioglyph- layer-pois\nVersion 1.1.0 (2024-06-17)\n- Fixed CalendarStripe Fixed CalendarStripe component when resizing and rendering different amounts of columns\n\n- Fixed AssetTree Fixed rendering issue in AssetTree component when switching mode between \"fly\" and \"fluid\" externally\n\n- Fixed Marker Fixed broken Marker component when using it without an icon\n\n- Fixed Pills Fixed disabled styles for stacked and filled nav-pills\n\n- Fixed Traton Theme Fixed border radius for Dropdown, MapMarker, Slider, Tag, and Buttons\n\n- Update Marker Updated marker style for active and inactive markers. Extend marker colors for status colors. Adapt default colors for map for better readability in light and dark mode. Added new prop \"pinging\" to SingleMapMarker to render a pinging animation. Another new prop \"anchorIconName\" was added to render an icon directly on the markers anchor. The map direction icon can now be replaced via the new \"stateIconName\" prop and the default moving state can be changed.\n\n- Update AssetTree Added new prop \"treeOptionsTooltip\" to Tree component to show a tooltip for the tree options dropdown\n\n- Update ActionBarItem Updated the \"ActionBarItem.List\" style used for the service info popover. Please make sure to use the \"ActionBarItem.List\" and \"ActionBarItem.ListItem\" components to design the service info for the application header.\n\n- Update ErrorState, EmptyState, CustomState Added the prop \"bsStyle\" to the state components buttons to define other button styles like a default button. Also, when providing an href value, the button is rendered as a link. The headline size will increase now at the xl breakpoint to have a slightly smaller text size for smaller screens.\n\n- Update NoData Improved readability by improving text color contrast. Removed text uppercase according to the writing style guide.\n\n- Update Fieldset Update \"fieldset\" and \"legend\" style for grouping form elements. Added demo to showcase utility of using fieldsets in forms.\n\n- Icons Icons Update icons optical center to work better within circles like the direction icon for the map marker rioglyph- direction rioglyph- parking rioglyph- antenna rioglyph- heart rioglyph- location-arrow\n\n- New CSS Grid & Subgrid Added multiple CSS Subgrid utility classes and examples. Extended Grid classes and documentation\n\n- New Added bg-none and hover-bg-none class\nVersion 1.0.0 (2024-06-03)\n- Breaking With this version, we have started migrating all components towards Typescript for better typing support and documentation. With this migration, we will remove the internal types.ts file. As it was not intended to be used by any service, please make sure you update your imports accordingly. Check out the How to for more details. Be aware of possible changed component types as well.\n\n- Breaking Map With this version the HERE map implementation has changed significantly since we have migrated the map internally to the latest HERE APIs. This includes also the map rendering where the default render engine has changed from WebGL to HARP. Raster maps are rendered with the P2D engine. Due to this migration, the map types have a different design now. To make use of the new rendering engine, please add the following HERE dependency to your project. < script type = \" text/javascript \" src = \" https://js.api.here.com/v3/3.1/mapsjs-harp.js \" </ script\n\n- Removed Fade Removed several deprecated props from the Fade component\n\n- Removed Removed \"BrowserWarning\" component\n\n- Removed Removed \"text-muted\" utility class. Use \"text-color-gray\" instead\n\n- Removed Removed \"GroupSelectionUtil\" getNewGroupedSelected utility function\n\n- Removed Removed getOffsetTopWholeScreen utility function\n\n- breaking BottomSheet / Sidebar Renamed prop \"useBackdrop\" to \"hasBackdrop\" for BottomSheet and Sidebar component\n\n- breaking CalendarStripe Deprecated \"render\" prop of \"CalendarStripe\" component in favor of new \"renderDay\" prop\n\n- breaking Collapse / ExpanderPanel / ExpanderList Removed callbacks \"onEnter\", \"onEntering\", \"onExit\", and \"onExiting\" for ExpanderPanel and Collapse components. We introduced Framer Motions \"onAnimationStart\" callback instead. The ExpanderPanel header style underwent slight changes. The \"in\" class for the collapse is no longer used. Additionally, the \"react-transition-group\" library has been replaced with \"framer-motion\". The prop \"mountOnEnter\" has been removed from the ExpanderPanel, ExpanderList and Collapse components. Use \"unmountOnExit\" instead to control whether the collapsed content should be removed from the DOM when it is collapsed. The collapse prop \"in\" has been renamed to \"open\" to align with other components.\n\n- breaking List Groups and Expanders List groups no longer have a border and a border-radius by default. This has the advantage that they can now be used within other elements without having to overwrite many CSS values. To get the same look as before, you need to set the classes \"border\" and \"rounded\". Expander lists now have props for these two CSS properties, which are set to true by default.\n\n- breaking Resizer The Resizer component has been migrated from class component to functional component. With that the updated size value need to be set with a state setter function. Example: const handleResize = ( diff: number ) =setBoxWidth ( oldWidth =oldWidth - diff )\n\n- breaking Select / Multiselect Changed roles of Select and Multiselect dropdown menu from \"list\" to \"menu\" and the role of the individual select options from \"presentation\" to \"listitem\" to be aligned with the ButtonDropdown component. Fixed automatic drop direction check to open the dropdown above the toggle when there is not enough space. Removed deprecated size values \"small\" and \"large\" in favor of \"sm\" and \"lg\".\n\n- breaking Select The type definition for the Select component has changed. The more impactful change is the type for the \"onChange\" callback which has changed to handle the removal of a selection and therefor \"undefined\" will be returned. onChange = { ( selectedOption: SelectOption | undefined ) =handleChange ( selectedOption ?. id ) } Also important to note that the SelectOption type no longer can be imported via the \"types.ts\" file. Please adapt your import accordingly import Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\n\n- breaking Split SortArrows, SortArrowUp, and SortArrowDown in dedicated components. Change imports to default imports.\n\n- Removed useResizeObserver The \"Observer Entry\" object may now be null, so it can't reliably be destructured anymore. This doesn't work anymore: const [ ref, { borderBoxSize } ] = useResizeObserver ( ); console. log ( borderBoxSize ); Update your code like so: const [ ref, observerEntry ] = useResizeObserver ( ); console. log ( observerEntry ?. borderBoxSize ); Also, an option to specify the HTML element type of the generated ref was added (defaults to 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 incidents Fixed HERE traffic incident requests to include the configured map language as lang query parameter.",
+    "searchText": "Changelog\nVersion 2.4.1 (2026-05-06)\n- Fixed Map incidents Fixed HERE traffic incident requests to include the configured map language as lang query parameter.\n\n- Fixed Select and Multiselect Fixed filter results after options are updated incrementally, so useFilter continues matching against the latest option list.\n\n- Fixed DropdownSubmenu Fixed submenu rendering and restored the chevron alignment in nested dropdown menus.\nVersion 2.4.0 (2026-04-23)\n- Update Select and Multiselect Added a new variant prop with a blank variant to remove the wrapper shadow and toggle border/shadow.\n\n- Fixed Forms Fixed sized inputs with form-control so they use the correct font size again.\n\n- New Map viewport history Added viewport history for maps, including MapPreviousViewportButton for jumping back to previous map position states.\n\n- Fixed Map settings Fixed map settings dropdowns so they are displayed properly when opened.\n\n- New Table Added TableExpandAllGroupsButton for grouped tables and new grouped-row demos showing row selection across expandable groups and selectable group rows.\n\n- Update Table Added a new selectionCheckboxVerticalAlignment prop so checkboxes can be aligned independently.\n\n- Update Table Moved vertical alignment styling to the cell level for table head and body cells, which avoids header pixel jumping and keeps row-spanned headers aligned correctly.\n\n- Fixed Table Fixed table rows collapsing in overflow state when no rows with columns are available to define the table width.\n\n- Fixed Table Fixed header rendering for interactive header content and updated selection logic so selectable expanded group rows and selectable group rows work correctly with table selection.\nVersion 2.3.0 (2026-03-20)\n- New useDraggableElement Added a new useDraggableElement hook to make DOM elements draggable with pointer events, including support for dedicated drag handles.\n\n- New CSS Animations Added a new foundations demo page for CSS animations with interactive slide, fade, scale, and rotate examples, including controls for duration, delay, easing, repeat, looping, and playback.\n\n- New AI Assistant template Added a new template demo for AI-assisted service queries that turns a request into a structured response card with loading states and result tables.\n\n- Update Multiselect Added a new useClear prop to clear the current selection from the toggle, aligned with the existing Select API and documented in the multiselect demo page.\n\n- Update ButtonDropdown Added a new iconName prop and forward it to the underlying button toggle, so icon buttons no longer need custom title markup just to render a rioglyph with a button text.\n\n- Update Route Route interactions now show a pointer cursor for clickable routes and support an optional hoverStyle. Route clicks and hover now use an internal hit area to enlarge the clickable surface and make route interaction more reliable.\n\n- Update Polygon & Isoline Polygons and isolines now support click and hover interactions, including automatic pointer cursors for clickable shapes and an optional hoverStyle for hover feedback such as highlighted outlines.\n\n- Update Map performance Added marker icon caching for map markers and cluster markers, which avoids recreating identical marker icons, speeds up large marker sets, and can reduce memory usage by reusing shared DOM icon instances. Also added an optional zoom optimization to temporarily suppress marker pointer events during zoom interactions.\n\n- Fixed useResizeObserver Fixed repeated state updates when ResizeObserver reported the same size, which could trigger render loops under certain conditions.\n\n- Fixed routeUtils Fixed parseSorting to return the documented asc / desc sort direction values, so URL-based table sorting no longer resets after parsing in controlled integrations.\n\n- Fixed Fixed incorrect:focus-visible outlines on text links in Chrome 147 after the browser changed how outline-width and outline-style are computed.\n\n- Fixed InfoBubble Adjusted the HERE map InfoBubble to use the active theme font-family instead of HERE default font styles. Also added a new demo showing an InfoBubble opened from a POI map marker.\n\n- New DayPicker Added a new composable DayPicker component for date inputs with dropdown calendar, custom triggers, sidebars, footers, presets, validation, and composed date/time workflows.\n\n- New DayPickerCalendar Added a new standalone DayPickerCalendar component for embedded calendar use cases, including single, multiple, and range selection plus custom modifiers and day content.\n\n- New Table Added a new declarative Table component with compound subcomponents for headers, rows, cells, footers, grouped sticky rows, expandable rows, selection, sortable and resizable columns, column filters, disabled rows, row animations, and responsive card views.\n\n- New TableToolbar Added the new compound TableToolbarColumn API for declarative toolbar layouts with automatic left/right grouping via alignment, optional label and separator, plus per-column className support. Existing manual toolbar markup remains supported.\n\n- Update TableViewToggles Redesigned TableViewToggles to use a Select-based view switcher instead of the former toggle button group. Added dedicated label props for the dropdown items, while the older tooltip props are now deprecated and only kept as a fallback for item labels.\n\n- Update LoadMoreButton Added the new hideOnPrint prop, defaulting to true.\n\n- New AnalyticsAnalysisOverlay Added a new AnalyticsAnalysisOverlay component to visualize tracked elements on the page using uploaded analytics CSV data.\n\n- New googleAnalyticsUtils Added a new Utilities helper demo page for googleAnalyticsUtils with examples for getTrackingAttributes.\n\n- Update Button Added support for automatic GA tracking attributes via the new autoTrackingKey prop.\n\n- Update ExpanderPanel Added support for tracking attributes on panel headers, so getTrackingAttributes will be passed directly to ExpanderPanel.\n\n- Update ExpanderList Added support for tracking attributes on expander item, so getTrackingAttributes will be passed directly to ExpanderListItemHeader.\n\n- New New icons rioglyph- big-bag rioglyph- bulk-container rioglyph- coil rioglyph- roll-container rioglyph- shelve-empty rioglyph- stillage\nVersion 2.2.1 (2026-03-06)\n- Fixed TableSettingsDialog Fixed the TableSettingsDialog to prevent an endless loop under certain conditions.\nVersion 2.2.0 (2026-02-23)\n- Fixed Map utils Fixed getRoutePolylines to return the correct HERE map Polyline list. Also corrected the return types for getGroups, getMarkers, and getRoutePolylines to use the proper map object types.\n\n- Fixed RadialBarCharts Fixed RadialBarCharts responsive container to remove the fixed initial dimension, allowing charts to take the available width of the parent container.\n\n- Fixed Select Prevent double box-shadow on Select and Multiselect inside input groups with icon addons.\n\n- Fixed labels Fixed label heights for condensed filled labels to align with default condensed labels.\n\n- Fixed Map settings Fixed the map settings options animation so dropdowns/panels now fade in and slide up when opened.\n\n- Update MapTypeSettings Added visibleMapTypes for map-type visibility control via a single prop. The enableNightMap prop is now deprecated. Please control night visibility via visibleMapTypes instead.\n\n- Update TimePicker Add a new disabled prop to disable the TimePicker input and its control buttons. If you previously set disabled via inputProps, you can now use the dedicated component prop instead. The TimePicker now also calls onChange when the input is cleared. Added a new dropdown prop for selecting times from a dropdown, and a minuteOffset prop to define the dropdown interval and button step size.\n\n- Update Button Added support for rendering Button as an anchor element via the new as prop. Use as='a' together with a required href to render a link button while keeping native button type values for button elements.\n\n- Update Notification Improved notification message readability by balancing line wraps in notification text content.\n\n- Update Switch Added a new autoMinWidth prop. When minWidth is not set and autoMinWidth is true, the switch width uses the longer one of enabledText and disabledText.\n\n- New CircularProgress Added new CircularProgress component.\n\n- New Tracker Added a new Tracker component for compact status visualization with tooltip support, automatic block compression, and optional collapsing when the minimum block width is reached.\n\n- New RadioCardGroup Added a new RadioCardGroup component for custom card-style radio selection, including inline, stacked, and stacked-horizontal variants with both options-based and compound-item APIs.\n\n- New Pills condensed Added a nav-pills-filled-condensed version of filled nav-pills for use next to form elements like buttons and selects. This keeps heights aligned and provides a clearer way to indicate different views. Prefer these over the toggle button group for view switching.\n\n- New Shadows Added configurable hover-shadow-* utility classes with built-in transition support and a new shadow-focused utility class for a focused shadow preset.\n\n- New useSearchHighlight / SearchHighlightText Added the useSearchHighlight hook and SearchHighlightText component for native CSS highlight-based search results.\n\n- New useCookies Added a new useCookies hook for setting, deleting, and checking browser cookies.\n\n- New useRioCookieConsent Added a dedicated useRioCookieConsent hook for parsing the RIO cookie_settings consent cookie and returning typed RioCookieConsentInfo.\n\n- New useUrlState, routeUtils Added the new useUrlState hook and updated routeUtils for simpler state-in-URL parsing/serialization with native URLSearchParams and typed URL config support.\n\n- New classNames, mergeClassNameOverrides Added new utility helpers for CSS class handling: classNames for composing optional class tokens and mergeClassNameOverrides for overriding utility-class groups while keeping unrelated defaults.\n\n- New ellipsis-middle Added new ellipsis-middle utility class for truncating text in the middle while keeping the suffix visible.\n\n- New TextTruncateMiddle Added a new TextTruncateMiddle component for rendering middle-truncated text with a configurable suffix length.\n\n- New New icons rioglyph- trailer-standard rioglyph- trailer-tipping rioglyph- trailer-liquid rioglyph- palette-empty rioglyph- box rioglyph- box-open rioglyph- mesh-box\n\n- Guideline State in URL guideline Added a dedicated guideline page for deep linking and URL state, including best practices for what to store in URLs and pushState vs replaceState usage.\nVersion 2.1.0 (2026-01-13)\n- Fixed Map context menu Fixed the typing for the ContextMenuItem component.\n\n- Fixed Map route Fixed the typing for the arrowStyle prop of the Route component.\n\n- Fixed Map SimpleClusterLayer type Fixed the typings for the SimpleClusterLayer component’s simpleTheme prop. Please use the new SimpleClusterTheme type instead of the ClusterTheme.\n\n- Fixed Dialog Fixed broken fade animation of Dialogs in Firefox.\n\n- Fixed TableSettingsDialog Fixed TableSettingsDialog so reset to default remains available after reopening when settings differ from defaults.\n\n- Fixed Select Fixed select filter regressions where hitting ‘nothing found’ could leave the dropdown stuck or missing options. Backspacing or clearing now restores the full list and keeps keyboard focus/highlights in sync. Dropdown scroll now resets on reopen and keeps the keyboard-focused item in view when navigating up and down with the arrow keys.\n\n- Update URL feature toggles Replaced the internal \"qs\" library used for parsing URL search parameters with the native URLSearchParams API, allowing us to remove the external dependency. This also solves the vulnerability issue with the \"qs\" library for this version.\n\n- Update Tree Extended the Tree component to support custom external icon and logo URLs.\n\n- Demo Updated the component prop documentation for most components by deriving it directly from the component type definitions and source files. This ensures more accurate documentation and reduces maintenance effort for the demo pages.\nVersion 2.0.1 (2025-12-15)\n- Fixed DatePicker Fixed DatePicker compatibility in ESM builds by unwrapping the CommonJS default export.\n\n- Fixed Area, Line Fixed chart components type definition for prop \"dataKey\".\nVersion 2.0.0 (2025-12-12)\n- Breaking 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- Breaking 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- Breaking CalendarStripe Removed deprecated prop \"render\". Please use \"renderDay\" instead.\n\n- Breaking Collapse Removed deprecated prop \"in\". Please use \"open\" instead.\n\n- Breaking ClearableInput Removed deprecated prop \"alwaysShowMask\". Please use \"maskVisibility='always'\" instead.\n\n- Breaking Dialog Removed deprecated prop \"onHide\". Please use \"onClose\" instead.\n\n- Breaking SingleMapMarker Removed deprecated prop \"size\". Please use \"anchorSize\" instead. Removed deprecated prop \"visibleOnHover\". Please use \"markerOnHover\" instead.\n\n- Breaking 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- Breaking 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- Breaking OnboardingTip Removed deprecated prop \"clickflow\". Please use the \"useOnboardingTour\" hook instead.\n\n- Breaking 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- Breaking NumberInput / NumberControl Removed deprecated prop \"onValueChanged\". Please use \"onChange\" instead.\n\n- Breaking 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- Breaking Removed old class \"invisible\". Please use \"visibility-hidden\" instead.\n\n- Icons Renamed icon rioglyph- retweet rioglyph- repeat-square Renamed icon rioglyph- cost-efficency rioglyph- cost-efficiency Renamed icon rioglyph- eye-option rioglyph- eye-open Removed icon as it was a duplicate of rioglyph- component rioglyph- maintenance-components\n\n- Breaking BarChart, RadialBarChart, PieChart, Legend With this release, the internal Recharts dependency has been migrated to version 3.x. This upgrade introduces a breaking change related to the Legend component: the payload prop, which was previously used internally to inject custom legend data, has been removed from Recharts. As a result, the legend behavior in BarChart and RadialBarChart has been updated. The default legend position is now correctly rendered vertically in the top-right corner. Previously, it appeared at the bottom despite the default settings. Please review your charts to ensure the legend position remains as intended. If you use colors defined inside your data objects for BarCharts, you must now provide both the items (your data array) and a custom content render function to the Legend. This replaces the old payload-based legend behavior. Series-based legends using a formatter continue to work as before. Recharts 2.x also used to have a prop named activeIndex that was setting which item the user was interacting with. In version 3.0, this prop has been removed. For more details, see the Recharts activeIndex guide https://recharts.github.io/en-US/guide/activeIndex/ If your PieChart uses an activeShape render callback, you should now use the ChartTooltip component and set its defaultIndex to replace the previous activeIndex behavior. See the whole Recharts migration guide for more details: https://github.com/recharts/recharts/wiki/3.0-migration-guide#breaking-code-changes\n\n- Fixed FilePicker Fixed the type of the \"files\" parameter from FileList to File[] of the \"onPick\" callback.\n\n- Fixed Rioglyph Fixed Rioglyph icon typing to expose a concrete IconType union of all icon names, improving autocomplete and safety for consumers.\n\n- Update AssetTree Added new asset type \"car\" to AssetType type definition and to built-in type counter of the AssetSummary for the Tree component.\n\n- Update VolkswagenApplicationHeader Updated VolkswagenApplicationHeader with new VW Group logo. This single group logo also replaces the logo for \"VW Aktiengesellschaft\" and \"Group Logistics\" resulting in an overall smaller header height.\n\n- Update Migrated entire codebase from lodash to es-toolkit to leverage modern JavaScript.\n\n- New AnimatedTextReveal Added new AnimatedTextReveal component emphasize text through motion for showing incremental updates or loading states.\n\n- New useAutoAnimate Added a lightweight hook to animate add/remove/reorder operations of children with zero configuration.\n\n- New fit-content Added new \"min-width-fit-content\" utility classes. See detailed explanation and comparison to other content-based min-width classes.\n\n- New text-box Added new \"text-box\" utility classes to trimming off extra spacing from the block-start edge and block-end edge of a text element's block container.\n\n- New icons Added new rioglyph style for disabled icons with a line\n\n- New useIncomingPostMessages and usePostMessageSender New tooling for sending and receiving postMessage events. We recommend utilizing \"action-style\" events if you control both ends of the communication. This simply means to send event objects with a type property and an optional payload - very similar to Redux actions. To receive messages, the new useIncomingPostMessages can be used. It allows a declarative style of registering action-style event handlers in your application. You can still use the \"simple\" event handler variants, when you're interested in receiving events that don't follow the action-style approach. The usePostMessageSender hook provides easy access to methods used to send message events either to a dedicated destination or to \"broadcast\" events to all iframes. Note that the existing usePostMessage hook will be deprecated in a future release.\n\n- Icons New icons rioglyph- ai rioglyph- arrows-collapse rioglyph- arrows-combine rioglyph- arrows-expand rioglyph- arrows-horizontal rioglyph- arrows-split rioglyph- assigned rioglyph- axis-x rioglyph- axis-y rioglyph- axis-z rioglyph- bar-chart-box rioglyph- battery-charging rioglyph- brain rioglyph- branch-horizontal rioglyph- branch-remove rioglyph- branch-vertical rioglyph- broadcast rioglyph- bulb rioglyph- chip rioglyph- cloud-progress rioglyph- coffee rioglyph- compass rioglyph- crown rioglyph- discount-badge rioglyph- emergency-stop rioglyph- eye-closed rioglyph- eye-open rioglyph- filter-reset rioglyph- get rioglyph- give rioglyph- globe-alt rioglyph- hierarchy rioglyph- history rioglyph- insert rioglyph- leafs rioglyph- magic-wand rioglyph- note rioglyph- progression rioglyph- satellite-radar rioglyph- stack-add rioglyph- stack-iso rioglyph- stats-high rioglyph- stats-line-dots rioglyph- stats-low rioglyph- stats-medium rioglyph- time-incomplete rioglyph- unassigned rioglyph- unavailable rioglyph- variable rioglyph- workflow-step rioglyph- workflow Updated icons rioglyph- arrow-down rioglyph- arrow-left rioglyph- arrow-right rioglyph- arrow-up rioglyph- battery-level-empty rioglyph- battery-level-full rioglyph- battery-level-low rioglyph- cloud-download rioglyph- cloud-not-saved rioglyph- cloud-upload rioglyph- compare rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- cost-efficency rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- error-sign rioglyph- flash rioglyph- info rioglyph- maintenance-components rioglyph- merge rioglyph- missing rioglyph- off rioglyph- refresh rioglyph- repeat rioglyph- resize-full rioglyph- resize-horizontal rioglyph- resize-small rioglyph- resize-vertical rioglyph- save rioglyph- trash rioglyph- volume rioglyph- workshop rioglyph- wrench Removed icons rioglyph- video-off rioglyph- wifi-off\nVersion 1.13.2 (2025-11-19)\n- Fixed Obfuscate data Fixed a bug that triggered an infinite loop when data-pii was applied to a nested child element.\n\n- Update Button Added new \"unstyled\" buttons style\nVersion 1.13.1 (2025-10-20)\n- Fixed Fixed bundling npm package. Resolve nested folder structure in npm package build.\nVersion 1.13.0 (2025-10-20)\n- Fixed fuel type utils Fixed missing root export for fuel type utils.\n\n- Fixed Action button style Fixed the muted style for action buttons.\n\n- Fixed MapMarker Fixed the active styling for the map marker active state to visually balance the state icon.\n\n- Update Rioglyph Added the missing feature to use external SVGs as a rioglyph icon.\n\n- Update FilePicker Added new \"fullHeight\" flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow.\n\n- New max-content Added new \"min-width-max-content\" and \"min-width-min-content\" utility classes. The first prevents content from breaking by expanding to fit its full width, while the second allows content to shrink to the smallest width possible without overflowing.\n\n- New Grid Added new \"grid-template-end--1\" utility class. This class allows grid items to span until the last grid line, effectively positioning them to extend to the end of the grid.\n\n- New Obfuscate data Added new \"data-hide-pii\" attribute to the <htmlelement to obfuscate sensitive data directly in the frontend. Obfuscate names, emails, or phone numbers — without needing backend filtering or extra code changes.\n\n- Icons New icons rioglyph- circle-dashed rioglyph- square-dashed rioglyph- cube-dashed rioglyph- cube rioglyph- group-blocks rioglyph- dashboard-view rioglyph- ok-dashed rioglyph- prompt rioglyph- recycle rioglyph- warehouse rioglyph- status-change rioglyph- status-change-horizontal rioglyph- transition-right rioglyph- transition-push-right rioglyph- migrate rioglyph- convert rioglyph- shelve rioglyph- conveyor-belt rioglyph- tracking-package rioglyph- issue-tracking Updated icons rioglyph- ok-sign rioglyph- ok-circle\nVersion 1.12.0 (2025-09-22)\n- Fixed Select Fixed an issue in the Select component where clearing the filter input after a no-results search caused the option list to remain incomplete. The dropdown now correctly restores the full option set when the filter is cleared.\n\n- Fixed AssetTree Fixed an issue where clicking the checkbox on a tree group would also toggle its expanded state. Now, selecting a tree group via its checkbox only triggers selection and no longer expands or collapses the group. This prevents unintended virtualization behavior where expanding a node could cause the tree to switch into virtualized mode, resulting in the loss of tree group selections.\n\n- Fixed Callout Removed overflow hidden from callouts so dropdowns can be shown correctly.\n\n- Fixed Ellipsis Fixed \"ellipsis-1\" class.\n\n- New Rioglyph, fuel type utils Added a new component for rendering Rioglyph icons as a span element. The component also supports paired icons, allowing two glyphs to be displayed together as a combined symbol. In addition, a \"getFuelIcon\" helper function was introduced that maps fuel types to their corresponding icons, ensuring consistent and correct icon usage across the application.\n\n- Update FormLabel Added missing \"Node\" type info for supportingText the props table and changed the handling of supportingText styling so that the text-italic class is only applied when the supportingText is a string. If you provide a string wrapped in a div or span, you have to set the italic class manually.\n\n- Update Tree Added a new \"pairIcon\" prop to TreeItem allowing pair icons to be individually specified in the Tree component.\n\n- Update ClearableInput Added new input mask related props \"maskOverwrite\", \"maskDefinitions\", and \"maskDispatch\" to support dynamic masking for more complicated use cases and to give more control over the masking.\n\n- Update useOnboardingTour Updated the typings and documentation for the useOnboardingTour hook.\n\n- style Pills Updated the hover style for the application header navigation as well as for the nav pills.\n\n- Icons As RIO will support more fuel types in the future, and because of inconsistencies in existing naming conventions, we introduced a new icon: \"rioglyph-fuel-liquid\". This icon replaces \"rioglyph-fuel-diesel\" to better represent a broader range of liquid fuels. With this change, there are now four dedicated fuel icons available, plus one for a mixed fuel type. rioglyph- fuel-liquid rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- fuel-mix With this approach, frontends can use the same icon for diesel or gasoline and also for CNG and natural gas by simply using the new \"getFuelIcon\" function form the Rioglyph component. The old “rioglyph-fuel-diesel” icon will continue to work, but it will no longer be listed in the UIKIT demo page icon list. Additional new icons: rioglyph- video rioglyph- video-off\n\n- Demo Service-specific settings Updated the ApplicationHeader demo to include an example of service-specific settings, establishing a consistent approach for presenting unique configurations that cannot be included in the global user profile settings. It helps ensure a familiar user experience across different services while keeping global settings clean and focused.\nVersion 1.11.0 (2025-08-11)\n- Fixed Map settings Updated implementation for map satellite view to support zoom limits by using a hybrid map layer approach.\n\n- Fixed SteppedProgressBar Fixed styling issue in circular variant of the SteppedProgressBar when an item is active.\n\n- Fixed SplitDialog Fixed left side width for larger dialogs. Added new prop to hide the split divider.\n\n- Fixed FormLabel Fixed usage of HTML tag label only when part \"htmlFor\" is set and has a value.\n\n- Update Tree Added a new \"expandedIcon\" prop to the TreeGroups to support showing a different icon when the group is expanded.\n\n- Update Sticky table columns Renamed \"table-sticky-cell-first\" and \"table-sticky-cell-last\" to \"table-sticky-column-first\" and \"table-sticky-column-last\" for improved clarity. Updated the styles to respect the table header and prevent content from peeking through when horizontally scrolled.\n\n- New useAverage, useCount, useMin, useMax, useSum Added useAverage, useCount, useMin, and useMax, and useSum hooks for locale-aware numeric aggregation of object lists. Supports specifying a dot-separated path to the target property.\n\n- New Table grid lines Added new table class \"table-grid-lines\" that is useful when building data heavy tables.\n\n- New Table row span and Table double row header Added new table examples showcasing row span and double header layouts to demonstrate table design capabilities for data heavy tables.\n\n- New Progress bars indeterminate style Added new indeterminate style to show a progress bar even when you not know how long it will take.\n\n- Demo Templates Added new template sections and several UI block examples. Updated the template menu structure to improve navigation and discoverability.\n\n- Demo Email generator We’ve built a neat little email editor that helps you compose emails and copy the HTML code.\n\n- Demo Route generator There is a new route generator with a JSON export of the LAT/LNG coordinates.\nVersion 1.10.1 (2025-01-08)\n- Fixed Map settings Changed implementation for map satellite view as the old implementation relied on deprecated Here APIs.\nVersion 1.10.0 (2025-07-28)\n- Fixed Fixed an issue where clicking the \"Scroll to Top\" arrow button would block further scrolling down the page. The scroll behavior is now fully restored after returning to the top, ensuring smooth navigation throughout.\n\n- Fixed DatePicker Fixed styling issue in DatePicker inputs with error feedback where input text was unnecessarily cut off due to padding for the clear icon, even when no clear button was rendered.\n\n- Fixed ApplicationHeader Fixed an issue where the application header rendered in mobile style on initial page load when the container width could not be determined in time. This resolves visual jumping between mobile and desktop header layouts during mount.\n\n- Fixed SavableInput / SavableDateInput Moved error handling into the components to simplify feedback styling. Added two new props, \"errorMessage\" and \"hideErrorIcon\", to control the visual appearance of error feedback.\n\n- Fixed Panels, Pills, Badges Fixed various element styles for brand themes.\n\n- Update Tree Added a new \"icon\" prop to TreeItem allowing icons to be individually specified or explicitly omitted in the Tree component. Also updated the TreeGroups to support icon values with or without the rioglyph- prefix for improved flexibility.\n\n- New CSS Container queries Introduced new utility classes to make use of container queries, enabling responsive spacing and layout adjustments based on container width rather than viewport size. For more details, please check out our responsiveness guidelines.\n\n- New Rounded table Added new utility classes \"table-bottom-rounded\" and \"table-rounded\" for use when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners.\n\n- Icons Added icons icons rioglyph- train rioglyph- cargo rioglyph- design\n\n- Style We migrated our codebase from Less to Sass to modernize our tooling and take advantage of the latest CSS capabilities, as Less is no longer actively maintained.\n\n- Demo Renamed the main navigation items to improve clarity and consistency. “Design” is now called Foundations, and “UI Templates” has been simplified to Templates to better reflect their purpose.\n\n- Demo Added new sections and examples to UI templates that serve as a quick starting point for developing your own layouts and interfaces. See Expandable details, Details views, and Progress cards. Moved the panel example from the foundations tab to Panel variants.\nVersion 1.9.0 (2025-06-30)\n- Fixed Tooltip / SimpleTooltip Fixed delaying tooltips using a single delay number. Tooltip delay now only applies to showing, not hiding. To configure both show and hide delays, use the object format instead of a single delay number.\n\n- Fixed ClearableInput Properly pass external ref to underlying masked input component using its inputRef prop.\n\n- Fixed DatePicker Fixed an issue where the DatePicker would render incorrectly when used as a child inside a table cell.\n\n- Update TableHead, TableCol Extended table components to pass additional props to the underlying tag.\n\n- Update useTableSelection Extended useTableSelection hook to allow setting the selected rows and change the active row from the outside using the \"setSelectedRowIds\" and \"setActiveRowId\" setter functions.\n\n- Update Select, Multiselect We’ve reverted the max-width of the Select, and Multiselect dropdown to 100% to stay consistent with other components and to prevent unnecessary line breaks within dropdown items. If the dropdown appears too wide, you can use the dropdownClassName prop to apply a shorter max-width-x utility class as needed.\n\n- Update AssetTree Extend the Tree component to virtualize tree items when a certain threshold is reached. The number of items rendered beyond the visible area can be controlled using the \"overscan\" prop. This change improves performance for large trees and long lists.\n\n- Update Map Extend the Map component to allow specifying minimum and maximum zoom levels. By default, the minimum zoom level is set to 3, defining the furthest zoomed-out view. The maximum zoom level, representing the closest zoomed-in view, is set to 20. Improved zoom behavior to reduce momentum and allow for more controlled zooming.\n\n- Update FormLabel Extend the FormLabel component to allow passing in a React element as supporting text, making it easier to add question mark icons with tooltips.\n\n- New SavableDateInput Added new dedicated savable input component that wraps the DatePicker.\n\n- New BarList Added BarList component to display customizable, animated horizontal bars for comparative data.\n\n- New useTableExport Added new custom hook to easily export table data as CSV.\n\n- New useIsFocusWithin Added new custom hook to easily detect if the focus is inside a defined document node.\n\n- Docu Pagination Added usage documentation for pagination and explained why the load more button is preferred for tables.\n\n- Demo UI Templates Added new sections showcasing various UI templates and blocks that serve as a quick starting points for developing your own layouts and interfaces.\nVersion 1.8.0 (2025-05-19)\n- Fixed Map Fixed issue with satellite view layer not rendering correctly when Norwegian language is selected.\n\n- Fixed usePostMessage Remove logging of triggered events to the console.\n\n- Fixed Height classes Corrected height calculation when using \"\"...-height-100vh\" classes inside module-content; vertical padding was not properly subtracted.\n\n- Update URL feature toggles Made the feature toggle value types more precise. Added new feature toggle definition functions that allow you to specify a default value.\n\n- Update AssetTree Extended the Tree component with an onTypeFilterChange callback, allowing the service to filter selected assets accordingly.\n\n- Update Multiselect Added a maximum width of 200px for the Multiselect dropdown component. Additionally, there are two new props \"dropdownClassName\" and \"btnClassName\" to allow further customization similar to the Select component.\n\n- Update ButtonToolbar Extend alignment prop to center buttons.\n\n- Update Switch Added new \"className\" prop to the Switch.\n\n- Update ButtonDropdown Added new prop \"toggleButtonType\" to ButtonDropdown component to allow using a button, a tag or a label as toggle element.\n\n- Update ClearableInput Added a new prop \"maskVisibility\" to control when the mask pattern is visible. Deprecated the prop \"alwaysShowMask\". in favor of maskVisibility.\n\n- Update useOnboardingTour Expose internal onDestroyed callback. Add \"disableActiveInteraction\" prop to disable interaction of highlighted elements.\n\n- Update useSorting Added new callback function \"setSortDirection\" allowing to set sort direction when used with table card sorting.\n\n- New useLocationSuggestions Added new custom hook to fetch locations from Here API that can be used for search inputs.\n\n- New useSearch Added new custom hook to filter a list of objects by a search value.\n\n- New useTableSelection Added new custom hook to handle both single and multiple row selection in tables, optimized for large datasets.\n\n- New TableHead, TableCol Added new table components \"TableHead\" and \"TableCol\" to simplify table structures especially when used with custom hooks like \"useTableSelect\" and \"useSorting\".\n\n- New SvgImage Added new component that helps rendering SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes.\n\n- Icons New icons rioglyph- envelope-open rioglyph- envelope-indicator\n\n- Replaced Replaced react-input-mask with react-imask in TimePicker and ClearableInput components. The mask prop format has changed and is no longer fully compatible with the old react-input-mask syntax. The main difference is the number placeholder, which has changed from \"9\" to \"0\". Please update the mask prop accordingly when using the ClearableInput with an input mask.\nVersion 1.7.1 (2025-02-14)\n- Fixed Banner Fixed height animation of the Banner component when expanding. Added prop \"initialAnimation\" to disable initial content animation.\n\n- Fixed FormLabel Check for various input group sizes to render respective label text sizes.\n\n- Fixed SplitDialog / ListMenu Fixed the issue where a ListMenu dropdown was rendering all menu items on mobile upon mount. Now, only the dropdown is rendered initially.\n\n- Fixed RIOglyph Removed default aspect ration of 1/1 because of problems in flex/grid layouts.\n\n- Fixed Checkbox Fixed broken indeterminate state\n\n- Update RIOglyph Added new rioglyph-align-top, rioglyph-align-bottom and rioglyph-align-baseline classes for proper alignment width texts. Replaced previously introduced has-inline-icon with new rioglyph-align classes.\nVersion 1.7.0 (2025-02-10)\n- Fixed Collapse Fixed visible content overflow in the Collapse and Expander components during content animations.\n\n- Fixed ApplicationLayout Fixed the issue with passing a ref to the ApplicationLayout by exposing the underlying wrapper element. When merging the external ref with the internal ref, the wrapper is now properly exposed, eliminating the need for accessing ref.current.current in the invoking component.\n\n- Fixed ButtonDropdown / useClickOutside Fixed performance of rendering many dropdowns in a large table by introducing an \"isActive\" flag to the useClickOutside hook so that events are only registered and listening when the dropdown is actually open.\n\n- Fixed Route Fixed rendering of dashed routes via the \"lineDash\" prop.\n\n- Fixed List groups Fixed list group buttons active style.\n\n- Icons RIOGlyph We've transitioned the RIOGlyph icon font to an SVG-based system and allowing support for custom SVGs. Please read our guidelines Almost all RIOGlyph implementations will work out of the box. However, in certain cases, adjustments are required because RIOGlyph icons no longer behave as a font. What has changed? Previously, icons acted like text, inheriting line-height and vertical-align naturally. Now, as SVG elements, icons better have layout adjustments in inline text scenarios. The HTML structure for MapMarkers has been changed to accommodate the new icons. Please update the DOM selectors in your tests accordingly if they rely on the markup. All icons can now also be displayed as filled icons by adding rioglyph-filled Recommended solution < span className = \" has-inline-icon \" Lorem ipsum dolor sit amet < span className = \" rioglyph rioglyph-face-smile \" </ span </ span Lorem ipsum dolor\n\n- Update Dialog Changed dialog footer to use flex layout to ensure proper button positioning. No more need to add \"pull-right\" or custom flex classes.\n\n- Update Dialog animation Add support for the browser's \"prefers-reduced-motion\" flag. When this flag is enabled, dialog animations are disabled. This can be helpful for customers experiencing performance issues while running the application.\n\n- Update ListMenu Added new props to ListMenuItem to allow adding a badge for the list menu group header.\n\n- Update AppNavigationBar Added new props to AppNavigationBar to support a back button title, a subtitle, and a title size. The title is now always centered.\n\n- Update Notifications Replaced the underlying notification library with \"react-toastify\", introducing new options while maintaining the same API for backward compatibility. This update also includes a refreshed notification style.\n\n- Update Charts Updated internal Recharts library to latest version 2.15.0 to remove some warnings.\n\n- style Labels Updated the design of standard labels for a more modern look and added documentation on when to use them.\n\n- New Button Added new \"muted-filled\" button for occasions where the default button is to prominent and the muted button is to subtle.\n\n- New StepButton Added new \"StepButton\" component for convenience and to ensure consistent styling of this type of button.\n\n- New ButtonToolbar Added new \"ButtonToolbar\" component for convenience and to ensure consistent spacing of buttons.\n\n- New FormLabel Added new \"FormLabel\" component for convenience to be used on form elements that utilizes a \"htmlFor\" prop and a label or other form elements.\n\n- New LabeledElement Added a simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements\n\n- New Card Added new \"Card\" component for convenience to apply default styling for a card like element. This component aims to simplify and align common card styling.\n\n- New Avatar Added new \"Avatar\" component for showing the user name initials, a user image, or a user icon.\n\n- New Banner Added new \"Banner\" component for rendering informational content on a page.\n\n- New AccentBar Added new \"AccentBar\" component for visual cues.\n\n- New VirtualList Added new \"VirtualList\" component for rendering large lists using a windowing approach.\n\n- New useToggle Added new \"useToggle\" component to simplify boolean state handling. Use it to handle toggle-based logic like switches, modals, or content visibility.\n\n- New Chart colors Added new chart colors to the chart color map.\n\n- Demo Draggable map marker Added new map demo to showcase draggable map marker.\n\n- Icons New icons rioglyph- light-bulb Renamed icons rioglyph- filled-chart rioglyph- area-chart Updated icons rioglyph- am rioglyph- angle-double-down rioglyph- angle-double-left rioglyph- angle-double-right rioglyph- angle-double-up rioglyph- area-in rioglyph- area-out rioglyph- beacon rioglyph- bookable-poi rioglyph- bookmark-square rioglyph- brake rioglyph- businessman rioglyph- car-wash rioglyph- carrier rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- construction rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- document-out rioglyph- download rioglyph- driver-card rioglyph- driver rioglyph- drivercard-in rioglyph- drivercard-out rioglyph- erase rioglyph- file-signature rioglyph- fill rioglyph- folder-open rioglyph- home rioglyph- inbox-in rioglyph- inbox-out rioglyph- log-in rioglyph- logout rioglyph- map-location rioglyph- map-marker rioglyph- pencil-square rioglyph- pm rioglyph- retrofit rioglyph- role-management rioglyph- tachograph-download rioglyph- tms rioglyph- trailer rioglyph- user rioglyph- volume rioglyph- warning-sign rioglyph- weight\n\n- Update Dependencies Updated the minimum React version requirement to 18 to ensure compatibility with the latest features and optimizations. If you are using older versions of React, please update.\n\n- Removed Removed the outdated cross-browser style documentation.\n\n- Update Notifications Extended the writing style guide for guidance for using different notification types\n\n- Update Commonly misspelled words Extend the writing style guide for a list of commonly misspelled or misformatted words\n\n- Update Formatting numbers with units Extended the list of formats for examples of \"kilowatt-hour\" and \"megawatt-hour\". Please note that these units are not yet officially supported by TC39.\nVersion 1.6.1 (2024-12-09)\n- Fixed ApplicationLayout Fixed the application layout to ensure the body contains only a single child, addressing issues with the recently introduced grid layout for the body scrollbar element.\nVersion 1.6.0 (2024-12-02)\n- Fixed SplitDialog Fixed the SplitDialog prop documentation for \"useOverflow\" to clarify that its default value is \"true,\" unlike other dialogs.\n\n- Fixed Multiselect Fixed the Multiselect component to correctly manage the dropdown state and filter value when used in multiline mode with an active filter.\n\n- Update Tree Added \"treeHeaderContent\" prop to the Tree component for rendering additional custom content at the top of the tree, useful for navigation pills.\n\n- Update Dialog Extended dialog sizes for \"fullheight-lg\" and \"fullheight-xl\".\n\n- New useOnboardingTour Introducing a new way to onboard users via an onboarding tour by using the \"useOnboardingTour\" custom hook. Note that weh have deprecated the \"clickflow\" prop for the OnboardingTip component with this new feature.\n\n- New OnboardingDialog Added new OnboardingDialog to initiate a onboarding tour and acts as the welcome dialog for the user of a service.\n\n- New Grid rows Added new grid helper class \"grid-rows-auto-1fr-auto\" to support a 3 row layout with expandable middle row.\n\n- Icons Updated icons rioglyph- cost-efficency Added icons rioglyph- newspaper rioglyph- rocket rioglyph- trophy rioglyph- check-badge rioglyph- check-shield rioglyph- sparkles rioglyph- academic-cap rioglyph- onboarding rioglyph- bookmark rioglyph- bookmark-square\nVersion 1.5.3 (2024-11-05)\n- Fixed AssetTree Fixed asset tree height by setting the \"scrollbar-content-wrapper\" to display flex and let the tree wrapper grow in the flex column direction.\nVersion 1.5.2 (2024-11-04)\n- Fixed SmoothScrollbars Changed height-100pct to min-height-100pct because of height side-effects in chrome.\n\n- Icons Added icons icons rioglyph- oil-can\nVersion 1.5.1 (2024-10-22)\n- Fixed Pills Fix rendering icons in justified filled pills when there is an icon only.\n\n- Fixed SmoothScrollbars Added height-100pct to the recently introduced smooth scrollbar content wrapper. This also fixes a side-effect on the AssetTree component.\n\n- Fixed MapMarker Tone down the POI marker color to better match the new Geofence color and to work better on a large satellite map.\nVersion 1.5.0 (2024-10-21)\n- Fixed Route Fix setting route arrow style. Added color constants for using status colors for routes. Extend demo examples to showcase usage of route styles and colors.\n\n- Fixed SmoothScrollbars Fix updating the scrollbar handle when the content height changes. This fix introduces a new wrapper div to check the children's height. Please check your tests and update them in case you rely on the old structure.\n\n- Fixed Select Fixed an issue with updating the dropdown menu options after the initial render, ensuring that the filter utilizes the updated DOM nodes.\n\n- Update LineChart Extended charts to render additional axis. The demos have been extended for interactive legends to highlight active lines.\n\n- Update Route Extended Route component to allow storing custom data to it which can be used when clicking on the routes polyline to set the route active.\n\n- Update Map isoline Extended the Polygon component to import the RIO colors to use it for an isoline or other polygons. Extended the demo to also include isoline colors.\n\n- Update Colors Adapted the \"gray-decent\" slightly and with that all derived classes like \"bg-decent\" and \"hover-bg-decent\"\n\n- Update Forms All form inputs have a subtle shadow now.\n\n- New Map marker A new map marker color has been added for road restrictions. The geofence color has been updated to avoid confusion with the restriction color used by HERE maps for their road restrictions. The new geofence color provides significantly better contrast and is clearer to see on the satellite map type.\n\n- New Chat Added new pure CSS chat component\n\n- New FadeUp Added new components to fade in from the bottom when an element appears on screen. This can be used to stagger elements on scroll.\n\n- New FadeExpander Added new components to expand content. This can be used to reveal or hide additional content triggered by all kinds of interaction.\n\n- New Cursor Added more cursor-style utility classes\n\n- New Shadows Added new shadow classes \"shadow-subtle\" and \"shadow-muted\", as well as directional classes \"shadow-muted-down\" and \"shadow-default-down\" to be used on light and white backgrounds. The hard shadow direction styles are now slightly more blurred to remove the hard line in the shadow. Note: the following shadow classes are deprecated: \"shadow-smooth-to-top\", \"shadow-smooth-to-bottom\", \"shadow-hard-to-top\", and \"shadow-hard-to-bottom\". Please use \"shadow-smooth-up\", \"shadow-smooth-down\", \"shadow-hard-up\", and \"shadow-hard-down\" instead.\n\n- New useSorting Added new useSorting hook for easily sorting any list by specified key using natural sort order\n\n- New URL feature toggles Added URL-based feature toggle handling and description of how to use them\n\n- Icons Added icons icons rioglyph- bookable-poi rioglyph- car-wash Updated icons rioglyph- truck rioglyph- truck-baseline rioglyph- truck-breakdown rioglyph- truck-unit rioglyph- van rioglyph- van-baseline rioglyph- trailer rioglyph- trailer-baseline rioglyph- trailerposition rioglyph- car rioglyph- car-baseline rioglyph- bus rioglyph- bus-baseline rioglyph- bus-breakdown rioglyph- filling-e-station rioglyph- filling-station rioglyph- euro-note rioglyph- order rioglyph- palette rioglyph- palette-broken rioglyph- parcel rioglyph- parcel-broken rioglyph- empty\n\n- Update Border radius and shadows The default border radius has been increased, and new shadow styles have been introduced, affecting various elements such as buttons, inputs, and panels. These updates collectively enhance the overall design, providing a more modern, refined, and visually appealing look and feel.\nVersion 1.4.1 (2024-09-12)\n- Update ButtonDropdown Added forwardRef to ButtonDropdown and pass it to the underlying dropdown toggle button. Fixed ButtonDropdown demo page examples.\n\n- Fixed Tooltip Wrapped Tag and Switch component in forwardRef so they work with the OverlayTrigger and SimpleTooltip component\n\n- New Map fullscreen demo Added a fullscreen map demo with rendering some metrics for inspection and customer feedback\nVersion 1.4.0 (2024-09-06)\n- Fixed Fixed dark mode listener when trying to read the theme from the colorScheme cookie\n\n- Fixed Charts Fixed rendering of chart legends for all charts\n\n- Update LineChart, AreaChart Extended LineChart and AreaChart components with reference lines\n\n- Update Select Added \"isLoading\" prop to show a loading spinner inside the Select and Multiselect dropdown\n\n- Update useKey Extend useKey hook to allow specifying specific keys to listen for\n\n- New ComposedChart Added new simple ComposedChart component to render a combination of line, area, and bar charts\n\n- New GroupedItemList Added new GroupedItemList component to render a list grouped by a specific key with the flexibility to customize the group header and the rendered items\n\n- New LicensePlate Added new LicensePlate component to display license plate information with various customization options\n\n- Icons Added and updated icons rioglyph- air-pay rioglyph- euro-note rioglyph- language rioglyph- calendar-parking rioglyph- engine\n\n- Update Notifications Extended the writing style guide for notification and \"copy to clipboard\" guidelines\nVersion 1.3.0 (2024-07-26)\n- Fixed TreeOptions Fixed tree options tooltip position\n\n- Fixed DataTab Fixed DataTab title to avoid being set to the div element and used as native tooltip\n\n- Fixed SimpleDialog, SplitDialog Fixed typings of SimpleDialog and SplitDialog\n\n- Fixed Select Fixed italic placeholders for Select and Multiselect\n\n- Fixed Fixed DateRangePicker type for backwards compatibility\n\n- Update Sliders Added new \"color\" prop\n\n- Update Switch Added new \"color\" prop\n\n- Update Forms Added new focus shadow for form inputs and changed the input border color\n\n- Update OverlayTrigger, Tooltip, OnboardingTip, Popover The OverlayTrigger and Popover components are no longer based on react-bootstrap. They have been rewritten to remove the dependency and to fix some warnings when used with React 19.\n\n- New useElapsedTime Added new useElapsedTime hook to get the time since a component was mounted or from a provided starting time\n\n- New Flexbox Added class \"flex-0\" to flexbox utility classes\n\n- New Rounded Added class \"rounded-inherit\" to rounded utility classes\n\n- Update RIO Theme The danger color has been slightly adjusted to better match the other colors. Dark mode colors for danger, warning, and success have also been updated.\n\n- Update VW Theme Adapt highlight colors to VWAG guidelines\n\n- Update Formatting guide Extracted number and date formatting guidelines into a dedicated formatting guide page. This makes it easier to find and to keep the writing style guide shorter.\n\n- New Form labels and placeholders Extended the writing style guide for form labels and placeholders\nVersion 1.2.2 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown header items\n\n- Fixed Checkbox Fixed the rendering position of the checkbox in the grid layout using align-baseline, ensuring it remains stable when checked and unchecked\nVersion 1.2.1 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown when used in unit tests\n\n- Fixed Tree Fixed Tree scrolling when used as a standalone component without the wrapping AssetTree and when a \"scrollHeight\" is defined\n\n- Fixed AssetTree Merged the nested elements \".TreeLabel\" and \".TreeLabelName\" into a single element for TreeNode and TreeLeaf. This reduces the number of DOM elements and enhances performance. Note that you may need to update selector paths in integration tests if they reference tree items.\n\n- Fixed Key Fixed key style for dark mode\nVersion 1.2.0 (2024-06-26)\n- Fixed SmoothScrollbars Added missing root export for SmoothScrollbars component\n\n- Fixed ErrorState, EmptyState, CustomState Fixed button alignment for mobile screens\n\n- Fixed Marker Fixed \"list-group-item\" style when using color indicators\n\n- Fixed Multiselect Fixed filter input padding when Multiselect is used with a leading input addon\n\n- Fixed useAfterMount Fixed hook useAfterMount functionality\n\n- Update MapSettings Enhance MapSettings to include item labels. Substitute MapSettingsPanel with a Dropdown when labels are available. Please provide labels for users to improve usability. Note that providing labels will become mandatory in the future.\n\n- Update Marker Added new mapMarker \"cursor\" props\n\n- Update ListMenu Added new prop \"trailingInputAddon\" to allow adding additional elements to the filter input\n\n- Update DeviceUtils Added new device utils helper function to check for Apple Mac OS to be used for showing mac specific keys\n\n- New Feedback Added new feedback components to simplify requesting user feedback for various use cases\n\n- New Key Added style for keys by using the \"<kbd\" HTML tag\n\n- New Visibility Added new \"visibility-hidden\" class to only target the visibility without setting display to none\n\n- New Input resize Added new input resize classes\n\n- Icons Added new Icon rioglyph- layer-pois",
     "category": "Getting started",
     "section": "Welcome",
     "boost": "Changelog start/changelog #start/changelog Getting started Welcome"
@@ -1314,7 +1314,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\nInstall the npm package\n\njavascript\nnpm install @rio-cloud/rio-uikit\n\n-\n\n/\n\n-\n\nOr install a dedicated version via\n\njavascript\nnpm install @rio-cloud/rio-uikit@2.4.0\n\n-\n\n/\n\n-\n\n2.4\n\n.0\nTypeScript\nTypeScript\n\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\";\n\nimport\n\n,\n\n{\n\n}\n\nfrom\n\n\"@rio-cloud/rio-uikit/AutoSuggest\"\n\n;\n\nimport\n\n,\n\n{\n\n}\n\nfrom\n\n\"@rio-cloud/rio-uikit/Select\"\n\n;\n\nimport\n\n,\n\n{\n\n}\n\nfrom\n\n\"@rio-cloud/rio-uikit/TableViewToggles\"\n\n;\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\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\" /\n\n<meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" /\nUIKIT CSS\nManaged\n\nRecommended\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\nManual\n\nNot 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.4.0/rio-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.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\nBrand themes\n\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.4.0/vw-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/vw-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/man-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/man-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/scania-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/scania-uikit.css\"\n\nManaged\n\nRecommended\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\n<html data-brand=\"vw\"\n\nhtml\n<html data-brand=\"man\"\n\n<html data-brand=\"man\"\n\nhtml\n<html data-brand=\"scania\"\n\n<html data-brand=\"scania\"\nPrint styles\nPrint styles\n\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.4.0/rio-uikit-print-utilities.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/rio-uikit-print-utilities.css\"\nAdditional styling information\nAdditional styling information\n\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.4.0/rio-uikit-colors.json\nDark mode\nDark mode\n\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\n<ApplicationLayout\n\n<ApplicationLayout.Header\n\n<ApplicationHeader label='RIO Service' navItems={navItems} /\n\n</ApplicationLayout.Header\n\n<ApplicationLayout.Body\n\n<div\n\nMy application\n\n</div\n\n</ApplicationLayout.Body\n\n</ApplicationLayout\n\njsx\n<ApplicationLayout\n<divMy widget</div\n</ApplicationLayout\n\n<ApplicationLayout\n\n<div\n\nMy widget\n\n</div\n\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.4.0/rio-darkmode.js\"</script\n\n<script src=\"https://uikit.developers.rio.cloud/2.4.0/rio-darkmode.js\"\n\n</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\"\n\n\"react\"\n\n:\n\n\"=18.0.0\"\n\n\"react-dom\"\n\n:\n\n\"=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\nInstall the npm package\n\njavascript\nnpm install @rio-cloud/rio-uikit\n\n-\n\n/\n\n-\n\nOr install a dedicated version via\n\njavascript\nnpm install @rio-cloud/rio-uikit@2.4.1\n\n-\n\n/\n\n-\n\n2.4\n\n.1\nTypeScript\nTypeScript\n\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\";\n\nimport\n\n,\n\n{\n\n}\n\nfrom\n\n\"@rio-cloud/rio-uikit/AutoSuggest\"\n\n;\n\nimport\n\n,\n\n{\n\n}\n\nfrom\n\n\"@rio-cloud/rio-uikit/Select\"\n\n;\n\nimport\n\n,\n\n{\n\n}\n\nfrom\n\n\"@rio-cloud/rio-uikit/TableViewToggles\"\n\n;\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\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\" /\n\n<meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" /\nUIKIT CSS\nManaged\n\nRecommended\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\nManual\n\nNot 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.4.1/rio-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.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\nBrand themes\n\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.4.1/vw-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.1/vw-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.1/man-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.1/man-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.1/scania-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.1/scania-uikit.css\"\n\nManaged\n\nRecommended\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\n<html data-brand=\"vw\"\n\nhtml\n<html data-brand=\"man\"\n\n<html data-brand=\"man\"\n\nhtml\n<html data-brand=\"scania\"\n\n<html data-brand=\"scania\"\nPrint styles\nPrint styles\n\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.4.1/rio-uikit-print-utilities.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.1/rio-uikit-print-utilities.css\"\nAdditional styling information\nAdditional styling information\n\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.4.1/rio-uikit-colors.json\nDark mode\nDark mode\n\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\n<ApplicationLayout\n\n<ApplicationLayout.Header\n\n<ApplicationHeader label='RIO Service' navItems={navItems} /\n\n</ApplicationLayout.Header\n\n<ApplicationLayout.Body\n\n<div\n\nMy application\n\n</div\n\n</ApplicationLayout.Body\n\n</ApplicationLayout\n\njsx\n<ApplicationLayout\n<divMy widget</div\n</ApplicationLayout\n\n<ApplicationLayout\n\n<div\n\nMy widget\n\n</div\n\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.4.1/rio-darkmode.js\"</script\n\n<script src=\"https://uikit.developers.rio.cloud/2.4.1/rio-darkmode.js\"\n\n</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\"\n\n\"react\"\n\n:\n\n\"=18.0.0\"\n\n\"react-dom\"\n\n:\n\n\"=18.0.0\"",
     "category": "Getting started",
     "section": "Welcome",
     "boost": "How to use the UIKIT start/howto #start/howto Getting started Welcome"
@@ -1324,7 +1324,7 @@
     "title": "Getting started with our UI Library",
     "lead": "Welcome! This UI library is designed to help you build beautiful, consistent, and maintainable user interfaces with minimal effort. Here’s how you can make the most of it:",
     "summary": "Welcome! This UI library is designed to help you build beautiful, consistent, and maintainable user interfaces with minimal effort. Here’s how you can make the most of it:",
-    "searchText": "Getting started with our UI Library\nWelcome! This UI library is designed to help you build beautiful, consistent, and maintainable user interfaces with minimal effort. Here’s how you can make the most of it:\nGetting started with our UI Library\nUse atomic CSS classes for styling\n- Consistency By using our predefined classes, your UI will have a common look and feel across all components\n- Maintainability When design updates occur, changes to the utility classes automatically propagate across the entire project, making updates easy and seamless\n- No custom styles needed Avoid the overhead of writing custom CSS. Use the tools we’ve already created to keep your codebase lean and manageable.\n\nFor example, instead of writing custom CSS for a flex container:\n\ncss\n.my-container {\ndisplay: flex;\njustify-content: center;\n}\n\n.my-container\n\n{\n\ndisplay\n\n:\n\n;\n\njustify-content\n\n:\n\n;\n\n}\n\nSimply apply the atomic classes:\n\nhtml\n<div class=\"display-flex justify-content-center\"...</div\n\n<div class=\"display-flex justify-content-center\"\n\n</div\nUse React components for structure\nOur library also includes a range of React components that serve as building blocks for your application. These components are designed to work seamlessly with the CSS classes, allowing you to:\n\n- Quickly build UIs using pre-built components like the buttons, selects, and dialogs\n- Combine React components with CSS classes to create complex layouts with minimal custom code\n- Extend your layouts by composing React components while using utility classes to tweak the design where necessary\nWhy stick to our CSS classes and components?\n- Efficiency Our library is optimized to reduce the need for custom styling and component creation. You’ll spend less time on UI design and more time on functionality.\n- Design flexibility When design changes occur, updating the UIKIT, a single CSS class or React component ensures that your entire project is updated without manual intervention\n- Better collaboration By sticking to the predefined patterns, your team will maintain consistency across projects, making it easier for multiple developers to collaborate without the risk of style mismatches\n\nEfficiencyOur library is optimized to reduce the need for custom styling and component creation. You’ll spend less time on UI design and more time on functionality.\n\nDesign flexibilityWhen design changes occur, updating the UIKIT, a single CSS class or React component ensures that your entire project is updated without manual intervention\n\nBetter collaborationBy sticking to the predefined patterns, your team will maintain consistency across projects, making it easier for multiple developers to collaborate without the risk of style mismatches\n\nBy combining atomic CSS classes and React components, you can create powerful, flexible user interfaces with ease, all while ensuring consistency and maintainability. Happy building!\n\nWhat is new?ChangelogRelease notes for each version of the UIKIT.How can I use it?How to use itInstructions on how to integrate it.Questions about the UIKIT?#rio-uikitPlease post your question on Slack.\n\nWe welcome any feedback to improve the UIKIT further. Please send it to uxui@rio.cloud\n\nThe RIO UIKIT is licensed under the Apache 2.0 license by TB Digital Services GmbH | version 2.4.0",
+    "searchText": "Getting started with our UI Library\nWelcome! This UI library is designed to help you build beautiful, consistent, and maintainable user interfaces with minimal effort. Here’s how you can make the most of it:\nGetting started with our UI Library\nUse atomic CSS classes for styling\n- Consistency By using our predefined classes, your UI will have a common look and feel across all components\n- Maintainability When design updates occur, changes to the utility classes automatically propagate across the entire project, making updates easy and seamless\n- No custom styles needed Avoid the overhead of writing custom CSS. Use the tools we’ve already created to keep your codebase lean and manageable.\n\nFor example, instead of writing custom CSS for a flex container:\n\ncss\n.my-container {\ndisplay: flex;\njustify-content: center;\n}\n\n.my-container\n\n{\n\ndisplay\n\n:\n\n;\n\njustify-content\n\n:\n\n;\n\n}\n\nSimply apply the atomic classes:\n\nhtml\n<div class=\"display-flex justify-content-center\"...</div\n\n<div class=\"display-flex justify-content-center\"\n\n</div\nUse React components for structure\nOur library also includes a range of React components that serve as building blocks for your application. These components are designed to work seamlessly with the CSS classes, allowing you to:\n\n- Quickly build UIs using pre-built components like the buttons, selects, and dialogs\n- Combine React components with CSS classes to create complex layouts with minimal custom code\n- Extend your layouts by composing React components while using utility classes to tweak the design where necessary\nWhy stick to our CSS classes and components?\n- Efficiency Our library is optimized to reduce the need for custom styling and component creation. You’ll spend less time on UI design and more time on functionality.\n- Design flexibility When design changes occur, updating the UIKIT, a single CSS class or React component ensures that your entire project is updated without manual intervention\n- Better collaboration By sticking to the predefined patterns, your team will maintain consistency across projects, making it easier for multiple developers to collaborate without the risk of style mismatches\n\nEfficiencyOur library is optimized to reduce the need for custom styling and component creation. You’ll spend less time on UI design and more time on functionality.\n\nDesign flexibilityWhen design changes occur, updating the UIKIT, a single CSS class or React component ensures that your entire project is updated without manual intervention\n\nBetter collaborationBy sticking to the predefined patterns, your team will maintain consistency across projects, making it easier for multiple developers to collaborate without the risk of style mismatches\n\nBy combining atomic CSS classes and React components, you can create powerful, flexible user interfaces with ease, all while ensuring consistency and maintainability. Happy building!\n\nWhat is new?ChangelogRelease notes for each version of the UIKIT.How can I use it?How to use itInstructions on how to integrate it.Questions about the UIKIT?#rio-uikitPlease post your question on Slack.\n\nWe welcome any feedback to improve the UIKIT further. Please send it to uxui@rio.cloud\n\nThe RIO UIKIT is licensed under the Apache 2.0 license by TB Digital Services GmbH | version 2.4.1",
     "category": "Getting started",
     "section": "Welcome",
     "boost": "Getting started with our UI Library start/intro #start/intro Getting started Welcome"
@@ -1354,7 +1354,7 @@
     "title": "Common table",
     "lead": null,
     "summary": "New Action",
-    "searchText": "Common table\nCommon table\nNew Action\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nTable view\nCards view\nList view\n\nColumns\n\nID\n\nName\n\nVIN\n\nStatus\n\nDuration\n\nActions\n\n233\n\nIpsum\n\nWVWZZZ1JZXW000002\n\nInactive\n\n5h 15m\n\n895\n\nDolor\n\nWVWZZZ1JZXW000003\n\nActive\n\n8h 45m\n\n2445\n\nAmet\n\nWVWZZZ1JZXW000005\n\nActive\n\n7h 25m\n\n3456\n\nSit\n\nWVWZZZ1JZXW000004\n\nMaintenance\n\n12h 00m\n\n7354\n\nLorem\n\nWVWZZZ1JZXW000001\n\nActive\n\n10h 30m",
+    "searchText": "Common table\nCommon table\nNew Action\n\n‹ May 2026 ›\nSu Mo Tu We Th Fr Sa\n\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n31 1 2 3 4 5 6\n\n12:00 AM\n\nTable view\nCards view\nList view\n\nColumns\n\nID\n\nName\n\nVIN\n\nStatus\n\nDuration\n\nActions\n\n233\n\nIpsum\n\nWVWZZZ1JZXW000002\n\nInactive\n\n5h 15m\n\n895\n\nDolor\n\nWVWZZZ1JZXW000003\n\nActive\n\n8h 45m\n\n2445\n\nAmet\n\nWVWZZZ1JZXW000005\n\nActive\n\n7h 25m\n\n3456\n\nSit\n\nWVWZZZ1JZXW000004\n\nMaintenance\n\n12h 00m\n\n7354\n\nLorem\n\nWVWZZZ1JZXW000001\n\nActive\n\n10h 30m",
     "category": "Templates",
     "section": "Tables",
     "boost": "Common table templates/common-table #templates/common-table Templates Tables"
@@ -1384,7 +1384,7 @@
     "title": "Feature cards",
     "lead": null,
     "summary": "Lorem ipsum dolor sit amet",
-    "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nAdvoco aestus capio omnis ratione solio adversus.\nAveho thesis modi curia viridis sit.\nTheca abscido tamdiu alius conicio.\nVobis temeritas qui audentia demoror tempus.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nCaput et vulgo apostolus.\nTabernus adflicto tibi quis arguo cui soluta cognomen ducimus viscus.\nVapulus terminatio desipio victoria atqui defetiscor debilito voluntarius.\nQuidem acceptus advenio tres volubilis ulciscor.\nRead more\nLorem ipsum dolor sit amet\nCollum dapifer adipiscor adamo compono comes utrum ratione.\nVilicus vesco usque iste asporto absque eum tergum appono cohors.\nBis architecto ventito turbo tredecim unde sit temeritas vaco amo.\nConculco ipsum hic.\nAurum caritas pecto vivo carpo taceo.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nCupiditas ipsa utrimque absens clamo quia credo suasoria.\nDenuncio autem contego eum cerno administratio baiulus sapiente sperno.\nUter quasi despecto derelinquo.\nNisi concedo quasi conitor auxilium delicate theca centum.\nCurso comminor agnosco.\n\nView details Get 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\nConsectetur ultio beatus viridis.\nOmnis optio vulticulus cui adversus mollitia.\nVotum tribuo surculus audacia comptus.\nDenuo ulciscor tenuis cicuta apto comminor.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nIllo audeo vestrum nam urbanus celer.\nTextus inventore despecto angustus usus alter speciosus tenax tracto pecco.\nVindico molestiae super bene.\nAtrox coruscus conscendo accedo patrocinor aiunt contra caste.\nRead more\nLorem ipsum dolor sit amet\nTheatrum arma soleo subiungo cohibeo trans creta sui undique.\nCognatus cetera caste substantia cornu temeritas adsidue.\nVergo amo nesciunt ullam.\nAspernatur pax temporibus culpa aegrotatio summa pecco suspendo.\nSonitus fuga quos assumenda ex deprimo.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nTepidus aureus terminatio aetas argentum tendo vir depereo aestas.\nVita iure cupressus pectus modi adimpleo.\nTalis cur suppellex aer creber sequi cetera combibo facere coaegresco.\nDecet tepidus sapiente capto volutabrum.\nAtque sub casso nulla abduco hic chirographum aestus curto.\n\nView details Get 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"
@@ -1394,7 +1394,7 @@
     "title": "Form summary",
     "lead": null,
     "summary": "Request summary",
-    "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact person Drew Goldner\nRequested role International Directives Representative\nContact email Bert.Labadie-Wilkinson33@hotmail.com\nAnnual budget €132,320.00\nProject description Cognomen conor defetiscor ad dedico.\nAbsens aggredior totus contabesco excepturi accendo taedium distinctio vis.\nVenia aro deorsum.\nSupporting files project-outline.pdf\n2.4MB\nDownload\n\nwireframes.pdf\n3.7MB\nDownload",
+    "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact person Krystal Leannon\nRequested role Global Quality Liaison\nContact email Abelardo_Reilly@gmail.com\nAnnual budget €94,988.00\nProject description Adeo cognomen delectus tolero textilis.\nCoerceo victoria vereor magni iste venio.\nCuius confero numquam catena bardus subito demulceo constans acidus vilitas.\nSupporting files project-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"
@@ -1414,7 +1414,7 @@
     "title": "List blocks",
     "lead": null,
     "summary": "Lorem ipsum dolor",
-    "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nTalis acquiro vomica cupiditate temptatio suspendo.\n\nTurner, Reichert and Howe\nCrinis vicinus iusto.\n\nConnect\n\nShields - Roob\nCauda iusto thema correptius defetiscor creptio testimonium compono inflammatio crur.\nAbsque adipisci adeptio voluptatibus veritatis corpus varius amaritudo cunctatio vomito.\n\nConnect\n\nDaniel-Fadel Inc\nArbitro cupio cerno necessitatibus contabesco demo eos totidem illum baiulus.\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\nSint annus desidero peccatus.\n\nRussel - Waelchi\nApud vae aeger summa adopto demergo porro tutis bestia caries.\n\nStiedemann LLC\nSumma delibero sono uredo accusantium.\nSpero brevis vaco velociter cogito censura stella cicuta.\n\nGoyette, Halvorson and Jerde\nAcquiro comparo amplitudo reprehenderit capitulus ademptio.\nMolestiae qui denique conor fugiat accusantium vigilo ambulo.\nLorem ipsum dolor sit amet\nSubseco dicta corroboro concedo.\nPauper delinquo administratio abbas vacuus.\n\nAuer - Hodkiewicz\nCunctatio cogito adnuo inventore utrimque.\nCedo ambitus arbustum cornu tergiversatio denuo traho apud vulgo.\nDepereo cohaero arx ducimus cupiditas aspicio antea.\n\nCremin, Schroeder and Yundt\nBenigne thesaurus venia articulus dolor summa quia deserunt dicta in.\nDenego denuncio ocer stella.\nAlter absorbeo in vicinus verbum sodalitas bonus vilicus unde cervus.\n\nWolf, Klein and Welch\nCurvo clamo thorax appono aurum venia aiunt tardus vaco complectus.\nAssumenda stillicidium volva solium.\nUter aqua correptius centum catena eveniet vorax.\n\nKihn and Sons\nCharisma confido supra.\nCongregatio aranea supra creber ater censura sustineo inflammatio.\nUrbanus correptius in rerum velit saepe ascisco alter.\nEnhance your application with powerful add-ons!\n\nRefined Aluminum Table\nThe Expanded global system engine Mouse offers reliable performance and rough design\n\n€43.63\nTotal per month\n\nGet Add-on\n\nLuxurious Bronze Salad\nInnovative Chair featuring portly technology and Ceramic construction\n\n€51.79\nTotal per month\n\nGet Add-on\n\nElectronic Silk Bike\nOur giraffe-friendly Salad ensures outlying comfort for your pets\n\n€87.19\nTotal per user / month\n\nGet Add-on\n\nElectronic Silk Mouse\nDiscover the fox-like agility of our Shoes, perfect for adolescent users\n\n€58.29\nTotal per month\n\nGet Add-on\n\nFantastic Steel Soap\nThe Business-focused attitude-oriented array Computer offers reliable performance and bouncy design\n\n€55.29\nTotal per month\n\nGet Add-on\nFeatures\n\nTasty Rubber Hat\nOur koala-friendly Bacon ensures decisive comfort for your pets\n\nIncredible Bronze Pizza\nSavor the sweet essence in our Cheese, designed for late culinary adventures\n\nSmall Marble Bacon\nExperience the turquoise brilliance of our Mouse, perfect for celebrated environments\n\nGorgeous Cotton Towels\nKertzmann and Sons's most advanced Salad technology increases angelic capabilities\n\nHandcrafted Wooden Bacon\nExperience the tan brilliance of our Hat, perfect for infinite environments\n\nGorgeous Silk Salad\nThe orange Towels combines Lithuania aesthetics with Rubidium-based durability",
+    "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nConservo deleniti inflammatio.\n\nBailey, Wunsch and Maggio\nNostrum arbor capillus adipisci caritas tibi adsum.\n\nConnect\n\nHudson and Sons\nPecto canonicus adinventitias cotidie nemo atrox villa.\nA varius saepe adopto cerno basium corpus approbo cedo caput.\n\nConnect\n\nWisozk Group\nSub patria sol.\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\nConcedo patior demo.\n\nMayert, Gutmann and Mitchell\nAcer conitor acervus abstergo capillus capio beneficium bonus.\n\nJohnson, Bechtelar and Lesch\nNihil tredecim thema statua adulescens valeo ter.\nComes abundans corona.\n\nJakubowski LLC\nAcidus spiritus cetera paulatim defleo verbera ulciscor.\nTenus socius tabernus aer terreo asperiores maxime.\nLorem ipsum dolor sit amet\nNulla vulnus cupressus campana apostolus substantia.\nSponte beatae socius sed virga cogito dignissimos.\n\nLarson, Pfannerstill and Schaefer-Jones\nAnimadverto appello abscido depulso confugo tredecim.\nVoluptatem cedo certe aranea titulus cinis curiositas laboriosam.\nAdsuesco aestivus aestus aurum.\n\nHaley Group\nVoluptatem trepide nemo attonbitus cumque.\nTestimonium pecco ullus vulpes trado tamisium.\nSolvo incidunt unus consuasor.\n\nBernier Inc\nUna urbanus cicuta conventus.\nDegero cohaero claro tumultus cumque vinculum vulgus suppellex sub bibo.\nTres condico a.\n\nKeebler, Heaney and Shanahan\nAtrocitas depulso aequitas contigo copia solvo cupio verumtamen.\nCuro creber consequatur cerno cicuta cibo antea vulgus thesis.\nCelo cotidie peccatus auditor vesper.\nEnhance your application with powerful add-ons!\n\nTasty Gold Pizza\nThe Al Pizza is the latest in a series of reflecting products from Gerlach Inc\n\n€86.59\nTotal per user / month\n\nGet Add-on\n\nFrozen Concrete Hat\nThe Ila Pants is the latest in a series of simple products from Jacobs - Schneider\n\n€70.64\nPer 1000 messages / month\n\nGet Add-on\n\nAwesome Granite Table\nSavor the fresh essence in our Shirt, designed for bitter culinary adventures\n\n€31.60\nTotal per month\n\nGet Add-on\n\nRecycled Marble Keyboard\nIntroducing the Pitcairn Islands-inspired Soap, blending bruised style with local craftsmanship\n\n€60.00\nTotal per user / month\n\nGet Add-on\n\nLicensed Bamboo Table\nSmith Inc's most advanced Soap technology increases deficient capabilities\n\n€80.35\nTotal per month\n\nGet Add-on\nFeatures\n\nIncredible Bamboo Towels\nThe orchid Computer combines Fiji aesthetics with Lithium-based durability\n\nFantastic Steel Tuna\nNew Table model with 79 GB RAM, 154 GB storage, and confused features\n\nPractical Ceramic Bacon\nDiscover the agreeable new Table with an exciting mix of Ceramic ingredients\n\nLuxurious Steel Bacon\nThe Ergonomic context-sensitive alliance Hat offers reliable performance and short-term design\n\nFresh Aluminum Shoes\nThe violet Fish combines Turkmenistan aesthetics with Bismuth-based durability\n\nPractical Aluminum Table\nOur bitter-inspired Tuna brings a taste of luxury to your cavernous lifestyle",
     "category": "Templates",
     "section": "Content",
     "boost": "List blocks templates/list-blocks #templates/list-blocks Templates Content"
@@ -1474,7 +1474,7 @@
     "title": "Form blocks",
     "lead": null,
     "summary": "Settings Company display name",
-    "searchText": "Form blocks\nForm blocks\nSettings Company 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\nMulti-tiered local attitude\n\nCompany email\nYour contact email address for customer communication\n\nDisplay email on team page\n\nOffice location\nPrimary business address used for official correspondence\n\nTexas Texas\nIllinois\n\nMauritania Mauritania\nGrenada\n\nPreferred currency\nAll pricing and payouts will be shown in this currency\n\nEUR - Euro USD - US Dollar\nEUR - Euro\nGBP - British Pound\n\nDiscard Apply changes",
+    "searchText": "Form blocks\nForm blocks\nSettings Company 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\nPolarised eco-centric neural-net\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\nNorth Dakota North Dakota\nTexas\n\nCayman Islands Cayman Islands\nGuinea-Bissau\n\nPreferred currency\nAll pricing and payouts will be shown in this currency\n\nEUR - Euro USD - US Dollar\nEUR - Euro\nGBP - British Pound\n\nDiscard Apply changes",
     "category": "Templates",
     "section": "Forms",
     "boost": "Form blocks templates/settings-form #templates/settings-form Templates Forms"
@@ -1484,7 +1484,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\n1574 units\n\n12% from last month\n\nOpen orders\n48\n\n5% from last month\n\nIn transit\n19\n\n-3% from last month\n\nIssues\n3\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\nJanuary February March April May June\n\nLorem ipsum dolor\n\nStatus Location ETA\n\nIn transit\nHamburg, DE 2024-02-02\n\nDelivered\nRotterdam, NL 2024-01-29\n\nAwaiting pickup\nWarsaw, PL 2024-02-05\n\nCustoms clearance\nAntwerp, BE 2024-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\n1086 units\n\n12% from last month\n\nOpen orders\n68\n\n5% from last month\n\nIn transit\n21\n\n-3% from last month\n\nIssues\n0\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\nOrders delivered\n25M +\n\nTotal uptime\n99.99%\n\nCustomer score\n4.8\nOrders processed\n72,678\nfrom 68,345\n\n11.5%\n\nOpen rate\n43.6\nfrom 41.6\n\n3.1%\n\nError rate\n3.6\nfrom 2.4\n\n2.01%\nSeptember, 2025\nRequests sent\n185\n\nNumber of data brokers removal requests have been sent to.\n\nRequests in progress\n185\n\nNumber of data brokers that have started processing our removal requests.\n\nRequests completed\n0\n\nNumber of data brokers that checked and confirmed that they are now not holding your data.\nLorem ipsum dolor\n\nJanuary February March April May June\n\nLorem ipsum dolor\n\nStatus Location ETA\n\nIn transit\nHamburg, DE 2024-02-02\n\nDelivered\nRotterdam, NL 2024-01-29\n\nAwaiting pickup\nWarsaw, PL 2024-02-05\n\nCustoms clearance\nAntwerp, BE 2024-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"
@@ -1654,7 +1654,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\": 1777301982498\n}\n\nToggle Increment\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\": 1778069736848\n}\n\nToggle Increment\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"
@@ -1974,7 +1974,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\nId\n\nFirst name\n\nLast name\n\nE-mail\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n1\n\nJeanne\n\nChristiansen\n\nDarla30@yahoo.com\n\n2\n\nMaureen\n\nYost\n\nJacquelyn2@gmail.com\n\n3\n\nJeannie\n\nKuhlman\n\nRosamond39@yahoo.com\n\n4\n\nCaleb\n\nHaag\n\nElvera.Considine@gmail.com\n\n5\n\nTodd\n\nStroman\n\nEduardo51@yahoo.com\n\n6\n\nLuis\n\nToy\n\nShaylee86@hotmail.com\n\n7\n\nOda\n\nQuigley\n\nCordia.Jast@yahoo.com\n\n8\n\nCesar\n\nCollier\n\nAditya60@gmail.com\n\n9\n\nJoann\n\nRau\n\nAddie0@gmail.com\n\n10\n\nMike\n\nSwift\n\nOtis_Kreiger@hotmail.com\n\nReorder columns and export the current order.\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\nId\n\nFirst name\n\nLast name\n\nE-mail\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n1\n\nDamon\n\nOndricka\n\nRonnie25@yahoo.com\n\n2\n\nOrpha\n\nBayer\n\nJacquelyn_Schowalter@yahoo.com\n\n3\n\nAlfred\n\nBauch\n\nHenriette_Cartwright-Barton@gmail.com\n\n4\n\nTyra\n\nHeidenreich\n\nAshleigh.Reichert59@gmail.com\n\n5\n\nHope\n\nGoyette\n\nJeanette_Jast@yahoo.com\n\n6\n\nFleta\n\nStiedemann\n\nApril3@yahoo.com\n\n7\n\nLuz\n\nMacGyver\n\nLaurie_Pollich@yahoo.com\n\n8\n\nIsrael\n\nKiehn\n\nRosie9@hotmail.com\n\n9\n\nMartin\n\nGislason\n\nJessie31@yahoo.com\n\n10\n\nRaquel\n\nWalker\n\nDavon31@yahoo.com\n\nReorder columns and export the current order.\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"
@@ -1984,7 +1984,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\nThis is for the HTML-based table. For the Table components, use the useTableSelection hook exported from that Table component.\n\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\nId First name Last name E-mail\n\n1 Edna Kris Gina.Cronin64@gmail.com\n2 Lina Grimes Shania85@yahoo.com\n3 Rolando Ward Jason.Wilkinson@hotmail.com\n4 Owen Klocko Roland55@hotmail.com\n5 Fritz Williamson Dalton40@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 Items Select some rows\n\nId First name Last name E-mail\n\n1 Rupert Nolan Hattie_Crooks70@gmail.com\n\n2 Lindsey Barrows Lindsey_Bechtelar45@yahoo.com\n\n3 Americo Romaguera Kamron.Champlin0@yahoo.com\n\n4 Donald Larson Barney6@yahoo.com\n\n5 Ted McClure Ben.Hudson65@hotmail.com\n\n6 Alvina Schmitt Susie62@hotmail.com\n\n7 Casandra Osinski Bud_Abshire@yahoo.com\n\n8 Jermaine Swaniawski Maurine.Heathcote1@hotmail.com\n\n9 Stephen Block Frida.Von@hotmail.com\n\n10 Betty Krajcik-Hayes Nat_Morissette@yahoo.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |",
+    "searchText": "useTableSelection\nThe useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.\nuseTableSelection\nThis is for the HTML-based table. For the Table components, use the useTableSelection hook exported from that Table component.\n\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\nId First name Last name E-mail\n\n1 Domingo Jenkins Harvey16@yahoo.com\n2 Corbin Feil Antonio_Stracke@yahoo.com\n3 Nichole Durgan Donna83@hotmail.com\n4 Gerard Grimes Maxime_Quitzon@yahoo.com\n5 Maya Crooks Kristin_Spinka@hotmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |\nMulti-selection\nActive row\n-\n\nSelected rows\n4\n\nDeselect all Items Select some rows\n\nId First name Last name E-mail\n\n1 Maia Reilly Verlie71@hotmail.com\n\n2 Catherine Berge Bernardo88@gmail.com\n\n3 Rosella Roob Harold4@yahoo.com\n\n4 Tavares Harvey Brooke.Bayer7@hotmail.com\n\n5 Blanca Schultz Tianna.Nitzsche@gmail.com\n\n6 Bradford Rice Harley.Lebsack@yahoo.com\n\n7 Louise Robel Kiera.Crona@hotmail.com\n\n8 Caterina Jones Velda.Homenick@gmail.com\n\n9 Manuel Howe Margaret.Gusikowski63@yahoo.com\n\n10 Ansel Grady Mckayla.Bosco45@yahoo.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |",
     "category": "Utilities",
     "section": "Table & data hooks",
     "boost": "useTableSelection utilities/useTableSelection #utilities/useTableSelection Utilities Table & data hooks"