@rio-cloud/uikit-mcp 1.1.11 → 1.1.12

package/dist/docs/components/autosuggests.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Selection
 *Source:* https://uikit.developers.rio.cloud/#/components/autosuggests
-*Captured:* 2026-04-27T14:57:32.168Z
+*Captured:* 2026-05-06T12:13:33.924Z
 
 For a more flexible and smart search we highly recommend using fuse.js as searching algorithm.For more information on how to configure it, see: https://fusejs.io
 

package/dist/docs/components/avatar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/avatar
-*Captured:* 2026-04-27T14:58:16.613Z
+*Captured:* 2026-05-06T12:14:18.214Z
 
 The Avatar is a small component designed to render a users image, the initials of the users name or an icon.
 

package/dist/docs/components/banner.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/banner
-*Captured:* 2026-04-27T14:57:55.651Z
+*Captured:* 2026-05-06T12:13:57.256Z
 
 Convey information or prompt action through in-line banners, ideal for educational content, updates, or announcements.
 
@@ -68,7 +68,7 @@ export default () => {
         <div style="position: relative;">
             <div class="bg-white rounded border shadow-default padding-20 Banner display-flex text-color-darker overflow-hidden position-relative">
                 <div class="flex-1-1 overflow-hidden">
-                    <div style="opacity: 0; transform: translateX(19.1031px);">
+                    <div style="opacity: 0; transform: translateX(22.4386px);">
                         <div class="display-flex align-items-start align-items-center-ls width-100pct gap-15 ">
                             <div class="BannerIcon flex-0 margin-x-5 min-width-25 ">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="80" height="60" viewBox="0 0 773 612" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/">

package/dist/docs/components/barCharts.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/barCharts
-*Captured:* 2026-04-27T14:59:18.361Z
+*Captured:* 2026-05-06T12:15:13.810Z
 
 ## BarChart
 
@@ -117,43 +117,43 @@ const data = [
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill="#30b4c0 " name="undefined" x="7.8" y="60.3548" width="62" height="162.6452" class="recharts-rectangle" d="M7.8,63.3548A 3,3,0,0,1,10.8,60.3548L 66.8,60.3548A 3,3,0,0,1,
-        69.8,63.3548L 69.8,223L 7.8,223Z">
+                                            <path fill="#30b4c0 " name="undefined" x="7.8" y="64.0947" width="62" height="158.9053" class="recharts-rectangle" d="M7.8,67.0947A 3,3,0,0,1,10.8,64.0947L 66.8,64.0947A 3,3,0,0,1,
+        69.8,67.0947L 69.8,223L 7.8,223Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill="#30b4c0 " name="undefined" x="85.8" y="146.5429" width="62" height="76.4571" class="recharts-rectangle" d="M85.8,149.5429A 3,3,0,0,1,88.8,146.5429L 144.8,146.5429A 3,3,0,0,1,
-        147.8,149.5429L 147.8,223L 85.8,223Z">
+                                            <path fill="#30b4c0 " name="undefined" x="85.8" y="148.3009" width="62" height="74.6991" class="recharts-rectangle" d="M85.8,151.3009A 3,3,0,0,1,88.8,148.3009L 144.8,148.3009A 3,3,0,0,1,
+        147.8,151.3009L 147.8,223L 85.8,223Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill="#30b4c0 " name="undefined" x="163.8" y="179.906" width="62" height="43.094" class="recharts-rectangle" d="M163.8,182.906A 3,3,0,0,1,166.8,179.906L 222.8,179.906A 3,3,0,0,1,
-        225.8,182.906L 225.8,223L 163.8,223Z">
+                                            <path fill="#30b4c0 " name="undefined" x="163.8" y="180.8969" width="62" height="42.1031" class="recharts-rectangle" d="M163.8,183.8969A 3,3,0,0,1,166.8,180.8969L 222.8,180.8969A 3,3,0,0,1,
+        225.8,183.8969L 225.8,223L 163.8,223Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill="#30b4c0 " name="undefined" x="241.8" y="209.5157" width="62" height="13.4843" class="recharts-rectangle" d="M241.8,212.5157A 3,3,0,0,1,244.8,209.5157L 300.8,209.5157A 3,3,0,0,1,
-        303.8,212.5157L 303.8,223L 241.8,223Z">
+                                            <path fill="#30b4c0 " name="undefined" x="241.8" y="209.8258" width="62" height="13.1742" class="recharts-rectangle" d="M241.8,212.8258A 3,3,0,0,1,244.8,209.8258L 300.8,209.8258A 3,3,0,0,1,
+        303.8,212.8258L 303.8,223L 241.8,223Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill="#30b4c0 " name="undefined" x="319.8" y="211.7747" width="62" height="11.2253" class="recharts-rectangle" d="M319.8,214.7747A 3,3,0,0,1,322.8,211.7747L 378.8,211.7747A 3,3,0,0,1,
-        381.8,214.7747L 381.8,223L 319.8,223Z">
+                                            <path fill="#30b4c0 " name="undefined" x="319.8" y="212.0328" width="62" height="10.9672" class="recharts-rectangle" d="M319.8,215.0328A 3,3,0,0,1,322.8,212.0328L 378.8,212.0328A 3,3,0,0,1,
+        381.8,215.0328L 381.8,223L 319.8,223Z">
                                             </path>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
                                         <g class="recharts-layer recharts-inactive-bar">
-                                            <path fill="#30b4c0 " name="undefined" x="397.8" y="206.7702" width="62" height="16.2298" class="recharts-rectangle" d="M397.8,209.7702A 3,3,0,0,1,400.8,206.7702L 456.8,206.7702A 3,3,0,0,1,
-        459.8,209.7702L 459.8,223L 397.8,223Z">
+                                            <path fill="#30b4c0 " name="undefined" x="397.8" y="207.1434" width="62" height="15.8566" class="recharts-rectangle" d="M397.8,210.1434A 3,3,0,0,1,400.8,207.1434L 456.8,207.1434A 3,3,0,0,1,
+        459.8,210.1434L 459.8,223L 397.8,223Z">
                                             </path>
                                         </g>
                                     </g>

package/dist/docs/components/barList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Progress
 *Source:* https://uikit.developers.rio.cloud/#/components/barList
-*Captured:* 2026-04-27T14:57:44.196Z
+*Captured:* 2026-05-06T12:13:45.830Z
 
 ## BarList
 
@@ -134,21 +134,21 @@ const transportData = [
             <div class="display-flex justify-content-between gap-15">
                 <div class="width-100pct space-y-5">
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 49.4673%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 47.0444%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/on-time-delivery" class="text-color-darker" target="_blank" rel="noreferrer">On-time delivery</a>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 31.4876%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 28.9962%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <div class="text-color-darker">Warehouse efficiency</div>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 15.2012%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 12.6839%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/truck-utilization" class="text-color-darker" target="_blank" rel="noreferrer">Truck utilization</a>
@@ -193,21 +193,21 @@ const transportData = [
             <div class="display-flex justify-content-between gap-15 flex-row-reverse gap-10">
                 <div class="width-100pct space-y-5">
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 49.4673%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 47.0444%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/on-time-delivery" class="text-color-darker" target="_blank" rel="noreferrer">On-time delivery</a>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 31.4876%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 28.9962%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <div class="text-color-darker">Warehouse efficiency</div>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 15.2012%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 12.6839%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/truck-utilization" class="text-color-darker" target="_blank" rel="noreferrer">Truck utilization</a>
@@ -368,21 +368,21 @@ const transportData = [
                 </div>
             </div>
             <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
-                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 14.1044%;">
+                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 14.1176%;">
                 </div>
                 <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                     <div class="text-color-darker">In transit</div>
                 </div>
             </div>
             <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
-                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 47.6604%;">
+                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 48.7735%;">
                 </div>
                 <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                     <div class="text-color-darker">Stored in warehouse</div>
                 </div>
             </div>
             <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
-                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 89.084%;">
+                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 93.1069%;">
                 </div>
                 <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                     <div class="text-color-darker">Shipped packages</div>

package/dist/docs/components/basicMap.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/basicMap
-*Captured:* 2026-04-27T14:58:49.520Z
+*Captured:* 2026-05-06T12:14:49.921Z
 
 The following map shows labels for locale de
 

package/dist/docs/components/bottomSheet.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#/components/bottomSheet
-*Captured:* 2026-04-27T14:57:11.981Z
+*Captured:* 2026-05-06T12:13:13.920Z
 
 The TimedBottomSheet is a wrapper component for the BottomSheet that allows to control it's visibility via timers and to use the localStorage to save user interaction for handling it's visibility.
 

package/dist/docs/components/button.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/button
-*Captured:* 2026-04-27T14:57:17.565Z
+*Captured:* 2026-05-06T12:13:19.321Z
 
 The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons
 

package/dist/docs/components/buttonToolbar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/buttonToolbar
-*Captured:* 2026-04-27T14:57:14.185Z
+*Captured:* 2026-05-06T12:13:16.478Z
 
 The ButtonToolbar is a utility component designed to simplify usage and alignment. Its purpose is to ensure consistent spacing.
 

package/dist/docs/components/calendarStripe.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/calendarStripe
-*Captured:* 2026-04-27T14:58:16.887Z
+*Captured:* 2026-05-06T12:14:18.569Z
 
 A headless component where you provide a function that renders the UI for every day to be displayed.
 
@@ -11,17 +11,17 @@ A headless component where you provide a function that renders the UI for every
 
 ### Example: Example 1
 
-Tuesday
-28 April 2026
-
-Wednesday
-29 April 2026
-
 Thursday
-30 April 2026
+7 May 2026
 
 Friday
-1 May 2026
+8 May 2026
+
+Saturday
+9 May 2026
+
+Sunday
+10 May 2026
 
 #### React (tsx)
 
@@ -116,8 +116,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">28 April 2026</div>
+                                    <div>Thursday</div>
+                                    <div class="text-size-16 text-medium">7 May 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -128,8 +128,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">29 April 2026</div>
+                                    <div>Friday</div>
+                                    <div class="text-size-16 text-medium">8 May 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -137,11 +137,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">30 April 2026</div>
+                                    <div>Saturday</div>
+                                    <div class="text-size-16 text-medium">9 May 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -149,11 +149,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">1 May 2026</div>
+                                    <div>Sunday</div>
+                                    <div class="text-size-16 text-medium">10 May 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -192,32 +192,28 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
 
 ### Example: Example 2
 
-Apr
-28
-2026
-
-Apr
-29
+May
+7
 2026
 
-Apr
-30
+May
+8
 2026
 
 May
-1
+9
 2026
 
 May
-2
+10
 2026
 
 May
-3
+11
 2026
 
 May
-4
+12
 2026
 
 Set to January Toggle Weekends
@@ -343,8 +339,8 @@ 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">Apr</div>
-                                <div class="text-size-h3 line-height-h3">28</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">7</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -352,44 +348,44 @@ 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">Apr</div>
-                                <div class="text-size-h3 line-height-h3">29</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">8</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">Apr</div>
-                                <div class="text-size-h3 line-height-h3">30</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">9</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">May</div>
-                                <div class="text-size-h3 line-height-h3">1</div>
+                                <div class="text-size-h3 line-height-h3">10</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">May</div>
-                                <div class="text-size-h3 line-height-h3">2</div>
+                                <div class="text-size-h3 line-height-h3">11</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">May</div>
-                                <div class="text-size-h3 line-height-h3">3</div>
+                                <div class="text-size-h3 line-height-h3">12</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -398,7 +394,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <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">May</div>
-                                <div class="text-size-h3 line-height-h3">4</div>
+                                <div class="text-size-h3 line-height-h3">13</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -407,7 +403,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <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">May</div>
-                                <div class="text-size-h3 line-height-h3">5</div>
+                                <div class="text-size-h3 line-height-h3">14</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -416,16 +412,16 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                         <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">May</div>
-                                <div class="text-size-h3 line-height-h3">6</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="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">May</div>
-                                <div class="text-size-h3 line-height-h3">7</div>
+                                <div class="text-size-h3 line-height-h3">16</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>

package/dist/docs/components/card.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/card
-*Captured:* 2026-04-27T14:57:53.529Z
+*Captured:* 2026-05-06T12:13:55.429Z
 
 The Card is a utility component designed to simplify usage of default card styling.
 

package/dist/docs/components/carousel.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/carousel
-*Captured:* 2026-04-27T14:57:54.411Z
+*Captured:* 2026-05-06T12:13:55.753Z
 
 ## Carousel
 

package/dist/docs/components/chartColors.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/chartColors
-*Captured:* 2026-04-27T14:59:09.998Z
+*Captured:* 2026-05-06T12:15:05.088Z
 
 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:* 2026-04-27T14:59:09.074Z
+*Captured:* 2026-05-06T12:15:04.055Z
 
 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:* 2026-04-27T14:58:35.540Z
+*Captured:* 2026-05-06T12:14:36.990Z
 
 The chat component is a pure CSS component.
 
@@ -445,7 +445,7 @@ 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: -1.74902px; transform: none;">
+    <div class="position-absolute left-0 right-0 justify-content-center display-flex z-index-1" style="opacity: 0; top: -41.5391px; 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%;">

package/dist/docs/components/checkbox.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/checkbox
-*Captured:* 2026-04-27T14:57:17.951Z
+*Captured:* 2026-05-06T12:13:19.853Z
 
 ## Checkbox
 

package/dist/docs/components/circularProgress.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Progress
 *Source:* https://uikit.developers.rio.cloud/#/components/circularProgress
-*Captured:* 2026-04-27T14:57:46.545Z
+*Captured:* 2026-05-06T12:13:48.111Z
 
 ## CircularProgress
 
@@ -159,7 +159,7 @@ export default () => (
             <svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
                 <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
                 </circle>
-                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="232.49266533852068">
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="232.8580589148538">
                 </circle>
             </svg>
             <div class="position-absolute display-grid place-items-center">30</div>
@@ -177,7 +177,7 @@ export default () => (
             <svg width="80" height="80" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
                 <circle cx="50" cy="50" r="48" fill="none" stroke="var(--gray-lighter)" stroke-width="4" class="">
                 </circle>
-                <circle cx="50" cy="50" r="48" fill="none" stroke="var(--brand-warning)" stroke-width="4" stroke-linecap="round" stroke-dasharray="301.59289474462014" stroke-dashoffset="134.44931222990982">
+                <circle cx="50" cy="50" r="48" fill="none" stroke="var(--brand-warning)" stroke-width="4" stroke-linecap="round" stroke-dasharray="301.59289474462014" stroke-dashoffset="135.52960628167727">
                 </circle>
             </svg>
             <div class="position-absolute display-grid place-items-center text-italic">85 km/h</div>
@@ -189,7 +189,7 @@ export default () => (
             <svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
                 <circle cx="50" cy="50" r="48.5" fill="none" stroke="var(--gray-lighter)" stroke-width="3" class="">
                 </circle>
-                <circle cx="50" cy="50" r="48.5" fill="none" stroke="var(--brand-info)" stroke-width="3" stroke-linecap="round" stroke-dasharray="304.7344873982099" stroke-dashoffset="225.25935257503883">
+                <circle cx="50" cy="50" r="48.5" fill="none" stroke="var(--brand-info)" stroke-width="3" stroke-linecap="round" stroke-dasharray="304.7344873982099" stroke-dashoffset="225.7730218055361">
                 </circle>
             </svg>
             <div class="position-absolute display-grid place-items-center text-size-16 text-medium text-color-dark">40%</div>
@@ -201,7 +201,7 @@ export default () => (
             <svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
                 <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
                 </circle>
-                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="226.21112547277178">
+                <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-primary)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="226.61711833536413">
                 </circle>
             </svg>
             <div class="position-absolute display-grid place-items-center text-size-">100</div>
@@ -386,14 +386,14 @@ export default () => {
 
 ```html
 <div class="display-flex flex-column align-items-center text-center gap-10 " aria-labelledby="circular-progress-label-:rb:">
-    <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" aria-valuetext="20%" style="width: 64px; height: 64px; position: relative; display: grid; place-items: center;">
+    <div class="" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="10" aria-valuetext="10%" style="width: 64px; height: 64px; position: relative; display: grid; place-items: center;">
         <svg width="64" height="64" viewBox="0 0 100 100" style="transform: rotate(-90deg);">
             <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gray-lighter)" stroke-width="8" class="">
             </circle>
-            <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-info)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="261.38903288417055">
+            <circle cx="50" cy="50" r="46" fill="none" stroke="var(--brand-info)" stroke-width="8" stroke-linecap="round" stroke-dasharray="289.02652413026095" stroke-dashoffset="262.4829664181983">
             </circle>
         </svg>
-        <div class="position-absolute display-grid place-items-center">20%</div>
+        <div class="position-absolute display-grid place-items-center">10%</div>
     </div>
     <div id="circular-progress-label-:rb:" class="">Processing configuration...</div>
 </div>