norma-library 0.5.73 → 0.5.75

package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { Typography } from '@mui/material';
 import * as S from './ChatMessageBalloon.style';
 export var ChatMessageBalloon = function (_a) {
-    var label = _a.label, description = _a.description, date = _a.date, direction = _a.direction, children = _a.children, className = _a.className, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
+    var label = _a.label, description = _a.description, date = _a.date, direction = _a.direction, children = _a.children, className = _a.className, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onRowMouseEnter = _a.onRowMouseEnter, onRowMouseLeave = _a.onRowMouseLeave;
     return (React.createElement(S.ChatMessageBalloonContainerStyle, { className: className },
-        React.createElement(S.ChatMessageBalloonRowStyle, { direction: direction },
+        React.createElement(S.ChatMessageBalloonRowStyle, { direction: direction, onMouseLeave: onRowMouseLeave, onMouseEnter: onRowMouseEnter },
             React.createElement(S.ChatMessageBalloonStyle, { onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, direction: direction, className: !!onMouseEnter ? 'is-interactive' : "" },
                 React.createElement(Typography, { variant: "subtitle2", style: {
                         fontSize: "1rem",

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageBalloon.js","sourceRoot":"","sources":["../../../../src/components/ChatMessageBalloon/ChatMessageBalloon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,4BAA4B,CAAA;AAG/C,MAAM,CAAC,IAAM,kBAAkB,GAAsC,UAAC,EAAwF;QAAtF,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,YAAY,kBAAA;IAC1J,OAAO,CACL,oBAAC,CAAC,CAAC,gCAAgC,IAAC,SAAS,EAAE,SAAS;QACtD,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS;YAChD,oBAAC,CAAC,CAAC,uBAAuB,IAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;gBACxJ,oBAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE;wBACL,QAAQ,EAAE,MAAM;wBAChB,UAAU,EAAE,KAAK;wBACjB,YAAY,EAAE,KAAK;qBACpB,IAEA,KAAK,CACK;gBACZ,WAAW,CACc;YAC5B,oBAAC,CAAC,CAAC,wBAAwB,IAAC,SAAS,EAAE,SAAS,IAC7C,QAAQ,CACkB,CACA;QAC/B,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS;YAChD,oBAAC,CAAC,CAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,IAAG,IAAI,CAA0B,CAC9C,CACI,CACtC,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"ChatMessageBalloon.js","sourceRoot":"","sources":["../../../../src/components/ChatMessageBalloon/ChatMessageBalloon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,4BAA4B,CAAA;AAG/C,MAAM,CAAC,IAAM,kBAAkB,GAAsC,UAAC,EAA0H;QAAxH,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,YAAY,kBAAA,EAAE,eAAe,qBAAA,EAAE,eAAe,qBAAA;IAC5L,OAAO,CACL,oBAAC,CAAC,CAAC,gCAAgC,IAAC,SAAS,EAAE,SAAS;QACtD,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,eAAe;YAC9G,oBAAC,CAAC,CAAC,uBAAuB,IAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;gBACxJ,oBAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE;wBACL,QAAQ,EAAE,MAAM;wBAChB,UAAU,EAAE,KAAK;wBACjB,YAAY,EAAE,KAAK;qBACpB,IAEA,KAAK,CACK;gBACZ,WAAW,CACc;YAC5B,oBAAC,CAAC,CAAC,wBAAwB,IAAC,SAAS,EAAE,SAAS,IAC7C,QAAQ,CACkB,CACA;QAC/B,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS;YAChD,oBAAC,CAAC,CAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,IAAG,IAAI,CAA0B,CAC9C,CACI,CACtC,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/Modal.js

@@ -1,13 +1,14 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React from 'react';
-import { Modal as MuiModal, Paper, Box } from '@mui/material';
+import { Modal as MuiModal, Paper, Box, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { IconButton } from './IconButton';
 import { Button } from './Button';
 var ModalStyled = styled(MuiModal)({});
-var ModalContentStyled = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid #00000033;\n  border-radius: 4px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 421px;\n  transform: translate(-50%, -50%);\n  bgcolor: background.paper;\n  box-shadow: 24px;\n  padding: 16px;\n"], ["\n  border: 1px solid #00000033;\n  border-radius: 4px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 421px;\n  transform: translate(-50%, -50%);\n  bgcolor: background.paper;\n  box-shadow: 24px;\n  padding: 16px;\n"])));
-var ModalHeaderStyled = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: left;\n  border-bottom: 1px solid #00000033;\n  margin: 0;\n  top: -5px;\n  position: relative;\n  padding: 0 5px;\n  display: flex;\n\n  & h2 {\n    font: normal normal 600 18px/30px Source Sans Pro;\n    color: #292929;\n  }\n"], ["\n  text-align: left;\n  border-bottom: 1px solid #00000033;\n  margin: 0;\n  top: -5px;\n  position: relative;\n  padding: 0 5px;\n  display: flex;\n\n  & h2 {\n    font: normal normal 600 18px/30px Source Sans Pro;\n    color: #292929;\n  }\n"])));
-var ModalFooterStyled = styled(Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-align: left;\n  border-top: 1px solid #00000033;\n  margin-top: 16px;\n  bottom: -5px;\n  position: relative;\n  padding: 10px 5px 5px;\n  display: flex;\n  justify-content: end;\n"], ["\n  text-align: left;\n  border-top: 1px solid #00000033;\n  margin-top: 16px;\n  bottom: -5px;\n  position: relative;\n  padding: 10px 5px 5px;\n  display: flex;\n  justify-content: end;\n"])));
+var ModalContentStyled = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid #00000033;\n  border-radius: 4px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 421px;\n  transform: translate(-50%, -50%);\n  bgcolor: background.paper;\n  box-shadow: 24px;\n"], ["\n  border: 1px solid #00000033;\n  border-radius: 4px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 421px;\n  transform: translate(-50%, -50%);\n  bgcolor: background.paper;\n  box-shadow: 24px;\n"])));
+var ModalHeaderStyled = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: left;\n  border-bottom: 1px solid #00000033;\n  box-sizing: border-box;\n  margin: 0;\n  position: relative;\n  padding: 22px 26px 15px 26px;\n  justify-content: space-between;\n  display: flex;\n\n  & h2 {\n    font: normal normal 600 18px/30px Source Sans Pro;\n    color: #292929;\n  }\n"], ["\n  text-align: left;\n  border-bottom: 1px solid #00000033;\n  box-sizing: border-box;\n  margin: 0;\n  position: relative;\n  padding: 22px 26px 15px 26px;\n  justify-content: space-between;\n  display: flex;\n\n  & h2 {\n    font: normal normal 600 18px/30px Source Sans Pro;\n    color: #292929;\n  }\n"])));
+var ModalFooterStyled = styled(Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-top: 1px solid #00000033;\n  box-sizing: border-box;\n  position: relative;\n  padding: 24px;\n  display: flex;\n  justify-content: end;\n  gap: 24px;\n"], ["\n  border-top: 1px solid #00000033;\n  box-sizing: border-box;\n  position: relative;\n  padding: 24px;\n  display: flex;\n  justify-content: end;\n  gap: 24px;\n"])));
+var ModalContainerChildrenStyled = styled(Box)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding: 24px;\n"], ["\n  box-sizing: border-box;\n  padding: 24px;\n"])));
 export function Close() {
     return (React.createElement("svg", { fill: "#808080", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", height: "24", width: "24" },
         React.createElement("path", { clipRule: "evenodd", fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" })));
@@ -17,12 +18,11 @@ export var Modal = function (_a) {
     return (React.createElement(ModalStyled, __assign({ open: true }, props),
         React.createElement(ModalContentStyled, null,
             props.title && (React.createElement(ModalHeaderStyled, null,
-                React.createElement(React.Fragment, null,
-                    React.createElement("h2", null, props.title),
-                    React.createElement(IconButton, { onClick: props.onClose, size: "small", color: "inherit", variant: "text", cursor: "pointer", sx: { position: 'absolute', right: 0, top: 5 } },
-                        React.createElement(Close, null))))),
-            children,
-            props.action && (React.createElement(ModalFooterStyled, null, props.action.map(function (item, key) { return (React.createElement(Button, { color: item.color, variant: item.variant, key: key, onClick: item.action, style: { marginLeft: 10 } }, item.label)); }))))));
+                React.createElement(Typography, { variant: 'h2' }, props.title),
+                React.createElement(IconButton, { onClick: props.onClose, size: "small", color: "inherit", variant: "text", cursor: "pointer", sx: { padding: "0" } },
+                    React.createElement(Close, null)))),
+            React.createElement(ModalContainerChildrenStyled, null, children),
+            props.action && (React.createElement(ModalFooterStyled, null, props.action.map(function (item, key) { return (React.createElement(Button, { color: item.color, variant: item.variant, key: key, onClick: item.action, size: item.size }, item.label)); }))))));
 };
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 //# sourceMappingURL=Modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAE9D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,IAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AAEzC,IAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,2SAAA,wOAWvC,IAAA,CAAC;AAEF,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,yTAAA,sPAapC,IAAA,CAAC;AAEF,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,kQAAA,+LASpC,IAAA,CAAC;AAEF,MAAM,UAAU,KAAK;IACnB,OAAO,CACL,6BACE,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI;QAEV,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+LAA+L,GACjM,CACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,IAAM,KAAK,GAAG,UAAC,EAA4C;IAA1C,IAAA,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA1B,oBAA4B,CAAF;IAE9C,OAAO,CACL,oBAAC,WAAW,aAAC,IAAI,UAAK,KAAK;QACzB,oBAAC,kBAAkB;YAChB,KAAK,CAAC,KAAK,IAAI,CACd,oBAAC,iBAAiB;gBAChB;oBACE,gCAAK,KAAK,CAAC,KAAK,CAAM;oBACtB,oBAAC,UAAU,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,MAAM,EACd,MAAM,EAAC,SAAS,EAChB,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE;wBAE9C,oBAAC,KAAK,OAAG,CACE,CACZ,CACe,CACrB;YACA,QAAQ;YACR,KAAK,CAAC,MAAM,IAAI,CACf,oBAAC,iBAAiB,QACf,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CAC/B,oBAAC,MAAM,IACL,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,KAAK,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,IAExB,IAAI,CAAC,KAAK,CACJ,CACV,EAVgC,CAUhC,CAAC,CACgB,CACrB,CACkB,CACT,CACf,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,IAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AAEzC,IAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,yRAAA,sNAUvC,IAAA,CAAC;AAEF,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,uXAAA,oTAcpC,IAAA,CAAC;AAEF,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,wOAAA,qKAQpC,IAAA,CAAC;AAEF,IAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAC,oHAAA,iDAG/C,IAAA,CAAC;AAEF,MAAM,UAAU,KAAK;IACnB,OAAO,CACL,6BACE,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI;QAEV,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+LAA+L,GACjM,CACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,IAAM,KAAK,GAAG,UAAC,EAA4C;IAA1C,IAAA,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA1B,oBAA4B,CAAF;IAE9C,OAAO,CACL,oBAAC,WAAW,aAAC,IAAI,UAAK,KAAK;QACzB,oBAAC,kBAAkB;YAChB,KAAK,CAAC,KAAK,IAAI,CACd,oBAAC,iBAAiB;gBAChB,oBAAC,UAAU,IAAC,OAAO,EAAC,IAAI,IAAE,KAAK,CAAC,KAAK,CAAc;gBACnD,oBAAC,UAAU,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,MAAM,EACd,MAAM,EAAC,SAAS,EAChB,EAAE,EAAE,EAAC,OAAO,EAAE,GAAG,EAAC;oBAElB,oBAAC,KAAK,OAAG,CACE,CACK,CACrB;YACD,oBAAC,4BAA4B,QAC1B,QAAQ,CACoB;YAC9B,KAAK,CAAC,MAAM,IAAI,CACf,oBAAC,iBAAiB,QACf,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CAC/B,oBAAC,MAAM,IACL,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,IAEd,IAAI,CAAC,KAAK,CACJ,CACV,EAVgC,CAUhC,CAAC,CACgB,CACrB,CACkB,CACT,CACf,CAAC;AACJ,CAAC,CAAC"}

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

@@ -6,6 +6,8 @@ export interface ChatMessageBalloonProps {
     direction: "I" | "O";
     onMouseEnter?: MouseEventHandler<HTMLDivElement>;
     onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+    onRowMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onRowMouseLeave?: MouseEventHandler<HTMLDivElement>;
     attachments?: string[];
     children?: ReactNode;
     className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.5.73",
+  "version": "0.5.75",
   "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/ChatMessageBalloon/ChatMessageBalloon.tsx

@@ -4,10 +4,10 @@ import { ChatMessageBalloonProps } from '../../interfaces';
 import * as S from './ChatMessageBalloon.style'
 
 
-export const ChatMessageBalloon: React.FC<ChatMessageBalloonProps> = ({ label, description, date, direction, children, className, onMouseEnter, onMouseLeave }) => {
+export const ChatMessageBalloon: React.FC<ChatMessageBalloonProps> = ({ label, description, date, direction, children, className, onMouseEnter, onMouseLeave, onRowMouseEnter, onRowMouseLeave }) => {
   return (
     <S.ChatMessageBalloonContainerStyle className={className}>
-      <S.ChatMessageBalloonRowStyle direction={direction}>
+      <S.ChatMessageBalloonRowStyle direction={direction} onMouseLeave={onRowMouseLeave} onMouseEnter={onRowMouseEnter}>
         <S.ChatMessageBalloonStyle onMouseLeave={onMouseLeave} onMouseEnter={onMouseEnter} direction={direction} className={!!onMouseEnter ? 'is-interactive' : ""}>
           <Typography
             variant="subtitle2"

package/src/components/Modal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal as MuiModal, Paper, Box } from '@mui/material';
+import { Modal as MuiModal, Paper, Box, Typography } from '@mui/material';
 import { ModalBaseProps } from '../interfaces';
 import { styled } from '@mui/material/styles';
 import { IconButton } from './IconButton';
@@ -17,16 +17,16 @@ const ModalContentStyled = styled(Paper)`
   transform: translate(-50%, -50%);
   bgcolor: background.paper;
   box-shadow: 24px;
-  padding: 16px;
 `;
 
 const ModalHeaderStyled = styled(Box)`
   text-align: left;
   border-bottom: 1px solid #00000033;
+  box-sizing: border-box;
   margin: 0;
-  top: -5px;
   position: relative;
-  padding: 0 5px;
+  padding: 22px 26px 15px 26px;
+  justify-content: space-between;
   display: flex;
 
   & h2 {
@@ -36,14 +36,18 @@ const ModalHeaderStyled = styled(Box)`
 `;
 
 const ModalFooterStyled = styled(Box)`
-  text-align: left;
   border-top: 1px solid #00000033;
-  margin-top: 16px;
-  bottom: -5px;
+  box-sizing: border-box;
   position: relative;
-  padding: 10px 5px 5px;
+  padding: 24px;
   display: flex;
   justify-content: end;
+  gap: 24px;
+`;
+
+const ModalContainerChildrenStyled = styled(Box)`
+  box-sizing: border-box;
+  padding: 24px;
 `;
 
 export function Close() {
@@ -72,22 +76,22 @@ export const Modal = ({ open, children, ...props }: ModalBaseProps) => {
       <ModalContentStyled>
         {props.title && (
           <ModalHeaderStyled>
-            <>
-              <h2>{props.title}</h2>
-              <IconButton
-                onClick={props.onClose}
-                size="small"
-                color="inherit"
-                variant="text"
-                cursor="pointer"
-                sx={{ position: 'absolute', right: 0, top: 5 }}
-              >
-                <Close />
-              </IconButton>
-            </>
+            <Typography variant='h2'>{props.title}</Typography>
+            <IconButton
+              onClick={props.onClose}
+              size="small"
+              color="inherit"
+              variant="text"
+              cursor="pointer"
+              sx={{padding: "0"}}
+            >
+              <Close />
+            </IconButton>
           </ModalHeaderStyled>
         )}
-        {children}
+        <ModalContainerChildrenStyled>
+          {children}
+        </ModalContainerChildrenStyled>
         {props.action && (
           <ModalFooterStyled>
             {props.action.map((item, key) => (
@@ -96,7 +100,7 @@ export const Modal = ({ open, children, ...props }: ModalBaseProps) => {
                 variant={item.variant}
                 key={key}
                 onClick={item.action}
-                style={{ marginLeft: 10 }}
+                size={item.size}
               >
                 {item.label}
               </Button>

package/src/interfaces/ChatMessageBalloon.ts

@@ -7,6 +7,8 @@ export interface ChatMessageBalloonProps {
   direction: "I" | "O";
   onMouseEnter?: MouseEventHandler<HTMLDivElement>;
   onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+  onRowMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  onRowMouseLeave?: MouseEventHandler<HTMLDivElement>;
   attachments?: string[];
   children?:ReactNode;
   className?:string;