norma-library 0.5.142 → 0.5.144

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { OnAction } from '@/types';
+interface ModalStatusProps {
+    title: string;
+    text: string;
+    type: 'success' | 'info' | 'warning';
+    actions: OnAction[];
+}
+export declare const ModalStatus: (props: ModalStatusProps) => React.JSX.Element;
+export {};

package/dist/esm/components/StatusModal/StatusModal.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { WarningRounded, CheckCircleRounded, InfoRounded } from '@mui/icons-material';
+import * as S from './StatusModal.style';
+import { Button } from '../Button';
+export var ModalStatus = function (props) {
+    var title = props.title, text = props.text, type = props.type, actions = props.actions;
+    var iconBgColor = {
+        warning: '#FFDB9F',
+        info: '#D9FCFE',
+        success: '#C9F5CB',
+    };
+    return (React.createElement(S.Container, null,
+        React.createElement(S.Modal, null,
+            React.createElement(S.ModalHeader, null,
+                React.createElement(S.ModalIcon, { "$bg": iconBgColor[type] },
+                    type === 'warning' && React.createElement(WarningRounded, { sx: { fill: '#B74608' } }),
+                    type === 'info' && React.createElement(InfoRounded, { sx: { fill: '#154F8C' } }),
+                    type === 'success' && React.createElement(CheckCircleRounded, { sx: { fill: '#2E7D32' } })),
+                React.createElement(S.ModalTitle, null, title)),
+            React.createElement(S.ModalBody, null,
+                React.createElement(S.ModalText, null, text)),
+            React.createElement(S.ModalFooter, null, actions.map(function (action, key) {
+                return (React.createElement(Button, { key: key, color: action.color || 'primary', variant: action.variant || 'contained', disabled: action.disabled, onClick: action.action }, action.label));
+            })))));
+};
+//# sourceMappingURL=StatusModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusModal.js","sourceRoot":"","sources":["../../../../src/components/StatusModal/StatusModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEtF,OAAO,KAAK,CAAC,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAUnC,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,KAAuB;IACzC,IAAA,KAAK,GAA0B,KAAK,MAA/B,EAAE,IAAI,GAAoB,KAAK,KAAzB,EAAE,IAAI,GAAc,KAAK,KAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;IAE7C,IAAM,WAAW,GAAG;QAClB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,SAAS;KACnB,CAAC;IAEF,OAAO,CACL,oBAAC,CAAC,CAAC,SAAS;QACV,oBAAC,CAAC,CAAC,KAAK;YACN,oBAAC,CAAC,CAAC,WAAW;gBACZ,oBAAC,CAAC,CAAC,SAAS,WAAM,WAAW,CAAC,IAAI,CAAC;oBAChC,IAAI,KAAK,SAAS,IAAI,oBAAC,cAAc,IAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,GAAI;oBACjE,IAAI,KAAK,MAAM,IAAI,oBAAC,WAAW,IAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,GAAI;oBAC3D,IAAI,KAAK,SAAS,IAAI,oBAAC,kBAAkB,IAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,GAAI,CAC1D;gBACd,oBAAC,CAAC,CAAC,UAAU,QAAE,KAAK,CAAgB,CACtB;YAChB,oBAAC,CAAC,CAAC,SAAS;gBACV,oBAAC,CAAC,CAAC,SAAS,QAAE,IAAI,CAAe,CACrB;YACd,oBAAC,CAAC,CAAC,WAAW,QACX,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,GAAG;gBACvB,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,SAAS,EAChC,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,WAAW,EACtC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,MAAM,CAAC,MAAM,IAErB,MAAM,CAAC,KAAK,CACN,CACV,CAAC;YACJ,CAAC,CAAC,CACY,CACR,CACE,CACf,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/StatusModal/StatusModal.style.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Modal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ModalHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ModalIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $bg: string;
+}>> & string;
+export declare const ModalTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const ModalBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ModalText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const ModalFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,12 @@
+import { __makeTemplateObject } from "tslib";
+import styled from 'styled-components';
+export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: rgba(0, 0, 0, 0.6);\n  z-index: 999;\n"], ["\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: rgba(0, 0, 0, 0.6);\n  z-index: 999;\n"])));
+export var Modal = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  width: 430px;\n  padding: 24px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  border-radius: 4px;\n  background: #fff;\n"], ["\n  display: flex;\n  width: 430px;\n  padding: 24px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  border-radius: 4px;\n  background: #fff;\n"])));
+export var ModalHeader = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  gap: 16px;\n  align-self: stretch;\n  align-items: center;\n"], ["\n  display: flex;\n  gap: 16px;\n  align-self: stretch;\n  align-items: center;\n"])));
+export var ModalIcon = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  padding: 4px;\n  align-items: center;\n  border-radius: 4px;\n  background-color: ", ";\n"], ["\n  display: flex;\n  padding: 4px;\n  align-items: center;\n  border-radius: 4px;\n  background-color: ", ";\n"])), function (props) { return props.$bg; });
+export var ModalTitle = styled.h1(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: #1d1d1d;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 500;\n  letter-spacing: 0.25px;\n  margin: 0;\n"], ["\n  color: #1d1d1d;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 500;\n  letter-spacing: 0.25px;\n  margin: 0;\n"])));
+export var ModalBody = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  border-bottom: 2px solid #a3a3a3;\n  margin-top: 16px;\n  padding-bottom: 32px;\n"], ["\n  display: flex;\n  width: 100%;\n  border-bottom: 2px solid #a3a3a3;\n  margin-top: 16px;\n  padding-bottom: 32px;\n"])));
+export var ModalText = styled.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: rgba(0, 0, 0, 0.87);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  letter-spacing: 0.17px;\n  margin: 0;\n"], ["\n  color: rgba(0, 0, 0, 0.87);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  letter-spacing: 0.17px;\n  margin: 0;\n"])));
+export var ModalFooter = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n  margin-top: 8px;\n  gap: 8px;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n  margin-top: 8px;\n  gap: 8px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=StatusModal.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusModal.style.js","sourceRoot":"","sources":["../../../../src/components/StatusModal/StatusModal.style.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,+QAAA,4MAWlC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,2PAAA,wLAS9B,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,uJAAA,oFAKpC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,oLAAiB,0GAK9B,EAAkB,KACvC,KADqB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,EAAT,CAAS,CACvC,CAAC;AAEF,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,EAAE,mMAAA,gIAOlC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,4LAAA,yHAMlC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,CAAC,+MAAA,4IAOhC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,wKAAA,qGAMpC,IAAA,CAAC"}

package/dist/esm/index.d.ts

@@ -27,4 +27,5 @@ import TextInput from './components/TextInput';
 import Table from './components/Table';
 import UncontrolledTable from './components/UncontrolledTable';
 import UncontrolledTabs from './components/UncontrolledTabs/UncontrolledTabs';
-export { Accordion, Button, Card, ChatMessage, ChatMessageBalloon, CheckBox, DatePicker, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, NormaProvider, themes, DateInput, Box, Breadcrumb, SelectInput, MultiSelectInput, Text, Title, TextInput, Table, UncontrolledTable, UncontrolledTabs };
+import { ModalStatus } from './components/StatusModal/StatusModal';
+export { Accordion, Button, Card, ChatMessage, ChatMessageBalloon, CheckBox, DatePicker, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, NormaProvider, themes, DateInput, Box, Breadcrumb, SelectInput, MultiSelectInput, Text, Title, TextInput, Table, UncontrolledTable, UncontrolledTabs, ModalStatus, };

package/dist/esm/index.js

@@ -27,5 +27,6 @@ import TextInput from './components/TextInput';
 import Table from './components/Table';
 import UncontrolledTable from './components/UncontrolledTable';
 import UncontrolledTabs from './components/UncontrolledTabs/UncontrolledTabs';
-export { Accordion, Button, Card, ChatMessage, ChatMessageBalloon, CheckBox, DatePicker, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, NormaProvider, themes, DateInput, Box, Breadcrumb, SelectInput, MultiSelectInput, Text, Title, TextInput, Table, UncontrolledTable, UncontrolledTabs };
+import { ModalStatus } from './components/StatusModal/StatusModal';
+export { Accordion, Button, Card, ChatMessage, ChatMessageBalloon, CheckBox, DatePicker, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, NormaProvider, themes, DateInput, Box, Breadcrumb, SelectInput, MultiSelectInput, Text, Title, TextInput, Table, UncontrolledTable, UncontrolledTabs, ModalStatus, };
 //# 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,MAAM,cAAc,CAAC;AAC/D,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,CAAA;AAClC,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,CAAA;AACrD,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;AAI9E,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,UAAU,EACV,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,GAAG,EACH,SAAS,EACT,aAAa,EACb,MAAM,EACN,SAAS,EACT,GAAG,EACH,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,iBAAiB,EACjB,gBAAgB,EACjB,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,MAAM,cAAc,CAAC;AAC/D,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,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,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,UAAU,EACV,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,GAAG,EACH,SAAS,EACT,aAAa,EACb,MAAM,EACN,SAAS,EACT,GAAG,EACH,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,GACZ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.5.142",
+  "version": "0.5.144",
   "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/StatusModal/StatusModal.style.tsx

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 999;
+`;
+
+export const Modal = styled.div`
+  display: flex;
+  width: 430px;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  border-radius: 4px;
+  background: #fff;
+`;
+
+export const ModalHeader = styled.div`
+  display: flex;
+  gap: 16px;
+  align-self: stretch;
+  align-items: center;
+`;
+
+export const ModalIcon = styled.div<{ $bg: string }>`
+  display: flex;
+  padding: 4px;
+  align-items: center;
+  border-radius: 4px;
+  background-color: ${props => props.$bg};
+`;
+
+export const ModalTitle = styled.h1`
+  color: #1d1d1d;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.25px;
+  margin: 0;
+`;
+
+export const ModalBody = styled.div`
+  display: flex;
+  width: 100%;
+  border-bottom: 2px solid #a3a3a3;
+  margin-top: 16px;
+  padding-bottom: 32px;
+`;
+
+export const ModalText = styled.p`
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.17px;
+  margin: 0;
+`;
+
+export const ModalFooter = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  margin-top: 8px;
+  gap: 8px;
+`;

package/src/components/StatusModal/StatusModal.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { WarningRounded, CheckCircleRounded, InfoRounded } from '@mui/icons-material';
+
+import * as S from './StatusModal.style';
+import { Button } from '../Button';
+import { OnAction } from '@/types';
+
+interface ModalStatusProps {
+  title: string;
+  text: string;
+  type: 'success' | 'info' | 'warning';
+  actions: OnAction[];
+}
+
+export const ModalStatus = (props: ModalStatusProps) => {
+  const { title, text, type, actions } = props;
+
+  const iconBgColor = {
+    warning: '#FFDB9F',
+    info: '#D9FCFE',
+    success: '#C9F5CB',
+  };
+
+  return (
+    <S.Container>
+      <S.Modal>
+        <S.ModalHeader>
+          <S.ModalIcon $bg={iconBgColor[type]}>
+            {type === 'warning' && <WarningRounded sx={{ fill: '#B74608' }} />}
+            {type === 'info' && <InfoRounded sx={{ fill: '#154F8C' }} />}
+            {type === 'success' && <CheckCircleRounded sx={{ fill: '#2E7D32' }} />}
+          </S.ModalIcon>
+          <S.ModalTitle>{title}</S.ModalTitle>
+        </S.ModalHeader>
+        <S.ModalBody>
+          <S.ModalText>{text}</S.ModalText>
+        </S.ModalBody>
+        <S.ModalFooter>
+          {actions.map((action, key) => {
+            return (
+              <Button
+                key={key}
+                color={action.color || 'primary'}
+                variant={action.variant || 'contained'}
+                disabled={action.disabled}
+                onClick={action.action}
+              >
+                {action.label}
+              </Button>
+            );
+          })}
+        </S.ModalFooter>
+      </S.Modal>
+    </S.Container>
+  );
+};

package/src/index.ts

@@ -18,17 +18,16 @@ import { ChatMessage, ChatMessageBalloon } from './components';
 import { NormaProvider } from './providers/NormaProvider';
 import { themes, getPalette } from './helpers';
 import DateInput from './components/DateInput';
-import Box from './components/Box'
+import Box from './components/Box';
 import Breadcrumb from './components/Breadcrumb';
 import SelectInput from './components/SelectInput';
 import MultiSelectInput from './components/MultiSelectInput';
-import { Title, Text } from './components/Typography'
+import { Title, Text } from './components/Typography';
 import TextInput from './components/TextInput';
 import Table from './components/Table';
 import UncontrolledTable from './components/UncontrolledTable';
 import UncontrolledTabs from './components/UncontrolledTabs/UncontrolledTabs';
-
-
+import { ModalStatus } from './components/StatusModal/StatusModal';
 
 export {
   Accordion,
@@ -62,5 +61,6 @@ export {
   TextInput,
   Table,
   UncontrolledTable,
-  UncontrolledTabs
+  UncontrolledTabs,
+  ModalStatus,
 };

package/src/stories/ModalStatus.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+import { ModalStatus } from '../components/StatusModal/StatusModal';
+import { OnAction } from '../types';
+
+const actions: OnAction[] = [
+  {
+    label: 'Cancelar',
+    action: () => {},
+  },
+  {
+    label: 'Entendi',
+    action: () => {},
+  },
+];
+
+const meta = {
+  title: 'Layout/ModalStatus',
+  component: ModalStatus,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof ModalStatus>;
+
+export default meta;
+
+export const ModalSuccess = () => {
+  return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." actions={actions} type="success" />;
+};
+
+ModalSuccess.storyName = 'Modal Success';
+
+export const ModalWarning = () => {
+  return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." actions={actions} type="warning" />;
+};
+
+ModalWarning.storyName = 'Modal Warning';
+
+export const ModalInfo = () => {
+  return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." type="info" actions={actions} />;
+};
+
+ModalInfo.storyName = 'Modal Info';