norma-library 0.4.7 → 0.4.8

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { ChatMessageProps } from "@/interfaces";
+export declare const ChatMessage: React.FC<ChatMessageProps>;

package/dist/esm/components/ChatMessage.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+var Item = styled(Box)(function (_a) {
+    var orient = _a.orient;
+    return ({
+        borderColor: "#ccc",
+        display: "flex",
+        position: "relative",
+        width: "100%",
+        justifyContent: orient === "replay" ? "flex-end" : "flex-start",
+        marginBottom: "10px",
+        alignItems: "center",
+    });
+});
+var ContainerStyled = styled(Box)({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    minWidth: "640px",
+    backgroundColor: "#F0F0F0",
+    padding: "10px",
+});
+var BoxStyled = styled(Box)(function (_a) {
+    var orient = _a.orient;
+    return ({
+        width: "70%",
+        backgroundColor: orient === "replay" ? "#E18B50" : "#FFF",
+        color: orient === "replay" ? "#FFF" : "#4D4F5C",
+        borderTopLeftRadius: 30,
+        borderTopRightRadius: 30,
+        borderBottomLeftRadius: orient === "me" ? 2 : 30,
+        borderBottomRightRadius: orient === "me" ? 30 : 2,
+        marginLeft: orient === "replay" ? "10px" : 0,
+        marginRight: orient === "me" ? "10px" : 0,
+        padding: 20,
+    });
+});
+export var ChatMessage = function (_a) {
+    var data = _a.data;
+    return (React.createElement(ContainerStyled, null, data.map(function (item, key) { return (React.createElement(Item, { key: key, orient: item.send },
+        item.emotion && item.send === "replay" && React.createElement(React.Fragment, null, item.emotion),
+        React.createElement(BoxStyled, { orient: item.send },
+            React.createElement(Typography, { variant: "subtitle2", style: {
+                    marginBottom: "5px",
+                    font: "normal normal 600 16px/20px Source Sans Pro",
+                } }, item.name),
+            React.createElement(Typography, { variant: "body1", style: {
+                    font: "normal normal normal 16px/20px Source Sans Pro",
+                } }, item.message),
+            React.createElement(Typography, { variant: "caption", style: {
+                    position: "absolute",
+                    bottom: "-18px",
+                    left: item.send === "me" ? 0 : "auto",
+                    right: item.send === "me" ? "auto" : 0,
+                    font: "normal normal normal 11px/13px Source Sans Pro",
+                    opacity: 0.5,
+                    color: "#4D4F5C",
+                } }, item.time)),
+        item.emotion && item.send === "me" && React.createElement(React.Fragment, null, item.emotion),
+        item.emotionReplay && item.send === "me" && (React.createElement(React.Fragment, null, item.emotionReplay)))); })));
+};
+//# sourceMappingURL=ChatMessage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.js","sourceRoot":"","sources":["../../../src/components/ChatMessage.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Icons.js

@@ -43,7 +43,7 @@ export var Icons = function (_a) {
     var fill = colors[color];
     var stroke = colors[color];
     var Svg = styled.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: inline-block;\n    shape-rendering: inherit;\n    vertical-align: middle;\n    fill: ", ";\n    path {\n      stroke: ", ";\n    }\n    circle {\n      stroke: ", ";\n    }\n    rect {\n      stroke: ", ";\n    }\n  "], ["\n    display: inline-block;\n    shape-rendering: inherit;\n    vertical-align: middle;\n    fill: ", ";\n    path {\n      stroke: ", ";\n    }\n    circle {\n      stroke: ", ";\n    }\n    rect {\n      stroke: ", ";\n    }\n  "])), fill, stroke, stroke, stroke);
-    return (React.createElement(Svg, __assign({ viewBox: "0 0 64 64", width: "".concat(width, "px"), height: "".concat(height, "px") }, props), useSymbol ? (React.createElement("use", { xlinkHref: "#icon--".concat(icon), fill: fill, stroke: stroke })) : (React.cloneElement(iconsSVG[icon], { fill: fill, stroke: stroke }))));
+    return (React.createElement(Svg, __assign({ viewBox: "0 0 56 56", width: "".concat(width, "px"), height: "".concat(height, "px") }, props), useSymbol ? (React.createElement("use", { xlinkHref: "#icon--".concat(icon), fill: fill, stroke: stroke })) : (React.cloneElement(iconsSVG[icon], { fill: fill, stroke: stroke }))));
 };
 var templateObject_1;
 //# sourceMappingURL=Icons.js.map

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

@@ -1,6 +1,3 @@
 import React from "react";
 import { ProgressBarBaseProps } from "../interfaces";
-export declare const ProgressBarLabelStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "p" | "style" | "className" | "classes" | "children" | "sx" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ProgressBar: ({ value, label, variant, total, ...props }: ProgressBarBaseProps) => React.JSX.Element;

package/dist/esm/components/ProgressBar.js

@@ -10,7 +10,7 @@ var ProgressBarStyled = styled(MuiProgressBar)({
     position: "relative",
     backgroundColor: "&.".concat(linearProgressClasses.determinate, " {\n    background-color: #e0e0e0,\n  }"),
 });
-export var ProgressBarLabelStyled = styled(Typography)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n  position: relative;\n  text-align: left;\n  font: normal normal normal 16px/20px Source Sans Pro;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n  position: relative;\n  text-align: left;\n  font: normal normal normal 16px/20px Source Sans Pro;\n"])));
+var ProgressBarLabelStyled = styled(Typography)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n  position: relative;\n  text-align: left;\n  font: normal normal normal 16px/20px Source Sans Pro;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n  position: relative;\n  text-align: left;\n  font: normal normal normal 16px/20px Source Sans Pro;\n"])));
 export var ProgressBar = function (_a) {
     var _b = _a.value, value = _b === void 0 ? 0 : _b, label = _a.label, _c = _a.variant, variant = _c === void 0 ? "determinate" : _c, total = _a.total, props = __rest(_a, ["value", "label", "variant", "total"]);
     var prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/components/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACL,cAAc,IAAI,cAAc,EAChC,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,UAAU,GACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,IAAM,iBAAiB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAC/C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,UAAU;IACpB,eAAe,EAAE,YAAK,qBAAqB,CAAC,WAAW,4CAErD;CACH,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,sBAAsB,GAAG,MAAM,CAAC,UAAU,CAAC,gRAAA,6MAQvD,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAML;IALrB,IAAA,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,KAAK,WAAA,EACL,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,KAAK,WAAA,EACF,KAAK,cALkB,sCAM3B,CADS;IAER,IAAM,eAAe,GAAG,aAAa,CAAC,8BAA8B,CAAC,CAAC;IACtE,IAAM,UAAU,GAAG,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAM,KAAK,GAAG,OAAO,CACnB,cAAM,OAAA,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAA9C,CAA8C,EACpD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK;QACzB,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;YAC9B,KAAK,IAAI,CACR,oBAAC,sBAAsB;gBACpB,KAAK;gBACN,8BAAM,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE;oBACtB,KAAK;;oBAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;yBAC1B,CACgB,CAC1B;YACD,oBAAC,iBAAiB,aAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,IAAM,KAAK,EAAI,CAC5D,CACQ,CACjB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/components/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACL,cAAc,IAAI,cAAc,EAChC,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,UAAU,GACX,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,IAAM,iBAAiB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAC/C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,UAAU;IACpB,eAAe,EAAE,YAAK,qBAAqB,CAAC,WAAW,4CAErD;CACH,CAAC,CAAC;AAEH,IAAM,sBAAsB,GAAG,MAAM,CAAC,UAAU,CAAC,gRAAA,6MAQhD,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAML;IALrB,IAAA,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,KAAK,WAAA,EACL,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,KAAK,WAAA,EACF,KAAK,cALkB,sCAM3B,CADS;IAER,IAAM,eAAe,GAAG,aAAa,CAAC,8BAA8B,CAAC,CAAC;IACtE,IAAM,UAAU,GAAG,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAM,KAAK,GAAG,OAAO,CACnB,cAAM,OAAA,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAA9C,CAA8C,EACpD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK;QACzB,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;YAC9B,KAAK,IAAI,CACR,oBAAC,sBAAsB;gBACpB,KAAK;gBACN,8BAAM,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE;oBACtB,KAAK;;oBAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;yBAC1B,CACgB,CAC1B;YACD,oBAAC,iBAAiB,aAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,IAAM,KAAK,EAAI,CAC5D,CACQ,CACjB,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { TimeLineBaseProps } from "@/interfaces/TimeLine";
+export declare const TimeLine: React.FC<TimeLineBaseProps>;

package/dist/esm/components/TimeLine.js

@@ -0,0 +1,59 @@
+var _a;
+import { __assign, __rest } from "tslib";
+import React, { useMemo } from "react";
+import { ThemeProvider, useMediaQuery, Typography } from "@mui/material";
+import { Timeline as MuiTimeLine, TimelineItem, timelineItemClasses, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot, } from "@mui/lab";
+import { styled } from "@mui/material/styles";
+import { palette, lightenRGB, themes } from "../helpers";
+var colorMap = {
+    inherit: palette.inherit,
+    primary: palette.primary,
+    secondary: palette.secondary,
+    error: palette.error,
+    warning: palette.warning,
+    info: palette.info,
+    success: palette.success,
+};
+var sampleData = [
+    {
+        title: "imported register",
+        data: "01/04/2023 at 07h00",
+        by: "By IEM",
+    },
+    {
+        title: "80% score applied on register",
+        data: "01/04/2023 at 07h05",
+        by: "By IEM",
+    },
+    {
+        title: "Registers transfered to campaign ID 10",
+        data: "",
+        by: "",
+    },
+];
+var TimeLineStyled = styled(MuiTimeLine)((_a = {},
+    _a["& .".concat(timelineItemClasses.root, ":before")] = {
+        flex: 0,
+        padding: 0,
+    },
+    _a));
+export var TimeLine = function (_a) {
+    var _b = _a.data, data = _b === void 0 ? sampleData : _b, _c = _a.color, color = _c === void 0 ? "primary" : _c, _d = _a.position, position = _d === void 0 ? "left" : _d, props = __rest(_a, ["data", "color", "position"]);
+    var prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+    var theme = useMemo(function () { return (prefersDarkMode ? themes.light : themes.light); }, [prefersDarkMode]);
+    var renderList = data.map(function (item, key) { return (React.createElement(TimelineItem, { key: key },
+        React.createElement(TimelineSeparator, null,
+            React.createElement(TimelineDot, { sx: {
+                    bgcolor: colorMap[color],
+                    p: "6px",
+                    border: "4px solid ".concat(lightenRGB(colorMap[color], 50)),
+                } }),
+            key !== data.length - 1 && (React.createElement(TimelineConnector, { sx: { bgcolor: colorMap[color], pt: "55px", pl: "3px" } }))),
+        React.createElement(TimelineContent, null,
+            item.title,
+            React.createElement(Typography, { sx: { m: "auto 0" }, variant: "body2", color: "text.secondary" }, item.data),
+            React.createElement(Typography, { sx: { m: "auto 0", color: colorMap[color] }, variant: "body2" }, item.by)))); });
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(TimeLineStyled, __assign({}, props), renderList)));
+};
+//# sourceMappingURL=TimeLine.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeLine.js","sourceRoot":"","sources":["../../../src/components/TimeLine.tsx"],"names":[],"mappings":"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"}

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

@@ -17,4 +17,6 @@ export * from "./Select";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextField";
+export * from "./TimeLine";
 export * from "./TimePicker";
+export * from "./ChatMessage";

package/dist/esm/components/index.js

@@ -17,5 +17,7 @@ export * from "./Select";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextField";
+export * from "./TimeLine";
 export * from "./TimePicker";
+export * from "./ChatMessage";
 //# sourceMappingURL=index.js.map

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,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,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,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,eAAe,CAAC"}

package/dist/esm/helpers/colors.d.ts

@@ -169,4 +169,6 @@ export declare const themes: {
 };
 type PaletteKey = keyof typeof getPalette;
 declare const getColor: (key: PaletteKey) => string;
-export { getColor };
+declare const extractRGB: (rgbString: string) => string | null;
+declare const lightenRGB: (rgbString: string, amount?: number) => string | null;
+export { getColor, extractRGB, lightenRGB };

package/dist/esm/helpers/colors.js

@@ -2,19 +2,19 @@ import { __assign } from "tslib";
 import { createTheme } from "@mui/material/styles";
 export var getPalette = function () {
     return {
-        primary: "#FF7F11",
+        primary: "rgb(219, 102, 25)",
         primaryLight: "#FFDB9F",
         primaryMedium: "#FFA84C",
         primaryDark: "#B74608",
-        inherit: "#000000",
-        secondary: "#43BBF2",
-        error: "#D63643",
-        warning: "#FFC300",
-        info: "#71D5F7",
-        success: "#6BC235",
+        inherit: "rgb(102, 102, 102)",
+        secondary: "rgb(67, 187, 242)",
+        error: "rgb(214, 54, 67)",
+        warning: "rgb(255, 195, 0)",
+        info: "rgb(113, 213, 247)",
+        success: "rgb(107, 194, 53)",
         white: "#ffffff",
-        black: "#666666",
-        helper: "#5A2A79",
+        black: "rgb(0, 0, 0)",
+        helper: "rgb(90, 42, 121)",
         secondaryLight: "#D9FCFE",
         secondaryMedium: "#71D5F7",
         secondaryDark: "#154F8C",
@@ -152,5 +152,34 @@ var getColor = function (key) {
         return "#CCC";
     }
 };
-export { getColor };
+var extractRGB = function (rgbString) {
+    if (typeof rgbString === "string") {
+        var match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
+        if (match) {
+            var r = match[1];
+            var g = match[2];
+            var b = match[3];
+            return "".concat(r, ",").concat(g, ",").concat(b);
+        }
+    }
+    return null;
+};
+var lightenRGB = function (rgbString, amount) {
+    if (amount === void 0) { amount = 20; }
+    console.log("RGB ==> ", rgbString);
+    if (typeof rgbString === "string") {
+        var match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
+        if (match) {
+            var r = parseInt(match[1]);
+            var g = parseInt(match[2]);
+            var b = parseInt(match[3]);
+            var newR = Math.min(255, r + amount);
+            var newG = Math.min(255, g + amount);
+            var newB = Math.min(255, b + amount);
+            return "rgb(".concat(newR, ",").concat(newG, ",").concat(newB, ")");
+        }
+    }
+    return null;
+};
+export { getColor, extractRGB, lightenRGB };
 //# sourceMappingURL=colors.js.map

package/dist/esm/helpers/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/helpers/colors.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/helpers/colors.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface ChatProps {
+    name: string;
+    message: string;
+    emotion?: React.ReactNode;
+    emotionReplay?: React.ReactNode;
+    time: string;
+    send: "me" | "replay";
+}
+export interface ChatMessageProps {
+    data: ChatProps[];
+}

package/dist/esm/interfaces/ChatMessage.js

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

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

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

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import { ColorVariant, DataTimeLine, MuiTimeLineBaseProps, PositionVariant } from "../types";
+export interface TimeLineBaseProps extends MuiTimeLineBaseProps {
+    position?: PositionVariant;
+    children?: React.ReactNode;
+    sx?: SxProps<Theme>;
+    color: ColorVariant;
+    data: DataTimeLine[];
+}

package/dist/esm/interfaces/TimeLine.js

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

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

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

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

@@ -12,9 +12,11 @@ export * from "./Modal";
 export * from "./Paper";
 export * from "./ProgressBar";
 export * from "./RadioGroup";
-export * from "./RadioGroup";
 export * from "./RangerSlider";
 export * from "./Select";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextField";
+export * from "./TimeLine";
+export * from "./TimePicker";
+export * from "./ChatMessage";

package/dist/esm/interfaces/index.js

@@ -12,10 +12,12 @@ export * from "./Modal";
 export * from "./Paper";
 export * from "./ProgressBar";
 export * from "./RadioGroup";
-export * from "./RadioGroup";
 export * from "./RangerSlider";
 export * from "./Select";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextField";
+export * from "./TimeLine";
+export * from "./TimePicker";
+export * from "./ChatMessage";
 //# sourceMappingURL=index.js.map

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,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,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,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,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,eAAe,CAAC"}

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { AvatarProps as MuiAvatarProps, ButtonProps as MuiButtonProps, BadgeProps as MuiBadgeProps, IconButtonProps as MuiIconButtonProps, TextFieldProps as MuiTextFieldProps, CheckboxProps as MuiCheckBoxProps, MenuProps as MuiDropDownProps, ChipProps as MuiChipProps, LinearProgressProps as MuiLinearProgressProps, SliderProps as MuiSliderProps, AccordionProps as MuiAccordionProps, TabsProps as MuiTabsProps, SelectProps as MuiSelectProps, PaperProps as MuiPaperProps, SvgIconProps, ModalProps, CardProps as MuiCardProps } from "@mui/material";
+import { TimelineProps as MuiTimeLineProps } from "@mui/lab";
 import { SwitchBaseProps as MuiSwitchBaseProps } from "@mui/material/internal/SwitchBase";
 import { iconsSVG } from "../components/Svgs";
 export type ColorVariant = "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
@@ -19,6 +20,7 @@ export type TextFieldVariant = "standard" | "outlined" | "filled";
 export type TextFieldSizeVariant = "small" | "medium";
 export type DirectionVariant = "vertical" | "horizontal";
 export type PaperVariant = "elevation" | "outlined";
+export type PositionVariant = "left" | "right" | "alternate" | "alternate-reverse";
 export type MuiTextFieldBaseProps = Omit<MuiTextFieldProps, "onChange" | "onBlur" | "onFocus" | "defaultValue" | "size" | "value" | "id" | "fullWidth" | "helperText" | "type" | "InputProps" | "InputLabelProps" | "autoComplete" | "label" | "helperText" | "InputLabelProps" | "margin" | "maxRows" | "minRows" | "multiline" | "name" | "placeholder" | "rows" | "select" | "SelectProps" | "sx" | "autoFocus" | "error" | "classes" | "children" | "color" | "variant">;
 export interface CheckboxPropsSizeOverrides {
 }
@@ -30,13 +32,14 @@ export type MuiCardBaseProps = Omit<MuiCardProps, "sx">;
 export type MuiDropDownBaseProps = Omit<MuiDropDownProps, "sx" | "variant">;
 export type MuiTagBaseProps = Omit<MuiChipProps, "sx" | "color">;
 export type MuiRangerSliderBaseProps = Omit<MuiSliderProps, "sx" | "color">;
-export type MuiProgressBarBaseProps = Omit<MuiLinearProgressProps, "sx">;
+export type MuiProgressBarBaseProps = Omit<MuiLinearProgressProps, "sx" | "ref">;
 export type MuiTabsBaseProps = Omit<MuiTabsProps, "sx" | "children" | "onChange" | "variant" | "value">;
 export type MuiAccordionBaseProps = Omit<MuiAccordionProps, "sx" | "children" | "defaultExpanded" | "onChange">;
 export type MuiSelectBaseProps = Omit<MuiSelectProps, "sx" | "value" | "onClose" | "onOpen" | "input" | "label">;
 export type MuiPaperBaseProps = Omit<MuiPaperProps, "sx">;
 export type MuiDatePickerBaseProps = Omit<MuiTextFieldProps, "sx">;
 export type MuiAvatarBaseProps = Omit<MuiAvatarProps, "sx" | "src" | "children" | "variant" | "sizes">;
+export type MuiTimeLineBaseProps = Omit<MuiTimeLineProps, "sx" | "position" | "children" | "ref">;
 export type MuiBadgeBaseProps = Omit<MuiBadgeProps, "sx" | "color" | "children" | "invisible" | "variant" | "className" | "badgeContent">;
 export type IconScale = "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "3xlarge";
 export type IconColors = "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | "white" | "black";
@@ -73,6 +76,12 @@ export type DataSelect = {
     label: string;
     value: string | number;
 };
+export type DataTimeLine = {
+    id?: string;
+    title: string;
+    data: string;
+    by: string;
+};
 export type RenderProps<E extends HTMLElement = HTMLElement> = {
     focusRef?: React.MutableRefObject<E | null>;
     id?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAoLA,MAAM,CAAC,IAAM,SAAS,GAA8B;IAClD,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,EAAE;CACd,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAmMA,MAAM,CAAC,IAAM,SAAS,GAA8B;IAClD,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,EAAE;CACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "private": false,
   "description": "Norma Library. A React UI kit.",
   "scripts": {
@@ -18,6 +18,7 @@
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
+    "@mui/lab": "^5.0.0-alpha.145",
     "@storybook/addon-essentials": "^7.5.0-alpha.1",
     "@storybook/addon-interactions": "^7.5.0-alpha.1",
     "@storybook/addon-links": "^7.5.0-alpha.1",

package/src/components/ChatMessage.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { ChatMessageProps } from "@/interfaces";
+
+const Item = styled(Box)<{
+  orient?: string;
+}>(({ orient }) => ({
+  borderColor: "#ccc",
+  display: "flex",
+  position: "relative",
+  width: "100%",
+  justifyContent: orient === "replay" ? "flex-end" : "flex-start",
+  marginBottom: "10px",
+  alignItems: "center",
+}));
+
+const ContainerStyled = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  minWidth: "640px",
+  backgroundColor: "#F0F0F0",
+  padding: "10px",
+});
+
+const BoxStyled = styled(Box)<{
+  orient?: string;
+}>(({ orient }) => ({
+  width: "70%",
+  backgroundColor: orient === "replay" ? "#E18B50" : "#FFF",
+  color: orient === "replay" ? "#FFF" : "#4D4F5C",
+  borderTopLeftRadius: 30,
+  borderTopRightRadius: 30,
+  borderBottomLeftRadius: orient === "me" ? 2 : 30,
+  borderBottomRightRadius: orient === "me" ? 30 : 2,
+  marginLeft: orient === "replay" ? "10px" : 0,
+  marginRight: orient === "me" ? "10px" : 0,
+  padding: 20,
+}));
+
+export const ChatMessage: React.FC<ChatMessageProps> = ({ data }) => {
+  return (
+    <ContainerStyled>
+      {data.map((item, key) => (
+        <Item key={key} orient={item.send}>
+          {item.emotion && item.send === "replay" && <>{item.emotion}</>}
+          <BoxStyled orient={item.send}>
+            <Typography
+              variant="subtitle2"
+              style={{
+                marginBottom: "5px",
+                font: "normal normal 600 16px/20px Source Sans Pro",
+              }}
+            >
+              {item.name}
+            </Typography>
+            <Typography
+              variant="body1"
+              style={{
+                font: "normal normal normal 16px/20px Source Sans Pro",
+              }}
+            >
+              {item.message}
+            </Typography>
+            <Typography
+              variant="caption"
+              style={{
+                position: "absolute",
+                bottom: "-18px",
+                left: item.send === "me" ? 0 : "auto",
+                right: item.send === "me" ? "auto" : 0,
+                font: "normal normal normal 11px/13px Source Sans Pro",
+                opacity: 0.5,
+                color: "#4D4F5C",
+              }}
+            >
+              {item.time}
+            </Typography>
+          </BoxStyled>
+          {item.emotion && item.send === "me" && <>{item.emotion}</>}
+          {item.emotionReplay && item.send === "me" && (
+            <>{item.emotionReplay}</>
+          )}
+        </Item>
+      ))}
+    </ContainerStyled>
+  );
+};

package/src/components/Icons.tsx

@@ -72,7 +72,7 @@ export const Icons: FunctionComponent<IconsProps> = ({
 
   return (
     <Svg
-      viewBox="0 0 64 64"
+      viewBox="0 0 56 56"
       width={`${width}px`}
       height={`${height}px`}
       {...props}

package/src/components/ProgressBar.tsx

@@ -6,6 +6,7 @@ import {
   useMediaQuery,
   Typography,
 } from "@mui/material";
+
 import { ProgressBarBaseProps } from "../interfaces";
 import { themes } from "../helpers";
 import { styled } from "@mui/material/styles";
@@ -20,7 +21,7 @@ const ProgressBarStyled = styled(MuiProgressBar)({
   }`,
 });
 
-export const ProgressBarLabelStyled = styled(Typography)`
+const ProgressBarLabelStyled = styled(Typography)`
   display: flex;
   justify-content: space-between;
   align-items: center;

package/src/components/TimeLine.tsx

@@ -0,0 +1,103 @@
+import React, { useMemo } from "react";
+import { ThemeProvider, useMediaQuery, Typography } from "@mui/material";
+
+import {
+  Timeline as MuiTimeLine,
+  TimelineItem,
+  timelineItemClasses,
+  TimelineSeparator,
+  TimelineConnector,
+  TimelineContent,
+  TimelineDot,
+} from "@mui/lab";
+
+import { TimeLineBaseProps } from "@/interfaces/TimeLine";
+
+import { styled } from "@mui/material/styles";
+import { palette, lightenRGB, themes } from "../helpers";
+import { ColorVariant, DataTimeLine } from "@/types";
+
+const colorMap: Record<ColorVariant, string> = {
+  inherit: palette.inherit,
+  primary: palette.primary,
+  secondary: palette.secondary,
+  error: palette.error,
+  warning: palette.warning,
+  info: palette.info,
+  success: palette.success,
+};
+
+const sampleData: Array<DataTimeLine> = [
+  {
+    title: "imported register",
+    data: "01/04/2023 at 07h00",
+    by: "By IEM",
+  },
+  {
+    title: "80% score applied on register",
+    data: "01/04/2023 at 07h05",
+    by: "By IEM",
+  },
+  {
+    title: "Registers transfered to campaign ID 10",
+    data: "",
+    by: "",
+  },
+];
+
+const TimeLineStyled = styled(MuiTimeLine)({
+  [`& .${timelineItemClasses.root}:before`]: {
+    flex: 0,
+    padding: 0,
+  },
+});
+
+export const TimeLine: React.FC<TimeLineBaseProps> = ({
+  data = sampleData,
+  color = "primary",
+  position = "left",
+  ...props
+}) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.light),
+    [prefersDarkMode]
+  );
+
+  const renderList = data.map((item, key) => (
+    <TimelineItem key={key}>
+      <TimelineSeparator>
+        <TimelineDot
+          sx={{
+            bgcolor: colorMap[color],
+            p: "6px",
+            border: `4px solid ${lightenRGB(colorMap[color], 50)}`,
+          }}
+        />
+        {key !== data.length - 1 && (
+          <TimelineConnector
+            sx={{ bgcolor: colorMap[color], pt: "55px", pl: "3px" }}
+          />
+        )}
+      </TimelineSeparator>
+      <TimelineContent>
+        {item.title}
+        <Typography sx={{ m: "auto 0" }} variant="body2" color="text.secondary">
+          {item.data}
+        </Typography>
+        <Typography
+          sx={{ m: "auto 0", color: colorMap[color] }}
+          variant="body2"
+        >
+          {item.by}
+        </Typography>
+      </TimelineContent>
+    </TimelineItem>
+  ));
+
+  return (
+    <ThemeProvider theme={theme}>
+      <TimeLineStyled {...props}>{renderList}</TimeLineStyled>
+    </ThemeProvider>
+  );
+};

package/src/components/index.ts

@@ -17,4 +17,6 @@ export * from "./Select";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextField";
+export * from "./TimeLine";
 export * from "./TimePicker";
+export * from "./ChatMessage";

package/src/helpers/colors.ts

@@ -2,20 +2,20 @@ import { createTheme } from "@mui/material/styles";
 
 export const getPalette = () => {
   return {
-    primary: "#FF7F11",
+    primary: "rgb(219, 102, 25)",
     primaryLight: "#FFDB9F",
     primaryMedium: "#FFA84C",
     primaryDark: "#B74608",
 
-    inherit: "#000000",
-    secondary: "#43BBF2",
-    error: "#D63643",
-    warning: "#FFC300",
-    info: "#71D5F7",
-    success: "#6BC235",
+    inherit: "rgb(102, 102, 102)",
+    secondary: "rgb(67, 187, 242)",
+    error: "rgb(214, 54, 67)",
+    warning: "rgb(255, 195, 0)",
+    info: "rgb(113, 213, 247)",
+    success: "rgb(107, 194, 53)",
     white: "#ffffff",
-    black: "#666666",
-    helper: "#5A2A79",
+    black: "rgb(0, 0, 0)",
+    helper: "rgb(90, 42, 121)",
     secondaryLight: "#D9FCFE",
     secondaryMedium: "#71D5F7",
     secondaryDark: "#154F8C",
@@ -170,4 +170,38 @@ const getColor = (key: PaletteKey) => {
   }
 };
 
-export { getColor };
+const extractRGB = (rgbString: string) => {
+  if (typeof rgbString === "string") {
+    const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
+
+    if (match) {
+      const r = match[1];
+      const g = match[2];
+      const b = match[3];
+      return `${r},${g},${b}`;
+    }
+  }
+  return null;
+};
+
+const lightenRGB = (rgbString: string, amount = 20) => {
+  console.log("RGB ==> ", rgbString);
+  if (typeof rgbString === "string") {
+    const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
+
+    if (match) {
+      const r = parseInt(match[1]);
+      const g = parseInt(match[2]);
+      const b = parseInt(match[3]);
+
+      const newR = Math.min(255, r + amount);
+      const newG = Math.min(255, g + amount);
+      const newB = Math.min(255, b + amount);
+
+      return `rgb(${newR},${newG},${newB})`;
+    }
+  }
+  return null;
+};
+
+export { getColor, extractRGB, lightenRGB };

package/src/interfaces/ChatMessage.ts

@@ -0,0 +1,12 @@
+export interface ChatProps {
+  name: string;
+  message: string;
+  emotion?: React.ReactNode;
+  emotionReplay?: React.ReactNode;
+  time: string;
+  send: "me" | "replay";
+}
+
+export interface ChatMessageProps {
+  data: ChatProps[];
+}

package/src/interfaces/TimeLine.ts

@@ -0,0 +1,16 @@
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import {
+  ColorVariant,
+  DataTimeLine,
+  MuiTimeLineBaseProps,
+  PositionVariant,
+} from "../types";
+
+export interface TimeLineBaseProps extends MuiTimeLineBaseProps {
+  position?: PositionVariant;
+  children?: React.ReactNode;
+  sx?: SxProps<Theme>;
+  color: ColorVariant;
+  data: DataTimeLine[];
+}

package/src/interfaces/index.ts

@@ -12,9 +12,11 @@ export * from "./Modal";
 export * from "./Paper";
 export * from "./ProgressBar";
 export * from "./RadioGroup";
-export * from "./RadioGroup";
 export * from "./RangerSlider";
 export * from "./Select";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextField";
+export * from "./TimeLine";
+export * from "./TimePicker";
+export * from "./ChatMessage";

package/src/stories/ChatMessage.stories.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+
+import type { Meta } from "@storybook/react";
+import { ChatMessage, Icons, Avatar } from "../components";
+
+const meta = {
+  title: "Display/ChatMessage",
+  component: ChatMessage,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof ChatMessage>;
+
+export default meta;
+
+const chat = [
+  {
+    send: "me",
+    name: "Alice",
+    message:
+      "Olá, tudo bem? Meu nome é Alice e falo em nome do banco Bradesco. Eu gostaria de falar com Bob",
+    time: "09:50",
+    emotion: (
+      <Avatar
+        sx={{
+          backgroundColor: "#FFF",
+          border: "1px solid  rgb(255, 195, 0)",
+          m: "5px",
+        }}
+      >
+        <Icons icon="faceNeutral" scale="large" color="warning" />
+      </Avatar>
+    ),
+    emotionReplay: (
+      <Avatar
+        sx={{
+          backgroundColor: "#FFF",
+          border: "1px solid  rgb(219, 102, 25)",
+          m: "5px",
+        }}
+      >
+        <Icons icon="faceHappy" scale="large" color="primary" />
+      </Avatar>
+    ),
+  },
+  {
+    send: "replay",
+    name: "Bob",
+    message: "Oi, estou bem, obrigado! E você?",
+    time: "10:05",
+  },
+  {
+    send: "me",
+    name: "Alice",
+    message: "Estou ótima, obrigada por perguntar!",
+    time: "10:10",
+  },
+  {
+    send: "replay",
+    name: "Bob",
+    message: "Que bom ouvir isso!",
+    time: "10:15",
+    emotion: (
+      <Avatar
+        sx={{
+          backgroundColor: "#FFF",
+          border: "1px solid  rgb(219, 102, 25)",
+          m: "5px",
+        }}
+      >
+        <Icons icon="faceHappy" scale="large" color="primary" />
+      </Avatar>
+    ),
+  },
+];
+
+export const ChatMessageBasic = () => {
+  return (
+    <>
+      <ChatMessage data={chat} />
+    </>
+  );
+};

package/src/stories/TimeLine.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import type { Meta } from "@storybook/react";
+import { TimeLine } from "../components";
+import { Stack } from "@mui/material";
+
+const meta = {
+  title: "Display/TimeLine",
+  component: TimeLine,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof TimeLine>;
+
+export default meta;
+
+export const TimeLineBasic = () => {
+  return (
+    <>
+      <TimeLine />
+    </>
+  );
+};
+
+export const TimeLineColors = () => {
+  return (
+    <Stack direction="row" spacing={2}>
+      {[
+        "primary",
+        "secondary",
+        "inherit",
+        "error",
+        "info",
+        "success",
+        "warning",
+      ].map((color, key) => (
+        <TimeLine color={color} key={key} />
+      ))}
+    </Stack>
+  );
+};

package/src/types/index.ts

@@ -18,6 +18,8 @@ import {
   CardProps as MuiCardProps,
 } from "@mui/material";
 
+import { TimelineProps as MuiTimeLineProps } from "@mui/lab";
+
 import { SwitchBaseProps as MuiSwitchBaseProps } from "@mui/material/internal/SwitchBase";
 
 import { iconsSVG } from "../components/Svgs";
@@ -75,6 +77,11 @@ export type TextFieldVariant = "standard" | "outlined" | "filled";
 export type TextFieldSizeVariant = "small" | "medium";
 export type DirectionVariant = "vertical" | "horizontal";
 export type PaperVariant = "elevation" | "outlined";
+export type PositionVariant =
+  | "left"
+  | "right"
+  | "alternate"
+  | "alternate-reverse";
 
 export type MuiTextFieldBaseProps = Omit<
   MuiTextFieldProps,
@@ -124,7 +131,10 @@ export type MuiCardBaseProps = Omit<MuiCardProps, "sx">;
 export type MuiDropDownBaseProps = Omit<MuiDropDownProps, "sx" | "variant">;
 export type MuiTagBaseProps = Omit<MuiChipProps, "sx" | "color">;
 export type MuiRangerSliderBaseProps = Omit<MuiSliderProps, "sx" | "color">;
-export type MuiProgressBarBaseProps = Omit<MuiLinearProgressProps, "sx">;
+export type MuiProgressBarBaseProps = Omit<
+  MuiLinearProgressProps,
+  "sx" | "ref"
+>;
 export type MuiTabsBaseProps = Omit<
   MuiTabsProps,
   "sx" | "children" | "onChange" | "variant" | "value"
@@ -147,6 +157,11 @@ export type MuiAvatarBaseProps = Omit<
   "sx" | "src" | "children" | "variant" | "sizes"
 >;
 
+export type MuiTimeLineBaseProps = Omit<
+  MuiTimeLineProps,
+  "sx" | "position" | "children" | "ref"
+>;
+
 export type MuiBadgeBaseProps = Omit<
   MuiBadgeProps,
   | "sx"
@@ -231,6 +246,13 @@ export type DataSelect = {
   value: string | number;
 };
 
+export type DataTimeLine = {
+  id?: string;
+  title: string;
+  data: string;
+  by: string;
+};
+
 export type RenderProps<E extends HTMLElement = HTMLElement> = {
   focusRef?: React.MutableRefObject<E | null>;
   id?: string;