@rio-cloud/uikit-mcp 1.1.11 → 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 IAR07Q32FDL\n\nItem 8QCRTQ3YH2\n\nItem EFVUWAQJLM\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nLoad Items Item KDQ20F8ANB\n\nItem 0GHO5M48WH\n\nItem Y0653RI8HK\n\nItem YQM8A4TWMJ\n\nItem 6BTIZQ3HCS\n\nItem C6HLMLK7N1",
+    "searchText": "Animations\nThe UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.\nAnimations\nThe official documentation can be found here https://motion.dev/docs/react\nSome Data\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nAdd Item Item 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\n4\n2\n\nAsset Group 3\nVehicle-6700 Asset 1001\nVehicle-7557 Asset 1009\nVehicle-7869 Asset 1000\n\nUngrouped 8\n\n200\n\nSidebar Right\n\nSidebar components may be added here...\n\nClose\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\nSample Service Content\nOpen Sidebar\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nBottom Button\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |",
+    "searchText": "ApplicationLayout\nThe ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar\nApplicationLayout\nThe ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.\n\nNote: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragmentinstead\n\nNote: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <bodynode.\nDefault example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nSubNavigation example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nBody banner example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nBottom bar example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nSidebar Example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSidebar Right\n\nSidebar components may be added here...\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\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\n5241\n4\n\nGroup - Abbie D'Amore - 4617 14\n\nGroup - Abdullah Gorczany - 4604 12\n\nGroup - Ada Bergnaum - 6885 15\n\nGroup - Adam Spencer - 1326 6\n\nGroup - Adrain Rice - 3568 7\n\nGroup - Agustin Sawayn - 9288 13\n\nGroup - Agustina Mitchell - 7938 12\n\nGroup - Alba Dickens - 4029 15\n\nGroup - Albert Larkin Jr. - 4366 12\n\nGroup - Albert Turcotte - 3213 17\n\nGroup - Albertha Maggio Jr. - 5254 14\n\nGroup - Alejandro Dach Jr. - 7483 17\n\nGroup - Alek Goldner - 1787 12\n\nGroup - Alek Hettinger V - 4864 13\n\nGroup - Alessandra Effertz - 8203 14\n\n200\n\n200\n\nLoad trucks Clear tree Toggle all groups selection\n\nCurrent category:\ntrucks\nSelected groups:\n\nSelected assets:\n\nExpanded groups:\nTrailer Group\n\nSelected drivers:\n\nSearch value:\n\nAsset type filter:\n[]\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with single select\n9\n10\n5\n6\n\nMy Empty Group 3\n\nTruck Group East 5\n\nTruck Group North 4\nN18-G259 / M-AN 1006\nN18-G545 / M-AN 1029\nN18-G632 / M-AN 1011\nN18-G845 / M-AN 1003\n\nTruck Group South 7\n\nTruck Group West 6\n\nAll my unassigned Trucks 5\n\nCurrent category:\nassets\nSelected tree groups:\n\nSelected assets:\n\nExpanded tree groups:\nTruck Group North\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with multiple asset filter in summary\nWhen using fuel filter, please check out the fuel type utils that ease the implementation of mapping vehicle fuel types to common fuel type groups.\n3\n8\n6\n3\n\n9\n2\n7\n1\n1\n\nMixed Vehicles 14\n\nVehicle-1032 Debug: lpg\n\nVehicle-1530 Debug: diesel\n\nVehicle-1885 Debug: electric\n\nVehicle-2261 Debug: electric\n\nVehicle-3321 Debug: electric\n\nVehicle-6234 Debug: gas\n\nVehicle-6675 Debug: gas\n\nVehicle-6884 Debug: dual_fuel_diesel_cng\n\nVehicle-7323 Debug: hydrogen\n\nVehicle-8654 Debug: diesel\n\nVehicle-8759 Debug: electric\n\nSelected groups:\n\nSelected vehicles:\n\nExpanded groups:\nMixed Vehicles\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with custom summary\n3\n15\n\nJohn Doe\nMaxl Rainer\nJohan Schmidt\n\nSome small dummy text at the bottom to showcase that you can put something here\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree with custom icons\nGroup 01 11\n\nGroup 02 3\n\nGroup 03 6\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree\nTree with header and search\n\n20\n\nFolder 01 3\n\nFolder 02 7\n\nFolder 03 7\n\nFolder 04 3\n\nSelected items:\n\nExpanded folders:\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree without header and search\n\nFolder 01 6\n\nFolder 02 7\n\nFolder 03 3\n\nFolder 04 4\n\nSelected items:\n\nExpanded folders:\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\nTreeSummary with assetCounts\n12\n7\n2\n2\n10\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\nTreeSummary with TypeCounter\n9\n15\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |",
+    "searchText": "AssetTree\nAssetTree\nThe asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.\nFilter\n\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\nTuesday\n28 April 2026\n\nWednesday\n29 April 2026\n\nThursday\n30 April 2026\n\nFriday\n1 May 2026\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | number | 200 | The minimum width in pixel of a single day column This value determines how many days are shown per page depending on the parent width. |\n| minDays | number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | number | 7 | The maximum amount of days that should be shown per page. |\n| renderDay | (date: Date) =React.JSX.Element | — | A function that renders each individual day to be displayed. |\n| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |\n| startDate | Date | the current date | The date of the first day that are rendered. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| buttonClassName | string | — | Additional classes set to the navigation buttons. |\n| className | string | — | Additional classes set to the calendar element. |\n| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |\nApr\n28\n2026\n\nApr\n29\n2026\n\nApr\n30\n2026\n\nMay\n1\n2026\n\nMay\n2\n2026\n\nMay\n3\n2026\n\nMay\n4\n2026\n\nSet to January Toggle Weekends\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | number | 200 | The minimum width in pixel of a single day column This value determines how many days are shown per page depending on the parent width. |\n| minDays | number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | number | 7 | The maximum amount of days that should be shown per page. |\n| renderDay | (date: Date) =React.JSX.Element | — | A function that renders each individual day to be displayed. |\n| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |\n| startDate | Date | the current date | The date of the first day that are rendered. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| buttonClassName | string | — | Additional classes set to the navigation buttons. |\n| className | string | — | Additional classes set to the calendar element. |\n| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |",
+    "searchText": "CalendarStripe\nA headless component where you provide a function that renders the UI for every day to be displayed.\nCalendarStripe\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‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00\n\nNo time Format: YYYY-MM-DD\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\nOnly month\n\n‹ 2026 ›\n\nJan Feb Mar Apr\nMay Jun Jul Aug\nSep Oct Nov Dec\n\nOnly time\n\n▲ 12\n▼\n:\n▲ 00\n▼\n▲ AM\n▼\n\nNot closing when selecting\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nWith min-width\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nClearableInput and optional value\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n04:57\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nTo:\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nUnspecified locale Format: MM/DD/YYYY\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nNote\nWatch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our writing guidelines .\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nReset\nSelects are a simple alternative for choosing dates 01 01\n02\n03\n04\n05\n06\n07\n08\n09\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n\nJanuary January\nFebruary\nMarch\nApril\nMay\nJune\nJuly\nAugust\nSeptember\nOctober\nNovember\nDecember\n\n2022 2022\n2023\n2024\n2025\n2026\n2027\n\nSat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)",
+    "searchText": "DatePicker\nA wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.\nDatePicker\nDeprecated warningThe DatePicker is no longer being further developed and is based on Moment.js, which is itself a no-longer-maintained library. Please use the new DayPicker instead. It offers a much more flexible API for dropdown composition, validation, presets, sidebars, footers, and date/time workflows.DayPicker\n\nIt can be used in two ways, as a controlled or uncontrolled component. If you want to use it as a controlled component, pass a value, which you need to provide the DatePicker even after a user selects a new date. If you want to use it as an uncontrolled component, simply omit the value prop (for read-only use cases).\n\nNote: The DatePicker component uses the default format for the given locale. If you specify a locale, make sure you have imported the moment locale file like import 'moment/dist/locale/de';\nDefault Format: YYYY-MM-DD HH:mm\n\n‹ 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.04.2026 09:00 - 06.04.2026 17:30\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nAvailable times in a sidebar\nInstead of a free-form time input, the dropdown can also render a curated list of available time slots in a sidebar.\nDate with available times\n\nYou picked: 27.03.2026 09:00\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nMultiple dates\nThe same dropdown shell also supports multiple independent dates and renders the current selection as a compact list in the input.\nMultiple dates\n\nYou picked: 27/03/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nCalendar weeks\nIf you need ISO calendar weeks in the dropdown, enable showWeekNumber. The input still keeps the regular date display.\nCalendar weeks in dropdown\n\nYou picked: 30/03/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRestricted month range\nUse startMonth and endMonth to limit the dropdown to a fixed month interval. This example only allows choosing from two visible months.\nLimited to two months\n\nYou picked: 14/04/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nDisabled days\nUse disabledDays to block individual dates from being selected while keeping the normal input behavior.\nDisabled days\n\nYou picked: 12/04/2026\nDisabled: 10/04/2026, 14/04/2026, 22/04/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nHidden days\nUse hiddenDays to remove matching dates from the dropdown calendar grid entirely.\nHidden days in a month\n\nYou picked: No date selected\nHidden: 10/05/2026, 11/05/2026, 20/05/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nFilter icon for date ranges\nUse iconName on the default trigger to turn a range picker into a filter control. This example switches from rioglyph-filter to rioglyph-filter-active once a complete range is selected.\nDate range filter\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nISO date format\nA common integration pattern is to keep the value as a date-only ISO string like 2026-05-10 and only map it to Date for the picker UI.\nISO date format\n\nISO value: 2026-05-10\nParsed UI value: 10/05/2026\nThe demo keeps the value as a date-only ISO string and only maps it to Date for the picker.\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nTimezones and UTC payloads\nAdditional form elements like timezone selectors can be rendered into the dropdown from the outside. This example combines a date, time, and timezone and shows the resulting full UTC datetime string.\nDate, time and timezone\n\nLocal wall time: 2026-05-10 09:30 Europe/Berlin\nUTC ISO payload: 2026-05-10T07:30:00.000Z\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nValidation and error states\nDayPicker includes the common feedback markup directly via errorMessage and warningMessage. For custom validation flows, especially manual input parsing, use onInputChange to drive the messages from outside.\nStatic error styling with built-in feedback props This is an error message\n\nControlled error feedback with built-in message This is an error message\n\nLive format validation with yyyy-MM-dd\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nReact Hook Form\nThe component works well with Controller by passing through name and onBlur while using the built-in feedback props for form errors.\nDelivery date\n\nSubmit\n\nSubmitted value: Nothing submitted yet\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nCustom renderValue and parseInput\nFor specialized cases, you can override both how the value is shown in the input and how manual input gets parsed, without exposing the full third-party picker API.\nCustom parsing and rendering\n\nInput accepts: yyyyMMdd\nRendered value: Fri, 27 Mar 2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |",
+    "searchText": "DayPicker\nDayPicker is the composable input and dropdown wrapper that should replace the legacy DatePicker. It keeps the UIKIT API small while still allowing presets, footer actions, and additional controls to be injected from the outside.\nDayPicker\nUse this component for form fields, filters, and composed dropdown workflows. The standalone calendar API is documented separately on the DayPickerCalendar page.\nSingle day picker\nThe default entry point wraps an input and dropdown around the calendar for the common single-date case.\nSingle day picker\n\nYou picked: No date selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nSingle day with dateFormat\nUse dateFormat when you want a migration-friendly custom input format similar to the legacyDatePicker.\nSingle day with custom format\n\nYou picked: 2026-03-26\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nLocalization\nSwitch the locale to see how the default input formatting changes between localized date conventions.\nLocalized input formatting en-GB bg-BG\ncs-CZ\nda-DK\nde-DE\nel-GR\nen-GB\nes-ES\net-EE\nfi-FI\nfr-FR\nhr-HR\nhu-HU\nit-IT\nlt-LT\nlv-LV\nnb-NO\nnl-NL\npl-PL\npt-BR\npt-PT\nro-RO\nsk-SK\nsl-SI\nsv-SE\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nCustom triggers\nThe dropdown does not depend on an editable input. You can swap in custom triggers like icon buttons or compact labels for places with limited space.\nIcon button trigger\n\nYou picked: No date selected\n\nMuted label trigger 30/03/2026\n\nYou picked: 30/03/2026\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRange picker\nRange mode keeps the same input shell but changes the calendar selection behavior and the rendered value. It can also show two visible months for faster range selection.\nRange picker\n\nYou picked: No range selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nWeek selection\nSet selectionVariant='week' to select the whole week of the clicked day while keeping the same range value shape.\nWeek selection\n\nYou picked: No week selected\nWeeks start on Monday. You can click a day or the calendar week number.\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nMonth selection\nSet selectionVariant='month' to select the whole month of the clicked day as one range.\nMonth selection\n\nYou picked: No month selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRolling range\nSet selectionVariant='rolling' with rollingDays to create a fixed-length range starting from the clicked day.\nRolling 7-day window\n\nYou picked: No rolling range selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nFooter actions\nFooter actions can also select values directly, for example a Today button for single-date workflows.\nSingle date with Today action\n\nYou picked: No date selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRange picker with presets and footer actions\nSidebar presets and footer controls are passed in from the outside. The picker keeps draft state internally, but the surrounding UI remains fully composable.\nRange with presets and footer actions\n\nYou picked: No range selected\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nPresets with external select\nThe same preset ranges can be offered both inside the dropdown and through a separate Select outside the picker.\nRange picker with synced presets Last 14 days Today\nThis week\nLast 7 days\nLast 14 days\nLast 90 days\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nDate and time footer\nThe footer slot can host a TimePicker while renderValue shows the combined date and time in the trigger. The examples use the existing 24-hour TimePicker; AM/PM is currently not part of the default UIKIT time input.\nDate and time\n\nYou picked: 30.03.2026 14:30\n### CommonDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded to the default input trigger. |\n| name | string | — | Optional form field name forwarded to the default input trigger. |\n| placeholder | string | — | Placeholder text shown in the default input trigger. |\n| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |\n| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |\n| onBlur | FocusEventHandler<HTMLInputElement| — | Called when the internal input loses focus. |\n| inputProps | Omit<InputHTMLAttributes<HTMLInputElement, 'children' \\| 'value' \\| 'defaultValue' \\| 'onChange' \\| 'size'| — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |\n| errorMessage | string \\| ReactNode | — | Shows the built-in error styling and help block below the input. |\n| warningMessage | string \\| ReactNode | — | Shows the built-in warning styling and help block below the input. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |\n| inputClassName | string | — | Additional classes for the text input element. |\n| dropdownClassName | string | — | Additional classes for the dropdown container. |\n| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |\n| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |\n| footerClassName | string | — | Additional classes for the footer container. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |\n| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |\n| isClearable | boolean | false | Shows a clear button inside the input. |\n| closeOnSelect | boolean | true for selectionBehavior='immediate', otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |\n| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |\n| selectionBehavior | 'immediate' \\| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |\n### SingleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n| onInputChange | (rawValue: string, parsedDate: Date \\| undefined, isValid: boolean) =void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |\n| parseInput | (rawValue: string, locale: string) =Date \\| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |\n| renderValue | (value: Date \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### RangeDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| renderValue | (value: DateRange \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<DateRange) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<DateRange) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### MultipleDayPicker props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n| renderValue | (value: Date[] \\| undefined, locale: string) =string | — | Custom renderer for the value shown in the input. |\n| trigger | ReactNode \\| ((props: DayPickerTriggerRenderProps<Date[]) =ReactNode) | — | Replaces the default input trigger with custom trigger content. |\n| leftSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the left side of the dropdown. |\n| rightSidebar | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered on the right side of the dropdown. |\n| footer | ReactNode \\| ((props: DayPickerSlotRenderProps<Date[]) =ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |\n### DayPickerSlotRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | TValue \\| undefined | — | Currently committed value of the picker. |\n| draftValue | TValue \\| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |\n| setDraftValue | (value: TValue \\| undefined) =void | — | Updates the current draft value from custom slot content. |\n| apply | () =void | — | Commits the current draft value and closes the dropdown. |\n| clear | () =void | — | Clears the current selection. |\n| close | () =void | — | Closes the dropdown without necessarily committing the current draft value. |\n| mode | DayPickerMode | — | Active selection mode of the picker. |\n| locale | string | — | Active locale used for formatting and calendar labels. |\n### DayPickerTriggerRenderProps\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Optional id forwarded from the DayPicker props. |\n| name | string | — | Optional form field name forwarded from the DayPicker props. |\n| displayValue | string | — | String currently shown by the default trigger input. |\n| isOpen | boolean | — | Whether the dropdown is currently open. |\n| open | () =void | — | Opens the dropdown. |\n| toggle | () =void | — | Toggles the dropdown open state. |\nRange with start and end times\nFor range selection, the footer can render two independent TimePicker controls for start and end times while the trigger displays the final combined value. The examples use the existing 24-hour TimePicker; AM/PM is currently not part of the default UIKIT time input.\nRange with start and end times\n\nYou picked: 03.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 April 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 April 2026 Mo Tu We Th Fr Sa Su\n\n30 31 1 2 3 4 5\n6 7 8 9 10 11 12\n13 14 15 16 17 18 19\n20 21 22 23 24 25 26\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n\nYou picked: No date selected\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nCalendar sizes\nUse size to adjust the density of the day grid. The size variant changes the spacing and dimensions of the day cells themselves.\nSmall\nJanuary February March April May June July August September October November December April 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 April 2026 Mo Tu We Th Fr Sa Su\n\n30 31 1 2 3 4 5\n6 7 8 9 10 11 12\n13 14 15 16 17 18 19\n20 21 22 23 24 25 26\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n\nMedium (default)\nJanuary February March April May June July August September October November December April 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 April 2026 Mo Tu We Th Fr Sa Su\n\n30 31 1 2 3 4 5\n6 7 8 9 10 11 12\n13 14 15 16 17 18 19\n20 21 22 23 24 25 26\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n\nLarge\nJanuary February March April May June July August September October November December April 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 April 2026 Mo Tu We Th Fr Sa Su\n\n30 31 1 2 3 4 5\n6 7 8 9 10 11 12\n13 14 15 16 17 18 19\n20 21 22 23 24 25 26\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nRange selection\nRange mode keeps a two-step selection flow, can show two months at once, and can optionally be constrained to a specific month interval.\nDate ranges\nJanuary February March April May June July August September October November December March 2015 2015 March 2015\n\nMo Tu We Th Fr Sa Su\n\n23 24 25 26 27 28 1\n2 3 4 5 6 7 8\n9 10 11 12 13 14 15\n16 17 18 19 20 21 22\n23 24 25 26 27 28 29\n30 31 1 2 3 4 5\n\nJanuary February March April May June July August September October November December April 2015 2015 April 2015 Mo Tu We Th Fr Sa Su\n\n30 31 1 2 3 4 5\n6 7 8 9 10 11 12\n13 14 15 16 17 18 19\n20 21 22 23 24 25 26\n27 28 29 30\n\nYou picked: No range selected\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nCalendar in a dialog\nThe calendar wrapper also works well inside larger dialog layouts, where the selection is combined with additional form controls and only committed on apply.\nOpen event calendar dialog Scheduled delivery slot: 15.04.2026 09:00 - 21.04.2026 09:00\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nMultiple selection\nMultiple mode is useful for scenarios like booking, planning, or marking several independent dates.\nMultiple dates\nJanuary February March April May June July August September October November December April 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 April 2026 Mo Tu We Th Fr Sa Su\n\n30 31 1 2 3 4 5\n6 7 8 9 10 11 12\n13 14 15 16 17 18 19\n20 21 22 23 24 25 26\n27 28 29 30 1 2 3\n4 5 6 7 8 9 10\n\nYou picked: 27/04/2026\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nModifiers and custom marked days\nModifiers let you attach domain-specific meaning like booked or available dates and style them separately.\nSingle date with modifiers\nJanuary February March April May June July August September October November December June 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2024 June 2024 Mo Tu We Th Fr Sa Su\n\n27 28 29 30 31 1 2\n3 4 5 6 7 8 9\n10 11 12 13 14 15 16\n17 18 19 20 21 22 23\n24 25 26 27 28 29 30\n1 2 3 4 5 6 7\n\nYou picked: No date selected\nTry to pick a booked day.\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nReserved days\nReserved days can be modeled with disabledDays plus custom modifiers and CSS classes from the outside.\nReserved days\nJanuary February March April May June July August September October November December March 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 March 2026 Mo Tu We Th Fr Sa Su\n\n23 24 25 26 27 28 1\n2 3 4 5 6 7 8\n9 10 11 12 13 14 15\n16 17 18 19 20 21 22\n23 24 25 26 27 28 29\n30 31 1 2 3 4 5\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nHidden days\nHidden days are not rendered at all, which is useful for compact calendars that should only expose certain weekdays.\nHidden days in a month\nJanuary February March April May June July August September October November December May 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 May 2026 Mo Tu We Th Fr Sa Su\n\n1 2 3\n4 5 6 7 8 9\n12 13 14 15 16 17\n18 19 21 22 23 24\n25 26 27 28 29 30 31\n\nYou picked: No date selected\nHidden: 10/05/2026, 11/05/2026, 20/05/2026\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nMarker dots\nMarker dots can be rendered with custom day content to visualize additional events or statuses per day.\nMarker dots\nJanuary February March April May June July August September October November December March 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 March 2026 Mo Tu We Th Fr Sa Su\n\n23 24 25 26 27 28 1\n2 3 4 5 6 7 8\n9 10 11 12 13 14 15\n16 17 18 19 20 21 22\n23 24 25 26 27 28 29\n30 31 1 2 3 4 5\n\nLogistics events\nSelect a day to inspect planned logistics events.\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |\nCustom day icons\nUse renderDayContent to render optional React nodes inside specific day cells, for example custom icons or tooltip anchors.\nCustom day content\nJanuary February March April May June July August September October November December March 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2026 March 2026 Mo Tu We Th Fr Sa Su\n\n23 24 25 26 27 28 1\n2 3 4 5 6 7 8\n9 10 11 12 13 14 15\n16 17 18 19 20 21 22\n23 24 25 26 27 28 29\n30 31 1 2 3 4 5\n### CommonCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| locale | string | 'en-GB' | Locale used for calendar labels and default input formatting. |\n| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Optional size variant for the rendered calendar density. Changes the size and spacing of the individual day cells instead of the outer wrapper. |\n| className | string | — | Additional classes for the calendar root element. |\n| numberOfMonths | 1 \\| 2 | 1 | Number of visible calendar months. |\n| showOutsideDays | boolean | true | Shows the days from adjacent months inside the current month grid. |\n| fixedWeeks | boolean | true | Keeps the calendar height stable by always rendering full weeks. |\n| showWeekNumber | boolean | false | Shows the calendar week number column. |\n| weekStartsOn | 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | — | Overrides the first day of the week. 0 is Sunday, 1 is Monday, up to 6 for Saturday. |\n| defaultMonth | Date | — | Initial month shown when the calendar is first rendered. |\n| month | Date | — | Controlled currently visible month. |\n| onMonthChange | (month: Date) =void | — | Called when the visible month changes. |\n| startMonth | Date | — | Lower month boundary for month navigation. |\n| endMonth | Date | — | Upper month boundary for month navigation. |\n| disabledDays | DayPickerDisabledDays | — | Days that cannot be selected. |\n| hiddenDays | DayPickerHiddenDays | — | Days that should not be rendered in the calendar grid. |\n| modifiers | DayPickerCustomModifiers | — | Custom day modifiers forwarded to the underlying calendar. |\n| modifiersClassNames | Record<string, string| — | Additional CSS classes attached to custom modifiers. |\n| renderDayContent | (date: Date, modifiers: Modifiers) =ReactNode | — | Renders optional custom content inside a day cell. Useful for icons, dots, tooltips or other domain-specific markers. |\n### SingleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'single' | 'single' | Enables single-date selection. |\n| value | Date | — | Controlled single selected date. |\n| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |\n| onChange | (value: Date \\| undefined, modifiers: Modifiers) =void | — | Called when the selected date changes. |\n### MultipleDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'multiple' | — | Enables multiple independent date selection. |\n| value | Date[] | — | Controlled list of selected dates. |\n| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |\n| onChange | (value: Date[] \\| undefined, modifiers: Modifiers) =void | — | Called when the selected dates change. |\n### RangeDayPickerCalendar props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| mode | 'range' | — | Enables date-range selection. |\n| value | DateRange | — | Controlled selected date range. |\n| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |\n| onChange | (value: DateRange \\| undefined, modifiers: Modifiers) =void | — | Called when the selected range changes. |\n| selectionVariant | 'default' \\| 'week' \\| 'month' \\| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |\n| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |",
+    "searchText": "DayPickerCalendar\nDayPickerCalendar is the lower-level calendar wrapper without input or dropdown. Use it when you only need calendar selection or when you want to build your own shell around it.\nDayPickerCalendar\nIt keeps the public API small while still supporting custom selection variants, hidden and disabled days, custom modifiers, and injected day content.\nSingle selection\nThe calendar wrapper exposes the supported selection modes without coupling consumers to the rawreact-day-picker component API.\nSingle date\nJanuary February March April May June July August September October November December 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 Consectetur tortor pharetra massa, et amet, pharetra massa, sit vel\n\n2 Eget in, vitae dui In purus in In\nLorem\nLorem dolor Interdum Integer purus\n\n3 Tortor orci et adipiscing pretium\n\n4 Est et est finibus ac enim semper. massa\n\n5 Viverra fames\nLorem efficitur efficitur amet, pretium eget pharetra metus in amet,\n\n6 Ipsum neque. eget ac in libero in faucibus. orci, sagittis velit. ac ipsum vitae\n\n7 Elementum vitae semper. eget ut aliquam ante in aliquam posuere ac vel aliquam\n\n8 Molestie sagittis metus pretium malesuada ac\n\n9 Semper. semper massa, consectetur massa, libero amet, efficitur consectetur Vivamus elit.\n\n10 Finibus amet, molestie eget efficitur et purus In fringilla Fusce\n\n11 Vivamus amet, viverra elementum dui ante condimentum sit ac fringilla elementum ante In ipsum\n\n12 In consectetur Mauris quis, pretium ligula est Fusce efficitur ac fames Vivamus metus pharetra ante\n\n13 Ut massa, massa tincidunt. efficitur consectetur malesuada\n\n14 Massa, est viverra ante neque. semper. ac Mauris sem.\n\n15 Viverra purus velit. ac Interdum efficitur\n\n16 Malesuada lorem primis rutrum dui dui ut adipiscing\n\n17 Malesuada sagittis purus semper rutrum\n\n18 Pharetra nec purus Mauris ac\n\n19 Viverra pretium metus ac viverra bibendum, molestie ante in condimentum quis, metus metus\n\n20 Efficitur hendrerit libero quis, et aliquam bibendum, rutrum primis scelerisque malesuada elit. condimentum et consectetur\n\n21 Duis lorem pharetra Integer enim massa, Ut massa eget semper Sed\nLorem\n\n22 Viverra et Fusce velit. ac\n\n23 Orci, purus est fames elit. efficitur ipsum\n\n24 Condimentum adipiscing et In tincidunt. dolor molestie iaculis. vitae ac metus ipsum Sed libero nunc\n\n25 Et tincidunt. ac Vivamus neque. neque. condimentum consectetur ligula\n\n26 Vel consectetur ante orci, efficitur massa, vel neque. efficitur adipiscing in dolor efficitur fames aliquam\n\n27 Fames purus eget faucibus. ac ligula ante Integer Interdum semper Interdum\n\n28 Fusce viverra ipsum Mauris massa In pretium primis vel Integer lorem et efficitur\n\n29 Purus bibendum, primis efficitur enim et eget posuere et velit. lorem elit. ac\n\n30 Dolor malesuada ligula ac sagittis felis. pharetra Vivamus fringilla faucibus. nec eget in,\n\n31 Ante scelerisque In\nLorem massa, efficitur ac Ut in In\nLorem\n\n32 Tincidunt. in eget velit. pretium est pharetra orci, tincidunt. nec bibendum, iaculis. metus volutpat In\n\n33 Enim aliquam ac pharetra amet, primis fames primis faucibus. ipsum Sed Integer hendrerit\n\n34 Iaculis. efficitur tincidunt. amet, Integer ac ut ac enim ac rutrum massa\n\n35 Nunc tincidunt. malesuada finibus metus libero\n\n36 Ante hendrerit iaculis. efficitur dolor ut neque. orci\n\n37 Ut eget in, quis, sit ipsum orci, adipiscing in,\n\n38 Consectetur ac felis. Ut fringilla pharetra ipsum aliquam consectetur aliquam ac est tortor\n\n39 Efficitur Sed Mauris ac libero pharetra et fringilla ac in semper hendrerit Integer pretium\n\n40 In ut elementum sit tortor purus iaculis. Integer fringilla ipsum finibus orci, ante In\n\n41 Et sem. purus volutpat massa efficitur\n\n42 Ipsum iaculis. orci, elementum ac primis primis consectetur volutpat ut\n\n43 Libero Duis\nLorem in posuere ligula ut nunc Interdum tortor elit. vitae orci,\n\n44 Eget lorem massa, condimentum ante consectetur est in sagittis vitae viverra\n\n45 Vitae finibus in, Duis elementum\n\n46 Tincidunt. Integer quis, elit. Integer vel pretium finibus orci fames ac eget ante molestie Mauris\n\n47 Bibendum, ut massa et sagittis Ut orci consectetur Mauris semper ac metus ut\n\n48 Integer nec in massa in nec sit\n\n49 Consectetur lorem massa elementum in eget nunc in, condimentum metus in\n\n50 Ac sagittis pharetra eget enim elit.\nLorem faucibus. semper. in tincidunt. in, nunc semper\n\n51 Faucibus. ante vitae Mauris lorem ut velit. tortor nec velit. consectetur efficitur fringilla elit. semper\n\n52 Massa quis, in nec adipiscing ante et elementum faucibus.\n\n53 Faucibus. Sed in semper. aliquam Vivamus sit\n\n54 Ante nunc fames ligula massa, elementum in in Fusce efficitur nunc\n\n55 Et libero neque. nec eget condimentum ipsum lorem\n\n56 Nunc in, lorem efficitur semper. pretium sagittis Mauris Duis scelerisque Ut consectetur\n\n57 Ipsum sit dolor neque. dui in\n\n58 Molestie ac pretium orci sit dui finibus amet, metus\n\n59 Ante Mauris ut in, scelerisque ut dui\n\n60 Dolor eget enim ut malesuada efficitur semper Sed volutpat semper. ipsum efficitur condimentum eget\n\n61 Neque. vel tortor elit. neque. eget Integer Fusce\n\n62 Amet, ut bibendum, quis, sem. molestie molestie tortor nunc in viverra vitae\n\n63 Ipsum neque. felis. ante ante pretium neque. tincidunt. efficitur massa,\n\n64 In, adipiscing rutrum fames ut in eget ac nunc neque. in, Duis in Interdum\n\n65 Efficitur lorem posuere ut primis Duis viverra scelerisque hendrerit\n\n66 Viverra tincidunt. ut ac efficitur Mauris sagittis tortor sit semper.\n\n67 Enim Ut elit. vitae nunc In scelerisque et Sed elementum Fusce ut eget amet,\n\n68 Malesuada hendrerit tincidunt. amet, massa, bibendum, Mauris dolor et in\n\n69 Felis. Interdum orci ante pretium elit. et orci eget felis. ante sem.\n\n70 Vivamus lorem neque. posuere consectetur et elit. primis lorem viverra condimentum massa libero\n\n71 Ac ac in elementum rutrum orci, Integer in vel pharetra enim in dolor neque.\n\n72 Nec quis, ac sit Sed\n\n73 Massa Vivamus tincidunt. vitae sem.\n\n74 Duis libero aliquam ante libero ac in, Integer volutpat purus orci eget ut\n\n75 Ac posuere\nLorem Interdum Vivamus sagittis faucibus. massa, Fusce massa,\n\n76 In sem. pharetra in dolor vitae ac primis condimentum dolor\nLorem elit. Interdum tortor viverra\n\n77 Malesuada nunc dolor Sed felis. rutrum et tincidunt. in, nunc felis. ac nunc Ut\n\n78 In lorem ante pretium elementum\n\n79 In, orci Vivamus eget malesuada Sed est viverra\n\n80 Fusce tortor Duis enim et ac in in, Interdum Fusce iaculis.\n\n81 Fusce dolor pharetra elementum sagittis faucibus. hendrerit aliquam purus condimentum pretium\n\n82 Adipiscing elit. nunc massa, adipiscing In elementum scelerisque condimentum ac ipsum ante ante aliquam efficitur\n\n83 Fringilla ac dolor scelerisque fringilla semper\n\n84 Aliquam neque. orci, orci ac scelerisque eget primis quis, metus\n\n85 Ac elit. vel rutrum ipsum fringilla Interdum hendrerit scelerisque\n\n86 In, ac adipiscing semper finibus\n\n87 Sed Vivamus hendrerit tortor sagittis purus neque. massa\n\n88 Ipsum sem. quis, tincidunt. in,\n\n89 Tincidunt. lorem enim viverra metus eget eget primis et ac\n\n90 Orci, purus semper. iaculis. orci in rutrum\n\n91 Massa, velit. eget Integer metus felis. volutpat ante elit. vel fames purus\n\n92 Sagittis eget libero aliquam eget sem. in eget enim elit. fringilla finibus velit. in,\n\n93 Faucibus. volutpat primis consectetur ipsum ac purus Integer Duis aliquam aliquam\n\n94 Orci, neque. pharetra orci, et quis, sit tortor eget ac quis,\n\n95 Semper. metus et Fusce iaculis. et efficitur massa,\n\n96 Lorem consectetur sagittis tortor tincidunt. elit.\nLorem in\n\n97 Efficitur rutrum posuere efficitur neque. amet, nec viverra\n\n98 Viverra ipsum Interdum eget fringilla\n\n99 Et ut velit. Interdum ac finibus fames semper ut vitae Integer\n\n100 Vivamus scelerisque condimentum eget orci sagittis tincidunt. Integer\n\n101 Ac ante hendrerit ante Fusce enim neque. ac viverra molestie massa,\n\n102 Vitae eget faucibus. ut et\n\n103 Sem. adipiscing ipsum metus et amet, in condimentum orci, in velit. semper ipsum\n\n104 Ut dolor libero est purus sagittis massa, sem. vitae in efficitur Vivamus iaculis.\n\n105 Est velit. eget ante faucibus. fringilla nunc\n\n106 Pharetra et posuere vitae in faucibus. vitae adipiscing sem. pretium sem. efficitur et\n\n107 Consectetur viverra purus pharetra dui elit. Vivamus Ut\n\n108 Ante neque. semper. ligula neque. dui fringilla consectetur\n\n109 Sem. nec aliquam\nLorem fringilla ut ut metus ipsum in libero\n\n110 Ac sagittis libero efficitur velit. lorem ac nunc Integer in metus posuere\n\n111 Scelerisque pharetra neque. vitae ante vel aliquam Mauris Interdum Fusce eget Ut enim ipsum vel\n\n112 Felis. massa felis. In\nLorem massa, semper. sit\nLorem bibendum, ac lorem velit. eget\n\n113 Ac quis, lorem Sed rutrum ac in volutpat elementum libero In\n\n114 Purus ligula efficitur Ut in, et Ut\n\n115 Sed condimentum ante aliquam efficitur in ac pretium\n\n116 Velit. purus et elit. molestie ligula elit. finibus Ut\n\n117 Aliquam orci, lorem viverra hendrerit vel ipsum ac Mauris orci dolor tortor\n\n118 In ac neque. tortor finibus lorem consectetur ipsum iaculis. libero\n\n119 Quis, eget adipiscing elementum Interdum sem. semper. fringilla efficitur Sed libero elit.\n\n120 Duis pharetra elit. in condimentum semper. consectetur ligula\n\n121 Nec pretium metus ipsum ante ut massa, rutrum efficitur\n\n122 Massa sit massa, vitae amet, eget vitae consectetur iaculis. quis, tincidunt. iaculis.\n\n123 Elit.\nLorem efficitur eget Duis est semper ut efficitur enim et ante ac ut\n\n124 Ut Fusce adipiscing ac eget nec\n\n125 Dui in tortor vel ut elit. consectetur metus orci in,\n\n126 Et quis, amet, ac purus molestie eget velit.\n\n127 Est purus semper Interdum finibus vel ligula condimentum velit. fames\n\n128 Nec consectetur pretium nec ut lorem elit.\nLorem bibendum, Sed Integer consectetur sem.\n\n129 Finibus in\nLorem purus ut pretium aliquam\n\n130 Et Duis ac ligula In primis dolor bibendum, volutpat elit. lorem fringilla est condimentum In\n\n131 Lorem consectetur\nLorem et pharetra Duis aliquam ante\n\n132 Hendrerit iaculis. est scelerisque\nLorem efficitur tortor Sed\n\n133 Volutpat Sed pharetra malesuada nec\n\n134 In semper dolor ac vitae aliquam dui Fusce ac ipsum in vel\n\n135 Est enim dolor libero in ac vitae efficitur Integer vitae posuere ipsum sagittis\n\n136 Neque. et sem. pretium in Fusce\n\n137 Pretium ut eget adipiscing et ac Interdum felis. Vivamus hendrerit efficitur semper.\n\n138 Interdum pretium semper semper. in viverra elit. elit. In\n\n139 Scelerisque nec ante in, hendrerit malesuada ligula ante ante\n\n140 Amet, sem. et dui in ac efficitur orci, condimentum ac sit Vivamus in velit.\n\n141 Bibendum, faucibus. libero condimentum massa libero Fusce sit ac in ut\n\n142 Fames primis efficitur condimentum et eget felis. primis Mauris pharetra ipsum\n\n143 Ipsum ipsum volutpat et ut in, hendrerit\n\n144 In elit. orci in tincidunt. vel orci, nunc consectetur malesuada dui neque. et\n\n145 Primis eget primis nunc orci,\n\n146 Semper. volutpat orci, est sem. semper ligula et et in, et\nLorem malesuada est\n\n147 Enim ante vel adipiscing aliquam ut Duis semper efficitur ut nunc est ut enim ac\n\n148 Ac viverra et orci massa efficitur hendrerit ligula Ut libero efficitur ac ipsum\n\n149 Fames Interdum ac ante et iaculis. pretium velit. malesuada fames\n\n150 Et eget aliquam Ut nec molestie ac Interdum\n\n151 Scelerisque in quis, aliquam felis. iaculis. iaculis. libero vel posuere hendrerit efficitur malesuada\n\n152 Interdum posuere in dui massa sem. ante posuere\n\n153 Elementum ipsum semper consectetur In viverra In Interdum in\n\n154 Pharetra rutrum semper. in efficitur\n\n155 Efficitur finibus vel in, hendrerit rutrum condimentum\n\n156 Primis nec rutrum tortor ante Fusce\n\n157 Ipsum et sit molestie dolor sem.\nLorem\n\n158 Consectetur iaculis. in purus lorem consectetur dui fames est Duis elit. Duis dolor orci aliquam\n\n159 Viverra sem. efficitur pretium volutpat nec\n\n160 Fringilla ante ac semper vel\n\n161 Eget semper sit ut rutrum vel vitae sagittis enim in enim nec semper\n\n162 Ac tincidunt. efficitur est Vivamus vitae in ut iaculis. condimentum massa\n\n163 Ut posuere vel finibus ante Mauris semper. eget lorem vel\n\n164 Velit. efficitur Integer tortor massa posuere ipsum ac Vivamus rutrum nunc tincidunt. Sed velit. aliquam\n\n165 Ac consectetur consectetur ac nunc efficitur malesuada Fusce consectetur pharetra\n\n166 Est elit. faucibus. dolor dolor\n\n167 Nec tortor in, est ligula efficitur\nLorem ipsum Mauris semper Sed Ut viverra\n\n168 Massa, consectetur scelerisque vitae bibendum, hendrerit amet, aliquam massa ac felis. tincidunt. Sed\n\n169 In eget aliquam eget Sed\n\n170 Dui felis. Interdum sit orci semper. consectetur tincidunt. dolor ut pretium fringilla\n\n171 Ligula volutpat aliquam ac tincidunt.\n\n172 Massa, iaculis. neque. orci finibus\n\n173 Amet, finibus ante et sagittis sit pretium lorem Duis\n\n174 Sem. ac viverra purus ac in, nec nunc Ut semper ante purus metus posuere\n\n175 In, in in, semper. semper. purus Fusce in,\n\n176 Ac sem. primis aliquam purus in tincidunt. scelerisque efficitur vitae malesuada condimentum orci ante\n\n177 Viverra semper. efficitur Duis primis faucibus. vitae consectetur molestie Interdum nunc\n\n178 Elementum fames ut Fusce adipiscing hendrerit lorem in hendrerit massa,\n\n179 Sit est ac Vivamus massa dui ac dolor finibus sagittis Ut est orci, eget consectetur\n\n180 Finibus\nLorem nunc finibus scelerisque elit. sagittis dui orci Fusce aliquam volutpat vitae nunc efficitur\n\n181 Interdum bibendum, ligula semper. Interdum posuere felis.\n\n182 Consectetur est sagittis massa massa, In semper tincidunt. Duis\n\n183 In Interdum nec consectetur neque. dui pretium condimentum\n\n184 Et ac amet, ac eget efficitur et eget orci Ut ac consectetur sem.\n\n185 Lorem sit malesuada elit. nec elit. condimentum volutpat primis ante efficitur orci Interdum est\n\n186 Viverra in, elit. Sed ante pharetra\nLorem ut eget rutrum purus In scelerisque\n\n187 Fusce in\nLorem condimentum est semper ac ac velit. viverra dui In ut\n\n188 Molestie rutrum ac felis. faucibus. amet, condimentum aliquam neque. et rutrum massa malesuada in,\n\n189 Semper fames aliquam iaculis. ante finibus In massa, neque.\n\n190 In amet, ligula ac in Vivamus Fusce Interdum fringilla vitae Vivamus bibendum, viverra iaculis. semper.\n\n191 Semper. hendrerit primis et metus massa, ac\n\n192 Posuere viverra vitae rutrum eget finibus in ac enim Integer massa\n\n193 Elit. hendrerit tortor in, molestie Ut volutpat fames dui ut sagittis viverra\n\n194 Ac tortor elit. ut vitae ligula metus massa felis. efficitur bibendum, aliquam\nLorem quis, semper.\n\n195 Fames massa, in felis. sem. dolor semper\n\n196 Volutpat\nLorem Duis hendrerit in quis,\nLorem vel\n\n197 Elementum eget orci, malesuada libero felis.\n\n198 Et condimentum tincidunt. velit. In pharetra\n\n199 Iaculis. Interdum tincidunt.\nLorem Sed Mauris faucibus. nunc\n\n200 Efficitur et elit. neque. semper tortor Fusce\n\n201 Integer ut volutpat vitae elit. ac elit. Vivamus Sed semper. amet,\n\n202 Viverra In tortor pharetra felis. molestie\n\n203 Ut massa, velit. in, lorem in, posuere sit fames posuere posuere ac ante in scelerisque\n\n204 Nunc elit. dui orci Integer amet, ipsum Integer metus\n\n205 Ut et faucibus. purus ante ut ut ut\n\n206 Et nec ante consectetur ante Sed ante metus eget\n\n207 Ligula elit. Duis efficitur Mauris\n\n208 Eget finibus elit. ante metus ut posuere felis. neque. purus malesuada\n\n209 Tincidunt. Fusce Duis aliquam consectetur quis, ipsum bibendum, consectetur elit. orci neque. eget in\n\n210 Fringilla malesuada faucibus. est est elit. ligula\n\n211 Fusce sem. eget ac vitae neque. consectetur In in\nLorem\n\n212 Consectetur et in iaculis. vitae sem. volutpat fringilla efficitur ac efficitur iaculis. consectetur\n\n213 Consectetur sem. libero in tortor finibus condimentum et pretium hendrerit Integer viverra\n\n214 Adipiscing Fusce primis fringilla amet, et Mauris finibus ligula\n\n215 Ante nunc sit efficitur semper. massa, Fusce In condimentum semper. tincidunt.\n\n216 Tortor amet, molestie semper. ut viverra volutpat Ut sem. fames ligula ut efficitur aliquam\n\n217 Elementum iaculis. ac sagittis molestie orci ante ut ipsum lorem orci, in, Duis ac scelerisque\n\n218 Eget metus Interdum Integer enim molestie In\n\n219 Semper. elementum est felis. ligula\n\n220 Sit ipsum aliquam In faucibus. ac elementum aliquam velit. in vitae nec ut\n\n221 Ac volutpat fringilla finibus fames molestie orci in Interdum elit. primis finibus malesuada faucibus. sem.\n\n222 Orci, iaculis. elementum orci Mauris efficitur ut ac enim\n\n223 Mauris finibus Sed amet, enim\n\n224 In\nLorem amet, ac vel lorem ante Fusce lorem eget\n\n225 Aliquam ante sem. velit. efficitur\n\n226 Tortor condimentum massa Vivamus ut metus sagittis in, scelerisque\n\n227 Aliquam ac nunc Interdum ac sit tortor nec lorem elit. ipsum\n\n228 Eget ligula amet, ipsum est in orci dolor Ut efficitur ut eget in Sed bibendum,\n\n229 Efficitur faucibus. condimentum Fusce volutpat sit purus quis, in, libero velit. bibendum, et est\n\n230 Vivamus Mauris Interdum in scelerisque In amet, vel\nLorem tincidunt.\n\n231 Posuere rutrum molestie orci, pharetra in elementum efficitur pharetra\n\n232 Integer Ut in, et dui neque. iaculis. neque. orci enim\n\n233 Nec ut neque. in et adipiscing\n\n234 In ligula Interdum Interdum vitae velit. vel hendrerit purus malesuada vel\n\n235 Ipsum in est massa, eget Duis purus nunc massa\n\n236 Et nunc Vivamus scelerisque enim eget Duis viverra in libero dolor\n\n237 Iaculis. neque. purus lorem in massa lorem Vivamus molestie finibus ante Ut In ut scelerisque\n\n238 Orci, in, fringilla purus ipsum\n\n239 Et sit nec efficitur Ut eget Ut\n\n240 In neque. Fusce molestie et efficitur consectetur ipsum sit tincidunt. Vivamus\n\n241 Hendrerit dui consectetur nunc elementum viverra ut dui\n\n242 Dui sagittis aliquam hendrerit Integer ipsum rutrum amet, eget Vivamus\n\n243 Amet, ante enim sit vel sagittis ut est est semper massa Mauris purus malesuada\n\n244 Orci massa, felis. ac eget bibendum, amet, ac dui nunc\n\n245 Vitae faucibus. vitae Fusce fames posuere\n\n246 Et ante in vel Integer Interdum Ut\n\n247 Ante pretium faucibus. amet, hendrerit eget dolor in ac dolor amet, ac ac fringilla\n\n248 Consectetur sagittis sem. ac Sed\n\n249 Et elit. malesuada neque. libero scelerisque rutrum consectetur in, elit. ac\n\n250 Primis fringilla et in, lorem In vel pretium\n\n251 Mauris in, finibus vitae viverra condimentum metus neque. est malesuada purus\n\n252 Finibus bibendum, ipsum viverra massa,\nLorem ante quis, elementum ipsum in\n\n253 Pretium sit libero ac vel orci sagittis felis. condimentum vitae pharetra enim pretium\n\n254 Pretium adipiscing Sed neque. est libero vel semper. vel ipsum et semper in in ipsum\n\n255 Ut efficitur in, Ut neque. ac orci\n\n256 Orci, finibus Vivamus sit dui in vitae bibendum, vel\n\n257 Ut ligula primis vel Interdum est ante metus Integer et elementum semper. ligula\n\n258 Duis semper pharetra massa, ac neque. amet, velit. est pharetra nunc vitae ut et\n\n259 Malesuada quis, ac efficitur Vivamus viverra purus Vivamus\n\n260 Molestie enim vel ac posuere est hendrerit consectetur bibendum, neque. massa\n\n261\nLorem dui condimentum purus ligula elementum nec Interdum Mauris fames primis elit. Vivamus\n\n262 Ut efficitur velit. Sed elit. ac consectetur fringilla Mauris lorem\n\n263 Eget lorem ante vitae scelerisque quis, faucibus. efficitur Mauris pretium et orci In orci orci\n\n264 Ut elit. semper amet, in ac Vivamus tincidunt. Vivamus Ut\n\n265 Ac vel tortor posuere Sed amet,\n\n266 Ante in nunc eget et Integer scelerisque\n\n267 Dolor orci Fusce eget ante iaculis. elementum viverra primis ipsum efficitur scelerisque condimentum\n\n268 Orci volutpat pretium elementum sagittis in ac ligula Ut felis. sem. et ante elit. molestie\n\n269 Ut est sagittis sagittis ipsum\n\n270 Viverra in Fusce Integer volutpat et\n\n271 Ac ipsum eget dolor condimentum sagittis nunc tortor\n\n272 Efficitur massa, est eget Vivamus ante ut efficitur semper.\n\n273 Sagittis Vivamus vitae ut ipsum Ut eget orci, elit. et eget\n\n274 Neque. ac condimentum massa, massa ipsum ac sem. nec elit. consectetur\n\n275 Ipsum elit. libero est ac molestie\n\n276 In finibus tincidunt. iaculis. in, ut massa fringilla et tincidunt. elementum felis. ut eget\n\n277 Ligula in enim velit. molestie purus\n\n278 Enim semper viverra orci, hendrerit ut primis purus eget tincidunt. ipsum quis,\n\n279 Aliquam in Fusce Sed consectetur viverra ipsum libero tincidunt. semper dui fringilla sem.\n\n280 Tortor sit massa elit. efficitur nunc rutrum ipsum bibendum, volutpat ut fames nec adipiscing\n\n281 Ante nunc rutrum elementum adipiscing volutpat sit tortor elit.\n\n282 Malesuada vitae orci, malesuada elit. ut\n\n283 Amet, semper libero ac Sed bibendum, finibus eget amet, quis, iaculis. dui\n\n284 Felis. ut ipsum dui volutpat\n\n285 Ante aliquam lorem ac Ut sem. primis nunc et Mauris ipsum rutrum nec sem.\n\n286 Faucibus. elit. sagittis nunc ac elementum eget fringilla ac consectetur purus elit. in Vivamus Integer\n\n287 Malesuada neque. est est viverra dui semper ut ipsum primis tincidunt.\n\n288 Consectetur nec ut efficitur iaculis.\n\n289 In sit scelerisque orci, ac et consectetur et\n\n290 Nec sagittis dui molestie tortor efficitur vel et felis. Duis massa et\n\n291 In bibendum, scelerisque velit. amet, ac Interdum lorem ac est ac sit\n\n292 Ante ac semper. elit. lorem ac purus in elit.\n\n293 Amet, hendrerit amet, ante nunc semper consectetur finibus orci efficitur in ligula efficitur neque.\n\n294 Ac adipiscing elementum adipiscing pharetra et enim ante in consectetur lorem primis in volutpat\n\n295 Interdum rutrum efficitur eget fringilla\n\n296 Neque. ut ac dolor in semper. posuere aliquam rutrum quis, volutpat elementum sem. In\n\n297 Elementum fames tincidunt. felis. ipsum hendrerit in primis ante nec molestie ac sit rutrum\n\n298 Eget velit. tincidunt. et fringilla tincidunt. et in ac pharetra elementum in\n\n299 Ac orci elit. ante ipsum\n\n300 In malesuada Fusce neque. posuere\n\n301 Est ac\nLorem fringilla ante pharetra purus efficitur purus velit. orci, metus in volutpat quis,\n\n302 Fringilla Vivamus molestie aliquam ligula condimentum lorem eget eget eget adipiscing ac ante in pretium\n\n303 Faucibus. massa Fusce ipsum ipsum purus Duis\n\n304 Posuere vitae aliquam tincidunt.\nLorem bibendum, eget dolor sem. lorem elit. dolor semper. primis\n\n305 Ac ipsum velit. orci, ligula Sed\n\n306 Tortor posuere consectetur hendrerit tortor malesuada eget orci, adipiscing elit. pharetra Fusce\n\n307 Lorem dolor ipsum ac ac finibus bibendum, felis. consectetur bibendum, Duis neque. Sed in efficitur\n\n308 Est finibus Vivamus finibus in primis elit. malesuada orci, eget\n\n309 Elementum ut dui Interdum enim Mauris ligula\n\n310 Ac in elit. ante iaculis. libero semper vitae bibendum,\n\n311 Viverra quis, molestie consectetur ante nunc semper\n\n312 Rutrum dui purus primis sem.\n\n313 Semper libero condimentum orci, sagittis massa, et viverra Integer scelerisque ut Interdum efficitur Integer\n\n314 Pharetra primis viverra Duis scelerisque iaculis. et vel in ante scelerisque scelerisque ipsum\n\n315\nLorem viverra et Vivamus vitae velit. faucibus. orci tortor tincidunt. nec\n\n316 In ac sem. est libero Sed ante metus volutpat posuere libero ante\n\n317 Faucibus. fringilla lorem Sed ipsum neque. et ut ipsum posuere\nLorem fringilla\n\n318 In, consectetur hendrerit neque. felis. elit. ac consectetur Vivamus in, pretium ac\n\n319 Vivamus elit. in, finibus Mauris tincidunt. ante orci, est ante Fusce ante ac elementum Duis\n\n320 Elementum scelerisque efficitur ut rutrum ac ante lorem vel\n\n321 Elit. velit. nunc\nLorem ac\n\n322 Ante ac ac ipsum sit dui ipsum orci, vel fringilla rutrum Fusce\n\n323 Orci, amet, finibus ut ante ante pretium ac efficitur dolor Mauris ut ipsum eget\nLorem\n\n324 Et ligula ut condimentum sagittis Integer enim primis rutrum\n\n325 Pharetra ligula scelerisque ante consectetur et sem. massa hendrerit neque. Mauris condimentum ante\n\n326 Faucibus. massa consectetur libero et orci viverra bibendum, enim ligula sit iaculis. efficitur molestie\n\n327 Libero ligula neque. Fusce elit. Integer fames primis finibus in Integer consectetur enim amet,\n\n328 Et eget ipsum In Ut ut elit. et et fames malesuada pharetra quis,\n\n329 In viverra Fusce elementum vel ante In viverra semper et Mauris primis\n\n330 Consectetur Mauris ac Duis sem. Integer semper ac\n\n331 In semper In elit. ipsum eget sem. sagittis efficitur orci hendrerit aliquam lorem\n\n332 In libero faucibus. ac massa, massa, dui orci In metus ipsum malesuada\n\n333 Tortor nunc scelerisque aliquam volutpat hendrerit ipsum Mauris ac posuere tincidunt. metus libero amet, Interdum\n\n334 Tortor sit amet, in condimentum metus ac Integer bibendum, ac felis. eget ante tincidunt.\n\n335 Ac elit. bibendum, metus Integer sem. semper ipsum nunc ac ut condimentum ipsum felis. ut\n\n336 Purus In est felis. semper. quis, dui purus metus iaculis. scelerisque in massa\nLorem faucibus.\n\n337 Pharetra Ut sem. Duis ut ante\n\n338 Dolor purus rutrum ut primis Mauris in in eget neque. ante\n\n339 In massa, ut sit aliquam neque. ligula ante eget vitae\n\n340 Pharetra fringilla ante aliquam Vivamus Vivamus est nunc elit. neque.\n\n341 Libero vel elementum iaculis. faucibus. fames et ut\nLorem eget\nLorem metus\n\n342 Sem. ipsum nec neque. bibendum, orci,\n\n343 Ac ante nec orci orci, ac orci finibus vitae in, scelerisque in amet,\n\n344 Ac Sed nec dui neque. massa\n\n345 Ac elementum ut hendrerit Interdum quis, volutpat primis amet, ipsum\n\n346 Ante posuere et viverra ante purus ante enim vitae In ipsum tortor elit.\n\n347 Elit. condimentum Interdum tincidunt. ac condimentum malesuada\n\n348 Est volutpat neque. Fusce vitae dolor in eget\n\n349 Amet, ac ante faucibus. pretium efficitur tincidunt.\n\n350 Elit. consectetur eget ipsum\nLorem Sed sem. iaculis. Fusce ac vel rutrum pretium ipsum orci,\n\n351 Massa in fringilla volutpat eget adipiscing Duis viverra aliquam in hendrerit dolor\n\n352 Est nunc viverra scelerisque elementum viverra sem. ut nunc hendrerit finibus ante ac\n\n353\nLorem in efficitur Sed Mauris pharetra felis. viverra adipiscing\nLorem vel elit. orci lorem\n\n354 Metus elit. ac sem. felis. nec semper aliquam\n\n355 Eget ipsum purus scelerisque sagittis purus\nLorem vitae\n\n356 Ipsum metus tortor elit. est ac malesuada Fusce adipiscing volutpat amet, efficitur dui fringilla tincidunt.\n\n357 Ipsum Ut vel vel metus lorem posuere in elementum ac volutpat viverra primis orci, posuere\n\n358 Fringilla velit. et elementum malesuada\n\n359\nLorem enim in, massa, In dolor et ac posuere elit. elementum bibendum, ligula\n\n360 Ante ac posuere elementum massa elit. ac\n\n361 Bibendum, purus ipsum orci, in, eget condimentum orci, nunc aliquam\n\n362 Fames ante molestie Integer dui\n\n363 Enim In Duis bibendum, pharetra Integer enim in\n\n364 Pharetra consectetur est ut elit. In elementum semper In adipiscing elit. Fusce elit. pretium Fusce\n\n365 Velit. vitae fames finibus massa viverra Interdum aliquam\n\n366 Sit felis. ante est rutrum\n\n367 Primis semper orci, orci, volutpat purus\n\n368 Felis. adipiscing nec vitae ante dolor ipsum velit. et adipiscing faucibus. Interdum\n\n369 Tincidunt. semper. ac bibendum, sem. eget dolor sagittis\n\n370 Scelerisque viverra lorem primis amet, quis, adipiscing ligula posuere consectetur ipsum\n\n371 Semper consectetur efficitur Vivamus quis, ipsum ante et velit. metus\n\n372 Ligula sem. sem. adipiscing metus metus efficitur efficitur elementum sagittis\n\n373 Sem. pretium finibus metus purus scelerisque nunc viverra Integer ac faucibus. dui elementum\n\n374 Sit ipsum Sed vitae metus dolor tincidunt. in aliquam pharetra sagittis\n\n375 Libero amet, nec ut massa, eget iaculis.\n\n376 Dolor scelerisque pretium dolor molestie Integer Ut in semper viverra consectetur efficitur\n\n377 Aliquam aliquam ac in ipsum in, adipiscing pretium vel et viverra nec\n\n378 Massa viverra finibus elit. consectetur efficitur Interdum in ligula ante\n\n379 Vel semper. eget adipiscing massa malesuada\nLorem purus tortor ante primis primis purus ut\n\n380 Adipiscing lorem Vivamus rutrum scelerisque\n\n381 In elementum semper. est aliquam in hendrerit efficitur eget posuere\n\n382 Et semper consectetur ipsum libero finibus\n\n383\nLorem quis, in et rutrum Sed ante et et\n\n384 Vel nec hendrerit scelerisque nec velit.\n\n385 Fames malesuada consectetur ut sem. lorem nec in, ante Duis orci felis.\n\n386 Aliquam bibendum, Interdum dolor pretium efficitur ac\n\n387 Scelerisque Duis neque. Mauris libero Mauris massa et dolor felis. malesuada felis.\n\n388 In nec fringilla pharetra fames Interdum in Fusce vitae In ac\n\n389 Ligula in enim scelerisque et In ut\n\n390 Hendrerit semper. efficitur massa ut\n\n391 Sagittis volutpat sem. dui ut sit consectetur in neque. volutpat Mauris ipsum est\n\n392 Bibendum, ipsum dui est ipsum\n\n393 Et et semper et Ut enim nunc ante fames ut massa\n\n394 In, ante ante ipsum ac Duis ante elementum et fringilla est dolor\n\n395 Ac purus bibendum, eget Vivamus orci\n\n396 Iaculis. posuere adipiscing posuere purus\n\n397 Et et in scelerisque fames eget nunc condimentum ut fringilla rutrum ligula elementum\n\n398 Elementum orci, fringilla tincidunt. ac ut vel eget\n\n399 Fames ante et massa aliquam eget\n\n400 Dolor elit. pretium nunc consectetur ipsum\n\n401 Purus lorem ac dui semper.\n\n402 Efficitur nunc libero velit. ac eget\n\n403 Posuere elementum faucibus. felis. Interdum in fringilla hendrerit elementum\n\n404 In, nunc Ut ut Interdum nunc\n\n405 Hendrerit molestie tincidunt. ac volutpat aliquam\n\n406 Vitae eget semper. aliquam\nLorem ante fames ligula\n\n407 In amet, semper elit. iaculis. ut efficitur\n\n408 Ac massa, ut pharetra orci sem. in efficitur\n\n409 Ante ipsum orci ac ac ipsum est libero posuere vel vel iaculis. pharetra velit.\n\n410 Quis, ligula dolor in orci Interdum felis. purus orci, ac\n\n411 Vivamus efficitur fames sem. ac ante Mauris tortor ac ut in\n\n412 Pretium primis aliquam Vivamus nunc elit. Vivamus lorem ac sit molestie\n\n413 Lorem Interdum massa orci Duis ac Integer sagittis ut\n\n414 Fringilla fames eget finibus iaculis. ligula\n\n415 Purus quis, ut in fames felis. in velit. Interdum nec\nLorem molestie malesuada vitae in\n\n416 Orci, ante in libero rutrum elementum\n\n417 Eget ac amet, Interdum et massa, hendrerit elit. pretium tincidunt. efficitur vitae bibendum, quis, vitae\n\n418 Elit. ac Interdum volutpat Integer sit in posuere dolor pharetra elit. orci in viverra vitae\n\n419 Finibus Sed in ipsum nunc lorem dolor adipiscing vel efficitur et\n\n420 Fusce semper dui elit. in vitae semper vel consectetur ut nec dolor enim consectetur primis\n\n421 Molestie Duis sagittis volutpat sem. ante efficitur Duis fringilla Integer pharetra fames ante\n\n422 Bibendum, orci, posuere et ac\n\n423 Fames ac eget primis Integer aliquam\n\n424 Ac In bibendum, eget elementum purus quis, condimentum semper. malesuada aliquam\n\n425 Volutpat finibus quis, lorem ut ipsum scelerisque amet, ac\n\n426 Faucibus. ac elit. fringilla condimentum\n\n427 Integer massa, elit. in, efficitur elit. Sed\n\n428 Iaculis. nec quis, in molestie eget elit. sit\n\n429 Et fringilla velit. elit. tortor malesuada elementum Sed orci molestie ut in\n\n430 Ac elementum molestie faucibus. ipsum Integer semper. Interdum tortor consectetur in, Fusce ante faucibus. Fusce\n\n431 Lorem vel amet, iaculis. ipsum dolor fames\n\n432 Integer metus semper ipsum dui purus et ligula orci Fusce orci,\n\n433 Efficitur Sed fames ante orci, quis, ante sem. Sed in\n\n434 In Interdum hendrerit Ut efficitur\n\n435 Vivamus volutpat ac libero vitae vel condimentum in, velit. metus purus ipsum\n\n436 In ipsum rutrum ut malesuada pretium semper. In\n\n437 Posuere elit. dui ante ac amet, rutrum elit. finibus malesuada pretium ipsum\n\n438 Elementum sem. pretium ante Fusce posuere condimentum quis, iaculis. finibus ante rutrum\n\n439 Aliquam ante ante molestie Ut\n\n440 Condimentum Duis tortor\nLorem malesuada\n\n441 Dolor fames finibus Sed eget ante efficitur Sed in nec dui libero pretium\n\n442 Et quis, Sed velit. semper. in enim primis ligula ipsum lorem ac et\n\n443 Quis, nunc est in, ac purus bibendum, ipsum ut ac ante\n\n444 Fames fringilla quis, pretium semper. tincidunt. ac condimentum malesuada Interdum dui lorem eget ante ante\n\n445 Ac consectetur condimentum massa, ante posuere fames iaculis. orci, enim orci lorem In tincidunt.\n\n446 Lorem iaculis. orci, ante fringilla ante ac iaculis. nec pretium massa,\n\n447 Enim massa, In efficitur vel pharetra in, et\nLorem in, In pharetra orci\n\n448 Nunc eget et in consectetur efficitur adipiscing\n\n449 Consectetur vel adipiscing in tortor Mauris fringilla metus semper.\n\n450 Eget Sed ante In elit. est condimentum hendrerit efficitur faucibus. In efficitur\n\n451 Condimentum iaculis. velit. elit. Fusce Fusce Integer\n\n452 Elit. bibendum, neque. quis, pharetra libero\n\n453 Ac orci eget semper sem. ac ante eget ipsum\n\n454 Iaculis. ante et malesuada et molestie scelerisque molestie sit in dolor primis\n\n455 In posuere orci, neque. Interdum sit consectetur metus sem. scelerisque massa\n\n456 Dui hendrerit Integer Sed molestie ac ac semper. lorem eget et elit.\n\n457 Ipsum ligula et aliquam consectetur viverra elementum fames semper efficitur\n\n458 Integer purus lorem primis sit orci enim\n\n459 Fringilla orci,\nLorem bibendum, nec in, Duis lorem in nec massa, iaculis.\n\n460 Sagittis in Fusce nunc tortor ac felis. pretium iaculis. lorem adipiscing Duis molestie\n\n461 In volutpat elementum molestie in, semper. adipiscing ante lorem\n\n462 Purus vel Vivamus posuere lorem amet, velit. dolor sagittis Sed volutpat\n\n463 Fringilla in, In orci, in\nLorem rutrum adipiscing bibendum, consectetur tincidunt. orci, vel\n\n464 In ligula molestie viverra eget in, consectetur enim\n\n465 Enim orci, et et ac massa, velit. nunc semper\n\n466 Consectetur dolor condimentum dui tortor Vivamus scelerisque efficitur malesuada\n\n467 Orci sagittis pretium quis, primis\n\n468 Ac elit. ante amet, elementum ac\n\n469 Efficitur ante In viverra velit. ante molestie efficitur sem. ac hendrerit massa, viverra elit. molestie\n\n470 In vitae finibus faucibus. sem. tortor Fusce sit et orci massa, ut ipsum ante ligula\n\n471 Orci orci bibendum, ac ac sem. finibus orci volutpat\n\n472 Bibendum, hendrerit fames libero Fusce elit. rutrum iaculis.\n\n473 Et libero vel orci elit.\n\n474 Scelerisque metus finibus malesuada enim ipsum molestie tortor Fusce et viverra vel et Integer ante\n\n475 Fames posuere faucibus. vitae elit. Integer sem.\n\n476 Massa, elementum molestie ante lorem et eget elit. elit.\n\n477 In efficitur elementum adipiscing in efficitur pharetra ipsum ligula In\n\n478 Velit. eget finibus in hendrerit posuere massa, bibendum, massa ante elit. Ut\nLorem Ut ante\n\n479 Consectetur aliquam volutpat semper. Vivamus elit. orci, semper Fusce\n\n480 Fames metus est Interdum ac iaculis. libero Integer Vivamus\n\n481 Ut fames orci, est ante neque. pretium In orci, ligula Mauris posuere volutpat tincidunt.\n\n482 Vivamus viverra amet, primis In enim in ipsum enim\n\n483 Semper aliquam dui adipiscing vitae posuere dui molestie elit. ante\n\n484 Velit. Mauris Fusce Integer quis,\n\n485 Ipsum eget neque. ligula scelerisque dolor lorem velit. pharetra purus\n\n486 Quis, Duis ac Interdum ante hendrerit elementum\n\n487 Quis, in ac et scelerisque ipsum fames velit. ante in eget malesuada ligula\n\n488 Lorem scelerisque elit. pharetra tortor ac Duis elit. posuere elementum eget Interdum eget\n\n489 Metus Integer ac ac Integer et consectetur purus fames metus in Integer ac felis.\n\n490 Orci fringilla tincidunt.\nLorem eget Mauris in, sit eget sem. tortor sit\n\n491 Scelerisque elit. sit in bibendum, libero et ipsum in, est\n\n492 Scelerisque efficitur finibus ut hendrerit Ut ac pharetra est et sit Ut\n\n493 Bibendum, Duis ante efficitur eget viverra Interdum et ipsum volutpat ante eget fames Ut elementum\n\n494 Vitae nunc ut ante consectetur in, vel sagittis hendrerit\n\n495 Elementum scelerisque fames efficitur posuere dui orci ac ligula sit\n\n496 Viverra finibus tincidunt. pharetra purus viverra ut finibus hendrerit in sit et ac\n\n497 Dui elit. ante Vivamus volutpat primis\n\n498 Lorem Integer nec tortor tortor\n\n499 Scelerisque fames semper. elementum elit. et sem. consectetur Integer ante Sed massa\n\n500 Fringilla tortor pharetra molestie dolor felis. ante amet, massa massa, Mauris consectetur dui sit\n\n501 Molestie enim iaculis. in metus\n\n502 Nunc efficitur sit Interdum iaculis. amet, ante ante tincidunt. pretium adipiscing consectetur\nLorem\n\n503 Ac ac ante ante pretium dolor primis ipsum rutrum libero volutpat Sed semper. ante\n\n504 Elit. viverra metus in primis in Duis volutpat in viverra dui rutrum hendrerit\n\n505 Molestie in eget bibendum, sit consectetur pharetra ante eget pretium elit. Duis eget massa\n\n506 In efficitur hendrerit efficitur orci elit. primis ligula amet, primis et faucibus. Ut hendrerit malesuada\n\n507 Neque. sagittis bibendum, elit. Sed nunc lorem Duis ante eget\n\n508 Interdum nec adipiscing eget elementum rutrum ipsum consectetur ac est Interdum volutpat felis. in\n\n509 Metus volutpat massa sit sagittis enim consectetur ut\n\n510 Purus sit ante ac Duis In nunc ipsum consectetur Sed fames ipsum adipiscing\n\n511 Tortor amet, est est elit. posuere\n\n512 Elit. nec ipsum ut fames Ut tincidunt. malesuada\n\n513 Finibus ut faucibus. In ut\nLorem et iaculis. adipiscing ipsum semper.\n\n514 Felis. efficitur rutrum fames consectetur\nLorem Sed In in, in quis, massa, volutpat\n\n515 In, ac malesuada finibus condimentum Duis elit. et sagittis nec\n\n516 Sagittis semper. massa, tincidunt. ante massa\nLorem\n\n517 Sem. eget elit. velit. semper. ac ante nec rutrum malesuada\n\n518 Efficitur velit. semper Integer amet,\n\n519 Purus condimentum felis. ut massa, eget molestie In pretium adipiscing et ipsum\n\n520 Fringilla dui primis ligula ac ante sem. semper. molestie faucibus. finibus ut\n\n521 Vivamus Sed nunc tortor scelerisque ante ac aliquam Integer libero consectetur Interdum vel Mauris\n\n522 Ipsum iaculis. Mauris hendrerit libero ante In ipsum\n\n523 Ac Sed Sed Interdum elit.\n\n524 Felis. Integer massa, efficitur sit orci, Interdum semper.\n\n525 Pharetra ac libero scelerisque adipiscing in semper\n\n526 Efficitur eget Integer ante Ut eget hendrerit primis efficitur consectetur elit. ante in\n\n527 Faucibus. ipsum ante in massa\n\n528 Massa massa In lorem libero Sed ipsum iaculis. semper. ante\n\n529 In nec sagittis posuere efficitur ante libero velit. ante ante quis, Sed\n\n530 Est primis nec vel iaculis.\n\n531 Duis hendrerit ante iaculis. massa, vitae sit ante ante fringilla dui\n\n532 Tortor ac adipiscing sit quis, adipiscing ligula tincidunt. ante orci, primis malesuada ipsum\n\n533 Metus enim aliquam quis, Fusce amet, consectetur eget pharetra lorem nunc in efficitur\n\n534 Integer ipsum quis, quis, primis massa efficitur ac semper. rutrum\n\n535 Elit. sit vitae purus elementum massa eget rutrum sit ante nec\n\n536 Tincidunt. metus Fusce ac Vivamus ligula elit. quis, eget ac\n\n537\nLorem vitae consectetur sagittis libero elit. ante enim adipiscing eget sagittis ligula viverra\n\n538 Ante consectetur Duis in efficitur sem. Fusce et volutpat in consectetur\n\n539 Pretium amet, faucibus. viverra efficitur\n\n540 Ipsum finibus faucibus. faucibus. felis. aliquam enim efficitur volutpat in posuere\n\n541 Bibendum, ac malesuada Duis ipsum vel bibendum, in, efficitur\nLorem velit. in\n\n542 Semper. In quis, tincidunt. nunc iaculis. rutrum felis. sem. Fusce semper Interdum Mauris\n\n543 Ut Sed fringilla metus efficitur ac ac et iaculis. dui\n\n544 Nunc pharetra faucibus. iaculis. eget elit. consectetur consectetur Vivamus hendrerit\n\n545 Ac tincidunt. condimentum neque. ac ac\n\n546 Molestie vitae semper. iaculis. pretium posuere consectetur fames ac purus neque. purus Ut sagittis finibus\n\n547 Bibendum, libero iaculis. massa, tincidunt. ut\n\n548 Metus Integer sagittis lorem ante amet,\n\n549 Nunc in aliquam velit. vitae\n\n550 Rutrum efficitur efficitur libero ipsum Sed semper. ipsum quis, In primis ante eget velit. pretium\n\n551 Orci elit. tortor eget Sed ut fringilla\nLorem massa, Mauris elit.\n\n552 Ante ipsum felis. efficitur consectetur ut ante pretium efficitur\n\n553 Rutrum nec ac eget scelerisque efficitur ac Mauris Vivamus consectetur Mauris faucibus. fringilla\n\n554 In ac molestie faucibus. ligula\n\n555 Ut Mauris ipsum malesuada Fusce ante posuere molestie tortor neque. viverra iaculis. in ac\n\n556 Elit. in ante ante ligula in consectetur ante orci, volutpat quis,\n\n557 Ipsum faucibus. amet, elit. nunc metus malesuada in primis velit. posuere ante\n\n558 Est ut sit viverra purus in ipsum elit.\n\n559 Ut primis eget orci, Interdum primis hendrerit dui dui sagittis scelerisque Ut pharetra consectetur Interdum\n\n560 Metus ac ligula elit. lorem est ut adipiscing\n\n561 Pretium sagittis sagittis in, condimentum ipsum elit. hendrerit dolor in\n\n562 Semper\nLorem semper et adipiscing purus neque. ipsum\n\n563 Pharetra adipiscing ac sit Mauris iaculis. lorem eget tortor In orci, ante enim\n\n564 Efficitur massa Duis vitae lorem rutrum tortor volutpat primis Interdum primis iaculis. ac semper elit.\n\n565 Et vitae viverra vel et tincidunt. pretium Vivamus dolor Sed adipiscing hendrerit et sit ac\n\n566 Enim volutpat tincidunt. orci, orci elit. volutpat bibendum, ligula\n\n567 Amet, neque. finibus sem. sagittis elit. molestie ante In\nLorem massa neque. sagittis primis\n\n568 Ut enim ac dolor aliquam\n\n569 Ut iaculis. metus Ut in Vivamus\n\n570 Ante nec felis. ut in Duis tortor elit. eget Fusce In in, in, ligula\n\n571 Ac ligula finibus pharetra vel Sed\n\n572 Rutrum in eget Duis vel Ut\n\n573 Sagittis ac purus ut metus tincidunt. hendrerit\n\n574 Sit ipsum libero consectetur sit nunc sit sem. hendrerit ante efficitur Sed dui\n\n575 In finibus lorem finibus Duis malesuada fringilla sem. et\n\n576 Consectetur malesuada libero elit. ut Ut semper malesuada semper iaculis. ante Integer\n\n577 Eget volutpat libero semper ac primis In Fusce felis. ac felis. enim tincidunt. molestie condimentum\n\n578 Semper. sit finibus adipiscing ante tortor ut adipiscing finibus neque. Vivamus\n\n579 Orci ante aliquam efficitur massa\n\n580 Hendrerit massa, ipsum ut sit\nLorem nec neque. eget\n\n581 Iaculis. Interdum Ut in, dui ipsum\n\n582 In ipsum massa, Mauris Fusce\n\n583 Fusce adipiscing in ac metus condimentum metus orci adipiscing ut\n\n584 Lorem in iaculis. in fringilla neque. elementum\n\n585 Orci, in rutrum dolor hendrerit sit Vivamus ac condimentum Vivamus\n\n586 In massa, metus ipsum faucibus. et\n\n587 Ac ac malesuada volutpat ipsum dolor enim efficitur ipsum Fusce ut libero\n\n588 Neque. semper malesuada tortor pretium aliquam vitae\n\n589 Nec efficitur molestie nunc vitae eget molestie enim adipiscing ac faucibus. pretium\n\n590 In scelerisque quis, ante ac semper.\n\n591 Pretium Ut adipiscing pharetra fames ipsum metus vitae sit molestie fames\n\n592 Dui molestie ac ac ac purus est scelerisque sem. et Integer sem. aliquam elit. neque.\n\n593 Eget pretium iaculis. vitae dolor in eget Sed in aliquam nec\n\n594 Elit.\nLorem efficitur ac ante Interdum nec nunc Duis bibendum, vel consectetur sagittis consectetur\n\n595 Massa, finibus massa malesuada pretium eget in malesuada eget\n\n596 Condimentum et massa Mauris metus molestie\n\n597 Tortor vitae purus ut ut Duis posuere\nLorem ante et dolor In Ut\n\n598 Sit volutpat amet, enim posuere tincidunt. in ac nec\n\n599 Elit. primis vel vitae aliquam neque. ac et purus ipsum elit. et vitae elementum finibus\n\n600 Duis pharetra primis ante lorem volutpat ac massa,\n\n601 Bibendum, neque. ipsum scelerisque nunc tortor lorem tincidunt. ante elementum molestie nunc\n\n602 Ac Integer ac efficitur Duis metus posuere velit. in,\n\n603 Et posuere pretium iaculis. ante massa dui elit. aliquam Mauris ut hendrerit et et\n\n604 Ante\nLorem adipiscing ut ante\n\n605 Aliquam et in, vel semper ante est faucibus. Duis\n\n606 Metus in eget Interdum ante condimentum tortor tincidunt. fames ante in in dolor\n\n607 Et aliquam tortor fames velit. primis elit. iaculis. efficitur volutpat nec ac orci elementum\n\n608 Integer pharetra massa enim consectetur libero bibendum, ante sem. elit. dui\n\n609 Elit. scelerisque et ante tortor ac massa est consectetur dolor pharetra in pharetra ligula\n\n610 In, vel ante orci quis, ante et efficitur lorem finibus sem. semper.\n\n611 Condimentum ac nunc vitae Integer efficitur condimentum ipsum semper. sit\n\n612 Ac orci massa massa, tincidunt. adipiscing pretium libero nec volutpat ipsum est amet, pharetra in\n\n613 Et consectetur ante Duis ante ante eget\n\n614 Elit. amet, ac ipsum dolor amet, purus scelerisque ac elementum elementum viverra\n\n615 Eget\nLorem vitae ante adipiscing et\n\n616 Semper. fames elit. Integer semper. massa, orci Interdum orci ante bibendum, consectetur\n\n617 Hendrerit ante molestie lorem ac elementum elementum Duis massa est eget malesuada\n\n618 Massa sagittis Sed dui aliquam\n\n619 Ante elit. in fames ut eget Duis elementum\n\n620 Libero nunc in nunc ipsum tortor orci in enim efficitur malesuada ante semper Fusce ac\n\n621 Scelerisque\nLorem Mauris tincidunt. efficitur\nLorem Sed ac\n\n622 Est fames eget consectetur ac\n\n623 Primis hendrerit semper. ac vel neque. In consectetur posuere dui consectetur ac ipsum\n\n624 Ut hendrerit eget Vivamus molestie\n\n625 Condimentum Ut et ante pretium amet, ac lorem scelerisque ante nunc volutpat\n\n626 Fringilla dolor ipsum in eget In metus\n\n627 Faucibus. tortor vel In Vivamus faucibus. rutrum libero in efficitur est viverra vel malesuada semper.\n\n628 Fames ut velit. ac\nLorem\n\n629 Nunc pharetra primis Integer sit Interdum tortor\n\n630 Nec massa, viverra ut bibendum, ut\n\n631 Sit faucibus. sagittis ante semper.\n\n632 Fringilla hendrerit pretium vitae pretium libero ut pharetra semper elit. condimentum\nLorem\n\n633 Pretium lorem ante tortor In ipsum aliquam finibus scelerisque\n\n634 Ligula ac ut dui ante pretium tincidunt. quis, volutpat efficitur ac scelerisque\n\n635 Ante purus ac orci, efficitur amet, elit. amet,\n\n636 Faucibus. amet, ut primis in Duis lorem libero malesuada velit. efficitur\n\n637 Elit. malesuada iaculis. ipsum efficitur In ligula ac eget hendrerit posuere\n\n638 Finibus est consectetur semper. purus libero Fusce orci, velit. condimentum condimentum condimentum semper primis\n\n639 Est lorem orci, elit. velit. metus in ante molestie faucibus.\n\n640 Primis est est pharetra eget pretium purus felis. ipsum faucibus. velit. Duis condimentum rutrum\n\n641 Mauris libero Integer malesuada sit velit. ante Ut fames condimentum\n\n642 Sagittis Interdum in, in, vitae\n\n643 Integer tincidunt. ac Duis Integer In metus iaculis. et\n\n644 Fames efficitur orci velit. pharetra viverra faucibus. ipsum et Mauris semper dolor ut\n\n645 Et eget dolor felis. in molestie rutrum volutpat Mauris In finibus bibendum,\n\n646 Mauris Mauris scelerisque metus consectetur enim consectetur sagittis sagittis In tortor neque. neque.\n\n647 Primis eget sem. purus enim iaculis. consectetur\n\n648 Est rutrum primis fringilla elementum Fusce Fusce faucibus. velit. sagittis massa est\n\n649 Elementum dolor massa, et semper consectetur fringilla purus eget Fusce efficitur enim\nLorem molestie\n\n650 Condimentum nec fringilla ac elit. Ut velit. malesuada hendrerit finibus ante\n\n651 Fringilla bibendum, finibus In vitae sagittis vitae sagittis ante\n\n652 Elit. metus libero ipsum consectetur elementum\n\n653 Condimentum massa, fames ipsum primis Vivamus\n\n654 Orci, massa In efficitur ipsum malesuada\n\n655 Efficitur semper. eget sem. nunc iaculis. Fusce eget fringilla fringilla ac felis. ante in\n\n656 Vel enim sit ac in Duis velit. efficitur efficitur aliquam ipsum et Duis\n\n657 Ante sagittis lorem elit. orci, Vivamus\n\n658 Ut dui sit ac in elementum neque. efficitur ac posuere massa enim efficitur\n\n659 Fames elementum est ipsum ac lorem felis.\n\n660 Iaculis. nunc sem. in vitae ut bibendum,\n\n661 Vel Interdum Duis velit. purus ipsum ipsum Duis efficitur in, ut sagittis massa ante sem.\n\n662 Mauris Duis lorem Mauris faucibus. quis, nunc hendrerit Interdum elit. ante Vivamus sagittis elementum\n\n663 Ipsum sit quis, dui Mauris hendrerit fames nunc ut\nLorem\n\n664 Libero massa, metus ipsum ac finibus ipsum nunc Fusce massa aliquam dui et\n\n665 Pharetra viverra in Integer quis, ac\n\n666 Consectetur vel Mauris ut ligula tortor\n\n667 Vitae vel condimentum viverra hendrerit In fringilla pretium posuere tincidunt. vel lorem vel Interdum\n\n668 Ante Mauris ut sem. Fusce ac consectetur dui Interdum bibendum, ut\n\n669 Sem. scelerisque ac ac nec\n\n670 Semper ut vel Ut purus scelerisque orci, semper malesuada In faucibus. dui\n\n671 Massa purus sit Sed nec felis. enim fames nunc elementum adipiscing amet, vel\n\n672 Ac fames ut ac ut orci, Sed Vivamus elementum vitae enim Fusce\n\n673 Efficitur in semper. Integer Sed\n\n674 Ac malesuada ut lorem finibus Ut Ut massa sem.\n\n675 Consectetur massa efficitur semper volutpat elementum in\nLorem et\n\n676 Ante finibus nunc condimentum volutpat vitae Ut\n\n677 Est velit. ac et metus posuere est consectetur vel orci, aliquam\n\n678 Purus semper sem. in ante Integer massa iaculis. viverra ante hendrerit sagittis posuere in\n\n679 Tortor in ac neque. lorem efficitur ac ipsum In\n\n680 Eget eget scelerisque pharetra Integer efficitur dolor elit.\n\n681 Fusce viverra elit. ac sagittis ligula lorem in\n\n682 Lorem elit. scelerisque eget elit. bibendum, neque.\n\n683 In viverra massa enim ac elit. Duis vel quis, iaculis.\n\n684 Ut ante hendrerit sagittis ipsum enim aliquam semper. Fusce elit. enim vitae finibus\n\n685 Metus sit in primis adipiscing\nLorem Interdum ante Interdum amet, et Integer ut amet, elit.\n\n686 Sem. et eget lorem primis ligula vel quis, sem. primis dolor vitae efficitur eget Interdum\n\n687 Libero molestie in Sed ante ac ante semper ante efficitur viverra elit. posuere orci velit.\n\n688 Orci, pharetra neque. sagittis ut sit ac tortor ac\n\n689 Orci amet, rutrum viverra fringilla fames ligula\n\n690 Ante Interdum amet, ut ac ac et velit. et condimentum ac nec et ac massa,\n\n691 Ac quis, efficitur semper hendrerit in ipsum eget et viverra\n\n692 Consectetur consectetur fringilla ligula est\n\n693 Est tortor massa massa amet, ante semper ac vitae in\n\n694 Bibendum, iaculis. ante vel metus fames felis. ligula tincidunt. sit Sed fames\n\n695 Consectetur condimentum elementum dolor est primis Integer Sed\n\n696 Finibus Fusce eget ligula in sit purus velit. neque.\n\n697 Eget dolor elementum in dui tortor massa, tincidunt. sem. ac ut consectetur nec bibendum,\n\n698 Nunc in dolor enim est volutpat vitae Fusce Integer Integer bibendum, ac ante efficitur aliquam\n\n699 Ut enim tortor Fusce elit. In ante vitae vitae adipiscing\n\n700 Vivamus ante massa et metus elit. semper\n\n701 Elementum elit. Interdum eget Duis orci, metus Fusce sit eget consectetur\n\n702 Dolor hendrerit Interdum pharetra vitae\n\n703 Sem. ante Vivamus Fusce elementum tortor orci viverra neque. metus metus elit.\n\n704 Condimentum sagittis felis. vitae molestie sagittis ante tortor ut tortor ac\n\n705 Eget ante pretium dolor Integer\nLorem neque. molestie felis. pretium ac ante hendrerit ligula semper\n\n706 Posuere malesuada efficitur primis vitae iaculis. consectetur consectetur nec\n\n707 Rutrum elit. in massa, efficitur Interdum vitae ut ligula\n\n708 Consectetur eget elit. vel in scelerisque elit. orci ipsum\n\n709 Elementum ac Sed quis, efficitur enim nunc\n\n710 Nec sem. pretium volutpat vitae Sed nunc\n\n711 Efficitur Mauris Ut iaculis. consectetur orci, tortor et Interdum\n\n712 Ante fames scelerisque Sed vel metus\n\n713 Fusce finibus eget posuere consectetur semper massa, ut\n\n714 In metus Ut\nLorem hendrerit bibendum, rutrum adipiscing consectetur fames ipsum Fusce\n\n715 Semper neque. ante iaculis. purus Mauris et\n\n716 In In enim felis. ac ac pharetra tincidunt.\n\n717 Velit. eget condimentum Integer\nLorem rutrum semper in\n\n718 Tincidunt. elit. vitae sit dui efficitur dui\n\n719 Ac adipiscing velit. elementum bibendum, elementum consectetur iaculis. malesuada malesuada Sed ante sit finibus quis,\n\n720 Efficitur amet, dui ut bibendum, libero Sed purus\n\n721 Elit. ante semper. fames scelerisque dui adipiscing vitae eget ipsum condimentum\n\n722 Ante sit sem. et consectetur ante\n\n723 Amet, Interdum rutrum Fusce Fusce hendrerit\n\n724 Vitae condimentum pharetra Ut elit. tortor\n\n725 Et condimentum eget lorem eget sem.\n\n726 Vivamus efficitur ac hendrerit nec Ut In massa, velit. semper. condimentum in\n\n727 Purus pretium in, orci ac adipiscing eget et malesuada tortor tincidunt. efficitur condimentum eget\n\n728 Tortor in, lorem elit. in, eget ac tincidunt.\n\n729 Duis in dolor in, rutrum ante\n\n730 Sed tortor efficitur est velit. ut Interdum ipsum nunc volutpat scelerisque neque.\n\n731 Vitae rutrum pharetra sit tortor\n\n732 Consectetur pretium Duis purus bibendum, ac iaculis. hendrerit elementum nunc tincidunt. Sed semper semper.\n\n733 Massa, et Sed\nLorem enim ante hendrerit viverra\n\n734 Consectetur ut felis. sagittis libero vitae Sed quis, et\n\n735 Viverra iaculis. Mauris finibus metus vel dolor ac sem. ante Fusce orci ipsum metus\n\n736 Ipsum efficitur pharetra quis, ipsum\n\n737 Amet, viverra in ac vel vel nec elit. Ut nec\n\n738\nLorem orci, massa, ac orci in,\n\n739 Nec semper. orci, elementum eget in orci, Ut orci\n\n740 Primis primis iaculis. molestie molestie\n\n741 Ac dui in in purus malesuada\n\n742 Vitae purus enim ac rutrum ac ac nunc vitae\n\n743 Pharetra felis. felis. In Interdum nunc vel rutrum elit. Integer\n\n744 Posuere felis. In Mauris massa, scelerisque iaculis. aliquam orci, libero sagittis velit. scelerisque posuere tortor\n\n745 Dolor Interdum semper ut bibendum,\n\n746 Lorem\nLorem Mauris orci ac ipsum\nLorem nec orci\n\n747 Ac felis. aliquam lorem libero in, ac efficitur\n\n748 Dolor Sed ut felis. ante ante sem. tincidunt.\n\n749 Fringilla et Sed primis vel eget pharetra nec aliquam semper ipsum elementum et\nLorem Mauris\n\n750 Hendrerit faucibus. ac dui ac ac sagittis\n\n751 Molestie ante scelerisque ut amet, metus pharetra efficitur posuere Mauris ac felis.\n\n752 Velit. adipiscing consectetur aliquam condimentum\n\n753 Primis consectetur neque. et ac in pharetra fringilla Ut pretium ante faucibus.\n\n754 Sem. ac pharetra fames eget dolor tortor rutrum in\n\n755 Viverra felis. sit et metus\n\n756 Ante fames tincidunt. condimentum ac eget iaculis. semper lorem Fusce ante viverra ligula\n\n757 Hendrerit ac elit. rutrum rutrum pharetra in quis, et In rutrum Vivamus pharetra efficitur dui\n\n758 Est sit Ut viverra massa neque. Duis felis.\n\n759 Fringilla finibus eget neque. molestie Ut efficitur Vivamus\n\n760 Dui in tortor massa Interdum hendrerit Integer ipsum nunc ac libero\n\n761 Volutpat ipsum malesuada lorem felis. efficitur malesuada elementum felis. sagittis amet, malesuada fringilla\n\n762 Ligula faucibus. Fusce ipsum finibus orci, tincidunt. in purus sit Duis\n\n763 Felis. Fusce faucibus. sit orci, elit. condimentum tincidunt. consectetur sit ut ac tincidunt.\n\n764 Enim ac eget et vel dolor in tortor finibus in, molestie massa\n\n765 Hendrerit pretium ante est faucibus. Integer nec adipiscing tortor eget\n\n766 Tincidunt. massa, in, malesuada efficitur\n\n767 Metus est Integer amet, fames\n\n768 Efficitur ut eget vitae efficitur molestie eget ac felis.\n\n769 Tincidunt. semper. ut primis bibendum, tortor pharetra libero ac molestie efficitur ante\n\n770 Dolor malesuada elit. enim consectetur\nLorem orci, efficitur tortor viverra elit. pharetra ut\n\n771 Vitae finibus adipiscing velit. faucibus. purus malesuada eget elit. fames hendrerit finibus metus Sed\n\n772 Dolor est Mauris malesuada libero sem. ac hendrerit ac malesuada primis efficitur\n\n773 Ut libero fames ligula dolor neque. scelerisque volutpat pretium dolor purus hendrerit\n\n774 Sed bibendum, ut purus posuere massa fames in\n\n775 Velit. Duis bibendum, lorem scelerisque amet, pretium\n\n776 Fusce felis. semper. in eget volutpat amet,\n\n777 Vel malesuada et Interdum metus Sed in sagittis felis. sem. faucibus. Fusce viverra Interdum\nLorem\n\n778 Condimentum in elit. amet, In tincidunt. hendrerit orci amet,\n\n779 Vel aliquam orci, orci, In In lorem massa, sagittis fringilla eget ut primis elit. tortor\n\n780 Purus elit. metus tincidunt. fringilla eget elementum\n\n781 Semper. est In elementum quis, dolor Integer purus\n\n782 Interdum libero sit\nLorem velit. elementum eget rutrum efficitur in bibendum, ipsum semper\n\n783 Ante sit in enim fringilla ut vel Mauris iaculis. molestie aliquam dolor nunc sem.\n\n784 Bibendum, enim Ut finibus orci, tortor hendrerit faucibus. eget consectetur tortor Ut\n\n785 Libero ut in condimentum hendrerit viverra massa, Fusce velit. efficitur\n\n786 Fringilla metus ante finibus metus in vel Mauris ac massa, pretium ante\n\n787 Rutrum vitae massa, Sed ut faucibus. In et\n\n788 Malesuada viverra condimentum ac consectetur\n\n789 Fringilla ipsum condimentum Interdum orci, sem. eget primis ante sit ipsum semper.\n\n790 Finibus ante fringilla semper. Fusce nec faucibus. enim ac semper. molestie adipiscing hendrerit\n\n791 Sed Fusce tortor purus consectetur velit. ipsum ac orci dui\n\n792 Nunc vel In efficitur orci, eget ut\n\n793 Dolor condimentum condimentum ante massa ac sit faucibus. in ac ante\n\n794 Sagittis velit. lorem enim Sed dolor viverra\n\n795 Pretium vitae nunc Fusce Sed consectetur Mauris in orci efficitur sem. semper purus\n\n796 Bibendum, metus consectetur Duis sem. iaculis. elit. In Integer Mauris ligula\n\n797 Vivamus In malesuada elementum ac ante\n\n798 Velit. ac viverra neque. ac viverra\n\n799 Ante pharetra lorem dui aliquam vitae Duis ante ac\n\n800 Dui elit. massa, semper ipsum et pretium sem. Ut\n\n801 Semper. Sed massa elit. pretium malesuada aliquam Integer consectetur neque. pharetra\n\n802 Purus semper orci in, et\n\n803 Sit dui Integer eget volutpat faucibus. quis, sit finibus adipiscing Mauris ac amet, fringilla\n\n804 Ligula primis viverra Sed ante ac in,\n\n805 Ac vitae sagittis pharetra ut ut elit. molestie ut\n\n806 Est Vivamus Fusce condimentum in bibendum, bibendum,\n\n807 Felis. Vivamus in finibus faucibus. malesuada ligula\n\n808 Metus sem. Mauris tincidunt. scelerisque amet, Mauris\nLorem finibus scelerisque\n\n809 Lorem metus ante ac iaculis. iaculis.\n\n810 Et finibus hendrerit\nLorem adipiscing sit efficitur fames posuere nec tortor aliquam quis, finibus ante\n\n811 In consectetur quis, quis, sem.\n\n812 Viverra quis, tortor molestie ante est rutrum tincidunt. libero posuere sagittis amet, sem. fringilla ante\n\n813 Nec Sed rutrum fames primis ante elit. ante enim massa, pharetra ligula ligula\n\n814 Libero dui condimentum vitae molestie ipsum Vivamus felis. condimentum In hendrerit Fusce lorem consectetur consectetur\n\n815 Ut fames volutpat enim ut\nLorem In ante primis metus felis. scelerisque volutpat et\n\n816 Libero semper. Mauris malesuada semper Vivamus pharetra lorem orci aliquam pharetra\n\n817 Condimentum ac ac enim bibendum, Ut consectetur sagittis\n\n818 Faucibus. ipsum in, massa in, enim felis. elit. ipsum velit. tincidunt. ante nunc fringilla amet,\n\n819 Et Sed et libero ac\n\n820 Purus ipsum In in, primis\n\n821 Lorem ipsum et condimentum semper. ut Sed felis. massa, ac\n\n822 Ac ante et hendrerit finibus purus molestie viverra massa\n\n823 Faucibus. faucibus. libero Integer molestie eget nunc Fusce efficitur viverra pretium tortor in et\n\n824 Purus quis, sem. nunc ante vel ac in hendrerit primis\n\n825 Ac orci purus nunc In\n\n826 Libero Interdum Duis faucibus. Interdum neque. Ut tortor finibus in ante ut purus\n\n827 Neque. viverra nec nec dolor ipsum nunc orci, In sagittis ante dolor tincidunt.\n\n828 Malesuada malesuada libero Interdum ac iaculis. Interdum posuere libero\n\n829 Quis, amet, purus In amet, primis ipsum in, iaculis. velit. sagittis ipsum finibus Integer hendrerit\n\n830 Sem. sagittis pharetra lorem ante condimentum orci\n\n831 Malesuada finibus purus massa ligula in Integer Ut sagittis ligula eget scelerisque efficitur dolor\n\n832 Metus et neque. consectetur pretium semper neque. velit. hendrerit\n\n833 Ac semper. adipiscing faucibus. Ut nec Sed lorem pharetra condimentum ac semper\n\n834 Condimentum massa Mauris hendrerit ante quis, ipsum Sed et ac rutrum finibus\n\n835 Amet, adipiscing In eget in Vivamus primis vel vel purus posuere ac velit. volutpat consectetur\n\n836 Orci, Integer fames Vivamus Integer condimentum finibus neque. ut pharetra\n\n837 Ante vitae ipsum consectetur ipsum\n\n838 In, sagittis tincidunt. in, Interdum ac ac fames pharetra ac adipiscing hendrerit\n\n839 Semper. ante ac iaculis. orci, metus\n\n840 Ac dolor volutpat dolor vel ipsum bibendum, Duis ante pharetra semper. velit. libero\n\n841 Ut fames posuere orci ac ut primis finibus\n\n842 Faucibus. Mauris sagittis bibendum, volutpat Fusce Integer semper. malesuada scelerisque semper. pretium\n\n843 Ac nunc finibus scelerisque fames est in eget\n\n844 Vivamus\nLorem volutpat nunc fringilla elit.\n\n845 Molestie Mauris orci, velit. et massa bibendum, vel ante libero libero ante consectetur molestie\n\n846 In ut velit. tortor efficitur elementum sagittis\n\n847 Posuere adipiscing nec ac vitae rutrum eget tincidunt.\n\n848 Ante elit. ac ipsum ut condimentum metus massa massa, volutpat\n\n849 Pharetra efficitur ut condimentum et sem. condimentum aliquam consectetur condimentum Ut\n\n850 Eget in Interdum libero in fringilla dui sagittis elit.\n\n851 Elementum velit. ante in hendrerit in, condimentum et consectetur felis.\n\n852 Ut in dolor efficitur Duis bibendum,\n\n853 Viverra faucibus. enim bibendum, Sed in in, sit ante Interdum ante\n\n854 Fringilla ante vel Duis sit ante consectetur et eget in elit. rutrum fringilla elit.\n\n855 Hendrerit tincidunt. ipsum adipiscing vel ac vel sagittis\n\n856 Vel libero ac fringilla faucibus. primis sagittis sagittis fames nec\n\n857 Rutrum et molestie Interdum fames Integer velit. semper. viverra\n\n858 Orci ac elit. Vivamus rutrum\n\n859 Ac neque. ac nec tincidunt.\n\n860 Ipsum fames vitae ut fames ut fringilla sem. est fames bibendum, nec pharetra massa,\n\n861 Et nec finibus condimentum purus primis neque. finibus Sed est fames eget\n\n862 Ac Ut Duis ac elit. Fusce ante fames posuere Mauris Sed\n\n863 Dui vel bibendum, bibendum, ac semper molestie aliquam sit massa primis neque.\n\n864 Posuere semper. sem. enim viverra sem. primis ac quis,\n\n865 Sagittis ac orci aliquam ac bibendum, Sed scelerisque est neque. In\n\n866 Scelerisque ante lorem ut ante est in, finibus primis efficitur ante quis,\n\n867 Sagittis elit. elit. felis. in, ac ligula ipsum eget bibendum, pharetra pretium\n\n868 Fusce nec elit. lorem lorem lorem orci, In finibus sit\n\n869 Efficitur Duis ligula rutrum semper. semper. ante ipsum Interdum malesuada elit. massa,\n\n870 Interdum ante et posuere scelerisque condimentum\n\n871 Elit. nec amet, faucibus. iaculis. nunc libero neque. nunc in faucibus. viverra semper. fames\n\n872 Amet, quis, ac efficitur Duis\n\n873 Ac Mauris nunc semper iaculis.\n\n874 Metus Ut enim pharetra Ut Mauris enim est ipsum et\n\n875 Tincidunt. est finibus in ac metus in, velit. elit. tortor pretium bibendum, quis,\n\n876 Ipsum quis, et molestie ac purus ac ac ac Integer est\n\n877 Integer Mauris ac ac vitae in, semper quis, fames vel in, felis. in vitae nec\n\n878 Vivamus nunc lorem dolor elementum elementum velit. scelerisque elementum enim velit. orci rutrum neque.\n\n879 Bibendum, semper. orci fames in, ligula eget fames ante consectetur in condimentum tortor semper. adipiscing\n\n880 Scelerisque\nLorem consectetur libero bibendum, elit. ut sagittis Duis efficitur pretium tortor consectetur\n\n881 Ac ac ac ipsum Ut efficitur efficitur\n\n882 Vivamus semper. pretium Interdum volutpat\n\n883 Est pharetra ac Integer semper quis,\n\n884 Efficitur lorem et semper ante scelerisque tincidunt. consectetur sit et orci, ligula viverra viverra Sed\n\n885 Hendrerit in elementum ac volutpat\n\n886 Est ligula Sed condimentum metus libero nunc ante malesuada\n\n887 Bibendum, velit. sagittis In sit dolor tortor hendrerit in eget primis elit. in\n\n888 Eget volutpat Interdum purus est fringilla consectetur vel massa viverra\n\n889 Purus iaculis. ac dui tincidunt. et ante\n\n890 Pretium dui sem. viverra ipsum\n\n891 Finibus ut ac neque. hendrerit tincidunt.\n\n892 Pharetra consectetur ac ut tortor massa, purus\n\n893 Enim bibendum, elit. metus semper\n\n894 Efficitur efficitur quis, nec hendrerit orci nec adipiscing In bibendum,\nLorem\n\n895 Massa, pharetra efficitur sagittis\nLorem lorem\n\n896 Iaculis. ac ipsum finibus primis ac orci ac condimentum in, aliquam\n\n897 Sed rutrum est finibus metus bibendum, tortor quis, ac Interdum ante\n\n898 Sed semper semper. dolor metus\n\n899 In ligula ipsum dolor pretium elit. orci enim dui ut ac\n\n900 Vitae semper elementum fames eget ut dolor malesuada Sed amet,\n\n901 Felis. bibendum, adipiscing et in ut fringilla ante faucibus. semper\n\n902 Vitae volutpat hendrerit elit. consectetur ante ante tincidunt. Mauris sagittis fringilla ac\nLorem ac\n\n903 Sagittis et pharetra vitae sem. fames ipsum aliquam efficitur tincidunt.\n\n904 Sit rutrum Ut adipiscing scelerisque efficitur primis orci, Mauris Interdum enim in elit.\n\n905 Tortor sem. dolor ac in\n\n906 Tincidunt. neque. posuere ut consectetur in ante orci,\n\n907 Felis. viverra bibendum, scelerisque est Ut tortor\n\n908 Ac in Fusce ut elit. tincidunt.\n\n909 Vivamus viverra primis finibus fames nunc consectetur semper efficitur aliquam volutpat\n\n910 Interdum et iaculis. vel condimentum efficitur finibus ante Mauris dui\n\n911 Fusce ligula ut nunc efficitur est ac in, iaculis. Duis in aliquam nec\n\n912 Aliquam malesuada ut fames nunc\n\n913 Pharetra ac primis libero orci vel volutpat hendrerit fringilla iaculis. Ut quis, molestie\n\n914 Ut faucibus. quis, et semper tincidunt. in in ac ipsum\n\n915 Ac orci in Ut et bibendum, semper. volutpat in, Sed in, primis Fusce faucibus. molestie\n\n916 Tincidunt. in semper. molestie ac sit In Mauris ante ut dolor\n\n917 Sagittis efficitur ligula Duis\nLorem pharetra libero quis, semper posuere fames molestie\n\n918 Ligula sagittis elit. ac iaculis. in amet, Interdum sem. eget condimentum in\n\n919 Bibendum, ac scelerisque in, bibendum, consectetur\nLorem orci, fringilla ante faucibus.\n\n920 Integer iaculis. Mauris sit pretium efficitur Ut iaculis. in rutrum neque. in elit. metus Vivamus\n\n921 Elit. finibus dui libero ante vel felis.\n\n922 Vivamus ac neque. Interdum ac pretium tincidunt. ipsum in\n\n923 Vitae Mauris ac tortor in semper\n\n924 Aliquam lorem posuere in, sem. Vivamus ante\n\n925 Nunc bibendum, Duis In pretium aliquam consectetur iaculis. orci, orci, ipsum quis,\n\n926 Fames scelerisque ipsum ac ut Mauris tincidunt. pharetra in eget\n\n927 Ipsum ante fames Fusce elit. et orci\n\n928 Vitae quis, elit. ac Fusce tincidunt.\n\n929 In dui efficitur neque. elit. nec et fames fames Mauris quis, tortor dolor\n\n930 Felis. velit. Mauris ut faucibus. nunc velit. nunc Interdum eget ac\n\n931 Libero nec enim Mauris ipsum purus libero Vivamus vitae fringilla ut bibendum, Interdum tortor semper.\n\n932 Hendrerit elit.\nLorem Mauris pretium ac felis. ante ante eget\n\n933 Dui massa ac ut metus in pretium rutrum ante ac tortor\n\n934 Eget amet, ante fringilla ligula aliquam adipiscing Integer sem. in eget in hendrerit\n\n935 Finibus eget quis, neque. ante hendrerit ante tortor vitae purus Sed felis. ante pharetra\n\n936 Fames Duis sit ante ac Fusce Vivamus scelerisque sem. iaculis. condimentum ligula Duis felis. consectetur\n\n937 Fusce semper. volutpat consectetur fames finibus adipiscing fringilla\n\n938 Quis, enim primis condimentum ipsum molestie volutpat ac primis pharetra consectetur molestie\n\n939 Vivamus nec hendrerit malesuada ut aliquam eget viverra volutpat dolor fames consectetur elementum\n\n940 Amet, orci, metus Mauris ipsum ante Sed Ut\n\n941 Finibus sem. purus Integer ante elementum hendrerit efficitur efficitur ipsum orci\n\n942 Nunc et nunc nec ipsum pharetra eget sit bibendum,\n\n943 Et semper. ac condimentum malesuada\n\n944 Efficitur nunc adipiscing pharetra consectetur In faucibus. semper. metus\n\n945 Orci, elementum molestie elementum elementum\n\n946 Volutpat ac vel in, tortor in in, elit. elit.\n\n947 Fusce aliquam in viverra sagittis vel eget neque. Mauris adipiscing consectetur condimentum ipsum neque. purus\n\n948 Ac quis, faucibus. tortor dolor\n\n949 Viverra Fusce ante Sed Integer massa ut volutpat iaculis. massa, tincidunt.\n\n950 Amet, vel Fusce Duis fringilla volutpat tortor libero est tortor iaculis.\n\n951 Et sagittis rutrum in lorem elit.\nLorem tortor ante volutpat fringilla consectetur felis. ut purus\n\n952 Ut ligula et in et finibus scelerisque tincidunt. consectetur dui viverra pretium\n\n953 Primis et rutrum metus finibus adipiscing Ut Fusce posuere est et\n\n954 Interdum sagittis Integer felis. purus Mauris ante in et Interdum viverra nunc et vel amet,\n\n955 Rutrum\nLorem metus tincidunt. massa, efficitur In efficitur scelerisque Sed faucibus. neque. ligula ac\n\n956 Est elit. in massa, neque. Interdum eget Sed condimentum\n\n957 Sagittis quis, dolor quis, posuere ipsum\n\n958 Pharetra scelerisque pharetra orci fames scelerisque Interdum elit. quis, vitae Sed massa,\n\n959 Malesuada ante ante ut adipiscing tincidunt. scelerisque dui nec ac scelerisque ac viverra faucibus.\n\n960 Volutpat aliquam viverra massa ligula consectetur In massa, ac ante fames semper elit. posuere quis,\n\n961 Orci, quis, libero semper massa ligula ante felis.\n\n962 Ante pharetra iaculis. tortor Mauris viverra pharetra iaculis. neque. finibus est neque. dolor enim elit.\n\n963 Malesuada sem. hendrerit pretium Duis primis posuere vitae massa, nunc in, efficitur in\nLorem\n\n964 Ipsum Interdum Mauris purus bibendum, sit in ac fringilla volutpat metus ante\n\n965 Efficitur malesuada pharetra efficitur finibus sit ac in pharetra pretium ac scelerisque vel\n\n966 Consectetur efficitur est In libero quis, ac ut adipiscing\n\n967\nLorem in tincidunt. amet, molestie\n\n968 Adipiscing nec ac ligula fringilla In et finibus eget purus primis Integer\n\n969 Tincidunt. orci libero nunc vel elit. scelerisque in, orci, eget faucibus. ipsum iaculis. ac finibus\n\n970 In purus faucibus. orci, sagittis posuere Interdum hendrerit metus fames faucibus. felis.\n\n971 Ac ipsum ac volutpat fringilla finibus vitae et tincidunt. Vivamus Interdum pretium massa\n\n972 Iaculis. In efficitur malesuada Sed tincidunt. ipsum ac ac massa\n\n973 Pharetra vitae in, in sagittis scelerisque ac\n\n974 Fusce ante iaculis. In ac\n\n975 Posuere et Vivamus molestie nunc sagittis dolor ac bibendum, ante Interdum\n\n976 Elementum amet, massa ante Ut in purus dui tincidunt. bibendum, Mauris Duis dui et neque.\n\n977 Metus ipsum adipiscing purus orci condimentum ante Sed pharetra orci, iaculis.\n\n978 Bibendum, velit. orci, tincidunt. in, rutrum Duis adipiscing tincidunt. ut volutpat purus et efficitur\n\n979 In et ac rutrum In consectetur sem.\n\n980 Vitae ante In orci elit. finibus enim hendrerit pharetra\n\n981 Iaculis. ipsum ac Mauris fames ligula in condimentum neque. fames fringilla posuere faucibus. ipsum\n\n982 Adipiscing massa, ante consectetur viverra in primis Mauris\n\n983 Ut fames sem. volutpat tincidunt.\n\n984 Viverra enim ut Fusce Fusce vel eget\n\n985 Semper ligula felis. Vivamus Vivamus Fusce ac Sed dui tortor ante nec adipiscing\n\n986 Ipsum sit Integer Mauris ut molestie viverra sagittis amet,\n\n987 Sagittis malesuada fames hendrerit Mauris in fringilla est molestie quis, posuere\n\n988 Ac tortor elit. dui primis sit consectetur\nLorem Ut orci, elit. pretium eget semper\n\n989 Amet, Mauris fringilla Interdum ac ipsum efficitur quis, aliquam iaculis. ac lorem lorem ligula metus\n\n990 Ante faucibus. Duis tincidunt. Interdum fames nec\n\n991 Fringilla rutrum adipiscing eget eget orci, et adipiscing dui\n\n992 Ac ac volutpat vel orci elit. in\nLorem\n\n993 Sed nec vel ante orci efficitur scelerisque aliquam purus neque. vel efficitur sem. ut consectetur\n\n994 Felis. finibus consectetur est velit. ac velit. condimentum eget adipiscing\nLorem Vivamus\n\n995 Ligula in finibus et volutpat orci purus efficitur finibus primis\n\n996 Tortor pretium pharetra in dui in fringilla nec semper dui Fusce massa,\n\n997 Primis semper semper efficitur felis. iaculis.\n\n998 Ligula semper. In malesuada rutrum ac Duis ut Duis condimentum\n\n999 Iaculis. Fusce ligula eget elit. vitae Duis vitae ut\n\n1000 Nec ac rutrum in, Mauris volutpat scelerisque orci, in fames ante ut enim Sed\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| aria-label | string | — | Accessible label applied to the dropdown toggle button. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| iconName | string | — | Optional rioglyph icon name forwarded to the underlying button toggle. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |",
+    "searchText": "Dropdowns\nDropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.\nDropdowns\nButtonDropdown\nNormal Button\nnoCaret\nDropup\nSplitButton\n\nSplitButton\n\nLarge button\nDefault button\nSmall button\nMini button\n\nDropdown with max-height\nDropdown with dopup\nDropdown with pullRight\nControlled Dropdown\n\nDropdown variants Text dropdown\n\nCustom dropdowns for filter tags Tag dropdown\n\nTag small dropdown\n\nCustom dropdowns for labels Active\n\nActive\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| aria-label | string | — | Accessible label applied to the dropdown toggle button. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| iconName | string | — | Optional rioglyph icon name forwarded to the underlying button toggle. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nSimpleButtonDropdown\nWrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.\nSingleButtonDropdown\nWrapper component for ButtonDropdown, kept for backwards compatibility.\nSingleButtonDropdown\nSplitButtonDropdown\nWrapper component for ButtonDropdown where prop \"splitButton\" is set automatically.\nSplitButton\n\nSplitButton ButtonDropdown\nDropdownSubmenu\nNormal ButtonDropdown\nnoCaret ButtonDropdown\nSplitButton ButtonDropdown\n\nNormal ButtonDropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | string \\| React.ReactNode | '' | Displayed button title. |\n| items | MenuItem[] | — | Items to display in the dropdown sub menu. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables every entry on the title list item. |\n| className | string | — | Additional classes to be set on the dropdown-submenu element. |\nCustom Dropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| aria-label | string | — | Accessible label applied to the dropdown toggle button. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| iconName | string | — | Optional rioglyph icon name forwarded to the underlying button toggle. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nDropdown using React Portal\nA typical use case for ButtonDropdown using portal is when a parent component has an overflow: hidden or z-index style, but you need the dropdown to visually “break out” of its container.\nNormal Button\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| aria-label | string | — | Accessible label applied to the dropdown toggle button. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| iconName | string | — | Optional rioglyph icon name forwarded to the underlying button toggle. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nLarge amount of dropdowns in a list or table\nID Content Action\n\n1 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‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nLabel Table view\nCards view\nList view\n\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nTable head\nDefault table head style\n\nColumn head Column head Column head Column head\n\nColumn Column Column Column\n\nAlternative table head\n\nColumn head Column head Column head Column head\n\nColumn Column Column Column\nRounded table\nUse the table rounded classed when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners without needing to add additional padding.\nColumn head Column head Column head Column head\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nNew Button\n\nFilter\n\nTable view\nCards view\nList view\n\nId Name VIN Status Duration\n\n233 Ipsum No data Inactive 5h 15m\n\n456 No data 456 Active 4h 55m\n\n878 No data 878 Active 9h 10m\n\n895 No data 895 Active 8h 45m\n\n978 Ipsum No data Inactive 6h 35m\n\n2345 Lorem 2345 Active 11h 50m\n\n2445 No data 2445 Active 7h 25m\n\n3456 No data 3456 Active 12h 00m\n\n4567 No data 4567 Active 10h 20m\n\n7354 Lorem 7354 Active 10h 30m\n\n70 / 100\n\nLoad more\nTableSettingsDialog - column sort only\nLabel Table view\nCards view\nList view\n\nId Name VIN Status\n\n233 Ipsum No data Inactive\n\n895 No data 895 Active\n\n7354 Lorem 7354 Active\nTableRowSelection (Multiselect)\nTable view\nCards view\nList view\n\nId Name VIN Manufacturer\n\n7354 Elit.\nLorem eget 0123abc MAN\n\n7355 Dui amet, sit elit. 1123abc MAN\n\n7356 Sit amet, ipsum dolor elit. 2123abc MAN\n\n7357 Dui sit dolor 3123abc MAN\n\n7358 Eget elit. 4123abc MAN\n\n7359\nLorem amet, ipsum\nLorem dolor 5123abc MAN\n\n7360 Dui dolor dui amet, 6123abc MAN\n\n7361 Ipsum amet, sit sit ipsum 7123abc MAN\n\n7362\nLorem dui\nLorem 8123abc MAN\n\n7363 Eget elit. dolor 9123abc MAN\nNative table style variants\nBordered table\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nStriped table\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nHover table\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nCondensed table\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nFixed table layout\nThe table-layout-fixed class avoids a horizontal overflow by squeezing all columns together. Use this option with caution since columns with a fixed width cannot be compressed any further, and the content of the squeezed columns may not be readable anymore.\nHead column Head column Head column Head column Head column\n\nEvery column has a different length of content but the width of each colum is always the same\nEvery column has a different length of content but the width of each colum is always the same\nEvery column has a different length of content but the width of each colum is always the same\nEvery column has a different length of content but the width of each colum is always the same\nResponsive tables\nTables - by design - are not great for small screens. Columns get squeezed together, and content is hard to read or gets cut off.\n\nThere are some options to tackle this problem\n\n- Wrapping the table in another div element and using the class table-responsive on that wrapper. That will create a horizontal overflow of the table when the available space exceeds.\n- Try to avoid defining a fixed width on all columns as that avoids shrinking columns automatically for smaller screens.\n- Use alternative representations for the table by either rendering a list instead of on small screens or using the table cards view on mobile screens.\n- Use class ellipsis-1 for column header or table cell content when the text gets truncated and to show the \"...\" at the end.\nTable cards\nNew Button\n\nFilter\n\nTable view\nCards view\nList view\n\nId Id\nName\nVIN\nStatus\nDuration\n\nId Name VIN Status Duration\n\n233 Ipsum No data Inactive 5h 15m\n\n456 No data 456 Active 4h 55m\n\n878 No data 878 Active 9h 10m\n\n895 No data 895 Active 8h 45m\n\n978 Ipsum No data Inactive 6h 35m\n\n2345 Lorem 2345 Active 11h 50m\n\n2445 No data 2445 Active 7h 25m\n\n3456 No data 3456 Active 12h 00m\n\n4567 No data 4567 Active 10h 20m\n\n7354 Lorem 7354 Active 10h 30m\n\n70 / 100\n\nLoad more\nStates in tables\nHead column Head column Head column Head column Head column\n\nNo entries found\nWe could not find any data entries for your search query. Please refine your search\nGrouped table\nHead column Head column Head column Head column\n\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column\nExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column\nExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nCompactRow column CompactRow column CompactRow column CompactRow column\nTable grid lines\nShowing table grid lines my be used in data heavy tables also known as DataTables.\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nSticky table header\nSticky column head Sticky column head Sticky column head Sticky column head\n\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nColumn Column Column Column\nSticky table columns\nHead Head Head Head Head Head Head Head Head\n\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nSticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here\nHead Head Head Head Head Head Head Head Head\n\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nContent goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column\nTable row span\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column\nColumn Column Column Column\nColumn Column Column\nTable double row header\nDouble row header with filled header\nScores\nHead column Head column Head column Head column\n\nColumn Column Column Column\nColumn Column Column Column\n\nDouble row header with border and footer\nYears\n2021 2022 2023 2024 2025\n\nProduct 1 Income 50 70 80 90 100\nExpense 37 63 70 82 91\nProfit 13 7 10 8 9\n\nProduct 2 Income 50 67 79 90 54\nExpense 33 70 50 79 30\nProfit 17 -3 19 12 21\n\nTotal Profit 30 4 29 20 30",
+    "searchText": "HTML table\nThese helpers are intended for table implementations that render native <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements.\nHTML table\nInfo: In order to have proper alignment of table cell content for list and cards view, it is required to wrap the content in a <spantag.\n\nInfo\n\nSee also our table controls for shared toolbar and search components, and Table component for the grid-based table component and related demos.\nTable\nCommon table style\nLabel New Action\n\n‹ 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"
@@ -714,7 +714,7 @@
     "title": "Multiselect",
     "lead": "The Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.",
     "summary": "The Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.",
-    "searchText": "Multiselect\nThe Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.\nMultiselect\nThis component allows the selection of multiple items from a list.\n\nIf no item is selected in the list a default placeholder text is displayed in the box. Otherwise the items are listed in the box. If the item list is too long for the box, it is truncated and an ellipsis is displayed.\n\nA maximum of seven items is displayed in the list at a time. If the list contains more that 6 items, a scrollbar is added in order to limit the height of the list.\n\nThis component supports items with icons and labels.\nDefault Multiselect Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9 with clear button Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9 Disabled Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\n\nwith external error feedback Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9 This is an error message\n\nwith built-in error feedback\nOption 1 Option 4 This is an error message\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nWith label component\nPlease select vehicles\n\nTruck\nVan\nBus\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nMultiline with wrapping items\nOption 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 8\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\nOption 10\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nWith selected item counter Please select Option 1\nOption 2\nOption 3 With selected item counter render function - Note: \"counterMessage\" should be favored Please select Option 1\nOption 2\nOption 3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nInline: Please select vehicles Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nPlease select vehicles Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nFull width: Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nPlease select Option 1\nOption 2\nOption 3\nOption 4\n\nPlease select Option 1\nOption 2\nOption 3\nOption 4\n\nOption 1\nOption 2\nOption 3\nOption 4\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |",
+    "searchText": "Multiselect\nThe Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.\nMultiselect\nThis component allows the selection of multiple items from a list.\n\nIf no item is selected in the list a default placeholder text is displayed in the box. Otherwise the items are listed in the box. If the item list is too long for the box, it is truncated and an ellipsis is displayed.\n\nA maximum of seven items is displayed in the list at a time. If the list contains more that 6 items, a scrollbar is added in order to limit the height of the list.\n\nThis component supports items with icons and labels.\nDefault Multiselect Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9 with clear button Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9 Disabled Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\n\nwith external error feedback Option 1 Option 4 Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9 This is an error message\n\nwith built-in error feedback\nOption 1 Option 4 This is an error message\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nWith label component\nPlease select vehicles\n\nTruck\nVan\nBus\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nMultiline with wrapping items\nOption 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 8\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nGroup Header\nOption 8\nOption 9\nOption 10\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nWith selected item counter Please select Option 1\nOption 2\nOption 3 With selected item counter render function - Note: \"counterMessage\" should be favored Please select Option 1\nOption 2\nOption 3\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nInline: Please select vehicles Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nPlease select vehicles Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nOption 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n\nFull width: Option 1\nOption 2\nOption 3\nOption 4\nOption 5\nOption 6\nOption 7\nOption 8\nOption 9\nOption 10\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nPlease select Option 1\nOption 2\nOption 3\nOption 4\n\nPlease select Option 1\nOption 2\nOption 3\nOption 4\n\nOption 1\nOption 2\nOption 3\nOption 4\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |\nMultiselect with incrementally loaded options Please select shipment states No matching shipment state\n\nLoad options in two steps Reset\nNo options loaded\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | — | Passed through as HTML attribute to the toggle button. |\n| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |\n| options | Array of Objects | [] | Items to display in the dropdown menu. |\n| └id | String | — | Used to identify an option |\n| └label | String / Node | — | The option item text |\n| └icon | Node | — | Icon to be displayed in front of the label |\n| └selected | Boolean | false | Defines whether the menu item is selected. |\n| └disabled | Boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | false | Will treat the given value as a menu header. |\n| value | Array | — | Sets the ids of the selected options when the component is already mounted. |\n| onChange | Function | () ={} | Callback function triggered when an item is selected. |\n| placeholder | String / Node | — | Text to display when nothing is selected. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to \"true\" additionally disables autoDrop feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to \"true\" additionally disables autoDrop feature. |\n| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |\n| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |\n| variant | 'default' \\| 'blank' | 'default' | Defines the visual variant of the select. |\n| disabled | Boolean | false | Option to disable the opening of the option list. |\n| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |\n| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |\n| useFilter | Boolean | false | Defines whether the component should be filterable. |\n| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |\n| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |\n| └one | String / Node | — | Text that will be used when a single item is selected. |\n| └many | String / Node | — | Text that will be used when multiple item are selected. |\n| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |\n| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |\n| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |\n| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |\n| inputAddon | String \\| ReactNode | — | Option to add an icon as a leading input addon to the select component. |\n| errorMessage | String | — | Input error message. |\n| warningMessage | String | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'prewrap' \\| 'nowrap' | 'normal' | Optional warning message white-space setting. |\n| dropdownClassName | String | — | Additional classes to be set to the dropdown. |\n| btnClassName | String | — | Additional classes to be set to the select/input. |\n| className | String | — | Additional classes to be set to the select wrapper. |",
     "category": "Components",
     "section": "Selection",
     "boost": "Multiselect components/multiselects #components/multiselects Components Selection"
@@ -904,7 +904,7 @@
     "title": "SaveableInput",
     "lead": null,
     "summary": "SaveableInput",
-    "searchText": "SaveableInput\nSaveableInput\nSaveableInput\n\nSaveableInput with value\n\nSaveableInput with previous value\nDolor sit amet\n\nSaveableInput with fixed previous value\nYou shall not pass\n\nSaveableInput with default button style\n\nSaveableInput with unit and icon\nPcs\n\nSaveableInput with feedback\nLab\nThis is an error message\n\nDisabled SaveableInput\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nWith error feedback and disabled save button\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput\n\nRandomize values Clear values\n\n{\nvalue: '',\npreviousValue: ''\n}\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput with key validation\nPcs\n\n{\nvalue: '0',\npreviousValue: ''\n}\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nSaveableDateInput\nSaveableDateInput (uncontrolled)\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\nControlled - Stay open on invalid (default)\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n04:57\n\nSaved value:\n\nControlled - With error\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹ 2026 ›\n\nJan Feb Mar Apr\nMay Jun Jul Aug\nSep Oct Nov Dec\n\nSaveableDateInput (disabled)\n\n‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n4:57 PM\n### SaveableDateInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| value | Date \\| Moment \\| string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: Moment \\| string, previousValue: Moment \\| string \\| Date) =void | — | Callback function triggered when the value changes and is saved. |\n| onInputChange | (value: Moment \\| string, isValid: boolean) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component and to handle the previous value on the outside. |\n| onExitEdit | (wasSaved: boolean) =void | — | Callback function that gets triggered when edit mode is exited (either saved or cancelled). |\n| onCancel | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| invalidExitBehavior | 'stay-open' \\| 'reset-and-close' | 'stay-open' | Behavior when trying to exit edit mode with invalid input: - 'stay-open': Keep edit mode open until valid input is provided - 'reset-and-close': Close edit mode and reset to initial value |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | {} | Additional props passed to the underlying DatePicker component. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
+    "searchText": "SaveableInput\nSaveableInput\nSaveableInput\n\nSaveableInput with value\n\nSaveableInput with previous value\nDolor sit amet\n\nSaveableInput with fixed previous value\nYou shall not pass\n\nSaveableInput with default button style\n\nSaveableInput with unit and icon\nPcs\n\nSaveableInput with feedback\nLab\nThis is an error message\n\nDisabled SaveableInput\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nWith error feedback and disabled save button\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput\n\nRandomize values Clear values\n\n{\nvalue: '',\npreviousValue: ''\n}\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput with key validation\nPcs\n\n{\nvalue: '0',\npreviousValue: ''\n}\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nSaveableDateInput\nSaveableDateInput (uncontrolled)\n\n‹ 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‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nTableToolbar button\n\nTableToolbar label\n\nTable view\nCards view\nList view\n### TableToolbar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Optional class names for the wrapper element. |\n| collapseCardClassName | string | — | Optional class names for the card that wraps collapsed toolbar controls in the compact mobile layout. |\n| responsiveCollapseBreakpoint | number | 544 | Optional toolbar width in pixels at which the toolbar switches into its compact mobile/collapsible layout. |\n| disableResponsiveCollapse | boolean | false | Disables the compact mobile/collapsible toolbar layout. Use this as an escape hatch when a consuming service needs to keep the default wrapping toolbar behavior regardless of the available toolbar width. |\n### TableCardsSorting\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| sortName | string | — | \"Name\", \"Key\", or \"Id\" of the current sorted column. |\n| sortOrder | 'asc' \\| 'desc' | 'asc' | Defines the sort direction. |\n| selectOptions | TableCardsSortingOption[] | — | List of objects for the column name select component. |\n| └id | string | — | ID to use for the select option. |\n| └label | string \\| React.ReactNode | — | Translated column label to be shown in the select. |\n| └selected | boolean | — | Defines the column which is currently sorted by. |\n| └disabled | boolean | — | Defines if the column can be sorted. Hence, it will be disabled in the select. |\n| onSortChange | (name: string, order: 'asc' \\| 'desc') =void | noop | Function that is called when the sort key or direction changes. |\n| className | string | — | Optional class names for the wrapper element. |\nTableSearch\nID\n\nName\n\nStatus\n\n7354\n\nVehicle 7354\n\nActive\n\n233\n\nVehicle 233\n\nInactive\n\n895\n\nVehicle 895\n\nActive\n\n3456\n\nVehicle 3456\n\nActive\n### TableSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Optional class names for the wrapper. |\n| ...additional props |  | — | As this component is using the ClearableInput component internally, checkout all possible props there. |\nTableViewToggles\nTable view\nCards view\nList view\n\nID\n\nName\n\nStatus\n\n7354\n\nVehicle 7354\n\nActive\n\n233\n\nVehicle 233\n\nInactive\n\n895\n\nVehicle 895\n\nMaintenance\n### TableViewToggles\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| viewType | TableViewTogglesViewType | — | The current viewType for controlling the TablesViewToggles component. Possible values are: 'SINGLECARD' 'MULTICARDS' 'TABLE' TableViewToggles.VIEWTYPETABLE TableViewToggles.VIEWTYPESINGLECARD TableViewToggles.VIEWTYPEMULTICARDS |\n| initialViewType | TableViewTogglesViewType | TableViewToggles.VIEWTYPETABLE | Defines the initial viewType (when viewType is not controlled from the outside). Possible values are: 'SINGLECARD' 'MULTICARDS' 'TABLE' TableViewToggles.VIEWTYPETABLE TableViewToggles.VIEWTYPESINGLECARD TableViewToggles.VIEWTYPEMULTICARDS |\n| disabledViewTypes | TableViewTogglesViewType[] | [] | Defines the view types which shall not be supported and are omitted. |\n| onViewTypeChange | (viewType: TableViewTogglesViewType) =void | — | Callback function for when the user wants to change the viewType. Receives the new type as an argument. |\n| tableViewTooltipContent(deprecated) | string \\| ReactNode | — | Optional tooltip content for table view button. |\n| tableViewLabel | string \\| ReactNode | — | Optional label content for the table view select item. |\n| singleCardViewTooltipContent(deprecated) | string \\| ReactNode | — | Optional tooltip content for single card view button. |\n| singleCardViewLabel | string \\| ReactNode | — | Optional label content for the single card view select item. |\n| multiCardsViewTooltipContent(deprecated) | string \\| ReactNode | — | Optional tooltip content for multi card view button. |\n| multiCardsViewLabel | string \\| ReactNode | — | Optional label content for the multi cards view select item. |\n| disabled | boolean | false | Disables all buttons. This means the buttons cannot be clicked. Used when disabling toolbar buttons during loading state or when the corresponding table is empty. |\n| className | string | — | Optional class names for the wrapper element. |\nTableRowActionsDropdown\nUse TableRowActionsDropdown as the standardized overflow trigger for secondary row actions. It keeps the horizontal options icon and button styling consistent across different table implementations.\nWorkflow\n\nWhen to use it\n\nActions\n\nArchived order\n\nSecondary actions in a compact overflow trigger.\n\nDelivery run\n\nUses the same trigger for consistent row-action menus.\n### TableRowActionsDropdown\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| aria-label | string | 'Row actions' | Accessible label applied to the icon-only trigger button. |",
+    "searchText": "Table controls\nThe toolbar and its content has to be implemented by each team itself. Please use the sample as a reference and adapt it accordingly.\nTable controls\nThese controls can be used with both Table component and HTML table components.\nTableToolbar\nTableToolbar label\n\n‹ 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\nIn, In pharetra ante elementum ac nunc in Duis\n\nItem 2\nEfficitur efficitur elit. molestie faucibus. in, tortor volutpat Duis tincidunt. ante purus\n\nItem 3\nLibero fringilla ut ligula dolor ligula sit Vivamus semper posuere est quis, viverra in,\n\nItem 4\nConsectetur pharetra nunc efficitur volutpat\n\nItem 5\nIn nec dui aliquam adipiscing metus\n\nItem 6\nElit. eget ac quis, semper. sem.\n\nItem 7\nUt finibus hendrerit aliquam amet, consectetur\n\nItem 8\nPrimis ac et scelerisque aliquam Sed pharetra fames consectetur lorem in\nLorem velit. nunc\n\nItem 9\nDuis pretium orci, consectetur condimentum sit ante in posuere vel purus ante primis sem. nunc\n\nItem 10\nEfficitur purus pharetra faucibus. primis purus\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container |\nVirtual list with 5000 items\nVehicle 1\nFelis. dolor et libero Vivamus massa, efficitur consectetur consectetur efficitur ligula elit. Interdum\n\nVehicle 2\nPrimis eget amet, est ante ante lorem bibendum, semper sem. elementum\n\nVehicle 3\nAdipiscing tincidunt. est Vivamus eget nec\n\nVehicle 4\nEt neque. metus ac efficitur hendrerit\n\nVehicle 5\nNeque. Mauris malesuada tincidunt. Mauris condimentum\n\nVehicle 6\nUt massa ante ante nunc ipsum et\n\nVehicle 7\nSed primis eget ligula in, purus vitae in orci pharetra\n\nVehicle 8\nAdipiscing et rutrum neque. fringilla\n\nVehicle 9\nCondimentum efficitur Mauris in dui faucibus. rutrum\n\nVehicle 10\nViverra massa, ante felis. Sed ut ligula volutpat\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container |",
+    "searchText": "VirtualList\nThe VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.\nVirtualList\nIt allows a specified number of items outside the viewport for smoother scrolling. It optimizes performance by minimizing DOM updates and provides a customizable rendering function for each item, making it ideal for applications that require dynamic and responsive list displays.\nVirtual list with 100 items Item 1\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": "- Update Select and Multiselect Added a new variant prop with a blank variant to remove the wrapper shadow and toggle border/shadow.",
-    "searchText": "Changelog\nVersion 2.4.0 (2026-04-27)\n- Update Select and Multiselect Added a new variant prop with a blank variant to remove the wrapper shadow and toggle border/shadow.\n\n- Fixed Forms Fixed sized inputs with form-control so they use the correct font size again.\n\n- New Map viewport history Added viewport history for maps, including MapPreviousViewportButton for jumping back to previous map position states.\n\n- Fixed Map settings Fixed map settings dropdowns so they are displayed properly when opened.\n\n- New Table Added TableExpandAllGroupsButton for grouped tables and new grouped-row demos showing row selection across expandable groups and selectable group rows.\n\n- Update Table Added a new selectionCheckboxVerticalAlignment prop so checkboxes can be aligned independently.\n\n- Update Table Moved vertical alignment styling to the cell level for table head and body cells, which avoids header pixel jumping and keeps row-spanned headers aligned correctly.\n\n- Fixed Table Fixed table rows collapsing in overflow state when no rows with columns are available to define the table width.\n\n- Fixed Table Fixed header rendering for interactive header content and updated selection logic so selectable expanded group rows and selectable group rows work correctly with table selection.\nVersion 2.3.0 (2026-03-20)\n- New useDraggableElement Added a new useDraggableElement hook to make DOM elements draggable with pointer events, including support for dedicated drag handles.\n\n- New CSS Animations Added a new foundations demo page for CSS animations with interactive slide, fade, scale, and rotate examples, including controls for duration, delay, easing, repeat, looping, and playback.\n\n- New AI Assistant template Added a new template demo for AI-assisted service queries that turns a request into a structured response card with loading states and result tables.\n\n- Update Multiselect Added a new useClear prop to clear the current selection from the toggle, aligned with the existing Select API and documented in the multiselect demo page.\n\n- Update ButtonDropdown Added a new iconName prop and forward it to the underlying button toggle, so icon buttons no longer need custom title markup just to render a rioglyph with a button text.\n\n- Update Route Route interactions now show a pointer cursor for clickable routes and support an optional hoverStyle. Route clicks and hover now use an internal hit area to enlarge the clickable surface and make route interaction more reliable.\n\n- Update Polygon & Isoline Polygons and isolines now support click and hover interactions, including automatic pointer cursors for clickable shapes and an optional hoverStyle for hover feedback such as highlighted outlines.\n\n- Update Map performance Added marker icon caching for map markers and cluster markers, which avoids recreating identical marker icons, speeds up large marker sets, and can reduce memory usage by reusing shared DOM icon instances. Also added an optional zoom optimization to temporarily suppress marker pointer events during zoom interactions.\n\n- Fixed useResizeObserver Fixed repeated state updates when ResizeObserver reported the same size, which could trigger render loops under certain conditions.\n\n- Fixed routeUtils Fixed parseSorting to return the documented asc / desc sort direction values, so URL-based table sorting no longer resets after parsing in controlled integrations.\n\n- Fixed Fixed incorrect:focus-visible outlines on text links in Chrome 147 after the browser changed how outline-width and outline-style are computed.\n\n- Fixed InfoBubble Adjusted the HERE map InfoBubble to use the active theme font-family instead of HERE default font styles. Also added a new demo showing an InfoBubble opened from a POI map marker.\n\n- New DayPicker Added a new composable DayPicker component for date inputs with dropdown calendar, custom triggers, sidebars, footers, presets, validation, and composed date/time workflows.\n\n- New DayPickerCalendar Added a new standalone DayPickerCalendar component for embedded calendar use cases, including single, multiple, and range selection plus custom modifiers and day content.\n\n- New Table Added a new declarative Table component with compound subcomponents for headers, rows, cells, footers, grouped sticky rows, expandable rows, selection, sortable and resizable columns, column filters, disabled rows, row animations, and responsive card views.\n\n- New TableToolbar Added the new compound TableToolbarColumn API for declarative toolbar layouts with automatic left/right grouping via alignment, optional label and separator, plus per-column className support. Existing manual toolbar markup remains supported.\n\n- Update TableViewToggles Redesigned TableViewToggles to use a Select-based view switcher instead of the former toggle button group. Added dedicated label props for the dropdown items, while the older tooltip props are now deprecated and only kept as a fallback for item labels.\n\n- Update LoadMoreButton Added the new hideOnPrint prop, defaulting to true.\n\n- New AnalyticsAnalysisOverlay Added a new AnalyticsAnalysisOverlay component to visualize tracked elements on the page using uploaded analytics CSV data.\n\n- New googleAnalyticsUtils Added a new Utilities helper demo page for googleAnalyticsUtils with examples for getTrackingAttributes.\n\n- Update Button Added support for automatic GA tracking attributes via the new autoTrackingKey prop.\n\n- Update ExpanderPanel Added support for tracking attributes on panel headers, so getTrackingAttributes will be passed directly to ExpanderPanel.\n\n- Update ExpanderList Added support for tracking attributes on expander item, so getTrackingAttributes will be passed directly to ExpanderListItemHeader.\n\n- New New icons rioglyph- big-bag rioglyph- bulk-container rioglyph- coil rioglyph- roll-container rioglyph- shelve-empty rioglyph- stillage\nVersion 2.2.1 (2026-03-06)\n- Fixed TableSettingsDialog Fixed the TableSettingsDialog to prevent an endless loop under certain conditions.\nVersion 2.2.0 (2026-02-23)\n- Fixed Map utils Fixed getRoutePolylines to return the correct HERE map Polyline list. Also corrected the return types for getGroups, getMarkers, and getRoutePolylines to use the proper map object types.\n\n- Fixed RadialBarCharts Fixed RadialBarCharts responsive container to remove the fixed initial dimension, allowing charts to take the available width of the parent container.\n\n- Fixed Select Prevent double box-shadow on Select and Multiselect inside input groups with icon addons.\n\n- Fixed labels Fixed label heights for condensed filled labels to align with default condensed labels.\n\n- Fixed Map settings Fixed the map settings options animation so dropdowns/panels now fade in and slide up when opened.\n\n- Update MapTypeSettings Added visibleMapTypes for map-type visibility control via a single prop. The enableNightMap prop is now deprecated. Please control night visibility via visibleMapTypes instead.\n\n- Update TimePicker Add a new disabled prop to disable the TimePicker input and its control buttons. If you previously set disabled via inputProps, you can now use the dedicated component prop instead. The TimePicker now also calls onChange when the input is cleared. Added a new dropdown prop for selecting times from a dropdown, and a minuteOffset prop to define the dropdown interval and button step size.\n\n- Update Button Added support for rendering Button as an anchor element via the new as prop. Use as='a' together with a required href to render a link button while keeping native button type values for button elements.\n\n- Update Notification Improved notification message readability by balancing line wraps in notification text content.\n\n- Update Switch Added a new autoMinWidth prop. When minWidth is not set and autoMinWidth is true, the switch width uses the longer one of enabledText and disabledText.\n\n- New CircularProgress Added new CircularProgress component.\n\n- New Tracker Added a new Tracker component for compact status visualization with tooltip support, automatic block compression, and optional collapsing when the minimum block width is reached.\n\n- New RadioCardGroup Added a new RadioCardGroup component for custom card-style radio selection, including inline, stacked, and stacked-horizontal variants with both options-based and compound-item APIs.\n\n- New Pills condensed Added a nav-pills-filled-condensed version of filled nav-pills for use next to form elements like buttons and selects. This keeps heights aligned and provides a clearer way to indicate different views. Prefer these over the toggle button group for view switching.\n\n- New Shadows Added configurable hover-shadow-* utility classes with built-in transition support and a new shadow-focused utility class for a focused shadow preset.\n\n- New useSearchHighlight / SearchHighlightText Added the useSearchHighlight hook and SearchHighlightText component for native CSS highlight-based search results.\n\n- New useCookies Added a new useCookies hook for setting, deleting, and checking browser cookies.\n\n- New useRioCookieConsent Added a dedicated useRioCookieConsent hook for parsing the RIO cookie_settings consent cookie and returning typed RioCookieConsentInfo.\n\n- New useUrlState, routeUtils Added the new useUrlState hook and updated routeUtils for simpler state-in-URL parsing/serialization with native URLSearchParams and typed URL config support.\n\n- New classNames, mergeClassNameOverrides Added new utility helpers for CSS class handling: classNames for composing optional class tokens and mergeClassNameOverrides for overriding utility-class groups while keeping unrelated defaults.\n\n- New ellipsis-middle Added new ellipsis-middle utility class for truncating text in the middle while keeping the suffix visible.\n\n- New TextTruncateMiddle Added a new TextTruncateMiddle component for rendering middle-truncated text with a configurable suffix length.\n\n- New New icons rioglyph- trailer-standard rioglyph- trailer-tipping rioglyph- trailer-liquid rioglyph- palette-empty rioglyph- box rioglyph- box-open rioglyph- mesh-box\n\n- Guideline State in URL guideline Added a dedicated guideline page for deep linking and URL state, including best practices for what to store in URLs and pushState vs replaceState usage.\nVersion 2.1.0 (2026-01-13)\n- Fixed Map context menu Fixed the typing for the ContextMenuItem component.\n\n- Fixed Map route Fixed the typing for the arrowStyle prop of the Route component.\n\n- Fixed Map SimpleClusterLayer type Fixed the typings for the SimpleClusterLayer component’s simpleTheme prop. Please use the new SimpleClusterTheme type instead of the ClusterTheme.\n\n- Fixed Dialog Fixed broken fade animation of Dialogs in Firefox.\n\n- Fixed TableSettingsDialog Fixed TableSettingsDialog so reset to default remains available after reopening when settings differ from defaults.\n\n- Fixed Select Fixed select filter regressions where hitting ‘nothing found’ could leave the dropdown stuck or missing options. Backspacing or clearing now restores the full list and keeps keyboard focus/highlights in sync. Dropdown scroll now resets on reopen and keeps the keyboard-focused item in view when navigating up and down with the arrow keys.\n\n- Update URL feature toggles Replaced the internal \"qs\" library used for parsing URL search parameters with the native URLSearchParams API, allowing us to remove the external dependency. This also solves the vulnerability issue with the \"qs\" library for this version.\n\n- Update Tree Extended the Tree component to support custom external icon and logo URLs.\n\n- Demo Updated the component prop documentation for most components by deriving it directly from the component type definitions and source files. This ensures more accurate documentation and reduces maintenance effort for the demo pages.\nVersion 2.0.1 (2025-12-15)\n- Fixed DatePicker Fixed DatePicker compatibility in ESM builds by unwrapping the CommonJS default export.\n\n- Fixed Area, Line Fixed chart components type definition for prop \"dataKey\".\nVersion 2.0.0 (2025-12-12)\n- Removed We’ve modernized our build setup by removing CommonJS support and switching entirely to ESM. If your project still depends on CommonJS (for example, with older tooling like Webpack), your build may fail. Please update your development environment to support ESM.\n\n- Removed Removed the root index.js barrel file that re-exported all components. This change eliminates multiple import paths, improves IntelliSense auto-import behavior, and prevents importing the entire UIKIT, ensuring proper tree shaking. Please update your imports to use default imports, for example: import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout'.\n\n- Removed CalendarStripe Removed deprecated prop \"render\". Please use \"renderDay\" instead.\n\n- Removed Collapse Removed deprecated prop \"in\". Please use \"open\" instead.\n\n- Removed ClearableInput Removed deprecated prop \"alwaysShowMask\". Please use \"maskVisibility='always'\" instead.\n\n- Removed Dialog Removed deprecated prop \"onHide\". Please use \"onClose\" instead.\n\n- Removed SingleMapMarker Removed deprecated prop \"size\". Please use \"anchorSize\" instead. Removed deprecated prop \"visibleOnHover\". Please use \"markerOnHover\" instead.\n\n- Removed DataTab Removed the internal \"fade in\" class names from the DataTab component, which were previously kept for backward compatibility with CSS transitions used in older service tests. Please use the new onAnimationStart and onAnimationEnd callbacks instead.\n\n- Renamed Animations Renamed \"framer-motion\" component to \"motion\" as we have migrated to the latest motion library that was formerly known as Framer Motion.\n\n- Removed NotificationsContainer Removed deprecated prop \"stacked\" since it is not supported anymore. Removed legacy usage documentation.\n\n- Breaking Notification Removed deprecated prop \"priority\" since it is not supported anymore. Removed old notification API in favor of the notifications options object. If you still use the legacy API \"Notification.info(message, title, timeOut, callback, priority)\", please migrate to the format \"Notification.info(message, options)\".\n\n- Removed OnboardingTip Removed deprecated prop \"clickflow\". Please use the \"useOnboardingTour\" hook instead.\n\n- Removed Radiobutton Changed the onChange callback so it is only used in the controlled use case, as already documented in earlier versions. For uncontrolled usage, please use the onClick callback instead.\n\n- Removed NumberInput / NumberControl Removed deprecated prop \"onValueChanged\". Please use \"onChange\" instead.\n\n- Removed Sidebar Removed deprecated prop \"enableNavigationButtons\". Please use \"headerButtons\" instead. Removed deprecated prop \"disableFullscreen\". Please use \"enableFullscreenToggle\" instead. Removed deprecated prop \"fullscreen\". Please use \"openInFullscreen\" instead.\n\n- Removed Removed old class \"invisible\". Please use \"visibility-hidden\" instead.\n\n- Icons Renamed icon rioglyph- retweet rioglyph- repeat-square Renamed icon rioglyph- cost-efficency rioglyph- cost-efficiency Renamed icon rioglyph- eye-option rioglyph- eye-open Removed icon as it was a duplicate of rioglyph- component rioglyph- maintenance-components\n\n- Breaking BarChart, RadialBarChart, PieChart, Legend With this release, the internal Recharts dependency has been migrated to version 3.x. This upgrade introduces a breaking change related to the Legend component: the payload prop, which was previously used internally to inject custom legend data, has been removed from Recharts. As a result, the legend behavior in BarChart and RadialBarChart has been updated. The default legend position is now correctly rendered vertically in the top-right corner. Previously, it appeared at the bottom despite the default settings. Please review your charts to ensure the legend position remains as intended. If you use colors defined inside your data objects for BarCharts, you must now provide both the items (your data array) and a custom content render function to the Legend. This replaces the old payload-based legend behavior. Series-based legends using a formatter continue to work as before. Recharts 2.x also used to have a prop named activeIndex that was setting which item the user was interacting with. In version 3.0, this prop has been removed. For more details, see the Recharts activeIndex guide https://recharts.github.io/en-US/guide/activeIndex/ If your PieChart uses an activeShape render callback, you should now use the ChartTooltip component and set its defaultIndex to replace the previous activeIndex behavior. See the whole Recharts migration guide for more details: https://github.com/recharts/recharts/wiki/3.0-migration-guide#breaking-code-changes\n\n- Fixed FilePicker Fixed the type of the \"files\" parameter from FileList to File[] of the \"onPick\" callback.\n\n- Fixed Rioglyph Fixed Rioglyph icon typing to expose a concrete IconType union of all icon names, improving autocomplete and safety for consumers.\n\n- Update AssetTree Added new asset type \"car\" to AssetType type definition and to built-in type counter of the AssetSummary for the Tree component.\n\n- Update VolkswagenApplicationHeader Updated VolkswagenApplicationHeader with new VW Group logo. This single group logo also replaces the logo for \"VW Aktiengesellschaft\" and \"Group Logistics\" resulting in an overall smaller header height.\n\n- Update Migrated entire codebase from lodash to es-toolkit to leverage modern JavaScript.\n\n- New AnimatedTextReveal Added new AnimatedTextReveal component emphasize text through motion for showing incremental updates or loading states.\n\n- New useAutoAnimate Added a lightweight hook to animate add/remove/reorder operations of children with zero configuration.\n\n- New fit-content Added new \"min-width-fit-content\" utility classes. See detailed explanation and comparison to other content-based min-width classes.\n\n- New text-box Added new \"text-box\" utility classes to trimming off extra spacing from the block-start edge and block-end edge of a text element's block container.\n\n- New icons Added new rioglyph style for disabled icons with a line\n\n- New useIncomingPostMessages and usePostMessageSender New tooling for sending and receiving postMessage events. We recommend utilizing \"action-style\" events if you control both ends of the communication. This simply means to send event objects with a type property and an optional payload - very similar to Redux actions. To receive messages, the new useIncomingPostMessages can be used. It allows a declarative style of registering action-style event handlers in your application. You can still use the \"simple\" event handler variants, when you're interested in receiving events that don't follow the action-style approach. The usePostMessageSender hook provides easy access to methods used to send message events either to a dedicated destination or to \"broadcast\" events to all iframes. Note that the existing usePostMessage hook will be deprecated in a future release.\n\n- Icons New icons rioglyph- ai rioglyph- arrows-collapse rioglyph- arrows-combine rioglyph- arrows-expand rioglyph- arrows-horizontal rioglyph- arrows-split rioglyph- assigned rioglyph- axis-x rioglyph- axis-y rioglyph- axis-z rioglyph- bar-chart-box rioglyph- battery-charging rioglyph- brain rioglyph- branch-horizontal rioglyph- branch-remove rioglyph- branch-vertical rioglyph- broadcast rioglyph- bulb rioglyph- chip rioglyph- cloud-progress rioglyph- coffee rioglyph- compass rioglyph- crown rioglyph- discount-badge rioglyph- emergency-stop rioglyph- eye-closed rioglyph- eye-open rioglyph- filter-reset rioglyph- get rioglyph- give rioglyph- globe-alt rioglyph- hierarchy rioglyph- history rioglyph- insert rioglyph- leafs rioglyph- magic-wand rioglyph- note rioglyph- progression rioglyph- satellite-radar rioglyph- stack-add rioglyph- stack-iso rioglyph- stats-high rioglyph- stats-line-dots rioglyph- stats-low rioglyph- stats-medium rioglyph- time-incomplete rioglyph- unassigned rioglyph- unavailable rioglyph- variable rioglyph- workflow-step rioglyph- workflow Updated icons rioglyph- arrow-down rioglyph- arrow-left rioglyph- arrow-right rioglyph- arrow-up rioglyph- battery-level-empty rioglyph- battery-level-full rioglyph- battery-level-low rioglyph- cloud-download rioglyph- cloud-not-saved rioglyph- cloud-upload rioglyph- compare rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- cost-efficency rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- error-sign rioglyph- flash rioglyph- info rioglyph- maintenance-components rioglyph- merge rioglyph- missing rioglyph- off rioglyph- refresh rioglyph- repeat rioglyph- resize-full rioglyph- resize-horizontal rioglyph- resize-small rioglyph- resize-vertical rioglyph- save rioglyph- trash rioglyph- volume rioglyph- workshop rioglyph- wrench Removed icons rioglyph- video-off rioglyph- wifi-off\nVersion 1.13.2 (2025-11-19)\n- Fixed Obfuscate data Fixed a bug that triggered an infinite loop when data-pii was applied to a nested child element.\n\n- Update Button Added new \"unstyled\" buttons style\nVersion 1.13.1 (2025-10-20)\n- Fixed Fixed bundling npm package. Resolve nested folder structure in npm package build.\nVersion 1.13.0 (2025-10-20)\n- Fixed fuel type utils Fixed missing root export for fuel type utils.\n\n- Fixed Action button style Fixed the muted style for action buttons.\n\n- Fixed MapMarker Fixed the active styling for the map marker active state to visually balance the state icon.\n\n- Update Rioglyph Added the missing feature to use external SVGs as a rioglyph icon.\n\n- Update FilePicker Added new \"fullHeight\" flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow.\n\n- New max-content Added new \"min-width-max-content\" and \"min-width-min-content\" utility classes. The first prevents content from breaking by expanding to fit its full width, while the second allows content to shrink to the smallest width possible without overflowing.\n\n- New Grid Added new \"grid-template-end--1\" utility class. This class allows grid items to span until the last grid line, effectively positioning them to extend to the end of the grid.\n\n- New Obfuscate data Added new \"data-hide-pii\" attribute to the <htmlelement to obfuscate sensitive data directly in the frontend. Obfuscate names, emails, or phone numbers — without needing backend filtering or extra code changes.\n\n- Icons New icons rioglyph- circle-dashed rioglyph- square-dashed rioglyph- cube-dashed rioglyph- cube rioglyph- group-blocks rioglyph- dashboard-view rioglyph- ok-dashed rioglyph- prompt rioglyph- recycle rioglyph- warehouse rioglyph- status-change rioglyph- status-change-horizontal rioglyph- transition-right rioglyph- transition-push-right rioglyph- migrate rioglyph- convert rioglyph- shelve rioglyph- conveyor-belt rioglyph- tracking-package rioglyph- issue-tracking Updated icons rioglyph- ok-sign rioglyph- ok-circle\nVersion 1.12.0 (2025-09-22)\n- Fixed Select Fixed an issue in the Select component where clearing the filter input after a no-results search caused the option list to remain incomplete. The dropdown now correctly restores the full option set when the filter is cleared.\n\n- Fixed AssetTree Fixed an issue where clicking the checkbox on a tree group would also toggle its expanded state. Now, selecting a tree group via its checkbox only triggers selection and no longer expands or collapses the group. This prevents unintended virtualization behavior where expanding a node could cause the tree to switch into virtualized mode, resulting in the loss of tree group selections.\n\n- Fixed Callout Removed overflow hidden from callouts so dropdowns can be shown correctly.\n\n- Fixed Ellipsis Fixed \"ellipsis-1\" class.\n\n- New Rioglyph, fuel type utils Added a new component for rendering Rioglyph icons as a span element. The component also supports paired icons, allowing two glyphs to be displayed together as a combined symbol. In addition, a \"getFuelIcon\" helper function was introduced that maps fuel types to their corresponding icons, ensuring consistent and correct icon usage across the application.\n\n- Update FormLabel Added missing \"Node\" type info for supportingText the props table and changed the handling of supportingText styling so that the text-italic class is only applied when the supportingText is a string. If you provide a string wrapped in a div or span, you have to set the italic class manually.\n\n- Update Tree Added a new \"pairIcon\" prop to TreeItem allowing pair icons to be individually specified in the Tree component.\n\n- Update ClearableInput Added new input mask related props \"maskOverwrite\", \"maskDefinitions\", and \"maskDispatch\" to support dynamic masking for more complicated use cases and to give more control over the masking.\n\n- Update useOnboardingTour Updated the typings and documentation for the useOnboardingTour hook.\n\n- style Pills Updated the hover style for the application header navigation as well as for the nav pills.\n\n- Icons As RIO will support more fuel types in the future, and because of inconsistencies in existing naming conventions, we introduced a new icon: \"rioglyph-fuel-liquid\". This icon replaces \"rioglyph-fuel-diesel\" to better represent a broader range of liquid fuels. With this change, there are now four dedicated fuel icons available, plus one for a mixed fuel type. rioglyph- fuel-liquid rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- fuel-mix With this approach, frontends can use the same icon for diesel or gasoline and also for CNG and natural gas by simply using the new \"getFuelIcon\" function form the Rioglyph component. The old “rioglyph-fuel-diesel” icon will continue to work, but it will no longer be listed in the UIKIT demo page icon list. Additional new icons: rioglyph- video rioglyph- video-off\n\n- Demo Service-specific settings Updated the ApplicationHeader demo to include an example of service-specific settings, establishing a consistent approach for presenting unique configurations that cannot be included in the global user profile settings. It helps ensure a familiar user experience across different services while keeping global settings clean and focused.\nVersion 1.11.0 (2025-08-11)\n- Fixed Map settings Updated implementation for map satellite view to support zoom limits by using a hybrid map layer approach.\n\n- Fixed SteppedProgressBar Fixed styling issue in circular variant of the SteppedProgressBar when an item is active.\n\n- Fixed SplitDialog Fixed left side width for larger dialogs. Added new prop to hide the split divider.\n\n- Fixed FormLabel Fixed usage of HTML tag label only when part \"htmlFor\" is set and has a value.\n\n- Update Tree Added a new \"expandedIcon\" prop to the TreeGroups to support showing a different icon when the group is expanded.\n\n- Update Sticky table columns Renamed \"table-sticky-cell-first\" and \"table-sticky-cell-last\" to \"table-sticky-column-first\" and \"table-sticky-column-last\" for improved clarity. Updated the styles to respect the table header and prevent content from peeking through when horizontally scrolled.\n\n- New useAverage, useCount, useMin, useMax, useSum Added useAverage, useCount, useMin, and useMax, and useSum hooks for locale-aware numeric aggregation of object lists. Supports specifying a dot-separated path to the target property.\n\n- New Table grid lines Added new table class \"table-grid-lines\" that is useful when building data heavy tables.\n\n- New Table row span and Table double row header Added new table examples showcasing row span and double header layouts to demonstrate table design capabilities for data heavy tables.\n\n- New Progress bars indeterminate style Added new indeterminate style to show a progress bar even when you not know how long it will take.\n\n- Demo Templates Added new template sections and several UI block examples. Updated the template menu structure to improve navigation and discoverability.\n\n- Demo Email generator We’ve built a neat little email editor that helps you compose emails and copy the HTML code.\n\n- Demo Route generator There is a new route generator with a JSON export of the LAT/LNG coordinates.\nVersion 1.10.1 (2025-01-08)\n- Fixed Map settings Changed implementation for map satellite view as the old implementation relied on deprecated Here APIs.\nVersion 1.10.0 (2025-07-28)\n- Fixed Fixed an issue where clicking the \"Scroll to Top\" arrow button would block further scrolling down the page. The scroll behavior is now fully restored after returning to the top, ensuring smooth navigation throughout.\n\n- Fixed DatePicker Fixed styling issue in DatePicker inputs with error feedback where input text was unnecessarily cut off due to padding for the clear icon, even when no clear button was rendered.\n\n- Fixed ApplicationHeader Fixed an issue where the application header rendered in mobile style on initial page load when the container width could not be determined in time. This resolves visual jumping between mobile and desktop header layouts during mount.\n\n- Fixed SavableInput / SavableDateInput Moved error handling into the components to simplify feedback styling. Added two new props, \"errorMessage\" and \"hideErrorIcon\", to control the visual appearance of error feedback.\n\n- Fixed Panels, Pills, Badges Fixed various element styles for brand themes.\n\n- Update Tree Added a new \"icon\" prop to TreeItem allowing icons to be individually specified or explicitly omitted in the Tree component. Also updated the TreeGroups to support icon values with or without the rioglyph- prefix for improved flexibility.\n\n- New CSS Container queries Introduced new utility classes to make use of container queries, enabling responsive spacing and layout adjustments based on container width rather than viewport size. For more details, please check out our responsiveness guidelines.\n\n- New Rounded table Added new utility classes \"table-bottom-rounded\" and \"table-rounded\" for use when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners.\n\n- Icons Added icons icons rioglyph- train rioglyph- cargo rioglyph- design\n\n- Style We migrated our codebase from Less to Sass to modernize our tooling and take advantage of the latest CSS capabilities, as Less is no longer actively maintained.\n\n- Demo Renamed the main navigation items to improve clarity and consistency. “Design” is now called Foundations, and “UI Templates” has been simplified to Templates to better reflect their purpose.\n\n- Demo Added new sections and examples to UI templates that serve as a quick starting point for developing your own layouts and interfaces. See Expandable details, Details views, and Progress cards. Moved the panel example from the foundations tab to Panel variants.\nVersion 1.9.0 (2025-06-30)\n- Fixed Tooltip / SimpleTooltip Fixed delaying tooltips using a single delay number. Tooltip delay now only applies to showing, not hiding. To configure both show and hide delays, use the object format instead of a single delay number.\n\n- Fixed ClearableInput Properly pass external ref to underlying masked input component using its inputRef prop.\n\n- Fixed DatePicker Fixed an issue where the DatePicker would render incorrectly when used as a child inside a table cell.\n\n- Update TableHead, TableCol Extended table components to pass additional props to the underlying tag.\n\n- Update useTableSelection Extended useTableSelection hook to allow setting the selected rows and change the active row from the outside using the \"setSelectedRowIds\" and \"setActiveRowId\" setter functions.\n\n- Update Select, Multiselect We’ve reverted the max-width of the Select, and Multiselect dropdown to 100% to stay consistent with other components and to prevent unnecessary line breaks within dropdown items. If the dropdown appears too wide, you can use the dropdownClassName prop to apply a shorter max-width-x utility class as needed.\n\n- Update AssetTree Extend the Tree component to virtualize tree items when a certain threshold is reached. The number of items rendered beyond the visible area can be controlled using the \"overscan\" prop. This change improves performance for large trees and long lists.\n\n- Update Map Extend the Map component to allow specifying minimum and maximum zoom levels. By default, the minimum zoom level is set to 3, defining the furthest zoomed-out view. The maximum zoom level, representing the closest zoomed-in view, is set to 20. Improved zoom behavior to reduce momentum and allow for more controlled zooming.\n\n- Update FormLabel Extend the FormLabel component to allow passing in a React element as supporting text, making it easier to add question mark icons with tooltips.\n\n- New SavableDateInput Added new dedicated savable input component that wraps the DatePicker.\n\n- New BarList Added BarList component to display customizable, animated horizontal bars for comparative data.\n\n- New useTableExport Added new custom hook to easily export table data as CSV.\n\n- New useIsFocusWithin Added new custom hook to easily detect if the focus is inside a defined document node.\n\n- Docu Pagination Added usage documentation for pagination and explained why the load more button is preferred for tables.\n\n- Demo UI Templates Added new sections showcasing various UI templates and blocks that serve as a quick starting points for developing your own layouts and interfaces.\nVersion 1.8.0 (2025-05-19)\n- Fixed Map Fixed issue with satellite view layer not rendering correctly when Norwegian language is selected.\n\n- Fixed usePostMessage Remove logging of triggered events to the console.\n\n- Fixed Height classes Corrected height calculation when using \"\"...-height-100vh\" classes inside module-content; vertical padding was not properly subtracted.\n\n- Update URL feature toggles Made the feature toggle value types more precise. Added new feature toggle definition functions that allow you to specify a default value.\n\n- Update AssetTree Extended the Tree component with an onTypeFilterChange callback, allowing the service to filter selected assets accordingly.\n\n- Update Multiselect Added a maximum width of 200px for the Multiselect dropdown component. Additionally, there are two new props \"dropdownClassName\" and \"btnClassName\" to allow further customization similar to the Select component.\n\n- Update ButtonToolbar Extend alignment prop to center buttons.\n\n- Update Switch Added new \"className\" prop to the Switch.\n\n- Update ButtonDropdown Added new prop \"toggleButtonType\" to ButtonDropdown component to allow using a button, a tag or a label as toggle element.\n\n- Update ClearableInput Added a new prop \"maskVisibility\" to control when the mask pattern is visible. Deprecated the prop \"alwaysShowMask\". in favor of maskVisibility.\n\n- Update useOnboardingTour Expose internal onDestroyed callback. Add \"disableActiveInteraction\" prop to disable interaction of highlighted elements.\n\n- Update useSorting Added new callback function \"setSortDirection\" allowing to set sort direction when used with table card sorting.\n\n- New useLocationSuggestions Added new custom hook to fetch locations from Here API that can be used for search inputs.\n\n- New useSearch Added new custom hook to filter a list of objects by a search value.\n\n- New useTableSelection Added new custom hook to handle both single and multiple row selection in tables, optimized for large datasets.\n\n- New TableHead, TableCol Added new table components \"TableHead\" and \"TableCol\" to simplify table structures especially when used with custom hooks like \"useTableSelect\" and \"useSorting\".\n\n- New SvgImage Added new component that helps rendering SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes.\n\n- Icons New icons rioglyph- envelope-open rioglyph- envelope-indicator\n\n- Replaced Replaced react-input-mask with react-imask in TimePicker and ClearableInput components. The mask prop format has changed and is no longer fully compatible with the old react-input-mask syntax. The main difference is the number placeholder, which has changed from \"9\" to \"0\". Please update the mask prop accordingly when using the ClearableInput with an input mask.\nVersion 1.7.1 (2025-02-14)\n- Fixed Banner Fixed height animation of the Banner component when expanding. Added prop \"initialAnimation\" to disable initial content animation.\n\n- Fixed FormLabel Check for various input group sizes to render respective label text sizes.\n\n- Fixed SplitDialog / ListMenu Fixed the issue where a ListMenu dropdown was rendering all menu items on mobile upon mount. Now, only the dropdown is rendered initially.\n\n- Fixed RIOglyph Removed default aspect ration of 1/1 because of problems in flex/grid layouts.\n\n- Fixed Checkbox Fixed broken indeterminate state\n\n- Update RIOglyph Added new rioglyph-align-top, rioglyph-align-bottom and rioglyph-align-baseline classes for proper alignment width texts. Replaced previously introduced has-inline-icon with new rioglyph-align classes.\nVersion 1.7.0 (2025-02-10)\n- Fixed Collapse Fixed visible content overflow in the Collapse and Expander components during content animations.\n\n- Fixed ApplicationLayout Fixed the issue with passing a ref to the ApplicationLayout by exposing the underlying wrapper element. When merging the external ref with the internal ref, the wrapper is now properly exposed, eliminating the need for accessing ref.current.current in the invoking component.\n\n- Fixed ButtonDropdown / useClickOutside Fixed performance of rendering many dropdowns in a large table by introducing an \"isActive\" flag to the useClickOutside hook so that events are only registered and listening when the dropdown is actually open.\n\n- Fixed Route Fixed rendering of dashed routes via the \"lineDash\" prop.\n\n- Fixed List groups Fixed list group buttons active style.\n\n- Icons RIOGlyph We've transitioned the RIOGlyph icon font to an SVG-based system and allowing support for custom SVGs. Please read our guidelines Almost all RIOGlyph implementations will work out of the box. However, in certain cases, adjustments are required because RIOGlyph icons no longer behave as a font. What has changed? Previously, icons acted like text, inheriting line-height and vertical-align naturally. Now, as SVG elements, icons better have layout adjustments in inline text scenarios. The HTML structure for MapMarkers has been changed to accommodate the new icons. Please update the DOM selectors in your tests accordingly if they rely on the markup. All icons can now also be displayed as filled icons by adding rioglyph-filled Recommended solution < span className = \" has-inline-icon \" Lorem ipsum dolor sit amet < span className = \" rioglyph rioglyph-face-smile \" </ span </ span Lorem ipsum dolor\n\n- Update Dialog Changed dialog footer to use flex layout to ensure proper button positioning. No more need to add \"pull-right\" or custom flex classes.\n\n- Update Dialog animation Add support for the browser's \"prefers-reduced-motion\" flag. When this flag is enabled, dialog animations are disabled. This can be helpful for customers experiencing performance issues while running the application.\n\n- Update ListMenu Added new props to ListMenuItem to allow adding a badge for the list menu group header.\n\n- Update AppNavigationBar Added new props to AppNavigationBar to support a back button title, a subtitle, and a title size. The title is now always centered.\n\n- Update Notifications Replaced the underlying notification library with \"react-toastify\", introducing new options while maintaining the same API for backward compatibility. This update also includes a refreshed notification style.\n\n- Update Charts Updated internal Recharts library to latest version 2.15.0 to remove some warnings.\n\n- style Labels Updated the design of standard labels for a more modern look and added documentation on when to use them.\n\n- New Button Added new \"muted-filled\" button for occasions where the default button is to prominent and the muted button is to subtle.\n\n- New StepButton Added new \"StepButton\" component for convenience and to ensure consistent styling of this type of button.\n\n- New ButtonToolbar Added new \"ButtonToolbar\" component for convenience and to ensure consistent spacing of buttons.\n\n- New FormLabel Added new \"FormLabel\" component for convenience to be used on form elements that utilizes a \"htmlFor\" prop and a label or other form elements.\n\n- New LabeledElement Added a simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements\n\n- New Card Added new \"Card\" component for convenience to apply default styling for a card like element. This component aims to simplify and align common card styling.\n\n- New Avatar Added new \"Avatar\" component for showing the user name initials, a user image, or a user icon.\n\n- New Banner Added new \"Banner\" component for rendering informational content on a page.\n\n- New AccentBar Added new \"AccentBar\" component for visual cues.\n\n- New VirtualList Added new \"VirtualList\" component for rendering large lists using a windowing approach.\n\n- New useToggle Added new \"useToggle\" component to simplify boolean state handling. Use it to handle toggle-based logic like switches, modals, or content visibility.\n\n- New Chart colors Added new chart colors to the chart color map.\n\n- Demo Draggable map marker Added new map demo to showcase draggable map marker.\n\n- Icons New icons rioglyph- light-bulb Renamed icons rioglyph- filled-chart rioglyph- area-chart Updated icons rioglyph- am rioglyph- angle-double-down rioglyph- angle-double-left rioglyph- angle-double-right rioglyph- angle-double-up rioglyph- area-in rioglyph- area-out rioglyph- beacon rioglyph- bookable-poi rioglyph- bookmark-square rioglyph- brake rioglyph- businessman rioglyph- car-wash rioglyph- carrier rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- construction rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- document-out rioglyph- download rioglyph- driver-card rioglyph- driver rioglyph- drivercard-in rioglyph- drivercard-out rioglyph- erase rioglyph- file-signature rioglyph- fill rioglyph- folder-open rioglyph- home rioglyph- inbox-in rioglyph- inbox-out rioglyph- log-in rioglyph- logout rioglyph- map-location rioglyph- map-marker rioglyph- pencil-square rioglyph- pm rioglyph- retrofit rioglyph- role-management rioglyph- tachograph-download rioglyph- tms rioglyph- trailer rioglyph- user rioglyph- volume rioglyph- warning-sign rioglyph- weight\n\n- Update Dependencies Updated the minimum React version requirement to 18 to ensure compatibility with the latest features and optimizations. If you are using older versions of React, please update.\n\n- Removed Removed the outdated cross-browser style documentation.\n\n- Update Notifications Extended the writing style guide for guidance for using different notification types\n\n- Update Commonly misspelled words Extend the writing style guide for a list of commonly misspelled or misformatted words\n\n- Update Formatting numbers with units Extended the list of formats for examples of \"kilowatt-hour\" and \"megawatt-hour\". Please note that these units are not yet officially supported by TC39.\nVersion 1.6.1 (2024-12-09)\n- Fixed ApplicationLayout Fixed the application layout to ensure the body contains only a single child, addressing issues with the recently introduced grid layout for the body scrollbar element.\nVersion 1.6.0 (2024-12-02)\n- Fixed SplitDialog Fixed the SplitDialog prop documentation for \"useOverflow\" to clarify that its default value is \"true,\" unlike other dialogs.\n\n- Fixed Multiselect Fixed the Multiselect component to correctly manage the dropdown state and filter value when used in multiline mode with an active filter.\n\n- Update Tree Added \"treeHeaderContent\" prop to the Tree component for rendering additional custom content at the top of the tree, useful for navigation pills.\n\n- Update Dialog Extended dialog sizes for \"fullheight-lg\" and \"fullheight-xl\".\n\n- New useOnboardingTour Introducing a new way to onboard users via an onboarding tour by using the \"useOnboardingTour\" custom hook. Note that weh have deprecated the \"clickflow\" prop for the OnboardingTip component with this new feature.\n\n- New OnboardingDialog Added new OnboardingDialog to initiate a onboarding tour and acts as the welcome dialog for the user of a service.\n\n- New Grid rows Added new grid helper class \"grid-rows-auto-1fr-auto\" to support a 3 row layout with expandable middle row.\n\n- Icons Updated icons rioglyph- cost-efficency Added icons rioglyph- newspaper rioglyph- rocket rioglyph- trophy rioglyph- check-badge rioglyph- check-shield rioglyph- sparkles rioglyph- academic-cap rioglyph- onboarding rioglyph- bookmark rioglyph- bookmark-square\nVersion 1.5.3 (2024-11-05)\n- Fixed AssetTree Fixed asset tree height by setting the \"scrollbar-content-wrapper\" to display flex and let the tree wrapper grow in the flex column direction.\nVersion 1.5.2 (2024-11-04)\n- Fixed SmoothScrollbars Changed height-100pct to min-height-100pct because of height side-effects in chrome.\n\n- Icons Added icons icons rioglyph- oil-can\nVersion 1.5.1 (2024-10-22)\n- Fixed Pills Fix rendering icons in justified filled pills when there is an icon only.\n\n- Fixed SmoothScrollbars Added height-100pct to the recently introduced smooth scrollbar content wrapper. This also fixes a side-effect on the AssetTree component.\n\n- Fixed MapMarker Tone down the POI marker color to better match the new Geofence color and to work better on a large satellite map.\nVersion 1.5.0 (2024-10-21)\n- Fixed Route Fix setting route arrow style. Added color constants for using status colors for routes. Extend demo examples to showcase usage of route styles and colors.\n\n- Fixed SmoothScrollbars Fix updating the scrollbar handle when the content height changes. This fix introduces a new wrapper div to check the children's height. Please check your tests and update them in case you rely on the old structure.\n\n- Fixed Select Fixed an issue with updating the dropdown menu options after the initial render, ensuring that the filter utilizes the updated DOM nodes.\n\n- Update LineChart Extended charts to render additional axis. The demos have been extended for interactive legends to highlight active lines.\n\n- Update Route Extended Route component to allow storing custom data to it which can be used when clicking on the routes polyline to set the route active.\n\n- Update Map isoline Extended the Polygon component to import the RIO colors to use it for an isoline or other polygons. Extended the demo to also include isoline colors.\n\n- Update Colors Adapted the \"gray-decent\" slightly and with that all derived classes like \"bg-decent\" and \"hover-bg-decent\"\n\n- Update Forms All form inputs have a subtle shadow now.\n\n- New Map marker A new map marker color has been added for road restrictions. The geofence color has been updated to avoid confusion with the restriction color used by HERE maps for their road restrictions. The new geofence color provides significantly better contrast and is clearer to see on the satellite map type.\n\n- New Chat Added new pure CSS chat component\n\n- New FadeUp Added new components to fade in from the bottom when an element appears on screen. This can be used to stagger elements on scroll.\n\n- New FadeExpander Added new components to expand content. This can be used to reveal or hide additional content triggered by all kinds of interaction.\n\n- New Cursor Added more cursor-style utility classes\n\n- New Shadows Added new shadow classes \"shadow-subtle\" and \"shadow-muted\", as well as directional classes \"shadow-muted-down\" and \"shadow-default-down\" to be used on light and white backgrounds. The hard shadow direction styles are now slightly more blurred to remove the hard line in the shadow. Note: the following shadow classes are deprecated: \"shadow-smooth-to-top\", \"shadow-smooth-to-bottom\", \"shadow-hard-to-top\", and \"shadow-hard-to-bottom\". Please use \"shadow-smooth-up\", \"shadow-smooth-down\", \"shadow-hard-up\", and \"shadow-hard-down\" instead.\n\n- New useSorting Added new useSorting hook for easily sorting any list by specified key using natural sort order\n\n- New URL feature toggles Added URL-based feature toggle handling and description of how to use them\n\n- Icons Added icons icons rioglyph- bookable-poi rioglyph- car-wash Updated icons rioglyph- truck rioglyph- truck-baseline rioglyph- truck-breakdown rioglyph- truck-unit rioglyph- van rioglyph- van-baseline rioglyph- trailer rioglyph- trailer-baseline rioglyph- trailerposition rioglyph- car rioglyph- car-baseline rioglyph- bus rioglyph- bus-baseline rioglyph- bus-breakdown rioglyph- filling-e-station rioglyph- filling-station rioglyph- euro-note rioglyph- order rioglyph- palette rioglyph- palette-broken rioglyph- parcel rioglyph- parcel-broken rioglyph- empty\n\n- Update Border radius and shadows The default border radius has been increased, and new shadow styles have been introduced, affecting various elements such as buttons, inputs, and panels. These updates collectively enhance the overall design, providing a more modern, refined, and visually appealing look and feel.\nVersion 1.4.1 (2024-09-12)\n- Update ButtonDropdown Added forwardRef to ButtonDropdown and pass it to the underlying dropdown toggle button. Fixed ButtonDropdown demo page examples.\n\n- Fixed Tooltip Wrapped Tag and Switch component in forwardRef so they work with the OverlayTrigger and SimpleTooltip component\n\n- New Map fullscreen demo Added a fullscreen map demo with rendering some metrics for inspection and customer feedback\nVersion 1.4.0 (2024-09-06)\n- Fixed Fixed dark mode listener when trying to read the theme from the colorScheme cookie\n\n- Fixed Charts Fixed rendering of chart legends for all charts\n\n- Update LineChart, AreaChart Extended LineChart and AreaChart components with reference lines\n\n- Update Select Added \"isLoading\" prop to show a loading spinner inside the Select and Multiselect dropdown\n\n- Update useKey Extend useKey hook to allow specifying specific keys to listen for\n\n- New ComposedChart Added new simple ComposedChart component to render a combination of line, area, and bar charts\n\n- New GroupedItemList Added new GroupedItemList component to render a list grouped by a specific key with the flexibility to customize the group header and the rendered items\n\n- New LicensePlate Added new LicensePlate component to display license plate information with various customization options\n\n- Icons Added and updated icons rioglyph- air-pay rioglyph- euro-note rioglyph- language rioglyph- calendar-parking rioglyph- engine\n\n- Update Notifications Extended the writing style guide for notification and \"copy to clipboard\" guidelines\nVersion 1.3.0 (2024-07-26)\n- Fixed TreeOptions Fixed tree options tooltip position\n\n- Fixed DataTab Fixed DataTab title to avoid being set to the div element and used as native tooltip\n\n- Fixed SimpleDialog, SplitDialog Fixed typings of SimpleDialog and SplitDialog\n\n- Fixed Select Fixed italic placeholders for Select and Multiselect\n\n- Fixed Fixed DateRangePicker type for backwards compatibility\n\n- Update Sliders Added new \"color\" prop\n\n- Update Switch Added new \"color\" prop\n\n- Update Forms Added new focus shadow for form inputs and changed the input border color\n\n- Update OverlayTrigger, Tooltip, OnboardingTip, Popover The OverlayTrigger and Popover components are no longer based on react-bootstrap. They have been rewritten to remove the dependency and to fix some warnings when used with React 19.\n\n- New useElapsedTime Added new useElapsedTime hook to get the time since a component was mounted or from a provided starting time\n\n- New Flexbox Added class \"flex-0\" to flexbox utility classes\n\n- New Rounded Added class \"rounded-inherit\" to rounded utility classes\n\n- Update RIO Theme The danger color has been slightly adjusted to better match the other colors. Dark mode colors for danger, warning, and success have also been updated.\n\n- Update VW Theme Adapt highlight colors to VWAG guidelines\n\n- Update Formatting guide Extracted number and date formatting guidelines into a dedicated formatting guide page. This makes it easier to find and to keep the writing style guide shorter.\n\n- New Form labels and placeholders Extended the writing style guide for form labels and placeholders\nVersion 1.2.2 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown header items\n\n- Fixed Checkbox Fixed the rendering position of the checkbox in the grid layout using align-baseline, ensuring it remains stable when checked and unchecked\nVersion 1.2.1 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown when used in unit tests\n\n- Fixed Tree Fixed Tree scrolling when used as a standalone component without the wrapping AssetTree and when a \"scrollHeight\" is defined\n\n- Fixed AssetTree Merged the nested elements \".TreeLabel\" and \".TreeLabelName\" into a single element for TreeNode and TreeLeaf. This reduces the number of DOM elements and enhances performance. Note that you may need to update selector paths in integration tests if they reference tree items.\n\n- Fixed Key Fixed key style for dark mode\nVersion 1.2.0 (2024-06-26)\n- Fixed SmoothScrollbars Added missing root export for SmoothScrollbars component\n\n- Fixed ErrorState, EmptyState, CustomState Fixed button alignment for mobile screens\n\n- Fixed Marker Fixed \"list-group-item\" style when using color indicators\n\n- Fixed Multiselect Fixed filter input padding when Multiselect is used with a leading input addon\n\n- Fixed useAfterMount Fixed hook useAfterMount functionality\n\n- Update MapSettings Enhance MapSettings to include item labels. Substitute MapSettingsPanel with a Dropdown when labels are available. Please provide labels for users to improve usability. Note that providing labels will become mandatory in the future.\n\n- Update Marker Added new mapMarker \"cursor\" props\n\n- Update ListMenu Added new prop \"trailingInputAddon\" to allow adding additional elements to the filter input\n\n- Update DeviceUtils Added new device utils helper function to check for Apple Mac OS to be used for showing mac specific keys\n\n- New Feedback Added new feedback components to simplify requesting user feedback for various use cases\n\n- New Key Added style for keys by using the \"<kbd\" HTML tag\n\n- New Visibility Added new \"visibility-hidden\" class to only target the visibility without setting display to none\n\n- New Input resize Added new input resize classes\n\n- Icons Added new Icon rioglyph- layer-pois\nVersion 1.1.0 (2024-06-17)\n- Fixed CalendarStripe Fixed CalendarStripe component when resizing and rendering different amounts of columns\n\n- Fixed AssetTree Fixed rendering issue in AssetTree component when switching mode between \"fly\" and \"fluid\" externally\n\n- Fixed Marker Fixed broken Marker component when using it without an icon\n\n- Fixed Pills Fixed disabled styles for stacked and filled nav-pills\n\n- Fixed Traton Theme Fixed border radius for Dropdown, MapMarker, Slider, Tag, and Buttons\n\n- Update Marker Updated marker style for active and inactive markers. Extend marker colors for status colors. Adapt default colors for map for better readability in light and dark mode. Added new prop \"pinging\" to SingleMapMarker to render a pinging animation. Another new prop \"anchorIconName\" was added to render an icon directly on the markers anchor. The map direction icon can now be replaced via the new \"stateIconName\" prop and the default moving state can be changed.\n\n- Update AssetTree Added new prop \"treeOptionsTooltip\" to Tree component to show a tooltip for the tree options dropdown\n\n- Update ActionBarItem Updated the \"ActionBarItem.List\" style used for the service info popover. Please make sure to use the \"ActionBarItem.List\" and \"ActionBarItem.ListItem\" components to design the service info for the application header.\n\n- Update ErrorState, EmptyState, CustomState Added the prop \"bsStyle\" to the state components buttons to define other button styles like a default button. Also, when providing an href value, the button is rendered as a link. The headline size will increase now at the xl breakpoint to have a slightly smaller text size for smaller screens.\n\n- Update NoData Improved readability by improving text color contrast. Removed text uppercase according to the writing style guide.\n\n- Update Fieldset Update \"fieldset\" and \"legend\" style for grouping form elements. Added demo to showcase utility of using fieldsets in forms.\n\n- Icons Icons Update icons optical center to work better within circles like the direction icon for the map marker rioglyph- direction rioglyph- parking rioglyph- antenna rioglyph- heart rioglyph- location-arrow\n\n- New CSS Grid & Subgrid Added multiple CSS Subgrid utility classes and examples. Extended Grid classes and documentation\n\n- New Added bg-none and hover-bg-none class\nVersion 1.0.0 (2024-06-03)\n- Breaking With this version, we have started migrating all components towards Typescript for better typing support and documentation. With this migration, we will remove the internal types.ts file. As it was not intended to be used by any service, please make sure you update your imports accordingly. Check out the How to for more details. Be aware of possible changed component types as well.\n\n- Breaking Map With this version the HERE map implementation has changed significantly since we have migrated the map internally to the latest HERE APIs. This includes also the map rendering where the default render engine has changed from WebGL to HARP. Raster maps are rendered with the P2D engine. Due to this migration, the map types have a different design now. To make use of the new rendering engine, please add the following HERE dependency to your project. < script type = \" text/javascript \" src = \" https://js.api.here.com/v3/3.1/mapsjs-harp.js \" </ script\n\n- Removed Fade Removed several deprecated props from the Fade component\n\n- Removed Removed \"BrowserWarning\" component\n\n- Removed Removed \"text-muted\" utility class. Use \"text-color-gray\" instead\n\n- Removed Removed \"GroupSelectionUtil\" getNewGroupedSelected utility function\n\n- Removed Removed getOffsetTopWholeScreen utility function\n\n- breaking BottomSheet / Sidebar Renamed prop \"useBackdrop\" to \"hasBackdrop\" for BottomSheet and Sidebar component\n\n- breaking CalendarStripe Deprecated \"render\" prop of \"CalendarStripe\" component in favor of new \"renderDay\" prop\n\n- breaking Collapse / ExpanderPanel / ExpanderList Removed callbacks \"onEnter\", \"onEntering\", \"onExit\", and \"onExiting\" for ExpanderPanel and Collapse components. We introduced Framer Motions \"onAnimationStart\" callback instead. The ExpanderPanel header style underwent slight changes. The \"in\" class for the collapse is no longer used. Additionally, the \"react-transition-group\" library has been replaced with \"framer-motion\". The prop \"mountOnEnter\" has been removed from the ExpanderPanel, ExpanderList and Collapse components. Use \"unmountOnExit\" instead to control whether the collapsed content should be removed from the DOM when it is collapsed. The collapse prop \"in\" has been renamed to \"open\" to align with other components.\n\n- breaking List Groups and Expanders List groups no longer have a border and a border-radius by default. This has the advantage that they can now be used within other elements without having to overwrite many CSS values. To get the same look as before, you need to set the classes \"border\" and \"rounded\". Expander lists now have props for these two CSS properties, which are set to true by default.\n\n- breaking Resizer The Resizer component has been migrated from class component to functional component. With that the updated size value need to be set with a state setter function. Example: const handleResize = ( diff: number ) =setBoxWidth ( oldWidth =oldWidth - diff )\n\n- breaking Select / Multiselect Changed roles of Select and Multiselect dropdown menu from \"list\" to \"menu\" and the role of the individual select options from \"presentation\" to \"listitem\" to be aligned with the ButtonDropdown component. Fixed automatic drop direction check to open the dropdown above the toggle when there is not enough space. Removed deprecated size values \"small\" and \"large\" in favor of \"sm\" and \"lg\".\n\n- breaking Select The type definition for the Select component has changed. The more impactful change is the type for the \"onChange\" callback which has changed to handle the removal of a selection and therefor \"undefined\" will be returned. onChange = { ( selectedOption: SelectOption | undefined ) =handleChange ( selectedOption ?. id ) } Also important to note that the SelectOption type no longer can be imported via the \"types.ts\" file. Please adapt your import accordingly import Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\n\n- breaking Split SortArrows, SortArrowUp, and SortArrowDown in dedicated components. Change imports to default imports.\n\n- Removed useResizeObserver The \"Observer Entry\" object may now be null, so it can't reliably be destructured anymore. This doesn't work anymore: const [ ref, { borderBoxSize } ] = useResizeObserver ( ); console. log ( borderBoxSize ); Update your code like so: const [ ref, observerEntry ] = useResizeObserver ( ); console. log ( observerEntry ?. borderBoxSize ); Also, an option to specify the HTML element type of the generated ref was added (defaults to div).\n\n- Fixed Blockquote Change default blockquote padding from percentage to pixel. Please add custom padding classes to change it to your needs.\n\n- Fixed BottomSheet Fixed maximum width for BottomSheet component when using the \"detach\" prop. Allow defining the detach offset.\n\n- Fixed Chart Colors Fixed export of shared colors for diagrams\n\n- Fixed Loading Guidelines Fixed spinner size for buttons to avoid button size changes. Extended loading guidelines for spinner buttons in tables.\n\n- Fixed Sidebar Automatically switch Sidebar mode from \"fluid\" to \"fly\" to be put above the content when the ApplicationBody's module-content width reaches a defined minimum. This avoids breaking the entire application layout for fluid Sidebars on smaller screens or when resizing Sidebars.\n\n- Fixed SimpleTooltip Renamed SimpleTooltip prop \"tooltipWidth\" to \"width\" to align with underlying Tooltip component\n\n- Fixed Spinner Outlined spinner buttons\n\n- Fixed Spinner in Buttons Fixed style for spinner in button block\n\n- Fixed Tags Fixed 1px offset of tag icons\n\n- Fixed Tooltip Fixed tooltip arrow position on small elements\n\n- Update AutoSuggest Migrated AutoSuggest component to Typescript and cleaned up its props\n\n- Update AssetTree Added new TreeSummaryRow component to allow for more tree item type filter like fuel type. With this we also added a new \"supType\" property to the TreeItem to filter for it and to show a paired icon.\n\n- Update Button Added \"iconName\" prop to Button component to reduce boilerplate code when using icons. Use native HTML \"disabled\" prop instead of separate class.\n\n- Update ClearableInput Added an input mask to the ClearableInput to allow custom input formats to avoid user input mistakes\n\n- Update Dialog Added focus trap to Dialog component. Deprecate \"onHide\" callback in favor of \"onClose\". Extended the dialog for compound components to allow wrapping title, body, and footer with forms. Replaced the Dialog animation with framer-motion. As a result, the class \"modal-ender-done\" has been removed. Added new \"xs\" dialog variant\n\n- Update ExpanderPanel Added new \"onOpen\" and \"onClose\" callbacks to ExpanderList items\n\n- Update ExpanderPanel / Combined Tables in ExpandablePanel Added \"iconClassName\" prop to ExpanderPanel component to to allow for 100% width in the panel header. This comes in handy when using a table inside the header and the body that shall have the same column width. With that we also added a design demo to showcase the usage of the tow tables inside the expander panel.\n\n- Update Forms Added horizontal form demo\n\n- Update LoadMoreButton Extended LoadMoreButton component with props \"isInteractive\" and \"progressBarStyle\" to customize behavior and style\n\n- Update Map Settings / Map Layer Migrated the Here Map traffic layers to use the new APIs when using the WebGL mode. For raster maps tiles, we still have to use the deprecated APIs as there is no alternative for now. We also fixed the map translations so other countries are also properly translated and don't show their city names in their native language.\n\n- Update Multiselect Added prop \"multiline\" to allow wrapping selected item around within the multiline toggle. The style of the selected items has changed to be more muted so it better integrates with other form elements.\n\n- Update NumberInput / NumberControl Migrated NumberInput and NumberControl to Typescript and updated their typings. Added check to avoid entering letters or special characters into the input field for Firefox and Safari. Added prop for warning and error messages. Added new prop \"noDefault\" to keep the input empty instead of using the default value of 0. Fixed the NumberControl spinner buttons when holding down the mouse button to increase and decrease the value and leaving the input field.\n\n- Update TimePicker Added prop for rendering warning and error messages\n\n- Update Onboarding Added props \"previousButton\" and \"nextButton\" to Onboarding component to enable a better onboarding click flow\n\n- Update Print CSS Notifications are now hidden while printing the page when using our print.css\n\n- Update Select Added prop \"inputAddon\" to Select component to allow for adding icons as addon to the toggle button Enhanced the background color of selected options for the Select and Multiselect component\n\n- Update Sidebar Added prop \"hasSmoothScrollbar\" to Sidebar component to enable the built-in scrollbars instead of using the native browser scrollbars\n\n- Update Slider or RangeSlider Added \"valueLabelUnit\" prop to Slider and RangeSlider to use a label for the slider values\n\n- Update SplitDialog Added new \"leftContentClassName\" and \"rightContentClassName\" to the split dialog\n\n- Update Buttons Add gray-lightest hover background color to muted, link, and action buttons\n\n- Update Timeline Added new classes \"timeline-date-thin\" and \"timeline-date-dashed\" as well as color classes to change the timeline width and style. Updated Timeline examples to showcase variations as it's built with atomic classes.\n\n- New EditableContent Added new EditableContent component that allows for inline text editing\n\n- New DeviceUtils Added new \"isRetinaDevice\" to deviceUtils\n\n- New Divider Added new Divider component for horizontal and vertical dividing lines\n\n- New Forms New form \"form-group-not-editable\" style toggling editable forms\n\n- New FrameDialog Added new FrameDialog component that can be used to open a dialog from a widget iframe in the parent window\n\n- New Grid stack Added new grid stacking classes \"grid-stack\" and \"grid-stack-item\" as an alternative to position absolute\n\n- New HTML Emails New guidelines demo for HTML emails created with react email\n\n- Icons Icons rioglyph- drag-n-drop rioglyph- robot rioglyph- pin-range rioglyph- pin rioglyph- calendar-plus rioglyph- exclamation rioglyph- info rioglyph- question rioglyph- fuel-diesel rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- archive rioglyph- map rioglyph- map-location rioglyph- book rioglyph- face-frown rioglyph- face-neutral rioglyph- face-smile rioglyph- paper-clip rioglyph- share-nodes rioglyph- handshake rioglyph- stack rioglyph- building rioglyph- file-signature rioglyph- signature rioglyph- location-arrow rioglyph- wallet rioglyph- user-group rioglyph- window rioglyph- inbox rioglyph- inbox-stack rioglyph- inbox-in rioglyph- inbox-out rioglyph- id rioglyph- ruler rioglyph- cards-add rioglyph- truck-unit rioglyph- user-add rioglyph- user-ok rioglyph- user-remove rioglyph- pencil-square rioglyph- megaphone rioglyph- code-brackets rioglyph- code-braces rioglyph- hash rioglyph- server-stack rioglyph- shopping-bag rioglyph- search-list rioglyph- tasks rioglyph- fingerprint rioglyph- flag rioglyph- fire rioglyph- puzzle\n\n- New Line Height Added new \"line-height-150rel\" class\n\n- New Page Added new Page component for displaying documents\n\n- New SaveableInput Added new SaveableInput component\n\n- New TimedBottomSheet Added new TimedBottomSheet component to control a bottom sheets visibility with timers\n\n- New SmoothScrollbars Added a new SmoothScrollbars component\n\n- New Text Wrapping Added new \"text-wrap-balance\" class\n\n- New useFocusTrap Added new useFocusTrap hook that can be used for custom overlays\n\n- New useHover Added new useHover hook that can be used for style changes on hover for certain elements that can not be influenced by hover utility classes alone\n\n- New usePostMessage Added new usePostMessage hook that can be used to exchange messages between an iframe and the parent window\n\n- CSS With this version, the UIKIT adds its CSS link into the header automatically if it is not present. This should help to ease the update of the UIKIT library and the corresponding CSS. This means, you can remove the link from your index.html and only update the UIKIT dependency in your package.json. See Automatic loading of UIKIT CSS Files\n\n- Guideline For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color, we have added a new \"Color Combinations\" section. See Color Combinations\n\n- Guideline We have introduced some general writing guidelines to enhance consistency in UX writing and to maintain a unified voice. See Writing style guide\nVersion 0.16.3 (2023-03-14)\n- Icons Deleted Icons: fax\n\n- Fixed Fixed alignment of collapsed header menu items. See ApplicationHeader\n\n- Fixed Fixed fade in animation when the inital animation is set to false. See Fade\n\n- Fixed Fixed close animation for BottomSheet when hight is set to window height. See BottomSheet\n\n- Fixed Fixed AspectRatioPlaceholder declaration file name.\n\n- Fixed Fixed text ellipsis of selects. See Selects\n\n- Update Refactored DataTabs props. See DataTabs Merged hoverTextColor and hoverBgColor props to tabHoverClassName Merged activeTextColor and activeBgColor props to tabActiveClassName added arrowClassName prop added tabsWrapperClassName prop added tabClassName prop added new className prop to DataTab child component\n\n- Update Added new \"fullheight\" Dialog Size and renamed \"full\" to \"fullwidth\". See Dialog\n\n- Update MapSettings panels are now closing on click outside. See MapSettings\n\n- Update Extended the SimpleTooltip component to pass the \"delay\" and \"popperConfig\" props to the underlying component. See SimpleTooltip\n\n- Update Remove left padding from ReleaseNotes component to better work with images. Please add padding-left-15 manually, in case you want to work with lists. See ReleaseNotes\n\n- New Added new CalendarStripe component. See CalendarStripe\n\n- New Added new hook \"usePrevious\" to access state values of previous component render cycle. See usePrevious\n\n- Icons Added or updated icons: rioglyph- card-reader rioglyph- card-hotel rioglyph- api rioglyph- currency-euro rioglyph- thumbs-up rioglyph- thumbs-down rioglyph- hand-up rioglyph- hand-down rioglyph- hand-left rioglyph- hand-right See Icons",
+    "summary": "- Fixed 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.0\n\n-\n\n/\n\n-\n\n2.4\n\n.0\nTypeScript\nTypeScript\n\nThe UIKIT is built with TypeScript and defines the types inside the components.\n\nNote: Do not import types from the ./types.ts file directly as this is an internal file and subject to change. Import enums, constants and types from the declaration file together with the component.\n\njavascript\nimport AutoSuggest, { type AutoSuggestSuggestion } from \"@rio-cloud/rio-uikit/AutoSuggest\";\nimport Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\nimport TableViewToggles, { type TableViewTogglesViewType } from \"@rio-cloud/rio-uikit/TableViewToggles\";\n\nimport\n\n,\n\n{\n\n}\n\nfrom\n\n\"@rio-cloud/rio-uikit/AutoSuggest\"\n\n;\n\nimport\n\n,\n\n{\n\n}\n\nfrom\n\n\"@rio-cloud/rio-uikit/Select\"\n\n;\n\nimport\n\n,\n\n{\n\n}\n\nfrom\n\n\"@rio-cloud/rio-uikit/TableViewToggles\"\n\n;\nDocument <head /> key meta tags\nMandatory\n\nThe utf-8 meta tag is essential for ensuring that your webpage correctly displays text in a wide range of languages and symbols. By setting the character encoding to UTF-8, this tag enables support for almost all characters, including those used in non-Latin scripts, special symbols, and emojis.\n\nThis not only guarantees proper rendering of your content but also prevents common issues such as garbled or corrupted text and icons, known as mojibake. Modern web browsers and standards expect UTF-8 encoding by default, making this tag a critical component of any HTML document. Including this tag ensures your webpage is globally accessible and aligns with current best practices in web development.\n\nhtml\n<meta charset=\"utf-8\" /\n\n<meta charset=\"utf-8\" /\n\nBest practices\n\nThe viewport meta tag is a cornerstone of responsive web design. It configures the viewport settings to match the device’s screen width, ensuring that your webpage adapts seamlessly to different screen sizes. Without this tag, mobile devices often display pages as a scaled-down version of their desktop layout, requiring users to zoom or scroll horizontally.\n\nBy specifying the initial scale and width, this tag guarantees that your content is displayed optimally on all devices, from smartphones to tablets to desktops. Additionally, it improves user experience, enhances accessibility, and supports SEO by meeting mobile-friendly standards, making it a crucial inclusion in any modern HTML document.\n\nhtml\n<meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" /\n\n<meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" /\nUIKIT CSS\nManaged\n\nRecommended\n\nWhen utilizing the ApplicationLayout component, the UIKIT automatically ensures the inclusion of the necessary CSS style tag within your index.html, providing seamless integration and enhanced functionality.\n\nYou no longer need to manually add the CSS style tag to your index.html. Feel free to remove it if you prefer to manage it yourself.\n\nNote: Please note that every application and every widget must be wrapped with the <ApplicationLayout /, as it executes our init function.\n\nManual\n\nNot Recommended\n\nUse the CSS Stylesheet as follows (specify your required version number in the URL) if you need more control on what style you want to use.\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/rio-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/rio-uikit.css\"\n\nNote: Please make sure to use the same UIKIT style version as the npm package, otherwise this will lead to inconsistency and UI bugs.\nBrand themes\nBrand themes\n\nIn addition to the RIO theme, the UIKIT offers other brand-specific themes.\n\nThese other themes may only be used for applications or services who don't run on the RIO platform. All platform services have to use the RIO theme to achieve a distinct look and feel for the user when switching between services and applications.\n\nIn order to use such a brand theme, modify the URL in the <linktag that loads the CSS\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/vw-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/vw-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/man-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/man-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/scania-uikit.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/scania-uikit.css\"\n\nManaged\n\nRecommended\n\nYou can simply omit the <linktag in your index.html altogether. The UIKIT will automatically load the correct CSS file for you.\n\nhtml\n<html data-brand=\"vw\"\n\n<html data-brand=\"vw\"\n\nhtml\n<html data-brand=\"man\"\n\n<html data-brand=\"man\"\n\nhtml\n<html data-brand=\"scania\"\n\n<html data-brand=\"scania\"\nPrint styles\nPrint styles\n\nThe UIKIT supports simple print stylings in order to have printable content. See Print CSS\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/rio-uikit-print-utilities.css\"\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.4.0/rio-uikit-print-utilities.css\"\nAdditional styling information\nAdditional styling information\n\nIn some cases like using D3 you may need the color variables as .json from the UIKIT provided via CDN. You can fetch the provided file from CDN via the following URL:\n\nhtml\nhttps://uikit.developers.rio.cloud/2.4.0/rio-uikit-colors.json\nDark mode\nDark mode\n\nThe UIKIT is fully dark mode ready.\n\nNote: Please note that every application and every widget must be wrapped with the <ApplicationLayout /as it executes our init function.\n\njsx\n<ApplicationLayout\n<ApplicationLayout.Header\n<ApplicationHeader label='RIO Service' navItems={navItems} /\n</ApplicationLayout.Header\n<ApplicationLayout.Body\n<divMy application</div\n</ApplicationLayout.Body\n</ApplicationLayout\n\n<ApplicationLayout\n\n<ApplicationLayout.Header\n\n<ApplicationHeader label='RIO Service' navItems={navItems} /\n\n</ApplicationLayout.Header\n\n<ApplicationLayout.Body\n\n<div\n\nMy application\n\n</div\n\n</ApplicationLayout.Body\n\n</ApplicationLayout\n\njsx\n<ApplicationLayout\n<divMy widget</div\n</ApplicationLayout\n\n<ApplicationLayout\n\n<div\n\nMy widget\n\n</div\n\n</ApplicationLayout\n\nIn cases where the React ApplicationLayout component cannot be used, you can import the new darkmode.js from the UIKIT CDN and add it to your index.html. This script will take care of listening to the theme switch for you.\n\nhtml\n<script src=\"https://uikit.developers.rio.cloud/2.4.0/rio-darkmode.js\"</script\n\n<script src=\"https://uikit.developers.rio.cloud/2.4.0/rio-darkmode.js\"\n\n</script\n\nIf you want to react on the dark mode for instance to exchange some images or apply some specific utility classes, you can use the custom hook useDarkMode to do so.\n\nTo manually enable dark mode when testing your application locally, adddata-theme=\"dark\" to the <htmltag.\nDependencies\nAs of version 1.7.0 the RIO UIKIT has the following dependencies:\n\npeerDependencies\n\njavascript\n\"react\": \"=18.0.0\"\n\"react-dom\": \"=18.0.0\"\n\n\"react\"\n\n:\n\n\"=18.0.0\"\n\n\"react-dom\"\n\n:\n\n\"=18.0.0\"",
+    "searchText": "How to use the UIKIT\nInstall the latest version of the UIKIT (that includes latest beta versions as well) via\nHow to use the UIKIT\n- Install the npm package\n- Typescript\n- Document <head /key meta tags\n- UIKIT CSS\n- Brand themes Print styles Additional styling information Dark mode\n- UIKIT Javascript packages via CDN\n- Dependencies\n\n- Typescript\n\n- Brand themes\n- Print styles\n- Additional styling information\n- Dark mode\nInstall the npm package\nInstall the npm package\n\njavascript\nnpm install @rio-cloud/rio-uikit\n\n-\n\n/\n\n-\n\nOr install a dedicated version via\n\njavascript\nnpm install @rio-cloud/rio-uikit@2.4.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.0",
+    "searchText": "Getting started with our UI Library\nWelcome! This UI library is designed to help you build beautiful, consistent, and maintainable user interfaces with minimal effort. Here’s how you can make the most of it:\nGetting started with our UI Library\nUse atomic CSS classes for styling\n- Consistency By using our predefined classes, your UI will have a common look and feel across all components\n- Maintainability When design updates occur, changes to the utility classes automatically propagate across the entire project, making updates easy and seamless\n- No custom styles needed Avoid the overhead of writing custom CSS. Use the tools we’ve already created to keep your codebase lean and manageable.\n\nFor example, instead of writing custom CSS for a flex container:\n\ncss\n.my-container {\ndisplay: flex;\njustify-content: center;\n}\n\n.my-container\n\n{\n\ndisplay\n\n:\n\n;\n\njustify-content\n\n:\n\n;\n\n}\n\nSimply apply the atomic classes:\n\nhtml\n<div class=\"display-flex justify-content-center\"...</div\n\n<div class=\"display-flex justify-content-center\"\n\n</div\nUse React components for structure\nOur library also includes a range of React components that serve as building blocks for your application. These components are designed to work seamlessly with the CSS classes, allowing you to:\n\n- Quickly build UIs using pre-built components like the buttons, selects, and dialogs\n- Combine React components with CSS classes to create complex layouts with minimal custom code\n- Extend your layouts by composing React components while using utility classes to tweak the design where necessary\nWhy stick to our CSS classes and components?\n- Efficiency Our library is optimized to reduce the need for custom styling and component creation. You’ll spend less time on UI design and more time on functionality.\n- Design flexibility When design changes occur, updating the UIKIT, a single CSS class or React component ensures that your entire project is updated without manual intervention\n- Better collaboration By sticking to the predefined patterns, your team will maintain consistency across projects, making it easier for multiple developers to collaborate without the risk of style mismatches\n\nEfficiencyOur library is optimized to reduce the need for custom styling and component creation. You’ll spend less time on UI design and more time on functionality.\n\nDesign flexibilityWhen design changes occur, updating the UIKIT, a single CSS class or React component ensures that your entire project is updated without manual intervention\n\nBetter collaborationBy sticking to the predefined patterns, your team will maintain consistency across projects, making it easier for multiple developers to collaborate without the risk of style mismatches\n\nBy combining atomic CSS classes and React components, you can create powerful, flexible user interfaces with ease, all while ensuring consistency and maintainability. Happy building!\n\nWhat is new?ChangelogRelease notes for each version of the UIKIT.How can I use it?How to use itInstructions on how to integrate it.Questions about the UIKIT?#rio-uikitPlease post your question on Slack.\n\nWe welcome any feedback to improve the UIKIT further. Please send it to uxui@rio.cloud\n\nThe RIO UIKIT is licensed under the Apache 2.0 license by TB Digital Services GmbH | version 2.4.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‹ April 2026 ›\nSu Mo Tu We Th Fr Sa\n\n29 30 31 1 2 3 4\n5 6 7 8 9 10 11\n12 13 14 15 16 17 18\n19 20 21 22 23 24 25\n26 27 28 29 30 1 2\n3 4 5 6 7 8 9\n\n12:00 AM\n\nTable view\nCards view\nList view\n\nColumns\n\nID\n\nName\n\nVIN\n\nStatus\n\nDuration\n\nActions\n\n233\n\nIpsum\n\nWVWZZZ1JZXW000002\n\nInactive\n\n5h 15m\n\n895\n\nDolor\n\nWVWZZZ1JZXW000003\n\nActive\n\n8h 45m\n\n2445\n\nAmet\n\nWVWZZZ1JZXW000005\n\nActive\n\n7h 25m\n\n3456\n\nSit\n\nWVWZZZ1JZXW000004\n\nMaintenance\n\n12h 00m\n\n7354\n\nLorem\n\nWVWZZZ1JZXW000001\n\nActive\n\n10h 30m",
+    "searchText": "Common table\nCommon table\nNew Action\n\n‹ 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\nAdvoco aestus capio omnis ratione solio adversus.\nAveho thesis modi curia viridis sit.\nTheca abscido tamdiu alius conicio.\nVobis temeritas qui audentia demoror tempus.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nCaput et vulgo apostolus.\nTabernus adflicto tibi quis arguo cui soluta cognomen ducimus viscus.\nVapulus terminatio desipio victoria atqui defetiscor debilito voluntarius.\nQuidem acceptus advenio tres volubilis ulciscor.\nRead more\nLorem ipsum dolor sit amet\nCollum dapifer adipiscor adamo compono comes utrum ratione.\nVilicus vesco usque iste asporto absque eum tergum appono cohors.\nBis architecto ventito turbo tredecim unde sit temeritas vaco amo.\nConculco ipsum hic.\nAurum caritas pecto vivo carpo taceo.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nCupiditas ipsa utrimque absens clamo quia credo suasoria.\nDenuncio autem contego eum cerno administratio baiulus sapiente sperno.\nUter quasi despecto derelinquo.\nNisi concedo quasi conitor auxilium delicate theca centum.\nCurso comminor agnosco.\n\nView details Get started\nCustomize\nImport your own data\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more\n\nUse on mobile\nGet the app\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nDownload now\n\nTips\nDiscover new features\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more",
+    "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\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 Drew Goldner\nRequested role International Directives Representative\nContact email Bert.Labadie-Wilkinson33@hotmail.com\nAnnual budget €132,320.00\nProject description Cognomen conor defetiscor ad dedico.\nAbsens aggredior totus contabesco excepturi accendo taedium distinctio vis.\nVenia aro deorsum.\nSupporting files project-outline.pdf\n2.4MB\nDownload\n\nwireframes.pdf\n3.7MB\nDownload",
+    "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact person 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\nTalis acquiro vomica cupiditate temptatio suspendo.\n\nTurner, Reichert and Howe\nCrinis vicinus iusto.\n\nConnect\n\nShields - Roob\nCauda iusto thema correptius defetiscor creptio testimonium compono inflammatio crur.\nAbsque adipisci adeptio voluptatibus veritatis corpus varius amaritudo cunctatio vomito.\n\nConnect\n\nDaniel-Fadel Inc\nArbitro cupio cerno necessitatibus contabesco demo eos totidem illum baiulus.\n\nConnect\nMeeting type\n\nChoose the logistics session that fits your process\nFreight pickup\nSchedule cargo collection at origin\n\n30 min\n\nRoute planning\nDiscuss optimal route and ETA\n\n45 min\n\nDelivery coordination\nAlign final drop-off and documents\n\n60 min\nLorem ipsum dolor\nSint annus desidero peccatus.\n\nRussel - Waelchi\nApud vae aeger summa adopto demergo porro tutis bestia caries.\n\nStiedemann LLC\nSumma delibero sono uredo accusantium.\nSpero brevis vaco velociter cogito censura stella cicuta.\n\nGoyette, Halvorson and Jerde\nAcquiro comparo amplitudo reprehenderit capitulus ademptio.\nMolestiae qui denique conor fugiat accusantium vigilo ambulo.\nLorem ipsum dolor sit amet\nSubseco dicta corroboro concedo.\nPauper delinquo administratio abbas vacuus.\n\nAuer - Hodkiewicz\nCunctatio cogito adnuo inventore utrimque.\nCedo ambitus arbustum cornu tergiversatio denuo traho apud vulgo.\nDepereo cohaero arx ducimus cupiditas aspicio antea.\n\nCremin, Schroeder and Yundt\nBenigne thesaurus venia articulus dolor summa quia deserunt dicta in.\nDenego denuncio ocer stella.\nAlter absorbeo in vicinus verbum sodalitas bonus vilicus unde cervus.\n\nWolf, Klein and Welch\nCurvo clamo thorax appono aurum venia aiunt tardus vaco complectus.\nAssumenda stillicidium volva solium.\nUter aqua correptius centum catena eveniet vorax.\n\nKihn and Sons\nCharisma confido supra.\nCongregatio aranea supra creber ater censura sustineo inflammatio.\nUrbanus correptius in rerum velit saepe ascisco alter.\nEnhance your application with powerful add-ons!\n\nRefined Aluminum Table\nThe Expanded global system engine Mouse offers reliable performance and rough design\n\n€43.63\nTotal per month\n\nGet Add-on\n\nLuxurious Bronze Salad\nInnovative Chair featuring portly technology and Ceramic construction\n\n€51.79\nTotal per month\n\nGet Add-on\n\nElectronic Silk Bike\nOur giraffe-friendly Salad ensures outlying comfort for your pets\n\n€87.19\nTotal per user / month\n\nGet Add-on\n\nElectronic Silk Mouse\nDiscover the fox-like agility of our Shoes, perfect for adolescent users\n\n€58.29\nTotal per month\n\nGet Add-on\n\nFantastic Steel Soap\nThe Business-focused attitude-oriented array Computer offers reliable performance and bouncy design\n\n€55.29\nTotal per month\n\nGet Add-on\nFeatures\n\nTasty Rubber Hat\nOur koala-friendly Bacon ensures decisive comfort for your pets\n\nIncredible Bronze Pizza\nSavor the sweet essence in our Cheese, designed for late culinary adventures\n\nSmall Marble Bacon\nExperience the turquoise brilliance of our Mouse, perfect for celebrated environments\n\nGorgeous Cotton Towels\nKertzmann and Sons's most advanced Salad technology increases angelic capabilities\n\nHandcrafted Wooden Bacon\nExperience the tan brilliance of our Hat, perfect for infinite environments\n\nGorgeous Silk Salad\nThe orange Towels combines Lithuania aesthetics with Rubidium-based durability",
+    "searchText": "List blocks\nList blocks\nLorem ipsum dolor\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\nMulti-tiered local attitude\n\nCompany email\nYour contact email address for customer communication\n\nDisplay email on team page\n\nOffice location\nPrimary business address used for official correspondence\n\nTexas Texas\nIllinois\n\nMauritania Mauritania\nGrenada\n\nPreferred currency\nAll pricing and payouts will be shown in this currency\n\nEUR - Euro USD - US Dollar\nEUR - Euro\nGBP - British Pound\n\nDiscard Apply changes",
+    "searchText": "Form blocks\nForm blocks\nSettings Company display name\nThis name will appear on your team profile page\n\nAbout the team\nWrite a short summary about your organization or group (max 240 characters).\n\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\n1574 units\n\n12% from last month\n\nOpen orders\n48\n\n5% from last month\n\nIn transit\n19\n\n-3% from last month\n\nIssues\n3\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\nOrders delivered\n25M +\n\nTotal uptime\n99.99%\n\nCustomer score\n4.8\nOrders processed\n72,678\nfrom 68,345\n\n11.5%\n\nOpen rate\n43.6\nfrom 41.6\n\n3.1%\n\nError rate\n3.6\nfrom 2.4\n\n2.01%\nSeptember, 2025\nRequests sent\n185\n\nNumber of data brokers removal requests have been sent to.\n\nRequests in progress\n185\n\nNumber of data brokers that have started processing our removal requests.\n\nRequests completed\n0\n\nNumber of data brokers that checked and confirmed that they are now not holding your data.\nLorem ipsum dolor\n\nJanuary February March April May June\n\nLorem ipsum dolor\n\nStatus Location ETA\n\nIn transit\nHamburg, DE 2024-02-02\n\nDelivered\nRotterdam, NL 2024-01-29\n\nAwaiting pickup\nWarsaw, PL 2024-02-05\n\nCustoms clearance\nAntwerp, BE 2024-02-03\n\nTransport ipsum dolor\n\nOn-time delivery\n\nWarehouse efficiency\n\nTruck utilization\n\nFreight cost/km\n\nFuel consumption index\n\n92%\n\n84%\n\n78%\n\n65%\n\n15%",
+    "searchText": "Stats blocks\nStats blocks\nStats page\nOverview of your supply chain operations\n\nTotal inventory\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\": 1777301982498\n}\n\nToggle Increment\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| component | String | — | The name of the component that will be printed out. |\n| props | Object | — | The component props that will be checked for changed values. |",
+    "searchText": "useDebugInfo\nThe useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.\nuseDebugInfo\nComponent props: isToggled: false\ncount: 0\n\nDebug Info: {\n\"renderCount\": 1,\n\"changedProps\": {},\n\"timeSinceLastRender\": 0,\n\"lastRenderTimestamp\": 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\nJeanne\n\nChristiansen\n\nDarla30@yahoo.com\n\n2\n\nMaureen\n\nYost\n\nJacquelyn2@gmail.com\n\n3\n\nJeannie\n\nKuhlman\n\nRosamond39@yahoo.com\n\n4\n\nCaleb\n\nHaag\n\nElvera.Considine@gmail.com\n\n5\n\nTodd\n\nStroman\n\nEduardo51@yahoo.com\n\n6\n\nLuis\n\nToy\n\nShaylee86@hotmail.com\n\n7\n\nOda\n\nQuigley\n\nCordia.Jast@yahoo.com\n\n8\n\nCesar\n\nCollier\n\nAditya60@gmail.com\n\n9\n\nJoann\n\nRau\n\nAddie0@gmail.com\n\n10\n\nMike\n\nSwift\n\nOtis_Kreiger@hotmail.com\n\nReorder columns and export the current order.\n### Options of the returned exportToCSV function\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| data | T[] | — | Array of data objects to export. Each object represents one row in the table. |\n| fileName | string | export.csv | Optional name for the exported file. |\n| columns | (keyof T)[] | — | Optional list of object keys to export as columns. If omitted, all keys from the first row will be used. |\n| headers | Partial<Record<keyof T, string| — | Optional map of column keys to custom header labels. Example: { firstName: 'First Name' } |\n| delimiter | string | , | Optional delimiter to use between values in the CSV. You can use \";\" or \"\\t\" for other formats. |\n| withBom | boolean | true | Whether to include UTF-8 BOM (useful for Excel). |",
+    "searchText": "useTableExport\nThe useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.\nuseTableExport\nExport data\n\nId\n\nFirst name\n\nLast name\n\nE-mail\n\nTo pick up a draggable item, press the space bar.\nWhile dragging, use the arrow keys to move the item.\nPress space again to drop the item in its new position, or press escape to cancel.\n\n1\n\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 Edna Kris Gina.Cronin64@gmail.com\n2 Lina Grimes Shania85@yahoo.com\n3 Rolando Ward Jason.Wilkinson@hotmail.com\n4 Owen Klocko Roland55@hotmail.com\n5 Fritz Williamson Dalton40@gmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |\nMulti-selection\nActive row\n-\n\nSelected rows\n4\n\nDeselect all Items Select some rows\n\nId First name Last name E-mail\n\n1 Rupert Nolan Hattie_Crooks70@gmail.com\n\n2 Lindsey Barrows Lindsey_Bechtelar45@yahoo.com\n\n3 Americo Romaguera Kamron.Champlin0@yahoo.com\n\n4 Donald Larson Barney6@yahoo.com\n\n5 Ted McClure Ben.Hudson65@hotmail.com\n\n6 Alvina Schmitt Susie62@hotmail.com\n\n7 Casandra Osinski Bud_Abshire@yahoo.com\n\n8 Jermaine Swaniawski Maurine.Heathcote1@hotmail.com\n\n9 Stephen Block Frida.Von@hotmail.com\n\n10 Betty Krajcik-Hayes Nat_Morissette@yahoo.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |",
+    "searchText": "useTableSelection\nThe useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.\nuseTableSelection\nThis is for the HTML-based table. For the Table components, use the useTableSelection hook exported from that Table component.\n\nNote: , when using a checkbox column for multi-selection and a column for some action buttons, make sure to apply the classes \"table-checkbox\" and \"table-action\" to the respective row \"td\" elements. The latter class automatically stops event propagation, preventing the row from being selected when an action button is clicked.\nActive row\n-\n\nId First name Last name E-mail\n\n1 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"