@rio-cloud/uikit-mcp 1.1.7 → 1.1.9

package/dist/docs/components/basicMap.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/basicMap
-*Captured:* 2026-02-23T15:49:18.105Z
+*Captured:* 2026-03-06T10:41:15.195Z
 
 The following map shows labels for locale de
 
@@ -11,29 +11,7 @@ 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
-
-#### Summary
-
-Terms of use© 1987–2026 HERE
-
-10 km
-
-Choose view
-Map view
-Satellite
-
-Traffic conditions
-Show traffic incidents
 
 #### React (tsx)
 
@@ -64,29 +42,7 @@ export default MapExample;
 
 ### Example: Example 2
 
-Terms of use© 1987–2026 HERE
-
-10 km
-
-Choose view
-Map view
-Satellite
-
-Traffic conditions
-Show traffic incidents
-
-#### Summary
 
-Terms of use© 1987–2026 HERE
-
-10 km
-
-Choose view
-Map view
-Satellite
-
-Traffic conditions
-Show traffic incidents
 
 #### React (tsx)
 
@@ -117,29 +73,7 @@ export default MapWithScaleBarExample;
 
 ### Example: Example 3
 
-Terms of use© 1987–2026 HERE
-
-10 km
-
-Ansicht auswählen
-Kartenansicht
-Satellit
-
-Verkehrslage
-Verkehrsstörungen anzeigen
-
-#### Summary
-
-Terms of use© 1987–2026 HERE
-
-10 km
-
-Ansicht auswählen
-Kartenansicht
-Satellit
 
-Verkehrslage
-Verkehrsstörungen anzeigen
 
 #### React (tsx)
 

package/dist/docs/components/bottomSheet.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#/components/bottomSheet
-*Captured:* 2026-02-23T15:48:06.792Z
+*Captured:* 2026-03-06T10:40:01.800Z
 
 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.
 
@@ -14,11 +14,6 @@ The TimedBottomSheet is a wrapper component for the BottomSheet that allows to c
 This demonstrates a small bottom sheet use case on desktop. This can be used for providing additional information, upselling, feedback etc.
 Trigger small BottomSheet
 
-#### Summary
-
-This demonstrates a small bottom sheet use case on desktop. This can be used for providing additional information, upselling, feedback etc.
-Trigger small BottomSheet
-
 #### React (tsx)
 
 ```tsx
@@ -99,13 +94,7 @@ const content = (
 ### Example: Example 2
 
 This demonstrates a bottom sheet use case on mobile. This can be used for providing additional information on mobile instead of using a sidebar, onboarding, alternative for dialogs etc.
-NoteThis example does not make sense on desktop with wider screens. Handle responsive modes and use a dialog or sidebar on desktop instead.
-Trigger mobile BottomSheet
-
-#### Summary
-
-This demonstrates a bottom sheet use case on mobile. This can be used for providing additional information on mobile instead of using a sidebar, onboarding, alternative for dialogs etc.
-NoteThis example does not make sense on desktop with wider screens. Handle responsive modes and use a dialog or sidebar on desktop instead.
+Note This example does not make sense on desktop with wider screens. Handle responsive modes and use a dialog or sidebar on desktop instead.
 Trigger mobile BottomSheet
 
 #### React (tsx)
@@ -244,11 +233,6 @@ export default () => {
 This demonstrates a bottom sheet use case on mobile. It demonstrates a bottom sheet for smartphones to perform an action.
 Trigger mobile BottomSheet
 
-#### Summary
-
-This demonstrates a bottom sheet use case on mobile. It demonstrates a bottom sheet for smartphones to perform an action.
-Trigger mobile BottomSheet
-
 #### React (tsx)
 
 ```tsx
@@ -361,11 +345,6 @@ export default () => {
 This demonstrates a bottom sheet use case on mobile. It demonstrates a bottom sheet for an example of how you could do onboarding on smartphones.
 Trigger mobile onboarding BottomSheet
 
-#### Summary
-
-This demonstrates a bottom sheet use case on mobile. It demonstrates a bottom sheet for an example of how you could do onboarding on smartphones.
-Trigger mobile onboarding BottomSheet
-
 #### React (tsx)
 
 ```tsx
@@ -467,11 +446,6 @@ export default () => {
 Showcase of a timed bottom sheet used for requesting feedback from the user after a major feature was released or updated.
 Trigger timed bottom sheet
 
-#### Summary
-
-Showcase of a timed bottom sheet used for requesting feedback from the user after a major feature was released or updated.
-Trigger timed bottom sheet
-
 #### React (tsx)
 
 ```tsx

package/dist/docs/components/button.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/button
-*Captured:* 2026-02-23T15:48:12.234Z
+*Captured:* 2026-03-06T10:40:07.427Z
 
 The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons
 
@@ -12,21 +12,11 @@ The button component is the React equivalent to the normal HTML button with some
 ### Example: Standard buttons
 
 Standard buttons
-DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
+Default Primary Secondary Success Info Warning Danger Muted filled Muted
 Disabled buttons
-DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
+Default Primary Secondary Success Info Warning Danger Muted filled Muted
 Button sizes
-Extra SmallSmallMediumLarge
-Icon only buttons
-
-#### Summary
-
-Standard buttons
-DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
-Disabled buttons
-DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
-Button sizes
-Extra SmallSmallMediumLarge
+Extra Small Small Medium Large
 Icon only buttons
 
 #### React (tsx)
@@ -305,20 +295,11 @@ export default () => (
 ### Example: Buttons with link styles
 
 Buttons with link styles
-PrimarySuccessInfoWarningDanger
-Button with link styles - inline
-
-This is an example for an Inline link button.
-Note Link styled buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE.
-
-#### Summary
-
-Buttons with link styles
-PrimarySuccessInfoWarningDanger
+Primary Success Info Warning Danger
 Button with link styles - inline
 
 This is an example for an Inline link button.
-Note Link styled buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE.
+Note Link styled buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE .
 
 #### React (tsx)
 
@@ -456,21 +437,7 @@ export default () => (
 Button group
 
 Button with tooltips
-Button with TooltipDisabled Button with Tooltip
-Block button
-Block button
-Multiline button
-This is a multiline button with a lot of Text
-Toggle button
-Toggle me
-Add something / take picture button example
-
-#### Summary
-
-Button group
-
-Button with tooltips
-Button with TooltipDisabled Button with Tooltip
+Button with Tooltip Disabled Button with Tooltip
 Block button
 Block button
 Multiline button
@@ -650,12 +617,7 @@ export default () => (
 ### Example: Outlined buttons (transparent)
 
 Outlined buttons (transparent)
-DefaultPrimarySuccessInfoWarningDangerMuted filledMuted
-
-#### Summary
-
-Outlined buttons (transparent)
-DefaultPrimarySuccessInfoWarningDangerMuted filledMuted
+Default Primary Success Info Warning Danger Muted filled Muted
 
 #### React (tsx)
 
@@ -785,21 +747,11 @@ export default () => (
 ### Example: Buttons as anchor element
 
 Buttons as anchor element
-DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
+Default Primary Secondary Success Info Warning Danger Muted filled Muted
 Buttons as anchor element - disabled
-DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
+Default Primary Secondary Success Info Warning Danger Muted filled Muted
 Buttons as anchor element - various sizes
-Extra SmallSmallMediumLarge
-Buttons as anchor element - icon only
-
-#### Summary
-
-Buttons as anchor element
-DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
-Buttons as anchor element - disabled
-DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
-Buttons as anchor element - various sizes
-Extra SmallSmallMediumLarge
+Extra Small Small Medium Large
 Buttons as anchor element - icon only
 
 #### React (tsx)
@@ -1082,12 +1034,7 @@ export default () => (
 ### Example: Action buttons
 
 Action buttons
-Click me!Click me!Click me!Click me!Click me!Click me!
-
-#### Summary
-
-Action buttons
-Click me!Click me!Click me!Click me!Click me!Click me!
+Click me! Click me! Click me! Click me! Click me! Click me!
 
 #### React (tsx)
 

package/dist/docs/components/buttonToolbar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/buttonToolbar
-*Captured:* 2026-02-23T15:48:09.017Z
+*Captured:* 2026-03-06T10:40:03.868Z
 
 The ButtonToolbar is a utility component designed to simplify usage and alignment. Its purpose is to ensure consistent spacing.
 
@@ -12,30 +12,16 @@ The ButtonToolbar is a utility component designed to simplify usage and alignmen
 ### Example: ButtonToolbar
 
 ButtonToolbar
-ButtonButton
+Button Button
 
 ButtonToolbar centered
-CancelSave changes
+Cancel Save changes
 
 ButtonToolbar right aligned
-CancelSave changes
+Cancel Save changes
 
 ButtonToolbar space between
-PreviousNext
-
-#### Summary
-
-ButtonToolbar
-ButtonButton
-
-ButtonToolbar centered
-CancelSave changes
-
-ButtonToolbar right aligned
-CancelSave changes
-
-ButtonToolbar space between
-PreviousNext
+Previous Next
 
 #### React (tsx)
 

package/dist/docs/components/calendarStripe.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/calendarStripe
-*Captured:* 2026-02-23T15:48:55.964Z
+*Captured:* 2026-03-06T10:40:56.891Z
 
 A headless component where you provide a function that renders the UI for every day to be displayed.
 
@@ -11,31 +11,17 @@ A headless component where you provide a function that renders the UI for every
 
 ### Example: Example 1
 
-Tuesday
-24 February 2026
-
-Wednesday
-25 February 2026
-
-Thursday
-26 February 2026
+Saturday
+7 March 2026
 
-Friday
-27 February 2026
+Sunday
+8 March 2026
 
-#### Summary
+Monday
+9 March 2026
 
 Tuesday
-24 February 2026
-
-Wednesday
-25 February 2026
-
-Thursday
-26 February 2026
-
-Friday
-27 February 2026
+10 March 2026
 
 #### React (tsx)
 
@@ -127,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 ">
+                        <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>Tuesday</div>
-                                    <div class="text-size-16 text-medium">24 February 2026</div>
+                                    <div>Saturday</div>
+                                    <div class="text-size-16 text-medium">7 March 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -139,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 ">
+                        <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>Wednesday</div>
-                                    <div class="text-size-16 text-medium">25 February 2026</div>
+                                    <div>Sunday</div>
+                                    <div class="text-size-16 text-medium">8 March 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -154,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>Thursday</div>
-                                    <div class="text-size-16 text-medium">26 February 2026</div>
+                                    <div>Monday</div>
+                                    <div class="text-size-16 text-medium">9 March 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -166,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>Friday</div>
-                                    <div class="text-size-16 text-medium">27 February 2026</div>
+                                    <div>Tuesday</div>
+                                    <div class="text-size-16 text-medium">10 March 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -206,75 +192,39 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
 
 ### Example: Example 2
 
-Feb
-24
-2026
-
-Feb
-25
-2026
-
-Feb
-26
-2026
-
-Feb
-27
-2026
-
-Feb
-28
-2026
-
 Mar
-1
+7
 2026
 
 Mar
-2
+8
 2026
 
 Mar
-3
-2026
-
-Set to JanuaryToggle Weekends
-
-#### Summary
-
-Feb
-24
+9
 2026
 
-Feb
-25
-2026
-
-Feb
-26
-2026
-
-Feb
-27
+Mar
+10
 2026
 
-Feb
-28
+Mar
+11
 2026
 
 Mar
-1
+12
 2026
 
 Mar
-2
+13
 2026
 
 Mar
-3
+14
 2026
 
-Set to JanuaryToggle Weekends
+Set to January Toggle Weekends
 
 #### React (tsx)
 
@@ -395,19 +345,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  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">Feb</div>
-                                <div class="text-size-h3 line-height-h3">24</div>
+                                <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">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">Feb</div>
-                                <div class="text-size-h3 line-height-h3">25</div>
+                                <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">2026</div>
                             </div>
                         </div>
@@ -415,8 +365,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">Feb</div>
-                                <div class="text-size-h3 line-height-h3">26</div>
+                                <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">2026</div>
                             </div>
                         </div>
@@ -424,26 +374,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">Feb</div>
-                                <div class="text-size-h3 line-height-h3">27</div>
+                                <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">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">Feb</div>
-                                <div class="text-size-h3 line-height-h3">28</div>
+                                <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">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">1</div>
+                                <div class="text-size-h3 line-height-h3">12</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -452,25 +402,25 @@ 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">Mar</div>
-                                <div class="text-size-h3 line-height-h3">2</div>
+                                <div class="text-size-h3 line-height-h3">13</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">3</div>
+                                <div class="text-size-h3 line-height-h3">14</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">4</div>
+                                <div class="text-size-h3 line-height-h3">15</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -479,7 +429,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">Mar</div>
-                                <div class="text-size-h3 line-height-h3">5</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-02-23T15:48:39.000Z
+*Captured:* 2026-03-06T10:40:37.908Z
 
 The Card is a utility component designed to simplify usage of default card styling.
 
@@ -17,14 +17,6 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 
 Lorem
 
-#### Summary
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
-Lorem ipsum
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
-
-Lorem
-
 #### React (tsx)
 
 ```tsx