norma-library 0.6.83 → 0.6.85

package/dist/esm/components/NormaChatMessageBalloon/components/Content.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { NormaChatMessageBalloonProps } from "../../../interfaces";
+export default function Content({ label, description, direction, className }: NormaChatMessageBalloonProps): React.JSX.Element;

package/dist/esm/components/NormaChatMessageBalloon/components/Content.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Typography } from "@mui/material";
+import { ChatMessageBalloonStyle } from "../styles";
+export default function Content(_a) {
+    var label = _a.label, description = _a.description, direction = _a.direction, className = _a.className;
+    return (React.createElement(ChatMessageBalloonStyle, { direction: direction, className: className },
+        React.createElement(Typography, { variant: "subtitle2", sx: {
+                fontSize: "1rem",
+                fontWeight: "600",
+                marginBottom: '5px'
+            } }, label),
+        React.createElement(Typography, { variant: "body1", sx: {
+                fontSize: "0.9rem",
+                fontWeight: "400",
+                marginBottom: '5px'
+            } }, description)));
+}
+//# sourceMappingURL=Content.js.map

package/dist/esm/components/NormaChatMessageBalloon/components/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../../../src/components/NormaChatMessageBalloon/components/Content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAEpD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAA0E;QAAxE,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA;IACtE,OAAO,CACH,oBAAC,uBAAuB,IAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS;QAC/D,oBAAC,UAAU,IACP,OAAO,EAAC,WAAW,EACnB,EAAE,EAAE;gBACA,QAAQ,EAAE,MAAM;gBAChB,UAAU,EAAE,KAAK;gBACjB,YAAY,EAAE,KAAK;aACtB,IAEA,KAAK,CACG;QACb,oBAAC,UAAU,IACP,OAAO,EAAC,OAAO,EACf,EAAE,EAAE;gBACA,QAAQ,EAAE,QAAQ;gBAClB,UAAU,EAAE,KAAK;gBACjB,YAAY,EAAE,KAAK;aACtB,IAEA,WAAW,CACH,CACS,CAC7B,CAAC;AACN,CAAC"}

package/dist/esm/components/NormaChatMessageBalloon/components/Date.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { NormaChatMessageBalloonProps } from "../../../interfaces";
+export default function Date({ date }: NormaChatMessageBalloonProps): React.JSX.Element;

package/dist/esm/components/NormaChatMessageBalloon/components/Date.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { ChatMessageBalloonRowStyle, ChatMessageDateStyle } from "../styles";
+export default function Date(_a) {
+    var date = _a.date;
+    return (React.createElement(ChatMessageBalloonRowStyle, null,
+        React.createElement(ChatMessageDateStyle, { fontSize: "0.7rem" }, date)));
+}
+//# sourceMappingURL=Date.js.map

package/dist/esm/components/NormaChatMessageBalloon/components/Date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Date.js","sourceRoot":"","sources":["../../../../../src/components/NormaChatMessageBalloon/components/Date.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAE7E,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAsC;QAApC,IAAI,UAAA;IAC/B,OAAO,CACH,oBAAC,0BAA0B;QACvB,oBAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,IAAG,IAAI,CAAwB,CAC9C,CAChC,CAAA;AACL,CAAC"}

package/dist/esm/components/NormaChatMessageBalloon/components/MessageItem.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { NormaChatMessageBalloonProps } from "../../../interfaces";
+export default function MessageItem({ avatar, label, description, date, direction, onMouseEnter, highlight, children }: NormaChatMessageBalloonProps): React.JSX.Element;

package/dist/esm/components/NormaChatMessageBalloon/components/MessageItem.js

@@ -0,0 +1,30 @@
+import React from "react";
+import Content from "./Content";
+import Row from "./Row";
+import Date from "./Date";
+import { useChatMessageBalloon } from "../hook";
+import { Avatar, Typography } from "@mui/material";
+import Root from "./Root";
+export default function MessageItem(_a) {
+    var avatar = _a.avatar, label = _a.label, description = _a.description, date = _a.date, direction = _a.direction, onMouseEnter = _a.onMouseEnter, highlight = _a.highlight, children = _a.children;
+    var balloonClassNames = useChatMessageBalloon(onMouseEnter, highlight).balloonClassNames;
+    return (React.createElement(Root, { onMouseEnter: function () { return console.log('hover'); }, onMouseLeave: function () { return console.log('leave'); } },
+        React.createElement(Row, { direction: direction, onMouseEnter: function () { return console.log('row hover'); }, onMouseLeave: function () { return console.log('row leave'); } },
+            React.createElement(Content, { label: label, description: description, direction: direction, className: balloonClassNames })),
+        React.createElement(Row, { direction: direction },
+            avatar && (React.createElement(Avatar, { sx: {
+                    width: '30px',
+                    height: '30px',
+                    marginX: '10px',
+                    position: 'relative',
+                }, src: avatar === null || avatar === void 0 ? void 0 : avatar.src, alt: avatar === null || avatar === void 0 ? void 0 : avatar.alt },
+                React.createElement(Typography, { sx: {
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                    } }, avatar === null || avatar === void 0 ? void 0 : avatar.alt))),
+            React.createElement(Date, { date: date })),
+        React.createElement(Row, { direction: direction }, children)));
+}
+//# sourceMappingURL=MessageItem.js.map

package/dist/esm/components/NormaChatMessageBalloon/components/MessageItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageItem.js","sourceRoot":"","sources":["../../../../../src/components/NormaChatMessageBalloon/components/MessageItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,GAAG,MAAM,OAAO,CAAC;AACxB,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAgH;QAA9G,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;IACxG,IAAA,iBAAiB,GAAK,qBAAqB,CAAC,YAAY,EAAE,SAAS,CAAC,kBAAnD,CAAoD;IAC7E,OAAO,CACH,oBAAC,IAAI,IAAC,YAAY,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAApB,CAAoB,EAAE,YAAY,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAApB,CAAoB;QACpF,oBAAC,GAAG,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAxB,CAAwB,EAAE,YAAY,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAxB,CAAwB;YACjH,oBAAC,OAAO,IACJ,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,iBAAiB,GAC9B,CACA;QACN,oBAAC,GAAG,IAAC,SAAS,EAAE,SAAS;YACxB,MAAM,IAAI,CACX,oBAAC,MAAM,IACD,EAAE,EAAE;oBACF,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;oBACd,OAAO,EAAE,MAAM;oBACf,QAAQ,EAAE,UAAU;iBACrB,EACD,GAAG,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,EAChB,GAAG,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG;gBAEhB,oBAAC,UAAU,IACT,EAAE,EAAE;wBACF,QAAQ,EAAE,UAAU;wBACpB,GAAG,EAAE,KAAK;wBACV,IAAI,EAAE,KAAK;wBACX,SAAS,EAAE,uBAAuB;qBACnC,IAEA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,CACD,CACN,CACZ;YACG,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CAClB;QAEN,oBAAC,GAAG,IAAC,SAAS,EAAE,SAAS,IACpB,QAAQ,CACP,CAEH,CACV,CAAC;AACN,CAAC"}

package/dist/esm/components/NormaChatMessageBalloon/components/Root.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { NormaChatMessageBalloonProps } from "../../../interfaces";
+export default function Root({ children, className, ...rest }: NormaChatMessageBalloonProps): React.JSX.Element;

package/dist/esm/components/NormaChatMessageBalloon/components/Root.js

@@ -0,0 +1,8 @@
+import { __assign, __rest } from "tslib";
+import React from "react";
+import { ChatMessageBalloonContainerStyle } from "../styles";
+export default function Root(_a) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement(ChatMessageBalloonContainerStyle, __assign({ className: className }, rest), children));
+}
+//# sourceMappingURL=Root.js.map

package/dist/esm/components/NormaChatMessageBalloon/components/Root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Root.js","sourceRoot":"","sources":["../../../../../src/components/NormaChatMessageBalloon/components/Root.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gCAAgC,EAAE,MAAM,WAAW,CAAC;AAG7D,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAA4D;IAA3D,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAK,IAAI,cAA7B,yBAA8B,CAAD;IACtD,OAAO,CACH,oBAAC,gCAAgC,aAAC,SAAS,EAAE,SAAS,IAAM,IAAI,GACvD,QAAQ,CACkB,CACtC,CAAA;AACL,CAAC"}

package/dist/esm/components/NormaChatMessageBalloon/components/Row.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { NormaChatMessageBalloonProps } from "../../../interfaces";
+export default function Row({ children, direction, onRowMouseEnter, onRowMouseLeave }: NormaChatMessageBalloonProps): React.JSX.Element;

package/dist/esm/components/NormaChatMessageBalloon/components/Row.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { ChatMessageBalloonRowStyle } from "../styles";
+export default function Row(_a) {
+    var children = _a.children, direction = _a.direction, onRowMouseEnter = _a.onRowMouseEnter, onRowMouseLeave = _a.onRowMouseLeave;
+    return (React.createElement(ChatMessageBalloonRowStyle, { direction: direction, onMouseLeave: onRowMouseLeave, onMouseEnter: onRowMouseEnter }, children));
+}
+//# sourceMappingURL=Row.js.map

package/dist/esm/components/NormaChatMessageBalloon/components/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../../../src/components/NormaChatMessageBalloon/components/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,WAAW,CAAC;AAGvD,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAAsF;QAArF,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,eAAe,qBAAA,EAAE,eAAe,qBAAA;IAChF,OAAO,CACL,oBAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,eAAe,IACzG,QAAQ,CACgB,CAC9B,CAAC;AACJ,CAAC"}

package/dist/esm/components/NormaChatMessageBalloon/hook.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const useChatMessageBalloon: (onMouseEnter: React.MouseEventHandler<HTMLDivElement> | undefined, highlight: boolean | undefined) => {
+    balloonClassNames: string;
+};

package/dist/esm/components/NormaChatMessageBalloon/hook.js

@@ -0,0 +1,13 @@
+import { useMemo } from "react";
+export var useChatMessageBalloon = function (onMouseEnter, highlight) {
+    var balloonClassNames = useMemo(function () {
+        var classNames = [];
+        if (!!onMouseEnter)
+            classNames.push('is-interactive');
+        if (!!highlight)
+            classNames.push('is-highlight');
+        return classNames.join(" ");
+    }, [highlight, onMouseEnter]);
+    return { balloonClassNames: balloonClassNames };
+};
+//# sourceMappingURL=hook.js.map

package/dist/esm/components/NormaChatMessageBalloon/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.js","sourceRoot":"","sources":["../../../../src/components/NormaChatMessageBalloon/hook.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,YAAiE,EAAE,SAA8B;IACnI,IAAM,iBAAiB,GAAG,OAAO,CAAC;QAC9B,IAAM,UAAU,GAAG,EAAE,CAAA;QACrB,IAAG,CAAC,CAAC,YAAY;YAAE,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QACpD,IAAG,CAAC,CAAC,SAAS;YAAE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QAC/C,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAA;IAE7B,OAAO,EAAC,iBAAiB,mBAAA,EAAC,CAAA;AAChC,CAAC,CAAA"}

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

@@ -0,0 +1,12 @@
+import Content from "./components/Content";
+import Date from "./components/Date";
+import MessageItem from "./components/MessageItem";
+import Root from "./components/Root";
+import Row from "./components/Row";
+export declare const NormaChatMessageBalloon: {
+    Root: typeof Root;
+    Row: typeof Row;
+    Content: typeof Content;
+    MessageItem: typeof MessageItem;
+    Date: typeof Date;
+};

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

@@ -0,0 +1,13 @@
+import Content from "./components/Content";
+import Date from "./components/Date";
+import MessageItem from "./components/MessageItem";
+import Root from "./components/Root";
+import Row from "./components/Row";
+export var NormaChatMessageBalloon = {
+    Root: Root,
+    Row: Row,
+    Content: Content,
+    MessageItem: MessageItem,
+    Date: Date,
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/NormaChatMessageBalloon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,GAAG,MAAM,kBAAkB,CAAC;AAEnC,MAAM,CAAC,IAAM,uBAAuB,GAAG;IACnC,IAAI,EAAE,IAAI;IACV,GAAG,EAAE,GAAG;IACR,OAAO,EAAE,OAAO;IAChB,WAAW,EAAE,WAAW;IACxB,IAAI,EAAE,IAAI;CACb,CAAA"}

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

@@ -0,0 +1,5 @@
+export declare const ChatMessageBalloonContainerStyle: any;
+export declare const ChatMessageBalloonRowStyle: any;
+export declare const ChatMessageBalloonStyle: any;
+export declare const ChatMessageDateStyle: any;
+export declare const ChatMessageChildrenStyle: any;

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

@@ -0,0 +1,13 @@
+import { __makeTemplateObject } from "tslib";
+import { Box, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export var ChatMessageBalloonContainerStyle = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+});
+export var ChatMessageBalloonRowStyle = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 8px;\n  flex-direction: ", ";\n  justify-content: flex-start;\n  align-items: flex-start;\n  vertical-align: middle;\n  &:last-child {\n    margin-bottom: 0px;\n  }\n"], ["\n  display: flex;\n  margin-bottom: 8px;\n  flex-direction: ", ";\n  justify-content: flex-start;\n  align-items: flex-start;\n  vertical-align: middle;\n  &:last-child {\n    margin-bottom: 0px;\n  }\n"])), function (props) { return (props.direction === 'I' ? 'row-reverse' : 'row'); });
+export var ChatMessageBalloonStyle = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 2px solid transparent;\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  padding: 12px 24px;\n  width: 60%;\n  transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n\n  &.is-highlight {\n    border: 2px solid #8a8888;\n  }\n\n  &.is-interactive {\n    cursor: pointer;\n\n    &:hover {\n      border: 2px solid #8a8888;\n    }\n  }\n"], ["\n  background-color: ", ";\n  border: 2px solid transparent;\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  padding: 12px 24px;\n  width: 60%;\n  transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n\n  &.is-highlight {\n    border: 2px solid #8a8888;\n  }\n\n  &.is-interactive {\n    cursor: pointer;\n\n    &:hover {\n      border: 2px solid #8a8888;\n    }\n  }\n"])), function (props) { return (props.direction === 'I' ? '#FFF' : '#E18B50'); }, function (props) { return (props.direction === 'I' ? '20px 20px 0px 20px' : '20px 20px 20px 0px'); }, function (props) { return (props.direction === 'I' ? '#4D4F5B' : '#FFF'); });
+export var ChatMessageDateStyle = styled(Typography)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: #43425d;\n  opacity: 0.5;\n  margin-top: 7px;\n"], ["\n  color: #43425d;\n  opacity: 0.5;\n  margin-top: 7px;\n"])));
+export var ChatMessageChildrenStyle = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  justify-content: ", ";\n  padding: 8px;\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  justify-content: ", ";\n  padding: 8px;\n"])), function (props) { return (props.direction === 'I' ? 'end' : 'start'); });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/NormaChatMessageBalloon/styles.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,IAAM,gCAAgC,GAAQ,MAAM,CAAC,GAAG,CAAC,CAAC;IAC/D,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;CACxB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,0BAA0B,GAAQ,MAAM,CAAC,KAAK,CAAC,gRAAuB,+DAG/D,EAA0D,4IAO7E,KAPmB,UAAA,KAAK,IAAI,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,EAAjD,CAAiD,CAO7E,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAQ,MAAM,CAAC,KAAK,CAAC,4fAAuB,wBAC1D,EAAuD,wDAE1D,EAAgF,yCAExF,EAAuD,0TAkBjE,KAtBqB,UAAA,KAAK,IAAI,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,EAA9C,CAA8C,EAE1D,UAAA,KAAK,IAAI,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC,EAAvE,CAAuE,EAExF,UAAA,KAAK,IAAI,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,EAA9C,CAA8C,CAkBjE,CAAC;AAEF,MAAM,CAAC,IAAM,oBAAoB,GAAQ,MAAM,CAAC,UAAU,CAAC,+HAAA,4DAI1D,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,wBAAwB,GAAQ,MAAM,CAAC,KAAK,CAAC,mMAAuB,wGAK5D,EAAoD,sBAExE,KAFoB,UAAA,KAAK,IAAI,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAA3C,CAA2C,CAExE,CAAC"}

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

@@ -8,7 +8,7 @@ import { IconifyIcon } from "../IconifyIcon";
 export var ProductCard = function (_a) {
     var 
     // product = 'analytics'
-    color = _a.color, iconColor = _a.iconColor, onClick = _a.onClick, _b = _a.hasBorder, hasBorder = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, title = _a.title, description = _a.description, iconName = _a.iconName, _d = _a.flaggable, flaggable = _d === void 0 ? false : _d;
+    color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, onClick = _a.onClick, _b = _a.hasBorder, hasBorder = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, title = _a.title, description = _a.description, iconName = _a.iconName, _d = _a.flaggable, flaggable = _d === void 0 ? false : _d, _e = _a.flagged, flagged = _e === void 0 ? false : _e;
     /* const colors: { [key: string]: string } = {
       primaryDark: '#B74608',
       primaryLight: '#FCF1E3',
@@ -23,11 +23,11 @@ export var ProductCard = function (_a) {
                     React.createElement(IconButton, { sx: { padding: 0 }, "aria-label": "favorite", onClick: function (event) {
                             event.preventDefault();
                             event.stopPropagation();
-                        }, cursor: "pointer" },
+                        }, color: flagged ? 'primary' : 'inherit', cursor: "pointer" },
                         React.createElement(GradeIcon, null))))),
             React.createElement(TitleContainer, null,
                 React.createElement(IconCardStyle, { "$iColor": iconColor, "$bColor": color },
-                    React.createElement(IconifyIcon, { iconName: iconName, color: iconColor, size: "100%" })),
+                    React.createElement(IconifyIcon, { iconName: iconName, color: iconColor, size: iconSize || '2em' })),
                 React.createElement("p", null, title)),
             React.createElement("p", { className: "description" }, description))));
 };

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,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,MAAM,CAAC,IAAM,WAAW,GAA+B,UAAC,EAWvD;;IAVC,wBAAwB;IACxB,KAAK,WAAA,EACL,SAAS,eAAA,EACT,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,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA;IAGjB;;;;;;IAMA;IACA,OAAO,CACL,oBAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,aAAW,SAAS,EAAE,SAAS,EAAE,SAAS;QAC5E,oBAAC,IAAI,IACH,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,cAAM,OAAA,OAAO,IAAI,OAAO,EAAE,EAApB,CAAoB;YAElC,SAAS,IAAI,CACX,oBAAC,IAAI,IAAC,SAAS,QAAC,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY;gBACpE,oBAAC,IAAI,IAAC,IAAI;oBACR,oBAAC,UAAU,IACT,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,gBACP,UAAU,EACrB,OAAO,EAAE,UAAC,KAAK;4BACb,KAAK,CAAC,cAAc,EAAE,CAAA;4BACtB,KAAK,CAAC,eAAe,EAAE,CAAA;wBACzB,CAAC,EACD,MAAM,EAAC,SAAS;wBAEhB,oBAAC,SAAS,OAAG,CACF,CACR,CACF,CACP;YAED,oBAAC,cAAc;gBACb,oBAAC,aAAa,eACH,SAAS,aACT,KAAK;oBAEd,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,MAAM,GAAG,CACnD;gBAChB,+BAAI,KAAK,CAAK,CACC;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,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,MAAM,CAAC,IAAM,WAAW,GAA+B,UAAC,EAavD;;IAZC,wBAAwB;IACxB,KAAK,WAAA,EACL,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,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,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA;IAGf;;;;;;IAMA;IACA,OAAO,CACL,oBAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,aAAW,SAAS,EAAE,SAAS,EAAE,SAAS;QAC5E,oBAAC,IAAI,IACH,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,cAAM,OAAA,OAAO,IAAI,OAAO,EAAE,EAApB,CAAoB;YAElC,SAAS,IAAI,CACX,oBAAC,IAAI,IAAC,SAAS,QAAC,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY;gBACpE,oBAAC,IAAI,IAAC,IAAI;oBACR,oBAAC,UAAU,IACT,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,gBACP,UAAU,EACrB,OAAO,EAAE,UAAC,KAAK;4BACb,KAAK,CAAC,cAAc,EAAE,CAAA;4BACtB,KAAK,CAAC,eAAe,EAAE,CAAA;wBACzB,CAAC,EACD,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACtC,MAAM,EAAC,SAAS;wBAEhB,oBAAC,SAAS,OAAG,CACF,CACR,CACF,CACP;YAED,oBAAC,cAAc;gBACb,oBAAC,aAAa,eACH,SAAS,aACT,KAAK;oBAEd,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,IAAI,KAAK,GAAI,CAChE;gBAChB,+BAAI,KAAK,CAAK,CACC;YAEjB,2BAAG,SAAS,EAAC,aAAa,IACvB,WAAW,CACV,CACC,CACU,CACpB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/RadioGroup.js

@@ -10,6 +10,6 @@ export var RadioGroup = function (_a) {
     return (React.createElement(FormControl, { disabled: props.disabled },
         React.createElement(FormLabel, { id: props.id }, props.label),
         React.createElement(MuiRadioGroup, { "aria-labelledby": props.id, defaultValue: props.checked, name: "radio-buttons-group", row: props.direction === 'horizontal' ? true : false, onChange: !!onChange ? function (event, value) { return onChange(event, value); } : undefined }, props.options &&
-            props.options.map(function (item, key) { return (React.createElement(FormControlLabel, { value: item.value, control: React.createElement(RadioStyled, { color: props.color, size: item.size ? item.size : sizes[1] }), label: item.label, key: key, sx: { alignItems: "start" } })); }))));
+            props.options.map(function (item, key) { return (React.createElement(FormControlLabel, { value: item.value, control: React.createElement(RadioStyled, { color: props.color, size: item.size ? item.size : sizes[1] }), label: item.label, key: key, sx: { alignItems: "center" } })); }))));
 };
 //# sourceMappingURL=RadioGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/components/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,KAAK,IAAI,QAAQ,EACjB,UAAU,IAAI,aAAa,GAC5B,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAI9C,IAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACzC,IAAM,KAAK,GAA2B,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AAE1D,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,EAA4B;QAAvB,KAAK,cAAV,EAAY,CAAF;IAC3B,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAE3B,OAAO,CACL,oBAAC,WAAW,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACnC,oBAAC,SAAS,IAAC,EAAE,EAAE,KAAK,CAAC,EAAE,IAAG,KAAK,CAAC,KAAK,CAAa;QAClD,oBAAC,aAAa,uBACK,KAAK,CAAC,EAAE,EACzB,YAAY,EAAE,KAAK,CAAC,OAAO,EAC3B,IAAI,EAAC,qBAAqB,EAC1B,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACpD,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,OAAA,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,EAAtB,CAAsB,CAAC,CAAC,CAAC,SAAS,IAE1E,KAAK,CAAC,OAAO;YACZ,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CAC/B,oBAAC,gBAAgB,IACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,oBAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,EACpF,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAC,UAAU,EAAE,OAAO,EAAC,GACzB,CACH,EARgC,CAQhC,CAAC,CACU,CACJ,CACf,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/components/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,KAAK,IAAI,QAAQ,EACjB,UAAU,IAAI,aAAa,GAC5B,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAI9C,IAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACzC,IAAM,KAAK,GAA2B,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AAE1D,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,EAA4B;QAAvB,KAAK,cAAV,EAAY,CAAF;IAC3B,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAE3B,OAAO,CACL,oBAAC,WAAW,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACnC,oBAAC,SAAS,IAAC,EAAE,EAAE,KAAK,CAAC,EAAE,IAAG,KAAK,CAAC,KAAK,CAAa;QAClD,oBAAC,aAAa,uBACK,KAAK,CAAC,EAAE,EACzB,YAAY,EAAE,KAAK,CAAC,OAAO,EAC3B,IAAI,EAAC,qBAAqB,EAC1B,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACpD,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,OAAA,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,EAAtB,CAAsB,CAAC,CAAC,CAAC,SAAS,IAE1E,KAAK,CAAC,OAAO;YACZ,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CAC/B,oBAAC,gBAAgB,IACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,oBAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,EACpF,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAC,UAAU,EAAE,QAAQ,EAAC,GAC1B,CACH,EARgC,CAQhC,CAAC,CACU,CACJ,CACf,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/ServiceCard/ServiceCard.js

@@ -3,7 +3,7 @@ import { IconCardStyle, ServiceCardStyle, TitleContainer } from "./ServiceCard.s
 import { Card } from "../Card";
 import { IconifyIcon } from "../IconifyIcon";
 export var ServiceCard = function (_a) {
-    var iconName = _a.iconName, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, color = _a.color, iconColor = _a.iconColor, description = _a.description, title = _a.title;
+    var iconName = _a.iconName, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, description = _a.description, title = _a.title;
     return (React.createElement(ServiceCardStyle, { disabled: disabled, "$bColor": iconColor },
         React.createElement(Card, { border: true, variant: "outlined", onClick: function () {
                 if (disabled)
@@ -12,7 +12,7 @@ export var ServiceCard = function (_a) {
             } },
             React.createElement(TitleContainer, null,
                 React.createElement(IconCardStyle, { "$iColor": iconColor || "", "$bColor": color || "" },
-                    React.createElement(IconifyIcon, { iconName: iconName || "", color: iconColor, size: "100%" })),
+                    React.createElement(IconifyIcon, { iconName: iconName || "", color: iconColor, size: iconSize || "100%" })),
                 React.createElement("div", { className: "text" },
                     React.createElement("p", { className: "title" }, title),
                     React.createElement("p", { className: "description" }, description))))));

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

@@ -1 +1 @@
-{"version":3,"file":"ServiceCard.js","sourceRoot":"","sources":["../../../../src/components/ServiceCard/ServiceCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACtF,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,CAAC,IAAM,WAAW,GAA+B,UAAC,EAA4E;QAA3E,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,WAAW,iBAAA,EAAE,KAAK,WAAA;IAC9H,OAAO,CACH,oBAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,aAAW,SAAS;QACpD,oBAAC,IAAI,IACD,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE;gBACL,IAAI,QAAQ;oBAAE,OAAO;gBACrB,OAAO,IAAI,OAAO,EAAE,CAAC;YACzB,CAAC;YAED,oBAAC,cAAc;gBACX,oBAAC,aAAa,eAAU,SAAS,IAAI,EAAE,aAAW,KAAK,IAAI,EAAE;oBACzD,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,MAAM,GAAE,CAC1D;gBAChB,6BAAK,SAAS,EAAC,MAAM;oBACjB,2BAAG,SAAS,EAAC,OAAO,IAAE,KAAK,CAAK;oBAChC,2BAAG,SAAS,EAAC,aAAa,IAAE,WAAW,CAAK,CAC1C,CACO,CACd,CACQ,CACtB,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"ServiceCard.js","sourceRoot":"","sources":["../../../../src/components/ServiceCard/ServiceCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACtF,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,CAAC,IAAM,WAAW,GAA+B,UAAC,EAAsF;QAArF,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA,EAAE,KAAK,WAAA;IACxI,OAAO,CACH,oBAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,aAAW,SAAS;QACpD,oBAAC,IAAI,IACD,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE;gBACL,IAAI,QAAQ;oBAAE,OAAO;gBACrB,OAAO,IAAI,OAAO,EAAE,CAAC;YACzB,CAAC;YAED,oBAAC,cAAc;gBACX,oBAAC,aAAa,eAAU,SAAS,IAAI,EAAE,aAAW,KAAK,IAAI,EAAE;oBACzD,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,IAAI,MAAM,GAAG,CACxE;gBAChB,6BAAK,SAAS,EAAC,MAAM;oBACjB,2BAAG,SAAS,EAAC,OAAO,IAAE,KAAK,CAAK;oBAChC,2BAAG,SAAS,EAAC,aAAa,IAAE,WAAW,CAAK,CAC1C,CACO,CACd,CACQ,CACtB,CAAC;AACN,CAAC,CAAC"}

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

@@ -11,6 +11,7 @@ export * from './DropDown';
 export * from './IconButton';
 export * from './Icons';
 export * from './Modal';
+export * from './NormaChatMessageBalloon';
 export * from './Paper';
 export * from './ProductCard/ProductCard';
 export * from './ProgressBar';

package/dist/esm/components/index.js

@@ -11,6 +11,7 @@ export * from './DropDown';
 export * from './IconButton';
 export * from './Icons';
 export * from './Modal';
+export * from './NormaChatMessageBalloon';
 export * from './Paper';
 export * from './ProductCard/ProductCard';
 export * from './ProgressBar';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,yCAAyC,CAAC;AACxD,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,yCAAyC,CAAC;AACxD,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,SAAS,CAAC;AACxB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/esm/index.d.ts

@@ -14,7 +14,7 @@ import { Tabs } from './components/Tabs';
 import { Tag } from './components/Tag';
 import { TextField } from './components/TextField';
 import { DatePicker } from './components/DatePicker';
-import { ChatMessage, ChatMessageBalloon, ProductCard, ServiceCard } from './components';
+import { ChatMessage, ChatMessageBalloon, NormaChatMessageBalloon, ProductCard, ServiceCard } from './components';
 import { NormaProvider } from './providers/NormaProvider';
 import { themes, getPalette } from './helpers';
 import DateInput from './components/DateInput';
@@ -31,4 +31,4 @@ import { TimeLine, TimeLineData } from './components/TimeLine/TimeLine';
 import { ModalStatus } from './components/StatusModal/StatusModal';
 import { breakpoints } from './utils/styledBreakpoints';
 import { useTheme } from '@mui/material';
-export { Accordion, Button, Card, ChatMessage, ChatMessageBalloon, CheckBox, DatePicker, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, ProductCard, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, NormaProvider, themes, DateInput, Box, Breadcrumb, SelectInput, ServiceCard, MultiSelectInput, Text, Title, TextInput, Table, UncontrolledTable, UncontrolledTabs, ModalStatus, breakpoints, useTheme, TimeLine, TimeLineData, };
+export { Accordion, Button, Card, ChatMessage, ChatMessageBalloon, CheckBox, DatePicker, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, ProductCard, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, NormaProvider, themes, DateInput, Box, Breadcrumb, SelectInput, ServiceCard, MultiSelectInput, NormaChatMessageBalloon, Text, Title, TextInput, Table, UncontrolledTable, UncontrolledTabs, ModalStatus, breakpoints, useTheme, TimeLine, TimeLineData, };

package/dist/esm/index.js

@@ -14,7 +14,7 @@ import { Tabs } from './components/Tabs';
 import { Tag } from './components/Tag';
 import { TextField } from './components/TextField';
 import { DatePicker } from './components/DatePicker';
-import { ChatMessage, ChatMessageBalloon, ProductCard, ServiceCard } from './components';
+import { ChatMessage, ChatMessageBalloon, NormaChatMessageBalloon, ProductCard, ServiceCard } from './components';
 import { NormaProvider } from './providers/NormaProvider';
 import { themes, getPalette } from './helpers';
 import DateInput from './components/DateInput';
@@ -31,5 +31,5 @@ import { TimeLine } from './components/TimeLine/TimeLine';
 import { ModalStatus } from './components/StatusModal/StatusModal';
 import { breakpoints } from './utils/styledBreakpoints';
 import { useTheme } from '@mui/material';
-export { Accordion, Button, Card, ChatMessage, ChatMessageBalloon, CheckBox, DatePicker, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, ProductCard, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, NormaProvider, themes, DateInput, Box, Breadcrumb, SelectInput, ServiceCard, MultiSelectInput, Text, Title, TextInput, Table, UncontrolledTable, UncontrolledTabs, ModalStatus, breakpoints, useTheme, TimeLine, };
+export { Accordion, Button, Card, ChatMessage, ChatMessageBalloon, CheckBox, DatePicker, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, ProductCard, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, NormaProvider, themes, DateInput, Box, Breadcrumb, SelectInput, ServiceCard, MultiSelectInput, NormaChatMessageBalloon, Text, Title, TextInput, Table, UncontrolledTable, UncontrolledTabs, ModalStatus, breakpoints, useTheme, TimeLine, };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,GAAG,MAAM,kBAAkB,CAAC;AACnC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,gBAAgB,MAAM,gDAAgD,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAgB,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,WAAW,EACX,kBAAkB,EAClB,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,WAAW,EACX,UAAU,EACV,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,GAAG,EACH,SAAS,EACT,aAAa,EACb,MAAM,EACN,SAAS,EACT,GAAG,EACH,UAAU,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,GAET,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAClH,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,GAAG,MAAM,kBAAkB,CAAC;AACnC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,gBAAgB,MAAM,gDAAgD,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAgB,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,WAAW,EACX,kBAAkB,EAClB,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,WAAW,EACX,UAAU,EACV,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,GAAG,EACH,SAAS,EACT,aAAa,EACb,MAAM,EACN,SAAS,EACT,GAAG,EACH,UAAU,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,uBAAuB,EACvB,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,GAET,CAAC"}

package/dist/esm/interfaces/NormaChatMessageBalloon.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode, MouseEventHandler } from "react";
+export interface NormaChatMessageBalloonProps {
+    avatar?: {
+        src: string;
+        alt: string;
+    };
+    label?: string;
+    description?: ReactNode;
+    date?: string;
+    direction?: "I" | "O";
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+    onRowMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onRowMouseLeave?: MouseEventHandler<HTMLDivElement>;
+    highlight?: boolean;
+    attachments?: string[];
+    children?: ReactNode;
+    bottomChildren?: ReactNode;
+    className?: string;
+}

package/dist/esm/interfaces/NormaChatMessageBalloon.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=NormaChatMessageBalloon.js.map

package/dist/esm/interfaces/NormaChatMessageBalloon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NormaChatMessageBalloon.js","sourceRoot":"","sources":["../../../src/interfaces/NormaChatMessageBalloon.ts"],"names":[],"mappings":""}

package/dist/esm/interfaces/ProductCard.d.ts

@@ -4,11 +4,13 @@ export interface ProductCardProps {
     disabled?: boolean;
     color: string;
     iconColor: string;
+    iconSize: string;
     iconName: string;
     title: string;
     description: string;
     hasBorder?: boolean;
     flaggable?: boolean;
+    flagged?: boolean;
 }
 export interface BgIconProps {
     $bColor: string;

package/dist/esm/interfaces/ServiceCard.d.ts

@@ -7,4 +7,5 @@ export interface ServiceCardProps {
     iconColor?: string;
     iconName?: string;
     borderColor?: string;
+    iconSize?: string;
 }

package/dist/esm/interfaces/index.d.ts

@@ -10,6 +10,7 @@ export * from './DropDown';
 export * from './IconButton';
 export * from './Icons';
 export * from './Modal';
+export * from './NormaChatMessageBalloon';
 export * from './Paper';
 export * from './ProgressBar';
 export * from './RadioGroup';

package/dist/esm/interfaces/index.js

@@ -10,6 +10,7 @@ export * from './DropDown';
 export * from './IconButton';
 export * from './Icons';
 export * from './Modal';
+export * from './NormaChatMessageBalloon';
 export * from './Paper';
 export * from './ProgressBar';
 export * from './RadioGroup';

package/dist/esm/interfaces/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.6.83",
+  "version": "0.6.85",
   "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": {

package/src/components/IconifyIcon.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Icon } from '@iconify/react';
 import React from 'react';
 

package/src/components/NormaChatMessageBalloon/components/Content.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Typography } from "@mui/material";
+import { NormaChatMessageBalloonProps } from "../../../interfaces";
+import { ChatMessageBalloonStyle } from "../styles";
+
+export default function Content({ label, description, direction, className }: NormaChatMessageBalloonProps) {
+    return (
+        <ChatMessageBalloonStyle direction={direction} className={className}>
+            <Typography
+                variant="subtitle2"
+                sx={{
+                    fontSize: "1rem",
+                    fontWeight: "600",
+                    marginBottom: '5px'
+                }}
+            >
+                {label}
+            </Typography>
+            <Typography
+                variant="body1"
+                sx={{
+                    fontSize: "0.9rem",
+                    fontWeight: "400",
+                    marginBottom: '5px'
+                }}
+            >
+                {description}
+            </Typography>
+        </ChatMessageBalloonStyle>
+    );
+}

package/src/components/NormaChatMessageBalloon/components/Date.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { NormaChatMessageBalloonProps } from "../../../interfaces";
+import { ChatMessageBalloonRowStyle, ChatMessageDateStyle } from "../styles";
+
+export default function Date({ date }: NormaChatMessageBalloonProps) {
+    return (
+        <ChatMessageBalloonRowStyle>
+            <ChatMessageDateStyle fontSize={"0.7rem"}>{date}</ChatMessageDateStyle>
+        </ChatMessageBalloonRowStyle>
+    )
+}

package/src/components/NormaChatMessageBalloon/components/MessageItem.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { NormaChatMessageBalloonProps } from "../../../interfaces";
+import Content from "./Content";
+import Row from "./Row";
+import Date from "./Date";
+import { useChatMessageBalloon } from "../hook";
+import { Avatar, Typography } from "@mui/material";
+import Root from "./Root";
+
+export default function MessageItem({ avatar, label, description, date, direction, onMouseEnter, highlight, children }: NormaChatMessageBalloonProps) {
+    const { balloonClassNames } = useChatMessageBalloon(onMouseEnter, highlight);
+    return (
+        <Root onMouseEnter={() => console.log('hover')} onMouseLeave={() => console.log('leave')}>
+            <Row direction={direction} onMouseEnter={() => console.log('row hover')} onMouseLeave={() => console.log('row leave')}>
+                <Content
+                    label={label}
+                    description={description}
+                    direction={direction}
+                    className={balloonClassNames}
+                />
+            </Row>
+            <Row direction={direction}>
+            {avatar && (
+            <Avatar
+                  sx={{
+                    width: '30px',
+                    height: '30px',
+                    marginX: '10px',
+                    position: 'relative',
+                  }}
+                  src={avatar?.src}
+                  alt={avatar?.alt}
+                >
+                  <Typography
+                    sx={{
+                      position: 'absolute',
+                      top: '50%',
+                      left: '50%',
+                      transform: 'translate(-50%, -50%)',
+                    }}
+                  >
+                    {avatar?.alt}
+                  </Typography>
+                </Avatar>
+            )}
+                <Date date={date} />
+            </Row>
+            {/* Children located here */}
+            <Row direction={direction}>
+                {children}
+            </Row>
+
+        </Root>
+    );
+}

package/src/components/NormaChatMessageBalloon/components/Root.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { ChatMessageBalloonContainerStyle } from "../styles";
+import { NormaChatMessageBalloonProps } from "../../../interfaces";
+
+export default function Root({children, className, ...rest}: NormaChatMessageBalloonProps) {
+    return (
+        <ChatMessageBalloonContainerStyle className={className} {...rest}>
+                {children}
+        </ChatMessageBalloonContainerStyle>
+    )
+}

package/src/components/NormaChatMessageBalloon/components/Row.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { ChatMessageBalloonRowStyle } from "../styles";
+import { NormaChatMessageBalloonProps } from "../../../interfaces";
+
+export default function Row({children, direction, onRowMouseEnter, onRowMouseLeave }: NormaChatMessageBalloonProps) {
+  return (
+    <ChatMessageBalloonRowStyle direction={direction} onMouseLeave={onRowMouseLeave} onMouseEnter={onRowMouseEnter}>
+        {children}
+    </ChatMessageBalloonRowStyle>
+  );
+}

package/src/components/NormaChatMessageBalloon/hook.tsx

@@ -0,0 +1,12 @@
+import React, { useMemo } from "react"
+
+export const useChatMessageBalloon = (onMouseEnter: React.MouseEventHandler<HTMLDivElement> | undefined, highlight: boolean | undefined) => {
+    const balloonClassNames = useMemo(() => {
+        const classNames = []
+        if(!!onMouseEnter) classNames.push('is-interactive')
+        if(!!highlight) classNames.push('is-highlight')
+        return classNames.join(" ")
+      }, [highlight, onMouseEnter])
+
+      return {balloonClassNames}
+}

package/src/components/NormaChatMessageBalloon/index.tsx

@@ -0,0 +1,13 @@
+import Content from "./components/Content";
+import Date from "./components/Date";
+import MessageItem from "./components/MessageItem";
+import Root from "./components/Root";
+import Row from "./components/Row";
+
+export const NormaChatMessageBalloon = {
+    Root: Root,
+    Row: Row,
+    Content: Content,
+    MessageItem: MessageItem,
+    Date: Date,
+}

package/src/components/NormaChatMessageBalloon/styles.ts

@@ -0,0 +1,59 @@
+import { Box, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const ChatMessageBalloonContainerStyle: any = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const ChatMessageBalloonRowStyle: any = styled('div')<{ direction: string }>`
+  display: flex;
+  margin-bottom: 8px;
+  flex-direction: ${props => (props.direction === 'I' ? 'row-reverse' : 'row')};
+  justify-content: flex-start;
+  align-items: flex-start;
+  vertical-align: middle;
+  &:last-child {
+    margin-bottom: 0px;
+  }
+`;
+
+export const ChatMessageBalloonStyle: any = styled('div')<{ direction: string }>`
+  background-color: ${props => (props.direction === 'I' ? '#FFF' : '#E18B50')};
+  border: 2px solid transparent;
+  border-radius: ${props => (props.direction === 'I' ? '20px 20px 0px 20px' : '20px 20px 20px 0px')};
+  box-sizing: border-box;
+  color: ${props => (props.direction === 'I' ? '#4D4F5B' : '#FFF')};
+  display: flex;
+  flex-direction: column;
+  padding: 12px 24px;
+  width: 60%;
+  transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &.is-highlight {
+    border: 2px solid #8a8888;
+  }
+
+  &.is-interactive {
+    cursor: pointer;
+
+    &:hover {
+      border: 2px solid #8a8888;
+    }
+  }
+`;
+
+export const ChatMessageDateStyle: any = styled(Typography)`
+  color: #43425d;
+  opacity: 0.5;
+  margin-top: 7px;
+`;
+
+export const ChatMessageChildrenStyle: any = styled('div')<{ direction: string }>`
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  justify-content: ${props => (props.direction === 'I' ? 'end' : 'start')};
+  padding: 8px;
+`;

package/src/components/ProductCard/ProductCard.tsx

@@ -12,13 +12,15 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   // product = 'analytics'
   color,
   iconColor,
+  iconSize,
   onClick,
   hasBorder = true,
   disabled = false,
   title,
   description,
   iconName,
-  flaggable = false
+  flaggable = false,
+  flagged = false 
 }) => {
 
   /* const colors: { [key: string]: string } = {
@@ -44,6 +46,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                  event.preventDefault()
                  event.stopPropagation()
                }}
+               color={flagged ? 'primary' : 'inherit'}
                cursor="pointer"
              >
                <GradeIcon />
@@ -57,7 +60,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
             $iColor={iconColor}
             $bColor={color}
           >
-            <IconifyIcon iconName={iconName} color={iconColor} size="100%" />
+            <IconifyIcon iconName={iconName} color={iconColor} size={iconSize || '2em'} />
           </IconCardStyle>
           <p>{title}</p>
         </TitleContainer>

package/src/components/RadioGroup.tsx

@@ -34,7 +34,7 @@ export const RadioGroup = ({ ...props }: RadioBaseProps) => {
               control={<RadioStyled color={props.color} size={item.size ? item.size : sizes[1]} />}
               label={item.label}
               key={key}
-              sx={{alignItems: "start"}}
+              sx={{alignItems: "center"}}
             />
           ))}
       </MuiRadioGroup>

package/src/components/ServiceCard/ServiceCard.tsx

@@ -4,7 +4,7 @@ import { IconCardStyle, ServiceCardStyle, TitleContainer } from "./ServiceCard.s
 import { Card } from "../Card";
 import { IconifyIcon } from "../IconifyIcon";
 
-export const ServiceCard: React.FC<ServiceCardProps> = ({iconName, onClick, disabled = false, color, iconColor, description, title }) => {
+export const ServiceCard: React.FC<ServiceCardProps> = ({iconName, onClick, disabled = false, color, iconColor, iconSize, description, title }) => {
     return (
         <ServiceCardStyle disabled={disabled} $bColor={iconColor}>
             <Card
@@ -17,7 +17,7 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({iconName, onClick, disa
             >
                 <TitleContainer>
                     <IconCardStyle $iColor={iconColor || ""} $bColor={color || ""}>
-                        <IconifyIcon iconName={iconName || ""} color={iconColor} size="100%"/>
+                        <IconifyIcon iconName={iconName || ""} color={iconColor} size={iconSize || "100%"}/>
                     </IconCardStyle>
                     <div className="text">
                         <p className="title">{title}</p>

package/src/components/index.ts

@@ -11,6 +11,7 @@ export * from './DropDown';
 export * from './IconButton';
 export * from './Icons';
 export * from './Modal';
+export * from './NormaChatMessageBalloon';
 export * from './Paper';
 export * from './ProductCard/ProductCard';
 export * from './ProgressBar';

package/src/index.ts

@@ -14,7 +14,7 @@ import { Tabs } from './components/Tabs';
 import { Tag } from './components/Tag';
 import { TextField } from './components/TextField';
 import { DatePicker } from './components/DatePicker';
-import { ChatMessage, ChatMessageBalloon, ProductCard, ServiceCard } from './components';
+import { ChatMessage, ChatMessageBalloon, NormaChatMessageBalloon, ProductCard, ServiceCard } from './components';
 import { NormaProvider } from './providers/NormaProvider';
 import { themes, getPalette } from './helpers';
 import DateInput from './components/DateInput';
@@ -32,6 +32,7 @@ import { ModalStatus } from './components/StatusModal/StatusModal';
 import { breakpoints } from './utils/styledBreakpoints';
 
 import { useTheme } from '@mui/material';
+import { IconifyIcon } from './components/IconifyIcon';
 
 export {
   Accordion,
@@ -43,6 +44,7 @@ export {
   DatePicker,
   getPalette,
   IconButton,
+  IconifyIcon,
   Icons,
   Modal,
   Paper,
@@ -62,6 +64,7 @@ export {
   SelectInput,
   ServiceCard,
   MultiSelectInput,
+  NormaChatMessageBalloon,
   Text,
   Title,
   TextInput,

package/src/interfaces/NormaChatMessageBalloon.ts

@@ -0,0 +1,21 @@
+import { ReactNode, MouseEventHandler } from "react";
+
+export interface NormaChatMessageBalloonProps {
+  avatar?: {
+    src: string;
+    alt: string;
+  }
+  label?: string;
+  description?: ReactNode;
+  date?: string;
+  direction?: "I" | "O";
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+  onRowMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  onRowMouseLeave?: MouseEventHandler<HTMLDivElement>;
+  highlight?: boolean;
+  attachments?: string[];
+  children?: ReactNode;
+  bottomChildren?: ReactNode;
+  className?: string;
+}

package/src/interfaces/ProductCard.ts

@@ -6,11 +6,13 @@ export interface ProductCardProps {
     disabled?: boolean
     color: string
     iconColor: string
+    iconSize: string
     iconName: string
     title: string
     description: string
     hasBorder?: boolean
     flaggable?: boolean
+    flagged?: boolean
   }
   
   

package/src/interfaces/ServiceCard.ts

@@ -8,4 +8,5 @@ export interface ServiceCardProps {
     iconColor?: string;
     iconName?: string;
     borderColor?: string;
+    iconSize?: string;
   }

package/src/interfaces/index.ts

@@ -10,6 +10,7 @@ export * from './DropDown';
 export * from './IconButton';
 export * from './Icons';
 export * from './Modal';
+export * from './NormaChatMessageBalloon';
 export * from './Paper';
 export * from './ProgressBar';
 export * from './RadioGroup';

package/src/stories/NormaChatMessageBalloon.stories.tsx

@@ -0,0 +1,229 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { IconButton, NormaChatMessageBalloon } from '../components';
+import { useChatMessageBalloon } from '../components/NormaChatMessageBalloon/hook';
+import { Avatar, Box, Typography } from '@mui/material';
+import { IconifyIcon } from '../components/IconifyIcon';
+
+const messageArr = [
+  {
+    direction: 'O' as 'O',
+    label: "Teste de Título",
+    description: "lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.",
+    date: "06/02/2025",
+  },
+  {
+    direction: 'I' as 'I',
+    label: "Teste de Título",
+    description: "lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.",
+    date: "06/02/2025",
+  },
+  {
+    direction: 'O' as 'O',
+    label: "Teste de Título",
+    description: "lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.",
+    date: "07/02/2025",
+  }
+];
+
+const avatars = {
+  O: {
+    src: '',
+    alt: 'HC'
+  },
+  I: {
+    src: 'https://letsenhance.io/static/73136da51c245e80edc6ccfe44888a99/1015f/MainBefore.jpg',
+    alt: 'MB'
+  },
+}
+
+const Template = () => {
+  return (
+    <>
+      {messageArr.map((message, index) => {
+        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false);
+        return (
+          <Box key={index} sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: '#F5F5F5',
+            padding: '20px',
+          }}>
+            <NormaChatMessageBalloon.Root onMouseEnter={() => console.log('hover')} onMouseLeave={() => console.log('leave')}>
+              <NormaChatMessageBalloon.Row direction={message.direction} onMouseEnter={() => console.log('row hover')} onMouseLeave={() => console.log('row leave')}>
+                <NormaChatMessageBalloon.Content
+                  label={message.label}
+                  description={message.description}
+                  direction={message.direction}
+                  className={balloonClassNames}
+                />
+              </NormaChatMessageBalloon.Row>
+              <NormaChatMessageBalloon.Row direction={message.direction}>
+                <NormaChatMessageBalloon.Date date={message.date} />
+              </NormaChatMessageBalloon.Row>
+            </NormaChatMessageBalloon.Root>
+          </Box>
+        );
+      })}
+    </>
+  );
+};
+
+const TemplateWithAvatar = () => {
+  return (
+    <>
+      {messageArr.map((message, index) => {
+        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false);
+        return (
+          <Box key={index} sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: '#F5F5F5',
+            padding: '20px',
+          }}>
+            <NormaChatMessageBalloon.Root onMouseEnter={() => console.log('hover')} onMouseLeave={() => console.log('leave')}>
+              <NormaChatMessageBalloon.Row direction={message.direction} onMouseEnter={() => console.log('row hover')} onMouseLeave={() => console.log('row leave')}>
+                <NormaChatMessageBalloon.Content
+                  label={message.label}
+                  description={message.description}
+                  direction={message.direction}
+                  className={balloonClassNames}
+
+                />
+              </NormaChatMessageBalloon.Row>
+              <NormaChatMessageBalloon.Row direction={message.direction}>
+                <Avatar
+                  sx={{
+                    width: '30px',
+                    height: '30px',
+                    marginX: '10px',
+                    position: 'relative',
+                  }}
+                  src={avatars[message.direction].src}
+                  alt={avatars[message.direction].alt}
+                >
+                  <Typography
+                    sx={{
+                      position: 'absolute',
+                      top: '50%',
+                      left: '50%',
+                      transform: 'translate(-50%, -50%)',
+                    }}
+                  >
+                    {avatars[message.direction].alt}
+                  </Typography>
+                </Avatar>
+                <NormaChatMessageBalloon.Date date={message.date} />
+              </NormaChatMessageBalloon.Row>
+            </NormaChatMessageBalloon.Root>
+          </Box>
+        );
+      })}
+    </>
+  );
+};
+
+const TemplateWithChildren = () => {
+  return (
+    <>
+      {messageArr.map((message, index) => {
+        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false);
+        return (
+          <Box key={index} sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: '#F5F5F5',
+            padding: '20px',
+          }}>
+            <NormaChatMessageBalloon.Root onMouseEnter={() => console.log('hover')} onMouseLeave={() => console.log('leave')}>
+              <NormaChatMessageBalloon.Row direction={message.direction} onMouseEnter={() => console.log('row hover')} onMouseLeave={() => console.log('row leave')}>
+                <NormaChatMessageBalloon.Content
+                  label={message.label}
+                  description={message.description}
+                  direction={message.direction}
+                  className={balloonClassNames}
+                />
+              </NormaChatMessageBalloon.Row>
+              <NormaChatMessageBalloon.Row direction={message.direction}>
+                <NormaChatMessageBalloon.Date date={message.date} />
+              </NormaChatMessageBalloon.Row>
+              {/* Children located here */}
+              <NormaChatMessageBalloon.Row direction={message.direction}>
+                <IconButton>
+                  <IconifyIcon iconName="bx:bx-smile" size='2rem' color='#E18B50' />
+                </IconButton>
+                <IconButton>
+                  <IconifyIcon iconName="uil:atom" size='2rem' color='#E18B50' />
+                </IconButton>
+                <p>...children</p>
+              </NormaChatMessageBalloon.Row>
+
+            </NormaChatMessageBalloon.Root>
+          </Box>
+        );
+      })}
+    </>
+  );
+};
+
+const SimplifiedTemplate = () => {
+  return (
+    <>
+      {messageArr.map((message, index) => {
+        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false);
+        return (
+          <Box key={index} sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: '#F5F5F5',
+            padding: '20px',
+          }}>
+            <NormaChatMessageBalloon.Root onMouseEnter={() => console.log('hover')} onMouseLeave={() => console.log('leave')}>
+              <NormaChatMessageBalloon.MessageItem
+                direction={message.direction}
+                label={message.label}
+                description={message.description}
+                onMouseEnter={() => console.log('row hover')}
+                onMouseLeave={() => console.log('row leave')}
+                className={balloonClassNames}
+                avatar={avatars[message.direction]}
+                children={
+                  <>
+                    <IconButton>
+                      <IconifyIcon iconName="bx:bx-smile" size='2rem' color='#E18B50' />
+                    </IconButton>
+                    <IconButton>
+                      <IconifyIcon iconName="uil:atom" size='2rem' color='#E18B50' />
+                    </IconButton>
+                    <p>...children</p>
+                  </>
+                }
+              />
+            </NormaChatMessageBalloon.Root>
+          </Box>
+        );
+      })}
+    </>
+  );
+};
+
+const meta = {
+  title: 'Norma/ChatMessageBalloon',
+  component: Template,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Template>;
+
+export default meta;
+
+export const Default = Template.bind({});
+export const WithAvatar = TemplateWithAvatar.bind({});
+export const WithChildren = TemplateWithChildren.bind({});
+export const Simplified = SimplifiedTemplate.bind({});

package/src/stories/Icons.stories.mdx

@@ -1,27 +0,0 @@
-import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import { Box, Card, Grid, Typography, Paper } from "@mui/material";
-import { palette } from "../helpers";
-import { iconsSVG } from "../components/Svgs";
-import { Icons } from "../components/Icons";
-
-<Meta title="Display/Icons" />
-
-<Grid container spacing={2}>
-  <Grid item xs={12}>
-    <Typography variant="h5">Norma DS Icons</Typography>
-  </Grid>
-  {Object.keys(iconsSVG).map((key) => (
-    <Grid item xs={3} key={key}>
-      <Paper sx={{ padding: 2 }}>
-        <Typography variant={"body1"}> {key} </Typography>
-        <Icons icon={key} scale="xsmall" />
-        <Icons icon={key} scale="small" color="secondary" />
-        <Icons icon={key} scale="medium" color="error" />
-        <Icons icon={key} scale="large" color="warning" />
-        <Icons icon={key} scale="xlarge" color="success" />
-        <Icons icon={key} scale="2xlarge" color="black" />
-        <Icons icon={key} scale="3xlarge" color="primary" />
-      </Paper>
-    </Grid>
-  ))}
-</Grid>