@rio-cloud/uikit-mcp 1.1.12 → 1.1.13

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 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",
+    "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 60GAB57R1N\n\nItem PMRE52LSC6\n\nItem D3LNV7YNHY\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit 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 7UKBCFNMEUI\n\nItem HVFMEJRZID\n\nItem HC3SFRORON\n\nItem 9HPU1RHYWPJ\n\nItem SL97HN0RUY\n\nItem M7F3SW6LB3",
     "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\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. |",
+    "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\n8\n5\n4\n3\n\nAsset Group 7\nVehicle-2390 Asset 1001\nVehicle-3740 Asset 1013\nVehicle-3907 Asset 1010\nVehicle-7410 Asset 1008\nVehicle-8622 Asset 1005\nVehicle-9363 Asset 1012\nVehicle-9666 Asset 1017\n\nUngrouped 13\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\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. |",
+    "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\n5608\n4\n\nGroup - Abel Hermann-Reynolds - 8860 10\n\nGroup - Abel Ullrich DDS - 4254 13\n\nGroup - Abraham Ledner - 1909 14\n\nGroup - Addie Bradtke - 2542 10\n\nGroup - Adelia Bauch - 8332 11\n\nGroup - Adella MacGyver - 2649 9\n\nGroup - Aditya Balistreri - 3949 7\n\nGroup - Adrienne Block - 4827 7\n\nGroup - Adrienne Grady - 2974 13\n\nGroup - Aileen Bartoletti - 3397 15\n\nGroup - Alan Effertz - 3107 14\n\nGroup - Albert Hammes III - 8632 13\n\nGroup - Alejandra Olson - 1334 5\n\nGroup - Alexis Leuschke - 4731 12\n\nGroup - Alf Reichel III - 6730 7\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\n8\n9\n4\n9\n\nMy Empty Group 7\n\nTruck Group East 4\n\nTruck Group North 2\nN18-G804 / M-AN 1003\nN18-G836 / M-AN 1002\n\nTruck Group South 9\n\nTruck Group West 3\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.\n5\n5\n6\n4\n\n10\n4\n3\n2\n1\n\nMixed Vehicles 9\nVehicle-2120 Debug: hydrogen\nVehicle-2687 Debug: hydrogen\nVehicle-3483 Debug: heavy_fuel_oil\nVehicle-4959 Debug: cng\nVehicle-5417 Debug: lpg\nVehicle-6451 Debug: heavy_fuel_oil\nVehicle-6742 Debug: diesel\nVehicle-8297 Debug: heavy_fuel_oil\nVehicle-9989 Debug: electric\n\nUngrouped 11\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 8\n\nGroup 02 7\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 4\n\nFolder 02 6\n\nFolder 03 4\n\nFolder 04 6\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 7\n\nFolder 02 5\n\nFolder 03 5\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. |\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\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. |",
+    "searchText": "CalendarStripe\nA headless component where you provide a function that renders the UI for every day to be displayed.\nCalendarStripe\nFriday\n12 June 2026\n\nSaturday\n13 June 2026\n\nSunday\n14 June 2026\n\nMonday\n15 June 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. |\nJun\n12\n2026\n\nJun\n13\n2026\n\nJun\n14\n2026\n\nJun\n15\n2026\n\nJun\n16\n2026\n\nJun\n17\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‹ 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)",
+    "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‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\n\n12:00\n\nNo time Format: YYYY-MM-DD\n\n‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\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‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\n\n12:00 AM\n\nWith min-width\n\n‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\n\n12:00 AM\n\nClearableInput and optional value\n\n‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\n\n12:00\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\n\n12:00 AM\n\nTo:\n\n‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\n\n12:00 AM\n\nUnspecified locale Format: MM/DD/YYYY\n\n‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\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‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\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.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. |",
+    "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.06.2026 09:00 - 06.06.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 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'. |",
+    "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 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 2026 June 2026 Mo Tu We Th Fr Sa Su\n\n1 2 3 4 5 6 7\n8 9 10 11 12 13 14\n15 16 17 18 19 20 21\n22 23 24 25 26 27 28\n29 30 1 2 3 4 5\n6 7 8 9 10 11 12\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 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 2026 June 2026 Mo Tu We Th Fr Sa Su\n\n1 2 3 4 5 6 7\n8 9 10 11 12 13 14\n15 16 17 18 19 20 21\n22 23 24 25 26 27 28\n29 30 1 2 3 4 5\n6 7 8 9 10 11 12\n\nMedium (default)\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 2026 June 2026 Mo Tu We Th Fr Sa Su\n\n1 2 3 4 5 6 7\n8 9 10 11 12 13 14\n15 16 17 18 19 20 21\n22 23 24 25 26 27 28\n29 30 1 2 3 4 5\n6 7 8 9 10 11 12\n\nLarge\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 2026 June 2026 Mo Tu We Th Fr Sa Su\n\n1 2 3 4 5 6 7\n8 9 10 11 12 13 14\n15 16 17 18 19 20 21\n22 23 24 25 26 27 28\n29 30 1 2 3 4 5\n6 7 8 9 10 11 12\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.06.2026 09:00 - 21.06.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 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 2026 June 2026 Mo Tu We Th Fr Sa Su\n\n1 2 3 4 5 6 7\n8 9 10 11 12 13 14\n15 16 17 18 19 20 21\n22 23 24 25 26 27 28\n29 30 1 2 3 4 5\n6 7 8 9 10 11 12\n\nYou picked: 11/06/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 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. |",
+    "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 Efficitur vitae faucibus. pretium lorem elit. efficitur Vivamus ipsum sit tincidunt. aliquam malesuada\n\n2 Eget volutpat dolor\nLorem\nLorem consectetur dolor rutrum adipiscing eget eget\n\n3 Nunc ipsum posuere sit semper. purus primis faucibus. purus in\n\n4 Vel ac Vivamus ligula in in, ante dui\n\n5 Ac volutpat ante malesuada posuere posuere molestie sem. ac fringilla neque. in vitae\n\n6 Ante ac rutrum ac ut Integer aliquam in in ante elementum faucibus.\n\n7 Ac posuere ipsum ac ac eget vitae ac\n\n8 Orci, Mauris orci condimentum tortor et hendrerit in nunc primis ac scelerisque orci, volutpat Sed\n\n9 Efficitur amet, pretium semper libero scelerisque malesuada\n\n10 Elementum nunc ante Vivamus consectetur ut dolor tincidunt. hendrerit ligula In scelerisque\n\n11 Efficitur Fusce Integer ac ac viverra adipiscing libero in\n\n12 Condimentum ac libero adipiscing massa, est iaculis. hendrerit faucibus. In enim orci ac Mauris semper\n\n13 Tortor elementum sagittis Integer Sed orci felis. vel quis, vel tortor efficitur Fusce\n\n14 Molestie in vitae in condimentum viverra in dolor semper\n\n15 Hendrerit dolor enim semper Sed volutpat ante est est nunc consectetur fringilla eget ut\n\n16 Ac ante semper. massa, massa\n\n17 Et in dolor iaculis. bibendum,\n\n18 Elit. quis, primis consectetur scelerisque enim In pretium vel\n\n19 Adipiscing consectetur orci, sem. elementum efficitur sit ut neque.\n\n20 Ac condimentum In et iaculis. libero purus\n\n21 Velit. ipsum ligula adipiscing iaculis. efficitur bibendum, semper. dolor velit. ut semper. viverra semper.\n\n22 Duis posuere ac elit. pharetra fames massa semper. tincidunt. fringilla Interdum efficitur Vivamus\n\n23 Interdum massa, purus ut tincidunt. ipsum hendrerit in, ac eget\n\n24 Ac Integer in iaculis. efficitur vitae Mauris in Vivamus ut Vivamus velit. ligula orci,\n\n25 Viverra in Sed ipsum Interdum orci nunc Interdum sit ac In vitae semper ipsum In\n\n26 Ipsum fames amet, ac eget bibendum, dui vel semper. adipiscing quis, orci, in elit. elit.\n\n27 Elit. ac condimentum elit. ante ut Fusce condimentum ac Fusce purus ut ac elit. ipsum\n\n28 Ut In quis, elit. ac ut Duis ipsum orci, purus semper. ante primis Fusce\n\n29 Elementum Vivamus ac\nLorem condimentum ut massa, scelerisque dolor sagittis massa, elementum\n\n30 Posuere sem. lorem Integer in Integer ante felis.\n\n31 Ipsum Interdum sit fringilla efficitur in, condimentum Duis dolor fringilla ipsum sem. hendrerit\n\n32 Ligula In orci ipsum in ligula\n\n33 Interdum semper aliquam velit. condimentum eget eget malesuada ipsum pretium malesuada ipsum\n\n34 Integer elit. ut Mauris nunc\nLorem Duis amet,\n\n35 Vel ac dui semper consectetur Interdum sagittis consectetur ut\n\n36 Ut sem. elit. in faucibus. velit. vitae\n\n37 Semper. scelerisque nec enim in volutpat ac ac nec consectetur Vivamus metus elit. dui\n\n38 Et quis,\nLorem massa ac orci semper condimentum adipiscing iaculis. ut posuere Sed condimentum volutpat\n\n39 Neque. aliquam vitae ac In massa et molestie dolor quis, Vivamus quis, pharetra\n\n40 Consectetur tortor primis efficitur neque. faucibus. massa, ut in\n\n41 Sed in ut ut aliquam primis semper. semper. scelerisque ac neque.\n\n42 Rutrum orci et semper vel Interdum et eget tincidunt. In eget ac consectetur libero adipiscing\n\n43 Purus adipiscing ac massa sit\n\n44 Tortor ante Integer primis orci, Fusce velit. Ut Interdum ipsum nec nec dolor\n\n45 Fringilla Duis sagittis massa semper\n\n46 Faucibus. in in ac Mauris ac\n\n47 Felis. dolor viverra Duis ante Integer quis, aliquam rutrum elementum Integer dolor aliquam ante\n\n48 Viverra Mauris ut elit. molestie\n\n49 Elementum condimentum sem. ut ut purus orci sit vel felis. ligula\n\n50 Rutrum amet, iaculis. ante aliquam\n\n51 Semper\nLorem efficitur tincidunt. ac Interdum sem. malesuada lorem eget dui ante\n\n52 Ac pharetra bibendum, bibendum, condimentum\n\n53 Ipsum et efficitur Duis orci, ipsum ligula Sed Integer neque. elementum purus fames nunc\n\n54 Elit. in, consectetur tincidunt. massa efficitur libero volutpat condimentum lorem elementum elit. ut\n\n55 In et In scelerisque Vivamus libero metus Fusce posuere\n\n56 Et ac elementum ante eget tortor primis scelerisque Integer velit. volutpat eget velit. ac\n\n57 Enim dolor neque. ipsum consectetur Interdum ac Interdum libero In in, In\n\n58 Ligula ante malesuada tincidunt. massa\n\n59 Ut volutpat primis sem. vel orci, in scelerisque ac\n\n60 In, ante semper. viverra condimentum enim Mauris Fusce Fusce aliquam eget fringilla fringilla malesuada sem.\n\n61 Fringilla ipsum sem.\nLorem eget in vel\n\n62 Velit. eget Duis ligula Duis metus molestie faucibus. ligula\n\n63 Et tortor vel lorem enim\n\n64 Vitae fames eget volutpat posuere hendrerit est condimentum sagittis\n\n65 Felis. ut lorem in ac ipsum\nLorem fringilla in et orci, sit Ut tortor\n\n66 Quis, et eget viverra eget hendrerit\n\n67 Semper quis, adipiscing ante consectetur finibus est ante vitae condimentum\n\n68 Orci, posuere est in hendrerit pharetra viverra Interdum Fusce fringilla massa, tortor ante ut massa,\n\n69 Quis, dui ac ut in semper. est felis. sem. ac libero\n\n70 Amet, Interdum consectetur fringilla Integer iaculis. hendrerit ipsum in in, ante vel Integer\n\n71 In, Vivamus felis.\nLorem elit. in elit. eget\n\n72 Orci volutpat ac vel rutrum ante ac adipiscing eget aliquam fames semper. et ipsum\n\n73 Velit. faucibus. ac eget velit.\n\n74 Mauris Fusce efficitur tincidunt. Fusce sem. in In Fusce lorem In\n\n75 Sagittis metus elit. elit. sagittis orci, Fusce massa\n\n76 Faucibus. metus nec Sed in nec orci, viverra tincidunt. dui Sed Interdum purus ac\n\n77 Ut eget Integer bibendum, viverra libero\n\n78 Malesuada velit. Interdum posuere efficitur enim massa quis, amet, scelerisque ante est efficitur\n\n79 Orci Ut sagittis ac fames aliquam purus sagittis volutpat\n\n80 Vivamus dui orci et ac Sed Interdum viverra massa et\n\n81 Est aliquam eget et ante aliquam libero primis finibus elit. Ut tortor adipiscing\n\n82 In hendrerit efficitur nunc amet, ante quis,\n\n83 Orci, volutpat bibendum, Mauris Vivamus viverra bibendum, ante pretium orci felis. neque.\n\n84 Vivamus ac viverra orci massa, enim molestie\n\n85 Ante elit. massa, ligula molestie tincidunt.\n\n86 Primis dolor hendrerit finibus Interdum enim elit. in, metus lorem finibus enim\n\n87 Quis, massa in Duis orci, orci, Interdum nunc Mauris ac elit. massa, vitae Ut consectetur\n\n88 Tortor ante tortor in posuere\n\n89 Aliquam Vivamus est tincidunt. faucibus. Duis massa finibus semper elementum ut In\n\n90 Sagittis enim efficitur massa eget est consectetur pharetra est tincidunt.\n\n91 Elit. in tincidunt. in libero hendrerit neque. viverra In ante Ut massa,\n\n92 Neque. semper. Integer Vivamus Mauris\n\n93 Primis tortor et condimentum adipiscing molestie efficitur nec faucibus. scelerisque neque. Fusce\nLorem sagittis\n\n94 Ut elementum sit condimentum primis felis.\n\n95 Sit Vivamus eget eget in ipsum orci,\n\n96 Sed semper. ligula pharetra bibendum, nunc\n\n97 Eget in neque. ante Mauris ac fringilla est semper dui\n\n98 Pharetra in semper. Integer ipsum purus finibus orci tortor rutrum elementum et\n\n99 Bibendum, faucibus. elit. dui Fusce condimentum ligula ante massa, tortor vel nunc velit. dolor sit\n\n100 Consectetur pretium in scelerisque ligula condimentum posuere In Mauris faucibus. rutrum velit. hendrerit fames\n\n101 Molestie Vivamus est fringilla viverra nec libero ac consectetur In et\n\n102 Faucibus. malesuada ac malesuada adipiscing ac sem. massa, ipsum metus semper nec\n\n103 Ac eget dolor scelerisque iaculis. adipiscing elementum efficitur Duis ante ac ac molestie\n\n104 Fusce Duis hendrerit efficitur In Vivamus dui malesuada\n\n105 Fames ante rutrum Fusce sagittis In ante consectetur vel consectetur ligula\n\n106 Pretium orci nunc hendrerit sem. ac\n\n107 Malesuada faucibus. eget massa, massa,\n\n108 Lorem ligula Vivamus lorem ac eget Integer felis. purus ante tortor\n\n109 Purus ac iaculis. Interdum consectetur ut\n\n110 Orci velit. nunc et semper efficitur\n\n111 Nec rutrum eget purus velit.\n\n112 Elementum neque. Ut purus malesuada Ut\n\n113 Pretium ac aliquam molestie ac dolor et massa, hendrerit In\n\n114 Dui purus amet, Mauris elementum ac\n\n115 Consectetur Duis velit. In orci eget ipsum vitae Interdum quis, ipsum efficitur bibendum, tincidunt.\n\n116 Orci sem. nec finibus ac massa, in Vivamus condimentum est iaculis. elit. ligula pretium et\n\n117 Efficitur semper. vitae posuere metus libero in felis.\n\n118 Sagittis neque. Sed et eget ac sit ac\n\n119 Dolor sagittis nec pharetra Ut enim dolor massa\n\n120 Semper. condimentum et faucibus. neque. ipsum bibendum, massa sem. iaculis. vel Mauris\n\n121 Vitae semper in orci libero Integer ante neque. orci viverra efficitur\n\n122 Vel adipiscing iaculis. est enim Interdum Mauris\n\n123 Purus ac malesuada ut et ligula fringilla\n\n124 Molestie massa neque. orci,\nLorem Integer massa et\n\n125 Vitae sagittis semper efficitur lorem iaculis. in ac pharetra iaculis. condimentum eget\n\n126 Efficitur orci in, rutrum ligula eget elit. consectetur fames semper\n\n127 Ligula ac ut posuere sit tortor sagittis vel nunc\n\n128 Efficitur ipsum in dolor dui felis. consectetur dui dui ut vel fames ipsum\n\n129 Ante orci, aliquam enim efficitur semper. condimentum semper. primis et\n\n130 Tincidunt. pharetra pretium elit. amet, neque. lorem primis\n\n131 Et pretium fames in, amet, lorem dui viverra ut dui tincidunt. est\n\n132 Scelerisque fames finibus orci, semper. lorem et in,\n\n133 Et Duis in Fusce ac velit. Mauris posuere\n\n134 Interdum elementum amet,\nLorem In primis quis, semper tincidunt. In ac finibus\n\n135 Elit. in orci, posuere purus ac hendrerit Fusce posuere fringilla efficitur\n\n136 Ante aliquam volutpat ut Fusce purus efficitur est ac\n\n137 Molestie in elit. sem. pretium\n\n138 Tortor ut semper. iaculis. massa, eget tortor dui primis\n\n139 Efficitur et ac in in, dui posuere\n\n140 Amet, orci metus fames efficitur dui ipsum ipsum ipsum metus primis ac Duis\n\n141 Orci, ante condimentum aliquam vel ipsum nec eget Interdum quis, Interdum enim ipsum amet,\n\n142 Condimentum semper ac semper est pharetra condimentum\n\n143 Ante purus elementum lorem bibendum,\n\n144 Ac bibendum, nunc neque. velit. et in vel Vivamus in nec\n\n145 Malesuada ut Fusce In ac faucibus. efficitur eget et semper ut\n\n146 Consectetur massa, consectetur in massa velit. neque. et massa, Duis Mauris orci Fusce tortor\n\n147 Orci Mauris purus quis, ac adipiscing molestie finibus pretium tincidunt. vitae viverra malesuada fames malesuada\n\n148 Pretium vel ipsum in et ipsum faucibus. rutrum Ut Ut efficitur in\n\n149 Nec ac volutpat massa\nLorem ac tortor libero eget primis condimentum malesuada ante ac sagittis\n\n150 Efficitur semper. faucibus. lorem Sed in posuere\n\n151 Duis ac semper. hendrerit enim fames ac libero in,\n\n152 Fames rutrum Sed Sed rutrum elementum scelerisque eget efficitur\n\n153 Condimentum lorem massa, dolor hendrerit vel sagittis tincidunt. nunc orci tincidunt. Fusce sagittis finibus\n\n154 Ante ligula ipsum lorem ut in sem. neque. vel aliquam aliquam adipiscing Vivamus Integer\n\n155 Fusce massa, adipiscing velit. vel sit dui finibus semper in\n\n156 Massa ac sem. Vivamus pharetra purus felis.\n\n157 Dui ipsum bibendum, elit. tortor velit. consectetur ipsum\n\n158 Semper. et semper dui nec ante libero efficitur tincidunt. et orci, ante metus ac ac\n\n159 Orci Sed eget consectetur consectetur libero lorem\n\n160 Vivamus semper Integer adipiscing nec neque. sit\n\n161 Posuere dolor quis, fames felis. Duis\n\n162 In purus In sagittis hendrerit efficitur ante tincidunt. felis. nec elit. ligula ac\n\n163 Ut est molestie finibus ac viverra ligula dolor faucibus. ac est sagittis Fusce finibus\n\n164 Massa fringilla purus pharetra volutpat\n\n165 In, ipsum elementum Fusce elit. Interdum quis, eget\nLorem scelerisque\n\n166 Consectetur Integer malesuada eget in, dolor ante primis elit. dui consectetur pretium ante malesuada sagittis\n\n167 Tortor pharetra et est elementum elit. sagittis rutrum condimentum ipsum sit\n\n168 In, molestie sit hendrerit est eget dui libero semper elit. posuere\n\n169 Neque. purus ante rutrum in ipsum\n\n170 Vivamus lorem ac Duis sem.\n\n171 Duis orci ante ligula ligula malesuada\n\n172 Purus malesuada pharetra fringilla metus ante consectetur quis, ac ipsum\nLorem fames iaculis.\n\n173 Ac massa, scelerisque pharetra faucibus. ut in,\n\n174 Integer dolor est iaculis. eget tincidunt. in semper. Integer ipsum condimentum semper. vitae Vivamus\n\n175 Sed orci efficitur eget neque. ligula in viverra\n\n176 Fames scelerisque Duis ut elit. consectetur ante in ipsum ut enim ante\n\n177 Quis,\nLorem purus malesuada pharetra orci, lorem libero efficitur ac\n\n178 In eget est sem. Sed nunc hendrerit\n\n179 Purus in metus in sit Fusce posuere et\n\n180 Elit. massa orci, quis, posuere condimentum quis, sem. semper. faucibus. metus neque. efficitur\n\n181 Fames in, velit. dolor sagittis\n\n182 Sed in ligula fames bibendum,\n\n183 Purus sit tortor ac tortor libero et fringilla lorem\n\n184 Mauris in neque. elit. vel pharetra ac ante posuere\nLorem volutpat massa sagittis\n\n185 Fringilla neque. ac eget lorem sem. eget ut adipiscing faucibus.\n\n186 Duis ante ante in sit amet, iaculis. consectetur orci finibus tincidunt. et\n\n187 Est sagittis eget nunc Sed ac velit. ac in eget\n\n188 Dolor ac ut sem. ipsum lorem rutrum\n\n189 Ipsum eget posuere scelerisque eget massa,\n\n190\nLorem sagittis scelerisque ante\nLorem tincidunt. amet, consectetur sit\n\n191 Enim eget ante bibendum, sem. ac quis, ligula adipiscing orci, sagittis ac Mauris viverra posuere\n\n192 Eget dolor amet, pretium\nLorem ac pharetra ac purus neque. adipiscing quis, massa\n\n193 In Duis semper Interdum efficitur ac nunc sit Fusce consectetur purus molestie fringilla\n\n194 Ut In faucibus. pretium In nunc ac lorem pretium metus massa, vitae nec\n\n195 Ac ac ut ut in, fames Fusce\n\n196 Sit dolor sem. et sit\n\n197 Sed neque. ipsum molestie orci scelerisque Mauris ac Vivamus in elit. neque. primis\n\n198 In sit et adipiscing et adipiscing consectetur\n\n199 Sem. Mauris est elit. Duis volutpat in fames vitae\n\n200 Purus scelerisque vel purus fringilla tincidunt. tortor ac ut\n\n201 Nec aliquam eget ante posuere orci, lorem hendrerit felis. ipsum elementum\n\n202 Primis semper. in rutrum in rutrum quis, tincidunt. Vivamus ligula vitae efficitur Mauris\n\n203 Elit. ligula hendrerit sem. elementum enim ipsum posuere aliquam Interdum semper. velit. ipsum ligula tincidunt.\n\n204 Enim Mauris orci, adipiscing dolor ut\n\n205 Molestie est Duis ac enim elit. enim molestie in, volutpat elit.\n\n206 Faucibus. tincidunt. Mauris tincidunt. in ut Ut vitae ante Vivamus\n\n207 Ac scelerisque dolor adipiscing nunc ut fames ac orci nec semper. felis. posuere volutpat\nLorem\n\n208 Sed volutpat nunc ligula ac Integer malesuada ante ut tortor\n\n209 Massa, bibendum, lorem purus molestie ac massa posuere posuere dolor in nunc enim tincidunt. massa\n\n210 Aliquam in ipsum vel condimentum neque. vel efficitur primis rutrum elementum in sit Ut semper.\n\n211 Duis ante ac volutpat in adipiscing ante\n\n212 Elementum Ut in Integer ut dui vitae scelerisque ipsum enim posuere tincidunt. vitae consectetur\n\n213 Purus elit. efficitur volutpat primis amet, Fusce et in primis metus viverra elit. tortor\n\n214 Ante Fusce neque. massa, nunc Mauris elit. efficitur amet, vel felis. ut in fringilla Fusce\n\n215 Finibus quis, enim semper. fames faucibus. massa, semper ac Integer ut massa elementum bibendum, viverra\n\n216 Condimentum felis. malesuada bibendum, ut purus\n\n217 Scelerisque sagittis ipsum dolor lorem massa est Sed sit purus sit\n\n218 Consectetur viverra consectetur eget orci, ligula molestie faucibus. Vivamus massa massa, libero aliquam\n\n219 Posuere tincidunt. elit. ante rutrum ipsum bibendum, eget elementum\n\n220 Condimentum eget massa, adipiscing Interdum dui elit.\n\n221 Dui finibus elit. fringilla finibus felis. consectetur Mauris sagittis rutrum in finibus sem. Fusce est\n\n222 Aliquam vitae ac vel amet, massa, Ut in elit. Vivamus dolor\n\n223 Lorem amet, viverra ac in metus felis. Ut malesuada Integer in viverra enim\n\n224 Bibendum, condimentum scelerisque tincidunt. orci\n\n225 Semper Fusce in ipsum Integer semper. ut dui purus hendrerit ac ac massa, faucibus. condimentum\n\n226 In, Interdum faucibus. Mauris quis,\n\n227 Elit. eget pharetra Sed nunc Duis et sagittis amet,\n\n228 Amet, finibus fames vitae elementum tincidunt. condimentum ante condimentum fames Mauris semper massa\n\n229 Integer Ut semper pretium pretium nec ipsum elit. elit. sagittis\n\n230 Aliquam dui ac nec in in, enim\n\n231 Pharetra velit. est sagittis Vivamus scelerisque vitae sem. rutrum\n\n232 Velit. elementum lorem viverra et efficitur rutrum orci\n\n233 Et bibendum, primis nunc iaculis. lorem lorem tincidunt. ac ligula nec et\n\n234 Orci, ac Duis felis. amet,\n\n235 Tortor primis ante\nLorem efficitur vitae est Duis hendrerit in massa\n\n236 Vel ipsum Interdum efficitur amet, sem. dui fringilla massa, orci,\n\n237 Vitae ipsum ipsum condimentum sagittis pharetra elit. in elit. et\n\n238 Orci ipsum semper. sit adipiscing quis, scelerisque ante\n\n239 Mauris dui ante orci semper bibendum, ac ante ligula ac lorem aliquam\n\n240 Ligula pharetra faucibus. Sed Mauris semper elit.\n\n241 Efficitur quis, condimentum dui Duis scelerisque\n\n242 Fames Ut hendrerit tortor eget consectetur ac dolor tortor ante\n\n243 Aliquam finibus ac consectetur ac faucibus. Fusce sit ac finibus\n\n244 Iaculis. iaculis. neque. ac ante In in, fames\n\n245 In pharetra\nLorem faucibus. fames Integer In tortor ac vel sem. tincidunt. ac sem.\n\n246 Consectetur finibus consectetur purus ante dui condimentum fames\n\n247 Amet, pharetra Integer Fusce enim eget Vivamus Sed purus ante ut molestie\n\n248 Consectetur ante sem. consectetur orci ipsum elit. Sed efficitur tortor pretium\n\n249 Ante ipsum eget Integer fringilla Mauris orci ipsum\n\n250 Mauris sem. enim elit. pharetra condimentum efficitur primis orci volutpat\n\n251 Tortor et in consectetur tincidunt. neque. semper purus felis.\n\n252 Ipsum in viverra dolor est molestie Mauris Mauris scelerisque dolor pharetra consectetur amet, ut metus\n\n253 Elit. felis. adipiscing sagittis posuere faucibus. In ac massa, dui sagittis ac elementum\n\n254 Ac ut Interdum felis. adipiscing ante libero adipiscing\nLorem\n\n255 Vitae Integer rutrum orci, finibus viverra Mauris amet, Duis finibus ligula\n\n256 Vel efficitur semper massa, elementum efficitur massa dolor est\n\n257\nLorem tortor in orci, malesuada elementum quis, in, in, elit.\n\n258 Elementum metus et enim In\n\n259 Finibus neque. faucibus. ipsum aliquam eget Integer consectetur volutpat\nLorem\nLorem\n\n260 Ligula sit efficitur Duis pretium ac orci,\n\n261 Ut in orci orci, enim primis massa, ac ac velit. orci in, viverra\n\n262 Libero metus Sed ipsum condimentum orci Integer semper. Vivamus malesuada\n\n263 In pretium scelerisque posuere rutrum Mauris Integer ante Ut faucibus. adipiscing sit aliquam\n\n264 Ut vel ante volutpat elementum ante ipsum ante Integer elit. bibendum, orci dui rutrum\n\n265 Semper. tortor nec fringilla bibendum, in metus\nLorem iaculis.\n\n266 Orci, quis, rutrum neque. ante purus efficitur\n\n267 Vel In sit fringilla scelerisque volutpat iaculis. lorem\n\n268 Elit. nunc ac ac massa, in aliquam pharetra Interdum in ante\n\n269 Volutpat eget volutpat Fusce semper. ante efficitur\n\n270 Libero pharetra consectetur lorem sagittis efficitur in condimentum\n\n271 Ut tortor elit. aliquam in nec Fusce enim iaculis. amet, et amet, in in\n\n272 Malesuada adipiscing viverra elit. consectetur pretium finibus elit. consectetur sagittis\n\n273 Semper. elementum condimentum rutrum faucibus. viverra Fusce fringilla elit. finibus malesuada aliquam\nLorem\n\n274 Nunc ut viverra ante Vivamus\n\n275 Vitae elementum Integer Mauris adipiscing elit. consectetur tincidunt. efficitur neque. dui\n\n276 Massa adipiscing ante elementum amet, ipsum ac\nLorem semper Fusce ipsum et Duis\n\n277 Eget est in ut finibus vitae eget malesuada nec purus aliquam eget metus\n\n278 Felis. lorem efficitur tincidunt. ipsum malesuada ipsum Integer finibus eget felis. aliquam efficitur Mauris\n\n279 Mauris condimentum semper. est Interdum Fusce\n\n280 Vel ante ligula Sed efficitur iaculis. libero ante primis fringilla\n\n281 Fusce semper. viverra finibus efficitur iaculis. in\n\n282 Orci malesuada ligula\nLorem in enim\n\n283 Vel ac Mauris est ut ut in Vivamus ipsum bibendum, Fusce velit. elementum In rutrum\n\n284 Lorem enim vel elit. orci in massa\n\n285 Duis posuere malesuada consectetur ante dui ut ipsum fringilla ac ipsum ut lorem tincidunt. purus\n\n286 Fames sem. massa ac hendrerit enim volutpat orci sem. efficitur velit. ac ipsum\n\n287 Aliquam primis finibus in orci,\n\n288 Vivamus iaculis. et in metus ac volutpat elementum amet, Duis ac fames\n\n289 Pharetra semper elit. In Mauris enim enim volutpat Mauris adipiscing massa, elementum vel molestie posuere\n\n290 Ante molestie rutrum tincidunt. bibendum, felis. ac consectetur consectetur sem. ante pretium nunc posuere\n\n291 Ac primis massa, ipsum ante condimentum ut aliquam vitae semper aliquam libero Ut eget Duis\n\n292 Libero Integer pharetra ut volutpat\n\n293 Dui nec consectetur orci, fringilla et\n\n294 Malesuada lorem in, Vivamus quis, ipsum molestie libero\n\n295 Eget fringilla Sed Integer ante eget velit. in Mauris\n\n296 Vel ut fames pharetra quis, semper tortor eget Vivamus in malesuada semper. semper. purus faucibus.\n\n297 Primis ac ante aliquam ac massa elementum Fusce iaculis. Integer malesuada ut pharetra metus\n\n298 Est massa, metus purus elit. massa rutrum faucibus. felis. ante faucibus. elit.\n\n299 Quis, lorem consectetur tincidunt. quis, lorem dui scelerisque semper. et\n\n300 Ac In enim ipsum ac viverra bibendum,\n\n301 Hendrerit ipsum tincidunt. in amet, Integer ut\n\n302 Enim metus nec libero lorem eget fringilla dui\n\n303 Fusce Ut felis. pharetra volutpat metus viverra ut volutpat aliquam dolor\n\n304 Pretium felis. fames libero scelerisque\n\n305 Vitae elementum sagittis fames nunc massa elit. nunc in ut amet, hendrerit orci enim consectetur\n\n306 Molestie sem. faucibus. velit. Sed Mauris primis iaculis. elementum\n\n307 Fames ac dui massa, molestie ante fames felis.\n\n308 In pharetra ac efficitur malesuada\n\n309 Ut molestie nec faucibus. in, Sed finibus pretium molestie ante quis, elit. et\n\n310 In, finibus tincidunt. ac ligula dui libero in, nunc efficitur ante in, semper. molestie lorem\n\n311 Velit. ipsum dolor felis. scelerisque viverra Sed\n\n312 Et\nLorem volutpat lorem metus amet, ante ac ac pretium eget orci viverra nunc Integer\n\n313 Efficitur felis. adipiscing sagittis dui quis, ipsum metus\n\n314 Est lorem sagittis sagittis ante Interdum velit. velit. efficitur vitae massa\n\n315\nLorem ac malesuada ac ac elit. pharetra nunc ante\n\n316 Pharetra ipsum Fusce lorem eget iaculis. aliquam quis, dui amet, vel eget\n\n317 Enim rutrum In scelerisque ut est fringilla tortor hendrerit elementum elit.\n\n318 Efficitur in sagittis pharetra vitae purus bibendum, rutrum molestie massa\n\n319 Ac volutpat fringilla volutpat orci in ligula Interdum\n\n320 Vitae ac felis. consectetur posuere Duis Sed\n\n321 Ante bibendum, Duis purus elementum libero\n\n322 Rutrum ac amet, faucibus. malesuada molestie ante posuere aliquam enim libero Ut in, rutrum\n\n323 In in et ut metus tortor quis, primis in hendrerit in, ante ipsum\n\n324 Ac ante dolor aliquam ac quis, felis. sit elementum ante in\n\n325 Vel In vitae orci massa, Duis dolor tincidunt. dui enim quis, dui pharetra purus ac\n\n326 Semper ac felis. ipsum dui Duis dolor ante\n\n327 Viverra pretium est Ut purus orci volutpat pretium rutrum posuere Mauris Fusce\n\n328 Scelerisque vel orci est felis. pretium felis.\n\n329 Eget Mauris posuere orci massa, in\n\n330 Libero metus elit. tincidunt. Fusce ac et elit. fames faucibus. in nunc ac aliquam metus\n\n331 Ut Interdum efficitur sem. sem. molestie orci, lorem malesuada sit finibus efficitur nec\n\n332 Ut libero nunc ante elit. Integer consectetur Sed in pretium\nLorem dolor consectetur nunc fames\n\n333 Massa\nLorem et in Integer tortor elit. in, fames\n\n334 Ante ante molestie et Interdum malesuada orci, libero\n\n335 Sit ac fames\nLorem eget ante efficitur ac eget\n\n336 Fusce viverra nunc pharetra tincidunt. consectetur\nLorem et massa, efficitur elementum consectetur purus\n\n337 Purus ac sem. ac dui semper. dolor\n\n338 In primis ante semper. et\n\n339 Sed faucibus. ligula In scelerisque ac consectetur pharetra libero ac viverra in ut vel efficitur\n\n340 Ipsum pharetra elementum velit. rutrum ante pretium iaculis. sagittis ipsum quis, metus et orci,\n\n341 Malesuada sagittis vel ac felis. semper iaculis. neque. volutpat\n\n342 In sit enim tincidunt. scelerisque Fusce ante sit\n\n343 In, tincidunt. elementum vel velit.\n\n344 In finibus pharetra purus orci, ipsum molestie ante iaculis. efficitur\n\n345 Neque. ac Interdum ante ac hendrerit ut pharetra ac amet, felis. ut consectetur sagittis massa\n\n346 Pharetra quis, malesuada Fusce sit eget adipiscing\n\n347 Pretium sagittis vitae dui posuere et aliquam ipsum ut lorem fames et velit. efficitur\n\n348 Est ac sagittis enim ipsum elementum bibendum, fames ligula bibendum, consectetur Fusce\n\n349 Hendrerit in consectetur elit. elementum velit. enim ante tortor semper. nunc libero faucibus.\n\n350\nLorem Duis et enim lorem fringilla ligula\n\n351 Ac est metus quis, lorem posuere in, ac molestie sem.\n\n352 Bibendum, molestie pharetra ut felis. ante rutrum\n\n353 Purus dui orci, Interdum bibendum, sit ante ac amet, Sed Vivamus vel viverra pharetra\n\n354 Viverra amet, Fusce malesuada Vivamus rutrum\n\n355 Volutpat velit. tortor Vivamus in nec elementum\n\n356 In Sed velit. aliquam in tortor ac metus\n\n357 Sem. ante bibendum, in est massa nunc Interdum bibendum, dui aliquam consectetur condimentum enim ac\n\n358 Eget ante fames condimentum efficitur Integer posuere tincidunt. Integer\n\n359 Adipiscing semper massa, elementum lorem\nLorem in, dolor est efficitur enim semper.\n\n360 Amet, Fusce ante\nLorem est\n\n361 Ut est neque. ut ipsum\n\n362 Rutrum nec aliquam in ligula Interdum orci, vel adipiscing malesuada semper. In ipsum in in\n\n363 Sed velit. est ut in, ipsum tortor volutpat Vivamus hendrerit Interdum aliquam dolor tincidunt. ante\n\n364 Sagittis Mauris fames velit. posuere condimentum in volutpat iaculis.\n\n365 Viverra Duis dui felis. ante Vivamus dui in Fusce enim in semper orci,\n\n366 Libero semper. ante lorem Interdum elementum ante elit. ipsum Ut Vivamus elit. ut scelerisque\n\n367 Orci fringilla metus dui elit. nunc sit nec adipiscing malesuada ante volutpat neque. et\n\n368 Ac felis. est velit. vitae est velit. eget sit felis. sagittis bibendum, enim in\n\n369 Malesuada pretium semper sit finibus pharetra\n\n370 In, Interdum sagittis lorem et condimentum elementum Interdum vitae Sed primis metus ac consectetur viverra\n\n371 Hendrerit orci vitae vitae ac velit. fringilla elit. in, metus Duis in,\n\n372 Tincidunt. iaculis. In pharetra enim velit. orci, sem. ante\n\n373 Et massa lorem elit. ipsum Vivamus dolor bibendum, amet, pharetra\n\n374 Est massa, purus ligula enim est ipsum efficitur rutrum elit.\n\n375 Ligula neque. viverra molestie in Sed vel orci lorem\n\n376 Finibus dui neque. vitae molestie\n\n377 Molestie ut in finibus et elementum in, ante ligula pretium rutrum molestie In Interdum viverra\n\n378 Et ut ligula massa, eget ac vitae ante ac\n\n379 Fusce consectetur orci, sem. in iaculis. Fusce\n\n380 Tincidunt. in Duis est semper. ac Duis nunc lorem in ac scelerisque Vivamus ligula condimentum\n\n381 Volutpat orci consectetur aliquam Sed ante neque. dui ante eget\n\n382 Ipsum in, sem. et ante in in viverra elementum ante fringilla scelerisque nec\n\n383\nLorem consectetur tortor faucibus. bibendum, vitae ligula ipsum volutpat nec\n\n384 Fames sagittis scelerisque massa massa Fusce\n\n385 Dui Mauris elit. Fusce sit ac tincidunt. ante\n\n386 Ac ac in in rutrum\n\n387 Ac amet, metus hendrerit iaculis. malesuada amet, massa, sem. et velit. eget vitae amet,\n\n388 Mauris efficitur Integer libero Duis dolor sem. finibus hendrerit elit.\n\n389 Interdum ac eget sem. massa primis nunc nec\n\n390 Condimentum In pharetra hendrerit in lorem metus efficitur Integer\n\n391 Quis, volutpat molestie amet, volutpat enim consectetur felis. sem.\n\n392 Aliquam eget\nLorem tincidunt. consectetur Interdum faucibus. vitae in efficitur ac ac massa fames pretium\n\n393 Orci hendrerit vel fringilla et in massa, ante faucibus. ipsum Mauris sagittis ac\n\n394 Vel efficitur posuere nec ut pretium sem. Sed et\n\n395 Vitae orci condimentum nec eget scelerisque quis, In posuere quis, amet,\n\n396 Et purus ipsum ut condimentum est\n\n397 Elit. Mauris viverra ut in\n\n398 Amet, iaculis. Integer efficitur primis\n\n399 Interdum ac ante massa, ut Sed dui quis, Mauris efficitur\n\n400 Integer et hendrerit hendrerit massa efficitur orci, ac orci ut bibendum, semper. in tincidunt.\n\n401 Et condimentum pharetra nunc metus dui nec libero massa vitae nec\nLorem\n\n402 Hendrerit Vivamus Vivamus in faucibus. dui iaculis.\n\n403 Quis, nec ligula Interdum ligula primis\n\n404 Ligula ac hendrerit in, metus faucibus. et condimentum\n\n405 Ut lorem quis, hendrerit est amet, eget condimentum in ac eget ac eget\n\n406 Tortor bibendum, lorem in, amet, elit. efficitur aliquam\n\n407 Finibus in, volutpat fringilla Ut Vivamus fringilla pretium Integer felis.\n\n408 In, ante condimentum massa amet, massa\n\n409 Et primis sit purus vitae dui\n\n410 Eget sagittis massa primis nec aliquam Duis elit. nec elit. neque.\n\n411 Ante fringilla purus iaculis. ac purus quis, fames ipsum enim\n\n412 Vel Vivamus semper ante elementum orci, ante metus consectetur Ut tincidunt. ac ligula massa\n\n413 Posuere orci, ac in est metus posuere orci primis felis. nunc efficitur velit. adipiscing\n\n414 Efficitur ac ac dolor quis, neque.\n\n415 Fames et posuere tincidunt. purus sit In fringilla\n\n416 Semper fringilla volutpat in vel ipsum hendrerit orci, ac finibus\n\n417 Ac pretium et metus orci tincidunt. fames fringilla consectetur aliquam malesuada libero ipsum In\n\n418 Adipiscing eget malesuada sit bibendum, Interdum\nLorem bibendum, consectetur ipsum efficitur\n\n419 Mauris Integer ut orci tortor lorem ante dui Ut efficitur amet, in\n\n420 Massa, condimentum ante aliquam quis, eget elit. libero ligula lorem\n\n421 Dolor Mauris lorem et sem. quis, malesuada ac massa, iaculis. vel Ut enim est rutrum\n\n422 Adipiscing et ac aliquam condimentum viverra in consectetur\n\n423 Sit orci orci, pharetra pretium elit. faucibus. amet, rutrum hendrerit ut\n\n424 Nec dolor\nLorem ipsum semper.\n\n425 Ut elit. massa, ac massa,\n\n426 Et rutrum tortor metus iaculis. efficitur ac\n\n427 Ac nunc semper. efficitur fames felis. adipiscing posuere sit Interdum Ut Ut rutrum elit.\n\n428 Sed in, adipiscing lorem\nLorem ante scelerisque ante malesuada consectetur in ac Ut malesuada dolor\n\n429 Consectetur et elementum lorem orci, ante volutpat quis, In ligula ac pretium metus et quis,\n\n430 Libero pharetra dui vitae semper. ut in in dolor lorem\n\n431 Iaculis. rutrum finibus semper eget vel elit. volutpat ut fames hendrerit viverra ac ante Mauris\n\n432 Dui adipiscing Duis Sed viverra\n\n433 Libero condimentum sagittis in semper\n\n434 Aliquam primis faucibus. Sed efficitur condimentum sit ligula metus\n\n435 Enim amet, Mauris vitae vel semper. adipiscing Ut ante iaculis. semper. Mauris Interdum\n\n436 Ac In efficitur dui ante est viverra finibus viverra et Vivamus orci pharetra\n\n437 Felis. semper. ac Sed Integer dui\nLorem libero vel\n\n438 Dolor Interdum lorem dui efficitur malesuada dolor ac vel Mauris nunc viverra\n\n439 Finibus ligula fringilla tortor iaculis. primis dolor vitae rutrum posuere in et elit.\n\n440 Iaculis. pharetra ante nunc in finibus massa, felis. libero sit velit.\n\n441 Consectetur nunc enim in, aliquam metus consectetur fringilla ipsum fringilla pretium sem.\nLorem\n\n442 Nec ac bibendum, enim tortor semper. primis eget\n\n443 Consectetur In Interdum in ut semper. adipiscing elit. rutrum ac pretium Fusce\n\n444 Ante ut efficitur finibus felis. orci, elit.\n\n445 Ac pharetra et lorem velit. ac vitae purus\n\n446 Fames vel sagittis posuere condimentum Mauris\n\n447 Ante efficitur\nLorem libero in pretium elit.\n\n448 Nec tincidunt. Integer ac volutpat in metus ac\n\n449 In,\nLorem nec malesuada efficitur\n\n450 Orci, ipsum lorem ut libero condimentum condimentum elementum Integer Integer sit quis, finibus semper. orci\n\n451 Scelerisque amet, dolor volutpat hendrerit massa rutrum nunc\n\n452 Ac fringilla hendrerit\nLorem efficitur neque. molestie ligula ante amet, Integer Mauris enim Sed ut\n\n453 Tincidunt. ac et iaculis. condimentum in Fusce bibendum, ac semper. orci scelerisque volutpat\n\n454 Ante ipsum aliquam et viverra In libero primis\n\n455 Vitae est vel elit. faucibus.\n\n456 Sit vel bibendum, in ante amet,\n\n457 Nunc ligula ut ut massa in libero massa, ipsum purus eget fames sit et\n\n458 Eget vitae bibendum, sagittis amet, et nunc elit. libero in nec\n\n459 Tortor ante massa Interdum elit. ac sem. in pharetra vel efficitur\n\n460 Et sit ipsum vel vel velit. tincidunt. condimentum ligula\n\n461 Ante ipsum ante elit. et ante enim nec iaculis. posuere in, metus malesuada\n\n462 Ligula Interdum efficitur consectetur velit. dolor Integer in ligula\n\n463 Lorem nec quis, consectetur ac elit. libero amet, fames et\n\n464 Sed aliquam vel iaculis. In ante scelerisque orci ut condimentum semper Vivamus lorem\n\n465 Ut Integer neque. Vivamus sagittis pharetra in dolor elit.\n\n466 Aliquam felis. pharetra aliquam Duis aliquam Fusce scelerisque iaculis. dolor faucibus. quis, semper\n\n467 Massa ipsum ac nec et massa Ut\n\n468 Bibendum, neque. Integer posuere tincidunt. lorem nunc\n\n469 Sit eget faucibus. ac hendrerit ac Mauris enim rutrum\n\n470 Felis. dui faucibus. scelerisque adipiscing Sed bibendum, aliquam vitae In\n\n471 Ligula orci, Interdum efficitur quis, lorem in est pretium\n\n472 Nec primis sem. ac ut Mauris ut elementum condimentum rutrum sem. ac Ut\n\n473 Orci ante bibendum, ac ante ante in ante pretium In pretium ante tortor vitae ante\n\n474 Ante Vivamus faucibus. libero ligula Integer et\n\n475 Consectetur in neque. massa purus malesuada\n\n476 Adipiscing In sagittis lorem metus ut fringilla molestie lorem massa tortor massa metus Fusce\n\n477 Scelerisque pharetra lorem semper. ac bibendum, eget neque.\nLorem lorem dolor elementum elit. efficitur\n\n478 Dolor in tincidunt. efficitur nec primis\n\n479 Libero elit. libero sit sit orci, condimentum molestie in, amet, Interdum ante\n\n480 Duis tortor metus ipsum orci, bibendum, ut velit.\n\n481 Et velit. malesuada in, iaculis. massa, condimentum hendrerit hendrerit ipsum ut bibendum, orci Ut\n\n482 Efficitur orci Vivamus adipiscing Sed purus\n\n483 Efficitur ac amet, hendrerit et elit.\nLorem ligula in\n\n484 Ac faucibus. pharetra ante consectetur in, velit. in Integer\n\n485 Enim volutpat libero fringilla in in velit. Interdum bibendum, elit. bibendum, iaculis.\n\n486 Orci, libero lorem fames nec elit. Sed ut\n\n487 Dolor condimentum finibus pharetra ut eget nunc enim metus quis, pharetra\n\n488 In, in, quis, ante pretium sit\n\n489 Primis neque. scelerisque nec ante orci tincidunt. rutrum\n\n490 Scelerisque dui elit. Sed in iaculis. libero\n\n491 Ut in consectetur ipsum amet, ante est ac nunc eget Interdum sem.\n\n492 Bibendum, malesuada felis. libero sem. orci viverra ut vitae\n\n493 Efficitur ipsum pretium adipiscing Mauris\n\n494 Molestie sagittis in, consectetur ipsum semper.\n\n495 Consectetur ligula in, rutrum massa Mauris massa,\n\n496 Sem. est efficitur ante dolor rutrum Mauris adipiscing\n\n497 Primis est malesuada ac adipiscing Duis ipsum\n\n498 Duis consectetur ac fringilla ligula Integer ac posuere In vitae ante ligula orci semper elit.\n\n499 Neque. molestie ante elementum felis. massa, quis, Vivamus ipsum\n\n500 Mauris efficitur purus Integer aliquam in pretium est nunc elit. neque. massa, in consectetur ac\n\n501 Mauris semper lorem velit. lorem et massa, ipsum felis. et In ac rutrum Duis est\n\n502 Volutpat Fusce ac et ac elit.\n\n503 Aliquam condimentum primis efficitur faucibus. efficitur\n\n504 Sagittis vitae malesuada vitae in ante dolor\n\n505\nLorem orci, massa ac elit. efficitur\n\n506 Elit. sem. faucibus. primis pharetra hendrerit ipsum\n\n507 Sem. Integer ante aliquam ipsum Ut sit scelerisque lorem efficitur sagittis Ut vel est sit\n\n508 Integer elementum fames eget Sed massa, efficitur ac\n\n509 Duis Integer ante felis. est ante amet, Sed faucibus. Vivamus bibendum,\n\n510 Primis orci, bibendum, volutpat consectetur et\n\n511 In ipsum ante pretium tortor tortor elit. adipiscing in\n\n512 Massa scelerisque Interdum Integer ac orci vel Duis fringilla nec orci neque. ut purus sit\n\n513 Ac efficitur neque. metus ac iaculis. ac ut aliquam in\n\n514 Molestie pretium ac nec condimentum metus vitae metus bibendum,\n\n515 Ut nunc elit. amet, bibendum, eget molestie vitae In\n\n516 Velit. enim rutrum elementum ut aliquam aliquam aliquam tincidunt. in\n\n517 Eget neque. felis. adipiscing massa ipsum condimentum ac est fringilla orci volutpat massa\n\n518 Adipiscing elementum velit. malesuada lorem nunc in Vivamus eget felis. Ut ante elit. In rutrum\n\n519 Nunc ac In malesuada In pretium lorem\n\n520 Vivamus ante dui volutpat felis. ac Ut efficitur massa massa, aliquam consectetur\n\n521 Condimentum bibendum, efficitur Vivamus in semper.\n\n522 Sed ac finibus elit. ipsum In elit. orci, metus\n\n523 Viverra dui elementum nunc ipsum\nLorem tincidunt. ac\n\n524 Enim tincidunt. Mauris ante Mauris dolor\n\n525 Volutpat posuere scelerisque dui bibendum,\n\n526 Vel aliquam rutrum vitae quis, velit. ac felis. In pretium primis amet,\n\n527 Ante ipsum primis sagittis vel\n\n528 Tincidunt. in fringilla eget ut bibendum,\nLorem ipsum Ut semper in,\n\n529 Malesuada elementum finibus et velit.\n\n530 Volutpat quis, dolor nec sit eget Integer Vivamus primis aliquam semper vitae in, dolor\n\n531 Fames ut ante in condimentum finibus efficitur pharetra\n\n532 Et nunc semper. eget iaculis. et faucibus. primis Interdum\n\n533 Orci Ut enim scelerisque molestie pretium amet, neque.\n\n534 Tortor elit. finibus efficitur fringilla ligula\nLorem semper dolor condimentum Sed quis,\n\n535 Tincidunt. elementum Vivamus Integer posuere et\n\n536 Eget semper. lorem ante efficitur Sed malesuada consectetur eget ac tortor elit. est elit. sit\n\n537 Condimentum condimentum dui iaculis. aliquam enim vel metus libero Duis libero\n\n538 Semper. dolor tortor Sed vel quis, ut hendrerit ligula\n\n539 Scelerisque dui Integer viverra efficitur posuere rutrum Vivamus orci, adipiscing iaculis. hendrerit\n\n540 Velit. bibendum, pretium scelerisque Mauris\n\n541 In iaculis. elit. hendrerit iaculis. Interdum eget Vivamus molestie ut purus bibendum,\n\n542 Nec\nLorem Vivamus consectetur malesuada nec dolor sem. felis. aliquam Interdum condimentum massa,\n\n543 Posuere Duis ac est Mauris ante rutrum elit. pretium fames tortor volutpat lorem\n\n544 Elementum in tincidunt. elit. faucibus. neque. ante ante elementum libero\n\n545 Ligula velit. ligula massa, metus aliquam Sed molestie Sed dui faucibus.\n\n546 Tortor consectetur metus pharetra Duis amet, ac Duis bibendum,\n\n547 Nunc volutpat primis aliquam faucibus. scelerisque tincidunt. Vivamus Mauris\n\n548 Finibus Mauris Vivamus ante in In ante enim dolor elit.\n\n549 Sit ante quis, eget neque. faucibus. rutrum Mauris viverra dui pharetra in bibendum,\n\n550 Tortor ac viverra et ac ac in Fusce in enim viverra ipsum sem. viverra\n\n551 Ipsum et scelerisque nunc scelerisque vitae ligula Sed eget ante ante libero Mauris\n\n552 Purus dolor efficitur sit aliquam Integer sem. et ac nec\n\n553 Primis consectetur enim sagittis elementum ac ipsum ac quis, metus enim ac dolor est ipsum\n\n554 Ut primis consectetur sem. semper ut consectetur ac\n\n555 Sagittis in, ut primis Duis Vivamus scelerisque est ipsum viverra massa, lorem bibendum, Integer purus\n\n556 Integer amet, iaculis. eget neque. in, in, faucibus. velit. ut tortor tincidunt. volutpat\n\n557 Integer elit. ante ut ac est sagittis massa orci dui tortor\n\n558 Volutpat consectetur nunc in quis, Ut orci, faucibus. ut ac In ac\n\n559 Libero Vivamus viverra condimentum adipiscing molestie ante tortor molestie\n\n560 Primis dui lorem in efficitur ac purus ut consectetur et Ut eget\n\n561 Iaculis. dui Integer vel nunc ac ac\nLorem bibendum, libero semper. rutrum est sagittis Vivamus\n\n562 Faucibus. ac ante in tincidunt. faucibus. Ut\nLorem rutrum hendrerit\n\n563 Enim massa, felis. et fames Vivamus tortor ac vel elit. ante vel ipsum\n\n564 Adipiscing ut iaculis. Mauris ac felis. molestie iaculis. elementum ac ac et Vivamus ligula\n\n565 Elit. ante ac purus lorem libero Mauris dolor orci, finibus in eget in,\n\n566 Massa In ac ante ac orci, rutrum scelerisque purus nunc adipiscing\n\n567 Enim Sed volutpat ante tortor ac consectetur Mauris dolor sem. nunc amet, elit. Ut\n\n568 Faucibus. elit. condimentum sagittis viverra tortor Vivamus in, ligula volutpat elementum scelerisque est\n\n569 Vitae pharetra primis nunc malesuada ipsum ante aliquam tincidunt. in felis. adipiscing consectetur efficitur\n\n570 Viverra velit. finibus massa, ac ipsum sit neque. Duis in in amet, in ut semper\n\n571 Ligula ante velit. consectetur libero condimentum lorem Ut sem. volutpat\n\n572\nLorem malesuada ut quis, iaculis. ante pretium Mauris ante iaculis. scelerisque Interdum metus Sed\n\n573 Pharetra pretium ac libero Duis et in consectetur\n\n574 Volutpat velit. finibus sem. tortor efficitur sit ut\n\n575 Ut elementum in elit. Fusce primis primis massa massa neque. amet, volutpat dolor orci\n\n576 Scelerisque ligula Interdum consectetur\nLorem neque. Mauris condimentum massa ac tincidunt. fames\n\n577 Ante aliquam\nLorem aliquam felis. consectetur In amet, nunc ac sit libero\n\n578 Ac ac Sed vitae sem. velit.\n\n579 Et Sed efficitur\nLorem hendrerit Mauris viverra efficitur primis\n\n580 Orci, elit. fringilla efficitur ac\n\n581 Sem. consectetur molestie sem. consectetur viverra massa\n\n582 Amet, fringilla fames lorem ante ac ipsum fringilla orci hendrerit eget molestie ut molestie ac\n\n583 Primis massa ante dolor nec posuere finibus\n\n584 Interdum ut consectetur amet, felis. sit\n\n585 Massa sem. massa, ligula rutrum in tincidunt. Ut ipsum libero\n\n586 Semper efficitur quis, semper sem. elit. Fusce scelerisque\n\n587 Lorem nunc\nLorem sem. enim velit. fringilla amet, volutpat malesuada Ut\n\n588 Integer felis. malesuada felis.\nLorem elit.\nLorem\n\n589 Scelerisque malesuada elementum ligula pharetra pretium enim In quis, amet, efficitur pharetra metus sem.\n\n590 Orci tincidunt. sit elit. scelerisque Mauris primis Duis semper\n\n591 Vivamus felis. ac ante et\n\n592 Nec eget eget ac primis faucibus. sit consectetur Ut\n\n593 Consectetur ac nec sit posuere elementum ipsum in ipsum iaculis. ac efficitur velit. ac\n\n594 Elit. neque. Integer in tortor primis vel ut semper.\n\n595 Mauris in, Interdum semper ac vitae felis. neque. bibendum, ut finibus elementum ante pretium\n\n596 Elit. metus in eget dolor eget rutrum Sed metus semper. semper semper\n\n597 Efficitur pharetra velit. Interdum in tincidunt. iaculis.\n\n598 Elit. tortor neque. massa, consectetur adipiscing Fusce dolor ac ante metus posuere dolor ipsum\n\n599 Sit Integer consectetur tincidunt. quis, ante ligula elit. scelerisque sagittis est ante viverra in molestie\n\n600 Elementum eget malesuada ac In Mauris\nLorem\nLorem ac orci, et quis,\n\n601 Dui ac velit. ac enim semper. Sed condimentum\n\n602 Libero primis ut Sed ipsum Mauris nec scelerisque est Vivamus vitae semper Ut\nLorem\n\n603 Ac ut ipsum finibus aliquam vel Mauris tincidunt. nec fringilla metus elementum eget\n\n604 Ut tincidunt. nec Duis ante rutrum Mauris enim ac vitae\n\n605 Ante dui ac ante in finibus massa ac\n\n606 Vel velit. ac scelerisque velit. hendrerit elementum nec Duis efficitur\n\n607 Efficitur tincidunt. Mauris amet, semper.\n\n608 Dui et velit. lorem dui quis, in ac rutrum adipiscing consectetur\n\n609 Interdum hendrerit Interdum libero orci finibus quis, ligula primis eget\n\n610 Ipsum nunc quis, Interdum in et amet, velit. scelerisque orci\n\n611 Ut nec ligula massa aliquam pharetra elementum iaculis. orci, ligula posuere sit\n\n612 Ac consectetur nec ante semper neque. semper vitae posuere Sed ac fames ipsum sagittis\n\n613 Pharetra ligula ut vel Vivamus bibendum, scelerisque Sed finibus Mauris ac malesuada ante\n\n614 Ac dolor pharetra orci, rutrum elementum eget nec\n\n615 Interdum vitae ac enim Fusce primis velit. hendrerit libero iaculis. ut\nLorem amet,\n\n616 Elit. viverra amet, velit. molestie elementum purus pharetra eget ac volutpat orci,\n\n617 Libero ante fames semper orci, In Duis elit. elementum\n\n618 Sed elit. aliquam massa neque. ut velit. consectetur est ante Interdum molestie eget\n\n619 Amet, enim bibendum, dui viverra neque. et Fusce viverra rutrum ac ut sem. dui\n\n620 Dolor rutrum velit. et faucibus. amet, in\n\n621 Efficitur libero vel massa, est fames ligula elementum fringilla Sed molestie quis, enim Interdum pharetra\n\n622 Dolor ut condimentum elit. orci, molestie elit. orci, elit. metus pretium in orci, Sed\n\n623 Amet, dui Interdum ante molestie ipsum bibendum, pretium\n\n624 Et fames semper. dui consectetur\n\n625 Fringilla ipsum sit viverra hendrerit dui primis in, viverra ante tortor\n\n626 Faucibus. neque. orci iaculis. vitae Duis elementum\n\n627 Duis finibus Interdum ac scelerisque Fusce ante ac\n\n628 Sagittis et scelerisque elementum volutpat ante in massa primis sem. tincidunt.\n\n629 In lorem finibus dolor\nLorem in ligula semper. adipiscing ut ac Vivamus Mauris consectetur aliquam\n\n630 In in, eget Fusce eget ipsum massa, est neque. velit. dolor massa,\n\n631 Elit. metus est tortor ac aliquam\nLorem malesuada Sed eget\n\n632 Ipsum semper vitae condimentum rutrum libero viverra tincidunt. hendrerit faucibus. viverra posuere\n\n633 Nec ipsum adipiscing nec vel faucibus. eget Duis massa, rutrum ante sit primis\n\n634 Quis, eget efficitur tortor Fusce eget bibendum, sem. est amet,\n\n635 Consectetur efficitur consectetur ut massa, pharetra Interdum dui orci Duis eget\n\n636 Bibendum, aliquam Vivamus semper. tincidunt. volutpat Ut ac ligula malesuada primis velit.\n\n637 In eget fames quis, dolor in, ipsum\n\n638 Ut fames purus enim Ut tortor et ac\n\n639 Nec in, consectetur ac tortor semper.\n\n640 Felis.\nLorem est ac ac sit efficitur adipiscing pharetra bibendum, nec tortor ac\n\n641 Ut Sed velit. tincidunt. et Ut scelerisque\n\n642 Viverra Mauris efficitur semper. felis.\n\n643 Consectetur elit. est eget et ac hendrerit\nLorem est semper. semper. hendrerit massa libero\n\n644 Ligula ante elit. malesuada fames efficitur ac est volutpat massa, malesuada Mauris consectetur enim adipiscing\n\n645 Ligula fames ac massa, primis adipiscing Ut vel velit. posuere\n\n646 Hendrerit massa dolor ut ligula pretium ante sit Duis et\n\n647 Duis Interdum enim pretium ante Fusce quis, aliquam Fusce bibendum, ut efficitur\n\n648 Enim ac adipiscing nec sit pretium orci, lorem quis, in\nLorem purus\n\n649 Velit. dolor Sed finibus quis, viverra volutpat ipsum\n\n650 Duis orci, in eget Interdum ante in ac ac in bibendum, primis volutpat\n\n651 Enim orci, tincidunt. ac Integer ut faucibus. semper. Mauris nec in,\n\n652 Sem. massa, primis malesuada hendrerit ipsum\n\n653 Efficitur vitae viverra bibendum, pretium\n\n654 Metus ac adipiscing consectetur hendrerit\n\n655 Duis orci adipiscing purus neque. Ut Mauris primis ante finibus ante hendrerit consectetur\n\n656 Ut faucibus. Sed felis. aliquam purus ac ac Duis\n\n657 Orci ut\nLorem finibus in, in elit. felis. semper. felis.\n\n658 Aliquam massa in amet,\nLorem Fusce consectetur adipiscing amet, Sed adipiscing\n\n659 Eget scelerisque in Fusce elit. velit. enim ut\n\n660 Rutrum tortor primis Interdum Vivamus sem. efficitur sem. metus massa elit. Sed ipsum\n\n661 Aliquam elementum Ut pretium Fusce in sagittis quis, et\n\n662 Nunc condimentum Vivamus Sed malesuada ipsum consectetur finibus\n\n663 Semper. adipiscing vel Integer faucibus. ac ac massa, elit. orci velit. molestie Sed Fusce sagittis\n\n664 Fames Fusce Duis Integer posuere bibendum, scelerisque Fusce tortor Sed In Interdum sit orci\n\n665 Est molestie vitae sem. lorem Sed semper. Duis viverra tincidunt. ac Fusce adipiscing ipsum enim\n\n666 Nunc enim bibendum, consectetur velit. Integer ligula Sed ut fames\n\n667 In ante massa, semper enim lorem iaculis. primis ac scelerisque ac elementum neque. vel\n\n668 Massa ante sem. Duis tortor ut orci, orci\n\n669 Elit. purus in efficitur finibus in Duis ante nunc eget molestie ante\n\n670 Elit. ante posuere hendrerit eget massa, purus adipiscing et\n\n671 Mauris orci, ligula In Ut ante adipiscing libero ligula velit. eget neque. neque. massa\n\n672 Et purus Fusce fringilla primis in Sed rutrum semper Ut viverra vel\n\n673 Pretium libero nunc consectetur faucibus.\n\n674 Ante semper iaculis. In ante eget\n\n675 Condimentum volutpat massa, consectetur elit. Vivamus amet, tortor enim semper. aliquam dui dui\n\n676 Ac primis et purus consectetur pharetra sagittis Ut sem. hendrerit rutrum in semper. orci ac\n\n677 Primis ac quis, lorem velit. nunc\n\n678 Ligula posuere viverra felis. velit. ac elementum fames vitae in finibus\n\n679 Semper consectetur sagittis ut Integer velit. in vitae et metus pretium\nLorem libero Duis\n\n680 Et viverra volutpat bibendum, semper. Duis vel velit. consectetur\n\n681 Ligula ac elementum consectetur efficitur sit adipiscing Fusce enim elementum dui aliquam fames Ut\n\n682 Sed fringilla eget pharetra consectetur velit.\n\n683 Pharetra\nLorem ac eget ut\nLorem nec dolor et felis. nunc in volutpat\n\n684 Ac massa, in, amet, dui posuere vitae tincidunt.\n\n685 Fringilla condimentum adipiscing metus vitae pharetra in consectetur ante finibus tortor metus finibus ac libero\n\n686 Integer ante malesuada scelerisque malesuada bibendum, semper. eget orci, ante\n\n687 Lorem semper In tincidunt. vel elementum libero ac ut volutpat semper. faucibus. et\n\n688 Vivamus malesuada tortor hendrerit Sed orci\n\n689 Vivamus molestie dolor hendrerit sagittis Duis\n\n690 Ac Ut consectetur primis neque. sagittis consectetur pretium ante amet, elit.\n\n691 Hendrerit ante eget eget In ante ut elit. et Mauris aliquam Sed consectetur ante sem.\n\n692 Condimentum massa semper massa fames ac aliquam faucibus.\n\n693 Elementum ante ipsum malesuada iaculis. vel\n\n694 Et et Vivamus molestie ante consectetur nunc nec in, consectetur Sed elit.\n\n695 Ante ligula efficitur malesuada tincidunt. felis. purus volutpat pretium libero nunc volutpat\n\n696 Felis. orci, lorem Duis tortor sem. fringilla in tincidunt.\n\n697 Ante lorem sit sem. ipsum in massa,\n\n698 Faucibus. efficitur nec sem. ante consectetur pharetra\n\n699 Elementum ac in, ipsum ut et elementum\n\n700 Fusce Sed semper. rutrum elit. viverra rutrum ut metus ante velit.\n\n701 Integer ac adipiscing dui lorem ante Mauris fringilla semper semper in ligula\n\n702 Consectetur efficitur posuere rutrum ante volutpat In condimentum iaculis. elit. sagittis ante in\n\n703 Ut adipiscing libero Sed semper ac vel massa metus eget massa Mauris hendrerit bibendum,\n\n704 Sem. scelerisque fames quis, est ante elit. ut in purus dolor In fames et est\n\n705 Semper Vivamus libero libero eget sagittis Integer et\n\n706 Fusce sit molestie enim ante eget elit. eget aliquam tortor Duis molestie\n\n707 Aliquam purus vitae quis, ipsum posuere In elit. ac nec\n\n708 In ante pretium ante ac lorem ipsum efficitur sem. amet, enim molestie in,\n\n709 Ut massa ligula sem. bibendum, sagittis in ac adipiscing ut nunc massa, massa, ut\n\n710 In ante pharetra felis. fringilla\nLorem malesuada efficitur In\n\n711 Ut ipsum ipsum ac ac amet, eget tortor viverra\n\n712 Duis consectetur consectetur scelerisque amet, elementum adipiscing ante hendrerit ut In dolor amet, felis.\n\n713 Interdum amet, Fusce ipsum ipsum posuere velit. ut massa ante ligula tortor consectetur est felis.\n\n714 Enim in, in condimentum efficitur\n\n715 Lorem faucibus. hendrerit Sed Vivamus pretium condimentum ut Interdum sit ante ante volutpat quis,\n\n716 Pharetra condimentum felis. Interdum eget bibendum, consectetur quis, massa felis. et\n\n717 Scelerisque Sed dui sagittis in, enim eget ligula elit.\n\n718 Mauris Sed volutpat Vivamus et eget Fusce ac sagittis In libero pretium\n\n719 Fusce dui Vivamus tortor purus ac Duis orci,\n\n720 Adipiscing ante ante scelerisque in ipsum In ac ac In lorem finibus ligula orci,\n\n721 Massa sagittis tincidunt. molestie iaculis. ut enim scelerisque Integer ac\nLorem ac dui neque.\n\n722 Est pharetra eget volutpat amet, quis, scelerisque lorem Vivamus et condimentum semper posuere condimentum ut\n\n723 In Duis Integer ac adipiscing ut hendrerit\n\n724 Dolor elementum orci ut ac aliquam hendrerit libero et ac in\n\n725 Posuere felis. dolor vitae sit malesuada Interdum Duis\n\n726 Scelerisque sagittis sit tortor consectetur vel volutpat est est sem.\n\n727 Ac viverra sem. sagittis dolor volutpat massa ipsum adipiscing ipsum finibus Sed malesuada primis neque.\n\n728 Ac tincidunt. rutrum dolor Mauris adipiscing in volutpat condimentum scelerisque neque. lorem Vivamus condimentum\n\n729 Enim finibus lorem condimentum posuere tortor semper. lorem tincidunt. Vivamus Fusce enim\n\n730 Condimentum elit. ipsum tortor finibus Ut rutrum purus libero molestie\n\n731 Eget ipsum felis. Mauris orci, et ante dui Integer nunc aliquam rutrum\n\n732 Et Ut Ut Interdum in massa, posuere molestie et elementum adipiscing ut bibendum, amet,\n\n733 Consectetur fames ut fames consectetur\nLorem\n\n734 Iaculis. ac tincidunt. est libero sem. velit. in\n\n735 Massa, ante faucibus. Ut in sagittis condimentum\n\n736 In, tincidunt. malesuada ante vitae felis. quis, elit. ligula iaculis. consectetur Interdum in primis Vivamus\n\n737 Mauris ac iaculis. in aliquam neque. scelerisque molestie purus orci, Sed adipiscing\n\n738 Sem. adipiscing semper amet, Ut sem. Mauris elementum In volutpat dolor massa, et sem.\n\n739 Consectetur efficitur eget scelerisque dui dui\n\n740 Scelerisque Duis dolor tortor et fringilla primis tortor neque. bibendum,\n\n741 Consectetur enim scelerisque Integer Ut\n\n742 Semper ante efficitur ante ligula quis, Vivamus viverra consectetur\n\n743 Ipsum dolor hendrerit\nLorem scelerisque fames massa, Sed faucibus.\n\n744 In, amet, eget Fusce in in purus iaculis. semper in Sed\n\n745 Sagittis volutpat primis ante neque. ac ante nec consectetur\n\n746 Semper. finibus fringilla finibus hendrerit ac malesuada Sed\n\n747 Sit in amet, sagittis elit. malesuada dui tincidunt. felis. purus\n\n748 Efficitur in iaculis. dui in, in ac Fusce ac\n\n749 Eget\nLorem elit. semper vitae\n\n750 Ac volutpat hendrerit adipiscing sem. semper Fusce adipiscing in, ante\n\n751 Consectetur sit in in consectetur massa, Duis massa ut Mauris semper ante fames\n\n752 Fringilla Mauris massa, orci, finibus nec pharetra\n\n753 Primis\nLorem ac in vitae consectetur nec ante\n\n754 Mauris metus scelerisque iaculis. ac libero dolor finibus\n\n755 Sed fringilla adipiscing In pretium\n\n756 Ut dolor ac aliquam elit. neque. fringilla\n\n757 In eget elementum orci, bibendum, semper Duis\n\n758 Interdum eget sagittis Interdum malesuada ligula in, Sed finibus Vivamus nunc\n\n759 Quis, volutpat ac viverra elit. ac ipsum\n\n760 Eget ante in Integer ut purus pretium\n\n761 Nec hendrerit rutrum volutpat ipsum neque. elit.\n\n762 Sem. consectetur purus orci, in tincidunt. Vivamus faucibus. aliquam ipsum in, et\n\n763 Molestie ac in, nec quis, Duis sagittis massa elementum ac primis ipsum viverra\n\n764 Orci, faucibus. in, ipsum pharetra fames ac efficitur pharetra sit\n\n765 Ante Mauris In finibus ac Integer quis, nunc volutpat\n\n766 In Vivamus\nLorem aliquam ac consectetur ac tincidunt. tortor\n\n767 Pharetra semper pharetra in malesuada rutrum\n\n768 Amet, efficitur in, In dui bibendum, et Duis Ut in massa, dui orci, fames molestie\n\n769 Est pharetra et molestie Vivamus primis elementum elit. ac sagittis Fusce orci In dolor\n\n770 Sem. ante consectetur fames massa in aliquam In In nunc\nLorem efficitur\n\n771 Libero amet, quis, adipiscing\nLorem massa\n\n772 Finibus pharetra efficitur ipsum ligula\n\n773 Lorem ante sit libero vel aliquam ante ante Mauris viverra velit. primis\n\n774 Fames eget fames ante ante ac Ut in, condimentum eget finibus\n\n775 Pharetra nunc ipsum scelerisque sem. rutrum viverra metus in et efficitur\nLorem elit. velit.\n\n776 Aliquam bibendum, ante adipiscing elit. efficitur dui enim eget hendrerit primis eget\n\n777 Integer massa aliquam ipsum fames finibus fames enim elementum orci,\n\n778 Velit. in semper. Interdum iaculis. ante pretium\n\n779 Et vitae in pretium molestie\nLorem Sed\n\n780 Eget ac efficitur consectetur ac\n\n781 Et elit. vel orci, in in et\n\n782 Primis dui ipsum ac elit. Duis ut aliquam\n\n783 Interdum neque. Sed orci In finibus in, et\n\n784 Nec neque. metus ante et ac volutpat\n\n785 Eget hendrerit ut vel in ac elementum dui\n\n786 In, malesuada enim ac Mauris\n\n787 Interdum efficitur est et lorem Sed vel\n\n788 Orci consectetur ligula fames libero ut Interdum primis ut adipiscing vel molestie purus semper elementum\n\n789 Dui ante fames tincidunt. pharetra Integer\n\n790 Massa, primis et ipsum et fringilla ligula in metus Ut pharetra sem. nunc hendrerit\n\n791 Adipiscing Sed ipsum consectetur orci amet, consectetur ac bibendum, sem. primis et\n\n792 Ut dui nunc est quis, orci sit lorem In orci ipsum ac velit.\n\n793 Nec bibendum, purus sem. elementum sit in quis, iaculis. efficitur nec semper primis libero\n\n794 Massa, In ipsum aliquam metus elit. in,\n\n795 Amet, semper eget pretium faucibus. metus sit\n\n796 Posuere ante et ac ac ante iaculis. pretium in In posuere semper. ante\n\n797 Ut tortor condimentum vel posuere faucibus. enim ac sit Fusce in\n\n798 Integer ante fringilla vitae ut adipiscing efficitur\n\n799 Dui Ut est in, In metus consectetur primis eget ipsum et primis tortor lorem\n\n800 Orci, eget velit. ante elit. amet, quis, consectetur efficitur iaculis. posuere massa pharetra sit vitae\n\n801 Tortor elit. ipsum condimentum dui\n\n802 In aliquam ut adipiscing est ut ac faucibus. et consectetur sem.\n\n803 Aliquam velit. pharetra semper orci ante\n\n804 Volutpat metus ante\nLorem vel\n\n805 Libero elit. hendrerit Vivamus amet, aliquam eget\n\n806 Orci, et ut rutrum rutrum hendrerit consectetur\n\n807 Malesuada iaculis. vitae neque. amet, massa, In purus tincidunt. est faucibus. nec tortor efficitur\n\n808 Mauris\nLorem rutrum Vivamus scelerisque semper. ipsum\n\n809 Massa, enim nec enim dolor nec finibus semper. dui In ut enim\n\n810 Condimentum metus ac fringilla massa, sit efficitur vitae condimentum\n\n811 Vel ipsum Integer in massa orci,\n\n812 Duis ac vel elit. ac est\n\n813 Ac metus Duis bibendum, eget sem. in, ante scelerisque in eget\nLorem scelerisque\n\n814 Eget Interdum elit. Vivamus eget elementum neque. massa, volutpat tincidunt.\n\n815 Finibus ac ipsum pretium bibendum, molestie et in malesuada vitae Integer libero massa\n\n816 Ut primis ac massa fames ut pretium Integer ac\n\n817 Iaculis. sagittis faucibus. molestie libero pharetra Ut orci, eget dolor Duis Ut amet, bibendum, bibendum,\n\n818 Duis in in in sit\n\n819 Et\nLorem consectetur consectetur Ut molestie Mauris efficitur ac pharetra in, faucibus. consectetur efficitur\n\n820 Posuere primis Sed et finibus fames ac in sit\n\n821 Ipsum efficitur elit. nunc Mauris neque.\n\n822 Orci efficitur scelerisque ut ut vitae\n\n823 In velit. tincidunt. tortor Mauris ante in, faucibus. In aliquam in\n\n824 Elementum iaculis. molestie Interdum et Fusce Interdum et fames\n\n825 Rutrum eget finibus eget orci dui Ut sagittis condimentum velit. vitae consectetur ante\n\n826 Fames efficitur massa nec sagittis molestie ipsum fames sit\n\n827 Ante in purus volutpat metus nec dolor ac quis,\n\n828 In, efficitur orci ligula efficitur elit. enim adipiscing\n\n829 In sagittis ac nec purus massa in consectetur Fusce sagittis condimentum\n\n830 Ipsum aliquam vel volutpat efficitur adipiscing in tortor Vivamus In\n\n831 Ante vitae massa pretium massa, Interdum\n\n832 Pretium dolor ac metus ac vitae viverra finibus Vivamus efficitur\n\n833 Ligula massa, orci Integer Ut purus ante fringilla\n\n834 Libero massa consectetur sagittis vel consectetur finibus dolor eget elit. Integer tincidunt.\n\n835 In, Fusce in, ipsum malesuada\n\n836 Felis. posuere in Integer ante Interdum fames\n\n837 Vel iaculis. et scelerisque eget nunc pharetra orci in, massa primis ligula nunc ac ut\n\n838 Sed sagittis volutpat lorem enim consectetur scelerisque pretium eget fames dui Sed finibus posuere\n\n839 Consectetur Sed purus nec est vitae Ut\n\n840 Elementum fringilla nunc hendrerit Interdum Fusce elit. vel vel et faucibus. eget\n\n841 In felis. massa, semper pretium efficitur sem. neque. in\n\n842 Ut posuere in est massa elit. eget orci ipsum eget elementum tincidunt. fames metus\n\n843 Condimentum volutpat nunc Sed nunc ligula ipsum ut efficitur volutpat rutrum elit. ut in\n\n844 In enim Duis posuere ipsum semper. eget elementum quis, ac ut ipsum\n\n845 Ut et semper. elit. Mauris fames eget\n\n846 Malesuada primis Integer ut enim Fusce libero nec\n\n847 Lorem in ut Vivamus Integer efficitur\n\n848 Nec ante et in, sagittis velit. dui elementum consectetur enim ac dui\n\n849 Velit. vitae fringilla velit. Integer lorem dui molestie aliquam libero Fusce ipsum\n\n850 Quis, ut aliquam sem. ut libero elit. lorem condimentum libero libero consectetur Duis Mauris\n\n851 Ipsum in, neque.\nLorem condimentum efficitur dolor et orci ac elit. in,\n\n852 Scelerisque consectetur consectetur elementum ante\n\n853 Scelerisque efficitur Mauris ac elit. pharetra fames enim\n\n854 Finibus ligula pharetra ante Sed faucibus. amet, libero finibus semper Integer purus\n\n855 Efficitur tincidunt. dui Duis semper Duis\n\n856 Bibendum, ut sagittis ante efficitur ac rutrum consectetur scelerisque vitae ante ipsum\n\n857 Ante sem. condimentum semper quis, volutpat massa, ac primis in eget lorem\n\n858 Malesuada efficitur faucibus. orci nunc elit. Interdum et orci eget primis bibendum, In massa iaculis.\n\n859 Sit in Integer hendrerit libero Integer ut libero rutrum bibendum, enim ut ligula libero ac\n\n860 Et\nLorem Interdum Mauris Ut in sit\n\n861 Ac vel ut tincidunt. rutrum dolor viverra sagittis ac\n\n862 Faucibus. rutrum scelerisque sem. in, Sed pretium\n\n863 Posuere eget ante felis. dui ac bibendum, iaculis. primis efficitur primis volutpat felis. in, Interdum\n\n864 Purus ante ligula scelerisque ante\n\n865 Ac efficitur enim eget\nLorem finibus dolor massa, Ut eget tortor\n\n866 Ac Vivamus adipiscing pharetra lorem\n\n867 Condimentum\nLorem ac tortor felis. dui efficitur finibus viverra Duis posuere Fusce ut viverra\n\n868 Consectetur in ante lorem orci, adipiscing finibus velit. ante bibendum,\n\n869 Adipiscing Mauris lorem malesuada ante neque. primis vel ac fames nec ante et ante\n\n870 Amet, dolor eget elit. ac lorem amet, vel est et sem. primis vitae\n\n871 Vitae pretium pharetra volutpat volutpat ante in efficitur posuere sagittis Duis\n\n872 Ligula semper ac ut Fusce ante felis. ante tortor In faucibus. condimentum eget ante\n\n873 Condimentum est malesuada consectetur volutpat ipsum et semper faucibus. neque. velit. Mauris\n\n874 Tortor consectetur ipsum ante ante sit adipiscing consectetur sem. ipsum\nLorem dui pretium consectetur fames\n\n875 In lorem ac scelerisque lorem\n\n876 Ut Sed ac lorem ut massa ante metus felis. scelerisque nec massa orci,\n\n877 Semper Integer tincidunt. metus Ut adipiscing\n\n878 Ipsum in ante faucibus. scelerisque in aliquam massa, massa, ut\n\n879 Ac ligula nunc ac adipiscing ante\n\n880 Ut ante condimentum fames tortor Sed fringilla libero velit.\n\n881 Efficitur pretium libero consectetur ipsum felis. pretium amet, lorem in, volutpat tortor molestie vitae\n\n882 Amet, efficitur semper.\nLorem quis, velit. In sem. Fusce malesuada ante condimentum Vivamus eget in\n\n883 Ipsum ut In in eget velit. ante pharetra aliquam hendrerit orci molestie finibus\n\n884 Scelerisque Ut libero efficitur rutrum ac sem. metus orci efficitur\n\n885 Pretium velit. sem.\nLorem Mauris\n\n886 In Fusce nunc amet, nec amet, aliquam Mauris elit. ipsum iaculis. sagittis malesuada\n\n887 Posuere Vivamus lorem elementum amet, nec Duis quis, ante Integer rutrum pharetra Fusce Vivamus\n\n888 Et fames elementum aliquam condimentum libero rutrum bibendum, dui ante In efficitur viverra\n\n889 Efficitur malesuada ac velit. vel\n\n890 In aliquam ante elit. orci, Duis amet, elit. felis. orci faucibus.\nLorem\n\n891 Massa in ante enim aliquam scelerisque consectetur in eget neque. efficitur\n\n892 Ut elementum scelerisque nec vel libero adipiscing consectetur\n\n893 Malesuada Duis sit et Ut metus elit. et\n\n894 Velit. elementum ac condimentum adipiscing ipsum hendrerit fames dui ante Sed eget dolor hendrerit metus\n\n895 Hendrerit sit eget sem. dui In finibus ante ut iaculis. ante nunc elit.\n\n896 Malesuada enim libero ac primis primis\n\n897 Elit. scelerisque orci, Mauris scelerisque ut\n\n898 Orci aliquam finibus rutrum adipiscing Sed in, purus ut et ipsum efficitur semper. amet,\n\n899 Neque. In fames massa, metus ut iaculis. primis est ac consectetur in efficitur\n\n900 Scelerisque ac ligula ac iaculis. ipsum ipsum nec est tincidunt.\n\n901 In consectetur massa, In eget elementum lorem ac rutrum semper. primis eget\n\n902 Volutpat ac\nLorem Interdum vel ipsum in\n\n903 Bibendum, dolor sit efficitur sem. orci,\n\n904 In condimentum eget pharetra vitae eget ante In ac dui semper\n\n905 Primis orci in molestie Duis tortor semper dolor sagittis\n\n906 Quis, In vel tincidunt. condimentum orci Integer ipsum condimentum\n\n907 Libero pharetra elit. in purus dui enim et\n\n908 Eget tortor ante Mauris adipiscing sit elementum finibus\n\n909 Tincidunt. Sed aliquam dolor iaculis.\n\n910 Viverra et In ut libero velit. purus ipsum neque. consectetur nec posuere\n\n911 Iaculis. est\nLorem libero est eget ac condimentum et orci, est massa Interdum\n\n912 Fringilla fringilla ante iaculis. purus rutrum fames enim lorem ante\n\n913 Dui pretium Fusce aliquam iaculis.\n\n914 Sit nec velit. Mauris metus purus efficitur dolor elit. amet, ipsum Ut quis, et\n\n915 In adipiscing velit. ante elit. ligula Interdum ipsum est et sagittis\n\n916 Enim\nLorem orci sem. velit. volutpat\n\n917 Consectetur ante aliquam Fusce orci, in adipiscing condimentum\n\n918 Nunc eget in vel purus vel Mauris Integer Fusce Ut elit. neque. finibus viverra\n\n919 Aliquam volutpat aliquam nec ac consectetur ac dui rutrum Interdum\n\n920 Adipiscing semper sem. et ac metus velit. volutpat finibus neque. eget sem.\n\n921 Tortor Sed semper ante ligula ipsum\n\n922 Ut tortor dolor Fusce malesuada efficitur dui quis, Interdum bibendum, ipsum orci fames fames\n\n923 Semper hendrerit ipsum hendrerit Interdum vel efficitur ante Duis\n\n924 Elementum orci ipsum malesuada dui enim enim In finibus\n\n925 Posuere in in semper. ac consectetur ac purus\n\n926 Aliquam et sem. faucibus. massa et in, semper pretium\n\n927 Massa, elit. aliquam et enim\n\n928 Elit. aliquam primis Fusce in lorem nunc ipsum efficitur amet, dolor\n\n929 Aliquam Ut est pharetra consectetur Ut Fusce Mauris felis.\n\n930 Consectetur in, Integer ac consectetur scelerisque ut semper in, nec dui\n\n931 Semper quis, elit. Ut adipiscing malesuada ut\n\n932 Semper. finibus in in massa nunc viverra\n\n933 Efficitur orci, ipsum eget\nLorem nec ac scelerisque faucibus. in ac bibendum,\n\n934 Ac metus volutpat Integer ut massa bibendum, pretium sit sem. consectetur\n\n935 Ipsum eget tincidunt. in ligula elementum ante consectetur ac ut primis Interdum in posuere\n\n936 Ligula lorem fringilla adipiscing semper nunc posuere\n\n937 Fringilla orci In pretium molestie ac sagittis nec in\n\n938 Et dui elit. Duis tortor Interdum enim metus\n\n939 Ac tincidunt. enim lorem Interdum felis. scelerisque orci faucibus. pharetra purus orci, Fusce Integer\n\n940 Hendrerit malesuada tortor pretium ante fringilla neque. elit. rutrum amet, neque. Mauris nunc hendrerit\n\n941 Vel Vivamus ac condimentum ac aliquam tortor purus\n\n942 Massa, tortor volutpat pretium in condimentum ante sagittis efficitur\n\n943 Sit lorem efficitur vitae libero sit ut finibus tortor ante amet, ac condimentum ac sem.\n\n944 Dui efficitur Sed efficitur velit.\n\n945 Bibendum, volutpat et ipsum aliquam amet, massa consectetur pharetra purus ante quis,\n\n946 Iaculis. bibendum, orci, purus neque. In est fringilla\n\n947 Enim metus ac volutpat aliquam\n\n948 Ac posuere Ut volutpat et primis eget condimentum Mauris tincidunt. Integer malesuada\n\n949 Vel orci tincidunt. volutpat primis aliquam ut fringilla\n\n950 Elit. efficitur tortor et\nLorem tortor\n\n951 Est primis ut iaculis. dui pharetra ipsum nunc pharetra\n\n952 Efficitur fringilla hendrerit ligula\nLorem sit\n\n953 Efficitur Ut Sed hendrerit dui ac Vivamus Integer orci,\n\n954 Pharetra eget nec faucibus. Mauris neque. enim finibus\n\n955 Tortor velit. Sed Interdum ipsum Ut pharetra tortor in consectetur ut in libero ipsum Ut\n\n956 Hendrerit ante velit. rutrum metus tincidunt. ac ligula ante ipsum amet,\n\n957 Molestie efficitur orci, nunc sem. ipsum finibus posuere orci Ut\n\n958 Tortor finibus Vivamus vel libero orci primis\n\n959 Orci posuere efficitur Fusce Sed primis fringilla\n\n960 Semper. adipiscing ac adipiscing neque. dolor Fusce iaculis. est semper. purus eget Mauris et consectetur\n\n961 Elementum Interdum bibendum, consectetur massa, elit. faucibus. nec sit dolor ipsum ipsum\n\n962 Posuere malesuada ante nunc in orci, fringilla sem. ut viverra hendrerit primis efficitur\n\n963 Eget est viverra sem. vitae dolor efficitur in, ut ut\n\n964 Neque. elementum orci, massa orci pharetra ligula quis, ut\n\n965 Posuere pharetra enim efficitur posuere neque. ligula nunc amet, rutrum rutrum\n\n966 Massa molestie velit. ut ante est ipsum fames orci, scelerisque libero\n\n967 Fringilla vitae in malesuada fringilla dolor Sed\n\n968 Fames faucibus. ligula Ut vitae\nLorem ac ante\n\n969 Sed elit.\nLorem libero Vivamus nunc neque. orci est dolor ac Interdum posuere\n\n970 Metus ut et in orci, velit. semper.\n\n971 Posuere Duis sem. pretium Interdum In fames efficitur ac velit. Ut ante Interdum Mauris neque.\n\n972 Hendrerit elementum ac condimentum ligula tincidunt. primis nunc molestie\n\n973 Ligula sagittis massa amet, sem. consectetur consectetur dui sit ac finibus fringilla semper primis\n\n974 Aliquam sagittis nunc In ligula in semper et\n\n975 In, viverra enim pharetra in Interdum viverra Mauris vitae\n\n976 Elit. ut et faucibus. ut viverra elit. Duis ac ac hendrerit\n\n977 Sem. ut sagittis in Sed fames vel Sed massa, primis libero pretium ante\n\n978 Interdum quis, bibendum, consectetur felis. fringilla pharetra eget Fusce ut scelerisque volutpat pretium\n\n979 Felis. Ut Integer posuere fames\n\n980 Ante ante ligula purus vel\n\n981 Vel neque. massa, purus ac in, Integer bibendum, ligula primis ipsum ac\n\n982 Ante Integer Fusce ac quis, eget\n\n983 Posuere In in nec et viverra\n\n984 Ipsum orci Interdum hendrerit tincidunt. aliquam efficitur tincidunt. ut neque. in\n\n985 Tortor enim ac consectetur ante\n\n986 Scelerisque nec enim velit. fringilla iaculis.\n\n987 Lorem in sagittis Sed iaculis. consectetur ac pharetra efficitur viverra scelerisque\n\n988 Duis malesuada semper quis, malesuada semper elit. ac iaculis. elit. purus ac ante efficitur\n\n989 Dolor metus massa, condimentum molestie ante\n\n990 Et enim efficitur Sed ut velit. in nunc elementum consectetur\n\n991 Vel dolor Duis in efficitur\n\n992 Fusce iaculis. Integer volutpat et primis ac sem. In ut elit. pretium\n\n993 Rutrum Vivamus Interdum Ut elit. consectetur lorem consectetur metus velit. orci, ante vel enim\n\n994 Ante sem. fames est eget sagittis primis volutpat faucibus. velit. aliquam aliquam pretium Ut\n\n995 Consectetur quis, vitae elit. nec tincidunt. finibus pretium ut ipsum ipsum pharetra lorem\n\n996 Nec condimentum efficitur Ut metus Interdum Fusce\n\n997 Sed tortor ante ipsum ut Ut ipsum amet, sem. nec hendrerit\n\n998 Scelerisque semper. dui eget iaculis. Fusce fringilla Ut dui ligula quis, in\n\n999 Ac sit ac dui nec in, dui in, consectetur\n\n1000 Ut et vitae amet, in Integer libero efficitur sagittis velit. neque. primis Integer\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‹ 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",
+    "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‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\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\nLorem sit ipsum 0123abc MAN\n\n7355 Sit dui eget elit. dui 1123abc MAN\n\n7356 Amet, ipsum dui sit 2123abc MAN\n\n7357 Elit. elit. dolor 3123abc MAN\n\n7358 Amet, dui\nLorem amet, 4123abc MAN\n\n7359 Elit. eget ipsum eget ipsum 5123abc MAN\n\n7360 Eget ipsum dolor 6123abc MAN\n\n7361 Elit. sit 7123abc MAN\n\n7362 Eget elit.\nLorem ipsum amet, 8123abc MAN\n\n7363 Dui sit\nLorem\nLorem amet, 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"
@@ -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‹ 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. |",
+    "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‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\n\nControlled - Stay open on invalid (default)\n\n‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\n\n12:00\n\nSaved value:\n\nControlled - With error\n\n‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\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‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\n\n12:00 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‹ 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. |",
+    "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‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\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\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 |",
+    "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\nUt vitae massa dolor ut\n\nItem 2\nQuis, quis, efficitur ante Integer in Interdum ut In elit.\n\nItem 3\nConsectetur sit Interdum tincidunt. Duis eget Duis ac sagittis et posuere\nLorem in finibus Ut\n\nItem 4\nIaculis. vitae eget scelerisque orci libero iaculis. elit. enim felis. malesuada elit. purus et\n\nItem 5\nMassa ligula efficitur elit. condimentum quis, dui dui purus massa malesuada vel metus elit.\n\nItem 6\nIaculis.\nLorem ante felis. massa dolor\n\nItem 7\nElementum\nLorem Sed pretium in consectetur condimentum nec bibendum, elementum ipsum ipsum orci, et massa\n\nItem 8\nAmet, faucibus. orci elit. finibus pharetra Duis felis. nec aliquam efficitur velit. elementum scelerisque\n\nItem 9\nEt vel adipiscing malesuada fringilla massa,\nLorem Sed bibendum, ac\n\nItem 10\nUt Sed felis. Sed bibendum, primis ante enim in in, amet, Sed orci,\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\nLibero Duis volutpat consectetur sit ac Vivamus posuere consectetur ipsum posuere dui volutpat vitae\n\nVehicle 2\nUt elit. amet, elit. sagittis molestie elementum sem. aliquam\n\nVehicle 3\nMolestie eget semper. ante ipsum semper. quis,\n\nVehicle 4\nEst pretium ac nunc ac tortor ipsum massa, et ipsum eget ac\n\nVehicle 5\nElit. malesuada vel sem. eget quis, Mauris iaculis.\n\nVehicle 6\nQuis, orci enim libero purus in, In vel massa, aliquam Ut Duis ut\n\nVehicle 7\nIn est in orci pretium Integer pharetra tortor ut\n\nVehicle 8\nQuis, elit. pretium eget metus vel finibus nec ac in,\n\nVehicle 9\nIn, condimentum ipsum pharetra ipsum orci elit. vitae sit in Mauris molestie pretium\n\nVehicle 10\nScelerisque\nLorem Duis ante posuere metus tortor efficitur\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": "- 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",
+    "summary": "- Fixed Migrated the forked react-datetime dependency from a GitHub source to the published npm package to address a security vulnerability and improve dependency management.",
+    "searchText": "Changelog\nVersion 2.4.2 (2026-06-11)\n- Fixed Migrated the forked react-datetime dependency from a GitHub source to the published npm package to address a security vulnerability and improve dependency management.\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.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\"",
+    "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.2\n\n-\n\n/\n\n-\n\n2.4\n\n.2\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.2/rio-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.2/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.2/vw-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.2/vw-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.2/man-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.2/man-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.2/scania-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.2/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.2/rio-uikit-print-utilities.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.2/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.2/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.2/rio-darkmode.js\"</script\n\n<script src=\"https://uikit.developers.rio.cloud/2.4.2/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.1",
+    "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.2",
     "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‹ 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",
+    "searchText": "Common table\nCommon table\nNew Action\n\n‹ June 2026 ›\nSu Mo Tu We Th Fr Sa\n\n31 1 2 3 4 5 6\n7 8 9 10 11 12 13\n14 15 16 17 18 19 20\n21 22 23 24 25 26 27\n28 29 30 1 2 3 4\n5 6 7 8 9 10 11\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\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",
+    "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nVeniam amiculum id adaugeo tantum vilicus.\nCompello somnus sint veritas umerus coerceo delego patrocinor trucido bonus.\nDemoror sonitus adiuvo solio convoco.\nSuccurro credo suppellex vel decumbo absorbeo cursim.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nVilicus sonitus coniecto tenus volaticus.\nCura vapulus tepidus adversus adduco infit vaco tergiversatio acervus virgo.\nBardus adeptio volubilis.\nArs cito sollicito tui conqueror stillicidium absconditus talis congregatio.\nRead more\nLorem ipsum dolor sit amet\nTepesco atque dolor via caput maiores contigo voluptates solium apostolus.\nCommodo conculco tempore.\nCampana perspiciatis accusantium neque curiositas cruentus causa patria.\nAncilla comburo vestigium uter.\nEsse sui aspicio tendo quo toties sto.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nLaboriosam exercitationem theatrum comes thema.\nAvaritia tredecim saepe iusto vinitor animadverto conforto subvenio.\nVulariter videlicet tempore cuius sol approbo.\nDignissimos impedit conor cura amplitudo altus corona cribro.\nMinima vae laborum dolore illum adimpleo deleniti suscipio cruciamentum cenaculum.\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 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",
+    "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact person Dr. Aurelia Pollich\nRequested role Future Program Executive\nContact email Laura_Roberts@yahoo.com\nAnnual budget €50,715.00\nProject description Maxime abundans suppellex conicio molestiae atavus nihil adiuvo.\nCattus molestias conatus.\nArma adipisci umerus cavus decerno adamo pax traho.\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\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",
+    "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nAggredior deleo tamdiu velut administratio cras vinco trepide ceno.\n\nCremin - Kulas\nCivitas suppellex modi.\n\nConnect\n\nKreiger - Prosacco\nTondeo stabilis pauper.\nVersus cado aperiam advenio coepi aeternus.\n\nConnect\n\nWard LLC\nSollicito tabella vulgaris umerus arto vespillo taceo curriculum.\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\nQuia conturbo vinco stipes pel unus cohibeo iure cohaero.\n\nHudson, Kuhic and Purdy\nCasus thymbra deleniti cicuta aegrotatio uberrime triduana vulgo turba.\n\nLittle - Cole\nCupiditas allatus videlicet compello.\nTurbo viduo officiis ustulo.\n\nBraun and Sons\nThermae cras argumentum sum in.\nCarpo adversus veritatis via considero socius quaerat excepturi minus autus.\nLorem ipsum dolor sit amet\nVicinus altus advoco consectetur cumque barba patruus sono undique amaritudo.\nCursim subvenio cursus copiose aveho dignissimos consequuntur.\n\nVolkman, Miller and Hahn\nCelo voco vapulus curtus agnitio illo abduco advenio sublime demo.\nVersus absum tamdiu quis accusator versus adstringo minima demitto.\nAduro adfero alioqui alienus abeo.\n\nShields - White\nDecipio neque tenax uxor umbra alias ultra validus.\nSto pariatur avarus terra denego.\nAnser uter non.\n\nBaumbach, Wehner and Schmitt\nRecusandae perferendis candidus cena compono solio vero inventore vado vereor.\nPorro umquam tubineus arx.\nCibo arbor compello conspergo inflammatio curo.\n\nFunk Group\nDignissimos vociferor ascit acerbitas virtus cruciamentum amplus.\nIste quam crebro.\nSurculus nostrum cavus tego calcar sopor calcar vesco.\nEnhance your application with powerful add-ons!\n\nLuxurious Granite Cheese\nJacobi, Swaniawski and White's most advanced Ball technology increases crowded capabilities\n\n€17.29\nTotal per month\n\nGet Add-on\n\nRecycled Plastic Keyboard\nUnbranded Ball designed with Aluminum for secret performance\n\n€23.89\nPer 1000 messages / month\n\nGet Add-on\n\nBespoke Aluminum Gloves\nDiscover the dearest new Chicken with an exciting mix of Ceramic ingredients\n\n€59.85\nTotal per user / month\n\nGet Add-on\n\nGeneric Plastic Shirt\nThe Smart homogeneous service-desk Chips offers reliable performance and trustworthy design\n\n€53.45\nPer 1000 messages / month\n\nGet Add-on\n\nTasty Metal Cheese\nSavor the crunchy essence in our Mouse, designed for wealthy culinary adventures\n\n€42.45\nPer 1000 messages / month\n\nGet Add-on\nFeatures\n\nIncredible Metal Bacon\nThe sleek and vague Bike comes with yellow LED lighting for smart functionality\n\nModern Rubber Salad\nThe silver Bike combines Belize aesthetics with Germanium-based durability\n\nElectronic Marble Bacon\nProfessional-grade Soap perfect for regal training and recreational use\n\nTasty Granite Chair\nErgonomic Soap made with Ceramic for all-day sandy support\n\nIntelligent Granite Gloves\nStylish Cheese designed to make you stand out with cumbersome looks\n\nTasty Granite Sausages\nSavor the juicy essence in our Bacon, designed for essential culinary adventures",
     "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\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",
+    "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\nExclusive client-server solution\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\nMississippi Mississippi\nGeorgia\n\nCuraçao Curaçao\nEgypt\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\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%",
+    "searchText": "Stats blocks\nStats blocks\nStats page\nOverview of your supply chain operations\n\nTotal inventory\n1149 units\n\n12% from last month\n\nOpen orders\n31\n\n5% from last month\n\nIn transit\n15\n\n-3% from last month\n\nIssues\n2\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\": 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. |",
+    "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\": 1781172187389\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\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). |",
+    "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\nLacey\n\nWisozk\n\nBradford85@yahoo.com\n\n2\n\nJarrell\n\nO'Connell\n\nCharlie_Koch18@hotmail.com\n\n3\n\nSylvia\n\nCormier\n\nJoesph14@gmail.com\n\n4\n\nKathryne\n\nMcLaughlin\n\nHazel_Doyle-Torp@gmail.com\n\n5\n\nAkeem\n\nPredovic\n\nKelli_Mertz27@gmail.com\n\n6\n\nBria\n\nMosciski\n\nEnos_Senger-MacGyver@gmail.com\n\n7\n\nJordan\n\nSchmeler\n\nEvans.Goodwin31@yahoo.com\n\n8\n\nTyson\n\nDaniel\n\nVaughn93@hotmail.com\n\n9\n\nDwight\n\nKunde\n\nMara75@yahoo.com\n\n10\n\nStuart\n\nSatterfield-Hammes\n\nSusan.Lebsack@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). |",
     "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 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. |",
+    "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 Donnie Dach-Yost Mandy.Jones@yahoo.com\n2 Heather Cronin-Crona Delphia.Jast@yahoo.com\n3 Kristy Nitzsche Ashtyn17@yahoo.com\n4 Idell Lueilwitz Constance.Zemlak94@yahoo.com\n5 Keenan Jones Rick.Rippin@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 Brandi Raynor Bonita.Lockman-Miller75@gmail.com\n\n2 Kelly Bergnaum Marguerite.Prosacco32@hotmail.com\n\n3 Daija Walker Joey_Abshire58@gmail.com\n\n4 Lacey Tromp Cielo.Romaguera@yahoo.com\n\n5 Sammy Stokes Alex.Brakus10@yahoo.com\n\n6 Alva Keebler Delilah_Powlowski@hotmail.com\n\n7 Giovanni Stracke Brandon.Hodkiewicz89@gmail.com\n\n8 Stacey Schiller Rahul_Stark@hotmail.com\n\n9 Lucas Ondricka Rosalinda66@hotmail.com\n\n10 Sanford Collier Phil.Bahringer53@hotmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |",
     "category": "Utilities",
     "section": "Table & data hooks",
     "boost": "useTableSelection utilities/useTableSelection #utilities/useTableSelection Utilities Table & data hooks"