pipesol-button 1.0.14-beta.1 → 1.0.14-beta.3

package/README.md

@@ -2,6 +2,12 @@
 
   Este projeto é uma biblioteca React preparada para publicação no npm. 
   Essa biblioteca contem componentes de botao.
+
+  - ActionButton: Botão de ação estilizado baseado no tema e com tipografia configurável via `variant`.
+  - FormButtonGroup: Agrupador de botões "Deletar", Cancelar" e "Salvar" para uso **dentro** de formulários.
+  - NavigationButton: Botão de navegação reutilizável baseado em um link (`<a>`), estilizado com Material UI.
+  - NavigationLink: Link de navegação reutilizável baseado em um link (`<a>`), estilizado com Material UI. 
+  
   
   Abaixo está o passo a passo para publicar ou atualizar a lib.
 
@@ -35,4 +41,4 @@
 
 # Comando:
 
-  1. npm view pipesol-button versions --json - verifica todas as versões publicadas no npm.
+  1. npm view pipesol-button versions --json - verifica todas as versões publicadas no npm.  

package/dist/components/ActionButton.d.ts

@@ -1,28 +1,20 @@
 import React from "react";
 import { ButtonKind } from "@/types/ButtonKind";
 import { TypographyVariant } from "@mui/material/styles";
-export interface ActionButtonProps {
+import { CommonStyleProps } from "@/types/style/CommonStyleProps";
+export interface ActionButtonProps extends CommonStyleProps {
     kind?: ButtonKind;
-    width?: string;
-    height?: string;
-    padding?: string;
-    margin?: string;
-    text?: string;
+    text: string;
+    variant?: TypographyVariant;
+    aria_label: string;
     icon?: React.ReactNode;
     disabled?: boolean;
-    boxShadow?: string;
-    background?: string;
-    backgroundHover?: string;
-    color?: string;
-    colorHover?: string;
-    borderRadius?: string;
-    variant?: TypographyVariant;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 /**
  * Botão estilizado baseado no tema e com tipografia configurável via `variant`.
  *
- * @param {string} [text=""] Texto exibido dentro do botão.
+ * @param {string} text Texto exibido dentro do botão.
  * @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
  * @param {React.ReactNode} icon Ícone opcional exibido antes do texto.
  * @param {'none' | 'primary' | 'secondary'} [kind="none"] Token visual aplicado ao botão.
@@ -33,11 +25,12 @@ export interface ActionButtonProps {
  * @param {boolean} [disabled=false] Estado desabilitado.
  * @param {string} [background="transparent"] Cor de fundo.
  * @param {string} backgroundHover Cor de fundo no hover.
- * @param {string} color Cor do texto.
+ * @param {string} colorText Cor do texto.
  * @param {string} colorHover Cor do texto no hover.
  * @param {string} [borderRadius="0"] Raio da borda.
  * @param {string} [boxShadow="none"] Sombra do botão.
  * @param {Function} onClick Evento de clique.
+ * @param {string} aria_label Texto para acessibilidade.
  *
  * @example
  * ```tsx

package/dist/components/ActionButton.js

@@ -4,7 +4,7 @@ import { StyledButtonKind } from "./StyledButton";
 /**
  * Botão estilizado baseado no tema e com tipografia configurável via `variant`.
  *
- * @param {string} [text=""] Texto exibido dentro do botão.
+ * @param {string} text Texto exibido dentro do botão.
  * @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
  * @param {React.ReactNode} icon Ícone opcional exibido antes do texto.
  * @param {'none' | 'primary' | 'secondary'} [kind="none"] Token visual aplicado ao botão.
@@ -15,11 +15,12 @@ import { StyledButtonKind } from "./StyledButton";
  * @param {boolean} [disabled=false] Estado desabilitado.
  * @param {string} [background="transparent"] Cor de fundo.
  * @param {string} backgroundHover Cor de fundo no hover.
- * @param {string} color Cor do texto.
+ * @param {string} colorText Cor do texto.
  * @param {string} colorHover Cor do texto no hover.
  * @param {string} [borderRadius="0"] Raio da borda.
  * @param {string} [boxShadow="none"] Sombra do botão.
  * @param {Function} onClick Evento de clique.
+ * @param {string} aria_label Texto para acessibilidade.
  *
  * @example
  * ```tsx
@@ -30,8 +31,8 @@ import { StyledButtonKind } from "./StyledButton";
  * />
  * ```
  */
-const ActionButton = ({ kind = "none", width = "auto", height = "auto", padding = "12px 20px", margin = "0", text = "", icon, disabled = false, onClick, background = "transparent", backgroundHover, color, colorHover, borderRadius = "0", boxShadow = "none", variant = "body1", }) => {
-    return (_jsx(StyledButtonKind, { kind: kind, width: width, height: height, padding: padding, margin: margin, disabled: disabled, startIcon: icon, onClick: onClick, background: background, backgroundHover: backgroundHover, colorText: color, colorHover: colorHover, borderRadius: borderRadius, boxShadow: boxShadow, children: _jsx(Typography, { variant: variant, children: text }) }));
+const ActionButton = ({ kind = "none", width = "auto", height = "auto", padding = "12px 20px", margin = "0", text, icon, disabled = false, onClick, background = "transparent", backgroundHover, colorText, colorHover, borderRadius = "0", boxShadow = "none", variant = "body1", aria_label }) => {
+    return (_jsx(StyledButtonKind, { kind: kind, width: width, height: height, padding: padding, margin: margin, disabled: disabled, startIcon: icon, onClick: onClick, background: background, backgroundHover: backgroundHover, colorText: colorText, colorHover: colorHover, borderRadius: borderRadius, boxShadow: boxShadow, "aria-label": aria_label, children: _jsx(Typography, { variant: variant, children: text }) }));
 };
 ActionButton.displayName = "ActionButton";
 export default ActionButton;

package/dist/components/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","sourceRoot":"","sources":["../../src/components/ActionButton.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAsBlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,YAAY,GAAgC,CAAC,EACjD,IAAI,GAAG,MAAM,EACb,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,MAAM,EACf,OAAO,GAAG,WAAW,EACrB,MAAM,GAAG,GAAG,EACZ,IAAI,GAAG,EAAE,EACT,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,UAAU,GAAG,aAAa,EAC1B,eAAe,EACf,KAAK,EACL,UAAU,EACV,YAAY,GAAG,GAAG,EAClB,SAAS,GAAG,MAAM,EAClB,OAAO,GAAG,OAAO,GAClB,EAAE,EAAE;IACH,OAAO,CACL,KAAC,gBAAgB,IACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,KAAK,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,YAEpB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,YAAG,IAAI,GAAc,GAChC,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAC1C,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ActionButton.js","sourceRoot":"","sources":["../../src/components/ActionButton.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAclD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,YAAY,GAAgC,CAAC,EACjD,IAAI,GAAG,MAAM,EACb,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,MAAM,EACf,OAAO,GAAG,WAAW,EACrB,MAAM,GAAG,GAAG,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,UAAU,GAAG,aAAa,EAC1B,eAAe,EACf,SAAS,EACT,UAAU,EACV,YAAY,GAAG,GAAG,EAClB,SAAS,GAAG,MAAM,EAClB,OAAO,GAAG,OAAO,EACjB,UAAU,EACX,EAAE,EAAE;IACH,OAAO,CACL,KAAC,gBAAgB,IACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,gBACR,UAAU,YAEtB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,YAAG,IAAI,GAAc,GAChC,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAC1C,eAAe,YAAY,CAAC"}

package/dist/components/FormButtonGroup.d.ts

@@ -1,14 +1,17 @@
 import React from 'react';
+import { TypographyVariant } from '@mui/material/styles';
 export interface FormButtonGroupProps {
     showDeleteButton?: boolean;
+    variant?: TypographyVariant;
     onCancel?: () => void;
     onDelete?: () => void;
 }
 /**
- * Agrupador de botões "Cancelar" e "Salvar" para uso **dentro** de formulários.
+ * Agrupador de botões "Deletar", Cancelar" e "Salvar" para uso **dentro** de formulários.
  *
  * O botão **"Salvar"** possui `type="submit"` e dispara o `onSubmit` do `<form>`.
  *
+ * @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
  * @param {boolean} [showDeleteButton="false"] Exibir botao Deletar.
  * @param {() => void} [onCancel]
  * Função disparada ao clicar em **"Cancelar"**.

package/dist/components/FormButtonGroup.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { StyledButtonKind } from './StyledButton';
+import { Typography } from '@mui/material';
 const ActionsContainerWithDelete = styled('div', {
     shouldForwardProp: (prop) => !['onCancel'].includes(prop),
 })(() => ({
@@ -16,14 +17,15 @@ const ActionsContainer = styled('div', {
     display: 'flex',
     flexDirection: 'row',
     gap: '16px',
-    justifyItems: 'flex-end',
+    justifyContent: 'flex-end',
     width: '100%',
 }));
 /**
- * Agrupador de botões "Cancelar" e "Salvar" para uso **dentro** de formulários.
+ * Agrupador de botões "Deletar", Cancelar" e "Salvar" para uso **dentro** de formulários.
  *
  * O botão **"Salvar"** possui `type="submit"` e dispara o `onSubmit` do `<form>`.
  *
+ * @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
  * @param {boolean} [showDeleteButton="false"] Exibir botao Deletar.
  * @param {() => void} [onCancel]
  * Função disparada ao clicar em **"Cancelar"**.
@@ -63,12 +65,12 @@ const ActionsContainer = styled('div', {
  * };
  * ```
  */
-const FormButtonGroup = ({ showDeleteButton = false, onCancel = () => { }, onDelete = () => { }, }) => {
+const FormButtonGroup = ({ showDeleteButton = false, variant = "body1", onCancel = () => { }, onDelete = () => { }, }) => {
     if (showDeleteButton) {
-        return (_jsxs(ActionsContainerWithDelete, { onCancel: onCancel, children: [_jsx(StyledButtonKind, { kind: "delete", type: "button", onClick: onDelete, sx: { width: 'auto' }, children: "Deletar" }), _jsx(StyledButtonKind, { kind: "secondary", type: "button", onClick: onCancel, sx: { width: 'auto' }, children: "Cancelar" }), _jsx(StyledButtonKind, { kind: "primary", type: "submit", sx: { width: 'auto' }, children: "Salvar" })] }));
+        return (_jsxs(ActionsContainerWithDelete, { onCancel: onCancel, children: [_jsx(StyledButtonKind, { kind: "delete", type: "button", onClick: onDelete, "aria-label": "botao Deletar", sx: { width: 'auto' }, children: _jsx(Typography, { variant: variant, children: "Deletar" }) }), _jsx(StyledButtonKind, { kind: "secondary", type: "button", onClick: onCancel, "aria-label": "botao Cancelar", sx: { width: 'auto' }, children: _jsx(Typography, { variant: variant, children: "Cancelar" }) }), _jsx(StyledButtonKind, { kind: "primary", type: "submit", "aria-label": "botao Salvar", sx: { width: 'auto' }, children: _jsx(Typography, { variant: variant, children: "Salvar" }) })] }));
     }
     else {
-        return (_jsxs(ActionsContainer, { onCancel: onCancel, children: [_jsx(StyledButtonKind, { kind: "secondary", type: "button", onClick: onCancel, sx: { width: 'auto' }, children: "Cancelar" }), _jsx(StyledButtonKind, { kind: "primary", type: "submit", sx: { width: 'auto' }, children: "Salvar" })] }));
+        return (_jsxs(ActionsContainer, { onCancel: onCancel, children: [_jsx(StyledButtonKind, { kind: "secondary", type: "button", "aria-label": "botao Cancelar", onClick: onCancel, sx: { width: 'auto' }, children: _jsx(Typography, { variant: variant, children: "Cancelar" }) }), _jsx(StyledButtonKind, { kind: "primary", type: "submit", "aria-label": "botao Salvar", sx: { width: 'auto' }, children: _jsx(Typography, { variant: variant, children: "Salvar" }) })] }));
     }
 };
 FormButtonGroup.displayName = 'FormButtonGroup';

package/dist/components/FormButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormButtonGroup.js","sourceRoot":"","sources":["../../src/components/FormButtonGroup.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAQlD,MAAM,0BAA0B,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAE,CAAC,UAAU,CAAc,CAAC,QAAQ,CAAC,IAAc,CAAC;CAClF,CAAC,CAAyC,GAAG,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM;IACf,mBAAmB,EAAE,eAAe;IACpC,GAAG,EAAE,MAAM;IACX,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,MAAM;CACd,CAAC,CAAC,CAAC;AAEJ,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,EAAE;IACrC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAE,CAAC,UAAU,CAAc,CAAC,QAAQ,CAAC,IAAc,CAAC;CAClF,CAAC,CAAyC,GAAG,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,KAAK;IACpB,GAAG,EAAE,MAAM;IACX,YAAY,EAAE,UAAU;IACxB,KAAK,EAAE,MAAM;CACd,CAAC,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,eAAe,GAAmC,CAAC,EACvD,gBAAgB,GAAG,KAAK,EACxB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,GACpB,EAAE,EAAE;IAEH,IAAI,gBAAgB,EAAC,CAAC;QAEpB,OAAO,CACL,MAAC,0BAA0B,IAAC,QAAQ,EAAE,QAAQ,aAC5C,KAAC,gBAAgB,IACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,EACjB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,wBAGJ,EAGnB,KAAC,gBAAgB,IACf,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,EACjB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,yBAGJ,EAEnB,KAAC,gBAAgB,IACf,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,uBAGJ,IACQ,CAC9B,CAAC;IACJ,CAAC;SAEG,CAAC;QAEH,OAAO,CACP,MAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,aAElC,KAAC,gBAAgB,IACf,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,EACjB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,yBAGJ,EAEnB,KAAC,gBAAgB,IACf,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,uBAGJ,IACF,CAEpB,CAAC;IAGF,CAAC;AAIH,CAAC,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAChD,eAAe,eAAe,CAAC"}
+{"version":3,"file":"FormButtonGroup.js","sourceRoot":"","sources":["../../src/components/FormButtonGroup.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAqB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAS3C,MAAM,0BAA0B,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAE,CAAC,UAAU,CAAc,CAAC,QAAQ,CAAC,IAAc,CAAC;CAClF,CAAC,CAAyC,GAAG,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM;IACf,mBAAmB,EAAE,eAAe;IACpC,GAAG,EAAE,MAAM;IACX,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,MAAM;CACd,CAAC,CAAC,CAAC;AAEJ,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,EAAE;IACrC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAE,CAAC,UAAU,CAAc,CAAC,QAAQ,CAAC,IAAc,CAAC;CAClF,CAAC,CAAyC,GAAG,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,KAAK;IACpB,GAAG,EAAE,MAAM;IACX,cAAc,EAAE,UAAU;IAC1B,KAAK,EAAE,MAAM;CACd,CAAC,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,eAAe,GAAmC,CAAC,EACvD,gBAAgB,GAAG,KAAK,EACxB,OAAO,GAAG,OAAO,EACjB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,GACpB,EAAE,EAAE;IAEH,IAAI,gBAAgB,EAAC,CAAC;QAEpB,OAAO,CACL,MAAC,0BAA0B,IAAC,QAAQ,EAAE,QAAQ,aAE5C,KAAC,gBAAgB,IACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,gBACN,eAAe,EAC1B,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAErB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,wBAAsB,GACjC,EAEnB,KAAC,gBAAgB,IACf,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,gBACN,gBAAgB,EAC3B,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAErB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,yBAAuB,GAClC,EAEnB,KAAC,gBAAgB,IACf,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,gBACF,cAAc,EACzB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAErB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,uBAAqB,GAChC,IAEQ,CAC9B,CAAC;IACJ,CAAC;SAEG,CAAC;QAEH,OAAO,CACL,MAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,aAClC,KAAC,gBAAgB,IACf,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,QAAQ,gBACF,gBAAgB,EAC3B,OAAO,EAAE,QAAQ,EACjB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAErB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,yBAAuB,GAClC,EAEnB,KAAC,gBAAgB,IACf,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,gBACF,cAAc,EACzB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAErB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,uBAAqB,GAChC,IACF,CACpB,CAAC;IACJ,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAChD,eAAe,eAAe,CAAC"}

package/dist/components/NavigationButton.d.ts

@@ -1,5 +1,14 @@
 import React from 'react';
+import { TypographyVariant } from '@mui/material/styles';
 import { ButtonKind } from '../types/ButtonKind';
+import { CommonStyleProps } from '@/types/style/CommonStyleProps';
+interface NavigationButtonProps extends CommonStyleProps {
+    kind?: ButtonKind;
+    variant?: TypographyVariant;
+    text: string;
+    aria_label: string;
+    url: string;
+}
 /**
  * Botão de navegação reutilizável baseado em um link (`<a>`), estilizado com Material UI.
  *
@@ -10,9 +19,9 @@ import { ButtonKind } from '../types/ButtonKind';
  * @param {ButtonKind} [kind="none"] Tipo de botão baseado nos tokens do tema.
  * @param {string} url URL ou âncora de destino.
  * @param {string} aria_label Texto para acessibilidade.
- * @param {string} [backgroundColor] Cor de fundo do botão.
- * @param {string} [backgroundColorHover] Cor de fundo no hover.
- * @param {string} [color] Cor do texto.
+ * @param {string} [background] Cor de fundo do botão.
+ * @param {string} [backgroundHover] Cor de fundo no hover.
+ * @param {string} [colorText] Cor do texto.
  * @param {string} [colorHover] Cor do texto no hover.
  * @param {string} [border="none"] Borda do botão.
  * @param {string} [borderRadius="0"] Raio da borda.
@@ -20,7 +29,8 @@ import { ButtonKind } from '../types/ButtonKind';
  * @param {string} width Largura do botão.
  * @param {string} [margin="0"] Margem externa.
  * @param {string} [padding="8px 24px"] Espaçamento interno.
- * @param {React.ReactNode} children Conteúdo interno do botão.
+ * @param {string} [text] Texto do botão.
+ * @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
  *
  * @example
  * ```tsx
@@ -34,21 +44,5 @@ import { ButtonKind } from '../types/ButtonKind';
  * </NavigationButton>
  * ```
  */
-interface NavigationButtonProps {
-    kind?: ButtonKind;
-    url: string;
-    aria_label: string;
-    backgroundColor?: string;
-    backgroundColorHover?: string;
-    color?: string;
-    colorHover?: string;
-    border?: string;
-    borderRadius?: string;
-    boxShadow?: string;
-    width: string;
-    margin?: string;
-    padding?: string;
-    children: React.ReactNode;
-}
 declare const NavigationButton: React.FC<NavigationButtonProps>;
 export default NavigationButton;

package/dist/components/NavigationButton.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { COMMON_STYLE_FORWARD_PROPS } from '../types/CommonForwardProps';
+import { Typography } from '@mui/material';
 const ButtonStyled = styled('a', {
     shouldForwardProp: (prop) => !['kind', ...COMMON_STYLE_FORWARD_PROPS].includes(prop),
 })(({ theme, kind, background, backgroundHover, colorText, colorHover, padding, borderRadius, border, width, margin, boxShadow, }) => {
@@ -33,11 +34,46 @@ const ButtonStyled = styled('a', {
         },
     };
 });
-const NavigationButton = ({ url, kind = 'none', aria_label, backgroundColor, backgroundColorHover, color, colorHover, borderRadius = '0', border = 'none', boxShadow = 'none', width, margin = '0', padding = '8px 24px', children, }) => {
+/**
+ * Botão de navegação reutilizável baseado em um link (`<a>`), estilizado com Material UI.
+ *
+ * Regras de navegação:
+ * - Se `url` contiver `http`, o link é tratado como externo e abre em nova aba.
+ * - Caso contrário, é tratado como link interno ou âncora.
+ *
+ * @param {ButtonKind} [kind="none"] Tipo de botão baseado nos tokens do tema.
+ * @param {string} url URL ou âncora de destino.
+ * @param {string} aria_label Texto para acessibilidade.
+ * @param {string} [background] Cor de fundo do botão.
+ * @param {string} [backgroundHover] Cor de fundo no hover.
+ * @param {string} [colorText] Cor do texto.
+ * @param {string} [colorHover] Cor do texto no hover.
+ * @param {string} [border="none"] Borda do botão.
+ * @param {string} [borderRadius="0"] Raio da borda.
+ * @param {string} [boxShadow="none"] Sombra do botão.
+ * @param {string} width Largura do botão.
+ * @param {string} [margin="0"] Margem externa.
+ * @param {string} [padding="8px 24px"] Espaçamento interno.
+ * @param {string} [text] Texto do botão.
+ * @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
+ *
+ * @example
+ * ```tsx
+ * <NavigationButton
+ *   kind="primary"
+ *   url="#contato"
+ *   aria_label="Ir para contato"
+ *   width="fit-content"
+ * >
+ *   Fale conosco
+ * </NavigationButton>
+ * ```
+ */
+const NavigationButton = ({ url, text, kind = 'none', aria_label, background, backgroundHover, colorText, colorHover, borderRadius = '0', border = 'none', boxShadow = 'none', width, margin = '0', padding = '8px 24px', variant = "body1", }) => {
     if (url.includes('http')) {
-        return (_jsx(ButtonStyled, { kind: kind, href: url, width: width, background: backgroundColor, backgroundHover: backgroundColorHover, color: color, colorHover: colorHover, borderRadius: borderRadius, border: border, padding: padding, margin: margin, "aria-label": aria_label, target: "_blank", rel: "noopener noreferrer", boxShadow: boxShadow, children: children }));
+        return (_jsx(ButtonStyled, { kind: kind, href: url, width: width, background: background, backgroundHover: backgroundHover, colorText: colorText, colorHover: colorHover, borderRadius: borderRadius, border: border, padding: padding, margin: margin, "aria-label": aria_label, target: "_blank", rel: "noopener noreferrer", boxShadow: boxShadow, children: _jsx(Typography, { variant: variant, children: text }) }));
     }
-    return (_jsx(ButtonStyled, { kind: kind, href: url, width: width, background: backgroundColor, backgroundHover: backgroundColorHover, color: color, colorHover: colorHover, borderRadius: borderRadius, border: border, padding: padding, margin: margin, "aria-label": aria_label, boxShadow: boxShadow, children: children }));
+    return (_jsx(ButtonStyled, { kind: kind, href: url, width: width, background: background, backgroundHover: backgroundHover, colorText: colorText, colorHover: colorHover, borderRadius: borderRadius, border: border, padding: padding, margin: margin, "aria-label": aria_label, boxShadow: boxShadow, children: _jsx(Typography, { variant: variant, children: text }) }));
 };
 NavigationButton.displayName = 'NavigationButton';
 export default NavigationButton;

package/dist/components/NavigationButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationButton.js","sourceRoot":"","sources":["../../src/components/NavigationButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NavigationButton.js","sourceRoot":"","sources":["../../src/components/NavigationButton.tsx"],"names":[],"mappings":"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"}

package/dist/components/NavigationLink.d.ts

@@ -1,16 +1,73 @@
 import React from 'react';
-interface NavigationLinkProps {
+import { TypographyVariant } from '@mui/material/styles';
+import { LayoutProps } from '@/types/style/LayoutProps';
+import { ColorProps } from '@/types/style/ColorProps';
+export interface LinkStyleProps extends LayoutProps, ColorProps {
+    textDecoration: 'none' | 'underline';
+}
+interface NavigationLinkProps extends LinkStyleProps {
     url: string;
     aria_label: string;
-    background_color?: string;
-    background_color_hover?: string;
-    color: string;
-    color_hover?: string;
     text_decoration: 'none' | 'underline';
-    width: string;
-    margin?: string;
-    padding?: string;
-    children: React.ReactNode;
+    text: string;
+    variant?: TypographyVariant;
 }
+/**
+ * Componente que renderiza um link de navegação estilizado usando `styled` do Material UI.
+ * Ele aplica estilos customizáveis (layout e cores) e encapsula o texto com `Typography`.
+ *
+ * Quando a `url` contém `"http"`, o link é tratado como **externo** e abre em uma nova aba
+ * com `target="_blank"` e `rel="noopener noreferrer"`. Caso contrário, o link é tratado como **interno**
+ * e abre na mesma aba.
+ *
+ * @param {string} url URL de destino do link. Se contiver "http", será considerado link externo.
+ * @param {string} aria_label Rótulo de acessibilidade aplicado em `aria-label` no elemento `<a>`.
+ * @param {string} [background_color='transparent'] Cor de fundo do link.
+ * @param {string} [background_color_hover] Cor de fundo no hover. Se não for informada, usa `background_color`.
+ * @param {string} color Cor do texto do link.
+ * @param {string} [color_hover] Cor do texto no hover. Se não for informada, usa `color`.
+ * @param {'none' | 'underline'} [text_decoration='none'] Estilo de decoração do texto (`text-decoration`) do link.
+ * @param {string} width Largura do link (ex.: `'100%'`, `'auto'`, `'200px'`).
+ * @param {string} [margin='0'] Margem externa do link.
+ * @param {string} [padding='0'] Espaçamento interno do link.
+ * @param {string} text Texto exibido dentro do link.
+ * @param {TypographyVariant} [variant='body1'] Variante do `Typography` do Material UI utilizada para renderizar o texto.
+ *
+ * @example
+ * ```tsx
+ * import { NavigationLink } from '@/components/NavigationLink';
+ *
+ * export const Example = () => {
+ *   return (
+ *     <>
+ *       <NavigationLink
+ *         url="/about"
+ *         aria_label="Ir para a página Sobre"
+ *         color="#222"
+ *         text="Sobre"
+ *         width="auto"
+ *         padding="8px 12px"
+ *         text_decoration="none"
+ *         variant="body2"
+ *       />
+ *
+ *       <NavigationLink
+ *         url="https://example.com"
+ *         aria_label="Abrir site externo"
+ *         color="#1976d2"
+ *         color_hover="#0d47a1"
+ *         background_color="transparent"
+ *         background_color_hover="transparent"
+ *         text="Site externo"
+ *         width="auto"
+ *         margin="0 0 0 12px"
+ *         padding="8px 12px"
+ *         text_decoration="underline"
+ *       />
+ *     </>
+ *   );
+ * };
+ * ```
+ */
 declare const NavigationLink: React.FC<NavigationLinkProps>;
 export default NavigationLink;

package/dist/components/NavigationLink.js

@@ -1,42 +1,100 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
+import { Typography } from '@mui/material';
 const ButtonStyled = styled('a', {
     shouldForwardProp: (prop) => ![
-        'background_color',
-        'background_color_hover',
-        'color',
-        'color_hover',
-        'padding',
-        'color_hover',
-        'width',
-        'margin',
+        "width",
+        "height",
+        "padding",
+        "margin",
+        "background",
+        "backgroundHover",
+        "colorText",
+        "colorHover",
     ].includes(prop),
-})(({ background_color, background_color_hover, color, color_hover, padding, width, margin, }) => ({
+})(({ background, backgroundHover, colorText, colorHover, padding, width, margin, textDecoration }) => ({
     width: width,
     cursor: 'pointer',
-    textDecoration: 'none',
+    textDecoration: textDecoration,
     textTransform: 'none',
     textAlign: 'center',
-    backgroundColor: background_color,
-    color: color,
+    backgroundColor: background,
+    color: colorText,
     padding: padding,
     margin: margin,
     '&:hover': {
-        backgroundColor: background_color_hover,
-        borderBottom: `1px solid ${color_hover}`,
-        color: color_hover,
+        backgroundColor: backgroundHover,
+        borderBottom: `1px solid ${colorHover}`,
+        color: colorHover,
     },
 }));
-const NavigationLink = ({ url, aria_label, background_color = 'transparent', background_color_hover, color, color_hover, text_decoration = 'none', width, margin = '0', padding = '0', children }) => {
-    const backgroundColor = background_color;
-    const backgroundColorHover = background_color_hover !== null && background_color_hover !== void 0 ? background_color_hover : backgroundColor;
-    const colorHover = color_hover !== null && color_hover !== void 0 ? color_hover : color;
+/**
+ * Componente que renderiza um link de navegação estilizado usando `styled` do Material UI.
+ * Ele aplica estilos customizáveis (layout e cores) e encapsula o texto com `Typography`.
+ *
+ * Quando a `url` contém `"http"`, o link é tratado como **externo** e abre em uma nova aba
+ * com `target="_blank"` e `rel="noopener noreferrer"`. Caso contrário, o link é tratado como **interno**
+ * e abre na mesma aba.
+ *
+ * @param {string} url URL de destino do link. Se contiver "http", será considerado link externo.
+ * @param {string} aria_label Rótulo de acessibilidade aplicado em `aria-label` no elemento `<a>`.
+ * @param {string} [background_color='transparent'] Cor de fundo do link.
+ * @param {string} [background_color_hover] Cor de fundo no hover. Se não for informada, usa `background_color`.
+ * @param {string} color Cor do texto do link.
+ * @param {string} [color_hover] Cor do texto no hover. Se não for informada, usa `color`.
+ * @param {'none' | 'underline'} [text_decoration='none'] Estilo de decoração do texto (`text-decoration`) do link.
+ * @param {string} width Largura do link (ex.: `'100%'`, `'auto'`, `'200px'`).
+ * @param {string} [margin='0'] Margem externa do link.
+ * @param {string} [padding='0'] Espaçamento interno do link.
+ * @param {string} text Texto exibido dentro do link.
+ * @param {TypographyVariant} [variant='body1'] Variante do `Typography` do Material UI utilizada para renderizar o texto.
+ *
+ * @example
+ * ```tsx
+ * import { NavigationLink } from '@/components/NavigationLink';
+ *
+ * export const Example = () => {
+ *   return (
+ *     <>
+ *       <NavigationLink
+ *         url="/about"
+ *         aria_label="Ir para a página Sobre"
+ *         color="#222"
+ *         text="Sobre"
+ *         width="auto"
+ *         padding="8px 12px"
+ *         text_decoration="none"
+ *         variant="body2"
+ *       />
+ *
+ *       <NavigationLink
+ *         url="https://example.com"
+ *         aria_label="Abrir site externo"
+ *         color="#1976d2"
+ *         color_hover="#0d47a1"
+ *         background_color="transparent"
+ *         background_color_hover="transparent"
+ *         text="Site externo"
+ *         width="auto"
+ *         margin="0 0 0 12px"
+ *         padding="8px 12px"
+ *         text_decoration="underline"
+ *       />
+ *     </>
+ *   );
+ * };
+ * ```
+ */
+const NavigationLink = ({ url, aria_label, background = 'transparent', backgroundHover, colorText, colorHover, text_decoration = 'none', width, margin = '0', padding = '0', text, variant = "body1", }) => {
+    const backgroundColor = background;
+    const backgroundColorHover = backgroundHover !== null && backgroundHover !== void 0 ? backgroundHover : backgroundColor;
+    const color_hover = colorHover ? colorHover : (colorText !== null && colorText !== void 0 ? colorText : 'black');
     if (url.indexOf('http') != -1) {
-        return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, padding: padding, margin: margin, "aria-label": aria_label, target: "_blank", rel: "noopener noreferrer", children: children }));
+        return (_jsx(ButtonStyled, { href: url, width: width, background: backgroundColor, backgroundHover: backgroundColorHover, colorText: colorText, colorHover: color_hover, padding: padding, margin: margin, textDecoration: text_decoration, "aria-label": aria_label, target: "_blank", rel: "noopener noreferrer", children: _jsx(Typography, { variant: variant, children: text }) }));
     }
     else {
-        return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, padding: padding, margin: margin, "aria-label": aria_label, children: children }));
+        return (_jsx(ButtonStyled, { href: url, width: width, background: backgroundColor, backgroundHover: backgroundColorHover, colorText: colorText, colorHover: color_hover, padding: padding, margin: margin, "aria-label": aria_label, textDecoration: text_decoration, children: _jsx(Typography, { variant: variant, children: text }) }));
     }
 };
 export default NavigationLink;

package/dist/components/NavigationLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationLink.js","sourceRoot":"","sources":["../../src/components/NavigationLink.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,EAAE;IAC/B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC;QACC,kBAAkB;QAClB,wBAAwB;QACxB,OAAO;QACP,aAAa;QACb,SAAS;QACT,aAAa;QACb,OAAO;QACP,QAAQ;KACT,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC7B,CAAC,CAQC,CAAC,EACF,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,MAAM,GACP,EAAE,EAAE,CAAC,CAAC;IACL,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,SAAS;IACjB,cAAc,EAAE,MAAM;IACtB,aAAa,EAAE,MAAM;IACrB,SAAS,EAAE,QAAQ;IACnB,eAAe,EAAE,gBAAgB;IACjC,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,OAAO;IAChB,MAAM,EAAE,MAAM;IAEd,SAAS,EAAE;QACT,eAAe,EAAE,sBAAsB;QACvC,YAAY,EAAE,aAAa,WAAW,EAAE;QACxC,KAAK,EAAE,WAAW;KACnB;CACF,CAAC,CAAC,CAAC;AAgBJ,MAAM,cAAc,GAAkC,CAAC,EACrD,GAAG,EAAE,UAAU,EAAE,gBAAgB,GAAC,aAAa,EAAE,sBAAsB,EACvE,KAAK,EAAE,WAAW,EAAE,eAAe,GAAG,MAAM,EAC5C,KAAK,EAAE,MAAM,GAAC,GAAG,EAAE,OAAO,GAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE;IAE5C,MAAM,eAAe,GAAY,gBAAgB,CAAC;IAClD,MAAM,oBAAoB,GAAY,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,eAAe,CAAC;IAChF,MAAM,UAAU,GAAY,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,KAAK,CAAC;IAEjD,IAAI,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;QAE9B,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,eAAe,EACjC,sBAAsB,EAAE,oBAAoB,EAC5C,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,gBACD,UAAU,EACvB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,YACxB,QAAQ,GACI,CAChB,CAAC;IACJ,CAAC;SACG,CAAC;QAEH,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,eAAe,EACjC,sBAAsB,EAAE,oBAAoB,EAC5C,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,gBACD,UAAU,YAEtB,QAAQ,GACI,CAChB,CAAC;IACJ,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"NavigationLink.js","sourceRoot":"","sources":["../../src/components/NavigationLink.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,MAAM,EAAqB,MAAM,sBAAsB,CAAC;AAGjE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAQ3C,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,EAAE;IAC/B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC;QACC,OAAO;QACP,QAAQ;QACR,SAAS;QACT,QAAQ;QACR,YAAY;QACZ,iBAAiB;QACjB,WAAW;QACX,YAAY;KACb,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC7B,CAAC,CAAiB,CAAC,EAClB,UAAU,EACV,eAAe,EACf,SAAS,EACT,UAAU,EACV,OAAO,EACP,KAAK,EACL,MAAM,EACN,cAAc,EACf,EAAE,EAAE,CAAC,CAAC;IACL,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,SAAS;IACjB,cAAc,EAAE,cAAc;IAC9B,aAAa,EAAE,MAAM;IACrB,SAAS,EAAE,QAAQ;IACnB,eAAe,EAAE,UAAU;IAC3B,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,OAAO;IAChB,MAAM,EAAE,MAAM;IAEd,SAAS,EAAE;QACT,eAAe,EAAE,eAAe;QAChC,YAAY,EAAE,aAAa,UAAU,EAAE;QACvC,KAAK,EAAE,UAAU;KAClB;CACF,CAAC,CAAC,CAAC;AAUJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AAEH,MAAM,cAAc,GAAkC,CAAC,EACrD,GAAG,EAAE,UAAU,EAAE,UAAU,GAAC,aAAa,EAAE,eAAe,EAC1D,SAAS,EAAE,UAAU,EAAE,eAAe,GAAG,MAAM,EAC/C,KAAK,EAAE,MAAM,GAAC,GAAG,EAAE,OAAO,GAAC,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO,GAAK,EAAE,EAAE;IAE9D,MAAM,eAAe,GAAY,UAAU,CAAC;IAC5C,MAAM,oBAAoB,GAAY,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,eAAe,CAAC;IACzE,MAAM,WAAW,GAAY,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,OAAO,CAAC,CAAC;IAE9E,IAAI,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;QAE9B,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,eAAe,EAC3B,eAAe,EAAE,oBAAoB,EACrC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,WAAW,EACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,eAAe,gBAClB,UAAU,EACvB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,YACzB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,YAAG,IAAI,GAAc,GACpC,CAChB,CAAC;IACJ,CAAC;SACG,CAAC;QAEH,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,eAAe,EAC3B,eAAe,EAAE,oBAAoB,EACrC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,WAAW,EACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,gBACD,UAAU,EACvB,cAAc,EAAE,eAAe,YAE/B,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,YAAG,IAAI,GAAc,GACpC,CAChB,CAAC;IACJ,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/index.d.ts

@@ -8,6 +8,9 @@ export { default as WhatsAppIcon } from './components/WhatsAppIcon';
 export { default as ActionButton } from "./components/ActionButton";
 export { default as FormButtonGroup } from "./components/FormButtonGroup";
 export type { ButtonKind } from "./types/ButtonKind";
+export type { BorderProps } from "./types/style/BorderProps";
+export type { ColorProps } from "./types/style/ColorProps";
+export type { LayoutProps } from "./types/style/LayoutProps";
 export type { CommonStyleProps } from "./types/style/CommonStyleProps";
 export { COMMON_STYLE_FORWARD_PROPS } from './types/CommonForwardProps';
 export * from './components/StyledButton';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAC,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAC,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAI1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AACxE,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAC,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAC,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAO1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AACxE,cAAc,2BAA2B,CAAC"}