@rio-cloud/uikit-mcp 1.1.4 → 1.1.6

package/dist/docs/templates/loading-progress.md

@@ -2,8 +2,8 @@
 
 *Category:* Templates
 *Section:* Progress
-*Source:* https://uikit.developers.rio.cloud/#templates/loading-progress
-*Captured:* 2026-01-14T09:08:36.869Z
+*Source:* https://uikit.developers.rio.cloud/#/templates/loading-progress
+*Captured:* 2026-02-23T13:48:42.950Z
 
 ## Loading progress
 

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

@@ -2,8 +2,8 @@
 
 *Category:* Templates
 *Section:* Content
-*Source:* https://uikit.developers.rio.cloud/#templates/options-panel
-*Captured:* 2026-01-14T09:08:32.169Z
+*Source:* https://uikit.developers.rio.cloud/#/templates/options-panel
+*Captured:* 2026-02-23T13:48:40.457Z
 
 ## Options panel
 

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

@@ -2,8 +2,8 @@
 
 *Category:* Templates
 *Section:* Content
-*Source:* https://uikit.developers.rio.cloud/#templates/panel-variants
-*Captured:* 2026-01-14T09:08:30.746Z
+*Source:* https://uikit.developers.rio.cloud/#/templates/panel-variants
+*Captured:* 2026-02-23T13:48:39.645Z
 
 ## Panel variants
 

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

@@ -2,8 +2,8 @@
 
 *Category:* Templates
 *Section:* Progress
-*Source:* https://uikit.developers.rio.cloud/#templates/progress-cards
-*Captured:* 2026-01-14T09:08:37.560Z
+*Source:* https://uikit.developers.rio.cloud/#/templates/progress-cards
+*Captured:* 2026-02-23T13:48:44.192Z
 
 ## Progress cards
 

package/dist/docs/templates/progress-success.md

@@ -2,8 +2,8 @@
 
 *Category:* Templates
 *Section:* Progress
-*Source:* https://uikit.developers.rio.cloud/#templates/progress-success
-*Captured:* 2026-01-14T09:08:37.747Z
+*Source:* https://uikit.developers.rio.cloud/#/templates/progress-success
+*Captured:* 2026-02-23T13:48:44.076Z
 
 ## Progress success
 

package/dist/docs/templates/settings-form.md

@@ -2,8 +2,8 @@
 
 *Category:* Templates
 *Section:* Forms
-*Source:* https://uikit.developers.rio.cloud/#templates/settings-form
-*Captured:* 2026-01-14T09:08:33.865Z
+*Source:* https://uikit.developers.rio.cloud/#/templates/settings-form
+*Captured:* 2026-02-23T13:48:41.603Z
 
 ## Form blocks
 
@@ -15,7 +15,7 @@ This name will appear on your team profile page
 About the team
 Write a short summary about your organization or group (max 240 characters).
 
-Phased 24/7 software
+Programmable bottom-line focus group
 
 Company email
 Your contact email address for customer communication
@@ -25,11 +25,11 @@ Display email on team page
 Office location
 Primary business address used for official correspondence
 
-ColoradoColorado
-Indiana
+MissouriMissouri
+Illinois
 
-Pitcairn IslandsPitcairn Islands
-Haiti
+IndonesiaIndonesia
+Mozambique
 
 Preferred currency
 All pricing and payouts will be shown in this currency
@@ -48,7 +48,7 @@ This name will appear on your team profile page
 About the team
 Write a short summary about your organization or group (max 240 characters).
 
-Phased 24/7 software
+Programmable bottom-line focus group
 
 Company email
 Your contact email address for customer communication
@@ -58,11 +58,11 @@ Display email on team page
 Office location
 Primary business address used for official correspondence
 
-ColoradoColorado
-Indiana
+MissouriMissouri
+Illinois
 
-Pitcairn IslandsPitcairn Islands
-Haiti
+IndonesiaIndonesia
+Mozambique
 
 Preferred currency
 All pricing and payouts will be shown in this currency
@@ -233,7 +233,7 @@ export default () => {
                     </div>
                     <div class="form-group">
                         <div class="ClearableInput input-group">
-                            <input class="form-control withClearButton" type="text" tabindex="0" value="Lemke, Bauch and Veum">
+                            <input class="form-control withClearButton" type="text" tabindex="0" value="Sauer Inc">
                             <span class="clearButton">
                                 <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                 </span>
@@ -253,7 +253,7 @@ export default () => {
                         <p class="text-wrap-balance text-color-dark">Write a short summary about your organization or group (max 240 characters).</p>
                     </div>
                     <div class="form-group">
-                        <textarea class="form-control" rows="4">Phased 24/7 software</textarea>
+                        <textarea class="form-control" rows="4">Programmable bottom-line focus group</textarea>
                     </div>
                 </section>
                 <div class="grid-colspan-2">
@@ -269,7 +269,7 @@ export default () => {
                     </div>
                     <div class="form-group">
                         <div class="ClearableInput input-group">
-                            <input class="form-control withClearButton" type="email" tabindex="0" value="Junius.Hilll92@gmail.com">
+                            <input class="form-control withClearButton" type="email" tabindex="0" value="Geovanny.Rempel60@hotmail.com">
                             <span class="clearButton">
                                 <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                 </span>
@@ -296,14 +296,14 @@ export default () => {
                     </div>
                     <div class="form-group display-flex flex-column gap-15">
                         <div class="ClearableInput input-group">
-                            <input placeholder="Street address" class="form-control withClearButton" type="text" tabindex="0" value="6544 Sawayn Causeway">
+                            <input placeholder="Street address" class="form-control withClearButton" type="text" tabindex="0" value="9219 Buster Manor">
                             <span class="clearButton">
                                 <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                 </span>
                             </span>
                         </div>
                         <div class="ClearableInput input-group">
-                            <input placeholder="City" class="form-control withClearButton" type="text" tabindex="0" value="Gulgowskiview">
+                            <input placeholder="City" class="form-control withClearButton" type="text" tabindex="0" value="Breitenbergport">
                             <span class="clearButton">
                                 <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                 </span>
@@ -312,7 +312,7 @@ export default () => {
                         <div class="display-flex gap-15">
                             <div class="select dropdown dropup">
                                 <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
-                                    <span class="selected-option-text">Colorado</span>
+                                    <span class="selected-option-text">Missouri</span>
                                     <span class="clearButton hide pointer-events-none">
                                         <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                         </span>
@@ -323,20 +323,20 @@ export default () => {
                                 <ul class="dropdown-menu" role="menu">
                                     <li class="" role="listitem">
                                         <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="1" data-item-index="0">
-                                            <span class="selected-option-dropdown-item">Colorado</span>
+                                            <span class="selected-option-dropdown-item">Missouri</span>
                                             <input type="hidden" value="1">
                                         </a>
                                     </li>
                                     <li class="" role="listitem">
                                         <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2" data-item-index="1">
-                                            <span class="selected-option-dropdown-item">Indiana</span>
+                                            <span class="selected-option-dropdown-item">Illinois</span>
                                             <input type="hidden" value="2">
                                         </a>
                                     </li>
                                 </ul>
                             </div>
                             <div class="ClearableInput input-group">
-                                <input placeholder="Zip code" class="form-control withClearButton" type="text" tabindex="0" value="21283-2170">
+                                <input placeholder="Zip code" class="form-control withClearButton" type="text" tabindex="0" value="01488-5224">
                                 <span class="clearButton">
                                     <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                     </span>
@@ -345,7 +345,7 @@ export default () => {
                         </div>
                         <div class="select dropdown dropup">
                             <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
-                                <span class="selected-option-text">Pitcairn Islands</span>
+                                <span class="selected-option-text">Indonesia</span>
                                 <span class="clearButton hide pointer-events-none">
                                     <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                     </span>
@@ -356,13 +356,13 @@ export default () => {
                             <ul class="dropdown-menu" role="menu">
                                 <li class="" role="listitem">
                                     <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="1" data-item-index="0">
-                                        <span class="selected-option-dropdown-item">Pitcairn Islands</span>
+                                        <span class="selected-option-dropdown-item">Indonesia</span>
                                         <input type="hidden" value="1">
                                     </a>
                                 </li>
                                 <li class="" role="listitem">
                                     <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2" data-item-index="1">
-                                        <span class="selected-option-dropdown-item">Haiti</span>
+                                        <span class="selected-option-dropdown-item">Mozambique</span>
                                         <input type="hidden" value="2">
                                     </a>
                                 </li>

package/dist/docs/templates/stats-blocks.md

@@ -2,8 +2,8 @@
 
 *Category:* Templates
 *Section:* Content
-*Source:* https://uikit.developers.rio.cloud/#templates/stats-blocks
-*Captured:* 2026-01-14T09:08:36.300Z
+*Source:* https://uikit.developers.rio.cloud/#/templates/stats-blocks
+*Captured:* 2026-02-23T13:48:44.447Z
 
 ## Stats blocks
 
@@ -13,22 +13,22 @@ Stats page
 Overview of your supply chain operations
 
 Total inventory
-830 units
+1197 units
 
 12%from last month
 
 Open orders
-68
+79
 
 5%from last month
 
 In transit
-5
+6
 
 -3%from last month
 
 Issues
-5
+4
 
 #### Summary
 
@@ -36,22 +36,22 @@ Stats page
 Overview of your supply chain operations
 
 Total inventory
-830 units
+1197 units
 
 12%from last month
 
 Open orders
-68
+79
 
 5%from last month
 
 In transit
-5
+6
 
 -3%from last month
 
 Issues
-5
+4
 
 #### React (tsx)
 
@@ -168,7 +168,7 @@ export default () => {
                 </div>
                 <div>
                     <div class="text-color-dark">Total inventory</div>
-                    <div class="text-size-h3 text-color-darkest line-height-125rel">830 units</div>
+                    <div class="text-size-h3 text-color-darkest line-height-125rel">1197 units</div>
                 </div>
             </div>
             <div class="text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5">
@@ -186,7 +186,7 @@ export default () => {
                 </div>
                 <div>
                     <div class="text-color-dark">Open orders</div>
-                    <div class="text-size-h3 text-color-darkest line-height-125rel">68</div>
+                    <div class="text-size-h3 text-color-darkest line-height-125rel">79</div>
                 </div>
             </div>
             <div class="text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5">
@@ -204,7 +204,7 @@ export default () => {
                 </div>
                 <div>
                     <div class="text-color-dark">In transit</div>
-                    <div class="text-size-h3 text-color-darkest line-height-125rel">5</div>
+                    <div class="text-size-h3 text-color-darkest line-height-125rel">6</div>
                 </div>
             </div>
             <div class="text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5">
@@ -222,7 +222,7 @@ export default () => {
                 </div>
                 <div>
                     <div class="text-color-dark">Issues</div>
-                    <div class="text-size-h3 text-color-darkest line-height-125rel">5</div>
+                    <div class="text-size-h3 text-color-darkest line-height-125rel">4</div>
                 </div>
             </div>
         </div>
@@ -1055,7 +1055,7 @@ const getStatusColor = (status: string) => {
                 <div class="text-medium text-size-16">Lorem ipsum dolor</div>
                 <div>
                     <div class="dropdown btn-group">
-                        <button type="button" id="qnrl15k0vna" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                        <button type="button" id="d5vz3ho8v0d" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                             <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                             </span>
                         </button>
@@ -1092,7 +1092,7 @@ const getStatusColor = (status: string) => {
                                 <g tabindex="-1">
                                 </g>
                                 <g tabindex="-1">
-                                    <g class="recharts-layer recharts-bar" id="recharts-bar-:r1:">
+                                    <g class="recharts-layer recharts-bar" id="recharts-bar-:r0:">
                                         <g class="recharts-layer recharts-bar-rectangles">
                                             <g class="recharts-layer">
                                                 <g class="recharts-layer recharts-bar-rectangle">
@@ -1242,7 +1242,7 @@ const getStatusColor = (status: string) => {
                 </div>
                 <div>
                     <div class="dropdown btn-group">
-                        <button type="button" id="s0uvqzf6tfq" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                        <button type="button" id="r6ftwig55b9" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                             <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                             </span>
                         </button>
@@ -1310,7 +1310,7 @@ const getStatusColor = (status: string) => {
                 </div>
                 <div>
                     <div class="dropdown btn-group">
-                        <button type="button" id="qoo8lk9cd8d" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                        <button type="button" id="uqmbvvglcpf" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                             <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                             </span>
                         </button>

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

@@ -2,8 +2,8 @@
 
 *Category:* Templates
 *Section:* Tables
-*Source:* https://uikit.developers.rio.cloud/#templates/table-panel
-*Captured:* 2026-01-14T09:08:38.647Z
+*Source:* https://uikit.developers.rio.cloud/#/templates/table-panel
+*Captured:* 2026-02-23T13:48:45.302Z
 
 ## Combined tables in ExpandablePanel
 

package/dist/docs/templates/table-row-animation.md

@@ -2,8 +2,8 @@
 
 *Category:* Templates
 *Section:* Tables
-*Source:* https://uikit.developers.rio.cloud/#templates/table-row-animation
-*Captured:* 2026-01-14T09:08:39.302Z
+*Source:* https://uikit.developers.rio.cloud/#/templates/table-row-animation
+*Captured:* 2026-02-23T13:48:45.391Z
 
 ## Table row animation
 

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

@@ -2,8 +2,8 @@
 
 *Category:* Templates
 *Section:* Content
-*Source:* https://uikit.developers.rio.cloud/#templates/usage-cards
-*Captured:* 2026-01-14T09:08:32.560Z
+*Source:* https://uikit.developers.rio.cloud/#/templates/usage-cards
+*Captured:* 2026-02-23T13:48:40.771Z
 
 ## Data usage cards
 

package/dist/docs/utilities/classNames.md

@@ -0,0 +1,191 @@
+# classNames
+
+*Category:* Utilities
+*Section:* Helper
+*Source:* https://uikit.developers.rio.cloud/#/utilities/classNames
+*Captured:* 2026-02-23T13:48:46.044Z
+
+Small utility for composing CSS classes from optional string arguments. It keeps the common case readable without adding third-party runtime behavior.
+
+## classNames
+
+Use it for patterns like: classNames('base-class', isActive && 'active', className).
+
+**Migration Note**
+
+The old third-party classnames API also supported object-based syntax where object keys became class names. This worked, but it was harder to read and unnecessarily complex because the class name lived in the object key instead of being a direct argument.
+
+```tsx
+classNames('base', { inverse: isInverse, double: isDoubleSized });
+classNames('base', { 'cursor-pointer': clickable }, className);
+```
+
+```tsx
+classNames('base', isInverse && 'inverse', isDoubleSized && 'double');
+classNames('base', clickable && 'cursor-pointer', className);
+```
+
+### Example: This class string is built from optional className arguments.
+
+text-lefttext-centertext-right
+Include optional border class
+This class string is built from optional className arguments.
+text-size-12 text-color-dark margin-bottom-20 border rounded padding-5 text-left
+
+#### Summary
+
+text-lefttext-centertext-right
+Include optional border class
+This class string is built from optional className arguments.
+text-size-12 text-color-dark margin-bottom-20 border rounded padding-5 text-left
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
+import classNames from '@rio-cloud/rio-uikit/classNames';
+
+const alignOptions = ['text-left', 'text-center', 'text-right'] as const;
+type AlignOption = (typeof alignOptions)[number];
+
+export default () => {
+    const [alignClassName, setAlignClassName] = useState<AlignOption>('text-left');
+    const [withBorder, setWithBorder] = useState(true);
+
+    const demoClasses = classNames(
+        'text-size-12',
+        'text-color-dark',
+        'margin-bottom-20',
+        withBorder && 'border rounded padding-5',
+        alignClassName
+    );
+
+    return (
+        <div>
+            <div className='display-flex gap-15 align-items-center margin-bottom-25'>
+                <div className='btn-group'>
+                    {alignOptions.map(option => (
+                        <Button
+                            key={option}
+                            className={`btn btn-default btn-sm ${option === alignClassName ? 'active' : ''}`}
+                            onClick={() => setAlignClassName(option)}
+                        >
+                            {option}
+                        </Button>
+                    ))}
+                </div>
+                <Checkbox checked={withBorder} onChange={event => setWithBorder(event.target.checked)}>
+                    Include optional border class
+                </Checkbox>
+            </div>
+
+            <div>
+                <div className={demoClasses}>This class string is built from optional className arguments.</div>
+                <code className='word-break-all'>{demoClasses}</code>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="display-flex gap-15 align-items-center margin-bottom-25">
+        <div class="btn-group">
+            <button type="button" class="btn btn-default btn-component btn btn-default btn-sm active" tabindex="0">text-left</button>
+            <button type="button" class="btn btn-default btn-component btn btn-default btn-sm " tabindex="0">text-center</button>
+            <button type="button" class="btn btn-default btn-component btn btn-default btn-sm " tabindex="0">text-right</button>
+        </div>
+        <label class="checkbox" tabindex="0">
+            <input type="checkbox" class="" checked="">
+            <span class="checkbox-text">
+                <span>Include optional border class</span>
+            </span>
+        </label>
+    </div>
+    <div>
+        <div class="text-size-12 text-color-dark margin-bottom-20 border rounded padding-5 text-left">This class string is built from optional className arguments.</div>
+        <code class="word-break-all">text-size-12 text-color-dark margin-bottom-20 border rounded padding-5 text-left</code>
+    </div>
+</div>
+```
+
+## mergeClassNameOverrides
+
+For utility-class based styling, use mergeClassNameOverrides(defaults, overrides) to replace matching groups like margin, padding, text-size, and text-color while preserving other defaults.
+
+### Example: Example 2
+
+Override classes
+Default: padding-x-20 padding-y-20 margin-bottom-20 text-size-16 text-color-dark border rounded
+Merged: padding-x-20 text-size-16 border rounded padding-y-10 margin-bottom-0 text-color-gray
+Utility overrides replace matching groups (like padding-y-*, margin-*, text-color-*) and keep unrelated defaults.
+
+#### Summary
+
+Override classes
+Default: padding-x-20 padding-y-20 margin-bottom-20 text-size-16 text-color-dark border rounded
+Merged: padding-x-20 text-size-16 border rounded padding-y-10 margin-bottom-0 text-color-gray
+Utility overrides replace matching groups (like padding-y-*, margin-*, text-color-*) and keep unrelated defaults.
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import { mergeClassNameOverrides } from '@rio-cloud/rio-uikit/mergeClassNameOverrides';
+
+export default () => {
+    const [overrides, setOverrides] = useState('padding-y-10 margin-bottom-0 text-color-gray');
+
+    const defaultClassNames = 'padding-x-20 padding-y-20 margin-bottom-20 text-size-16 text-color-dark border rounded';
+
+    const mergedClassNames = mergeClassNameOverrides(defaultClassNames, overrides);
+
+    return (
+        <div>
+            <div className='form-group margin-bottom-25'>
+                <label htmlFor='utility-overrides'>Override classes</label>
+                <input
+                    id='utility-overrides'
+                    className='form-control'
+                    value={overrides}
+                    onChange={event => setOverrides(event.target.value)}
+                />
+            </div>
+            <p className='margin-bottom-5'>
+                Default: <code>{defaultClassNames}</code>
+            </p>
+            <p className='margin-bottom-25'>
+                Merged: <code>{mergedClassNames}</code>
+            </p>
+
+            <div className={mergedClassNames}>
+                Utility overrides replace matching groups (like <code>padding-y-*</code>, <code>margin-*</code>,{' '}
+                <code>text-color-*</code>) and keep unrelated defaults.
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="form-group margin-bottom-25">
+        <label for="utility-overrides">Override classes</label>
+        <input id="utility-overrides" class="form-control" value="padding-y-10 margin-bottom-0 text-color-gray">
+    </div>
+    <p class="margin-bottom-5">Default: <code>padding-x-20 padding-y-20 margin-bottom-20 text-size-16 text-color-dark border rounded</code>
+    </p>
+    <p class="margin-bottom-25">Merged: <code>padding-x-20 text-size-16 border rounded padding-y-10 margin-bottom-0 text-color-gray</code>
+    </p>
+    <div class="padding-x-20 text-size-16 border rounded padding-y-10 margin-bottom-0 text-color-gray">Utility overrides replace matching groups (like <code>padding-y-*</code>, <code>margin-*</code>, <code>text-color-*</code>) and keep unrelated defaults.</div>
+</div>
+```

package/dist/docs/utilities/deviceUtils.md

@@ -2,8 +2,8 @@
 
 *Category:* Utilities
 *Section:* Helper
-*Source:* https://uikit.developers.rio.cloud/#utilities/deviceUtils
-*Captured:* 2026-01-14T09:08:39.325Z
+*Source:* https://uikit.developers.rio.cloud/#/utilities/deviceUtils
+*Captured:* 2026-02-23T13:48:45.695Z
 
 Set of utility functions which helps detecting certain devices or functionality.
 

package/dist/docs/utilities/featureToggles.md

@@ -2,8 +2,8 @@
 
 *Category:* Utilities
 *Section:* Helper
-*Source:* https://uikit.developers.rio.cloud/#utilities/featureToggles
-*Captured:* 2026-01-14T09:08:39.999Z
+*Source:* https://uikit.developers.rio.cloud/#/utilities/featureToggles
+*Captured:* 2026-02-23T13:48:46.576Z
 
 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

@@ -2,8 +2,8 @@
 
 *Category:* Utilities
 *Section:* Helper
-*Source:* https://uikit.developers.rio.cloud/#utilities/fuelTypeUtils
-*Captured:* 2026-01-14T09:08:39.932Z
+*Source:* https://uikit.developers.rio.cloud/#/utilities/fuelTypeUtils
+*Captured:* 2026-02-23T13:48:46.808Z
 
 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.