norma-library 0.5.80 → 0.5.802

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

@@ -6,7 +6,7 @@ export var ChatMessageBalloonContainerStyle = styled(Box)({
     flexDirection: "column",
 });
 export var ChatMessageBalloonRowStyle = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 8px;\n  flex-direction: ", ";\n\n  &:last-child {\n    margin-bottom: 0px;\n  }\n"], ["\n  display: flex;\n  margin-bottom: 8px;\n  flex-direction: ", ";\n\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: 1px 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: 1px 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 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: .5;\n"], ["\n  color: #43425D;\n  opacity: .5;\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;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ModalBaseProps } from '../interfaces';
 export declare function Close(): React.JSX.Element;
-export declare const Modal: ({ open, children, ...props }: ModalBaseProps) => React.JSX.Element;
+export declare const Modal: ({ open, children, paperProps, ...props }: ModalBaseProps) => React.JSX.Element;

package/dist/esm/components/Modal.js

@@ -5,7 +5,7 @@ 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"], ["\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 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  background-color: #FFF;\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  background-color: #FFF;\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"])));
@@ -14,9 +14,10 @@ export function Close() {
         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" })));
 }
 export var Modal = function (_a) {
-    var open = _a.open, children = _a.children, props = __rest(_a, ["open", "children"]);
+    var open = _a.open, children = _a.children, paperProps = _a.paperProps, props = __rest(_a, ["open", "children", "paperProps"]);
+    console.log('RICK :: paperProps', paperProps, props);
     return (React.createElement(ModalStyled, __assign({ open: true }, props),
-        React.createElement(ModalContentStyled, null,
+        React.createElement(ModalContentStyled, __assign({}, paperProps),
             props.title && (React.createElement(ModalHeaderStyled, null,
                 React.createElement(Typography, { variant: 'h2' }, props.title),
                 React.createElement(IconButton, { onClick: props.onClose, size: "small", color: "inherit", variant: "text", cursor: "pointer", sx: { padding: "0" } },

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,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"}
+{"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,sRAAA,mNAUvC,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,EAAwD;IAAtD,IAAA,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,UAAU,gBAAA,EAAK,KAAK,cAAtC,kCAAwC,CAAF;IAC1D,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,UAAU,EAAE,KAAK,CAAC,CAAA;IACpD,OAAO,CACL,oBAAC,WAAW,aAAC,IAAI,UAAK,KAAK;QACzB,oBAAC,kBAAkB,eAAK,UAAU;YAC/B,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/Modal.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { SxProps } from '@mui/material';
 import { Theme } from '@emotion/react';
-import { MuiModalBaseProps, OnAction } from '@/types';
+import { MuiModalBaseProps, MuiPaperBaseProps, OnAction } from '@/types';
 export interface ModalBaseProps extends MuiModalBaseProps {
     sx?: SxProps<Theme>;
     children: React.ReactElement;
@@ -12,4 +12,5 @@ export interface ModalBaseProps extends MuiModalBaseProps {
     full?: boolean;
     title?: string;
     id?: string;
+    paperProps?: MuiPaperBaseProps;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.5.80",
+  "version": "0.5.802",
   "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.style.ts

@@ -18,7 +18,7 @@ export const ChatMessageBalloonRowStyle = styled('div')<{ direction: string }>`
 
 export const ChatMessageBalloonStyle = styled('div')<{ direction: string }>`
   background-color: ${(props) => (props.direction === "I") ? "#FFF" : "#E18B50"};
-  border: 1px solid transparent;
+  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"};

package/src/components/Modal.tsx

@@ -15,7 +15,7 @@ const ModalContentStyled = styled(Paper)`
   left: 50%;
   width: 421px;
   transform: translate(-50%, -50%);
-  bgcolor: background.paper;
+  background-color: #FFF;
   box-shadow: 24px;
 `;
 
@@ -69,11 +69,11 @@ export function Close() {
   );
 }
 
-export const Modal = ({ open, children, ...props }: ModalBaseProps) => {
-  
+export const Modal = ({ open, children, paperProps, ...props }: ModalBaseProps) => {
+  console.log('RICK :: paperProps', paperProps, props)
   return (
     <ModalStyled open {...props}>
-      <ModalContentStyled>
+      <ModalContentStyled {...paperProps}>
         {props.title && (
           <ModalHeaderStyled>
             <Typography variant='h2'>{props.title}</Typography>

package/src/interfaces/Modal.ts

@@ -1,6 +1,6 @@
 import { SxProps } from '@mui/material';
 import { Theme } from '@emotion/react';
-import { MuiModalBaseProps, OnAction } from '@/types';
+import { MuiModalBaseProps, MuiPaperBaseProps, OnAction } from '@/types';
 
 export interface ModalBaseProps extends MuiModalBaseProps {
   sx?: SxProps<Theme>;
@@ -12,4 +12,5 @@ export interface ModalBaseProps extends MuiModalBaseProps {
   full?: boolean;
   title?: string;
   id?: string;
+  paperProps?: MuiPaperBaseProps;
 }

package/src/stories/Modal.stories.tsx

@@ -120,6 +120,11 @@ export const ModalAction = () => {
           aria-labelledby="modal-modal-title"
           aria-describedby="modal-modal-description"
           action={defaultAction}
+          paperProps={{
+            sx: {
+              width: "90vw"
+            }
+          }}
         >
           <>
             <Typography id="modal-modal-title" variant="h6" component="h2">