norma-library 0.6.86 → 0.6.87

package/.storybook/main.ts

@@ -2,6 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -9,12 +10,18 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-mdx-gfm'
   ],
+
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
+
   docs: {
     autodocs: 'tag',
+  },
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
   }
 };
 export default config;

package/dist/esm/components/Box/interfaces.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 export interface BoxProps {
     children: JSX.Element[] | JSX.Element;
     size: string;

package/dist/esm/components/Breadcrumb/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { BreadcrumbProps } from './interface';
-declare const Breadcrumb: React.FC<BreadcrumbProps>;
+import { BreadCrumbProps } from './interface';
+declare const Breadcrumb: React.FC<BreadCrumbProps>;
 export default Breadcrumb;

package/dist/esm/components/Breadcrumb/index.js

@@ -1,18 +1,22 @@
 import React, { useMemo } from 'react';
 import * as S from "./styles";
+import { Icons } from '../Icons';
+import { Home } from '@mui/icons-material';
 var Breadcrumb = function (_a) {
-    var links = _a.links, onChange = _a.onChange;
-    var listLinks = useMemo(function () {
-        return links.map(function (link, index, self) {
+    var items = _a.items, onHomeClick = _a.onHomeClick, onPathClick = _a.onPathClick;
+    var listItems = useMemo(function () {
+        return items.map(function (item, index, self) {
             var showIcon = self.length > index + 1;
-            return (React.createElement("div", { className: 'content', key: index },
-                React.createElement(S.Link, { onClick: function () { return onChange(link); } }, link.name),
-                showIcon ? React.createElement(S.Arrow, null,
-                    React.createElement("i", { className: "icon" })) : null));
+            var isFixedIcon = items[0] === item;
+            return (React.createElement("div", { className: 'content', key: index, onClick: function (event) { return items[0] === item ? onHomeClick(event) : onPathClick(item, event); } },
+                isFixedIcon && React.createElement(Icons, { icon: Home }),
+                !isFixedIcon && item.icon && React.createElement(Icons, { icon: item.icon, color: 'inherit' }),
+                React.createElement(S.Item, null, item.label),
+                showIcon && React.createElement(S.Divisor, null, "/")));
         });
-    }, [links]);
+    }, [items]);
     return (React.createElement(S.Container, null,
-        React.createElement(S.ListLinks, null, listLinks)));
+        React.createElement(S.ListItems, null, listItems)));
 };
 export default Breadcrumb;
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Breadcrumb/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,CAAC,MAAM,UAAU,CAAA;AAG7B,IAAM,UAAU,GAA6B,UAAC,EAAmB;QAAjB,KAAK,WAAA,EAAE,QAAQ,cAAA;IAC7D,IAAM,SAAS,GAAG,OAAO,CAAC;QACxB,OAAO,KAAK,CAAC,GAAG,CAAC,UAAC,IAAU,EAAE,KAAa,EAAE,IAAY;YACvD,IAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAA;YACxC,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,KAAK;gBACjC,oBAAC,CAAC,CAAC,IAAI,IAAC,OAAO,EAAE,cAAM,OAAA,QAAQ,CAAC,IAAI,CAAC,EAAd,CAAc,IAAG,IAAI,CAAC,IAAI,CAAU;gBACzD,QAAQ,CAAC,CAAC,CAAC,oBAAC,CAAC,CAAC,KAAK;oBAAC,2BAAG,SAAS,EAAC,MAAM,GAAK,CAAU,CAAC,CAAC,CAAC,IAAI,CAC3D,CACP,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,oBAAC,CAAC,CAAC,SAAS;QACV,oBAAC,CAAC,CAAC,SAAS,QACR,SAAS,CACC,CACF,CACf,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,CAAC,MAAM,UAAU,CAAA;AAE7B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,IAAM,UAAU,GAA8B,UAAC,EAAmC;QAAjC,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,WAAW,iBAAA;IAC9E,IAAM,SAAS,GAAG,OAAO,CAAC;QACxB,OAAO,KAAK,CAAC,GAAG,CAAC,UAAC,IAAU,EAAE,KAAa,EAAE,IAAY;YACvD,IAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAA;YACxC,IAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;YACrC,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,EAAjE,CAAiE;gBACvH,WAAW,IAAI,oBAAC,KAAK,IAAC,IAAI,EAAE,IAAI,GAAI;gBACpC,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,IAAI,oBAAC,KAAK,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,SAAS,GAAG;gBACxE,oBAAC,CAAC,CAAC,IAAI,QAAE,IAAI,CAAC,KAAK,CAAU;gBAC5B,QAAQ,IAAI,oBAAC,CAAC,CAAC,OAAO,YAAc,CACjC,CACP,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,oBAAC,CAAC,CAAC,SAAS;QACV,oBAAC,CAAC,CAAC,SAAS,QACT,SAAS,CACE,CACF,CACf,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/esm/components/Breadcrumb/interface.d.ts

@@ -1,8 +1,13 @@
-export interface Link {
-    name: string;
-    route: string;
+import { IconType } from "../../types";
+import { SvgIconComponent } from "@mui/icons-material";
+export interface Item {
+    id: string;
+    label: string;
+    href: string;
+    icon?: SvgIconComponent | IconType;
 }
-export interface BreadcrumbProps {
-    links: Link[];
-    onChange: Function;
+export interface BreadCrumbProps {
+    onPathClick: Function;
+    onHomeClick: Function;
+    items: Item[];
 }

package/dist/esm/components/Breadcrumb/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ListLinks: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Link: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
-export declare const Arrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ListItems: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const Divisor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/esm/components/Breadcrumb/styles.js

@@ -1,8 +1,8 @@
 import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
 export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0 0 16px 0;\n"], ["\n  margin: 0 0 16px 0;\n"])));
-export var ListLinks = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n  .content {\n    display: flex;\n    gap: 8px;\n  }\n"], ["\n  display: flex;\n  gap: 8px;\n  .content {\n    display: flex;\n    gap: 8px;\n  }\n"])));
-export var Link = styled.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: #666;\n  font-size: 14px;\n  cursor: pointer;\n"], ["\n  color: #666;\n  font-size: 14px;\n  cursor: pointer;\n"])));
-export var Arrow = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  .icon {\n    border: solid #999;\n    border-width: 0 2px 2px 0;\n    display: inline-block;\n    padding: 2px;\n    transform: rotate(-45deg);\n    -webkit-transform: rotate(-45deg);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  .icon {\n    border: solid #999;\n    border-width: 0 2px 2px 0;\n    display: inline-block;\n    padding: 2px;\n    transform: rotate(-45deg);\n    -webkit-transform: rotate(-45deg);\n  }\n"])));
+export var ListItems = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n  .content {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  gap: 8px;\n  .content {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n"])));
+export var Item = styled.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: #666;\n  font-size: 14px;\n  cursor: pointer;\n  &:hover {\n    text-decoration: underline;\n  }\n"], ["\n  color: #666;\n  font-size: 14px;\n  cursor: pointer;\n  &:hover {\n    text-decoration: underline;\n  }\n"])));
+export var Divisor = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #666;\n  content: '/';\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #666;\n  content: '/';\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 //# sourceMappingURL=styles.js.map

package/dist/esm/components/Breadcrumb/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/styles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,8FAAA,2BAElC,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,4JAAA,yFAOlC,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,IAAI,GAAG,MAAM,CAAC,CAAC,+HAAA,4DAI3B,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,iTAAA,8OAW9B,IAAA,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/styles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,8FAAA,2BAElC,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,sLAAA,mHAQlC,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,IAAI,GAAG,MAAM,CAAC,CAAC,kLAAA,+GAO3B,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG,MAAM,CAAC,GAAG,8KAAA,2GAMhC,IAAA,CAAA"}

package/dist/esm/components/Typography/Text/interfaces.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 export interface TextProps {
     children: JSX.Element[] | JSX.Element | string;
     className?: string;

package/dist/esm/components/Typography/Title/interfaces.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 export interface TextProps {
     children: JSX.Element[] | JSX.Element | string;
     className?: string;

package/dist/esm/hooks/useClickOutside.d.ts

@@ -1,2 +1,2 @@
-declare const useClickOutside: (ref: React.RefObject<HTMLElement>, callback: () => void) => void;
+declare const useClickOutside: (ref: React.RefObject<HTMLElement | null>, callback: () => void) => void;
 export default useClickOutside;

package/dist/esm/hooks/useClickOutside.js.map

@@ -1 +1 @@
-{"version":3,"file":"useClickOutside.js","sourceRoot":"","sources":["../../../src/hooks/useClickOutside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,IAAM,eAAe,GAAG,UAAC,GAAiC,EAAE,QAAoB;IAC9E,IAAM,kBAAkB,GAAG,UAAC,KAAiB;QAC3C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;YAC/D,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC;QACR,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;AACtB,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"useClickOutside.js","sourceRoot":"","sources":["../../../src/hooks/useClickOutside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,IAAM,eAAe,GAAG,UAAC,GAAwC,EAAE,QAAoB;IACrF,IAAM,kBAAkB,GAAG,UAAC,KAAiB;QAC3C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;YAC/D,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC;QACR,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;AACtB,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.6.86",
+  "version": "0.6.87",
   "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": {
@@ -34,19 +34,19 @@
     "@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-essentials": "^8.5.6",
+    "@storybook/addon-interactions": "^8.5.6",
+    "@storybook/addon-links": "^8.5.6",
+    "@storybook/addon-onboarding": "^8.5.6",
     "@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",
+    "@storybook/blocks": "^8.5.6",
+    "@storybook/react": "^8.5.6",
+    "@storybook/react-vite": "^8.5.6",
+    "@storybook/react-webpack5": "^8.5.6",
+    "@storybook/test": "^8.5.6",
+    "@types/react": "^19.0.0",
+    "@types/react-datepicker": "^7.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
@@ -60,17 +60,17 @@
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.11.2",
     "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",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^5.0.5",
-    "storybook": "^7.5.0",
-    "storybook-dark-mode": "^3.0.1",
+    "storybook": "^8.5.6",
+    "storybook-dark-mode": "^4.0.2",
     "style-loader": "^3.3.3",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.0.2",
@@ -92,24 +92,24 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.14.0",
     "@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",
+    "@mui/x-date-pickers": "^7.26.0",
+    "@storybook/addon-mdx-gfm": "^8.5.6",
     "@tanstack/react-table": "^8.10.7",
     "dayjs": "^1.11.9",
     "react-datepicker": "^7.5.0",
-    "react-i18next": "^13.2.2",
+    "react-i18next": "^15.4.0",
     "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"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "browserslist": {
     "production": [

package/src/components/Box/interfaces.ts

@@ -1,3 +1,5 @@
+import { JSX } from "react"
+
 export interface BoxProps {
   children: JSX.Element[] | JSX.Element
   size: string

package/src/components/Breadcrumb/index.tsx

@@ -1,25 +1,30 @@
 import React, { useMemo } from 'react';
 import * as S from "./styles"
-import { BreadcrumbProps, Link } from './interface';
+import { BreadCrumbProps, Item } from './interface';
+import { Icons } from '../Icons';
+import { Home } from '@mui/icons-material';
 
-const Breadcrumb:React.FC<BreadcrumbProps> = ({ links, onChange }) => {
-  const listLinks = useMemo(() => {
-    return links.map((link: Link, index: number, self: Link[]) => {
+const Breadcrumb: React.FC<BreadCrumbProps> = ({ items, onHomeClick, onPathClick }) => {
+  const listItems = useMemo(() => {
+    return items.map((item: Item, index: number, self: Item[]) => {
       const showIcon = self.length > index + 1
+      const isFixedIcon = items[0] === item
       return (
-        <div className='content' key={index}>
-          <S.Link onClick={() => onChange(link)}>{link.name}</S.Link>
-          { showIcon ? <S.Arrow><i className="icon"></i></S.Arrow> : null }
+        <div className='content' key={index} onClick={(event) => items[0] === item ? onHomeClick(event) : onPathClick(item, event)}>
+          {isFixedIcon && <Icons icon={Home} />}
+          {!isFixedIcon && item.icon && <Icons icon={item.icon} color='inherit' />}
+          <S.Item>{item.label}</S.Item>
+          {showIcon && <S.Divisor>/</S.Divisor>}
         </div>
       )
     })
-  }, [links])
+  }, [items])
 
   return (
     <S.Container>
-      <S.ListLinks>
-        { listLinks }
-      </S.ListLinks>
+      <S.ListItems>
+        {listItems}
+      </S.ListItems>
     </S.Container>
   )
 }

package/src/components/Breadcrumb/interface.ts

@@ -1,9 +1,15 @@
-export interface Link {
-  name: string
-  route: string 
+import { IconType } from "../../types";
+import { SvgIconComponent } from "@mui/icons-material";
+
+export interface Item {
+  id: string;
+  label: string;
+  href: string;
+  icon?: SvgIconComponent | IconType;
 }
 
-export interface BreadcrumbProps {
-  links: Link[]
-  onChange: Function
+export interface BreadCrumbProps {
+  onPathClick: Function;
+  onHomeClick: Function;
+  items: Item[];
 }

package/src/components/Breadcrumb/styles.tsx

@@ -4,30 +4,29 @@ export const Container = styled.div`
   margin: 0 0 16px 0;
 `
 
-export const ListLinks = styled.div`
+export const ListItems = styled.div`
   display: flex;
   gap: 8px;
   .content {
     display: flex;
     gap: 8px;
+    align-items: center;
   }
 `
 
-export const Link = styled.p`
+export const Item = styled.p`
   color: #666;
   font-size: 14px;
   cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
 `
 
-export const Arrow = styled.div`
+export const Divisor = styled.div`
   display: flex;
   align-items: center;
-  .icon {
-    border: solid #999;
-    border-width: 0 2px 2px 0;
-    display: inline-block;
-    padding: 2px;
-    transform: rotate(-45deg);
-    -webkit-transform: rotate(-45deg);
-  }
+  justify-content: center;
+  color: #666;
+  content: '/';
 `

package/src/components/Typography/Text/interfaces.ts

@@ -1,6 +1,8 @@
+import { JSX } from 'react'
+
 export interface TextProps {
   children: JSX.Element[] | JSX.Element | string
   className?: string
   size: string
   type: string
-}
+}

package/src/components/Typography/Title/interfaces.ts

@@ -1,3 +1,5 @@
+import { JSX } from "react"
+
 export interface TextProps {
   children: JSX.Element[] | JSX.Element | string
   className?: string

package/src/hooks/useClickOutside.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-const useClickOutside = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+const useClickOutside = (ref: React.RefObject<HTMLElement | null>, callback: () => void) => {
   const handleClickOutside = (event: MouseEvent) => {
     if (ref.current && !ref.current.contains(event.target as Node)) {
       callback();

package/src/stories/Accordion.stories.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta, StoryObj } from '@storybook/react';
-import { Accordion } from '../components';
-import { DataAccordion } from '../types';
-import { Typography } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react'
+import { Accordion } from '../components'
+import { DataAccordion } from '../types'
+import { Typography } from '@mui/material'
 
 const data: DataAccordion[] = [
   {
@@ -11,8 +11,8 @@ const data: DataAccordion[] = [
     id: 'panel-1',
     children: (
       <Typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-        lobortis eget.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit
+        amet blandit leo lobortis eget.
       </Typography>
     ),
   },
@@ -21,12 +21,12 @@ const data: DataAccordion[] = [
     id: 'panel-2',
     children: (
       <Typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-        lobortis eget.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit
+        amet blandit leo lobortis eget.
       </Typography>
     ),
   },
-];
+]
 
 const meta = {
   title: 'Display/Accordion',
@@ -38,28 +38,28 @@ const meta = {
   argTypes: {
     data: data,
   },
-} satisfies Meta<typeof Accordion>;
+} satisfies Meta<typeof Accordion>
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 export const AccordionBasic = () => {
   return (
     <div style={{ width: '480px', marginBottom: 30 }}>
       <Accordion data={data} />
     </div>
-  );
-};
+  )
+}
 
-AccordionBasic.storyName = 'Accordion Basic';
+AccordionBasic.storyName = 'Accordion Basic'
 
 export const AccordionExpanded = () => {
   return (
     <div style={{ width: '480px', marginBottom: 30 }}>
       <Accordion data={data} defaultExpanded="panel-1" />
     </div>
-  );
-};
+  )
+}
 
-AccordionExpanded.storyName = 'Accordion Expanded';
+AccordionExpanded.storyName = 'Accordion Expanded'

package/src/stories/Avatar.stories.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta } from '@storybook/react';
-import { Avatar, Icons } from '../components';
-import { AvatarGroup, Stack } from '@mui/material';
-import { green, pink } from '@mui/material/colors';
+import type { Meta } from '@storybook/react'
+import { Avatar, Icons } from '../components'
+import { AvatarGroup, Stack } from '@mui/material'
+import { green, pink } from '@mui/material/colors'
 
 const meta = {
   title: 'Display/Avatar',
@@ -13,28 +13,28 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof Avatar>;
+} satisfies Meta<typeof Avatar>
 
-export default meta;
+export default meta
 
 function stringToColor(string: string) {
-  let hash = 0;
-  let i;
+  let hash = 0
+  let i
 
   /* eslint-disable no-bitwise */
   for (i = 0; i < string.length; i += 1) {
-    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+    hash = string.charCodeAt(i) + ((hash << 5) - hash)
   }
 
-  let color = '#';
+  let color = '#'
 
   for (i = 0; i < 3; i += 1) {
-    const value = (hash >> (i * 8)) & 0xff;
-    color += `00${value.toString(16)}`.slice(-2);
+    const value = (hash >> (i * 8)) & 0xff
+    color += `00${value.toString(16)}`.slice(-2)
   }
   /* eslint-enable no-bitwise */
 
-  return color;
+  return color
 }
 
 function stringAvatar(name: string) {
@@ -43,7 +43,7 @@ function stringAvatar(name: string) {
       bgcolor: stringToColor(name),
     },
     children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
-  };
+  }
 }
 
 export const AvatarBasic = () => {
@@ -51,8 +51,8 @@ export const AvatarBasic = () => {
     <>
       <Avatar src="https://mui.com/static/images/avatar/2.jpg" />
     </>
-  );
-};
+  )
+}
 
 export const AvatarVariants = () => {
   return (
@@ -61,8 +61,8 @@ export const AvatarVariants = () => {
       <Avatar src="https://mui.com/static/images/avatar/2.jpg" variant="rounded" />
       <Avatar src="https://mui.com/static/images/avatar/3.jpg" />
     </Stack>
-  );
-};
+  )
+}
 
 export const AvatarLetters = () => {
   return (
@@ -73,20 +73,24 @@ export const AvatarLetters = () => {
         <Avatar {...stringAvatar('Tim Neutkens')} />
       </Stack>
     </>
-  );
-};
+  )
+}
 
 export const AvatarSizes = () => {
   return (
     <>
       <Stack direction="row" spacing={2}>
-        <Avatar src="https://mui.com/static/images/avatar/1.jpg" variant="square" sx={{ width: 24, height: 24 }} />
+        <Avatar
+          src="https://mui.com/static/images/avatar/1.jpg"
+          variant="square"
+          sx={{ width: 24, height: 24 }}
+        />
         <Avatar src="https://mui.com/static/images/avatar/2.jpg" variant="rounded" />
         <Avatar src="https://mui.com/static/images/avatar/3.jpg" sx={{ width: 56, height: 56 }} />
       </Stack>
     </>
-  );
-};
+  )
+}
 
 export const AvatarWidthIcons = () => {
   return (
@@ -103,8 +107,8 @@ export const AvatarWidthIcons = () => {
         </Avatar>
       </Stack>
     </>
-  );
-};
+  )
+}
 
 export const AvatarGrouped = () => {
   return (
@@ -119,5 +123,5 @@ export const AvatarGrouped = () => {
         </AvatarGroup>
       </Stack>
     </>
-  );
-};
+  )
+}