matcha-components 1.0.5 → 1.0.7

package/src/foundation/colors/theme/warn.mdx

@@ -0,0 +1,235 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Fundamentos / Cores / Tema / Warn" />
+
+# Warn
+
+Nesta seção, apresentamos uma lista abrangente de todas as classes CSS associadas a esta cor no Matcha Design System. As classes abrangem cada um dos níveis de saturação dentro desta paleta de cores, incluindo cores **estáticas** e **Dinâmicas(que se adaptam ao tema)**. Isso se aplica tanto ao **foreground(texto)** quanto ao **background(fundo)**. Explore essa gama completa de opções para personalizar e adaptar as cores de acordo com suas preferências e necessidades.
+
+    <div class="grid-md-4 gap-8 pb-32">
+        <div class="grid-1 elevation-z-1 border-radius-8 overflow-hidden background-surface">
+            <div class="p-8 warn"><span class="i-matcha-special-need"></span>.warn</div>
+            <div class="p-8 color-warn">.color-warn</div>
+            <div class="p-8 background-warn-alpha">.background-warn-alpha</div>
+            <div class="p-8 background-warn">.background-warn</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 border-radius-8 overflow-hidden background-surface">
+            <div class="p-8 warn">.warn</div>
+            <div class="p-8 warn-50">.warn-50</div>
+            <div class="p-8 warn-100">.warn-100</div>
+            <div class="p-8 warn-200">.warn-200</div>
+            <div class="p-8 warn-300">.warn-300</div>
+            <div class="p-8 warn-400">.warn-400</div>
+            <div class="p-8 warn-500">.warn-500</div>
+            <div class="p-8 warn-600">.warn-600</div>
+            <div class="p-8 warn-700">.warn-700</div>
+            <div class="p-8 warn-800">.warn-800</div>
+            <div class="p-8 warn-900">.warn-900</div>
+            <div class="p-8 warn-A100">.warn-A100</div>
+            <div class="p-8 warn-A200">.warn-A200</div>
+            <div class="p-8 warn-A400">.warn-A400</div>
+            <div class="p-8 warn-A700">.warn-A700</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 border-radius-8 overflow-hidden background-surface">
+            <div class="p-8 warn-bg">.warn-bg</div>
+            <div class="p-8 warn-50-bg">.warn-50-bg</div>
+            <div class="p-8 warn-100-bg">.warn-100-bg</div>
+            <div class="p-8 warn-200-bg">.warn-200-bg</div>
+            <div class="p-8 warn-300-bg">.warn-300-bg</div>
+            <div class="p-8 warn-400-bg">.warn-400-bg</div>
+            <div class="p-8 warn-500-bg">.warn-500-bg</div>
+            <div class="p-8 warn-600-bg">.warn-600-bg</div>
+            <div class="p-8 warn-700-bg">.warn-700-bg</div>
+            <div class="p-8 warn-800-bg">.warn-800-bg</div>
+            <div class="p-8 warn-900-bg">.warn-900-bg</div>
+            <div class="p-8 warn-A100-bg">.warn-A100-bg</div>
+            <div class="p-8 warn-A200-bg">.warn-A200-bg</div>
+            <div class="p-8 warn-A400-bg">.warn-A400-bg</div>
+            <div class="p-8 warn-A700-bg">.warn-A700-bg</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 border-radius-8 overflow-hidden background-surface">
+            <div class="p-8 warn-fg">.warn-fg</div>
+            <div class="p-8 warn-50-fg">.warn-50-fg</div>
+            <div class="p-8 warn-100-fg">.warn-100-fg</div>
+            <div class="p-8 warn-200-fg">.warn-200-fg</div>
+            <div class="p-8 warn-300-fg">.warn-300-fg</div>
+            <div class="p-8 warn-400-fg">.warn-400-fg</div>
+            <div class="p-8 warn-500-fg">.warn-500-fg</div>
+            <div class="p-8 warn-600-fg">.warn-600-fg</div>
+            <div class="p-8 warn-700-fg">.warn-700-fg</div>
+            <div class="p-8 warn-800-fg">.warn-800-fg</div>
+            <div class="p-8 warn-900-fg">.warn-900-fg</div>
+            <div class="p-8 warn-A100-fg">.warn-A100-fg</div>
+            <div class="p-8 warn-A200-fg">.warn-A200-fg</div>
+            <div class="p-8 warn-A400-fg">.warn-A400-fg</div>
+            <div class="p-8 warn-A700-fg">.warn-A700-fg</div>
+        </div>
+    </div>
+
+---
+
+### Cores Dinâmicas: Acessibilidade e Harmonia Visual
+
+A seção "Cores Dinâmicas" apresenta uma coleção versátil de cores que se adaptam de maneira inteligente e intuitiva com base no tema escolhido pelo usuário: Tema claro ou escuro. Essas cores dinâmicas são especialmente projetadas para criar uma experiência visual perfeita e agradável, independentemente das preferências de contraste e iluminação.
+
+    #### Acessibilidade: Cor Acessível e inclusiva
+    O uso das classes ```.<nome-da-cor> ``` é essencial para garantir que nosso aplicativo ofereça uma acessibilidade ideal e uma experiência visual consistente, independentemente das condições de iluminação ou das necessidades individuais dos usuários.
+
+    <div class="d-flex-column">
+        <div class="elevation-z-1 matcha-card warn">
+            <span class="h5"><span class="i-matcha-special-need"></span>Exemplo: Mantém equilíbrio de contraste entre texto e plano de fundo, adaptando a cor de acordo com os temas claro ou escuro.</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .warn
+                ```
+            </div>
+        </div>
+    </div>
+
+    #### Harmonia Visual: Background e Foreground dinâmicos
+    Ao usar as classes CSS de "Background" ou "Foreground", lembre-se de que é crucial **evitar combinar as classes CSS de cores de plano de fundo e texto** de forma separada. Para obter harmonia visual e acessibilidade, opte por usar a opção "Acessibilidade: Cor Acessível e inclusiva" mencionada anteriormente. Essa abordagem única garante uma combinação equilibrada de cores para um ótimo contraste e legibilidade, resultando em uma experiência de usuário mais eficaz e agradável. No entanto, é fundamental evitar combinar classes CSS para aplicar estilo ao plano de fundo e ao texto de maneira que possa afetar a acessibilidade. Certifique-se de que a aplicação das classes mantenha a legibilidade e a harmonia visual para todos os usuários independente das condições de iluminação.
+
+    <div class="grid-md-2 gap-16">
+        <div class="d-flex-column gap-16">
+            <span class="color-success">
+                <span class="i-matcha-action_sign_success i-size-lg"></span>
+                <span class="pl-8">Faça isso</span>
+            </span>
+
+            <div class="elevation-z-1 matcha-card color-warn">
+                <span class="h5">Exemplo de texto</span>
+                <div class="d-flex-column pt-16">
+                    ```css
+                        .color-warn
+                    ```
+                </div>
+            </div>
+
+            <div class="elevation-z-1 matcha-card background-warn-alpha">
+                <span class="h5">Exemplo de texto</span>
+                <div class="d-flex-column pt-16">
+                    ```css
+                        .background-warn-alpha
+                    ```
+                </div>
+            </div>
+        </div>
+
+        <div class="d-flex-column gap-16">
+            <span class="color-error">
+                <span class="i-matcha-action_sign_error i-size-lg"></span>
+                <span class="pl-8">Não faça isso</span>
+            </span>
+
+            <div class="elevation-z-1 matcha-card background-warn">
+                <span class="h5">Exemplo de texto</span>
+                <div class="d-flex-column pt-16">
+                    ```css
+                        .background-warn
+                    ```
+                </div>
+            </div>
+        </div>
+    </div>
+
+---
+
+### Cores Não Dinâmicas (estáticas): Harmonia Visual Estática e Background e Foreground Estáticos
+
+Nesta seção, focamos nas "Cores Não Dinâmicas", que mantêm sua consistência independentemente do tema selecionado (claro ou escuro). Aqui, você encontrará uma lista de classes que permanecem constantes, garantindo uma harmonia visual estática em toda a aplicação. Algumas classes já foram configuradas para oferecer equilíbrio de contraste entre texto e plano de fundo, enquanto outras classes permitem personalizar separadamente as cores de background e texto.
+
+    #### Harmonia Visual: Cores Estáticas Pwarnefinidas
+    Classes nesta categoria foram cuidadosamente selecionadas para oferecer uma combinação equilibrada entre o texto e o background. Elas garantem legibilidade e estética, independentemente das preferências de tema. Use essas classes para manter uma aparência uniforme e agradável.
+
+        <div class="elevation-z-1 matcha-card warn">
+            <span class="h5">Exemplo: Mantém equilíbrio de contraste entre texto e plano de fundo, mas não ajusta sua cor de acordo com os temas claro ou escuro</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .warn
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 border-radius-8 overflow-hidden background-surface ">
+                <div class="p-8 warn">.warn</div>
+                <div class="p-8 warn-50">.warn-50</div>
+                <div class="p-8 warn-100">.warn-100</div>
+                <div class="p-8 warn-200">.warn-200</div>
+                <div class="p-8 warn-300">.warn-300</div>
+                <div class="p-8 warn-400">.warn-400</div>
+                <div class="p-8 warn-500">.warn-500</div>
+                <div class="p-8 warn-600">.warn-600</div>
+                <div class="p-8 warn-700">.warn-700</div>
+                <div class="p-8 warn-800">.warn-800</div>
+                <div class="p-8 warn-900">.warn-900</div>
+                <div class="p-8 warn-A100">.warn-A100</div>
+                <div class="p-8 warn-A200">.warn-A200</div>
+                <div class="p-8 warn-A400">.warn-A400</div>
+                <div class="p-8 warn-A700">.warn-A700</div>
+            </div>
+
+        </div>
+
+    #### Background e Foreground Estáticos Separados
+    Algumas classes permitem personalizar independentemente as cores de plano de fundo e texto. Embora essa abordagem ofereça flexibilidade, lembre-se de que é crucial manter o contraste e a legibilidade para uma experiência de usuário acessível. Escolha combinações adequadas de cores e evite comprometer a visibilidade do conteúdo.
+
+    Ao selecionar classes da seção "Cores Não Dinâmicas", você terá uma base sólida para criar interfaces coesas e visualmente atraentes, garantindo que cada elemento contribua para uma experiência de usuário de alta qualidade, independentemente do tema escolhido.
+    Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, informações, gráficos, bullets, borders, dots e etc.
+
+    <div class="grid-md-2 gap-8">
+        <div class="elevation-z-1 matcha-card warn-bg gap-16 d-flex-column">
+            <span class="h5">Não assegura o equilíbrio de contraste entre texto e plano de fundo, nem ajusta sua cor de acordo com os temas claro ou escuro.</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .warn
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 border-radius-8 overflow-hidden background-surface">
+                <div class="p-8 warn-bg">.warn-bg</div>
+                <div class="p-8 warn-50-bg">.warn-50-bg</div>
+                <div class="p-8 warn-100-bg">.warn-100-bg</div>
+                <div class="p-8 warn-200-bg">.warn-200-bg</div>
+                <div class="p-8 warn-300-bg">.warn-300-bg</div>
+                <div class="p-8 warn-400-bg">.warn-400-bg</div>
+                <div class="p-8 warn-500-bg">.warn-500-bg</div>
+                <div class="p-8 warn-600-bg">.warn-600-bg</div>
+                <div class="p-8 warn-700-bg">.warn-700-bg</div>
+                <div class="p-8 warn-800-bg">.warn-800-bg</div>
+                <div class="p-8 warn-900-bg">.warn-900-bg</div>
+                <div class="p-8 warn-A100-bg">.warn-A100-bg</div>
+                <div class="p-8 warn-A200-bg">.warn-A200-bg</div>
+                <div class="p-8 warn-A400-bg">.warn-A400-bg</div>
+                <div class="p-8 warn-A700-bg">.warn-A700-bg</div>
+            </div>
+        </div>
+
+        <div class="elevation-z-1 matcha-card warn-fg background-surface gap-16 d-flex-column">
+            <span class="h5">Não assegura o equilíbrio de contraste entre texto e plano de fundo, nem ajusta sua cor de acordo com os temas claro ou escuro.</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .warn
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 border-radius-8 overflow-hidden background-surface">
+                <div class="p-8 warn-fg">.warn-fg</div>
+                <div class="p-8 warn-50-fg">.warn-50-fg</div>
+                <div class="p-8 warn-100-fg">.warn-100-fg</div>
+                <div class="p-8 warn-200-fg">.warn-200-fg</div>
+                <div class="p-8 warn-300-fg">.warn-300-fg</div>
+                <div class="p-8 warn-400-fg">.warn-400-fg</div>
+                <div class="p-8 warn-500-fg">.warn-500-fg</div>
+                <div class="p-8 warn-600-fg">.warn-600-fg</div>
+                <div class="p-8 warn-700-fg">.warn-700-fg</div>
+                <div class="p-8 warn-800-fg">.warn-800-fg</div>
+                <div class="p-8 warn-900-fg">.warn-900-fg</div>
+                <div class="p-8 warn-A100-fg">.warn-A100-fg</div>
+                <div class="p-8 warn-A200-fg">.warn-A200-fg</div>
+                <div class="p-8 warn-A400-fg">.warn-A400-fg</div>
+                <div class="p-8 warn-A700-fg">.warn-A700-fg</div>
+            </div>
+        </div>
+    </div>

package/src/foundation/colors/theme-colors.mdx

@@ -0,0 +1,133 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Fundamentos / Cores / Tema" />
+
+# Cores
+
+Aqui você encontrará uma lista com as cores base do Matcha e as suas respectivas classes. Cada card exemplifica uma cor, e cada cor tem uma classe que pode ser usada para aplicar a mesma em qualquer elemento.
+
+---
+
+### Theme Colors
+
+Essas são as cores do tema do Matcha, elas são usadas para customizar todos os componente do Matcha, como botões, inputs, selects, checkboxes, radios, switches e etc.
+
+<div class="grid-md-3 gap-16">
+
+    <div class="d-flex-column gap-8">
+        <div class="elevation-z-1 matcha-card background-surface color-primary">
+            <span class="h5">Sample text</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .color-primary
+                ```
+            </div>
+        </div>
+
+        <div class="elevation-z-1 matcha-card primary">
+            <span class="h5"><span class="i-matcha-special-need"></span>Sample text</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .primary
+                ```
+            </div>
+        </div>
+
+
+        <div class="elevation-z-1 matcha-card background-primary">
+            <span class="h5">Sample text</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .background-primary
+                ```
+            </div>
+        </div>
+
+        <div class="elevation-z-1 matcha-card background-primary-alpha">
+            <span class="h5">Sample text</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .background-primary-alpha
+                ```
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex-column gap-8">
+
+        <div class="elevation-z-1 matcha-card background-surface color-accent">
+            <span class="h5">Sample text</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .color-accent
+                ```
+            </div>
+        </div>
+
+        <div class="elevation-z-1 matcha-card accent">
+            <span class="h5"><span class="i-matcha-special-need"></span>Sample text</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .accent
+                ```
+            </div>
+        </div>
+
+        <div class="elevation-z-1 matcha-card background-accent">
+            <span class="h5">Sample text</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .background-accent
+                ```
+            </div>
+        </div>
+
+        <div class="elevation-z-1 matcha-card background-accent-alpha">
+            <span class="h5">Sample text</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .background-accent-alpha
+                ```
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex-column gap-8">
+        <div class="elevation-z-1 matcha-card background-surface color-warn">
+            <span class="h5">Sample text</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .color-warn
+                ```
+            </div>
+        </div>
+
+        <div class="elevation-z-1 matcha-card warn">
+            <span class="h5"><span class="i-matcha-special-need"></span>Sample text</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .warn
+                ```
+            </div>
+        </div>
+
+        <div class="elevation-z-1 matcha-card background-warn">
+            <span class="h5">Sample text</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .background-warn
+                ```
+            </div>
+        </div>
+
+        <div class="elevation-z-1 matcha-card background-warn-alpha">
+            <span class="h5">Sample text</span>
+            <div class="d-flex-column pt-16">
+                ```css
+                    .background-warn-alpha
+                ```
+            </div>
+        </div>
+    </div>
+
+</div>

package/src/foundation/sizes/heights.mdx

@@ -0,0 +1,232 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Sizes / Height" />
+
+### Heights
+
+Nessa seção serão apresentadas as maneiras de se usar as classes para Height.
+
+#### 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 heightValue = index * 4;
+                return (
+                    <tr key={`h-${heightValue}`}>
+                        <td>h-{heightValue}</td>
+                        <td>height: {heightValue}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">
+            <div class="h-4 w-100-p background-accent"></div>
+            <div class="h-8 w-100-p background-accent"></div>
+            <div class="h-12 w-100-p background-accent"></div>
+            <div class="h-16 w-100-p background-accent"></div>
+            <div class="h-20 w-100-p background-accent"></div>
+        </div>
+        <div>
+            ```html
+            <div class="h-4">4px Height</div>
+            <div class="h-8">8px Height</div>
+            <div class="h-12">12px Height</div>
+            <div class="h-16">16px Height</div>
+            <div class="h-20">20px Height</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 heightValue = index * 5;
+                return (
+                    <tr key={`h-${heightValue}-p`}>
+                        <td>h-{heightValue}</td>
+                        <td>height: {heightValue}%;</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 h-256">
+        <div class="matcha-card background-bg d-flex-row gap-8 h-100-p">
+            <div class="h-20-p w-100-p background-accent"></div>
+            <div class="h-30-p w-100-p background-accent"></div>
+            <div class="h-50-p w-100-p background-accent"></div>
+            <div class="h-75-p w-100-p background-accent"></div>
+            <div class="h-100-p w-100-p background-accent"></div>
+        </div>
+        <div>
+            ```html
+            <div class="h-20-p">20% Height</div>
+            <div class="h-30-p">30% Height</div>
+            <div class="h-50-p">50% Height</div>
+            <div class="h-75-p">75% Height</div>
+            <div class="h-100-p">100% Height</div>
+            ```
+        </div>
+    </div>
+
+    <div class="h-24"></div>
+
+#### Breakpoints
+
+- xs: 600px
+- sm: 1024px
+- md: 1440px
+- lg: 1920px
+- xl: 2560px
+
+As classes de altura (height) seguem a seguinte convenção:
+
+h-\{**breakpoint**\}-\{**valorEmPixels**\}
+
+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.
+
+**h-lg-75-p** é aplicado quando a largura mínima da tela atinge 1920px, e a
+altura 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 heightValue = index * 4;
+                return (
+                    <>
+                        <tr key={`h-${heightValue}`}>
+                            <td>h-xs-{heightValue}</td>
+                            <td>height: {heightValue}px;</td>
+                            <td>@media only screen and (min-width: 600px)</td>
+                        </tr>
+                        <tr key={`h-${heightValue}`}>
+                            <td>h-sm-{heightValue}</td>
+                            <td>height: {heightValue}px;</td>
+                            <td>@media only screen and (min-width: 1024px)</td>
+                        </tr>
+                        <tr key={`h-${heightValue}`}>
+                            <td>h-md-{heightValue}</td>
+                            <td>height: {heightValue}px;</td>
+                            <td>@media only screen and (min-width: 1440px)</td>
+                        </tr>
+                        <tr key={`h-${heightValue}`}>
+                            <td>h-lg-{heightValue}</td>
+                            <td>height: {heightValue}px;</td>
+                            <td>@media only screen and (min-width: 1920px)</td>
+                        </tr>
+                        <tr key={`h-${heightValue}`}>
+                            <td>h-xl-{heightValue}</td>
+                            <td>height: {heightValue}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 heightValue = index * 5;
+                return (
+                    <>
+                        <tr key={`h-${heightValue}`}>
+                            <td>h-xs-{heightValue}-p</td>
+                            <td>height: {heightValue}%;</td>
+                            <td>@media only screen and (min-width: 600px)</td>
+                        </tr>
+                        <tr key={`h-${heightValue}`}>
+                            <td>h-sm-{heightValue}-p</td>
+                            <td>height: {heightValue}%;</td>
+                            <td>@media only screen and (min-width: 1024px)</td>
+                        </tr>
+                        <tr key={`h-${heightValue}`}>
+                            <td>h-md-{heightValue}-p</td>
+                            <td>height: {heightValue}%;</td>
+                            <td>@media only screen and (min-width: 1440px)</td>
+                        </tr>
+                        <tr key={`h-${heightValue}`}>
+                            <td>h-lg-{heightValue}-p</td>
+                            <td>height: {heightValue}%;</td>
+                            <td>@media only screen and (min-width: 1920px)</td>
+                        </tr>
+                        <tr key={`h-${heightValue}`}>
+                            <td>h-xl-{heightValue}-p</td>
+                            <td>height: {heightValue}%;</td>
+                            <td>@media only screen and (min-width: 2560px)</td>
+                        </tr>
+                    </>
+                );
+                })}
+            </tbody>
+        </table>
+    </div>