@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

package/dist/docs/components/barList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Progress
 *Source:* https://uikit.developers.rio.cloud/#/components/barList
-*Captured:* 2026-03-06T10:40:31.259Z
+*Captured:* 2026-04-27T14:57:44.196Z
 
 ## 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: 47.0444%;">
+                        <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>
                         <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: 28.9962%;">
+                        <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>
                         <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: 12.6839%;">
+                        <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>
                         <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: 47.0444%;">
+                        <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>
                         <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: 28.9962%;">
+                        <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>
                         <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: 12.6839%;">
+                        <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>
                         <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.1176%;">
+                <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>
                 <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: 48.7735%;">
+                <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>
                 <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: 93.1069%;">
+                <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>
                 <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-03-06T10:41:15.195Z
+*Captured:* 2026-04-27T14:58:49.520Z
 
 The following map shows labels for locale de
 
@@ -11,7 +11,16 @@ The following map shows labels for locale de
 
 ### Example: Example 1
 
+Terms of use © 1987–2026 HERE
 
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
 
 #### React (tsx)
 
@@ -22,27 +31,78 @@ import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../u
 
 const position = { lat: 48.1351, lng: 11.582 };
 
-const MapExample = () => {
-    return (
-        <div className='height-300'>
-            <Map
-                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
-                center={position}
-                zoom={10}
-                hideMapSettings
-            />
-        </div>
-    );
-};
+const MapExample = () => (
+    <div className='height-300'>
+        <Map
+            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+            center={position}
+            zoom={10}
+            hideMapSettings
+        />
+    </div>
+);
 
 export default MapExample;
 ```
 
+#### Props: Map props
+
+### Map props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| credentials | MapCredentials | — | HERE credentials used to initialize the map platform. |
+| height | number | — | Height of the map container. |
+| width | number | — | Width of the map container. |
+| language | string | 'en' | Language used for HERE map labels and controls. |
+| center | Position | — | Initial center position of the map. |
+| zoom | number | — | Initial or controlled zoom level of the map. |
+| boundingBox | BoundingBox | — | Bounding box that should be fitted by the map view. |
+| disableMapEvents | boolean | — | Disables HERE map events entirely. |
+| disableBehavior | boolean | false | Disables the default HERE map behavior such as pan and zoom interaction. |
+| disableZoomMomentum | boolean | true | Disables HERE zoom momentum to reduce scroll inertia on zoom. |
+| eventListenerMap | EventListenerMap | — | Event listeners attached to the HERE map instance. |
+| hideMapSettings | boolean | — | Legacy prop for hiding map settings. |
+| hideClusterSettings | boolean | false | Hides the cluster settings entry in the map settings UI. |
+| hideMapLayerSettings | boolean | false | Hides the map layer settings entry in the map settings UI. |
+| mapType | MapType | Map.TYPE_DEFAULT | Base map type to render. |
+| mapLayer | MapLayer[] | [] | Active overlay layers such as traffic or incidents. |
+| showCluster | boolean | true | Controls whether marker clustering is enabled. |
+| showScaleBar | boolean | false | Shows the HERE scale bar. |
+| onMapTypeChange | (type: MapType, previousType?: MapType) => void | — | Callback fired when the map type changes. |
+| onMapLayerChange | (activeLayer: MapLayer[], previousLayer?: MapLayer[]) => void | — | Callback fired when the active map layers change. |
+| onShowClusterChange | (show: boolean) => void | — | Callback fired when the cluster visibility changes. |
+| onZoomIn | (zoom: number) => void | — | Callback fired when zooming in via the built-in zoom controls. |
+| onZoomOut | (zoom: number) => void | — | Callback fired when zooming out via the built-in zoom controls. |
+| onIncidentsChange | (incidentsResult: MapIncidents) => void | — | Callback used by incidents overlays to report fetched incidents. |
+| mapSettingsTooltip | string \| React.ReactNode | — | Tooltip content for the map settings entry. |
+| mapSettings | React.ReactNode | — | Custom settings UI rendered on top of the map. |
+| zoomAnimation | boolean | false | Enables animation when zoom or center changes are applied programmatically. |
+| maxViewportHistoryEntries | number | 5 | Maximum number of previous map viewports stored for viewport history. |
+| enableWebGL | boolean | true | Enables the WebGL/HARP rendering engine where supported. |
+| enableDevicePixelRatio | boolean | true | Uses window.devicePixelRatio for map rendering. |
+| enableMarkerIconCache | boolean | true | Enables caching for generated marker icons. |
+| enableFractionalZoom | boolean | false | Keeps HERE fractional zoom enabled for smoother trackpad and wheel zoom interaction. |
+| disableMarkerPointerEventsWhileZooming | boolean | false | Temporarily disables marker pointer events during zoom interactions to reduce DOM hit-testing overhead. |
+| pixelRatio | number | — | Fallback pixel ratio used when device pixel ratio support is disabled. |
+| minZoom | number | — | Minimum allowed zoom level. |
+| maxZoom | number | — | Maximum allowed zoom level. |
+| children | React.ReactNode \| ((api: MapApi, incidents?: MapIncidents) => React.ReactNode) | — | Map content or a render function receiving the map API. |
+
 ## Map with ScaleBar
 
 ### Example: Example 2
 
+Terms of use © 1987–2026 HERE
+
+10 km
 
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
 
 #### React (tsx)
 
@@ -52,19 +112,17 @@ import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../u
 
 const position = { lat: 48.1351, lng: 11.582 };
 
-const MapWithScaleBarExample = () => {
-    return (
-        <div className='height-300'>
-            <Map
-                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
-                center={position}
-                zoom={10}
-                hideMapSettings
-                showScaleBar
-            />
-        </div>
-    );
-};
+const MapWithScaleBarExample = () => (
+    <div className='height-300'>
+        <Map
+            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+            center={position}
+            zoom={10}
+            hideMapSettings
+            showScaleBar
+        />
+    </div>
+);
 
 export default MapWithScaleBarExample;
 ```
@@ -73,7 +131,16 @@ export default MapWithScaleBarExample;
 
 ### Example: Example 3
 
+Terms of use © 1987–2026 HERE
+
+10 km
+
+Ansicht auswählen
+Kartenansicht
+Satellit
 
+Verkehrslage
+Verkehrsstörungen anzeigen
 
 #### React (tsx)
 
@@ -83,19 +150,17 @@ import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../u
 
 const position = { lat: 48.1351, lng: 11.582 };
 
-const MapLocalizationExample = () => {
-    return (
-        <div className='height-300'>
-            <Map
-                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
-                language='de'
-                center={position}
-                zoom={10}
-                hideMapSettings
-            />
-        </div>
-    );
-};
+const MapLocalizationExample = () => (
+    <div className='height-300'>
+        <Map
+            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+            language='de'
+            center={position}
+            zoom={10}
+            hideMapSettings
+        />
+    </div>
+);
 
 export default MapLocalizationExample;
 ```

package/dist/docs/components/bottomSheet.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#/components/bottomSheet
-*Captured:* 2026-03-06T10:40:01.800Z
+*Captured:* 2026-04-27T14:57:11.981Z
 
 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.
 
@@ -199,7 +199,7 @@ export default () => {
 #### HTML (html)
 
 ```html
-<div data-capture-callout="true">
+<div>
     <p class="margin-top-0">This demonstrates a bottom sheet use case on <b>mobile. </b>This can be used for providing additional information on mobile instead of using a sidebar, onboarding, alternative for dialogs etc.</p>
     <p>
         <span class="label label-info label-condensed margin-right-5">Note</span>This example does not make sense on desktop with wider screens. Handle responsive modes and use a dialog or sidebar on desktop instead.

package/dist/docs/components/button.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/button
-*Captured:* 2026-03-06T10:40:07.427Z
+*Captured:* 2026-04-27T14:57:17.565Z
 
 The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons
 
@@ -258,6 +258,7 @@ export default () => (
 | bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
 | variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
 | noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
 | tabIndex | number | 0 | Number of the index used for keyboard support. |
 | className | string | — | Additional classes to be set on the button element. |
 
@@ -350,7 +351,7 @@ export default () => (
 #### HTML (html)
 
 ```html
-<div data-capture-callout="true">
+<div>
     <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Buttons with link styles</div>
     <div class="btn-toolbar">
         <button type="button" class="btn btn-primary btn-link btn-component" tabindex="0">
@@ -398,6 +399,7 @@ export default () => (
 | bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
 | variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
 | noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
 | tabIndex | number | 0 | Number of the index used for keyboard support. |
 | className | string | — | Additional classes to be set on the button element. |
 
@@ -580,6 +582,7 @@ export default () => (
 | bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
 | variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
 | noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
 | tabIndex | number | 0 | Number of the index used for keyboard support. |
 | className | string | — | Additional classes to be set on the button element. |
 
@@ -710,6 +713,7 @@ export default () => (
 | bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
 | variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
 | noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
 | tabIndex | number | 0 | Number of the index used for keyboard support. |
 | className | string | — | Additional classes to be set on the button element. |
 
@@ -997,6 +1001,7 @@ export default () => (
 | bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
 | variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
 | noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
 | tabIndex | number | 0 | Number of the index used for keyboard support. |
 | className | string | — | Additional classes to be set on the button element. |
 
@@ -1145,6 +1150,7 @@ export default () => (
 | bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
 | variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
 | noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
 | tabIndex | number | 0 | Number of the index used for keyboard support. |
 | className | string | — | Additional classes to be set on the button element. |
 

package/dist/docs/components/buttonToolbar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/buttonToolbar
-*Captured:* 2026-03-06T10:40:03.868Z
+*Captured:* 2026-04-27T14:57:14.185Z
 
 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-03-06T10:40:56.891Z
+*Captured:* 2026-04-27T14:58:16.887Z
 
 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
 
-Saturday
-7 March 2026
+Tuesday
+28 April 2026
 
-Sunday
-8 March 2026
+Wednesday
+29 April 2026
 
-Monday
-9 March 2026
+Thursday
+30 April 2026
 
-Tuesday
-10 March 2026
+Friday
+1 May 2026
 
 #### React (tsx)
 
@@ -113,11 +113,11 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
             <div style="opacity: 1; transform: none;">
                 <div class="display-flex space-x--1 user-select-none">
                     <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 bg-lightest">
+                        <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>Saturday</div>
-                                    <div class="text-size-16 text-medium">7 March 2026</div>
+                                    <div>Tuesday</div>
+                                    <div class="text-size-16 text-medium">28 April 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -125,11 +125,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 bg-lightest">
+                        <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>Sunday</div>
-                                    <div class="text-size-16 text-medium">8 March 2026</div>
+                                    <div>Wednesday</div>
+                                    <div class="text-size-16 text-medium">29 April 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -140,8 +140,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>Monday</div>
-                                    <div class="text-size-16 text-medium">9 March 2026</div>
+                                    <div>Thursday</div>
+                                    <div class="text-size-16 text-medium">30 April 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -152,8 +152,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">10 March 2026</div>
+                                    <div>Friday</div>
+                                    <div class="text-size-16 text-medium">1 May 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -192,36 +192,32 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
 
 ### Example: Example 2
 
-Mar
-7
+Apr
+28
 2026
 
-Mar
-8
+Apr
+29
 2026
 
-Mar
-9
+Apr
+30
 2026
 
-Mar
-10
+May
+1
 2026
 
-Mar
-11
+May
+2
 2026
 
-Mar
-12
+May
+3
 2026
 
-Mar
-13
-2026
-
-Mar
-14
+May
+4
 2026
 
 Set to January Toggle Weekends
@@ -345,19 +341,19 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
             <div style="opacity: 1; transform: none;">
                 <div class="display-flex space-x--1 user-select-none">
                     <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">Mar</div>
-                                <div class="text-size-h3 line-height-h3">7</div>
+                                <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">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">Mar</div>
-                                <div class="text-size-h3 line-height-h3">8</div>
+                                <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">2026</div>
                             </div>
                         </div>
@@ -365,8 +361,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">Mar</div>
-                                <div class="text-size-h3 line-height-h3">9</div>
+                                <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">2026</div>
                             </div>
                         </div>
@@ -374,26 +370,26 @@ 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">Mar</div>
-                                <div class="text-size-h3 line-height-h3">10</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">1</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">Mar</div>
-                                <div class="text-size-h3 line-height-h3">11</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">2</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">Mar</div>
-                                <div class="text-size-h3 line-height-h3">12</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">3</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -401,26 +397,26 @@ 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">Mar</div>
-                                <div class="text-size-h3 line-height-h3">13</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">4</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">Mar</div>
-                                <div class="text-size-h3 line-height-h3">14</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">5</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">Mar</div>
-                                <div class="text-size-h3 line-height-h3">15</div>
+                                <div class="text-size-12 line-height-12">May</div>
+                                <div class="text-size-h3 line-height-h3">6</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -428,8 +424,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">Mar</div>
-                                <div class="text-size-h3 line-height-h3">16</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>