pixelize-design-library 1.0.48 → 1.0.50

package/README.md

@@ -47,13 +47,14 @@ PixelizeDesign Library Components Are Below
 - ProgressBar,
 - RadioButton,
 - RadioButtonGroup,
-- Search, \* New
+- Search, 
 - Select,
 - SideBar,
 - Skeletons,
 - Switch,
 - Table,
 - TextInput,
+- Timeline, \* New
 - Toaster,
   - useToaster,
 - ToolTip,

package/dist/Components/Dropdown/DropDown.js

@@ -34,9 +34,9 @@ var react_1 = __importStar(require("react"));
 var react_2 = require("react");
 var styled_1 = __importDefault(require("@emotion/styled"));
 var fi_1 = require("react-icons/fi");
-var DropdownContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n"], ["\n  position: relative;\n  display: inline-block;\n"])));
-var DropdownButton = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: #000000;\n  padding: 0.3rem 2rem;\n  border: none;\n  cursor: pointer;\n  border: 1px solid #3182ce;\n  width: 100%;\n  &:hover {\n    // background-color: #c9dff8;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: #000000;\n  padding: 0.3rem 2rem;\n  border: none;\n  cursor: pointer;\n  border: 1px solid #3182ce;\n  width: 100%;\n  &:hover {\n    // background-color: #c9dff8;\n  }\n"])));
-var DropdownContent = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: none;\n  position: absolute;\n  background-color: #f9f9f9;\n  border: 1px solid #3182ce;\n  min-width: 200px;\n  width: fit-content;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 1;\n  top: 40px;\n  &.show {\n    display: block;\n  }\n"], ["\n  display: none;\n  position: absolute;\n  background-color: #f9f9f9;\n  border: 1px solid #3182ce;\n  min-width: 200px;\n  width: fit-content;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 1;\n  top: 40px;\n  &.show {\n    display: block;\n  }\n"])));
+var DropdownContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  font-size: 1rem;\n  font-weight: 300;\n"], ["\n  position: relative;\n  display: inline-block;\n  font-size: 1rem;\n  font-weight: 300;\n"])));
+var DropdownButton = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: #000000;\n  padding: 0.3rem 2rem;\n  border: none;\n  cursor: pointer;\n  border: 1px solid #3182ce;\n  min-width: 200px;\n  &:hover {\n    // background-color: #c9dff8;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: #000000;\n  padding: 0.3rem 2rem;\n  border: none;\n  cursor: pointer;\n  border: 1px solid #3182ce;\n  min-width: 200px;\n  &:hover {\n    // background-color: #c9dff8;\n  }\n"])));
+var DropdownContent = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: none;\n  position: absolute;\n  background-color: #f9f9f9;\n  border: 1px solid #3182ce;\n  min-width: 200px;\n  width: fit-content;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 5;\n  top: 40px;\n  &.show {\n    display: block;\n  }\n"], ["\n  display: none;\n  position: absolute;\n  background-color: #f9f9f9;\n  border: 1px solid #3182ce;\n  min-width: 200px;\n  width: fit-content;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 5;\n  top: 40px;\n  &.show {\n    display: block;\n  }\n"])));
 var ListItem = styled_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: black;\n  padding: 5px 10px;\n  text-decoration: none;\n  display: block;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  &:hover {\n    background-color: #f1f1f1;\n    color: #3182ce;\n  }\n"], ["\n  color: black;\n  padding: 5px 10px;\n  text-decoration: none;\n  display: block;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  &:hover {\n    background-color: #f1f1f1;\n    color: #3182ce;\n  }\n"])));
 var ImageContainer = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: 0.5rem;\n  color: #3182ce;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: 0.5rem;\n  color: #3182ce;\n"])));
 var Dropdown = function (_a) {

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -96,9 +96,9 @@ function NoteTextArea(_a) {
     var _h = (0, react_1.useState)([]), files = _h[0], setFiles = _h[1];
     (0, react_1.useEffect)(function () {
         if (isEditable) {
+            setIsActive(true);
             if (value) {
                 setNoteValue(value);
-                setIsActive(true);
             }
             if (title) {
                 setTitleValue(title);
@@ -119,6 +119,9 @@ function NoteTextArea(_a) {
                 setFiles([]);
             }
         }
+        if (isEditable) {
+            setIsActive(true);
+        }
     }, [saveButtonLoading, isEditable]);
     var handleTextArea = function () {
         setIsActive(true);

package/dist/Components/Timeline/Timeline.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TimelineProps } from "./TimelineProps";
+declare const Timeline: ({ timelineEvents }: TimelineProps) => React.JSX.Element;
+export default Timeline;

package/dist/Components/Timeline/Timeline.js

@@ -0,0 +1,137 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
+var fa_1 = require("react-icons/fa");
+var TimelineContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  padding: 0px 24px;\n  margin: 0 auto;\n  width: 100%;\n  max-width: 800px;\n"], ["\n  position: relative;\n  padding: 0px 24px;\n  margin: 0 auto;\n  width: 100%;\n  max-width: 800px;\n"])));
+var Line = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background-color: #d2d9e0;\n  transform: translateX(-50%);\n"], ["\n  position: absolute;\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background-color: #d2d9e0;\n  transform: translateX(-50%);\n"])));
+var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: ", ";\n  width: 100%;\n  // padding: 1rem 0 1rem 0;\n  box-sizing: border-box;\n  position: relative;\n  margin-bottom: 24px;\n  align-items: center; /* Center alignment for dot and event content */\n  text-align: ", ";\n"], ["\n  display: flex;\n  justify-content: ", ";\n  width: 100%;\n  // padding: 1rem 0 1rem 0;\n  box-sizing: border-box;\n  position: relative;\n  margin-bottom: 24px;\n  align-items: center; /* Center alignment for dot and event content */\n  text-align: ", ";\n"])), function (_a) {
+    var isLeft = _a.isLeft;
+    return (isLeft ? "flex-end" : "flex-start");
+}, function (_a) {
+    var isLeft = _a.isLeft;
+    return (isLeft ? "left" : "right");
+});
+var Event = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  // background: white;\n  // padding: 16px;\n  // border: 1px solid #007bff;\n  // border-radius: 8px;\n  // width: 40%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer; /* Indicates that the event is clickable */\n"], ["\n  // background: white;\n  // padding: 16px;\n  // border: 1px solid #007bff;\n  // border-radius: 8px;\n  // width: 40%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer; /* Indicates that the event is clickable */\n"])));
+var Dot = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  left: 50%;\n  width: 30px;\n  height: 30px;\n  background-color: #f4f7ff;\n  border-radius: 50%;\n  transform: translateX(-50%);\n  padding: 6px;\n  border: 1px solid #d2d9e0;\n"], ["\n  position: absolute;\n  left: 50%;\n  width: 30px;\n  height: 30px;\n  background-color: #f4f7ff;\n  border-radius: 50%;\n  transform: translateX(-50%);\n  padding: 6px;\n  border: 1px solid #d2d9e0;\n"])));
+// const Arrow = styled.div<{ isLeft: boolean }>`
+//   position: absolute;
+//   left: ${({ isLeft }) => (isLeft ? "-10px " : "100%")};
+//   width: 0;
+//   height: 0;
+//   border-style: solid;
+//   border-width: ${({ isLeft }) =>
+//     isLeft ? "10px 10px 10px 0" : "10px 10px 10px 10px"};
+//   border-color: transparent #007bff transparent transparent;
+//   transform: translateX(-50%);
+//   top: 50%;
+//   transform: translateY(-50%);
+//   transform: ${({ isLeft }) =>
+//     isLeft ? "translateY(-50%) " : "translateY(-50%) rotate(180deg)"};
+// `;
+var EventContent = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  // margin-left: 24px;\n"], ["\n  // margin-left: 24px;\n"])));
+var EventTitle = styled_1.default.h3(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var EventDescription = styled_1.default.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var EventDate = styled_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: block;\n  margin-top: 8px;\n  color: #6c757d;\n"], ["\n  display: block;\n  margin-top: 8px;\n  color: #6c757d;\n"])));
+var EventTime = styled_1.default.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  left: ", ";\n  position: absolute;\n  color: #6c757d;\n"], ["\n  left: ", ";\n  position: absolute;\n  color: #6c757d;\n"])), function (_a) {
+    var isLeft = _a.isLeft;
+    return (isLeft ? "38% " : "53%");
+});
+var EventGroupDate = styled_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-size: 1rem;\n  font-weight: 400;\n  color: #464f62;\n  box-sizing: border-box;\n  width: 180px;\n  padding: 5px 25px;\n  text-align: center;\n  background-color: #f4f7ff;\n  border: 1px solid #d2d9e0;\n  border-radius: 5px;\n  margin: 0 auto; /* Center horizontally */\n  display: flex;\n  align-items: center; /* Center vertically */\n  justify-content: center; /* Center horizontally */\n"], ["\n  font-size: 1rem;\n  font-weight: 400;\n  color: #464f62;\n  box-sizing: border-box;\n  width: 180px;\n  padding: 5px 25px;\n  text-align: center;\n  background-color: #f4f7ff;\n  border: 1px solid #d2d9e0;\n  border-radius: 5px;\n  margin: 0 auto; /* Center horizontally */\n  display: flex;\n  align-items: center; /* Center vertically */\n  justify-content: center; /* Center horizontally */\n"])));
+var EventGroupSeparator = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var EventGroupHeader = styled_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  position: relative;\n  margin-bottom: 24px;\n"], ["\n  position: relative;\n  margin-bottom: 24px;\n"])));
+var Timeline = function (_a) {
+    var timelineEvents = _a.timelineEvents;
+    var formatTimestamp = function (timestamp, type) {
+        // console.log("Raw timestamp:", timestamp);
+        var parsedTimestamp = parseInt(timestamp, 10);
+        // console.log("Parsed timestamp:", parsedTimestamp);
+        var date = new Date(parsedTimestamp);
+        // console.log("Date object:", date);
+        if (isNaN(date.getTime())) {
+            return "Invalid Date";
+        }
+        if (type === "date") {
+            var monthNames = [
+                "January",
+                "February",
+                "March",
+                "April",
+                "May",
+                "June",
+                "July",
+                "August",
+                "September",
+                "October",
+                "November",
+                "December",
+            ];
+            var month = monthNames[date.getMonth()];
+            var day = date.getDate();
+            var year = date.getFullYear();
+            return "".concat(month, " ").concat(day, ", ").concat(year);
+        }
+        else if (type === "time") {
+            // Convert to IST (UTC+5:30)
+            var istOffset = 5.5 * 60 * 60 * 1000; // 5 hours 30 minutes in milliseconds
+            var istDate = new Date(date.getTime() + istOffset);
+            var hours = istDate.getUTCHours();
+            var minutes = istDate.getUTCMinutes();
+            var ampm = hours >= 12 ? "PM" : "AM";
+            // Convert hours to 12-hour format
+            hours = hours % 12;
+            hours = hours ? hours : 12; // the hour '0' should be '12'
+            // Pad minutes with leading zero if needed
+            var minutesStr = minutes < 10 ? "0" + minutes : minutes;
+            return "".concat(hours, ":").concat(minutesStr, " ").concat(ampm);
+        }
+        return date.toLocaleString();
+    };
+    var getIcon = function (event) {
+        switch (event.action_from) {
+            case "Accounts":
+                return react_1.default.createElement(fa_1.FaRupeeSign, null);
+            case "Notes":
+                return react_1.default.createElement(fa_1.FaFileAlt, null);
+            default:
+                return react_1.default.createElement(fa_1.FaCircle, null);
+        }
+    };
+    var groupEventsByDate = function (events) {
+        return events.reduce(function (groups, event) {
+            var date = formatTimestamp(event.created_at, "date");
+            if (!groups[date]) {
+                groups[date] = [];
+            }
+            groups[date].push(event);
+            return groups;
+        }, {});
+    };
+    var groupedEvents = groupEventsByDate(timelineEvents);
+    console.log("groupedEvents", groupedEvents);
+    return (react_1.default.createElement(TimelineContainer, null,
+        react_1.default.createElement(Line, null),
+        Object.keys(groupedEvents).map(function (date) { return (react_1.default.createElement(EventGroupSeparator, { key: date },
+            react_1.default.createElement(EventGroupHeader, null,
+                react_1.default.createElement(EventGroupDate, null, date)),
+            groupedEvents[date].map(function (event, index) { return (react_1.default.createElement(EventContainer, { key: index, isLeft: index % 2 === 0 },
+                react_1.default.createElement(Dot, null, getIcon(event)),
+                react_1.default.createElement(EventTime, { isLeft: index % 2 === 0 }, formatTimestamp(event.created_at, "time")),
+                react_1.default.createElement(Event, null,
+                    react_1.default.createElement(EventContent, null,
+                        react_1.default.createElement(EventTitle, null, event.action_from + " " + event.title),
+                        react_1.default.createElement(EventDescription, null, event.changes),
+                        react_1.default.createElement(EventDate, null, " by " +
+                            event.action_by +
+                            " " +
+                            formatTimestamp(event.created_at, "date")))))); }))); })));
+};
+exports.default = Timeline;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/dist/Components/Timeline/TimelineProps.d.ts

@@ -0,0 +1,20 @@
+export interface TimelineProps {
+    events?: TimelineEvent[];
+    timelineEvents: TimelineEvents[];
+    onEventClick?: (event: TimelineEvents, index: number) => void;
+}
+export interface TimelineEvent {
+    title: string;
+    description: string;
+    time: string;
+}
+export interface TimelineEvents {
+    logs_id: number;
+    title: string;
+    primary_id: number;
+    is_from: string;
+    action_from: string;
+    action_by: string;
+    created_at: number;
+    changes: any;
+}

package/dist/Components/Timeline/TimelineProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Layout.js

@@ -71,6 +71,7 @@ var Drawer_1 = __importDefault(require("./Components/Drawer/Drawer"));
 var MultiSelect_1 = __importDefault(require("./Components/MultiSelect/MultiSelect"));
 var DatePicker_1 = __importDefault(require("./Components/DatePicker/DatePicker"));
 var Search_1 = __importDefault(require("./Components/Search/Search"));
+var Timeline_1 = __importDefault(require("./Components/Timeline/Timeline"));
 var Layout = function () {
     var navmenus = [
         { title: "Account Settings", url: "myaccount" },
@@ -310,6 +311,71 @@ var Layout = function () {
         console.log("Search query removed");
         setSearchQuery("");
     };
+    var timeline = [
+        {
+            logs_id: 1,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Accounts",
+            action_by: "pixelize technology",
+            created_at: 1723104998797,
+            changes: null,
+        },
+        {
+            logs_id: 2,
+            title: "Updated",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Accounts",
+            action_by: "pixelize technology",
+            created_at: 1723105040247,
+            changes: null,
+        },
+        {
+            logs_id: 10,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723202829694,
+            changes: null,
+        },
+        {
+            logs_id: 3,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723105099207,
+            changes: null,
+        },
+        {
+            logs_id: 7,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723105603033,
+            changes: null,
+        },
+        {
+            logs_id: 8,
+            title: "Created",
+            primary_id: 66,
+            is_from: "Accounts",
+            action_from: "Notes",
+            action_by: "pixelize technology",
+            created_at: 1723202829694,
+            changes: null,
+        },
+    ];
+    // const handleTimelineChange = (event: any, index: number) => {
+    //   console.log("Event clicked:", event, "at index:", index);
+    // };
     return (react_2.default.createElement(react_1.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden" },
         react_2.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
         react_2.default.createElement(react_1.Flex, null,
@@ -319,7 +385,7 @@ var Layout = function () {
                 react_2.default.createElement(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramov", userName: "PIXELIZE", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", key: "navbar" }),
                 react_2.default.createElement("br", null),
                 react_2.default.createElement(Breadcrumbs_1.default, { separator: react_2.default.createElement(icons_1.ChevronRightIcon, { color: "gray.500" }), items: breadcrumbItems, handleClick: handleClick }),
-                react_2.default.createElement(react_1.Box, { p: "50px", height: height - 160, overflowY: "scroll", width: width },
+                react_2.default.createElement(react_1.Box, { p: "50px", height: height - 160, overflowY: "scroll", width: width - 75 },
                     react_2.default.createElement(TextInput_1.default
                     //label="hello"
                     , { 
@@ -484,6 +550,9 @@ var Layout = function () {
                             selectedDate.toISOString()))),
                     react_2.default.createElement("br", null),
                     react_2.default.createElement("br", null),
-                    react_2.default.createElement(Search_1.default, { onSearch: handleSearch, onclose: handleRemoveSearch, query: searchQuery }))))));
+                    react_2.default.createElement(Search_1.default, { onSearch: handleSearch, onclose: handleRemoveSearch, query: searchQuery }),
+                    react_2.default.createElement("br", null),
+                    react_2.default.createElement("br", null),
+                    react_2.default.createElement(Timeline_1.default, { timelineEvents: timeline }))))));
 };
 exports.default = Layout;

package/dist/index.d.ts

@@ -28,7 +28,8 @@ import Skeletons from "./Components/Skeletons/Skeletons";
 import Switch from "./Components/Switch/Switch";
 import Table from "./Components/Table/Table";
 import TextInput from "./Components/Input/TextInput";
+import Timeline from "./Components/Timeline/Timeline";
 import Toaster, { useToaster } from "./Components/Toaster/Toaster";
 import ToolTip from "./Components/ToolTip/ToolTip";
 import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp";
-export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SideBar, Skeletons, Switch, Table, TextInput, Toaster, ToolTip, useToaster, VerifyEmailOtp, };
+export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SideBar, Skeletons, Switch, Table, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, };

package/dist/index.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
+exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
 var ApexBarChart_1 = __importDefault(require("./Components/Apexcharts/ApexBarChart/ApexBarChart"));
 exports.ApexBarChart = ApexBarChart_1.default;
 var ApexPieChart_1 = __importDefault(require("./Components/Apexcharts/ApexPieChart/ApexPieChart"));
@@ -89,6 +89,8 @@ var Table_1 = __importDefault(require("./Components/Table/Table"));
 exports.Table = Table_1.default;
 var TextInput_1 = __importDefault(require("./Components/Input/TextInput"));
 exports.TextInput = TextInput_1.default;
+var Timeline_1 = __importDefault(require("./Components/Timeline/Timeline"));
+exports.Timeline = Timeline_1.default;
 var Toaster_1 = __importStar(require("./Components/Toaster/Toaster"));
 exports.Toaster = Toaster_1.default;
 Object.defineProperty(exports, "useToaster", { enumerable: true, get: function () { return Toaster_1.useToaster; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.0.48",
+  "version": "1.0.50",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",