@rio-cloud/uikit-mcp 1.1.6 → 1.1.8

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

@@ -1,1021 +0,0 @@
-# List blocks
-
-*Category:* Templates
-*Section:* Content
-*Source:* https://uikit.developers.rio.cloud/#/templates/list-blocks
-*Captured:* 2026-02-23T13:48:41.811Z
-
-## List blocks
-
-### Example: Apud aufero taedium.
-
-Lorem ipsum dolor
-Apud aufero taedium.
-
-Rath - Mante
-Talis iste correptius vitiosus desidero pax.
-
-Connect
-
-Brekke - Casper
-Apostolus aetas cresco.
-Sub suggero tot dedecor celer.
-
-Connect
-
-Lowe Group
-Acervus totidem caelum vilitas stella.
-
-Connect
-
-#### Summary
-
-Lorem ipsum dolor
-Apud aufero taedium.
-
-Rath - Mante
-Talis iste correptius vitiosus desidero pax.
-
-Connect
-
-Brekke - Casper
-Apostolus aetas cresco.
-Sub suggero tot dedecor celer.
-
-Connect
-
-Lowe Group
-Acervus totidem caelum vilitas stella.
-
-Connect
-
-#### React (tsx)
-
-```tsx
-import { faker } from '@faker-js/faker';
-import Button from '@rio-cloud/rio-uikit/Button';
-
-export default () => {
-    const examples = [
-        {
-            name: faker.company.name(),
-            icon: 'rioglyph-academic-cap',
-            description: faker.lorem.lines(1),
-        },
-        {
-            name: faker.company.name(),
-            icon: 'rioglyph-inbox',
-            description: faker.lorem.lines(2),
-        },
-        {
-            name: faker.company.name(),
-            icon: 'rioglyph-rio',
-            description: faker.lorem.lines(1),
-        },
-    ];
-
-    return (
-        <div className='max-width-500 margin-auto padding-5'>
-            <div className='text-size-h2 font-bold'>Lorem ipsum dolor</div>
-            <p className='text-color-dark margin-top-0 margin-bottom-20'>{faker.lorem.lines(1)}</p>
-
-            <div className='space-y-15'>
-                {examples.map(item => (
-                    <div key={item.name} className='bg-white padding-15 rounded-large shadow-subtle border'>
-                        <div className='display-flex gap-15'>
-                            <div className='height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14'>
-                                <span className={`rioglyph ${item.icon} text-size-300pct`} />
-                            </div>
-                            <div className='flex-1-1 display-flex gap-15 flex-row-ls flex-column'>
-                                <div className='flex-1-1'>
-                                    <p className='text-size-18 margin-0 margin-bottom-5'>{item.name}</p>
-                                    <p className='text-color-dark margin-0'>{item.description}</p>
-                                </div>
-                                <div className='display-flex align-items-center'>
-                                    <Button>Connect</Button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};
-```
-
-#### HTML (html)
-
-```html
-<div class="max-width-500 margin-auto padding-5">
-    <div class="text-size-h2 font-bold">Lorem ipsum dolor</div>
-    <p class="text-color-dark margin-top-0 margin-bottom-20">Apud aufero taedium.</p>
-    <div class="space-y-15">
-        <div class="bg-white padding-15 rounded-large shadow-subtle border">
-            <div class="display-flex gap-15">
-                <div class="height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14">
-                    <span class="rioglyph rioglyph-academic-cap text-size-300pct">
-                    </span>
-                </div>
-                <div class="flex-1-1 display-flex gap-15 flex-row-ls flex-column">
-                    <div class="flex-1-1">
-                        <p class="text-size-18 margin-0 margin-bottom-5">Rath - Mante</p>
-                        <p class="text-color-dark margin-0">Talis iste correptius vitiosus desidero pax.</p>
-                    </div>
-                    <div class="display-flex align-items-center">
-                        <button type="button" class="btn btn-default btn-component" tabindex="0">Connect</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="bg-white padding-15 rounded-large shadow-subtle border">
-            <div class="display-flex gap-15">
-                <div class="height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14">
-                    <span class="rioglyph rioglyph-inbox text-size-300pct">
-                    </span>
-                </div>
-                <div class="flex-1-1 display-flex gap-15 flex-row-ls flex-column">
-                    <div class="flex-1-1">
-                        <p class="text-size-18 margin-0 margin-bottom-5">Brekke - Casper</p>
-                        <p class="text-color-dark margin-0">Apostolus aetas cresco.
-                            Sub suggero tot dedecor celer.</p>
-                    </div>
-                    <div class="display-flex align-items-center">
-                        <button type="button" class="btn btn-default btn-component" tabindex="0">Connect</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="bg-white padding-15 rounded-large shadow-subtle border">
-            <div class="display-flex gap-15">
-                <div class="height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14">
-                    <span class="rioglyph rioglyph-rio text-size-300pct">
-                    </span>
-                </div>
-                <div class="flex-1-1 display-flex gap-15 flex-row-ls flex-column">
-                    <div class="flex-1-1">
-                        <p class="text-size-18 margin-0 margin-bottom-5">Lowe Group</p>
-                        <p class="text-color-dark margin-0">Acervus totidem caelum vilitas stella.</p>
-                    </div>
-                    <div class="display-flex align-items-center">
-                        <button type="button" class="btn btn-default btn-component" tabindex="0">Connect</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-```
-
-### Example: Choose the logistics session that fits your process
-
-Meeting type
-
-Choose the logistics session that fits your process
-Freight pickup
-Schedule cargo collection at origin
-
-30 min
-
-Route planning
-Discuss optimal route and ETA
-
-45 min
-
-Delivery coordination
-Align final drop-off and documents
-
-60 min
-
-#### Summary
-
-Meeting type
-
-Choose the logistics session that fits your process
-Freight pickup
-Schedule cargo collection at origin
-
-30 min
-
-Route planning
-Discuss optimal route and ETA
-
-45 min
-
-Delivery coordination
-Align final drop-off and documents
-
-60 min
-
-#### React (tsx)
-
-```tsx
-import Card from '@rio-cloud/rio-uikit/Card';
-
-export default () => {
-    const options = [
-        {
-            title: 'Freight pickup',
-            subtitle: 'Schedule cargo collection at origin',
-            duration: '30 min',
-        },
-        {
-            title: 'Route planning',
-            subtitle: 'Discuss optimal route and ETA',
-            duration: '45 min',
-        },
-        {
-            title: 'Delivery coordination',
-            subtitle: 'Align final drop-off and documents',
-            duration: '60 min',
-        },
-    ];
-
-    return (
-        <div className='max-width-500 margin-auto padding-5'>
-            <Card padding={25}>
-                <div className='display-flex align-items-center gap-5 margin-bottom-5'>
-                    <span className='rioglyph rioglyph-user text-size-18' />
-                    <div className='text-size-18 text-bold text-color-darkest'>Meeting type</div>
-                </div>
-                <div className='text-color-dark margin-bottom-20'>
-                    Choose the logistics session that fits your process
-                </div>
-
-                <div className='display-flex flex-column gap-10'>
-                    {options.map(({ title, subtitle, duration }) => (
-                        <div
-                            key={title}
-                            className='display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer'
-                        >
-                            <div>
-                                <div className='text-medium text-color-darkest'>{title}</div>
-                                <div className='text-color-dark text-size-14'>{subtitle}</div>
-                            </div>
-                            <div className='badge badge-muted'>{duration}</div>
-                        </div>
-                    ))}
-                </div>
-            </Card>
-        </div>
-    );
-};
-```
-
-#### HTML (html)
-
-```html
-<div class="max-width-500 margin-auto padding-5">
-    <div class="bg-white rounded border shadow-default padding-25">
-        <div class="display-flex align-items-center gap-5 margin-bottom-5">
-            <span class="rioglyph rioglyph-user text-size-18">
-            </span>
-            <div class="text-size-18 text-bold text-color-darkest">Meeting type</div>
-        </div>
-        <div class="text-color-dark margin-bottom-20">Choose the logistics session that fits your process</div>
-        <div class="display-flex flex-column gap-10">
-            <div class="display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer">
-                <div>
-                    <div class="text-medium text-color-darkest">Freight pickup</div>
-                    <div class="text-color-dark text-size-14">Schedule cargo collection at origin</div>
-                </div>
-                <div class="badge badge-muted">30 min</div>
-            </div>
-            <div class="display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer">
-                <div>
-                    <div class="text-medium text-color-darkest">Route planning</div>
-                    <div class="text-color-dark text-size-14">Discuss optimal route and ETA</div>
-                </div>
-                <div class="badge badge-muted">45 min</div>
-            </div>
-            <div class="display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer">
-                <div>
-                    <div class="text-medium text-color-darkest">Delivery coordination</div>
-                    <div class="text-color-dark text-size-14">Align final drop-off and documents</div>
-                </div>
-                <div class="badge badge-muted">60 min</div>
-            </div>
-        </div>
-    </div>
-</div>
-```
-
-### Example: Amor cinis charisma degusto terreo.
-
-Lorem ipsum dolor
-Amor cinis charisma degusto terreo.
-
-Gusikowski, Wisozk and Oberbrunner
-Totidem carpo deputo amplus.
-
-Bashirian - Osinski
-Velut commemoro sono ratione annus voro pecus.
-Praesentium copiose ascisco.
-
-Franecki - VonRueden
-Vinculum una deripio vitium admitto solium hic ars harum.
-Subvenio crur vulnero vociferor velit vestigium vulgo quae.
-
-#### Summary
-
-Lorem ipsum dolor
-Amor cinis charisma degusto terreo.
-
-Gusikowski, Wisozk and Oberbrunner
-Totidem carpo deputo amplus.
-
-Bashirian - Osinski
-Velut commemoro sono ratione annus voro pecus.
-Praesentium copiose ascisco.
-
-Franecki - VonRueden
-Vinculum una deripio vitium admitto solium hic ars harum.
-Subvenio crur vulnero vociferor velit vestigium vulgo quae.
-
-#### React (tsx)
-
-```tsx
-import { faker } from '@faker-js/faker';
-
-export default () => {
-    const examples = [
-        {
-            name: faker.company.name(),
-            icon: 'rioglyph-trailer',
-            description: faker.lorem.lines(1),
-        },
-        {
-            name: faker.company.name(),
-            icon: 'rioglyph-truck',
-            description: faker.lorem.lines(2),
-        },
-        {
-            name: faker.company.name(),
-            icon: 'rioglyph-van',
-            description: faker.lorem.lines(2),
-        },
-    ];
-
-    return (
-        <div className='max-width-500 margin-auto padding-5'>
-            <div className='text-center'>
-                <div className='text-size-h2 font-bold'>Lorem ipsum dolor</div>
-                <p className='text-color-dark margin-top-0 margin-bottom-20'>{faker.lorem.lines(1)}</p>
-            </div>
-
-            <div className='space-y-15 divider-y-1 divider-color-light divider-style-solid'>
-                {examples.map(item => (
-                    <div key={item.name} className='padding-15'>
-                        <div className='display-flex gap-15'>
-                            <div className='text-size-14 text-color-darkest'>
-                                <span
-                                    className={`rioglyph ${item.icon} rioglyph-filled rioglyph-align-bottom text-size-300pct`}
-                                />
-                            </div>
-                            <div className='flex-1-1'>
-                                <div className='text-size-18 margin-bottom-2'>{item.name}</div>
-                                <div className='text-color-dark'>{item.description}</div>
-                            </div>
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};
-```
-
-#### HTML (html)
-
-```html
-<div class="max-width-500 margin-auto padding-5">
-    <div class="text-center">
-        <div class="text-size-h2 font-bold">Lorem ipsum dolor</div>
-        <p class="text-color-dark margin-top-0 margin-bottom-20">Amor cinis charisma degusto terreo.</p>
-    </div>
-    <div class="space-y-15 divider-y-1 divider-color-light divider-style-solid">
-        <div class="padding-15">
-            <div class="display-flex gap-15">
-                <div class="text-size-14 text-color-darkest">
-                    <span class="rioglyph rioglyph-trailer rioglyph-filled rioglyph-align-bottom text-size-300pct">
-                    </span>
-                </div>
-                <div class="flex-1-1">
-                    <div class="text-size-18 margin-bottom-2">Gusikowski, Wisozk and Oberbrunner</div>
-                    <div class="text-color-dark">Totidem carpo deputo amplus.</div>
-                </div>
-            </div>
-        </div>
-        <div class="padding-15">
-            <div class="display-flex gap-15">
-                <div class="text-size-14 text-color-darkest">
-                    <span class="rioglyph rioglyph-truck rioglyph-filled rioglyph-align-bottom text-size-300pct">
-                    </span>
-                </div>
-                <div class="flex-1-1">
-                    <div class="text-size-18 margin-bottom-2">Bashirian - Osinski</div>
-                    <div class="text-color-dark">Velut commemoro sono ratione annus voro pecus.
-                        Praesentium copiose ascisco.</div>
-                </div>
-            </div>
-        </div>
-        <div class="padding-15">
-            <div class="display-flex gap-15">
-                <div class="text-size-14 text-color-darkest">
-                    <span class="rioglyph rioglyph-van rioglyph-filled rioglyph-align-bottom text-size-300pct">
-                    </span>
-                </div>
-                <div class="flex-1-1">
-                    <div class="text-size-18 margin-bottom-2">Franecki - VonRueden</div>
-                    <div class="text-color-dark">Vinculum una deripio vitium admitto solium hic ars harum.
-                        Subvenio crur vulnero vociferor velit vestigium vulgo quae.</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-```
-
-### Example: Benevolentia appello torrens clamo atqui arto video enim. Soluta totus cui venustas apostolus suspendo cornu velut. Autem defetiscor bellicus pecco.
-
-Lorem ipsum dolor sit amet
-Statua cohaero vivo adduco cubicularis ciminatio.
-Audax ullus terror articulus defessus quos vae.
-
-Moen LLC
-Benevolentia appello torrens clamo atqui arto video enim.
-Soluta totus cui venustas apostolus suspendo cornu velut.
-Autem defetiscor bellicus pecco.
-
-Hoeger, Wilderman and Baumbach
-Cunae confugo viduo sordeo.
-Caput cur admoveo victoria curvo eos fugiat beneficium.
-Esse tamisium clibanus viriliter charisma pauper amplus.
-
-Wuckert - Schinner
-Debilito magnam peccatus volubilis aptus enim.
-Decet celo cultellus audacia vinculum tricesimus ver.
-Suffoco constans ait amplus tenuis incidunt.
-
-Reinger LLC
-Arca curto adeptio supplanto quibusdam victus.
-Arto vestrum tracto sodalitas sursum contra asper volo.
-Recusandae thalassinus vilitas aegrotatio nulla tepidus caritas vos conforto earum.
-
-#### Summary
-
-Lorem ipsum dolor sit amet
-Statua cohaero vivo adduco cubicularis ciminatio.
-Audax ullus terror articulus defessus quos vae.
-
-Moen LLC
-Benevolentia appello torrens clamo atqui arto video enim.
-Soluta totus cui venustas apostolus suspendo cornu velut.
-Autem defetiscor bellicus pecco.
-
-Hoeger, Wilderman and Baumbach
-Cunae confugo viduo sordeo.
-Caput cur admoveo victoria curvo eos fugiat beneficium.
-Esse tamisium clibanus viriliter charisma pauper amplus.
-
-Wuckert - Schinner
-Debilito magnam peccatus volubilis aptus enim.
-Decet celo cultellus audacia vinculum tricesimus ver.
-Suffoco constans ait amplus tenuis incidunt.
-
-Reinger LLC
-Arca curto adeptio supplanto quibusdam victus.
-Arto vestrum tracto sodalitas sursum contra asper volo.
-Recusandae thalassinus vilitas aegrotatio nulla tepidus caritas vos conforto earum.
-
-#### React (tsx)
-
-```tsx
-import { faker } from '@faker-js/faker';
-
-export default () => {
-    const examples = [
-        {
-            name: faker.company.name(),
-            icon: 'rioglyph-stats',
-            description: faker.lorem.lines(3),
-        },
-        {
-            name: faker.company.name(),
-            icon: 'rioglyph-server-stack',
-            description: faker.lorem.lines(3),
-        },
-        {
-            name: faker.company.name(),
-            icon: 'rioglyph-fingerprint',
-            description: faker.lorem.lines(3),
-        },
-        {
-            name: faker.company.name(),
-            icon: 'rioglyph-code-brackets',
-            description: faker.lorem.lines(3),
-        },
-    ];
-
-    return (
-        <div>
-            <div className='margin-auto max-width-800 margin-bottom-50'>
-                <div className='text-size-h2 text-medium'>Lorem ipsum dolor sit amet</div>
-                <div>{faker.lorem.lines(2)}</div>
-            </div>
-            <div className='margin-auto max-width-800 display-grid grid-cols-1 grid-cols-2-ls row-gap-25 column-gap-50'>
-                {examples.map(item => (
-                    <div key={item.name}>
-                        <div className='text-size-14 text-color-primary margin-bottom-10'>
-                            <span className={`rioglyph ${item.icon} text-size-200pct`} />
-                        </div>
-                        <div className='text-size-18 text-color-darker text-medium margin-bottom-5'>{item.name}</div>
-                        <div className='text-color-dark'>{item.description}</div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};
-```
-
-#### HTML (html)
-
-```html
-<div>
-    <div class="margin-auto max-width-800 margin-bottom-50">
-        <div class="text-size-h2 text-medium">Lorem ipsum dolor sit amet</div>
-        <div>Statua cohaero vivo adduco cubicularis ciminatio.
-            Audax ullus terror articulus defessus quos vae.</div>
-    </div>
-    <div class="margin-auto max-width-800 display-grid grid-cols-1 grid-cols-2-ls row-gap-25 column-gap-50">
-        <div>
-            <div class="text-size-14 text-color-primary margin-bottom-10">
-                <span class="rioglyph rioglyph-stats text-size-200pct">
-                </span>
-            </div>
-            <div class="text-size-18 text-color-darker text-medium margin-bottom-5">Moen LLC</div>
-            <div class="text-color-dark">Benevolentia appello torrens clamo atqui arto video enim.
-                Soluta totus cui venustas apostolus suspendo cornu velut.
-                Autem defetiscor bellicus pecco.</div>
-        </div>
-        <div>
-            <div class="text-size-14 text-color-primary margin-bottom-10">
-                <span class="rioglyph rioglyph-server-stack text-size-200pct">
-                </span>
-            </div>
-            <div class="text-size-18 text-color-darker text-medium margin-bottom-5">Hoeger, Wilderman and Baumbach</div>
-            <div class="text-color-dark">Cunae confugo viduo sordeo.
-                Caput cur admoveo victoria curvo eos fugiat beneficium.
-                Esse tamisium clibanus viriliter charisma pauper amplus.</div>
-        </div>
-        <div>
-            <div class="text-size-14 text-color-primary margin-bottom-10">
-                <span class="rioglyph rioglyph-fingerprint text-size-200pct">
-                </span>
-            </div>
-            <div class="text-size-18 text-color-darker text-medium margin-bottom-5">Wuckert - Schinner</div>
-            <div class="text-color-dark">Debilito magnam peccatus volubilis aptus enim.
-                Decet celo cultellus audacia vinculum tricesimus ver.
-                Suffoco constans ait amplus tenuis incidunt.</div>
-        </div>
-        <div>
-            <div class="text-size-14 text-color-primary margin-bottom-10">
-                <span class="rioglyph rioglyph-code-brackets text-size-200pct">
-                </span>
-            </div>
-            <div class="text-size-18 text-color-darker text-medium margin-bottom-5">Reinger LLC</div>
-            <div class="text-color-dark">Arca curto adeptio supplanto quibusdam victus.
-                Arto vestrum tracto sodalitas sursum contra asper volo.
-                Recusandae thalassinus vilitas aegrotatio nulla tepidus caritas vos conforto earum.</div>
-        </div>
-    </div>
-</div>
-```
-
-### Example: Featuring Tennessine-enhanced technology, our Table offers unparalleled strange performance
-
-Enhance your application with powerful add-ons!
-
-Rustic Gold Car
-Featuring Tennessine-enhanced technology, our Table offers unparalleled strange performance
-
-€30.05
-Total per month
-
-Get Add-on
-
-Modern Granite Mouse
-Innovative Bike featuring specific technology and Gold construction
-
-€86.15
-Total per month
-
-Get Add-on
-
-Electronic Granite Shoes
-Refined Bike designed with Gold for classic performance
-
-€55.90
-Total per month
-
-Get Add-on
-
-Incredible Marble Gloves
-The sleek and hefty Tuna comes with silver LED lighting for smart functionality
-
-€91.10
-Total per month
-
-Get Add-on
-
-Licensed Rubber Table
-Introducing the Cuba-inspired Chips, blending advanced style with local craftsmanship
-
-€21.09
-Total per month
-
-Get Add-on
-
-#### Summary
-
-Enhance your application with powerful add-ons!
-
-Rustic Gold Car
-Featuring Tennessine-enhanced technology, our Table offers unparalleled strange performance
-
-€30.05
-Total per month
-
-Get Add-on
-
-Modern Granite Mouse
-Innovative Bike featuring specific technology and Gold construction
-
-€86.15
-Total per month
-
-Get Add-on
-
-Electronic Granite Shoes
-Refined Bike designed with Gold for classic performance
-
-€55.90
-Total per month
-
-Get Add-on
-
-Incredible Marble Gloves
-The sleek and hefty Tuna comes with silver LED lighting for smart functionality
-
-€91.10
-Total per month
-
-Get Add-on
-
-Licensed Rubber Table
-Introducing the Cuba-inspired Chips, blending advanced style with local craftsmanship
-
-€21.09
-Total per month
-
-Get Add-on
-
-#### React (tsx)
-
-```tsx
-import { useEffect, useState } from 'react';
-import { faker } from '@faker-js/faker';
-import { FormattedNumber } from 'react-intl';
-
-import Button from '@rio-cloud/rio-uikit/Button';
-import useWindowResize from '@rio-cloud/rio-uikit/useWindowResize';
-
-const gridTemplateLargeScreen = 'auto 1fr auto auto';
-const gridTemplateSmallScreen = '1fr auto';
-
-export default () => {
-    const addons = Array.from({ length: 5 }).map(() => ({
-        id: faker.string.uuid(),
-        title: faker.commerce.productName(),
-        description: faker.commerce.productDescription(),
-        price: Number(faker.commerce.price({ min: 5, max: 99 })),
-        unit: faker.helpers.arrayElement(['Total per month', 'Total per user / month', 'Per 1000 messages / month']),
-    }));
-
-    const [gridTemplate, setGridTemplate] = useState(gridTemplateLargeScreen);
-
-    const handleResize = () => {
-        const windowWidth = window.innerWidth;
-        if (windowWidth < 600) {
-            setGridTemplate(gridTemplateSmallScreen);
-        } else {
-            setGridTemplate(gridTemplateLargeScreen);
-        }
-    };
-
-    // Handle small screens on mount
-    useEffect(() => {
-        handleResize();
-    }, []);
-
-    // Handle small screens when window resizes
-    useWindowResize(() => {
-        handleResize();
-    });
-
-    console.log({ gridTemplate });
-
-    return (
-        <div className='max-width-800 margin-auto'>
-            <h2 className='text-center text-wrap-pretty text-size-24 margin-bottom-25'>
-                Enhance your application with powerful add-ons!
-            </h2>
-
-            <div className='display-flex flex-column gap-20'>
-                {addons.map(addon => (
-                    <div
-                        key={addon.id}
-                        className='display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border'
-                        style={{
-                            gridTemplateColumns: gridTemplate,
-                        }}
-                    >
-                        <div className='align-self-start text-size-14 text-color-darker'>
-                            <span className='rioglyph rioglyph-puzzle text-size-300pct margin-top-2' />
-                        </div>
-
-                        <div className='flex-1-1'>
-                            <div className='text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word'>
-                                {addon.title}
-                            </div>
-                            <div className='text-size-14 text-color-dark'>{addon.description}</div>
-                        </div>
-
-                        <div className='width-100'>
-                            <div className='text-size-16 text-medium'>
-                                <FormattedNumber value={addon.price} style='currency' currency='EUR' />
-                            </div>
-                            <div className='text-size-12 text-color-gray'>{addon.unit}</div>
-                        </div>
-
-                        <div>
-                            <Button bsStyle='muted-filled'>Get Add-on</Button>
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};
-```
-
-#### HTML (html)
-
-```html
-<div class="max-width-800 margin-auto">
-    <h2 class="text-center text-wrap-pretty text-size-24 margin-bottom-25">Enhance your application with powerful add-ons!</h2>
-    <div class="display-flex flex-column gap-20">
-        <div class="display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border" style="grid-template-columns: auto 1fr auto auto;">
-            <div class="align-self-start text-size-14 text-color-darker">
-                <span class="rioglyph rioglyph-puzzle text-size-300pct margin-top-2">
-                </span>
-            </div>
-            <div class="flex-1-1">
-                <div class="text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word">Rustic Gold Car</div>
-                <div class="text-size-14 text-color-dark">Featuring Tennessine-enhanced technology, our Table offers unparalleled strange performance</div>
-            </div>
-            <div class="width-100">
-                <div class="text-size-16 text-medium">€30.05</div>
-                <div class="text-size-12 text-color-gray">Total per month</div>
-            </div>
-            <div>
-                <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">Get Add-on</button>
-            </div>
-        </div>
-        <div class="display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border" style="grid-template-columns: auto 1fr auto auto;">
-            <div class="align-self-start text-size-14 text-color-darker">
-                <span class="rioglyph rioglyph-puzzle text-size-300pct margin-top-2">
-                </span>
-            </div>
-            <div class="flex-1-1">
-                <div class="text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word">Modern Granite Mouse</div>
-                <div class="text-size-14 text-color-dark">Innovative Bike featuring specific technology and Gold construction</div>
-            </div>
-            <div class="width-100">
-                <div class="text-size-16 text-medium">€86.15</div>
-                <div class="text-size-12 text-color-gray">Total per month</div>
-            </div>
-            <div>
-                <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">Get Add-on</button>
-            </div>
-        </div>
-        <div class="display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border" style="grid-template-columns: auto 1fr auto auto;">
-            <div class="align-self-start text-size-14 text-color-darker">
-                <span class="rioglyph rioglyph-puzzle text-size-300pct margin-top-2">
-                </span>
-            </div>
-            <div class="flex-1-1">
-                <div class="text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word">Electronic Granite Shoes</div>
-                <div class="text-size-14 text-color-dark">Refined Bike designed with Gold for classic performance</div>
-            </div>
-            <div class="width-100">
-                <div class="text-size-16 text-medium">€55.90</div>
-                <div class="text-size-12 text-color-gray">Total per month</div>
-            </div>
-            <div>
-                <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">Get Add-on</button>
-            </div>
-        </div>
-        <div class="display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border" style="grid-template-columns: auto 1fr auto auto;">
-            <div class="align-self-start text-size-14 text-color-darker">
-                <span class="rioglyph rioglyph-puzzle text-size-300pct margin-top-2">
-                </span>
-            </div>
-            <div class="flex-1-1">
-                <div class="text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word">Incredible Marble Gloves</div>
-                <div class="text-size-14 text-color-dark">The sleek and hefty Tuna comes with silver LED lighting for smart functionality</div>
-            </div>
-            <div class="width-100">
-                <div class="text-size-16 text-medium">€91.10</div>
-                <div class="text-size-12 text-color-gray">Total per month</div>
-            </div>
-            <div>
-                <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">Get Add-on</button>
-            </div>
-        </div>
-        <div class="display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border" style="grid-template-columns: auto 1fr auto auto;">
-            <div class="align-self-start text-size-14 text-color-darker">
-                <span class="rioglyph rioglyph-puzzle text-size-300pct margin-top-2">
-                </span>
-            </div>
-            <div class="flex-1-1">
-                <div class="text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word">Licensed Rubber Table</div>
-                <div class="text-size-14 text-color-dark">Introducing the Cuba-inspired Chips, blending advanced style with local craftsmanship</div>
-            </div>
-            <div class="width-100">
-                <div class="text-size-16 text-medium">€21.09</div>
-                <div class="text-size-12 text-color-gray">Total per month</div>
-            </div>
-            <div>
-                <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">Get Add-on</button>
-            </div>
-        </div>
-    </div>
-</div>
-```
-
-### Example: Example 6
-
-Features
-
-Frozen Silk Keyboard
-Savor the crunchy essence in our Salad, designed for excellent culinary adventures
-
-Licensed Aluminum Gloves
-Ergonomic Bike designed with Aluminum for austere performance
-
-Fantastic Rubber Pizza
-New pink Bike with ergonomic design for menacing comfort
-
-Gorgeous Granite Chips
-Small Chicken designed with Marble for fluffy performance
-
-Fresh Rubber Pizza
-Discover the scary new Mouse with an exciting mix of Rubber ingredients
-
-Rustic Plastic Car
-The Managed fault-tolerant internet solution Ball offers reliable performance and frank design
-
-#### Summary
-
-Features
-
-Frozen Silk Keyboard
-Savor the crunchy essence in our Salad, designed for excellent culinary adventures
-
-Licensed Aluminum Gloves
-Ergonomic Bike designed with Aluminum for austere performance
-
-Fantastic Rubber Pizza
-New pink Bike with ergonomic design for menacing comfort
-
-Gorgeous Granite Chips
-Small Chicken designed with Marble for fluffy performance
-
-Fresh Rubber Pizza
-Discover the scary new Mouse with an exciting mix of Rubber ingredients
-
-Rustic Plastic Car
-The Managed fault-tolerant internet solution Ball offers reliable performance and frank design
-
-#### React (tsx)
-
-```tsx
-import { faker } from '@faker-js/faker';
-
-export default () => {
-    const examples = Array.from({ length: 5 }).map(() => ({
-        id: faker.string.uuid(),
-        title: faker.commerce.productName(),
-        description: faker.commerce.productDescription(),
-    }));
-
-    return (
-        <div className='max-width-600 margin-auto'>
-            <div className='lead '>
-                <div className='display-flex justify-content-between'>
-                    <div>Features</div>
-                </div>
-                <hr className='margin-top-10 border-color-light' />
-            </div>
-
-            <ul className='display-grid grid-cols-1 grid-cols-2-sm column-gap-25 row-gap-10 icon-list margin-bottom-0'>
-                {examples.map(example => (
-                    <li key={example.id} className='display-flex gap-10 '>
-                        <span className='rioglyph rioglyph-ok-sign text-color-success text-size-20' />
-                        <div>
-                            <div className='text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word'>
-                                {example.title}
-                            </div>
-                            <div>{example.description}</div>
-                        </div>
-                    </li>
-                ))}
-                <li className='display-flex gap-10'>
-                    <span className='rioglyph rioglyph rioglyph-minus-sign text-color-gray text-size-20' />
-                    <div>
-                        <div className='text-medium text-size-18 text-color-darker text-capitalize-first-word'>
-                            {faker.commerce.productName()}
-                        </div>
-                        <div>{faker.commerce.productDescription()}</div>
-                    </div>
-                </li>
-            </ul>
-        </div>
-    );
-};
-```
-
-#### HTML (html)
-
-```html
-<div class="max-width-600 margin-auto">
-    <div class="lead ">
-        <div class="display-flex justify-content-between">
-            <div>Features</div>
-        </div>
-        <hr class="margin-top-10 border-color-light">
-    </div>
-    <ul class="display-grid grid-cols-1 grid-cols-2-sm column-gap-25 row-gap-10 icon-list margin-bottom-0">
-        <li class="display-flex gap-10 ">
-            <span class="rioglyph rioglyph-ok-sign text-color-success text-size-20">
-            </span>
-            <div>
-                <div class="text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word">Frozen Silk Keyboard</div>
-                <div>Savor the crunchy essence in our Salad, designed for excellent culinary adventures</div>
-            </div>
-        </li>
-        <li class="display-flex gap-10 ">
-            <span class="rioglyph rioglyph-ok-sign text-color-success text-size-20">
-            </span>
-            <div>
-                <div class="text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word">Licensed Aluminum Gloves</div>
-                <div>Ergonomic Bike designed with Aluminum for austere performance</div>
-            </div>
-        </li>
-        <li class="display-flex gap-10 ">
-            <span class="rioglyph rioglyph-ok-sign text-color-success text-size-20">
-            </span>
-            <div>
-                <div class="text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word">Fantastic Rubber Pizza</div>
-                <div>New pink Bike with ergonomic design for menacing comfort</div>
-            </div>
-        </li>
-        <li class="display-flex gap-10 ">
-            <span class="rioglyph rioglyph-ok-sign text-color-success text-size-20">
-            </span>
-            <div>
-                <div class="text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word">Gorgeous Granite Chips</div>
-                <div>Small Chicken designed with Marble for fluffy performance</div>
-            </div>
-        </li>
-        <li class="display-flex gap-10 ">
-            <span class="rioglyph rioglyph-ok-sign text-color-success text-size-20">
-            </span>
-            <div>
-                <div class="text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word">Fresh Rubber Pizza</div>
-                <div>Discover the scary new Mouse with an exciting mix of Rubber ingredients</div>
-            </div>
-        </li>
-        <li class="display-flex gap-10">
-            <span class="rioglyph rioglyph rioglyph-minus-sign text-color-gray text-size-20">
-            </span>
-            <div>
-                <div class="text-medium text-size-18 text-color-darker text-capitalize-first-word">Rustic Plastic Car</div>
-                <div>The Managed fault-tolerant internet solution Ball offers reliable performance and frank design</div>
-            </div>
-        </li>
-    </ul>
-</div>
-```