@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

package/dist/docs/templates/table-panel.md

@@ -0,0 +1,310 @@
+# Combined tables in ExpandablePanel
+
+*Category:* Templates
+*Section:* Tables
+*Source:* https://uikit.developers.rio.cloud/#/templates/table-panel
+*Captured:* 2026-04-20T12:55:47.756Z
+
+## Combined tables in ExpandablePanel
+
+### Example: Example 1
+
+Panel header table
+
+Lorem ipsum dolor
+
+Dolor sit
+
+Amet
+
+Head column
+
+Head column
+
+Head column
+
+Head column
+
+Head column
+
+Lorem ipsum
+
+2 Lorems
+
+Dolor sit amet
+
+1 Lorem
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import classNames from '@rio-cloud/rio-uikit/classNames';
+import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
+import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
+
+type PanelHeaderRow = {
+    title: string;
+    metric: string;
+    detail: string;
+    status: string;
+};
+
+type PanelBodyRow = {
+    name: string;
+    metric: string;
+};
+
+const tableColumnWidth = '20%';
+
+const headerRow: PanelHeaderRow = {
+    title: 'Panel header table',
+    metric: 'Lorem ipsum dolor',
+    detail: 'Dolor sit',
+    status: 'Amet',
+};
+
+const bodyRows: PanelBodyRow[] = [
+    { name: 'Lorem ipsum', metric: '2 Lorems' },
+    { name: 'Dolor sit amet', metric: '1 Lorem' },
+];
+
+const TablePanelExample = () => {
+    const [isOpen, setIsOpen] = useState(true);
+
+    return (
+        <ExpanderPanel
+            open={isOpen}
+            onToggle={setIsOpen}
+            title={
+                <Table border={false} rounded={false} className='width-100pct'>
+                    <TableHeader className={classNames('bg-white', isOpen ? 'border-width-1' : 'border-none')}>
+                        <TableHeaderColumn columnKey='title' width='40%'>
+                            <b>{headerRow.title}</b>
+                        </TableHeaderColumn>
+                        <TableHeaderColumn columnKey='metric' width={tableColumnWidth}>
+                            <span className='rioglyph rioglyph-volume margin-right-3' />
+                            <span>{headerRow.metric}</span>
+                        </TableHeaderColumn>
+                        <TableHeaderColumn columnKey='detail' width={tableColumnWidth}>
+                            {headerRow.detail}
+                        </TableHeaderColumn>
+                        <TableHeaderColumn columnKey='status' width={tableColumnWidth} className='padding-right-30'>
+                            {headerRow.status}
+                        </TableHeaderColumn>
+                    </TableHeader>
+                </Table>
+            }
+            headerClassName='padding-0 position-relative'
+            iconClassName='position-absolute top-0 right-15 height-100pct display-flex align-items-center'
+            titleClassName='width-100pct margin-0 overflow-hidden'
+            bodyClassName='padding-0'
+            className='shadow-default overflow-hidden'
+        >
+            <Table border={false} rounded={false} className='width-100pct'>
+                <TableHeader>
+                    <TableHeaderColumn columnKey='namePrimary' width={tableColumnWidth}>
+                        Head column
+                    </TableHeaderColumn>
+                    <TableHeaderColumn columnKey='nameSecondary' width={tableColumnWidth}>
+                        Head column
+                    </TableHeaderColumn>
+                    <TableHeaderColumn columnKey='metric' width={tableColumnWidth}>
+                        Head column
+                    </TableHeaderColumn>
+                    <TableHeaderColumn columnKey='detail' width={tableColumnWidth}>
+                        Head column
+                    </TableHeaderColumn>
+                    <TableHeaderColumn columnKey='status' width={tableColumnWidth}>
+                        Head column
+                    </TableHeaderColumn>
+                </TableHeader>
+                <TableBody>
+                    {bodyRows.map(row => (
+                        <TableRow key={row.name} noHover>
+                            <TableColumn columnKey='namePrimary' colSpan={2}>
+                                {row.name}
+                            </TableColumn>
+                            <TableColumn columnKey='metric'>
+                                <div>
+                                    <span className='rioglyph rioglyph-volume margin-right-3' />
+                                    <span>{row.metric}</span>
+                                </div>
+                            </TableColumn>
+                            <TableColumn columnKey='detail' />
+                            <TableColumn columnKey='status' />
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </ExpanderPanel>
+    );
+};
+
+export default TablePanelExample;
+```
+
+#### HTML (html)
+
+```html
+<div class="expander-panel panel panel-blank shadow-default overflow-hidden" aria-label="expander panel">
+    <div class="panel-heading open padding-0 position-relative" aria-label="panel heading">
+        <span class="title width-100pct margin-0 overflow-hidden">
+            <div class="table table-view-table table-has-head width-100pct" role="table" style="--table-columns: minmax(0, calc(var(--table-width) * 40 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 906px;" aria-colcount="4">
+                <div class="table-head" role="rowgroup">
+                    <div class="table-head-grid bg-white border-width-1" role="row" style="grid-template-rows: repeat(1, auto);">
+                        <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="title" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                            <div class="table-head-cell-content">
+                                <div class="table-head-cell-content-row">
+                                    <span class="table-head-label-wrapper">
+                                        <span class="table-head-label">
+                                            <b>Panel header table</b>
+                                        </span>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="metric" role="columnheader" aria-colindex="2" aria-rowindex="1" style="grid-area: 1 / 2 / span 1 / span 1;">
+                            <div class="table-head-cell-content">
+                                <div class="table-head-cell-content-row">
+                                    <span class="table-head-label-wrapper">
+                                        <span class="table-head-label">
+                                            <span class="rioglyph rioglyph-volume margin-right-3">
+                                            </span>
+                                            <span>Lorem ipsum dolor</span>
+                                        </span>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="detail" role="columnheader" aria-colindex="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 1;">
+                            <div class="table-head-cell-content">
+                                <div class="table-head-cell-content-row">
+                                    <span class="table-head-label-wrapper">
+                                        <span class="table-head-label">Dolor sit</span>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="table-head-cell table-align-left table-vertical-align-middle padding-right-30" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
+                            <div class="table-head-cell-content">
+                                <div class="table-head-cell-content-row">
+                                    <span class="table-head-label-wrapper">
+                                        <span class="table-head-label">Amet</span>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </span>
+        <span class="expander-icon position-absolute top-0 right-15 height-100pct display-flex align-items-center rioglyph rioglyph-chevron-down">
+        </span>
+    </div>
+    <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
+        <div>
+            <div class="panel-body padding-0">
+                <div class="table table-view-table table-has-head width-100pct" role="table" style="--table-columns: minmax(0, calc(var(--table-width) * 20 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4 table-col-5&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 906px;" aria-colcount="5">
+                    <div class="table-head" role="rowgroup">
+                        <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
+                            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="namePrimary" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                                <div class="table-head-cell-content">
+                                    <div class="table-head-cell-content-row">
+                                        <span class="table-head-label-wrapper">
+                                            <span class="table-head-label">Head column</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="nameSecondary" role="columnheader" aria-colindex="2" aria-rowindex="1" style="grid-area: 1 / 2 / span 1 / span 1;">
+                                <div class="table-head-cell-content">
+                                    <div class="table-head-cell-content-row">
+                                        <span class="table-head-label-wrapper">
+                                            <span class="table-head-label">Head column</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="metric" role="columnheader" aria-colindex="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 1;">
+                                <div class="table-head-cell-content">
+                                    <div class="table-head-cell-content-row">
+                                        <span class="table-head-label-wrapper">
+                                            <span class="table-head-label">Head column</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="detail" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
+                                <div class="table-head-cell-content">
+                                    <div class="table-head-cell-content-row">
+                                        <span class="table-head-label-wrapper">
+                                            <span class="table-head-label">Head column</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
+                                <div class="table-head-cell-content">
+                                    <div class="table-head-cell-content-row">
+                                        <span class="table-head-label-wrapper">
+                                            <span class="table-head-label">Head column</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="table-body" role="rowgroup">
+                        <div class="table-row table-row-no-hover" data-index="0" data-row-id="0" role="row">
+                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="namePrimary" role="cell" aria-colindex="1" aria-colspan="2" style="grid-area: 1 / 1 / span 1 / span 2;">
+                                <div class="table-cell-content overflow-hidden">Lorem ipsum</div>
+                            </div>
+                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="metric" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                                <div class="table-cell-content overflow-hidden">
+                                    <div>
+                                        <span class="rioglyph rioglyph-volume margin-right-3">
+                                        </span>
+                                        <span>2 Lorems</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="detail" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                                <div class="table-cell-content overflow-hidden">
+                                </div>
+                            </div>
+                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
+                                <div class="table-cell-content overflow-hidden">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="table-row table-row-no-hover" data-index="1" data-row-id="1" role="row">
+                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="namePrimary" role="cell" aria-colindex="1" aria-colspan="2" style="grid-area: 1 / 1 / span 1 / span 2;">
+                                <div class="table-cell-content overflow-hidden">Dolor sit amet</div>
+                            </div>
+                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="metric" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                                <div class="table-cell-content overflow-hidden">
+                                    <div>
+                                        <span class="rioglyph rioglyph-volume margin-right-3">
+                                        </span>
+                                        <span>1 Lorem</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="detail" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                                <div class="table-cell-content overflow-hidden">
+                                </div>
+                            </div>
+                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
+                                <div class="table-cell-content overflow-hidden">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```

package/dist/docs/templates/usage-cards.md

@@ -0,0 +1,199 @@
+# Data usage cards
+
+*Category:* Templates
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#/templates/usage-cards
+*Captured:* 2026-04-20T12:55:43.594Z
+
+## Data usage cards
+
+### Example: Example 1
+
+Data used for shipment tracking
+
+The following data may be used to track shipments across carriers and systems:
+Vehicle ID
+Current location
+Shipment status
+Timestamps
+Driver ID
+Route info
+
+Edit shipment settings
+
+Data linked to your company profile
+
+This information may be associated with your identity or company profile:
+Customer ID
+Delivery address
+Shipping docs
+Usage metrics
+Freight costs
+Other data
+
+Edit profile settings
+
+#### React (tsx)
+
+```tsx
+import Button from '@rio-cloud/rio-uikit/Button';
+
+export default () => (
+    <div className='max-width-600 margin-auto'>
+        <div className='display-grid gap-20 grid-cols-1 grid-cols-2-md'>
+            <div className='bg-white rounded border padding-20 display-flex flex-column justify-content-between'>
+                <div className='display-flex flex-column gap-5 justify-content-center text-color-darker margin-bottom-25'>
+                    <span className='rioglyph rioglyph-delivery text-size-h2' />
+                    <div className='text-size-18 text-bold text-center'>Data used for shipment tracking</div>
+                </div>
+                <div>
+                    <div className='text-color-darker text-center margin-bottom-15'>
+                        The following data may be used to track shipments across carriers and systems:
+                    </div>
+                    <div className='display-grid grid-cols-2 gap-10 text-size-14 text-color-darker'>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='rioglyph rioglyph-truck' /> Vehicle ID
+                        </div>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='rioglyph rioglyph-map-marker' /> Current location
+                        </div>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='rioglyph rioglyph-archive' /> Shipment status
+                        </div>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='rioglyph rioglyph-time' /> Timestamps
+                        </div>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='rioglyph rioglyph-user' /> Driver ID
+                        </div>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='rioglyph rioglyph-route' /> Route info
+                        </div>
+                    </div>
+                    <Button className='margin-top-25' variant='link' block>
+                        Edit shipment settings
+                    </Button>
+                </div>
+            </div>
+
+            <div className='bg-white rounded border padding-20 display-flex flex-column justify-content-between'>
+                <div className='display-flex flex-column gap-5 justify-content-center text-color-darker margin-bottom-25'>
+                    <span className='rioglyph rioglyph-user-sign text-size-h2' />
+                    <div className='text-size-18 text-bold text-center'>Data linked to your company profile</div>
+                </div>
+                <div>
+                    <div className='text-color-darker text-center margin-bottom-15'>
+                        This information may be associated with your identity or company profile:
+                    </div>
+                    <div className='display-grid grid-cols-2 gap-10 text-size-14 text-color-darker'>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='rioglyph rioglyph-user-group' /> Customer ID
+                        </div>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='rioglyph rioglyph-map' /> Delivery address
+                        </div>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='rioglyph rioglyph-document' /> Shipping docs
+                        </div>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='rioglyph rioglyph-stats' /> Usage metrics
+                        </div>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='rioglyph rioglyph-cost-efficency' /> Freight costs
+                        </div>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='rioglyph rioglyph-info-sign' /> Other data
+                        </div>
+                    </div>
+                    <Button className='margin-top-25' variant='link' block>
+                        Edit profile settings
+                    </Button>
+                </div>
+            </div>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-600 margin-auto">
+    <div class="display-grid gap-20 grid-cols-1 grid-cols-2-md">
+        <div class="bg-white rounded border padding-20 display-flex flex-column justify-content-between">
+            <div class="display-flex flex-column gap-5 justify-content-center text-color-darker margin-bottom-25">
+                <span class="rioglyph rioglyph-delivery text-size-h2">
+                </span>
+                <div class="text-size-18 text-bold text-center">Data used for shipment tracking</div>
+            </div>
+            <div>
+                <div class="text-color-darker text-center margin-bottom-15">The following data may be used to track shipments across carriers and systems:</div>
+                <div class="display-grid grid-cols-2 gap-10 text-size-14 text-color-darker">
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="rioglyph rioglyph-truck">
+                        </span> Vehicle ID
+                    </div>
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="rioglyph rioglyph-map-marker">
+                        </span> Current location
+                    </div>
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="rioglyph rioglyph-archive">
+                        </span> Shipment status
+                    </div>
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="rioglyph rioglyph-time">
+                        </span> Timestamps
+                    </div>
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="rioglyph rioglyph-user">
+                        </span> Driver ID
+                    </div>
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="rioglyph rioglyph-route">
+                        </span> Route info
+                    </div>
+                </div>
+                <button type="button" class="btn btn-default btn-link btn-block btn-component margin-top-25" tabindex="0">Edit shipment settings</button>
+            </div>
+        </div>
+        <div class="bg-white rounded border padding-20 display-flex flex-column justify-content-between">
+            <div class="display-flex flex-column gap-5 justify-content-center text-color-darker margin-bottom-25">
+                <span class="rioglyph rioglyph-user-sign text-size-h2">
+                </span>
+                <div class="text-size-18 text-bold text-center">Data linked to your company profile</div>
+            </div>
+            <div>
+                <div class="text-color-darker text-center margin-bottom-15">This information may be associated with your identity or company profile:</div>
+                <div class="display-grid grid-cols-2 gap-10 text-size-14 text-color-darker">
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="rioglyph rioglyph-user-group">
+                        </span> Customer ID
+                    </div>
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="rioglyph rioglyph-map">
+                        </span> Delivery address
+                    </div>
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="rioglyph rioglyph-document">
+                        </span> Shipping docs
+                    </div>
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="rioglyph rioglyph-stats">
+                        </span> Usage metrics
+                    </div>
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="rioglyph rioglyph-cost-efficency">
+                        </span> Freight costs
+                    </div>
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="rioglyph rioglyph-info-sign">
+                        </span> Other data
+                    </div>
+                </div>
+                <button type="button" class="btn btn-default btn-link btn-block btn-component margin-top-25" tabindex="0">Edit profile settings</button>
+            </div>
+        </div>
+    </div>
+</div>
+```

package/dist/docs/utilities/classNames.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Helper
 *Source:* https://uikit.developers.rio.cloud/#/utilities/classNames
-*Captured:* 2026-03-06T10:41:30.535Z
+*Captured:* 2026-04-20T12:55:48.736Z
 
 Small utility for composing CSS classes from optional string arguments. It keeps the common case readable without adding third-party runtime behavior.
 

package/dist/docs/utilities/deviceUtils.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Helper
 *Source:* https://uikit.developers.rio.cloud/#/utilities/deviceUtils
-*Captured:* 2026-03-06T10:41:31.017Z
+*Captured:* 2026-04-20T12:55:48.277Z
 
 Set of utility functions which helps detecting certain devices or functionality.
 
@@ -110,7 +110,7 @@ export default DeviceUtilsExample;
     <p>Loaded in iFrame: false</p>
     <hr>
     <p>Zoom is: enabled</p>
-    <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0" data-capture-callout="true">
+    <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0">
         <div>
             <span class="label label-info label-condensed label-filled">Note</span>
         </div>

package/dist/docs/utilities/featureToggles.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Helper
 *Source:* https://uikit.developers.rio.cloud/#/utilities/featureToggles
-*Captured:* 2026-03-06T10:41:33.236Z
+*Captured:* 2026-04-20T12:55:49.331Z
 
 URL-based feature toggles (also known as feature flags) are a powerful development technique that allows you to enable or disable features in your application dynamically, without deploying new code.
 

package/dist/docs/utilities/fuelTypeUtils.md

@@ -3,7 +3,7 @@
 *Category:* Utilities
 *Section:* Helper
 *Source:* https://uikit.developers.rio.cloud/#/utilities/fuelTypeUtils
-*Captured:* 2026-03-06T10:41:32.458Z
+*Captured:* 2026-04-20T12:55:48.627Z
 
 There is a wide variety of standardized fuel types, and on top of that, some projects or systems introduce their own custom definitions. While the naming can differ, many of these values carry the same semantic meaning. To avoid confusion and ensure consistent visual representation, we provide a centralized mapping of fuel types to icons.
 
@@ -53,38 +53,36 @@ Unknown paired fuel icon
 import Rioglyph from '@rio-cloud/rio-uikit/Rioglyph';
 import { getFuelIcon } from '@rio-cloud/rio-uikit/fuelTypeUtils';
 
-export default () => {
-    return (
-        <div className='display-flex flex-column gap-15'>
-            <div>
-                <label>Single rioglyph fuel icon</label>
-                <div className='display-flex gap-5 align-items-center text-size-20'>
-                    This is a diesel truck <span className={`rioglyph ${getFuelIcon('diesel')}`} />
-                </div>
-                <div className='display-flex gap-5 align-items-center text-size-20'>
-                    This is a gasoline truck <span className={`rioglyph ${getFuelIcon('gas')}`} />
-                </div>
-                <div className='display-flex gap-5 align-items-center text-size-20'>
-                    This is an electric bus <span className={`rioglyph ${getFuelIcon('electric')}`} />
-                </div>
+export default () => (
+    <div className='display-flex flex-column gap-15'>
+        <div>
+            <label>Single rioglyph fuel icon</label>
+            <div className='display-flex gap-5 align-items-center text-size-20'>
+                This is a diesel truck <span className={`rioglyph ${getFuelIcon('diesel')}`} />
             </div>
-            <div>
-                <label>Paired rioglyph fuel icon</label>
-                <div className='display-flex gap-10'>
-                    <Rioglyph size='h1' icon={'rioglyph-truck'} pairIcon={getFuelIcon('diesel')} />
-                    <Rioglyph size='h1' icon={'rioglyph-truck'} pairIcon={getFuelIcon('gas')} />
-                    <Rioglyph size='h1' icon={'rioglyph-bus'} pairIcon={getFuelIcon('electric')} />
-                </div>
+            <div className='display-flex gap-5 align-items-center text-size-20'>
+                This is a gasoline truck <span className={`rioglyph ${getFuelIcon('gas')}`} />
             </div>
-            <div>
-                <label>Unknown paired fuel icon</label>
-                <div className='display-flex gap-10'>
-                    <Rioglyph size='h1' icon={'rioglyph-truck'} pairIcon={getFuelIcon('whatever')} />
-                </div>
+            <div className='display-flex gap-5 align-items-center text-size-20'>
+                This is an electric bus <span className={`rioglyph ${getFuelIcon('electric')}`} />
             </div>
         </div>
-    );
-};
+        <div>
+            <label>Paired rioglyph fuel icon</label>
+            <div className='display-flex gap-10'>
+                <Rioglyph size='h1' icon={'rioglyph-truck'} pairIcon={getFuelIcon('diesel')} />
+                <Rioglyph size='h1' icon={'rioglyph-truck'} pairIcon={getFuelIcon('gas')} />
+                <Rioglyph size='h1' icon={'rioglyph-bus'} pairIcon={getFuelIcon('electric')} />
+            </div>
+        </div>
+        <div>
+            <label>Unknown paired fuel icon</label>
+            <div className='display-flex gap-10'>
+                <Rioglyph size='h1' icon={'rioglyph-truck'} pairIcon={getFuelIcon('whatever')} />
+            </div>
+        </div>
+    </div>
+);
 ```
 
 #### HTML (html)