norma-library 0.6.86 → 0.6.88

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/ProductCard/ProductCard.js

@@ -18,15 +18,17 @@ export var ProductCard = function (_a) {
   */
     return (React.createElement(ProductCardStyle, { disabled: disabled, "$bColor": icon === null || icon === void 0 ? void 0 : icon.iconColor, hasBorder: hasBorder },
         React.createElement(Card, { variant: "outlined", onClick: function () { return onClick && onClick(); } },
-            (favorite === null || favorite === void 0 ? void 0 : favorite.flagged) && (React.createElement(Grid, { container: true, justifyContent: 'flex-end', alignItems: 'flex-start', position: 'relative' },
+            favorite && (React.createElement(Grid, { container: true, justifyContent: 'flex-end', alignItems: 'flex-start', position: 'relative' },
                 React.createElement(Grid, { item: true },
                     React.createElement(IconButton, { sx: {
                             padding: 0,
                             position: 'absolute',
-                            top: '10px',
-                            right: '5px',
-                        }, "aria-label": "favorite", onClick: favorite.onFlag, color: favorite.flagged ? 'primary' : 'inherit', cursor: "pointer" },
-                        React.createElement(GradeIcon, null))))),
+                            right: '2px',
+                        }, "aria-label": "favorite", onClick: favorite.onFlag, cursor: "pointer" },
+                        React.createElement(GradeIcon, { sx: {
+                                color: favorite.flagged ? '#FDDA0D' : '#666',
+                                fontSize: 24,
+                            } }))))),
             React.createElement(TitleContainer, null,
                 React.createElement(IconCardStyle, { "$iColor": (icon === null || icon === void 0 ? void 0 : icon.iconColor) || "", "$bColor": color },
                     React.createElement(Icons, { icon: icon === null || icon === void 0 ? void 0 : icon.iconName, color: icon === null || icon === void 0 ? void 0 : icon.iconColor, scale: icon === null || icon === void 0 ? void 0 : icon.scale, width: icon === null || icon === void 0 ? void 0 : icon.iconWidth, height: icon === null || icon === void 0 ? void 0 : icon.iconHeight })),

package/dist/esm/components/ProductCard/ProductCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.js","sourceRoot":"","sources":["../../../../src/components/ProductCard/ProductCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACtF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,SAAS,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAIhC,MAAM,CAAC,IAAM,WAAW,GAA+B,UAAC,EAUvD;;IATC,wBAAwB;IACxB,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,iBAAgB,EAAhB,SAAS,mBAAG,IAAI,KAAA,EAChB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,QAAQ,cAAA;IAGR;;;;;;IAMA;IACA,OAAO,CACL,oBAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,aAAW,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE,SAAS,EAAE,SAAS;QAClF,oBAAC,IAAI,IACH,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,cAAM,OAAA,OAAO,IAAI,OAAO,EAAE,EAApB,CAAoB;YAElC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,KAAI,CACpB,oBAAC,IAAI,IAAC,SAAS,QAAC,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU;gBACxF,oBAAC,IAAI,IAAC,IAAI;oBACR,oBAAC,UAAU,IACT,EAAE,EAAE;4BACF,OAAO,EAAE,CAAC;4BACV,QAAQ,EAAE,UAAU;4BACpB,GAAG,EAAE,MAAM;4BACX,KAAK,EAAE,KAAK;yBACb,gBACU,UAAU,EACrB,OAAO,EAAE,QAAQ,CAAC,MAAM,EACxB,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC/C,MAAM,EAAC,SAAS;wBAEhB,oBAAC,SAAS,OAAG,CACF,CACR,CACF,CACR;YAED,oBAAC,cAAc;gBACb,oBAAC,aAAa,eACH,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,KAAI,EAAE,aACrB,KAAK;oBAEd,oBAAC,KAAK,IAAC,IAAI,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAoB,EAAE,KAAK,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE,KAAK,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAkB,EAAE,KAAK,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE,MAAM,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,GAAI,CACxI;gBAChB,2BAAG,SAAS,EAAC,OAAO,IAAE,KAAK,CAAK,CACjB;YAEjB,2BAAG,SAAS,EAAC,aAAa,IACvB,WAAW,CACV,CACC,CACU,CACpB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"ProductCard.js","sourceRoot":"","sources":["../../../../src/components/ProductCard/ProductCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACtF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,SAAS,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAIhC,MAAM,CAAC,IAAM,WAAW,GAA+B,UAAC,EAUvD;;IATC,wBAAwB;IACxB,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,iBAAgB,EAAhB,SAAS,mBAAG,IAAI,KAAA,EAChB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,QAAQ,cAAA;IAGR;;;;;;IAMA;IACA,OAAO,CACL,oBAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,aAAW,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE,SAAS,EAAE,SAAS;QAClF,oBAAC,IAAI,IACH,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,cAAM,OAAA,OAAO,IAAI,OAAO,EAAE,EAApB,CAAoB;YAElC,QAAQ,IAAI,CACX,oBAAC,IAAI,IAAC,SAAS,QAAC,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU;gBACxF,oBAAC,IAAI,IAAC,IAAI;oBACR,oBAAC,UAAU,IACT,EAAE,EAAE;4BACF,OAAO,EAAE,CAAC;4BACV,QAAQ,EAAE,UAAU;4BACpB,KAAK,EAAE,KAAK;yBACb,gBACU,UAAU,EACrB,OAAO,EAAE,QAAQ,CAAC,MAAM,EACxB,MAAM,EAAC,SAAS;wBAEhB,oBAAC,SAAS,IAAC,EAAE,EAAE;gCACb,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;gCAC5C,QAAQ,EAAE,EAAE;6BACb,GAAG,CACO,CACR,CACF,CACR;YAED,oBAAC,cAAc;gBACb,oBAAC,aAAa,eACH,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,KAAI,EAAE,aACrB,KAAK;oBAEd,oBAAC,KAAK,IAAC,IAAI,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAoB,EAAE,KAAK,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE,KAAK,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAkB,EAAE,KAAK,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE,MAAM,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,GAAI,CACxI;gBAChB,2BAAG,SAAS,EAAC,OAAO,IAAE,KAAK,CAAK,CACjB;YAEjB,2BAAG,SAAS,EAAC,aAAa,IACvB,WAAW,CACV,CACC,CACU,CACpB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/ProductCard/ProductCard.style.js

@@ -1,7 +1,7 @@
 import { __makeTemplateObject } from "tslib";
 import styled from "@emotion/styled";
 import { pxToRem } from "../../utils/pxToRem";
-export var ProductCardStyle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([" \n  max-width: 380px;\n  cursor: ", ";\n  opacity: ", ";\n  height: 100%;\n  border-left: 7px solid ", " !important;\n  border-radius: 5px;\n\n  p.title {\n    font-weight: 600;\n  }\n\n  p.description {\n    margin-bottom: ", ";\n    line-height: ", ";\n  }\n\n  .MuiPaper-root {\n    min-height: 180px;\n  }\n\n  @media (max-width: 1535px) {\n    max-width: 100%;\n  }\n"], [" \n  max-width: 380px;\n  cursor: ", ";\n  opacity: ", ";\n  height: 100%;\n  border-left: 7px solid ", " !important;\n  border-radius: 5px;\n\n  p.title {\n    font-weight: 600;\n  }\n\n  p.description {\n    margin-bottom: ", ";\n    line-height: ", ";\n  }\n\n  .MuiPaper-root {\n    min-height: 180px;\n  }\n\n  @media (max-width: 1535px) {\n    max-width: 100%;\n  }\n"])), function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return (props.disabled ? 0.5 : 1); }, function (props) { return props.hasBorder ? props.$bColor : 'transparent'; }, pxToRem(17), pxToRem(24));
+export var ProductCardStyle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([" \n  max-width: 380px;\n  cursor: ", ";\n  opacity: ", ";\n  border-left: 7px solid ", " !important;\n  border-radius: 5px;\n\n  p.title {\n    font-weight: 600;\n  }\n\n  p.description {\n    margin-bottom: ", ";\n    line-height: ", ";\n  }\n\n  .MuiPaper-root {\n    min-height: 180px;\n  }\n\n  @media (max-width: 1535px) {\n    max-width: 100%;\n  }\n"], [" \n  max-width: 380px;\n  cursor: ", ";\n  opacity: ", ";\n  border-left: 7px solid ", " !important;\n  border-radius: 5px;\n\n  p.title {\n    font-weight: 600;\n  }\n\n  p.description {\n    margin-bottom: ", ";\n    line-height: ", ";\n  }\n\n  .MuiPaper-root {\n    min-height: 180px;\n  }\n\n  @media (max-width: 1535px) {\n    max-width: 100%;\n  }\n"])), function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return (props.disabled ? 0.5 : 1); }, function (props) { return props.hasBorder ? props.$bColor : 'transparent'; }, pxToRem(17), pxToRem(24));
 export var IconCardStyle = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n  border-radius: 5px;\n  align-items: center;\n  justify-content: center;\n  padding: 10px;\n  background-color: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  margin-right: ", ";\n  box-sizing: border-box;\n\n  svg {\n  max-height: 100%;\n  max-width: 100%;\n    path {\n      fill: ", ";\n    }\n  }\n"], ["\n  display: inline-flex;\n  border-radius: 5px;\n  align-items: center;\n  justify-content: center;\n  padding: 10px;\n  background-color: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  margin-right: ", ";\n  box-sizing: border-box;\n\n  svg {\n  max-height: 100%;\n  max-width: 100%;\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (props) { return props.$bColor; }, pxToRem(50), pxToRem(50), pxToRem(10), function (props) { return props.$iColor; });
 export var TitleContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-bottom: ", ";\n\n  p {\n    font-size: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-bottom: ", ";\n\n  p {\n    font-size: ", ";\n  }\n"])), pxToRem(16), pxToRem(24));
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/ProductCard/ProductCard.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.style.js","sourceRoot":"","sources":["../../../../src/components/ProductCard/ProductCard.style.ts"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,MAAM,CAAC,IAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,0bAA+D,oCAE7F,EAAuD,gBACtD,EAAqC,+CAEvB,EAA0D,0HAQhE,EAAW,sBACb,EAAW,0HAU7B,KAtBW,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,EAA5C,CAA4C,EACtD,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAA1B,CAA0B,EAEvB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAA/C,CAA+C,EAQhE,OAAO,CAAC,EAAE,CAAC,EACb,OAAO,CAAC,EAAE,CAAC,CAU7B,CAAC;AAEF,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,kZAAuC,8IAMxD,EAAwB,kBAC/B,EAAW,mBACV,EAAW,qBACT,EAAW,4GAOf,EAAwB,iBAGrC,KAbqB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,OAAO,EAAb,CAAa,EAC/B,OAAO,CAAC,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,CAAC,EACT,OAAO,CAAC,EAAE,CAAC,EAOf,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,OAAO,EAAb,CAAa,CAGrC,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,6KAAA,+DAGrB,EAAW,6BAGb,EAAW,UAE3B,KALkB,OAAO,CAAC,EAAE,CAAC,EAGb,OAAO,CAAC,EAAE,CAAC,CAE3B,CAAC"}
+{"version":3,"file":"ProductCard.style.js","sourceRoot":"","sources":["../../../../src/components/ProductCard/ProductCard.style.ts"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,MAAM,CAAC,IAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,yaAA+D,oCAE7F,EAAuD,gBACtD,EAAqC,8BACvB,EAA0D,0HAQhE,EAAW,sBACb,EAAW,0HAU7B,KArBW,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,EAA5C,CAA4C,EACtD,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAA1B,CAA0B,EACvB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAA/C,CAA+C,EAQhE,OAAO,CAAC,EAAE,CAAC,EACb,OAAO,CAAC,EAAE,CAAC,CAU7B,CAAC;AAEF,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,kZAAuC,8IAMxD,EAAwB,kBAC/B,EAAW,mBACV,EAAW,qBACT,EAAW,4GAOf,EAAwB,iBAGrC,KAbqB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,OAAO,EAAb,CAAa,EAC/B,OAAO,CAAC,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,CAAC,EACT,OAAO,CAAC,EAAE,CAAC,EAOf,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,OAAO,EAAb,CAAa,CAGrC,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,6KAAA,+DAGrB,EAAW,6BAGb,EAAW,UAE3B,KALkB,OAAO,CAAC,EAAE,CAAC,EAGb,OAAO,CAAC,EAAE,CAAC,CAE3B,CAAC"}

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/dist/esm/interfaces/ProductCard.d.ts

@@ -16,7 +16,7 @@ export interface ProductCardProps {
     icon?: {
         bgColor?: string;
         iconColor?: string;
-        iconName?: keyof typeof iconsSVG | SvgIconComponent;
+        iconName?: keyof typeof iconsSVG | SvgIconComponent | string;
         iconWidth?: string | number;
         iconHeight?: string | number;
         scale?: IconScale;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.6.86",
+  "version": "0.6.88",
   "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/ProductCard/ProductCard.style.ts

@@ -5,7 +5,6 @@ export const ProductCardStyle = styled.div<{ disabled?: boolean, $bColor?: strin
   max-width: 380px;
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
   opacity: ${(props) => (props.disabled ? 0.5 : 1)};
-  height: 100%;
   border-left: 7px solid ${(props) => props.hasBorder ? props.$bColor : 'transparent'} !important;
   border-radius: 5px;
 

package/src/components/ProductCard/ProductCard.tsx

@@ -34,22 +34,23 @@ export const ProductCard: React.FC<ProductCardProps> = ({
         variant="outlined"
         onClick={() => onClick && onClick()}
       >
-        {favorite?.flagged && (
+        {favorite && (
           <Grid container justifyContent={'flex-end'} alignItems={'flex-start'} position={'relative'}>
             <Grid item>
               <IconButton
                 sx={{
                   padding: 0,
                   position: 'absolute',
-                  top: '10px',
-                  right: '5px',
+                  right: '2px',
                 }}
                 aria-label="favorite"
                 onClick={favorite.onFlag}
-                color={favorite.flagged ? 'primary' : 'inherit'}
                 cursor="pointer"
               >
-                <GradeIcon />
+                <GradeIcon sx={{
+                  color: favorite.flagged ? '#FDDA0D' : '#666',
+                  fontSize: 24,
+                }}/>
               </IconButton>
             </Grid>
           </Grid>

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/interfaces/ProductCard.ts

@@ -18,7 +18,7 @@ export interface ProductCardProps {
   icon?: {
       bgColor?: string;
       iconColor?: string;
-      iconName?: keyof typeof iconsSVG | SvgIconComponent;
+      iconName?: keyof typeof iconsSVG | SvgIconComponent | string;
       iconWidth?: string | number;
       iconHeight?: string | number;
       scale?: IconScale;

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'