matcha-components 1.0.8 → 1.0.15

package/src/foundation/spacing/paddings.mdx

@@ -1,156 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Spacing / Padding" />
-
-### Padding
-
-Os tamanhos para as classes de padding são sempre múltiplos de **4**, sendo o
-mínimo **0** e 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 paddingValue = index * 4;
-                    return (
-                    <>
-                        {[
-                            {'abrev':'p', 'prop': ''},
-                            {'abrev':'pt', 'prop': '-top'},
-                            {'abrev':'pr', 'prop': '-right'},
-                            {'abrev':'pb', 'prop': '-bottom'},
-                            {'abrev':'pl', 'prop': '-left'},
-                            {'abrev':'px', 'prop': '-left and padding-right'},
-                            {'abrev':'py', 'prop': '-top and padding-bottom'}
-                            ].map((padding) => (
-                                <tr>
-                                    <td>{`${padding.abrev}-${paddingValue}`}</td>
-                                    <td>{`padding${padding.prop}: ${paddingValue}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 grid-2 gap-16 grid-sm-7 d-flex-sm-space-between">
-            <div class="accent-200-bg border-radius-4 p-12" style={{ height: 'fit-content', width: 'fit-content'}}>
-                <div class="accent border-radius-4 d-flex-center-center h-52 w-52 text-center font-size-14">p-12</div>
-            </div>
-            <div class="accent-200-bg border-radius-4 pt-12" style={{ height: 'fit-content', width: 'fit-content'}}>
-                <div class="accent border-radius-4 d-flex-center-center h-52 w-52 text-center font-size-14">pt-12</div>
-            </div>
-            <div class="accent-200-bg border-radius-4 pr-12" style={{ height: 'fit-content', width: 'fit-content'}}>
-                <div class="accent border-radius-4 d-flex-center-center h-52 w-52 text-center font-size-14">pr-12</div>
-            </div>
-            <div class="accent-200-bg border-radius-4 pb-12" style={{ height: 'fit-content', width: 'fit-content'}}>
-                <div class="accent border-radius-4 d-flex-center-center h-52 w-52 text-center font-size-14">pb-12</div>
-            </div>
-            <div class="accent-200-bg border-radius-4 pl-12" style={{ height: 'fit-content', width: 'fit-content'}}>
-                <div class="accent border-radius-4 d-flex-center-center h-52 w-52 text-center font-size-14">pl-12</div>
-            </div>
-            <div class="accent-200-bg border-radius-4 px-12" style={{ height: 'fit-content', width: 'fit-content'}}>
-                <div class="accent border-radius-4 d-flex-center-center h-52 w-52 text-center font-size-14">px-12</div>
-            </div>
-            <div class="accent-200-bg border-radius-4 py-12" style={{ height: 'fit-content', width: 'fit-content'}}>
-                <div class="accent border-radius-4 d-flex-center-center h-52 w-52 text-center font-size-14">py-12</div>
-            </div>
-        </div>
-        <div>
-            ```html
-            <div class="p-12">
-                <div class="h-12 w-12 ...">p-12</div>
-            </div>
-            <div class="pt-12">
-                <div class="h-12 w-12 ...">pt-12</div>
-            </div>
-            <div class="pr-12">
-                <div class="h-12 w-12 ...">pr-12</div>
-            </div>
-            <div class="pb-12">
-                <div class="h-12 w-12 ...">pb-12</div>
-            </div>
-            <div class="pl-12">
-                <div class="h-12 w-12 ...">pl-12</div>
-            </div>
-            <div class="px-12">
-                <div class="h-12 w-12 ...">px-12</div>
-            </div>
-            <div class="py-12">
-                <div class="h-12 w-12 ...">py-12</div>
-            </div>
-            ```
-        </div>
-    </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 Padding 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: 17 }, (_, index) => {
-                    const paddingValue = index * 4;
-                    return (
-                    <>
-                        {[
-                            {'abrev':'p', 'prop': ''},
-                            {'abrev':'pt', 'prop': '-top'},
-                            {'abrev':'pr', 'prop': '-right'},
-                            {'abrev':'pb', 'prop': '-bottom'},
-                            {'abrev':'pl', 'prop': '-left'},
-                            {'abrev':'px', 'prop': '-left and padding-right'},
-                            {'abrev':'py', 'prop': '-top and padding-bottom'}
-                            ].map((paddingType) => (
-                            [
-                            {'name':'xs', 'value': '600px'},
-                            {'name':'sm', 'value': '1024px'},
-                            {'name':'md', 'value': '1440px'},
-                            {'name':'lg', 'value': '1920px'},
-                            {'name':'xl', 'value': '2560px'}
-                            ].map((breakpoint) => (
-                            <tr key={`${paddingType.abrev}-${breakpoint.name}-${paddingValue}`}>
-                                <td>{`${paddingType.abrev}-${breakpoint.name}-${paddingValue}`}</td>
-                                <td>{`padding${paddingType.prop}: ${paddingValue}px;`}</td>
-                                <td>{`@media only screen and (min-width: ${breakpoint.value})`}</td>
-                            </tr>
-                        ))
-                        ))}
-                    </>
-                    );
-                })}
-            </tbody>
-        </table>
-    </div>

package/src/foundation/typography/colors.mdx

@@ -1,26 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Typography / Colors" />
-
-### Text Theme - Colors
-
-Definições de cores padrão para textos.
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <div class="matcha-card background-bg">
-            <p class="text-primary">Exemplo de cor no texto</p>
-            <p class="text-basic">Exemplo de cor no texto</p>
-            <p class="text-placeholder">Exemplo de cor no texto</p>
-            <p class="text-warn">Exemplo de cor no texto</p>
-            <p class="text-label">Exemplo de cor no texto</p>
-        </div>
-        <div>
-            ```html
-            <p class="text-primary">Exemplo de cor no texto</p>
-            <p class="text-basic">Exemplo de cor no texto</p>
-            <p class="text-placeholder">Exemplo de cor no texto</p>
-            <p class="text-warn">Exemplo de cor no texto</p>
-            <p class="text-label">Exemplo de cor no texto</p>
-            ```
-        </div>
-    </div>

package/src/foundation/typography/font-size.mdx

@@ -1,57 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Typography / Font-size" />
-
-### Font-size
-
-Nessa seção serão apresentadas as maneiras de se usar as classes para font-size.
-
-#### Pixels
-
-Os tamanhos em pixels das classes são sempre múltiplos de **2**, sendo o mínimo
-**2** e o máximo **72**.
-
-    <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: 36 }, (_, index) => {
-                const fontSizeValue = (index + 1)* 2;
-                return (
-                    <tr key={`font-size-${fontSizeValue}`}>
-                        <td>fs-{fontSizeValue}</td>
-                        <td>font-size: {fontSizeValue}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">
-            <p class="fs-12">font-size: 12px</p>
-            <p class="fs-16">font-size: 16px</p>
-            <p class="fs-22">font-size: 22px</p>
-            <p class="fs-24">font-size: 24px</p>
-            <p class="fs-28">font-size: 28px</p>
-        </div>
-        <div>
-            ```html
-            <p class="fs-12">font-size: 12px</p>
-            <p class="fs-16">font-size: 16px</p>
-            <p class="fs-22">font-size: 22px</p>
-            <p class="fs-24">font-size: 24px</p>
-            <p class="fs-28">font-size: 28px</p>
-            ```
-        </div>
-    </div>

package/src/foundation/typography/font-weight.mdx

@@ -1,65 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Typography / Font-weight" />
-
-### Font-weight
-
-O **font-weight** é usado para controlar a espessura ou a intensidade da fonte
-de um texto e varia de 100 a 900.
-
-    <p class="h5 mb-8 font-size-16 mt-4">Classes</p>
-
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <div class="matcha-card background-bg">
-            <p class="fw-100">font-weight: 100</p>
-            <p class="fw-200">font-weight: 200</p>
-            <p class="fw-300">font-weight: 300</p>
-            <p class="fw-400">font-weight: 400</p>
-            <p class="fw-500">font-weight: 500</p>
-            <p class="fw-600">font-weight: 600</p>
-            <p class="fw-700">font-weight: 700</p>
-            <p class="fw-800">font-weight: 800</p>
-            <p class="fw-900">font-weight: 900</p>
-        </div>
-        <div>
-            ```html
-            <p class="fw-100">font-weight: 100</p>
-            <p class="fw-200">font-weight: 200</p>
-            <p class="fw-300">font-weight: 300</p>
-            <p class="fw-400">font-weight: 400</p>
-            <p class="fw-500">font-weight: 500</p>
-            <p class="fw-600">font-weight: 600</p>
-            <p class="fw-700">font-weight: 700</p>
-            <p class="fw-800">font-weight: 800</p>
-            <p class="fw-900">font-weight: 900</p>
-            ```
-        </div>
-    </div>
-
-### Outras classes
-
-<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>
-      <tr>
-        <td>text-regular</td>
-        <td>font-weight: 400</td>
-      </tr>
-      <tr>
-        <td>text-book</td>
-        <td>font-weight: 500</td>
-      </tr>
-      <tr>
-        <td>text-semibold</td>
-        <td>font-weight: 600</td>
-      </tr>
-    </tbody>
-  </table>
-</div>

package/src/foundation/typography/helpers.mdx

@@ -1,86 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Typography / Helpers" />
-
-### Helpers
-
-Classes para te auxiliar
-
-#### Definir número de linhas de um texto
-
-    <div class="h-24"></div>
-
-    <div class="matcha-card background-surface gap-16 d-flex-column d-flex-sm-row d-flex-sm-space-between">
-        <div class="matcha-card background-bg d-flex-column gap-8">
-            <p class="fs-16 lh-20 one-line-text background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur  adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. EtiamSed tortor massa, finibus at nunc vel, consectetur id arcu porttitor, congue sem ac, posuere lorem. </p>
-            <p class="fs-16 lh-20 two-lines-text background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consecteturid arcu porttitor, congue sem ac, posuere lorem. </p>
-            <p class="fs-16 lh-20 three-lines-text background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consecteturid arcu porttitor, congue sem ac, posuere lorem. </p>
-            <p class="fs-16 lh-20 four-lines-text background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consecteturid arcu porttitor, congue sem ac, posuere lorem. </p>
-            <p class="fs-16 lh-20 five-lines-text background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel. Sed tortor massa, finibus at nunc vel, Sed tortor massa, finibus at nunc vel consectetur consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam Sed tortor massa, finibus at nunc vel, consecteturid arcu porttitor, congue sem ac, posuere lorem. </p>
-        </div>
-        <div>
-            ```html
-            <p class="fs-16 one-line-text"></p>
-            <p class="fs-16 two-lines-text"></p>
-            <p class="fs-16 three-lines-text"></p>
-            <p class="fs-16 four-lines-text"></p>
-            <p class="fs-16 five-lines-text"></p>
-            ```
-        </div>
-    </div>
-
-    <div class="h-24"></div>
-
-#### Title
-
-    <div class="h-24"></div>
-
-    <div class="matcha-card background-surface gap-16 d-flex-column">
-        <div class="matcha-card background-bg d-flex-column">
-            <div class="title">
-                <p class="fs-16 title-bullet">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-            </div>
-            <div class="title">
-                <p class="fs-16 title-content">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-            </div>
-            <p class="fs-16 title-sm ">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-
-        </div>
-        <div>
-            ```html
-            <div class="title">
-                <p class="fs-16 title-bullet">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-            </div>
-            <div class="title">
-                <p class="fs-16 title-content">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-            </div>
-            <p class="fs-16 title-sm ">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-            ```
-        </div>
-    </div>
-
-    <div class="h-24"></div>
-
-#### Paragraph
-
-    <div class="h-24"></div>
-
-    <div class="matcha-card background-surface gap-16 d-flex-column">
-        <div class="matcha-card background-bg d-flex-column">
-            <p class="par-xs">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-            <p class="par-sm">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-            <p class="par-md">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-            <p class="par-lg">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-            <p class="par-xl">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-
-        </div>
-        <div>
-            ```html
-            <p class="par-xs">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-            <p class="par-sm">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-            <p class="par-md">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-            <p class="par-lg">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-            <p class="par-xl">Lorem ipsum dolor sit amet, sed tortor massa, finibus at nunc vel.</p>
-            ```
-        </div>
-    </div>

package/src/foundation/typography/letter-spacing.mdx

@@ -1,35 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Typography / Letter-spacing" />
-
-### Letter-spacing
-
-O **letter-spacing** é usado para ajustar o espaço entre os caracteres de um
-texto.
-
-    <p class="h5 mb-8 font-size-16 mt-4">Classes</p>
-
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <div class="matcha-card background-bg d-flex-row gap-8">
-            <div>
-                <p class="fs-20">Condensed</p>
-                <p class="fs-16 lh-20 letter-spacing-condensed background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam id arcu porttitor, congue sem ac, posuere lorem. </p>
-            </div>
-            <div>
-                <p class="fs-20">Normal</p>
-                <p class="fs-16 lh-20 letter-spacing-normal background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam id arcu porttitor, congue sem ac, posuere lorem. </p>
-            </div>
-            <div>
-                <p class="fs-20">Relaxed</p>
-                <p class="fs-16 lh-20 letter-spacing-relaxed background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam id arcu porttitor, congue sem ac, posuere lorem. </p>
-            </div>
-        </div>
-        <div>
-            ```html
-            <p class="letter-spacing-condensed">letter-spacing: -.08em</p>
-            <p class="letter-spacing-normal">letter-spacing: normal</p>
-            <p class="letter-spacing-relaxed">letter-spacing: .08em</p>
-            ```
-        </div>
-    </div>

package/src/foundation/typography/line-height.mdx

@@ -1,52 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Typography / Line-height" />
-
-### Line-height
-
-O line-height é usado para controlar a altura da linha em um bloco de texto,
-afetando o espaço entre as linhas de texto.
-
-#### Pixels
-
-Os tamanhos em pixels dessas classes são sempre múltiplos de **2**, sendo o
-mínimo **2** e o máximo **72**.
-
-    <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: 36 }, (_, index) => {
-                const fontSizeValue = (index + 1)* 2;
-                return (
-                    <tr key={`lh-${fontSizeValue}`}>
-                        <td>lh-{fontSizeValue}</td>
-                        <td>line-height: {fontSizeValue}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-row gap-8">
-            <p class="fs-16 lh-20 background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam id arcu porttitor, congue sem ac, posuere lorem. </p>
-            <p class="fs-16 lh-32 background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam id arcu porttitor, congue sem ac, posuere lorem. </p>
-        </div>
-        <div>
-            ```html
-            <p class="fs-16 lh-20">line-height: 20px</p>
-            <p class="fs-16 lh-32">line-height: 32px</p>
-            ```
-        </div>
-    </div>

package/src/foundation/typography/message-box.mdx

@@ -1,43 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Typography / Message Boxes" />
-
-### Message Boxes
-
-Um message box é geralmente usado para exibição de mensagens.
-
-    <p class="h5 mb-8 font-size-16 mt-4">Classes</p>
-
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <div class="matcha-card background-bg d-flex-column gap-16">
-            <div class="message-box error w-200">
-                <p>Message box error</p>
-            </div>
-            <div class="message-box warning w-200">
-                <p>Message box warning</p>
-            </div>
-            <div class="message-box success w-200">
-                <p>Message box success</p>
-            </div>
-            <div class="message-box info w-200">
-                <p>Message box info</p>
-            </div>
-        </div>
-        <div>
-            ```html
-            <div class="message-box error w-200">
-                <p>Message box error</p>
-            </div>
-            <div class="message-box warning w-200">
-                <p>Message box warning</p>
-            </div>
-            <div class="message-box success w-200">
-                <p>Message box success</p>
-            </div>
-            <div class="message-box info w-200">
-                <p>Message box info</p>
-            </div>
-            ```
-        </div>
-    </div>

package/src/foundation/typography/text-align.mdx

@@ -1,22 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Typography / Text-align" />
-
-### Text-align
-
-O text-align controla o alinhamento horizontal do texto dentro de um elemento.
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <div class="matcha-card background-bg">
-            <p class="text-center">text-center</p>
-            <p class="text-right">text-right</p>
-            <p class="text-left">text-left</p>
-        </div>
-        <div>
-            ```html
-            <p class="text-center">text-align: center</p>
-            <p class="text-right">text-align: right</p>
-            <p class="text-left">text-align: left</p>
-            ```
-        </div>
-    </div>

package/src/foundation/typography/text-styles.mdx

@@ -1,88 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Typography / Text Styles" />
-
-### Text styles
-
-Estilização de trechos específicos de um texto.
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <div class="matcha-card background-bg">
-            <p>Exemplo de um <span class="text-super">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-sub">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-capitalize">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-uppercase">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-lowercase">TEXTO</span> estilizado</p>
-        </div>
-        <div>
-            ```html
-            <p>Exemplo de um <span class="text-super">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-sub">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-capitalize">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-uppercase">texto</span> estilizado</p>
-            <p>Exemplo de um <span class="text-lowercase">TEXTO</span> estilizado</p>
-            ```
-        </div>
-    </div>
-
-<div class="h-24"></div>
-
-### Para quebra de palavras
-
-<div class="h-24"></div>
-
-<div class="matcha-card background-surface d-flex-column gap-16">
-  <div class="matcha-card background-bg gap-16">
-    <p class="word-break w-124 background-surface border-radius-6">
-      Palavra palavra palavra palavra palavra palavra
-    </p>
-    <p class="word-break-all w-124 background-surface border-radius-6">
-      Palavra palavra palavra palavra palavra palavra
-    </p>
-  </div>
-  <div>
-    ```html
-    <p class="word-break w-124">
-      Palavra palavra palavra palavra palavra palavra
-    </p>
-    <p class="word-break-all w-124">
-      Palavra palavra palavra palavra palavra palavra
-    </p>
-    ```
-  </div>
-</div>
-
-<div class="h-24"></div>
-
-### Outras estilizações
-
-<div class="h-24"></div>
-
-<div class="matcha-card background-surface d-flex-column gap-16">
-  <div class="matcha-card background-bg">
-    <p class="text-truncate w-64">
-      Sed tortortia massa, finibus at nunc vel, consectetur
-    </p>
-    <p class="text-nowrap background-surface-alpha-inverse border-radius-6 w-64">
-      Sed tortortia massa, finibus at nunc vel, consectetur
-    </p>
-    <p class="text-boxed">
-      Sed tortortia massa, finibus at nunc vel, consectetur
-    </p>
-    <p class="text-strike">
-      Sed tortortia massa, finibus at nunc vel, consectetur
-    </p>
-    <p class="text-none">
-      Sed tortortia massa, finibus at nunc vel, consectetur
-    </p>
-  </div>
-  <div>
-    ```html
-    <p class="text-truncate w-64"></p>
-    <p class="text-nowrap background-surface w-64"></p>
-    <p class="text-boxed"></p>
-    <p class="text-strike"></p>
-    <p class="text-none"></p>
-    ```
-  </div>
-</div>

package/src/lib/matcha-autocomplete/autocomplete-overview.directive.ts

@@ -1,16 +0,0 @@
-import { Directive, ElementRef, Renderer2 } from '@angular/core';
-
-@Directive({
-    selector: '[matcha-autocomplete-overview]'
-})
-export class MatchaAutocompleteOverviewDirective {
-
-    constructor(
-        private _elementRef: ElementRef,
-        private _renderer: Renderer2
-    ) {
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement,'matcha-autocomplete-overview')
-    }
-
-}