@erpsquad/common 1.8.22 → 1.8.24

package/dist/views/beforeAuth/components/index/index.esm.js

@@ -0,0 +1,1144 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import default_1$5 from "../../../../node_modules/@mui/icons-material/Close/index.esm.js";
+import default_1$7 from "../../../../node_modules/@mui/icons-material/NorthEast/index.esm.js";
+import HrLine from "../../../../components/hr-line/hr-line/index.esm.js";
+import List from "../../../../components/list/list/index.esm.js";
+import { BoardWrapper } from "../../../../components/board/board/index.esm.js";
+import { CalendarWrapper } from "../../../../components/calendar/calendar/index.esm.js";
+import GridCard from "../../../../components/grid/grid-card/grid-card/index.esm.js";
+import { tableData } from "../list-content/list-data/index.esm.js";
+import { column } from "../list-content/column-raw/index.esm.js";
+import { board } from "../kanbann-content/kanbann-raw/index.esm.js";
+import { calendarData } from "../calendar-data/calendar-data/index.esm.js";
+import data$1 from "../grid-data/grid-data/index.esm.js";
+import { activityTag } from "../activity-tag-data/activity-tag-data/index.esm.js";
+import { userData } from "../user-dropdown-data/user-dropdown-data/index.esm.js";
+import { Typography } from "../../../../components/typography/typography/index.esm.js";
+import TextField from "../../../../components/text-field/text-field/index.esm.js";
+import Button from "../../../../components/button/button/index.esm.js";
+import default_1$3 from "../../../../node_modules/@mui/icons-material/ArrowForward/index.esm.js";
+import default_1$2 from "../../../../node_modules/@mui/icons-material/ArrowBack/index.esm.js";
+import Radio from "../../../../components/radio/radio/index.esm.js";
+import Checkbox from "../../../../components/checkbox/checkbox/index.esm.js";
+import Select from "../../../../components/select/select/index.esm.js";
+import default_1$4 from "../../../../node_modules/@mui/icons-material/IndeterminateCheckBox/index.esm.js";
+import Toggle from "../../../../components/toggle/toggle/index.esm.js";
+import Chip from "../../../../components/chip/chip/index.esm.js";
+import default_1$6 from "../../../../node_modules/@mui/icons-material/FilterList/index.esm.js";
+import BreadCrumb from "../../../../components/bread-crumb/bread-crumb/index.esm.js";
+import GridWrapper from "../../../../components/grid/grid-wrapper/grid-wrapper/index.esm.js";
+import ConfirmPopUp from "../../../../components/confirm-modal/confirm-modal/index.esm.js";
+import Toast from "../../../../components/toast/toast/index.esm.js";
+import MaterialTable from "../../../../components/material-table/material-table/index.esm.js";
+import CardWrapper from "../../../../components/card-wrapper/card-wrapper/index.esm.js";
+import Tooltip from "../../../../components/tooltip/Tooltip/index.esm.js";
+import { Avatar } from "../../../../components/avatar/avatar/index.esm.js";
+import { ActivityTag } from "../../../../components/activity-tag/activity-tag/index.esm.js";
+import MultiLine from "../../../../components/mulitline/multiline/index.esm.js";
+import { multilineData } from "../multiline-data/multiline-data/index.esm.js";
+import TabBar from "../../../../components/tabs/tabs/index.esm.js";
+import { tabsData } from "../tabs-data/tabs-data/index.esm.js";
+import SharePopUp from "../../../../components/share-modal/share-modal/index.esm.js";
+import { userRoles } from "../share-modal-data/share-modal-data/index.esm.js";
+import { images } from "../../../../images/index.esm.js";
+import ActionBar from "../../../../components/action-bar/action-bar/index.esm.js";
+import viewTypes from "../../../../constants/action-bar/index.esm.js";
+import { UserDropdown } from "../../../../components/user-dropdown/user-dropdown/index.esm.js";
+import PhoneInput from "../../../../components/phone-input/phone-input/index.esm.js";
+import SearchBar from "../../../../components/search-bar/search-bar/index.esm.js";
+import NumberAggregation from "../../../../components/material-table/components/number-aggregation/index.esm.js";
+import Alert from "../../../../components/alert/alert/index.esm.js";
+import CountrySelect from "../../../../components/country-select/country-select/index.esm.js";
+import default_1 from "../../../../node_modules/@mui/icons-material/Visibility/index.esm.js";
+import default_1$1 from "../../../../node_modules/@mui/icons-material/VisibilityOff/index.esm.js";
+import TextArea from "../../../../components/text-area/text-area/index.esm.js";
+import GanttChart from "../../../../components/gantt/gantt/index.esm.js";
+import ganttData from "../gantt-data/gantt-data/index.esm.js";
+import SaveFilterModal from "../../../../components/save-filter-modal/save-filter-modal/index.esm.js";
+import DateRangePicker from "../../../../components/date-range-picker/date-range-picker/index.esm.js";
+import TimeRangePicker from "../../../../components/time-range-picker/time-range-picker/index.esm.js";
+import Upload from "../../../../components/upload/upload/index.esm.js";
+import DatePicker from "../../../../components/date-picker/date-picker/index.esm.js";
+import TimePicker from "../../../../components/time-picker/time-picker/index.esm.js";
+import UploadMedia from "../../../../components/upload-media/upload-media/index.esm.js";
+import InfoCard from "../../../../components/info-card/info-card/index.esm.js";
+import BarChart from "../../../../components/charts/bar-chart/bar-chart/index.esm.js";
+import LineChart from "../../../../components/charts/line-chart/line-chart/index.esm.js";
+import ValueField from "../../../../components/value-field/value-field/index.esm.js";
+import Accordion from "../../../../components/accordion/accordion/index.esm.js";
+import DonutChart from "../../../../components/charts/donut-chart/donut-chart/index.esm.js";
+import AreaLineChart from "../../../../components/charts/line-chart/area-line-chart/index.esm.js";
+import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
+import InputAdornment from "../../../../node_modules/@mui/material/InputAdornment/InputAdornment/index.esm.js";
+import IconButton from "../../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
+import FormControlLabel from "../../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.esm.js";
+import MenuItem from "../../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
+const data = [
+  { label: "Hello", value: 500 },
+  { label: "2025", value: 1e3 },
+  { label: "2023-2024", value: 1600 },
+  { label: "12-01-27", value: 2500 }
+];
+const donutChartData = [
+  {
+    label: "HR",
+    value: 50
+  },
+  {
+    label: "Frontend Developer",
+    value: 50
+  },
+  {
+    label: "Sales",
+    value: 50
+  },
+  {
+    label: "manager",
+    value: 50
+  },
+  {
+    label: "In-Active Users",
+    value: 50
+  },
+  {
+    label: "Others",
+    value: 50
+  }
+];
+const areaLineGraph = [
+  { label: "user1", value: 65 },
+  { label: "user2", value: 70 },
+  { label: "user3", value: 70 },
+  { label: "user4", value: 60 },
+  { label: "user5", value: 70 },
+  { label: "user6", value: 80 },
+  { label: "user7", value: 75 },
+  { label: "user8", value: 70 },
+  { label: "user9", value: 67 },
+  { label: "user10", value: 72 },
+  { label: "user11", value: 75 },
+  { label: "user12", value: 60 },
+  { label: "user13", value: 100 },
+  { label: "user14", value: 70 },
+  { label: "user15", value: 65 },
+  { label: "user16", value: 60 },
+  { label: "user17", value: 65 },
+  { label: "user18", value: 65 },
+  { label: "user19", value: 60 },
+  { label: "user20", value: 70 },
+  { label: "user21", value: 67 },
+  { label: "user22", value: 60 },
+  { label: "user23", value: 72 },
+  { label: "user24", value: 68 },
+  { label: "user25", value: 65 },
+  { label: "user26", value: 65 }
+];
+const breadCrumbPath = [
+  {
+    link: "/",
+    label: "MUI"
+  },
+  {
+    link: "/",
+    label: "Core"
+  },
+  {
+    link: "",
+    label: "Breadcrumb"
+  }
+];
+const dayArr = [
+  {
+    label: "Sun",
+    selected: false
+  },
+  {
+    label: "Mon",
+    selected: false
+  },
+  {
+    label: "Tue",
+    selected: false
+  },
+  {
+    label: "Wed",
+    selected: true
+  },
+  {
+    label: "Thu",
+    selected: true
+  },
+  {
+    label: "Fri",
+    selected: true
+  },
+  {
+    label: "Sat",
+    selected: false
+  }
+];
+const rows = [
+  {
+    role: "Head of Engineering",
+    status: "Enabled",
+    role_type: "Admin",
+    role_level: 0,
+    created_date: "13 Nov, 2023",
+    company_name: "ABC",
+    location: "Gujarat",
+    email: "kishan@gmail.com",
+    icon: "ada"
+  },
+  {
+    role: "Visual Designer",
+    status: "Enabled",
+    role_type: "Manager",
+    role_level: 1,
+    created_date: "13 Nov, 2023",
+    company_name: "XYZ",
+    location: "Mumbai",
+    email: "xyz@gmail.com"
+  },
+  {
+    role: "Product Analyst",
+    status: "Enabled",
+    role_type: "Admin",
+    role_level: 0,
+    created_date: "13 Nov, 2023",
+    company_name: "ABC",
+    location: "Valsad",
+    email: "abc@gmail.com"
+  },
+  {
+    role: "Senior Interaction Designer",
+    status: "Enabled",
+    role_type: "Executive",
+    role_level: 3,
+    created_date: "13 Nov, 2023",
+    company_name: "ABC",
+    location: "Gujarat",
+    email: "kishan@gmail.com"
+  },
+  {
+    role: "Senior Product Manager",
+    status: "Enabled",
+    role_type: "Support",
+    role_level: 4,
+    created_date: "13 Nov, 2023",
+    company_name: "ABC",
+    location: "Gujarat",
+    email: "kishan@gmail.com"
+  },
+  {
+    role: "Design Manager",
+    status: "Enabled",
+    role_type: "Support",
+    role_level: 5,
+    created_date: "13 Nov, 2023",
+    company_name: "ABC",
+    location: "Gujarat",
+    email: "kishan@gmail.com"
+  }
+];
+const columns = [
+  {
+    accessorKey: "role",
+    header: "Role",
+    visible: true,
+    size: 150,
+    muiTableBodyCellProps: {
+      sx: {
+        fontWeight: "500"
+      }
+    },
+    Footer: ({ footer }) => {
+      return /* @__PURE__ */ jsx(NumberAggregation, { data: rows, column: footer.column.id, type: "string" });
+    }
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    visible: true,
+    size: 150,
+    muiTableBodyCellProps: {
+      sx: {
+        fontWeight: "500"
+      }
+    },
+    Footer: ({ footer }) => {
+      return /* @__PURE__ */ jsx(NumberAggregation, { data: rows, column: footer.column.id, type: "string" });
+    }
+  },
+  {
+    accessorKey: "role_type",
+    header: "Role Type",
+    visible: true,
+    size: 150,
+    Footer: ({ footer }) => {
+      return /* @__PURE__ */ jsx(NumberAggregation, { data: rows, column: footer.column.id, type: "string" });
+    }
+  },
+  {
+    accessorKey: "role_level",
+    //simple recommended way to define a column
+    header: "Role Level",
+    visible: true,
+    size: 150,
+    muiEditTextFieldProps: {
+      type: "number"
+    },
+    Footer: ({ footer }) => {
+      return /* @__PURE__ */ jsx(NumberAggregation, { data: rows, column: footer.column.id, type: "number" });
+    }
+  },
+  {
+    accessorKey: "created_date",
+    //simple recommended way to define a column
+    header: "Date Created",
+    visible: true,
+    size: 150,
+    muiEditTextFieldProps: {
+      type: "date"
+    },
+    Footer: ({ footer }) => {
+      return /* @__PURE__ */ jsx(NumberAggregation, { data: rows, column: footer.column.id, type: "string" });
+    }
+  },
+  {
+    accessorKey: "company_name",
+    header: "Company Name",
+    visible: false,
+    size: 150,
+    muiTableBodyCellProps: {
+      sx: {
+        fontWeight: "500"
+      }
+    },
+    Footer: ({ footer }) => {
+      return /* @__PURE__ */ jsx(NumberAggregation, { data: rows, column: footer.column.id, type: "string" });
+    }
+  },
+  {
+    accessorKey: "location",
+    header: "Location",
+    visible: false,
+    size: 150,
+    muiTableBodyCellProps: {
+      sx: {
+        fontWeight: "500"
+      }
+    },
+    Footer: ({ footer }) => {
+      return /* @__PURE__ */ jsx(NumberAggregation, { data: rows, column: footer.column.id, type: "string" });
+    }
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+    visible: false,
+    size: 150,
+    muiTableBodyCellProps: {
+      sx: {
+        fontWeight: "500"
+      }
+    },
+    Footer: ({ footer }) => {
+      return /* @__PURE__ */ jsx(NumberAggregation, { data: rows, column: footer.column.id, type: "string" });
+    }
+  }
+];
+const initialOrder = [
+  "role",
+  "status",
+  "role_type",
+  "role_level",
+  "created_date",
+  "company_name",
+  "location",
+  "email"
+];
+const Components = () => {
+  var _a;
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isShareModalOpen, setIsShareModalOpen] = useState(false);
+  const [isNormalToastOpen, setIsNormalToastOpen] = useState(false);
+  const [isAlertToastOpen, setIsAlertToastOpen] = useState(false);
+  const [commentValue, setCommentValue] = useState("");
+  const [activityTagData, setActivityTagData] = useState(activityTag);
+  const [isAlertWithUndoOpen, setIsAlertWithUndoOpen] = useState(false);
+  const [isNormalWithUndoOpen, setIsNormalWithUndoOpen] = useState(false);
+  const [userDropdownData, setUserDropdownData] = useState({
+    isRoleVisible: true,
+    selectedUsers: []
+  });
+  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+  useEffect(() => {
+  }, [userDropdownData]);
+  const [isToggled, setIsToggled] = useState(false);
+  const [isInfoAlertOpen, setIsInfoAlertOpen] = useState(true);
+  const [isErrorAlertOpen, setIsErrorAlertOpen] = useState(true);
+  const [isSuccessAlertOpen, setIsSuccessAlertOpen] = useState(true);
+  const [country, setCountry] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [actionBarData, setActionBarData] = useState([]);
+  const [actionBarActiveTab, setActionBarActiveTab] = useState("");
+  const [dayArray, setDayArray] = useState(dayArr);
+  const [openSaveFilter, setIsOpenSaveFilter] = useState(false);
+  const handleOpenNormalToast = () => setIsNormalToastOpen(true);
+  const handleCloseNormalToast = () => setIsNormalToastOpen(false);
+  const handleOpenAlertToast = () => setIsAlertToastOpen(true);
+  const handleCloseAlertToast = () => setIsAlertToastOpen(false);
+  const handleCommentSubmit = () => {
+    const currentDate = /* @__PURE__ */ new Date();
+    const formattedDate = currentDate.toLocaleString("en-US", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+    const comment = {
+      name: "You",
+      dateTime: formattedDate,
+      text: commentValue
+    };
+    setActivityTagData((prevData) => {
+      const updatedData = {
+        ...prevData,
+        comments: [...prevData.comments, comment]
+      };
+      return updatedData;
+    });
+    setCommentValue("");
+  };
+  const handleCommentChange = (event) => {
+    setCommentValue(event.target.value);
+  };
+  const handleOpenNormalWithUndo = () => setIsNormalWithUndoOpen(true);
+  const handleCloseNormalWithUndo = () => setIsNormalWithUndoOpen(false);
+  const handleOpenAlertWithUndo = () => setIsAlertWithUndoOpen(true);
+  const handleCloseAlertWithUndo = () => setIsAlertWithUndoOpen(false);
+  const [columnOrder, setColumnOrder] = useState(initialOrder);
+  const handleColumnOrdering = (colOrder) => {
+    setColumnOrder(colOrder.slice(1));
+  };
+  const handleToggle = () => {
+    setIsToggled((prev) => !prev);
+    alert("Toggled");
+  };
+  const handleUndo = () => {
+    window.alert("Undo clicked");
+  };
+  const handleToggleChange = () => {
+    setUserDropdownData((prevSettings) => ({
+      ...prevSettings,
+      isRoleVisible: !prevSettings.isRoleVisible,
+      selectedUsers: []
+    }));
+  };
+  const handleCheckboxChange = (values) => {
+    setUserDropdownData((prevSettings) => ({
+      ...prevSettings,
+      selectedUsers: values
+    }));
+  };
+  const handleCountry = (code) => {
+    setCountry(code);
+  };
+  const handleClick = (index) => {
+    const tempArr = dayArray;
+    tempArr[index].selected = !tempArr[index].selected;
+    setDayArray([...tempArr]);
+  };
+  const handleTimeRangePicker = (timeRanges) => {
+    console.log("timeRanges", timeRanges);
+  };
+  const handleDateRangePicker = (dateRanges) => {
+    console.log("dateRanges", dateRanges);
+  };
+  const handleUploadFiles = (files) => {
+    console.log("Uploaded files", files);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "components-wrapper", children: [
+    /* @__PURE__ */ jsx(HrLine, { title: "HR Line" }),
+    /* @__PURE__ */ jsx(List, { header: column, tableData }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(Typography, { type: "h1", children: "This is heading 1" }),
+    /* @__PURE__ */ jsx(Typography, { type: "h2", children: "This is heading 2" }),
+    /* @__PURE__ */ jsx(Typography, { type: "h3", children: "This is heading 3" }),
+    /* @__PURE__ */ jsx(Typography, { type: "h4", children: "This is heading 4" }),
+    /* @__PURE__ */ jsx(Typography, { type: "h5", children: "This is heading 5" }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(Typography, { type: "s1", children: "This is sub-heading 1" }),
+    /* @__PURE__ */ jsx(Typography, { type: "s2", children: "This is sub-heading 2" }),
+    /* @__PURE__ */ jsx(Typography, { type: "s3", children: "This is sub-heading 3" }),
+    /* @__PURE__ */ jsx(Typography, { type: "s4", children: "This is sub-heading 4" }),
+    /* @__PURE__ */ jsx(Typography, { type: "s5", children: "This is sub-heading 5" }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { mb: 1, children: "Text Field" }),
+      /* @__PURE__ */ jsxs(Box, { mb: 4, display: "flex", gap: 2, children: [
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(TextField, { label: "Name", placeholder: "Write your name" }) }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Error",
+            placeholder: "Write your name",
+            error: true,
+            helperText: "Type a valid name"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Number",
+            placeholder: "Enter number",
+            type: "number",
+            helperText: "Please Enter a number"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Number",
+            placeholder: "Enter number",
+            type: "number",
+            value: "3224",
+            helperText: "Please Enter a number",
+            disabled: true
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Password",
+            placeholder: "Enter Password",
+            type: showPassword ? "text" : "password",
+            InputProps: {
+              endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  "aria-label": "toggle password visibility",
+                  onClick: () => setShowPassword(!showPassword),
+                  edge: "end",
+                  children: showPassword ? /* @__PURE__ */ jsx(default_1, {}) : /* @__PURE__ */ jsx(default_1$1, {})
+                }
+              ) })
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { mb: 4, display: "flex", gap: 2, children: [
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          TextArea,
+          {
+            placeholder: "Placeholder",
+            label: "Placeholder",
+            error: true,
+            helperText: "please enter a valid value"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          TextArea,
+          {
+            placeholder: "Placeholder",
+            label: "Placeholder",
+            helperText: "please enter a valid value"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          TextArea,
+          {
+            placeholder: "Placeholder",
+            disabled: true,
+            defaultValue: "this is a text area",
+            label: "Placeholder"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          TextArea,
+          {
+            placeholder: "Placeholder",
+            defaultValue: "this is a text area",
+            label: "Placeholder"
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsxs(Box, { mb: 4, className: "button-wrapper", children: [
+      /* @__PURE__ */ jsx(Typography, { children: "Buttons" }),
+      /* @__PURE__ */ jsxs(Box, { display: "flex", gap: 2, mt: 2, className: "button-wrapper-variants", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "contained", children: "Contained" }),
+        /* @__PURE__ */ jsx(Button, { variant: "contained", disabled: true, children: "Disabled" }),
+        /* @__PURE__ */ jsx(Button, { variant: "text", children: "Text" }),
+        /* @__PURE__ */ jsx(Button, { variant: "outlined", children: "Outlined" }),
+        /* @__PURE__ */ jsx(Button, { variant: "contained", startIcon: /* @__PURE__ */ jsx(default_1$2, {}), children: "Contained" }),
+        /* @__PURE__ */ jsx(Button, { variant: "contained", endIcon: /* @__PURE__ */ jsx(default_1$3, {}), children: "Contained" }),
+        /* @__PURE__ */ jsx(Button, { color: "error", children: "Error" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(Typography, { children: "Radio / Checkbox" }),
+    /* @__PURE__ */ jsxs(Box, { mt: 2, children: [
+      /* @__PURE__ */ jsx(FormControlLabel, { control: /* @__PURE__ */ jsx(Radio, {}), label: "Radio" }),
+      /* @__PURE__ */ jsx(FormControlLabel, { control: /* @__PURE__ */ jsx(Checkbox, {}), label: "Checkbox" }),
+      /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(Checkbox, { checkedIcon: /* @__PURE__ */ jsx(default_1$4, {}) }),
+          label: "Indeterminate Checkbox"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(Typography, { mb: 2, children: "Select" }),
+    /* @__PURE__ */ jsx(Box, { mb: 4, width: 200, children: /* @__PURE__ */ jsxs(
+      Select,
+      {
+        fullWidth: true,
+        placeholder: "Placeholder",
+        label: "Select",
+        size: "small",
+        variant: "outlined",
+        children: [
+          /* @__PURE__ */ jsx(MenuItem, { value: 1, children: "option 1" }),
+          /* @__PURE__ */ jsx(MenuItem, { value: 2, children: "option 2" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(Typography, { mb: 2, children: "Multi Select" }),
+    /* @__PURE__ */ jsxs(Box, { mb: 4, width: 200, children: [
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          multiple: true,
+          value: ["option1", "option2"],
+          fullWidth: true,
+          placeholder: "Placeholder",
+          label: "Multi Select",
+          handleSearch: () => {
+          },
+          size: "small",
+          variant: "outlined",
+          children: [
+            /* @__PURE__ */ jsx(MenuItem, { value: "option1", children: "option 1" }),
+            /* @__PURE__ */ jsx(MenuItem, { value: "option2", children: "option 2" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { mt: 1, display: "flex", gap: 1, children: (_a = ["option1", "option2"]) == null ? void 0 : _a.map((selectedOp, index) => /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: selectedOp,
+          deleteIcon: /* @__PURE__ */ jsx(default_1$5, {}),
+          onDelete: () => {
+          }
+        },
+        index
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(Box, { display: "flex", gap: 2, my: 2, className: "chip-wrapper-variants", children: dayArray == null ? void 0 : dayArray.map((days, index) => /* @__PURE__ */ jsx(
+      Chip,
+      {
+        variant: "outlined",
+        type: "normal",
+        label: days.label,
+        active: days.selected,
+        onClick: () => handleClick(index)
+      }
+    )) }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(Typography, { children: "Chip Component" }),
+    /* @__PURE__ */ jsxs(Box, { display: "flex", gap: 2, my: 2, className: "chip-wrapper-variants", children: [
+      /* @__PURE__ */ jsx(
+        Chip,
+        {
+          variant: "outlined",
+          label: "Outlined Round",
+          icon: /* @__PURE__ */ jsx(default_1$6, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Chip,
+        {
+          variant: "outlined",
+          type: "normal",
+          label: "Outlined Normal",
+          icon: /* @__PURE__ */ jsx(default_1$6, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Chip,
+        {
+          variant: "filled",
+          type: "normal",
+          label: "Normal Fill",
+          icon: /* @__PURE__ */ jsx(default_1$6, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Chip,
+        {
+          variant: "filled",
+          type: "rounded",
+          label: "Rounded Fill",
+          icon: /* @__PURE__ */ jsx(default_1$6, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Chip,
+        {
+          type: "normal",
+          label: "Normal Selected",
+          active: true,
+          icon: /* @__PURE__ */ jsx(default_1$6, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Chip,
+        {
+          type: "rounded",
+          label: "Round Selected",
+          active: true,
+          icon: /* @__PURE__ */ jsx(default_1$6, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Box, { my: 2, children: /* @__PURE__ */ jsx(
+      Chip,
+      {
+        type: "rounded",
+        label: "Round Outlined Selected",
+        active: true,
+        variant: "outlined",
+        icon: /* @__PURE__ */ jsx(default_1$6, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(Typography, { className: "pt-1 pb-1", children: "Switch Component" }),
+    /* @__PURE__ */ jsx(Toggle, { checked: isToggled, onChange: handleToggle }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(Typography, { className: "pt-1 pb-1", children: "Breadcrumb Component" }),
+    /* @__PURE__ */ jsx(BreadCrumb, { path: breadCrumbPath }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsxs(Box, { my: 2, display: "flex", gap: 2, children: [
+      /* @__PURE__ */ jsx(Typography, { mb: 2, children: "Modal" }),
+      /* @__PURE__ */ jsx(Button, { onClick: () => setIsModalOpen(true), children: "Open" }),
+      /* @__PURE__ */ jsx(
+        ConfirmPopUp,
+        {
+          open: isModalOpen,
+          onClose: () => setIsModalOpen(false),
+          onConfirm: () => setIsModalOpen(false),
+          title: "Delete Confirmation?",
+          description: "Are you sure you want to delete this [object] ?"
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { onClick: () => setIsShareModalOpen(true), children: "Open Share Modal" }),
+      /* @__PURE__ */ jsx(
+        SharePopUp,
+        {
+          open: isShareModalOpen,
+          onClose: () => setIsShareModalOpen(false),
+          title: "Share page Page_Name",
+          roles: userRoles,
+          toggleSwitch: true,
+          onSubmit: (selectedUsers) => {
+            console.log(selectedUsers);
+            setIsShareModalOpen(false);
+          },
+          isPeopleAccessVisible: true
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { onClick: () => setIsOpenSaveFilter(true), children: "Open Save Filter Modal" }),
+      /* @__PURE__ */ jsx(
+        SaveFilterModal,
+        {
+          open: openSaveFilter,
+          onClose: () => setIsOpenSaveFilter(false),
+          handleSubmit: (name) => console.log(name)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsxs(Box, { m: 2, display: "flex", gap: 2, children: [
+      /* @__PURE__ */ jsx(Button, { onClick: handleOpenNormalToast, children: "Normal Toast" }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleOpenAlertToast, children: "Alert Toast" }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleOpenNormalWithUndo, children: "Normal Undo" }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleOpenAlertWithUndo, children: "Alert Undo" }),
+      /* @__PURE__ */ jsx(
+        Toast,
+        {
+          open: isNormalToastOpen,
+          type: "normal",
+          message: "This is a normal toast!",
+          handleClose: handleCloseNormalToast
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Toast,
+        {
+          open: isAlertToastOpen,
+          type: "alert",
+          message: "This is a alert toast!",
+          handleClose: handleCloseAlertToast
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Toast,
+        {
+          open: isNormalWithUndoOpen,
+          type: "normal",
+          message: "This is a normal toast!",
+          handleClose: handleCloseNormalWithUndo,
+          handleUndo
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Toast,
+        {
+          open: isAlertWithUndoOpen,
+          type: "alert",
+          message: "This is a alert toast!",
+          handleClose: handleCloseAlertWithUndo,
+          handleUndo
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(HrLine, {}),
+    /* @__PURE__ */ jsx(
+      MaterialTable,
+      {
+        enablePagination: true,
+        columnOrder: ["mrt-row-select", ...columnOrder],
+        handleColumnOrdering,
+        rows,
+        columns,
+        totalPages: 20,
+        paginationModel: { pageNo: 1, limit: 10 }
+      }
+    ),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsxs(Box, { m: 2, children: [
+      /* @__PURE__ */ jsx(Typography, { mb: 2, children: "Card Wrapper" }),
+      /* @__PURE__ */ jsxs(CardWrapper, { children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            mb: 2,
+            children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  style: {
+                    border: "1px solid #F5F6F5"
+                  },
+                  "aria-label": "open drawer",
+                  children: /* @__PURE__ */ jsx(default_1$7, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", children: /* @__PURE__ */ jsx("img", { src: images.more, alt: "more icon" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { type: "s4", color: "theme.secondary.800", children: "Total Users" }),
+        /* @__PURE__ */ jsx(Typography, { type: "h2", weight: "medium", color: "theme.secondary.1000", children: "300" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsxs(Box, { m: 2, children: [
+      /* @__PURE__ */ jsx(Typography, { mb: 2, children: "Tooltip Component" }),
+      /* @__PURE__ */ jsx(Tooltip, { arrow: true, title: "This is a Tooltip description", children: /* @__PURE__ */ jsx("span", { children: "Tooltip" }) })
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsxs(Box, { m: 2, children: [
+      /* @__PURE__ */ jsx(Typography, { mb: 2, children: "Phone Input Component" }),
+      /* @__PURE__ */ jsx(PhoneInput, { name: "phoneNumber", label: "Phone Number" })
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsxs(Box, { p: 2, mb: 2, children: [
+      /* @__PURE__ */ jsx(Typography, { mb: 2, children: "Search Bar Component" }),
+      /* @__PURE__ */ jsx(Box, { width: 200, children: /* @__PURE__ */ jsx(
+        SearchBar,
+        {
+          placeholder: "Search User",
+          handleSearch: (val) => alert(val)
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(Typography, { mb: 2, children: "Avatar" }),
+    /* @__PURE__ */ jsxs(Box, { display: "flex", gap: 2, my: 2, children: [
+      /* @__PURE__ */ jsx(Avatar, { size: 32, alt: "Person", icon: true }),
+      /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          size: 32,
+          alt: "Person",
+          sx: {
+            color: "theme.primary.800",
+            backgroundColor: "theme.primary.200"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          size: 32,
+          alt: "Person Name",
+          sx: {
+            color: "theme.primary.800",
+            backgroundColor: "theme.primary.200"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Avatar, { src: images.avatar, size: 32, alt: "Person" }),
+      /* @__PURE__ */ jsx(Avatar, { badge: true, src: images.avatar, size: 32, alt: "Person Name" })
+    ] }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(Typography, { mb: 2, children: "Activity Tag" }),
+    /* @__PURE__ */ jsxs(Box, { display: "flex", gap: 2, my: 2, sx: { backgroundColor: "#e3e3e3" }, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          display: "flex",
+          gap: 2,
+          my: 2,
+          mx: 2,
+          sx: { backgroundColor: "#ffffff", width: "352px" },
+          children: /* @__PURE__ */ jsx(
+            ActivityTag,
+            {
+              data: activityTag.activities,
+              placeholder: "Type a reply / Comment",
+              type: "activity"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          display: "flex",
+          gap: 2,
+          my: 2,
+          sx: { backgroundColor: "#ffffff", width: "352px", height: "500px" },
+          children: /* @__PURE__ */ jsx(
+            ActivityTag,
+            {
+              data: activityTagData.comments,
+              placeholder: "Type a reply / Comment",
+              type: "comments",
+              textfield: true,
+              textfieldTitle: "Write comments",
+              onCommentSubmit: handleCommentSubmit,
+              onChange: handleCommentChange,
+              value: commentValue
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(Typography, { mb: 2, children: "Multiline Component" }),
+    /* @__PURE__ */ jsx(Box, { my: 2, children: /* @__PURE__ */ jsx(MultiLine, { options: multilineData }) }),
+    /* @__PURE__ */ jsx(Typography, { m: 2, children: "Alert Component" }),
+    /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, m: 2, children: [
+      isInfoAlertOpen && /* @__PURE__ */ jsx(Alert, { severity: "info", onClose: () => setIsInfoAlertOpen(false), children: "This is a normal alert" }),
+      isSuccessAlertOpen && /* @__PURE__ */ jsx(
+        Alert,
+        {
+          severity: "success",
+          onClose: () => setIsSuccessAlertOpen(false),
+          children: "This is a success alert"
+        }
+      ),
+      isErrorAlertOpen && /* @__PURE__ */ jsx(Alert, { severity: "error", onClose: () => setIsErrorAlertOpen(false), children: "This is a error alert" })
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsxs(Box, { m: 2, width: 300, children: [
+      /* @__PURE__ */ jsx(Typography, { mb: 2, children: "Country Select Component" }),
+      /* @__PURE__ */ jsx(CountrySelect, { country, handleCountry })
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsxs(Box, { mb: 2, children: [
+      /* @__PURE__ */ jsx(Typography, { className: "pt-1 pb-1", children: "Tabs Component" }),
+      /* @__PURE__ */ jsx(TabBar, { tabs: tabsData })
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(
+      ActionBar,
+      {
+        title: "User",
+        data: actionBarData,
+        setData: setActionBarData,
+        active: actionBarActiveTab,
+        setActive: setActionBarActiveTab,
+        handleAddButton: () => console.log("button clicked")
+      }
+    ),
+    actionBarActiveTab === viewTypes.TABLE && /* @__PURE__ */ jsx(
+      MaterialTable,
+      {
+        enablePagination: false,
+        columnOrder: ["mrt-row-select", ...columnOrder],
+        handleColumnOrdering,
+        rows,
+        columns,
+        totalPages: 20,
+        paginationModel: { pageNo: 1, limit: 10 }
+      }
+    ),
+    actionBarActiveTab === viewTypes.GANTT && /* @__PURE__ */ jsx(GanttChart, { data: ganttData }),
+    actionBarActiveTab === viewTypes.GRID && /* @__PURE__ */ jsx(GridWrapper, { children: /* @__PURE__ */ jsx(GridCard, { data: data$1 }) }),
+    actionBarActiveTab === viewTypes.CALENDAR && /* @__PURE__ */ jsx(CalendarWrapper, { data: calendarData }),
+    actionBarActiveTab === viewTypes.KANBAN && /* @__PURE__ */ jsx(BoardWrapper, { data: board }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(Typography, { mb: 2, children: "Upload" }),
+    /* @__PURE__ */ jsx(Button, { onClick: () => setIsUploadModalOpen(true), children: "Upload Documents" }),
+    /* @__PURE__ */ jsx(
+      Upload,
+      {
+        open: isUploadModalOpen,
+        onClose: () => setIsUploadModalOpen(false),
+        onConfirm: () => setIsUploadModalOpen(true),
+        onSubmit: handleUploadFiles,
+        title: "Upload",
+        multiple: true
+      }
+    ),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx(Typography, { mb: 2, children: "User Dropdown" }),
+    /* @__PURE__ */ jsx(Box, { gap: 2, py: 2, px: 2, sx: { backgroundColor: "#e3e3e3" }, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        display: "flex",
+        gap: 2,
+        my: 2,
+        mx: 2,
+        sx: { width: "472px", maxHeight: "267px", overflowY: "auto" },
+        children: /* @__PURE__ */ jsx(
+          UserDropdown,
+          {
+            data: userData,
+            value: userDropdownData,
+            onToggleChange: handleToggleChange,
+            onCheckboxChange: handleCheckboxChange
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { children: "with task list" }),
+      /* @__PURE__ */ jsx(GanttChart, { data: ganttData, showList: true, progressChange: true, dateChange: true }),
+      /* @__PURE__ */ jsx(Typography, { children: "without task list" }),
+      /* @__PURE__ */ jsx(GanttChart, { data: ganttData })
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { type: "s1", children: "Date Range Picker" }),
+      /* @__PURE__ */ jsx(Box, { sx: { width: "250px" }, children: /* @__PURE__ */ jsx(
+        DateRangePicker,
+        {
+          startYear: "2000",
+          start: "2024/02/05",
+          end: "2024/02/15",
+          dateFormat: "yyyy/MM/dd",
+          onDateRangeChange: handleDateRangePicker
+        }
+      ) }),
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx(Box, { sx: { width: "250px" }, children: /* @__PURE__ */ jsx(
+        TimeRangePicker,
+        {
+          hour12: true,
+          startTime: "08:00 AM",
+          endTime: "08:00 PM",
+          onTimeRangeChange: handleTimeRangePicker
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsxs(Box, { gap: 8, display: "flex", flexWrap: "wrap", children: [
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(DatePicker, { label: "Select Date" }) }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(TimePicker, { label: "Select Time" }) }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(UploadMedia, { label: "Upload Media" }) }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(UploadMedia, { label: "Upload Image", type: "image" }) }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(InfoCard, { label: "Info" }) })
+    ] }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { type: "s1", children: "Bar Chart" }),
+      /* @__PURE__ */ jsx(
+        BarChart,
+        {
+          data,
+          line: true,
+          numOfLines: 5,
+          width: 562,
+          height: 366
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("hr", {}),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { type: "s1", children: "Line Chart" }),
+      /* @__PURE__ */ jsx(LineChart, { data, numOfLines: 10, width: 562, height: 366 })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { type: "s1", children: "Line Area Chart" }),
+      /* @__PURE__ */ jsx(AreaLineChart, { data: areaLineGraph, width: 250, height: 100 })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(ValueField, { label: "full name", children: "Muskan" }),
+      /* @__PURE__ */ jsx(Accordion, { title: "Accordion" })
+    ] }),
+    /* @__PURE__ */ jsx(Typography, { type: "s1", children: "Donut Chart" }),
+    /* @__PURE__ */ jsx(Box, { marginLeft: 10, marginTop: 5, marginBottom: 5, children: /* @__PURE__ */ jsx(DonutChart, { data: donutChartData, legend: false }) }),
+    /* @__PURE__ */ jsx(Typography, { type: "s1", children: "Donut Chart with horizontal legend" }),
+    /* @__PURE__ */ jsx(Box, { width: 700, marginTop: 5, marginBottom: 5, children: /* @__PURE__ */ jsx(DonutChart, { data: donutChartData }) }),
+    /* @__PURE__ */ jsx(Typography, { type: "s1", children: "Donut Chart with vertical legend" }),
+    /* @__PURE__ */ jsx(Box, { width: 350, marginTop: 5, marginBottom: 5, children: /* @__PURE__ */ jsx(
+      DonutChart,
+      {
+        direction: "vertical",
+        data: [
+          {
+            label: "Active User",
+            value: 250
+          },
+          {
+            label: "In-Active User",
+            value: 50
+          }
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  Components,
+  Components as default
+};
+//# sourceMappingURL=index.esm.js.map