@rio-cloud/uikit-mcp 1.1.6 → 1.1.8

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

@@ -1,1381 +0,0 @@
-# Stats blocks
-
-*Category:* Templates
-*Section:* Content
-*Source:* https://uikit.developers.rio.cloud/#/templates/stats-blocks
-*Captured:* 2026-02-23T13:48:44.447Z
-
-## Stats blocks
-
-### Example: Total inventory
-
-Stats page
-Overview of your supply chain operations
-
-Total inventory
-1197 units
-
-12%from last month
-
-Open orders
-79
-
-5%from last month
-
-In transit
-6
-
--3%from last month
-
-Issues
-4
-
-#### Summary
-
-Stats page
-Overview of your supply chain operations
-
-Total inventory
-1197 units
-
-12%from last month
-
-Open orders
-79
-
-5%from last month
-
-In transit
-6
-
--3%from last month
-
-Issues
-4
-
-#### React (tsx)
-
-```tsx
-import { faker } from '@faker-js/faker';
-import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
-import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';
-
-export default () => {
-    const data = {
-        inventory: faker.number.int({ min: 800, max: 1600 }),
-        inventoryChange: 12,
-        orders: faker.number.int({ min: 20, max: 80 }),
-        ordersChange: 5,
-        inTransit: faker.number.int({ min: 5, max: 25 }),
-        inTransitChange: -3,
-        issues: faker.number.int({ min: 0, max: 10 }),
-    };
-
-    return (
-        <div className='margin-25-md'>
-            <div className='text-size-h2 text-bold text-color-darkest'>Stats page</div>
-            <p className='text-color-darker margin-top-0'>Overview of your supply chain operations</p>
-
-            <StatsWidgets className='display-grid grid-auto-fit-250'>
-                <StatsWidget className='shadow-default display-flex flex-column'>
-                    <div className='flex-1-1 display-flex gap-15 padding-20'>
-                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>
-                            <span className='rioglyph rioglyph-parcel text-size-200pct text-color-darker' />
-                        </div>
-                        <div>
-                            <div className='text-color-dark'>Total inventory</div>
-                            <div className='text-size-h3 text-color-darkest line-height-125rel'>
-                                {data.inventory} units
-                            </div>
-                        </div>
-                    </div>
-                    <div className='text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5'>
-                        <span className='text-medium text-color-success display-flex gap-2 align-items-center'>
-                            <span className='rioglyph rioglyph-arrow-up' />
-                            {data.inventoryChange}%
-                        </span>
-                        <span className='text-color-dark'>from last month</span>
-                    </div>
-                </StatsWidget>
-
-                <StatsWidget className='shadow-default display-flex flex-column'>
-                    <div className='flex-1-1 display-flex gap-15 padding-20'>
-                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>
-                            <span className='rioglyph rioglyph-order text-size-200pct text-color-darker' />
-                        </div>
-                        <div>
-                            <div className='text-color-dark'>Open orders</div>
-                            <div className='text-size-h3 text-color-darkest line-height-125rel'>{data.orders}</div>
-                        </div>
-                    </div>
-                    <div className='text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5'>
-                        <span className='text-medium text-color-success display-flex gap-2 align-items-center'>
-                            <span className='rioglyph rioglyph-arrow-up' />
-                            {data.ordersChange}%
-                        </span>
-                        <span className='text-color-dark'>from last month</span>
-                    </div>
-                </StatsWidget>
-
-                <StatsWidget className='shadow-default display-flex flex-column'>
-                    <div className='flex-1-1 display-flex gap-15 padding-20'>
-                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>
-                            <span className='rioglyph rioglyph-delivery text-size-200pct text-color-darker' />
-                        </div>
-                        <div>
-                            <div className='text-color-dark'>In transit</div>
-                            <div className='text-size-h3 text-color-darkest line-height-125rel'>{data.inTransit}</div>
-                        </div>
-                    </div>
-                    <div className='text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5'>
-                        <span className='text-medium text-color-danger display-flex gap-2 align-items-center'>
-                            <span className='rioglyph rioglyph-arrow-down' />
-                            {data.inTransitChange}%
-                        </span>
-                        <span className='text-color-dark'>from last month</span>
-                    </div>
-                </StatsWidget>
-
-                <StatsWidget className='shadow-default display-flex flex-column'>
-                    <div className='flex-1-1 display-flex gap-15 padding-20'>
-                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>
-                            <span className='rioglyph rioglyph-warning-sign text-size-200pct text-color-warning' />
-                        </div>
-                        <div>
-                            <div className='text-color-dark'>Issues</div>
-                            <div className='text-size-h3 text-color-darkest line-height-125rel'>{data.issues}</div>
-                        </div>
-                    </div>
-                </StatsWidget>
-            </StatsWidgets>
-        </div>
-    );
-};
-```
-
-#### HTML (html)
-
-```html
-<div class="margin-25-md">
-    <div class="text-size-h2 text-bold text-color-darkest">Stats page</div>
-    <p class="text-color-darker margin-top-0">Overview of your supply chain operations</p>
-    <div class="StatsWidget-wrapper display-grid grid-auto-fit-250">
-        <div class="StatsWidget shadow-default display-flex flex-column">
-            <div class="flex-1-1 display-flex gap-15 padding-20">
-                <div class="height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14">
-                    <span class="rioglyph rioglyph-parcel text-size-200pct text-color-darker">
-                    </span>
-                </div>
-                <div>
-                    <div class="text-color-dark">Total inventory</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">
-                <span class="text-medium text-color-success display-flex gap-2 align-items-center">
-                    <span class="rioglyph rioglyph-arrow-up">
-                    </span>12%</span>
-                <span class="text-color-dark">from last month</span>
-            </div>
-        </div>
-        <div class="StatsWidget shadow-default display-flex flex-column">
-            <div class="flex-1-1 display-flex gap-15 padding-20">
-                <div class="height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14">
-                    <span class="rioglyph rioglyph-order text-size-200pct text-color-darker">
-                    </span>
-                </div>
-                <div>
-                    <div class="text-color-dark">Open orders</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">
-                <span class="text-medium text-color-success display-flex gap-2 align-items-center">
-                    <span class="rioglyph rioglyph-arrow-up">
-                    </span>5%</span>
-                <span class="text-color-dark">from last month</span>
-            </div>
-        </div>
-        <div class="StatsWidget shadow-default display-flex flex-column">
-            <div class="flex-1-1 display-flex gap-15 padding-20">
-                <div class="height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14">
-                    <span class="rioglyph rioglyph-delivery text-size-200pct text-color-darker">
-                    </span>
-                </div>
-                <div>
-                    <div class="text-color-dark">In transit</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">
-                <span class="text-medium text-color-danger display-flex gap-2 align-items-center">
-                    <span class="rioglyph rioglyph-arrow-down">
-                    </span>-3%</span>
-                <span class="text-color-dark">from last month</span>
-            </div>
-        </div>
-        <div class="StatsWidget shadow-default display-flex flex-column">
-            <div class="flex-1-1 display-flex gap-15 padding-20">
-                <div class="height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14">
-                    <span class="rioglyph rioglyph-warning-sign text-size-200pct text-color-warning">
-                    </span>
-                </div>
-                <div>
-                    <div class="text-color-dark">Issues</div>
-                    <div class="text-size-h3 text-color-darkest line-height-125rel">4</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-```
-
-### Example: Orders delivered
-
-25M +
-Orders delivered
-
-99.99%
-Total uptime
-
-4.8
-Customer score
-
-#### Summary
-
-25M +
-Orders delivered
-
-99.99%
-Total uptime
-
-4.8
-Customer score
-
-#### React (tsx)
-
-```tsx
-import { FormattedNumber } from 'react-intl';
-
-import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
-import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';
-
-export default () => {
-    return (
-        <div className='margin-25-md'>
-            <StatsWidgets className='display-grid grid-auto-fit-150'>
-                <StatsWidget className='padding-20'>
-                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>25M +</div>
-                    <div className='text-color-dark padding-top-5'>Orders delivered</div>
-                </StatsWidget>
-                <StatsWidget className='padding-20'>
-                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
-                        <FormattedNumber value={99.99} style='unit' unit='percent' />
-                    </div>
-                    <div className='text-color-dark padding-top-5'>Total uptime</div>
-                </StatsWidget>
-                <StatsWidget className='padding-20'>
-                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
-                        <FormattedNumber value={4.8} />
-                    </div>
-                    <div className='text-color-dark padding-top-5'>Customer score</div>
-                </StatsWidget>
-            </StatsWidgets>
-        </div>
-    );
-};
-```
-
-#### HTML (html)
-
-```html
-<div class="margin-25-md">
-    <div class="StatsWidget-wrapper display-grid grid-auto-fit-150">
-        <div class="StatsWidget padding-20">
-            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">25M +</div>
-            <div class="text-color-dark padding-top-5">Orders delivered</div>
-        </div>
-        <div class="StatsWidget padding-20">
-            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">99.99%</div>
-            <div class="text-color-dark padding-top-5">Total uptime</div>
-        </div>
-        <div class="StatsWidget padding-20">
-            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">4.8</div>
-            <div class="text-color-dark padding-top-5">Customer score</div>
-        </div>
-    </div>
-</div>
-```
-
-### Example: Total uptime
-
-25M +
-Orders delivered
-
-99.99%
-Total uptime
-
-4.8
-Customer score
-
-#### Summary
-
-25M +
-Orders delivered
-
-99.99%
-Total uptime
-
-4.8
-Customer score
-
-#### React (tsx)
-
-```tsx
-import { FormattedNumber } from 'react-intl';
-
-import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
-import Divider from '@rio-cloud/rio-uikit/Divider';
-
-export default () => {
-    return (
-        <div className='margin-25-md margin-auto'>
-            <StatsWidgets>
-                <div className='padding-20'>
-                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>25M +</div>
-                    <div className='text-color-dar padding-y-5'>Orders delivered</div>
-                </div>
-                <Divider vertical className='hidden-xs' />
-                <div className='padding-20'>
-                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
-                        <FormattedNumber value={99.99} style='unit' unit='percent' />
-                    </div>
-                    <div className='text-color-dark padding-y-5'>Total uptime</div>
-                </div>
-                <Divider vertical className='hidden-xs' />
-                <div className='padding-20'>
-                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
-                        <FormattedNumber value={4.8} />
-                    </div>
-                    <div className='text-color-dark padding-y-5'>Customer score</div>
-                </div>
-            </StatsWidgets>
-        </div>
-    );
-};
-```
-
-#### HTML (html)
-
-```html
-<div class="margin-25-md margin-auto">
-    <div class="StatsWidget-wrapper">
-        <div class="padding-20">
-            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">25M +</div>
-            <div class="text-color-dar padding-y-5">Orders delivered</div>
-        </div>
-        <div class="Divider position-relative hidden-xs" style="padding-left: 15px; padding-right: 15px;">
-            <div class="divider-line bg-light" style="width: 1px; height: 100%;">
-            </div>
-        </div>
-        <div class="padding-20">
-            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">99.99%</div>
-            <div class="text-color-dark padding-y-5">Total uptime</div>
-        </div>
-        <div class="Divider position-relative hidden-xs" style="padding-left: 15px; padding-right: 15px;">
-            <div class="divider-line bg-light" style="width: 1px; height: 100%;">
-            </div>
-        </div>
-        <div class="padding-20">
-            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">4.8</div>
-            <div class="text-color-dark padding-y-5">Customer score</div>
-        </div>
-    </div>
-</div>
-```
-
-### Example: Orders delivered
-
-Orders delivered
-25M +
-
-Total uptime
-99.99%
-
-Customer score
-4.8
-
-#### Summary
-
-Orders delivered
-25M +
-
-Total uptime
-99.99%
-
-Customer score
-4.8
-
-#### React (tsx)
-
-```tsx
-import { FormattedNumber } from 'react-intl';
-
-import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
-import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';
-
-export default () => {
-    return (
-        <div className='margin-25-md'>
-            <StatsWidgets className='border rounded bg-white flex-nowrap gap-5 gap-10-ls gap-20-sm'>
-                <StatsWidget className='padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only'>
-                    <div className='text-color-dark padding-bottom-5'>Orders delivered</div>
-                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>25M +</div>
-                </StatsWidget>
-                <StatsWidget className='padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only'>
-                    <div className='text-color-dark padding-bottom-5'>Total uptime</div>
-                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
-                        <FormattedNumber value={99.99} style='unit' unit='percent' />
-                    </div>
-                </StatsWidget>
-                <StatsWidget className='padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-none'>
-                    <div className='text-color-dark padding-bottom-5'>Customer score</div>
-                    <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
-                        <FormattedNumber value={4.8} />
-                    </div>
-                </StatsWidget>
-            </StatsWidgets>
-        </div>
-    );
-};
-```
-
-#### HTML (html)
-
-```html
-<div class="margin-25-md">
-    <div class="StatsWidget-wrapper border rounded bg-white flex-nowrap gap-5 gap-10-ls gap-20-sm">
-        <div class="StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only">
-            <div class="text-color-dark padding-bottom-5">Orders delivered</div>
-            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">25M +</div>
-        </div>
-        <div class="StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only">
-            <div class="text-color-dark padding-bottom-5">Total uptime</div>
-            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">99.99%</div>
-        </div>
-        <div class="StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-none">
-            <div class="text-color-dark padding-bottom-5">Customer score</div>
-            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">4.8</div>
-        </div>
-    </div>
-</div>
-```
-
-### Example: from 68,345
-
-Orders processed
-72,678
-from 68,345
-
-11.5%
-
-Open rate
-43.6
-from 41.6
-
-3.1%
-
-Error rate
-3.6
-from 2.4
-
-2.01%
-
-#### Summary
-
-Orders processed
-72,678
-from 68,345
-
-11.5%
-
-Open rate
-43.6
-from 41.6
-
-3.1%
-
-Error rate
-3.6
-from 2.4
-
-2.01%
-
-#### React (tsx)
-
-```tsx
-import { FormattedNumber } from 'react-intl';
-
-import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
-import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';
-
-export default () => {
-    // Workaround to create a inner border that is also visible when items wrap onto the next line
-    const widgetBorderStyle = {
-        boxShadow: '1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light)',
-    };
-
-    return (
-        <div className='margin-25-md'>
-            <div className='bg-white border rounded overflow-hidden'>
-                <StatsWidgets className='display-grid grid-auto-fit-250 gap-1'>
-                    <StatsWidget className='padding-20 bg-white rounded-none border-none' style={widgetBorderStyle}>
-                        <div className='text-size-16 text-color-darkest padding-bottom-5'>Orders processed</div>
-                        <div className='display-flex align-items-end justify-content-between gap-10 flex-wrap'>
-                            <div className='display-flex align-items-end gap-10'>
-                                <div className='text-size-h2 line-height-h2 text-medium text-color-primary'>
-                                    <FormattedNumber value={72_678} />
-                                </div>
-                                <div className='text-size-16 text-color-dark'>
-                                    from <FormattedNumber value={68_345} />
-                                </div>
-                            </div>
-                            <div className='label label-success padding-x-5'>
-                                <span className='rioglyph rioglyph-arrow-up' />
-                                <FormattedNumber value={11.5} style='unit' unit='percent' />
-                            </div>
-                        </div>
-                    </StatsWidget>
-                    <StatsWidget className='padding-20 bg-white rounded-none border-none' style={widgetBorderStyle}>
-                        <div className='text-size-16 text-color-darkest padding-bottom-5'>Open rate</div>
-                        <div className='display-flex align-items-end justify-content-between gap-10 flex-wrap'>
-                            <div className='display-flex align-items-end gap-10'>
-                                <div className='text-size-h2 line-height-h2 text-medium text-color-primary'>
-                                    <FormattedNumber value={43.6} />
-                                </div>
-                                <div className='text-size-16 text-color-dark'>
-                                    from <FormattedNumber value={41.6} />
-                                </div>
-                            </div>
-                            <div className='label label-success padding-x-5'>
-                                <span className='rioglyph rioglyph-arrow-up' />
-                                <FormattedNumber value={3.1} style='unit' unit='percent' />
-                            </div>
-                        </div>
-                    </StatsWidget>
-                    <StatsWidget className='padding-20 bg-white rounded-none border-none' style={widgetBorderStyle}>
-                        <div className='text-size-16 text-color-darkest padding-bottom-5'>Error rate</div>
-                        <div className='display-flex align-items-end justify-content-between gap-10 flex-wrap'>
-                            <div className='display-flex align-items-end gap-10'>
-                                <div className='text-size-h2 line-height-h2 text-medium text-color-primary'>
-                                    <FormattedNumber value={3.6} />
-                                </div>
-                                <div className='text-size-16 text-color-dark'>
-                                    from <FormattedNumber value={2.4} />
-                                </div>
-                            </div>
-                            <div className='label label-danger padding-x-5'>
-                                <span className='rioglyph rioglyph-arrow-up' />
-                                <FormattedNumber value={2.01} style='unit' unit='percent' />
-                            </div>
-                        </div>
-                    </StatsWidget>
-                </StatsWidgets>
-            </div>
-        </div>
-    );
-};
-```
-
-#### HTML (html)
-
-```html
-<div class="margin-25-md">
-    <div class="bg-white border rounded overflow-hidden">
-        <div class="StatsWidget-wrapper display-grid grid-auto-fit-250 gap-1">
-            <div class="StatsWidget padding-20 bg-white rounded-none border-none" style="box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);">
-                <div class="text-size-16 text-color-darkest padding-bottom-5">Orders processed</div>
-                <div class="display-flex align-items-end justify-content-between gap-10 flex-wrap">
-                    <div class="display-flex align-items-end gap-10">
-                        <div class="text-size-h2 line-height-h2 text-medium text-color-primary">72,678</div>
-                        <div class="text-size-16 text-color-dark">from 68,345</div>
-                    </div>
-                    <div class="label label-success padding-x-5">
-                        <span class="rioglyph rioglyph-arrow-up">
-                        </span>11.5%
-                    </div>
-                </div>
-            </div>
-            <div class="StatsWidget padding-20 bg-white rounded-none border-none" style="box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);">
-                <div class="text-size-16 text-color-darkest padding-bottom-5">Open rate</div>
-                <div class="display-flex align-items-end justify-content-between gap-10 flex-wrap">
-                    <div class="display-flex align-items-end gap-10">
-                        <div class="text-size-h2 line-height-h2 text-medium text-color-primary">43.6</div>
-                        <div class="text-size-16 text-color-dark">from 41.6</div>
-                    </div>
-                    <div class="label label-success padding-x-5">
-                        <span class="rioglyph rioglyph-arrow-up">
-                        </span>3.1%
-                    </div>
-                </div>
-            </div>
-            <div class="StatsWidget padding-20 bg-white rounded-none border-none" style="box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);">
-                <div class="text-size-16 text-color-darkest padding-bottom-5">Error rate</div>
-                <div class="display-flex align-items-end justify-content-between gap-10 flex-wrap">
-                    <div class="display-flex align-items-end gap-10">
-                        <div class="text-size-h2 line-height-h2 text-medium text-color-primary">3.6</div>
-                        <div class="text-size-16 text-color-dark">from 2.4</div>
-                    </div>
-                    <div class="label label-danger padding-x-5">
-                        <span class="rioglyph rioglyph-arrow-up">
-                        </span>2.01%
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-```
-
-### Example: Number of data brokers removal requests have been sent to.
-
-September, 2025
-Requests sent
-185
-
-Number of data brokers removal requests have been sent to.
-
-Requests in progress
-185
-
-Number of data brokers that have started processing our removal requests.
-
-Requests completed
-0
-
-Number of data brokers that checked and confirmed that they are now not holding your data.
-
-#### Summary
-
-September, 2025
-Requests sent
-185
-
-Number of data brokers removal requests have been sent to.
-
-Requests in progress
-185
-
-Number of data brokers that have started processing our removal requests.
-
-Requests completed
-0
-
-Number of data brokers that checked and confirmed that they are now not holding your data.
-
-#### React (tsx)
-
-```tsx
-import Divider from '@rio-cloud/rio-uikit/Divider';
-import Card from '@rio-cloud/rio-uikit/Card';
-
-export default () => {
-    return (
-        <div className='margin-25-md'>
-            <div className='padding-20 cq-container'>
-                <h2 className='margin-top-0 margin-bottom-25'>September, 2025</h2>
-                <div className='display-grid grid-cols-1 cq-400:grid-cols-2 cq-700:grid-cols-3 gap-25'>
-                    <Card className='padding-20'>
-                        <div className='text-color-darker text-size-18 text-medium margin-bottom-5'>Requests sent</div>
-                        <div className='text-size-h1 text-bold text-color-darkest'>185</div>
-                        <Divider dividerColor='lighter' />
-                        <div className='text-color-dark text-size-12'>
-                            Number of data brokers removal requests have been sent to.
-                        </div>
-                    </Card>
-
-                    <Card className='padding-20'>
-                        <div className='text-color-darker text-size-18 text-medium margin-bottom-5'>
-                            Requests in progress
-                        </div>
-                        <div className='text-size-h1 text-bold text-color-darkest'>185</div>
-                        <Divider dividerColor='lighter' />
-                        <div className='text-color-dark text-size-12'>
-                            Number of data brokers that have started processing our removal requests.
-                        </div>
-                    </Card>
-
-                    <Card className='padding-20'>
-                        <div className='text-color-darker text-size-18 text-medium margin-bottom-5'>
-                            Requests completed
-                        </div>
-                        <div className='text-size-h1 text-bold text-color-darkest'>0</div>
-                        <Divider dividerColor='lighter' />
-                        <div className='text-color-dark text-size-12'>
-                            Number of data brokers that checked and confirmed that they are now not holding your data.
-                        </div>
-                    </Card>
-                </div>
-            </div>
-        </div>
-    );
-};
-```
-
-#### HTML (html)
-
-```html
-<div class="margin-25-md">
-    <div class="padding-20 cq-container">
-        <h2 class="margin-top-0 margin-bottom-25">September, 2025</h2>
-        <div class="display-grid grid-cols-1 cq-400:grid-cols-2 cq-700:grid-cols-3 gap-25">
-            <div class="bg-white rounded border shadow-default padding-15 padding-20">
-                <div class="text-color-darker text-size-18 text-medium margin-bottom-5">Requests sent</div>
-                <div class="text-size-h1 text-bold text-color-darkest">185</div>
-                <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
-                    <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
-                    </div>
-                </div>
-                <div class="text-color-dark text-size-12">Number of data brokers removal requests have been sent to.</div>
-            </div>
-            <div class="bg-white rounded border shadow-default padding-15 padding-20">
-                <div class="text-color-darker text-size-18 text-medium margin-bottom-5">Requests in progress</div>
-                <div class="text-size-h1 text-bold text-color-darkest">185</div>
-                <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
-                    <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
-                    </div>
-                </div>
-                <div class="text-color-dark text-size-12">Number of data brokers that have started processing our removal requests.</div>
-            </div>
-            <div class="bg-white rounded border shadow-default padding-15 padding-20">
-                <div class="text-color-darker text-size-18 text-medium margin-bottom-5">Requests completed</div>
-                <div class="text-size-h1 text-bold text-color-darkest">0</div>
-                <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
-                    <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
-                    </div>
-                </div>
-                <div class="text-color-dark text-size-12">Number of data brokers that checked and confirmed that they are now not holding your data.</div>
-            </div>
-        </div>
-    </div>
-</div>
-```
-
-### Example:
-
-Lorem ipsum dolor
-
-JanuaryFebruaryMarchAprilMayJune
-
-Lorem ipsum dolor
-
-StatusLocationETA
-
-In transit
-Hamburg, DE2024-02-02
-
-Delivered
-Rotterdam, NL2024-01-29
-
-Awaiting pickup
-Warsaw, PL2024-02-05
-
-Customs clearance
-Antwerp, BE2024-02-03
-
-Transport ipsum dolor
-
-On-time delivery
-
-Warehouse efficiency
-
-Truck utilization
-
-Freight cost/km
-
-Fuel consumption index
-
-92%
-
-84%
-
-78%
-
-65%
-
-15%
-
-#### Summary
-
-Lorem ipsum dolor
-
-JanuaryFebruaryMarchAprilMayJune
-
-Lorem ipsum dolor
-
-StatusLocationETA
-
-In transit
-Hamburg, DE2024-02-02
-
-Delivered
-Rotterdam, NL2024-01-29
-
-Awaiting pickup
-Warsaw, PL2024-02-05
-
-Customs clearance
-Antwerp, BE2024-02-03
-
-Transport ipsum dolor
-
-On-time delivery
-
-Warehouse efficiency
-
-Truck utilization
-
-Freight cost/km
-
-Fuel consumption index
-
-92%
-
-84%
-
-78%
-
-65%
-
-15%
-
-#### React (tsx)
-
-```tsx
-import Bar from '@rio-cloud/rio-uikit/Bar';
-import BarChart from '@rio-cloud/rio-uikit/BarChart';
-import ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';
-import AccentBar from '@rio-cloud/rio-uikit/AccentBar';
-import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';
-import BarList from '@rio-cloud/rio-uikit/BarList';
-
-export default () => {
-    const optionsButton = (
-        <ButtonDropdown
-            bsStyle='muted'
-            title={<span className='rioglyph rioglyph-option-horizontal' aria-hidden='true' />}
-            items={[
-                {
-                    value: 'Edit',
-                },
-                {
-                    value: 'Share',
-                },
-                {
-                    value: 'Report issue',
-                },
-            ]}
-            iconOnly
-            pullRight
-        />
-    );
-
-    return (
-        <div className='margin-25-md'>
-            <div className='display-grid grid-cols-1 grid-cols-2-sm gap-25'>
-                <div className='panel panel-default shadow-default min-width-200'>
-                    <div className='panel-heading display-flex align-items-center justify-content-between padding-left-20'>
-                        <div className='text-medium text-size-16'>Lorem ipsum dolor</div>
-                        <div>{optionsButton}</div>
-                    </div>
-                    <div className='panel-body padding-15 padding-25-sm height-300 overflow-auto'>
-                        <BarChart
-                            data={data}
-                            dataKey='label'
-                            xAxisOptions={{ dataKey: 'label' }}
-                            showYAxis={false}
-                            margin={{ bottom: 15 }}
-                            bars={[
-                                <Bar
-                                    key='myBar'
-                                    dataKey='costs'
-                                    unit='€'
-                                    color='brand-primary'
-                                    radius={[3, 3, 0, 0]}
-                                    label={{
-                                        position: 'top',
-                                        formatter: (value: number) => `${value} €`,
-                                    }}
-                                />,
-                            ]}
-                        />
-                    </div>
-                </div>
-
-                <div className='panel panel-default shadow-default min-width-200'>
-                    <div className='panel-heading display-flex align-items-center justify-content-between padding-left-20'>
-                        <div className='text-medium text-size-16 display-flex gap-5 align-items-center'>
-                            <span>Lorem ipsum dolor</span>
-                            <SimpleTooltip content='Some helper text' placement='top'>
-                                <span className='rioglyph rioglyph-question-sign text-color-dark cursor-pointer' />
-                            </SimpleTooltip>
-                        </div>
-                        <div>{optionsButton}</div>
-                    </div>
-                    <div className='panel-body padding-15 padding-25-sm overflow-auto'>
-                        <table className='table'>
-                            <thead>
-                                <tr>
-                                    <th>Status</th>
-                                    <th>Location</th>
-                                    <th>ETA</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {tableData.map(row => (
-                                    <tr key={row.id}>
-                                        <td>
-                                            <AccentBar color={getStatusColor(row.status)}>{row.status}</AccentBar>
-                                        </td>
-                                        <td>{row.location}</td>
-                                        <td>{row.eta}</td>
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-
-                <div className='panel panel-default shadow-default min-width-200'>
-                    <div className='panel-heading display-flex align-items-center justify-content-between padding-left-20'>
-                        <div className='text-medium text-size-16 display-flex gap-5 align-items-center'>
-                            <span>Transport ipsum dolor</span>
-                        </div>
-                        <div>{optionsButton}</div>
-                    </div>
-                    <div className='panel-body padding-15 padding-25-sm overflow-auto'>
-                        <BarList
-                            data={barListData}
-                            valueFormatter={value => `${value}%`}
-                            referenceValue={100}
-                            showAnimation
-                        />
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-const data = [
-    {
-        label: 'January',
-        costs: 46.8,
-    },
-    {
-        label: 'February',
-        costs: 22.0,
-    },
-    {
-        label: 'March',
-        costs: 12.4,
-    },
-    {
-        label: 'April',
-        costs: 3.88,
-    },
-    {
-        label: 'May',
-        costs: 3.23,
-    },
-    {
-        label: 'June',
-        costs: 4.67,
-    },
-];
-
-const tableData = [
-    { id: 1, status: 'In transit', location: 'Hamburg, DE', eta: '2024-02-02' },
-    { id: 2, status: 'Delivered', location: 'Rotterdam, NL', eta: '2024-01-29' },
-    { id: 3, status: 'Awaiting pickup', location: 'Warsaw, PL', eta: '2024-02-05' },
-    { id: 4, status: 'Customs clearance', location: 'Antwerp, BE', eta: '2024-02-03' },
-];
-
-const barListData = [
-    {
-        key: 'truck_utilization',
-        name: 'Truck utilization',
-        value: 78,
-    },
-    {
-        key: 'on_time_delivery',
-        name: 'On-time delivery',
-        value: 92,
-    },
-    {
-        key: 'freight_cost_per_km',
-        name: 'Freight cost/km',
-        value: 65,
-    },
-    {
-        key: 'warehouse_efficiency',
-        name: 'Warehouse efficiency',
-        value: 84,
-    },
-    {
-        key: 'fuel_consumption',
-        name: 'Fuel consumption index',
-        value: 15,
-    },
-];
-
-const getStatusColor = (status: string) => {
-    switch (status) {
-        case 'In transit':
-            return 'bg-warning';
-        case 'Delivered':
-            return 'bg-success';
-        case 'Awaiting pickup':
-            return 'bg-info';
-        case 'Customs clearance':
-            return 'bg-danger';
-        default:
-            return 'bg-primary';
-    }
-};
-```
-
-#### HTML (html)
-
-```html
-<div class="margin-25-md">
-    <div class="display-grid grid-cols-1 grid-cols-2-sm gap-25">
-        <div class="panel panel-default shadow-default min-width-200">
-            <div class="panel-heading display-flex align-items-center justify-content-between padding-left-20">
-                <div class="text-medium text-size-16">Lorem ipsum dolor</div>
-                <div>
-                    <div class="dropdown btn-group">
-                        <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>
-                    </div>
-                </div>
-            </div>
-            <div class="panel-body padding-15 padding-25-sm height-300 overflow-auto">
-                <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
-                    <div style="width: 0px; height: 0px; overflow: visible;">
-                        <div width="365" height="250" class="recharts-wrapper" style="position: relative; cursor: default; width: 365px; height: 250px;">
-                            <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
-                                <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
-                                    <p class="recharts-tooltip-label" style="margin: 0px;">
-                                    </p>
-                                </div>
-                            </div>
-                            <svg role="application" tabindex="0" class="recharts-surface" width="365" height="250" viewBox="0 0 365 250" style="width: 100%; height: 100%; display: block;">
-                                <title>
-                                </title>
-                                <desc>
-                                </desc>
-                                <g tabindex="-1">
-                                </g>
-                                <g tabindex="-1">
-                                </g>
-                                <defs>
-                                    <clipPath id="recharts1-clip">
-                                        <rect x="0" y="0" height="205" width="365">
-                                        </rect>
-                                    </clipPath>
-                                </defs>
-                                <g tabindex="-1">
-                                </g>
-                                <g tabindex="-1">
-                                </g>
-                                <g tabindex="-1">
-                                    <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">
-                                                    <path fill="#30b4c0 " name="undefined" x="6.0833" y="45.1" width="48" height="159.9" class="recharts-rectangle" d="M6.0833,48.1A 3,3,0,0,1,9.0833,45.1L 51.0833,45.1A 3,3,0,0,1,
-        54.0833,48.1L 54.0833,205L 6.0833,205Z">
-                                                    </path>
-                                                </g>
-                                                <g class="recharts-layer recharts-bar-rectangle">
-                                                    <path fill="#30b4c0 " name="undefined" x="66.9167" y="129.8333" width="48" height="75.1667" class="recharts-rectangle" d="M66.9167,132.8333A 3,3,0,0,1,69.9167,129.8333L 111.9167,129.8333A 3,3,0,0,1,
-        114.9167,132.8333L 114.9167,205L 66.9167,205Z">
-                                                    </path>
-                                                </g>
-                                                <g class="recharts-layer recharts-bar-rectangle">
-                                                    <path fill="#30b4c0 " name="undefined" x="127.75" y="162.6333" width="48" height="42.3667" class="recharts-rectangle" d="M127.75,165.6333A 3,3,0,0,1,130.75,162.6333L 172.75,162.6333A 3,3,0,0,1,
-        175.75,165.6333L 175.75,205L 127.75,205Z">
-                                                    </path>
-                                                </g>
-                                                <g class="recharts-layer recharts-bar-rectangle">
-                                                    <path fill="#30b4c0 " name="undefined" x="188.5833" y="191.7433" width="48" height="13.2567" class="recharts-rectangle" d="M188.5833,194.7433A 3,3,0,0,1,191.5833,191.7433L 233.5833,191.7433A 3,3,0,0,1,
-        236.5833,194.7433L 236.5833,205L 188.5833,205Z">
-                                                    </path>
-                                                </g>
-                                                <g class="recharts-layer recharts-bar-rectangle">
-                                                    <path fill="#30b4c0 " name="undefined" x="249.4167" y="193.9642" width="48" height="11.0358" class="recharts-rectangle" d="M249.4167,196.9642A 3,3,0,0,1,252.4167,193.9642L 294.4167,193.9642A 3,3,0,0,1,
-        297.4167,196.9642L 297.4167,205L 249.4167,205Z">
-                                                    </path>
-                                                </g>
-                                                <g class="recharts-layer recharts-bar-rectangle">
-                                                    <path fill="#30b4c0 " name="undefined" x="310.25" y="189.0442" width="48" height="15.9558" class="recharts-rectangle" d="M310.25,192.0442A 3,3,0,0,1,313.25,189.0442L 355.25,189.0442A 3,3,0,0,1,
-        358.25,192.0442L 358.25,205L 310.25,205Z">
-                                                    </path>
-                                                </g>
-                                            </g>
-                                        </g>
-                                    </g>
-                                </g>
-                                <g tabindex="-1">
-                                </g>
-                                <g tabindex="-1">
-                                    <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
-                                        <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="0" y1="205" x2="365" y2="205">
-                                        </line>
-                                        <g class="recharts-cartesian-axis-ticks recharts-xAxis-ticks">
-                                            <g class="recharts-cartesian-axis-tick-lines recharts-xAxis-tick-lines">
-                                                <g class="recharts-layer recharts-cartesian-axis-tick">
-                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="30.416666666666668" y1="211" x2="30.416666666666668" y2="205">
-                                                    </line>
-                                                </g>
-                                                <g class="recharts-layer recharts-cartesian-axis-tick">
-                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="91.25" y1="211" x2="91.25" y2="205">
-                                                    </line>
-                                                </g>
-                                                <g class="recharts-layer recharts-cartesian-axis-tick">
-                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="152.08333333333334" y1="211" x2="152.08333333333334" y2="205">
-                                                    </line>
-                                                </g>
-                                                <g class="recharts-layer recharts-cartesian-axis-tick">
-                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="212.91666666666666" y1="211" x2="212.91666666666666" y2="205">
-                                                    </line>
-                                                </g>
-                                                <g class="recharts-layer recharts-cartesian-axis-tick">
-                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="273.75" y1="211" x2="273.75" y2="205">
-                                                    </line>
-                                                </g>
-                                                <g class="recharts-layer recharts-cartesian-axis-tick">
-                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="334.58333333333337" y1="211" x2="334.58333333333337" y2="205">
-                                                    </line>
-                                                </g>
-                                            </g>
-                                        </g>
-                                    </g>
-                                </g>
-                                <g tabindex="-1">
-                                </g>
-                                <g tabindex="-1">
-                                </g>
-                                <g tabindex="-1">
-                                </g>
-                                <g tabindex="-1">
-                                </g>
-                                <g tabindex="-1">
-                                    <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
-                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
-                                            <text height="30" orientation="bottom" width="365" stroke="none" x="30.416666666666668" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
-                                                <tspan x="30.416666666666668" dy="0.71em">January</tspan>
-                                            </text>
-                                        </g>
-                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
-                                            <text height="30" orientation="bottom" width="365" stroke="none" x="91.25" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
-                                                <tspan x="91.25" dy="0.71em">February</tspan>
-                                            </text>
-                                        </g>
-                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
-                                            <text height="30" orientation="bottom" width="365" stroke="none" x="152.08333333333334" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
-                                                <tspan x="152.08333333333334" dy="0.71em">March</tspan>
-                                            </text>
-                                        </g>
-                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
-                                            <text height="30" orientation="bottom" width="365" stroke="none" x="212.91666666666666" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
-                                                <tspan x="212.91666666666666" dy="0.71em">April</tspan>
-                                            </text>
-                                        </g>
-                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
-                                            <text height="30" orientation="bottom" width="365" stroke="none" x="273.75" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
-                                                <tspan x="273.75" dy="0.71em">May</tspan>
-                                            </text>
-                                        </g>
-                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
-                                            <text height="30" orientation="bottom" width="365" stroke="none" x="334.58333333333337" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
-                                                <tspan x="334.58333333333337" dy="0.71em">June</tspan>
-                                            </text>
-                                        </g>
-                                    </g>
-                                    <g class="recharts-layer recharts-label-list">
-                                        <text width="48" height="45.100000000000016" offset="5" x="30.083333333333336" y="40.100000000000016" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
-                                            <tspan x="30.083333333333336" dy="0em">46.8 €</tspan>
-                                        </text>
-                                        <text width="48" height="129.83333333333331" offset="5" x="90.91666666666667" y="124.83333333333331" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
-                                            <tspan x="90.91666666666667" dy="0em">22 €</tspan>
-                                        </text>
-                                        <text width="48" height="162.63333333333333" offset="5" x="151.75" y="157.63333333333333" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
-                                            <tspan x="151.75" dy="0em">12.4 €</tspan>
-                                        </text>
-                                        <text width="48" height="191.74333333333334" offset="5" x="212.58333333333334" y="186.74333333333334" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
-                                            <tspan x="212.58333333333334" dy="0em">3.88 €</tspan>
-                                        </text>
-                                        <text width="48" height="193.96416666666667" offset="5" x="273.4166666666667" y="188.96416666666667" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
-                                            <tspan x="273.4166666666667" dy="0em">3.23 €</tspan>
-                                        </text>
-                                        <text width="48" height="189.04416666666668" offset="5" x="334.25" y="184.04416666666668" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
-                                            <tspan x="334.25" dy="0em">4.67 €</tspan>
-                                        </text>
-                                    </g>
-                                </g>
-                            </svg>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="panel panel-default shadow-default min-width-200">
-            <div class="panel-heading display-flex align-items-center justify-content-between padding-left-20">
-                <div class="text-medium text-size-16 display-flex gap-5 align-items-center">
-                    <span>Lorem ipsum dolor</span>
-                    <span class="rioglyph rioglyph-question-sign text-color-dark cursor-pointer">
-                    </span>
-                </div>
-                <div>
-                    <div class="dropdown btn-group">
-                        <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>
-                    </div>
-                </div>
-            </div>
-            <div class="panel-body padding-15 padding-25-sm overflow-auto">
-                <table class="table">
-                    <thead>
-                        <tr>
-                            <th>Status</th>
-                            <th>Location</th>
-                            <th>ETA</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <div class="display-flex align-items-stretch">
-                                    <div class="AccentBar bg-warning">
-                                    </div>In transit
-                                </div>
-                            </td>
-                            <td>Hamburg, DE</td>
-                            <td>2024-02-02</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <div class="display-flex align-items-stretch">
-                                    <div class="AccentBar bg-success">
-                                    </div>Delivered
-                                </div>
-                            </td>
-                            <td>Rotterdam, NL</td>
-                            <td>2024-01-29</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <div class="display-flex align-items-stretch">
-                                    <div class="AccentBar bg-info">
-                                    </div>Awaiting pickup
-                                </div>
-                            </td>
-                            <td>Warsaw, PL</td>
-                            <td>2024-02-05</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <div class="display-flex align-items-stretch">
-                                    <div class="AccentBar bg-danger">
-                                    </div>Customs clearance
-                                </div>
-                            </td>
-                            <td>Antwerp, BE</td>
-                            <td>2024-02-03</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-        <div class="panel panel-default shadow-default min-width-200">
-            <div class="panel-heading display-flex align-items-center justify-content-between padding-left-20">
-                <div class="text-medium text-size-16 display-flex gap-5 align-items-center">
-                    <span>Transport ipsum dolor</span>
-                </div>
-                <div>
-                    <div class="dropdown btn-group">
-                        <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>
-                    </div>
-                </div>
-            </div>
-            <div class="panel-body padding-15 padding-25-sm overflow-auto">
-                <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">
-                            <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: 92%;">
-                            </div>
-                            <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
-                                <div class="text-color-darker">On-time delivery</div>
-                            </div>
-                        </div>
-                        <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent">
-                            <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: 84%;">
-                            </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">
-                            <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: 78%;">
-                            </div>
-                            <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
-                                <div class="text-color-darker">Truck utilization</div>
-                            </div>
-                        </div>
-                        <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent">
-                            <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: 65%;">
-                            </div>
-                            <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
-                                <div class="text-color-darker">Freight cost/km</div>
-                            </div>
-                        </div>
-                        <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent">
-                            <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%;">
-                            </div>
-                            <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
-                                <div class="text-color-darker">Fuel consumption index</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="space-y-5">
-                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
-                            <div class="text-color-darkest">92%</div>
-                        </div>
-                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
-                            <div class="text-color-darkest">84%</div>
-                        </div>
-                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
-                            <div class="text-color-darkest">78%</div>
-                        </div>
-                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
-                            <div class="text-color-darkest">65%</div>
-                        </div>
-                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
-                            <div class="text-color-darkest">15%</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-```