@rio-cloud/uikit-mcp 1.1.7 → 1.1.9

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-23T15:49:36.649Z
-
-## List blocks
-
-### Example: Thermae paens aduro demonstro molestiae debilito deorsum contigo.
-
-Lorem ipsum dolor
-Thermae paens aduro demonstro molestiae debilito deorsum contigo.
-
-Muller, Wyman and Fadel
-Ventito ars tribuo talus ago argentum comitatus vitae subiungo.
-
-Connect
-
-Streich - Franecki
-Careo sodalitas advoco.
-Utrimque cotidie contigo varietas aurum aeger thermae.
-
-Connect
-
-McLaughlin - Klocko
-Uredo turpis veritatis amitto aurum aveho vulticulus denique cresco.
-
-Connect
-
-#### Summary
-
-Lorem ipsum dolor
-Thermae paens aduro demonstro molestiae debilito deorsum contigo.
-
-Muller, Wyman and Fadel
-Ventito ars tribuo talus ago argentum comitatus vitae subiungo.
-
-Connect
-
-Streich - Franecki
-Careo sodalitas advoco.
-Utrimque cotidie contigo varietas aurum aeger thermae.
-
-Connect
-
-McLaughlin - Klocko
-Uredo turpis veritatis amitto aurum aveho vulticulus denique cresco.
-
-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">Thermae paens aduro demonstro molestiae debilito deorsum contigo.</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">Muller, Wyman and Fadel</p>
-                        <p class="text-color-dark margin-0">Ventito ars tribuo talus ago argentum comitatus vitae subiungo.</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">Streich - Franecki</p>
-                        <p class="text-color-dark margin-0">Careo sodalitas advoco.
-                            Utrimque cotidie contigo varietas aurum aeger thermae.</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">McLaughlin - Klocko</p>
-                        <p class="text-color-dark margin-0">Uredo turpis veritatis amitto aurum aveho vulticulus denique cresco.</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: Caste civis callide nostrum claudeo asper.
-
-Lorem ipsum dolor
-Caste civis callide nostrum claudeo asper.
-
-Kirlin, Shanahan and Casper
-Cura defero arbitro argentum villa volup venio vestrum.
-
-Herzog - Gutkowski
-At pax tepesco aduro tersus.
-Spargo nisi vorax a verus color id absens compello.
-
-Wilkinson, Murray and Hauck
-Blanditiis similique delego desino tergeo.
-Brevis pecus vacuus.
-
-#### Summary
-
-Lorem ipsum dolor
-Caste civis callide nostrum claudeo asper.
-
-Kirlin, Shanahan and Casper
-Cura defero arbitro argentum villa volup venio vestrum.
-
-Herzog - Gutkowski
-At pax tepesco aduro tersus.
-Spargo nisi vorax a verus color id absens compello.
-
-Wilkinson, Murray and Hauck
-Blanditiis similique delego desino tergeo.
-Brevis pecus vacuus.
-
-#### 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">Caste civis callide nostrum claudeo asper.</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">Kirlin, Shanahan and Casper</div>
-                    <div class="text-color-dark">Cura defero arbitro argentum villa volup venio vestrum.</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">Herzog - Gutkowski</div>
-                    <div class="text-color-dark">At pax tepesco aduro tersus.
-                        Spargo nisi vorax a verus color id absens compello.</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">Wilkinson, Murray and Hauck</div>
-                    <div class="text-color-dark">Blanditiis similique delego desino tergeo.
-                        Brevis pecus vacuus.</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-```
-
-### Example: Abundans certe solutio testimonium abeo. Arcus vesco urbs suadeo super astrum cimentarius. Suppono voluptate suffoco sponte subseco vigilo cunabula corroboro triduana.
-
-Lorem ipsum dolor sit amet
-Catena caelum tenax porro cubitum.
-Absum astrum viriliter.
-
-Reichel - Metz
-Abundans certe solutio testimonium abeo.
-Arcus vesco urbs suadeo super astrum cimentarius.
-Suppono voluptate suffoco sponte subseco vigilo cunabula corroboro triduana.
-
-Gleichner, Terry and Lemke
-Textus approbo taceo arx virgo curo spectaculum suus rerum damno.
-Video adstringo adicio aequitas caelum tabesco nemo sufficio.
-Thema mollitia defessus tener tenuis ancilla truculenter tenuis textor molestiae.
-
-Hickle, Nitzsche and Howell
-Amor corrigo tamisium vorago sortitus casus quibusdam addo nam.
-Thema vulpes aut confugo comes subito spectaculum vivo studio cubicularis.
-Aeger dolorem numquam debeo temporibus dignissimos copia.
-
-Weissnat and Sons
-Alii versus tonsor pecco adipiscor.
-Accedo demergo addo delicate.
-Adimpleo curvo cotidie comprehendo adstringo admitto esse audacia.
-
-#### Summary
-
-Lorem ipsum dolor sit amet
-Catena caelum tenax porro cubitum.
-Absum astrum viriliter.
-
-Reichel - Metz
-Abundans certe solutio testimonium abeo.
-Arcus vesco urbs suadeo super astrum cimentarius.
-Suppono voluptate suffoco sponte subseco vigilo cunabula corroboro triduana.
-
-Gleichner, Terry and Lemke
-Textus approbo taceo arx virgo curo spectaculum suus rerum damno.
-Video adstringo adicio aequitas caelum tabesco nemo sufficio.
-Thema mollitia defessus tener tenuis ancilla truculenter tenuis textor molestiae.
-
-Hickle, Nitzsche and Howell
-Amor corrigo tamisium vorago sortitus casus quibusdam addo nam.
-Thema vulpes aut confugo comes subito spectaculum vivo studio cubicularis.
-Aeger dolorem numquam debeo temporibus dignissimos copia.
-
-Weissnat and Sons
-Alii versus tonsor pecco adipiscor.
-Accedo demergo addo delicate.
-Adimpleo curvo cotidie comprehendo adstringo admitto esse audacia.
-
-#### 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>Catena caelum tenax porro cubitum.
-            Absum astrum viriliter.</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">Reichel - Metz</div>
-            <div class="text-color-dark">Abundans certe solutio testimonium abeo.
-                Arcus vesco urbs suadeo super astrum cimentarius.
-                Suppono voluptate suffoco sponte subseco vigilo cunabula corroboro triduana.</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">Gleichner, Terry and Lemke</div>
-            <div class="text-color-dark">Textus approbo taceo arx virgo curo spectaculum suus rerum damno.
-                Video adstringo adicio aequitas caelum tabesco nemo sufficio.
-                Thema mollitia defessus tener tenuis ancilla truculenter tenuis textor molestiae.</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">Hickle, Nitzsche and Howell</div>
-            <div class="text-color-dark">Amor corrigo tamisium vorago sortitus casus quibusdam addo nam.
-                Thema vulpes aut confugo comes subito spectaculum vivo studio cubicularis.
-                Aeger dolorem numquam debeo temporibus dignissimos copia.</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">Weissnat and Sons</div>
-            <div class="text-color-dark">Alii versus tonsor pecco adipiscor.
-                Accedo demergo addo delicate.
-                Adimpleo curvo cotidie comprehendo adstringo admitto esse audacia.</div>
-        </div>
-    </div>
-</div>
-```
-
-### Example: Professional-grade Keyboard perfect for immense training and recreational use
-
-Enhance your application with powerful add-ons!
-
-Refined Granite Pizza
-Professional-grade Keyboard perfect for immense training and recreational use
-
-€37.35
-Total per user / month
-
-Get Add-on
-
-Soft Rubber Hat
-The sleek and gripping Hat comes with teal LED lighting for smart functionality
-
-€27.59
-Total per month
-
-Get Add-on
-
-Frozen Plastic Computer
-Ergonomic Ball made with Steel for all-day vivacious support
-
-€13.89
-Total per month
-
-Get Add-on
-
-Fantastic Cotton Soap
-New pink Cheese with ergonomic design for cloudy comfort
-
-€85.65
-Total per month
-
-Get Add-on
-
-Refined Bamboo Bike
-The sleek and alert Gloves comes with pink LED lighting for smart functionality
-
-€16.60
-Total per user / month
-
-Get Add-on
-
-#### Summary
-
-Enhance your application with powerful add-ons!
-
-Refined Granite Pizza
-Professional-grade Keyboard perfect for immense training and recreational use
-
-€37.35
-Total per user / month
-
-Get Add-on
-
-Soft Rubber Hat
-The sleek and gripping Hat comes with teal LED lighting for smart functionality
-
-€27.59
-Total per month
-
-Get Add-on
-
-Frozen Plastic Computer
-Ergonomic Ball made with Steel for all-day vivacious support
-
-€13.89
-Total per month
-
-Get Add-on
-
-Fantastic Cotton Soap
-New pink Cheese with ergonomic design for cloudy comfort
-
-€85.65
-Total per month
-
-Get Add-on
-
-Refined Bamboo Bike
-The sleek and alert Gloves comes with pink LED lighting for smart functionality
-
-€16.60
-Total per user / 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">Refined Granite Pizza</div>
-                <div class="text-size-14 text-color-dark">Professional-grade Keyboard perfect for immense training and recreational use</div>
-            </div>
-            <div class="width-100">
-                <div class="text-size-16 text-medium">€37.35</div>
-                <div class="text-size-12 text-color-gray">Total per user / 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">Soft Rubber Hat</div>
-                <div class="text-size-14 text-color-dark">The sleek and gripping Hat comes with teal LED lighting for smart functionality</div>
-            </div>
-            <div class="width-100">
-                <div class="text-size-16 text-medium">€27.59</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">Frozen Plastic Computer</div>
-                <div class="text-size-14 text-color-dark">Ergonomic Ball made with Steel for all-day vivacious support</div>
-            </div>
-            <div class="width-100">
-                <div class="text-size-16 text-medium">€13.89</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">Fantastic Cotton Soap</div>
-                <div class="text-size-14 text-color-dark">New pink Cheese with ergonomic design for cloudy comfort</div>
-            </div>
-            <div class="width-100">
-                <div class="text-size-16 text-medium">€85.65</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">Refined Bamboo Bike</div>
-                <div class="text-size-14 text-color-dark">The sleek and alert Gloves comes with pink LED lighting for smart functionality</div>
-            </div>
-            <div class="width-100">
-                <div class="text-size-16 text-medium">€16.60</div>
-                <div class="text-size-12 text-color-gray">Total per user / 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
-
-Refined Rubber Table
-Ergonomic Soap made with Marble for all-day sugary support
-
-Recycled Rubber Hat
-New Shirt model with 62 GB RAM, 950 GB storage, and glorious features
-
-Handcrafted Rubber Hat
-Our koala-friendly Cheese ensures near comfort for your pets
-
-Intelligent Plastic Bike
-The sky blue Computer combines Guyana aesthetics with Berkelium-based durability
-
-Elegant Concrete Towels
-The Jarvis Chicken is the latest in a series of diligent products from Welch, MacGyver and Kilback
-
-Rustic Granite Fish
-Fresh Pants designed with Wooden for quick performance
-
-#### Summary
-
-Features
-
-Refined Rubber Table
-Ergonomic Soap made with Marble for all-day sugary support
-
-Recycled Rubber Hat
-New Shirt model with 62 GB RAM, 950 GB storage, and glorious features
-
-Handcrafted Rubber Hat
-Our koala-friendly Cheese ensures near comfort for your pets
-
-Intelligent Plastic Bike
-The sky blue Computer combines Guyana aesthetics with Berkelium-based durability
-
-Elegant Concrete Towels
-The Jarvis Chicken is the latest in a series of diligent products from Welch, MacGyver and Kilback
-
-Rustic Granite Fish
-Fresh Pants designed with Wooden for quick performance
-
-#### 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">Refined Rubber Table</div>
-                <div>Ergonomic Soap made with Marble for all-day sugary support</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">Recycled Rubber Hat</div>
-                <div>New Shirt model with 62 GB RAM, 950 GB storage, and glorious features</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">Handcrafted Rubber Hat</div>
-                <div>Our koala-friendly Cheese ensures near comfort for your pets</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">Intelligent Plastic Bike</div>
-                <div>The sky blue Computer combines Guyana aesthetics with Berkelium-based durability</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">Elegant Concrete Towels</div>
-                <div>The Jarvis Chicken is the latest in a series of diligent products from Welch, MacGyver and Kilback</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 Granite Fish</div>
-                <div>Fresh Pants designed with Wooden for quick performance</div>
-            </div>
-        </li>
-    </ul>
-</div>
-```