norma-library 0.6.3 → 0.6.5

package/docs/index.md

@@ -1,118 +1,118 @@
-## Passos Básicos
-
-### 1. Instalando o pacote em seu projeto
-
-Para instalar o pacote Norma em seu projeto execute o comando em seu terminal:
-
-### `npm install norma-library`
-
-## Components disponível e como usa-lo
-
-### Button
-
-`import { Button } from "norma-library`;
-
-`<Button label="Clique-me" onClick={handleButtonClick} />`;
-
-#### Props
-
-O componente `Button` aceita as seguintes propriedades:
-
-- `label` (string, obrigatório): O texto exibido no botão.
-- `sx` (SxProps<Theme>): Estilos personalizados usando o sistema de estilos do Material-UI.
-- `color` (string): A cor do botão (inherit, primary, secondary, success, error, info, warning).
-- `size` (string): O tamanho do botão (small, medium, large).
-- `variant` (string): A variante do botão (text, outlined, contained).
-- `style` (React.CSSProperties): Estilos CSS adicionais.
-- `children` (ReactNode): Conteúdo adicional a ser exibido dentro do botão.
-- `onClick` (função): Uma função de callback para ser executada quando o botão for clicado.
-
-### Card
-
-`import { Card } from "norma-library`;
-
-`<Card title="Titulo do cartão" />conteúdo do card</card>`;
-
-#### Props
-
-O componente `Card` aceita as seguintes propriedades:
-
-- `title` (string, opcional): O título exibido no cabeçalho do card, se fornecido.
-- `children` (ReactNode, obrigatório): O conteúdo do card, que pode incluir qualquer componente ou conteúdo.
-
-### Modal
-
-`import { Modal} from "norma-library`;
-
-`<Modal open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" onConfirm={handleConfirm}
-title="Titulo do modal">conteúdo do modal</modal>`;
-
-#### Props
-
-O componente `Modal` aceita as seguintes propriedades:
-
-- `sx` (SxProps<Theme>): Estilos personalizados usando o sistema de estilos do Material-UI.
-- `children` (React.ReactElement | React.ReactElement[]): Elementos filhos do modal.
-- `open` (boolean): Indica se o modal está aberto.
-- `onClose` (função): Função de callback chamada quando o modal é fechado.
-- `className` (string): Classe CSS adicional para estilização.
-- `title` (string): Título do modal.
-- `full` (boolean): Indica se o modal deve ocupar toda a largura.
-- `onConfirm` (função): Função de callback chamada quando o botão "Confirmar" é clicado.
-
-### TextField
-
-`import { TextField } from "norma-library`;
-
-`<TextField id="outlined-basic" label="Outlined" variant="outlined" />`;
-
-#### Props
-
-O componente `TextField` aceita as seguintes propriedades:
-
-- `label` (ReactNode): Rótulo exibido acima do campo de entrada.
-- `variant` (string): A variante do campo (standard, outlined, filled).
-- `value` (TextFieldValue): O valor do campo de entrada.
-- `onChange` (função): Função de callback chamada quando o valor do campo muda.
-- `disabled` (boolean): Indica se o campo de entrada está desabilitado.
-- `required` (boolean): Indica se o campo de entrada é obrigatório.
-- `hasError` (boolean): Indica se o campo de entrada possui erro.
-- E outras propriedades relacionadas a estilos, tamanho, id, etc.
-
-### CheckBox
-
-`import { CheckBox } from "norma-library`;
-
-`<CheckBox id="checkbox-basic" label="Checkbox" checked={checked} onChange={handleCheckboxChange} />`;
-
-#### Props
-
-O componente `CheckBox` aceita as seguintes propriedades:
-
-- `label` (ReactNode): Rótulo exibido acima do campo de entrada.
-- `checked ` (boolean): Indica se a caixa de seleção está marcada.
-- `onChange` (função): Função de callback chamada quando o valor do campo muda.
-- `disabled` (boolean): Indica se o campo de entrada está desabilitado.
-- `color ` (string): A cor da caixa de seleção (primary, secondary, error, info, success, warning, default).
-- `size ` (string): O tamanho da caixa de seleção (small, medium).
-- `value` (TextFieldValue): O valor do campo de entrada.
-- E outras propriedades relacionadas a estilos, required, id, etc.
-
-### ProgressBar
-
-`import { ProgressBar } from "norma-library`;
-
-`<ProgressBar id="checkbox-basic" label="Checkbox" checked={checked} onChange={handleCheckboxChange} />`;
-
-#### Props
-
-O componente `ProgressBar` aceita as seguintes propriedades:
-
-- `sx` (SxProps<Theme>): Propriedade de estilo do Material-UI para estilizar o componente.
-- `usage` (number): O valor de uso para calcular a porcentagem da barra de progresso.
-- `value` (number): O valor da barra de progresso.
-- `total` (number): O valor total usado para calcular a porcentagem.
-- `label` (string): Texto do rótulo exibido acima da barra de progresso.
-- `colorCustom` (string): Cor personalizada para a barra de progresso.
-- `variant` ('determinate' | 'indeterminate' | 'buffer' | 'query'): O estilo da barra de progresso.
-- `color` (string): Cor da barra de progresso (primary, secondary, error, info, success, warning, inherit).
+## Passos Básicos
+
+### 1. Instalando o pacote em seu projeto
+
+Para instalar o pacote Norma em seu projeto execute o comando em seu terminal:
+
+### `npm install norma-library`
+
+## Components disponível e como usa-lo
+
+### Button
+
+`import { Button } from "norma-library`;
+
+`<Button label="Clique-me" onClick={handleButtonClick} />`;
+
+#### Props
+
+O componente `Button` aceita as seguintes propriedades:
+
+- `label` (string, obrigatório): O texto exibido no botão.
+- `sx` (SxProps<Theme>): Estilos personalizados usando o sistema de estilos do Material-UI.
+- `color` (string): A cor do botão (inherit, primary, secondary, success, error, info, warning).
+- `size` (string): O tamanho do botão (small, medium, large).
+- `variant` (string): A variante do botão (text, outlined, contained).
+- `style` (React.CSSProperties): Estilos CSS adicionais.
+- `children` (ReactNode): Conteúdo adicional a ser exibido dentro do botão.
+- `onClick` (função): Uma função de callback para ser executada quando o botão for clicado.
+
+### Card
+
+`import { Card } from "norma-library`;
+
+`<Card title="Titulo do cartão" />conteúdo do card</card>`;
+
+#### Props
+
+O componente `Card` aceita as seguintes propriedades:
+
+- `title` (string, opcional): O título exibido no cabeçalho do card, se fornecido.
+- `children` (ReactNode, obrigatório): O conteúdo do card, que pode incluir qualquer componente ou conteúdo.
+
+### Modal
+
+`import { Modal} from "norma-library`;
+
+`<Modal open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" onConfirm={handleConfirm}
+title="Titulo do modal">conteúdo do modal</modal>`;
+
+#### Props
+
+O componente `Modal` aceita as seguintes propriedades:
+
+- `sx` (SxProps<Theme>): Estilos personalizados usando o sistema de estilos do Material-UI.
+- `children` (React.ReactElement | React.ReactElement[]): Elementos filhos do modal.
+- `open` (boolean): Indica se o modal está aberto.
+- `onClose` (função): Função de callback chamada quando o modal é fechado.
+- `className` (string): Classe CSS adicional para estilização.
+- `title` (string): Título do modal.
+- `full` (boolean): Indica se o modal deve ocupar toda a largura.
+- `onConfirm` (função): Função de callback chamada quando o botão "Confirmar" é clicado.
+
+### TextField
+
+`import { TextField } from "norma-library`;
+
+`<TextField id="outlined-basic" label="Outlined" variant="outlined" />`;
+
+#### Props
+
+O componente `TextField` aceita as seguintes propriedades:
+
+- `label` (ReactNode): Rótulo exibido acima do campo de entrada.
+- `variant` (string): A variante do campo (standard, outlined, filled).
+- `value` (TextFieldValue): O valor do campo de entrada.
+- `onChange` (função): Função de callback chamada quando o valor do campo muda.
+- `disabled` (boolean): Indica se o campo de entrada está desabilitado.
+- `required` (boolean): Indica se o campo de entrada é obrigatório.
+- `hasError` (boolean): Indica se o campo de entrada possui erro.
+- E outras propriedades relacionadas a estilos, tamanho, id, etc.
+
+### CheckBox
+
+`import { CheckBox } from "norma-library`;
+
+`<CheckBox id="checkbox-basic" label="Checkbox" checked={checked} onChange={handleCheckboxChange} />`;
+
+#### Props
+
+O componente `CheckBox` aceita as seguintes propriedades:
+
+- `label` (ReactNode): Rótulo exibido acima do campo de entrada.
+- `checked ` (boolean): Indica se a caixa de seleção está marcada.
+- `onChange` (função): Função de callback chamada quando o valor do campo muda.
+- `disabled` (boolean): Indica se o campo de entrada está desabilitado.
+- `color ` (string): A cor da caixa de seleção (primary, secondary, error, info, success, warning, default).
+- `size ` (string): O tamanho da caixa de seleção (small, medium).
+- `value` (TextFieldValue): O valor do campo de entrada.
+- E outras propriedades relacionadas a estilos, required, id, etc.
+
+### ProgressBar
+
+`import { ProgressBar } from "norma-library`;
+
+`<ProgressBar id="checkbox-basic" label="Checkbox" checked={checked} onChange={handleCheckboxChange} />`;
+
+#### Props
+
+O componente `ProgressBar` aceita as seguintes propriedades:
+
+- `sx` (SxProps<Theme>): Propriedade de estilo do Material-UI para estilizar o componente.
+- `usage` (number): O valor de uso para calcular a porcentagem da barra de progresso.
+- `value` (number): O valor da barra de progresso.
+- `total` (number): O valor total usado para calcular a porcentagem.
+- `label` (string): Texto do rótulo exibido acima da barra de progresso.
+- `colorCustom` (string): Cor personalizada para a barra de progresso.
+- `variant` ('determinate' | 'indeterminate' | 'buffer' | 'query'): O estilo da barra de progresso.
+- `color` (string): Cor da barra de progresso (primary, secondary, error, info, success, warning, inherit).

package/package.json

@@ -1,136 +1,136 @@
-{
-  "name": "norma-library",
-  "version": "0.6.003",
-  "private": false,
-  "description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
-  "scripts": {
-    "build": "tsc",
-    "start": "yarn storybook",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "start-docz": "docz dev --typescript --port=4000",
-    "build-docz": "docz build",
-    "serve-docz": "docz build && docz serve",
-    "clean-docz": "npx rimraf .docz && npx rimraf build/docz",
-    "prettier": "npx prettier \"./**/*.{js,json,ts,tsx}\" --write",
-    "tar": "tar -cvf norma-library.tar ./storybook-static"
-  },
-  "author": "José Roberto Miguel Filho",
-  "module": "dist/esm/index.js",
-  "main": "dist/esm/index.js",
-  "license": "BSD-3-Clause",
-  "keywords": [
-    "react",
-    "design-system",
-    "material-ui",
-    "mui",
-    "typescripts",
-    "styled-components"
-  ],
-  "devDependencies": {
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
-    "@emotion/core": "^11.0.0",
-    "@emotion/styled-base": "^11.0.0",
-    "@mdx-js/loader": "^2.3.0",
-    "@storybook/addon-essentials": "^7.5.0",
-    "@storybook/addon-interactions": "^7.5.0",
-    "@storybook/addon-links": "^7.5.0",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^7.5.0",
-    "@storybook/react": "^7.5.0",
-    "@storybook/react-vite": "^7.5.0",
-    "@storybook/react-webpack5": "^7.5.0-alpha.1",
-    "@storybook/testing-library": "^0.2.2",
-    "@types/react": "^18.2.15",
-    "@types/react-datepicker": "^4.19.1",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "autoprefixer": "^10.4.15",
-    "camelcase": "^8.0.0",
-    "chalk": "^5.3.0",
-    "commitizen": "^4.3.0",
-    "copy-to-clipboard": "^3.3.3",
-    "cz-conventional-changelog": "^3.3.0",
-    "dotenv": "^16.3.1",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.6.15",
-    "git-cz": "^4.9.0",
-    "lint-staged": "^14.0.1",
-    "path": "^0.12.7",
-    "postcss": "^8.4.29",
-    "postcss-prettify": "^0.3.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rimraf": "^5.0.5",
-    "storybook": "^7.5.0",
-    "storybook-dark-mode": "^3.0.1",
-    "style-loader": "^3.3.3",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
-  },
-  "lint-staged": {
-    "*.{md,mdx}": [
-      "yarn prettier",
-      "yarn eslint",
-      "git add"
-    ],
-    "*.{js,json,ts,tsx}": [
-      "yarn prettier",
-      "yarn eslint",
-      "git add"
-    ]
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.9",
-    "@mui/lab": "^5.0.0-alpha.152",
-    "@mui/material": "^5.16.7",
-    "@mui/x-date-pickers": "^6.20.2",
-    "@storybook/addon-mdx-gfm": "^7.5.2",
-    "@tanstack/react-table": "^8.10.7",
-    "dayjs": "^1.11.9",
-    "react-datepicker": "^4.21.0",
-    "react-i18next": "^13.2.2",
-    "react-select": "^5.8.0",
-    "styled-components": "^6.1.0",
-    "tslib": "^2.6.2"
-  },
-  "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/OlosLive/norma-library"
-  },
-  "bugs": {
-    "url": "https://github.com/OlosLive/norma-library/issues"
-  },
-  "homepage": "https://github.com/OlosLive/norma-library",
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  }
-}
+{
+  "name": "norma-library",
+  "version": "0.6.005",
+  "private": false,
+  "description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
+  "scripts": {
+    "build": "tsc",
+    "start": "yarn storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "start-docz": "docz dev --typescript --port=4000",
+    "build-docz": "docz build",
+    "serve-docz": "docz build && docz serve",
+    "clean-docz": "npx rimraf .docz && npx rimraf build/docz",
+    "prettier": "npx prettier \"./**/*.{js,json,ts,tsx}\" --write",
+    "tar": "tar -cvf norma-library.tar ./storybook-static"
+  },
+  "author": "José Roberto Miguel Filho",
+  "module": "dist/esm/index.js",
+  "main": "dist/esm/index.js",
+  "license": "BSD-3-Clause",
+  "keywords": [
+    "react",
+    "design-system",
+    "material-ui",
+    "mui",
+    "typescripts",
+    "styled-components"
+  ],
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
+    "@emotion/core": "^11.0.0",
+    "@emotion/styled-base": "^11.0.0",
+    "@mdx-js/loader": "^2.3.0",
+    "@storybook/addon-essentials": "^7.5.0",
+    "@storybook/addon-interactions": "^7.5.0",
+    "@storybook/addon-links": "^7.5.0",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "^7.5.0",
+    "@storybook/react": "^7.5.0",
+    "@storybook/react-vite": "^7.5.0",
+    "@storybook/react-webpack5": "^7.5.0-alpha.1",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.2.15",
+    "@types/react-datepicker": "^4.19.1",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.15",
+    "camelcase": "^8.0.0",
+    "chalk": "^5.3.0",
+    "commitizen": "^4.3.0",
+    "copy-to-clipboard": "^3.3.3",
+    "cz-conventional-changelog": "^3.3.0",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-storybook": "^0.6.15",
+    "git-cz": "^4.9.0",
+    "lint-staged": "^14.0.1",
+    "path": "^0.12.7",
+    "postcss": "^8.4.29",
+    "postcss-prettify": "^0.3.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.5",
+    "storybook": "^7.5.0",
+    "storybook-dark-mode": "^3.0.1",
+    "style-loader": "^3.3.3",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  },
+  "lint-staged": {
+    "*.{md,mdx}": [
+      "yarn prettier",
+      "yarn eslint",
+      "git add"
+    ],
+    "*.{js,json,ts,tsx}": [
+      "yarn prettier",
+      "yarn eslint",
+      "git add"
+    ]
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.9",
+    "@mui/lab": "^5.0.0-alpha.152",
+    "@mui/material": "^5.16.7",
+    "@mui/x-date-pickers": "^6.20.2",
+    "@storybook/addon-mdx-gfm": "^7.5.2",
+    "@tanstack/react-table": "^8.10.7",
+    "dayjs": "^1.11.9",
+    "react-datepicker": "^4.21.0",
+    "react-i18next": "^13.2.2",
+    "react-select": "^5.8.0",
+    "styled-components": "^6.1.0",
+    "tslib": "^2.6.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OlosLive/norma-library"
+  },
+  "bugs": {
+    "url": "https://github.com/OlosLive/norma-library/issues"
+  },
+  "homepage": "https://github.com/OlosLive/norma-library",
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
+}

package/src/components/Accordion.tsx

@@ -1,39 +1,39 @@
-import React from 'react';
-import {
-  AccordionDetails,
-  AccordionSummary,
-  Accordion as MuiAccordion,
-  Typography
-} from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { AccordionBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const AccordionStyled = styled(MuiAccordion)({});
-
-export const Accordion = ({ data = [], defaultExpanded = false, ...props }: AccordionBaseProps) => {
-  const [expanded, setExpanded] = React.useState<boolean | string>(defaultExpanded);
-
-  const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
-    console.log('Event ==> ', event);
-    setExpanded(isExpanded ? panel : false);
-  };
-
-  return (
-    <>
-      {data &&
-        data.map((item, key) => (
-          <AccordionStyled expanded={expanded === item.id} onChange={handleChange(item.id)} key={key} {...props}>
-            <AccordionSummary
-              expandIcon={<ExpandMoreIcon />}
-              aria-controls={`panel-${key}-content`}
-              id={`panel-${key}-header`}
-            >
-              <Typography sx={{ width: '66%', flexShrink: 0 }}>{item.label}</Typography>
-            </AccordionSummary>
-            <AccordionDetails>{item.children}</AccordionDetails>
-          </AccordionStyled>
-        ))}
-    </>
-  );
-};
+import React from 'react';
+import {
+  AccordionDetails,
+  AccordionSummary,
+  Accordion as MuiAccordion,
+  Typography
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { AccordionBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const AccordionStyled = styled(MuiAccordion)({});
+
+export const Accordion = ({ data = [], defaultExpanded = false, ...props }: AccordionBaseProps) => {
+  const [expanded, setExpanded] = React.useState<boolean | string>(defaultExpanded);
+
+  const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+    console.log('Event ==> ', event);
+    setExpanded(isExpanded ? panel : false);
+  };
+
+  return (
+    <>
+      {data &&
+        data.map((item, key) => (
+          <AccordionStyled expanded={expanded === item.id} onChange={handleChange(item.id)} key={key} {...props}>
+            <AccordionSummary
+              expandIcon={<ExpandMoreIcon />}
+              aria-controls={`panel-${key}-content`}
+              id={`panel-${key}-header`}
+            >
+              <Typography sx={{ width: '66%', flexShrink: 0 }}>{item.label}</Typography>
+            </AccordionSummary>
+            <AccordionDetails>{item.children}</AccordionDetails>
+          </AccordionStyled>
+        ))}
+    </>
+  );
+};

package/src/components/Avatar.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-
-import { Avatar as MuiVatar } from '@mui/material';
-
-import { AvatarBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const AvatarStyled = styled(MuiVatar)({
-  textTransform: 'none',
-  color: 'currentcolor',
-});
-
-export const Avatar: React.FC<AvatarBaseProps> = ({ src, ...props }) => {
-  return (
-    <AvatarStyled src={src} {...props} />
-  );
-};
+import React from 'react';
+
+import { Avatar as MuiVatar } from '@mui/material';
+
+import { AvatarBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const AvatarStyled = styled(MuiVatar)({
+  textTransform: 'none',
+  color: 'currentcolor',
+});
+
+export const Avatar: React.FC<AvatarBaseProps> = ({ src, ...props }) => {
+  return (
+    <AvatarStyled src={src} {...props} />
+  );
+};

package/src/components/Badge.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-
-import { Badge as MuiBadge } from '@mui/material';
-
-import { BadgeBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const BadgeStyled = styled(MuiBadge)({});
-
-export const Badge: React.FC<BadgeBaseProps> = ({ ...props }) => {
-  return (
-    <BadgeStyled {...props} />
-  );
-};
+import React from 'react';
+
+import { Badge as MuiBadge } from '@mui/material';
+
+import { BadgeBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const BadgeStyled = styled(MuiBadge)({});
+
+export const Badge: React.FC<BadgeBaseProps> = ({ ...props }) => {
+  return (
+    <BadgeStyled {...props} />
+  );
+};