matcha-components 1.0.7 → 1.0.14

package/src/foundation/sizes/sizes.mdx

@@ -1,219 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Sizes / Documentação" />
-
-# Tamanhos
-
-Nesta seção, apresentamos as classes utilizadas para tamanhos do Matcha Design
-System.
-
----
-
-### Pixels e Porcentagem
-
-Os tamanhos das classes em **pixels** são sempre múltiplos de **4**, sendo o
-mínimo 0 e o máximo **256**.
-
-Os tamanhos em **porcentagem** das classes são sempre múltiplos de **5**, sendo
-o mínimo 0 e o máximo **100**.
-
-    <div class="h-24"></div>
-
-    <div class="grid-1 grid-lg-2 gap-32">
-        <div class="d-flex-column gap-16">
-            <div class="d-flex-row d-flex-space-between d-flex-align-end pr-12">
-                <div class="h5 mb-8 font-size-24">Widths</div>
-                <div class="h3 mb-8 font-size-16 color-accent">[Ver mais](/docs/fundamentos-sizes-width--docs)</div>
-            </div>
-            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
-                    <span class="font-size-16">.w-24</span>
-                    <div class="min-w-30-p">
-                        ```html
-                            <div class="w-24">24px Width</div>
-                        ```
-                    </div>
-            </div>
-
-            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
-                    <span class="font-size-16">.w-75-p</span>
-                    <div class="min-w-30-p">
-                        ```html
-                            <div class="w-75-p">75% Width</div>
-                        ```
-                    </div>
-            </div>
-        </div>
-
-        <div class="d-flex-column gap-16">
-            <div class="d-flex-row d-flex-space-between d-flex-align-end pr-12">
-                <div class="h5 mb-8 font-size-24">Heights</div>
-                <div class="h3 mb-8 font-size-16 color-accent">[Ver mais](/docs/fundamentos-sizes-height--docs)</div>
-            </div>
-
-            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
-                    <span class="font-size-16">.h-24</span>
-                    <div class="min-w-30-p">
-                        ```html
-                            <div class="h-24">24px Height</div>
-                        ```
-                    </div>
-            </div>
-
-            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
-                    <span class="font-size-16">.h-75-p</span>
-                    <div class="min-w-30-p">
-                        ```html
-                            <div class="h-75-p">75% Height</div>
-                        ```
-                    </div>
-            </div>
-        </div>
-
-        <div class="d-flex-column gap-16">
-            <div class="d-flex-row d-flex-space-between d-flex-align-end pr-12">
-                <div class="h5 mb-8 font-size-24">Max-widths</div>
-                <div class="h3 mb-8 font-size-16 color-accent">[Ver mais](/docs/fundamentos-sizes-max-width--docs)</div>
-            </div>
-            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
-                    <span class="font-size-16">.max-w-24</span>
-                    <div class="min-w-30-p">
-                        ```html
-                            <div class="max-w-24">24px Max-width</div>
-                        ```
-                    </div>
-            </div>
-
-            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
-                    <span class="font-size-16">.max-w-75-p</span>
-                    <div class="min-w-30-p">
-                        ```html
-                            <div class="max-w-75-p">75% Max-width</div>
-                        ```
-                    </div>
-            </div>
-        </div>
-
-        <div class="d-flex-column gap-16">
-            <div class="d-flex-row d-flex-space-between d-flex-align-end pr-12">
-                <div class="h5 mb-8 font-size-24">Max-heights</div>
-                <div class="h3 mb-8 font-size-16 color-accent">[Ver mais](/docs/fundamentos-sizes-max-height--docs)</div>
-            </div>
-            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
-                    <span class="font-size-16">.max-h-24</span>
-                    <div class="min-w-30-p">
-                        ```html
-                            <div class="max-h-24">24px Max-height</div>
-                        ```
-                    </div>
-            </div>
-
-            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
-                    <span class="font-size-16">.max-w-75-p</span>
-                    <div class="min-w-30-p">
-                        ```html
-                            <div class="max-h-75-p">75% Max-height</div>
-                        ```
-                    </div>
-            </div>
-        </div>
-
-        <div class="d-flex-column gap-16">
-            <div class="d-flex-row d-flex-space-between d-flex-align-end pr-12">
-                <div class="h5 mb-8 font-size-24">Min-widths</div>
-                <div class="h3 mb-8 font-size-16 color-accent">[Ver mais](/docs/fundamentos-sizes-min-width--docs)</div>
-            </div>
-            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
-                    <span class="font-size-16">.min-w-24</span>
-                    <div class="min-w-30-p">
-                        ```html
-                            <div class="min-w-24">24px Min-width</div>
-                        ```
-                    </div>
-            </div>
-
-            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
-                    <span class="font-size-16">.min-w-75-p</span>
-                    <div class="min-w-30-p">
-                        ```html
-                            <div class="min-w-75-p">75% Min-width</div>
-                        ```
-                    </div>
-            </div>
-        </div>
-
-        <div class="d-flex-column gap-16">
-            <div class="d-flex-row d-flex-space-between d-flex-align-end pr-12">
-                <div class="h5 mb-8 font-size-24">Min-heights</div>
-                <div class="h3 mb-8 font-size-16 color-accent">[Ver mais](/docs/fundamentos-sizes-min-height--docs)</div>
-            </div>
-            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
-                    <span class="font-size-16">.min-h-24</span>
-                    <div class="min-w-30-p">
-                        ```html
-                            <div class="min-h-24">24px Min-height</div>
-                        ```
-                    </div>
-            </div>
-
-            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
-                    <span class="font-size-16">.min-h-75-p</span>
-                    <div class="min-w-30-p">
-                        ```html
-                            <div class="min-h-75-p">75% Min-height</div>
-                        ```
-                    </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="h-24"></div>
-
-### Breakpoints
-
-- xs: 600px
-- sm: 1024px
-- md: 1440px
-- lg: 1920px
-- xl: 2560px
-
-As classes seguem a seguinte convenção:
-
-\{**w / h**\}-\{**breakpoint**\}-\{**valorEmPixels**\}
-
-\{**max / min**\}-\{**w / h**\}-\{**breakpoint**\}-\{**valorEmPorcentagem**\}-p
-
-Exemplos:
-
-**h-xs-8** é aplicado quando a largura mínima da tela atinge 600px, e a altura
-do elemento é definida como 8px.
-
-**min-h-lg-75-p** é aplicado quando a largura mínima da tela atinge 1920px, e a
-altura mínima do elemento é definida como 75%.
-
-    <div class="h-24"></div>
-    <div class="grid-2 grid-sm-2 gap-16">
-        <div class="d-flex-column matcha-card gap-8 d-flex-align-center background-surface">
-            <div class="h5 mb-8 font-size-16">Widths</div>
-            <div class="h3 mb-8 font-size-16 color-accent">[Ver breakpoints](/docs/fundamentos-sizes-width--docs#breakpoints)</div>
-        </div>
-        <div class="d-flex-column matcha-card gap-8 d-flex-align-center background-surface">
-            <div class="h5 mb-8 font-size-16">Heights</div>
-            <div class="h3 mb-8 font-size-16 color-accent">[Ver breakpoints](/docs/fundamentos-sizes-height--docs#breakpoints)</div>
-        </div>
-        <div class="d-flex-column matcha-card gap-8 d-flex-align-center background-surface">
-            <div class="h5 mb-8 font-size-16">Max-widths</div>
-            <div class="h3 mb-8 font-size-16 color-accent">[Ver breakpoints](/docs/fundamentos-sizes-max-width--docs#breakpoints)</div>
-        </div>
-        <div class="d-flex-column matcha-card gap-8 d-flex-align-center background-surface">
-            <div class="h5 mb-8 font-size-16">Max-heights</div>
-            <div class="h3 mb-8 font-size-16 color-accent">[Ver breakpoints](/docs/fundamentos-sizes-max-height--docs#breakpoints)</div>
-        </div>
-        <div class="d-flex-column matcha-card gap-8 d-flex-align-center background-surface">
-            <div class="h5 mb-8 font-size-16">Min-widths</div>
-            <div class="h3 mb-8 font-size-16 color-accent">[Ver breakpoints](/docs/fundamentos-sizes-min-width--docs#breakpoints)</div>
-        </div>
-        <div class="d-flex-column matcha-card gap-8 d-flex-align-center background-surface">
-            <div class="h5 mb-8 font-size-16">Min-heights</div>
-            <div class="h3 mb-8 font-size-16 color-accent">[Ver breakpoints](/docs/fundamentos-sizes-min-height--docs#breakpoints)</div>
-        </div>
-    </div>

package/src/foundation/sizes/widths.mdx

@@ -1,234 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Sizes / Width" />
-
-### Widths
-
-Nessa seção serão apresentadas as maneiras de se usar as classes para Width.
-
-#### Pixels
-
-Os tamanhos em pixels das classes são sempre múltiplos de **4**, sendo o mínimo
-0 e o máximo **256**.
-
-    <div class="h-256 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 65 }, (_, index) => {
-                const widthValue = index * 4;
-                return (
-                    <tr key={`w-${widthValue}`}>
-                        <td>w-{widthValue}</td>
-                        <td>width: {widthValue}px;</td>
-                    </tr>
-                );
-                })}
-            </tbody>
-        </table>
-    </div>
-
-    <div class="h-24"></div>
-
-    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <div class="matcha-card background-bg d-flex-column gap-8">
-            <div class="w-4 h-32 background-accent"></div>
-            <div class="w-16 h-32 background-accent"></div>
-            <div class="w-28 h-32 background-accent"></div>
-            <div class="w-40 h-32 background-accent"></div>
-            <div class="w-52 h-32 background-accent"></div>
-            <div class="w-64 h-32 background-accent"></div>
-        </div>
-        <div>
-            ```html
-            <div class="w-4">4px Width</div>
-            <div class="w-16">16px Width</div>
-            <div class="w-28">28px Width</div>
-            <div class="w-40">40px Width</div>
-            <div class="w-52">52px Width</div>
-            <div class="w-64">64px Width</div>
-            ```
-        </div>
-    </div>
-
-#### Porcentagem
-
-Os tamanhos em porcentagem das classes são sempre múltiplos de **5**, sendo o
-mínimo 0 e o máximo **100**.
-
-        <div class="h-256 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 21 }, (_, index) => {
-                const widthValue = index * 5;
-                return (
-                    <tr key={`w-${widthValue}-p`}>
-                        <td>w-{widthValue}</td>
-                        <td>width: {widthValue}%;</td>
-                    </tr>
-                );
-                })}
-            </tbody>
-        </table>
-    </div>
-
-    <div class="h-24"></div>
-
-    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <div class="matcha-card background-bg d-flex-column gap-8">
-            <div class="w-20-p h-32 background-accent"></div>
-            <div class="w-30-p h-32 background-accent"></div>
-            <div class="w-50-p h-32 background-accent"></div>
-            <div class="w-75-p h-32 background-accent"></div>
-            <div class="w-100-p h-32 background-accent"></div>
-        </div>
-        <div>
-            ```html
-            <div class="w-20-p">20% Width</div>
-            <div class="w-30-p">30% Width</div>
-            <div class="w-50-p">50% Width</div>
-            <div class="w-75-p">75% Width</div>
-            <div class="w-100-p">100% Width</div>
-            ```
-        </div>
-    </div>
-
-    <div class="h-24"></div>
-
-#### Breakpoints
-
-- xs: 600px
-- sm: 1024px
-- md: 1440px
-- lg: 1920px
-- xl: 2560px
-
-As classes de largura (width) seguem a seguinte convenção:
-
-w-\{**breakpoint**\}-\{**valorEmPixels**\}
-
-w-\{**breakpoint**\}-\{**valorEmPorcentagem**\}-p
-
-Exemplos:
-
-**w-xs-8** é aplicado quando a largura mínima da tela atinge 600px, e a largura
-do elemento é definida como 8px.
-
-**w-lg-75-p** é aplicado quando a largura mínima da tela atinge 1920px, e a
-largura do elemento é definida como 75%.
-
-    <div class="h-16"></div>
-
----
-
-    <p class="h5 mb-8 font-size-16">Classes em Pixels:</p>
-
-    <div class="h-256 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                    <th>Breakpoint</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 65 }, (_, index) => {
-                const widthValue = index * 4;
-                return (
-                    <>
-                        <tr key={`w-${widthValue}`}>
-                            <td>w-xs-{widthValue}</td>
-                            <td>width: {widthValue}px;</td>
-                            <td>@media only screen and (min-width: 600px)</td>
-                        </tr>
-                        <tr key={`w-${widthValue}`}>
-                            <td>w-sm-{widthValue}</td>
-                            <td>width: {widthValue}px;</td>
-                            <td>@media only screen and (min-width: 1024px)</td>
-                        </tr>
-                        <tr key={`w-${widthValue}`}>
-                            <td>w-md-{widthValue}</td>
-                            <td>width: {widthValue}px;</td>
-                            <td>@media only screen and (min-width: 1440px)</td>
-                        </tr>
-                        <tr key={`w-${widthValue}`}>
-                            <td>w-lg-{widthValue}</td>
-                            <td>width: {widthValue}px;</td>
-                            <td>@media only screen and (min-width: 1920px)</td>
-                        </tr>
-                        <tr key={`w-${widthValue}`}>
-                            <td>w-xl-{widthValue}</td>
-                            <td>width: {widthValue}px;</td>
-                            <td>@media only screen and (min-width: 2560px)</td>
-                        </tr>
-                    </>
-                );
-                })}
-            </tbody>
-        </table>
-    </div>
-
-    <div class="h-16"></div>
-    <p class="h5 mb-8 font-size-16 mt-16">Classes em Porcentagem:</p>
-
-    <div class="h-256 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                    <th>Breakpoint</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 21 }, (_, index) => {
-                const widthValue = index * 5;
-                return (
-                    <>
-                        <tr key={`w-${widthValue}`}>
-                            <td>w-xs-{widthValue}-p</td>
-                            <td>width: {widthValue}%;</td>
-                            <td>@media only screen and (min-width: 600px)</td>
-                        </tr>
-                        <tr key={`w-${widthValue}`}>
-                            <td>w-sm-{widthValue}-p</td>
-                            <td>width: {widthValue}%;</td>
-                            <td>@media only screen and (min-width: 1024px)</td>
-                        </tr>
-                        <tr key={`w-${widthValue}`}>
-                            <td>w-md-{widthValue}-p</td>
-                            <td>width: {widthValue}%;</td>
-                            <td>@media only screen and (min-width: 1440px)</td>
-                        </tr>
-                        <tr key={`w-${widthValue}`}>
-                            <td>w-lg-{widthValue}-p</td>
-                            <td>width: {widthValue}%;</td>
-                            <td>@media only screen and (min-width: 1920px)</td>
-                        </tr>
-                        <tr key={`w-${widthValue}`}>
-                            <td>w-xl-{widthValue}-p</td>
-                            <td>width: {widthValue}%;</td>
-                            <td>@media only screen and (min-width: 2560px)</td>
-                        </tr>
-                    </>
-                );
-                })}
-            </tbody>
-        </table>
-    </div>

package/src/foundation/spacing/margins.mdx

@@ -1,183 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Spacing / Margin" />
-
-### Margin
-
-Os tamanhos para as classes de margin são sempre múltiplos de **4**, sendo o
-máximo **64**.
-
-    <div class="h-400 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                </tr>
-            </thead>
-            <tbody>
-            {Array.from({ length: 17 }, (_, index) => {
-                    const marginValue = index* 4;
-                    return (
-                    <>
-                        {[
-                            {'abrev':'m', 'prop': ''},
-                            {'abrev':'mt', 'prop': '-top'},
-                            {'abrev':'mr', 'prop': '-right'},
-                            {'abrev':'mb', 'prop': '-bottom'},
-                            {'abrev':'ml', 'prop': '-left'},
-                            {'abrev':'mx', 'prop': '-left and margin-right'},
-                            {'abrev':'my', 'prop': '-top and margin-bottom'}
-                            ].map((margin) => (
-                                <tr>
-                                    <td>{`${margin.abrev}-${marginValue}`}</td>
-                                    <td>{`margin${margin.prop}: ${marginValue}px;`}</td>
-                                </tr>
-                            ))
-                        }
-                    </>
-                );
-            })}
-            </tbody>
-        </table>
-    </div>
-
-    <div class="h-24"></div>
-
-    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <div class="grid-2 gap-16 grid-sm-7 d-flex-sm-space-between p-16">
-            <div class="background-bg border-radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
-                <div class="accent border-radius-2 d-flex-center-center h-52 w-52 text-center font-size-14 m-12--force">m-12</div>
-            </div>
-            <div class="background-bg border-radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
-                <div class="accent border-radius-2 d-flex-center-center h-52 w-52 text-center font-size-14 mt-12--force">mt-12</div>
-            </div>
-            <div class="background-bg border-radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
-                <div class="accent border-radius-2 d-flex-center-center h-52 w-52 text-center font-size-14 mr-12--force">mr-12</div>
-            </div>
-            <div class="background-bg border-radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
-                <div class="accent border-radius-2 d-flex-center-center h-52 w-52 text-center font-size-14 mb-12--force">mb-12</div>
-            </div>
-            <div class="background-bg border-radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
-                <div class="accent border-radius-2 d-flex-center-center h-52 w-52 text-center font-size-14 ml-12--force">ml-12</div>
-            </div>
-            <div class="background-bg border-radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
-                <div class="accent border-radius-2 d-flex-center-center h-52 w-52 text-center font-size-14 mx-12--force">mx-12</div>
-            </div>
-            <div class="background-bg border-radius-4 b-2" style={{ height: 'fit-content', width: 'fit-content'}}>
-                <div class="accent border-radius-2 d-flex-center-center h-52 w-52 text-center font-size-14 my-12--force">my-12</div>
-            </div>
-        </div>
-        <div>
-            ```html
-            <div class="m-12">m-12</div>
-            <div class="mt-12">mt-12</div>
-            <div class="mr-12">mr-12</div>
-            <div class="mb-12">mb-12</div>
-            <div class="ml-12">ml-12</div>
-            <div class="mx-12">mx-12</div>
-            <div class="my-12">my-12</div>
-            ```
-        </div>
-    </div>
-
-    <div class="h-24"></div>
-
-#### Valores negativos
-
-Os tamanhos para as classes de margin também podem ser negativos.
-
-    <div class="h-400 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                </tr>
-            </thead>
-            <tbody>
-            {Array.from({ length: 33 }, (_, index) => {
-                    const marginValue = (index - 16 )* 4;
-                    return (
-                    <>
-                        {[
-                            {'abrev':'m', 'prop': ''},
-                            {'abrev':'mt', 'prop': '-top'},
-                            {'abrev':'mr', 'prop': '-right'},
-                            {'abrev':'mb', 'prop': '-bottom'},
-                            {'abrev':'ml', 'prop': '-left'},
-                            {'abrev':'mx', 'prop': '-left and margin-right'},
-                            {'abrev':'my', 'prop': '-top and margin-bottom'}
-                            ].map((margin) => (
-                                <tr>
-                                    <td>{`${margin.abrev}-${marginValue}`}</td>
-                                    <td>{`margin${margin.prop}: ${marginValue}px;`}</td>
-                                </tr>
-                            ))
-                        }
-                    </>
-                );
-            })}
-            </tbody>
-        </table>
-    </div>
-
-    <div class="h-24"></div>
-
-#### Breakpoints
-
-- xs: 600px
-- sm: 1024px
-- md: 1440px
-- lg: 1920px
-- xl: 2560px
-
----
-
-    <p class="h5 mb-8 font-size-16">Classes de Margin com breakpoint:</p>
-
-    <div class="h-400 w-100-p overflow-y-scroll">
-        <table class="w-100-p">
-            <thead>
-                <tr>
-                    <th>Classe</th>
-                    <th>Propriedade</th>
-                    <th>Breakpoint</th>
-                </tr>
-            </thead>
-            <tbody>
-               {Array.from({ length: 65 }, (_, index) => {
-                    const marginValue = index * 4;
-                    return (
-                    <>
-                        {[
-                            {'abrev':'m', 'prop': ''},
-                            {'abrev':'mt', 'prop': '-top'},
-                            {'abrev':'mr', 'prop': '-right'},
-                            {'abrev':'mb', 'prop': '-bottom'},
-                            {'abrev':'ml', 'prop': '-left'},
-                            {'abrev':'mx', 'prop': '-left and margin-right'},
-                            {'abrev':'my', 'prop': '-top and margin-bottom'}
-                            ].map((margin) => (
-                            [
-                            {'name':'xs', 'value': '600px'},
-                            {'name':'sm', 'value': '1024px'},
-                            {'name':'md', 'value': '1440px'},
-                            {'name':'lg', 'value': '1920px'},
-                            {'name':'xl', 'value': '2560px'}
-                            ].map((breakpoint) => (
-                            <tr key={`${margin.abrev}-${breakpoint.name}-${marginValue}`}>
-                                <td>{`${margin.abrev}-${breakpoint.name}-${marginValue}`}</td>
-                                <td>{`margin${margin.prop}: ${marginValue}px;`}</td>
-                                <td>{`@media only screen and (min-width: ${breakpoint.value})`}</td>
-                            </tr>
-                            ))
-                        ))}
-                    </>
-                    );
-                })}
-            </tbody>
-        </table>
-    </div>