@rio-cloud/uikit-mcp 1.1.2 → 1.1.4

package/dist/docs/components/calendarStripe.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/calendarStripe
-*Captured:* 2025-12-15T15:02:50.415Z
+*Captured:* 2026-01-14T09:07:42.234Z
 
 A headless component where you provide a function that renders the UI for every day to be displayed.
 
@@ -11,31 +11,31 @@ A headless component where you provide a function that renders the UI for every
 
 ### Example: Example 1
 
-Tuesday
-16 December 2025
-
-Wednesday
-17 December 2025
-
 Thursday
-18 December 2025
+15 January 2026
 
 Friday
-19 December 2025
+16 January 2026
 
-#### Summary
+Saturday
+17 January 2026
 
-Tuesday
-16 December 2025
+Sunday
+18 January 2026
 
-Wednesday
-17 December 2025
+#### Summary
 
 Thursday
-18 December 2025
+15 January 2026
 
 Friday
-19 December 2025
+16 January 2026
+
+Saturday
+17 January 2026
+
+Sunday
+18 January 2026
 
 #### React (tsx)
 
@@ -130,8 +130,8 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                         <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
-                                    <div>Tuesday</div>
-                                    <div class="text-size-16 text-medium">16 December 2025</div>
+                                    <div>Thursday</div>
+                                    <div class="text-size-16 text-medium">15 January 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -142,8 +142,8 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                         <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
-                                    <div>Wednesday</div>
-                                    <div class="text-size-16 text-medium">17 December 2025</div>
+                                    <div>Friday</div>
+                                    <div class="text-size-16 text-medium">16 January 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -151,11 +151,11 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
+                        <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest">
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
-                                    <div>Thursday</div>
-                                    <div class="text-size-16 text-medium">18 December 2025</div>
+                                    <div>Saturday</div>
+                                    <div class="text-size-16 text-medium">17 January 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -163,11 +163,11 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
+                        <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest">
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
-                                    <div>Friday</div>
-                                    <div class="text-size-16 text-medium">19 December 2025</div>
+                                    <div>Sunday</div>
+                                    <div class="text-size-16 text-medium">18 January 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -187,84 +187,75 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| 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. |
-| minDays | Number | 1 | The minimum amount of days that should be shown per page. |
-| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |
-| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |
-| startDate | Date | new Date() | The date of the first day that are rendered. |
-| renderDay | Function | — | A function that renders each individual day to be displayed. |
-| onPreviousClick | (newStartDate: Date) => void | — | Callback function for when the previous button is clicked. |
-| onNextClick | (newStartDate: Date) => void | — | Callback function for when the next button is clicked. |
-| buttonClassName | String | — | Additional classes set to the navigation buttons. |
-| className | String | — | Additional classes set to the calendar element. |
-| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |
-| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |
-
 ### Example: Example 2
 
-Dec
+Jan
+15
+2026
+
+Jan
 16
-2025
+2026
 
-Dec
+Jan
 17
-2025
+2026
 
-Dec
+Jan
 18
-2025
+2026
 
-Dec
+Jan
 19
-2025
+2026
 
-Dec
+Jan
 20
-2025
+2026
 
-Dec
+Jan
 21
-2025
+2026
 
-Dec
+Jan
 22
-2025
+2026
 
 Set to JanuaryToggle Weekends
 
 #### Summary
 
-Dec
+Jan
+15
+2026
+
+Jan
 16
-2025
+2026
 
-Dec
+Jan
 17
-2025
+2026
 
-Dec
+Jan
 18
-2025
+2026
 
-Dec
+Jan
 19
-2025
+2026
 
-Dec
+Jan
 20
-2025
+2026
 
-Dec
+Jan
 21
-2025
+2026
 
-Dec
+Jan
 22
-2025
+2026
 
 Set to JanuaryToggle Weekends
 
@@ -389,90 +380,90 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Dec</div>
-                                <div class="text-size-h3 line-height-h3">16</div>
-                                <div class="text-size-12 line-height-12">2025</div>
+                                <div class="text-size-12 line-height-12">Jan</div>
+                                <div class="text-size-h3 line-height-h3">15</div>
+                                <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-12 line-height-12">Jan</div>
+                                <div class="text-size-h3 line-height-h3">16</div>
+                                <div class="text-size-12 line-height-12">2026</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
+                            <div class="display-flex flex-column gap-3 text-center">
+                                <div class="text-size-12 line-height-12">Jan</div>
                                 <div class="text-size-h3 line-height-h3">17</div>
-                                <div class="text-size-12 line-height-12">2025</div>
+                                <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-12 line-height-12">Jan</div>
                                 <div class="text-size-h3 line-height-h3">18</div>
-                                <div class="text-size-12 line-height-12">2025</div>
+                                <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-12 line-height-12">Jan</div>
                                 <div class="text-size-h3 line-height-h3">19</div>
-                                <div class="text-size-12 line-height-12">2025</div>
+                                <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-12 line-height-12">Jan</div>
                                 <div class="text-size-h3 line-height-h3">20</div>
-                                <div class="text-size-12 line-height-12">2025</div>
+                                <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-12 line-height-12">Jan</div>
                                 <div class="text-size-h3 line-height-h3">21</div>
-                                <div class="text-size-12 line-height-12">2025</div>
+                                <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-12 line-height-12">Jan</div>
                                 <div class="text-size-h3 line-height-h3">22</div>
-                                <div class="text-size-12 line-height-12">2025</div>
+                                <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-12 line-height-12">Jan</div>
                                 <div class="text-size-h3 line-height-h3">23</div>
-                                <div class="text-size-12 line-height-12">2025</div>
+                                <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Dec</div>
+                                <div class="text-size-12 line-height-12">Jan</div>
                                 <div class="text-size-h3 line-height-h3">24</div>
-                                <div class="text-size-12 line-height-12">2025</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
-                            <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Dec</div>
-                                <div class="text-size-h3 line-height-h3">25</div>
-                                <div class="text-size-12 line-height-12">2025</div>
+                                <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
@@ -489,21 +480,4 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
         <button type="button" class="btn btn-default btn-component" tabindex="0">Toggle Weekends</button>
     </div>
 </div>
-```
-
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| 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. |
-| minDays | Number | 1 | The minimum amount of days that should be shown per page. |
-| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |
-| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |
-| startDate | Date | new Date() | The date of the first day that are rendered. |
-| renderDay | Function | — | A function that renders each individual day to be displayed. |
-| onPreviousClick | (newStartDate: Date) => void | — | Callback function for when the previous button is clicked. |
-| onNextClick | (newStartDate: Date) => void | — | Callback function for when the next button is clicked. |
-| buttonClassName | String | — | Additional classes set to the navigation buttons. |
-| className | String | — | Additional classes set to the calendar element. |
-| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |
-| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |
+```

package/dist/docs/components/card.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/card
-*Captured:* 2025-12-15T15:02:34.965Z
+*Captured:* 2026-01-14T09:07:26.234Z
 
 The Card is a utility component designed to simplify usage of default card styling.
 
@@ -75,12 +75,4 @@ export default () => (
         </div>
     </div>
 </div>
-```
-
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| shadow | 'subtle' \| 'muted' \| 'accent' \| 'default' \| 'smooth' \| 'muted-down' \| 'default-down' \| 'none' | default | The shadow class. |
-| shadow | 0 \| 5 \| 10 \| 15 \| 20 \| 25 \| 50 | 15 | The card padding. |
-| className | string | — | Additional classes to be set on the wrapper element. |
+```

package/dist/docs/components/carousel.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/carousel
-*Captured:* 2025-12-15T15:02:35.227Z
+*Captured:* 2026-01-14T09:07:26.721Z
 
 ## Carousel
 

package/dist/docs/components/chartColors.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#components/chartColors
-*Captured:* 2025-12-15T15:03:19.823Z
+*Captured:* 2026-01-14T09:08:16.568Z
 
 The colors listed below are exposed via the colors.json file and can also be used with other charting libraries to achieve a common look and feel.
 

package/dist/docs/components/chartsGettingStarted.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#components/chartsGettingStarted
-*Captured:* 2025-12-15T15:03:19.387Z
+*Captured:* 2026-01-14T09:08:15.330Z
 
 The UIKIT chart components are simple wrapper components for the Recharts charting library.
 

package/dist/docs/components/chat.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* CSS Only
 *Source:* https://uikit.developers.rio.cloud/#components/chat
-*Captured:* 2025-12-15T15:03:01.979Z
+*Captured:* 2026-01-14T09:07:54.061Z
 
 The chat component is a pure CSS component.
 
@@ -524,6 +524,9 @@ export default () => {
 
 ```html
 <div class="display-flex flex-column height-600 position-relative padding-right-5 overflow-hidden">
+    <div class="position-absolute left-0 right-0 justify-content-center display-flex z-index-1" style="opacity: 0; top: -28.0384px; transform: none;">
+        <div class="rounded-circle bg-primary text-color-white text-center padding-x-10 padding-y-5 cursor-pointer shadow-smooth">Older messages</div>
+    </div>
     <div class="scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
         <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
             <div class="scrollbar-content-wrapper">

package/dist/docs/components/checkbox.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/checkbox
-*Captured:* 2025-12-15T15:02:11.328Z
+*Captured:* 2026-01-14T09:07:01.013Z
 
 ## Checkbox
 
@@ -337,28 +337,8 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
-| name | String | — | Passed through as HTML attribute to the underlying inputname. |
-| label | String / Node | — | Define some text as a label. |
-| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
-| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
-| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
-| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
-| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
-| right | Boolean | false | Defines whether the checkbox is on the right side. |
-| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
-| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
-| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
-| error | Boolean | false | Use "error" to change color of the checkbox. |
-| required | Boolean | false | Defines whether the checkbox is required or not. |
-| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
-| 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 |
-| className | String | — | Additional classes to be set on the input field. |
-| children | any | — | Any element to be rendered next to the checkbox. |
-| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
-| iconSize | Number | — | The icon size in pixel. |
-| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
-| inputRef | Ref | — | A react ref assigned to the input itself. |
+| iconLabelPosition | 'horizontal' \| 'vertical | — | — |
+| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 
 ## Controlled example
 
@@ -434,28 +414,8 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
-| name | String | — | Passed through as HTML attribute to the underlying inputname. |
-| label | String / Node | — | Define some text as a label. |
-| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
-| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
-| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
-| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
-| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
-| right | Boolean | false | Defines whether the checkbox is on the right side. |
-| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
-| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
-| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
-| error | Boolean | false | Use "error" to change color of the checkbox. |
-| required | Boolean | false | Defines whether the checkbox is required or not. |
-| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
-| 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 |
-| className | String | — | Additional classes to be set on the input field. |
-| children | any | — | Any element to be rendered next to the checkbox. |
-| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
-| iconSize | Number | — | The icon size in pixel. |
-| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
-| inputRef | Ref | — | A react ref assigned to the input itself. |
+| iconLabelPosition | 'horizontal' \| 'vertical | — | — |
+| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 
 ## Custom card example
 
@@ -672,28 +632,8 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
-| name | String | — | Passed through as HTML attribute to the underlying inputname. |
-| label | String / Node | — | Define some text as a label. |
-| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
-| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
-| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
-| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
-| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
-| right | Boolean | false | Defines whether the checkbox is on the right side. |
-| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
-| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
-| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
-| error | Boolean | false | Use "error" to change color of the checkbox. |
-| required | Boolean | false | Defines whether the checkbox is required or not. |
-| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
-| 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 |
-| className | String | — | Additional classes to be set on the input field. |
-| children | any | — | Any element to be rendered next to the checkbox. |
-| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
-| iconSize | Number | — | The icon size in pixel. |
-| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
-| inputRef | Ref | — | A react ref assigned to the input itself. |
+| iconLabelPosition | 'horizontal' \| 'vertical | — | — |
+| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 
 ## Custom list example
 
@@ -839,28 +779,8 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
-| name | String | — | Passed through as HTML attribute to the underlying inputname. |
-| label | String / Node | — | Define some text as a label. |
-| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
-| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
-| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
-| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
-| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
-| right | Boolean | false | Defines whether the checkbox is on the right side. |
-| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
-| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
-| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
-| error | Boolean | false | Use "error" to change color of the checkbox. |
-| required | Boolean | false | Defines whether the checkbox is required or not. |
-| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
-| 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 |
-| className | String | — | Additional classes to be set on the input field. |
-| children | any | — | Any element to be rendered next to the checkbox. |
-| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
-| iconSize | Number | — | The icon size in pixel. |
-| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
-| inputRef | Ref | — | A react ref assigned to the input itself. |
+| iconLabelPosition | 'horizontal' \| 'vertical | — | — |
+| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 
 ## Checkbox with custom icon
 
@@ -972,25 +892,5 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
-| name | String | — | Passed through as HTML attribute to the underlying inputname. |
-| label | String / Node | — | Define some text as a label. |
-| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
-| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
-| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
-| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
-| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
-| right | Boolean | false | Defines whether the checkbox is on the right side. |
-| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
-| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
-| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
-| error | Boolean | false | Use "error" to change color of the checkbox. |
-| required | Boolean | false | Defines whether the checkbox is required or not. |
-| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
-| 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 |
-| className | String | — | Additional classes to be set on the input field. |
-| children | any | — | Any element to be rendered next to the checkbox. |
-| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
-| iconSize | Number | — | The icon size in pixel. |
-| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
-| inputRef | Ref | — | A react ref assigned to the input itself. |
+| iconLabelPosition | 'horizontal' \| 'vertical | — | — |
+| tabIndex |  | — | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |