@natoora-libs/core 0.2.22-task-management → 0.2.22-task-management-v1

package/dist/components/index.js

@@ -8467,7 +8467,7 @@ var TableDesktop = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopEditableField.tsx
-import { useEffect as useEffect12, useState as useState21 } from "react";
+import { useEffect as useEffect13, useState as useState23 } from "react";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { Checkbox as Checkbox8, FormControlLabel as FormControlLabel5 } from "@mui/material";
 import { DatePicker, TimePicker } from "@mui/x-date-pickers";
@@ -8581,10 +8581,165 @@ var TableDesktopSmartSelect = ({
   );
 };
 
-// src/components/TableDesktopEditableField/TableDesktopTextField.tsx
-import { useMemo as useMemo6, useState as useState20, useRef as useRef8 } from "react";
-import { TextField as TextField8 } from "@mui/material";
+// src/components/TableDesktopEditableField/TableDesktopTagsField.tsx
+import { useEffect as useEffect12, useState as useState21 } from "react";
+
+// src/components/HashtagInput/HashtagInput.tsx
+import { useState as useState20 } from "react";
+import {
+  Autocomplete,
+  Chip as Chip5,
+  TextField as TextField8,
+  alpha,
+  useTheme
+} from "@mui/material";
 import { jsx as jsx130 } from "react/jsx-runtime";
+import { createElement } from "react";
+var HashtagInput = ({
+  label,
+  placeholder,
+  variant,
+  error,
+  helperText,
+  onCreateTag,
+  onDeleteTag,
+  ...props
+}) => {
+  const { palette } = useTheme();
+  const [inputValue, setInputValue] = useState20("");
+  const sanitizeTag = (value) => {
+    return value.toLowerCase().replace(/[^a-z0-9#]/g, "").trim();
+  };
+  const handleKeyDown = (event) => {
+    if ((event.key === " " || event.key === "Enter") && inputValue) {
+      event.preventDefault();
+      event.stopPropagation();
+      const cleaned = sanitizeTag(inputValue);
+      if (!cleaned) return;
+      onCreateTag?.(cleaned);
+      setInputValue("");
+    }
+  };
+  return /* @__PURE__ */ jsx130(
+    Autocomplete,
+    {
+      ...props,
+      multiple: true,
+      freeSolo: true,
+      fullWidth: true,
+      disableClearable: true,
+      value: props.value || [],
+      options: [],
+      inputValue: inputValue.toLocaleLowerCase(),
+      onInputChange: (_event, newInputValue) => {
+        setInputValue(sanitizeTag(newInputValue));
+      },
+      onChange: (_event, _newValue, reason, details) => {
+        if (reason === "removeOption" && details?.option) {
+          onDeleteTag?.(details.option);
+        }
+      },
+      renderInput: (params) => /* @__PURE__ */ jsx130(
+        TextField8,
+        {
+          ...params,
+          label,
+          placeholder,
+          helperText,
+          variant,
+          error,
+          onKeyDown: handleKeyDown
+        }
+      ),
+      renderValue: (value, getTagProps) => value.map((option, index) => {
+        return /* @__PURE__ */ createElement(
+          Chip5,
+          {
+            ...getTagProps({ index }),
+            key: option.id,
+            size: "small",
+            label: `#${option.tag ?? option}`,
+            sx: {
+              paddingBlock: 0,
+              color: palette.primary.main,
+              fontWeight: "bold",
+              backgroundColor: alpha(palette.primary.main, 0.1)
+            }
+          }
+        );
+      })
+    }
+  );
+};
+
+// src/components/TableDesktopEditableField/TableDesktopTagsField.tsx
+import { Fragment as Fragment15, jsx as jsx131 } from "react/jsx-runtime";
+var TableDesktopTagsField = ({
+  initialValue,
+  inputLabel,
+  columnId,
+  rowId,
+  disabled,
+  variant = "standard",
+  size,
+  onUpdateEditableCell
+}) => {
+  const [error, setError] = useState21();
+  const [values, setValues] = useState21([]);
+  const validateTag = (tag) => {
+    if (tag.length >= 30) {
+      return false;
+    }
+    return true;
+  };
+  const handleManageTags = (tag, operation) => {
+    const isRemoving = operation === "REMOVE";
+    const isValid = validateTag(tag);
+    if (!isValid) {
+      setError("Tag must have at most 30 characters");
+      return;
+    }
+    setError(null);
+    const newTags = isRemoving ? values.filter((t) => t !== tag) : [...values, tag];
+    setValues(newTags);
+  };
+  useEffect12(() => {
+    setValues((initialValue ?? []).map((val) => val.tag));
+  }, [initialValue]);
+  return /* @__PURE__ */ jsx131(Fragment15, { children: /* @__PURE__ */ jsx131(
+    HashtagInput,
+    {
+      label: inputLabel,
+      variant,
+      size,
+      disabled,
+      value: values,
+      error: !!error,
+      helperText: error,
+      onCreateTag: (tagName) => {
+        if (!tagName) return;
+        handleManageTags(tagName, "ADD");
+      },
+      onDeleteTag: (tag) => {
+        if (!tag) return;
+        handleManageTags(tag, "REMOVE");
+      },
+      onBlur: () => {
+        onUpdateEditableCell?.({
+          rowId,
+          columnId,
+          value: values,
+          label: values.join(", ")
+        });
+      }
+    }
+  ) });
+};
+
+// src/components/TableDesktopEditableField/TableDesktopTextField.tsx
+import { useMemo as useMemo6, useState as useState22, useRef as useRef8 } from "react";
+import { TextField as TextField9 } from "@mui/material";
+import { jsx as jsx132 } from "react/jsx-runtime";
 var TableDesktopTextField = ({
   rowId,
   initialValue,
@@ -8597,7 +8752,7 @@ var TableDesktopTextField = ({
   validateInput,
   onUpdateEditableCell
 }) => {
-  const [input, setInput] = useState20(initialValue);
+  const [input, setInput] = useState22(initialValue);
   const oldValue = useRef8(initialValue);
   const isDirty = useMemo6(
     () => input !== oldValue.current,
@@ -8621,8 +8776,8 @@ var TableDesktopTextField = ({
       commitValue(input);
     }
   };
-  return /* @__PURE__ */ jsx130(
-    TextField8,
+  return /* @__PURE__ */ jsx132(
+    TextField9,
     {
       fullWidth: true,
       variant,
@@ -8654,7 +8809,7 @@ var TableDesktopTextField = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopEditableField.tsx
-import { jsx as jsx131 } from "react/jsx-runtime";
+import { jsx as jsx133 } from "react/jsx-runtime";
 var TableDesktopEditableField = ({
   editInitialValue,
   rowId,
@@ -8675,8 +8830,8 @@ var TableDesktopEditableField = ({
     allowBlankSelectOption
   }
 }) => {
-  const [parsedFilterOptions, setParsedFilterOptions] = useState21();
-  useEffect12(() => {
+  const [parsedFilterOptions, setParsedFilterOptions] = useState23();
+  useEffect13(() => {
     if (filterOptions && editableCellType === "select" || editableCellType === "multipleSelect") {
       const parsedOptions = filterOptions?.map(
         (option) => ({
@@ -8688,7 +8843,7 @@ var TableDesktopEditableField = ({
     }
   }, [filterOptions, editableCellType]);
   const editableComponents = {
-    select: /* @__PURE__ */ jsx131(
+    select: /* @__PURE__ */ jsx133(
       TableDesktopSmartSelect,
       {
         rowId,
@@ -8706,7 +8861,7 @@ var TableDesktopEditableField = ({
         onUpdateEditableCell
       }
     ),
-    multipleSelect: /* @__PURE__ */ jsx131(
+    multipleSelect: /* @__PURE__ */ jsx133(
       TableDesktopSmartMultipleSelect,
       {
         rowId,
@@ -8723,11 +8878,11 @@ var TableDesktopEditableField = ({
         onUpdateEditableCell
       }
     ),
-    checkbox: /* @__PURE__ */ jsx131(
+    checkbox: /* @__PURE__ */ jsx133(
       FormControlLabel5,
       {
         label: showCheckboxLabel ? inputLabel : "",
-        control: /* @__PURE__ */ jsx131(
+        control: /* @__PURE__ */ jsx133(
           Checkbox8,
           {
             disableRipple: true,
@@ -8745,7 +8900,7 @@ var TableDesktopEditableField = ({
         )
       }
     ),
-    text: /* @__PURE__ */ jsx131(
+    text: /* @__PURE__ */ jsx133(
       TableDesktopTextField,
       {
         type: "text",
@@ -8760,7 +8915,7 @@ var TableDesktopEditableField = ({
         onUpdateEditableCell
       }
     ),
-    numeric: /* @__PURE__ */ jsx131(
+    numeric: /* @__PURE__ */ jsx133(
       TableDesktopTextField,
       {
         type: "numeric",
@@ -8775,7 +8930,7 @@ var TableDesktopEditableField = ({
         onUpdateEditableCell
       }
     ),
-    date: /* @__PURE__ */ jsx131(
+    date: /* @__PURE__ */ jsx133(
       DatePicker,
       {
         defaultValue: editInitialValue ? moment2(editInitialValue, "HH:mm:ss") : void 0,
@@ -8804,7 +8959,7 @@ var TableDesktopEditableField = ({
         }
       }
     ),
-    time: /* @__PURE__ */ jsx131(
+    time: /* @__PURE__ */ jsx133(
       TimePicker,
       {
         defaultValue: editInitialValue ? moment2(editInitialValue, "HH:mm:ss") : void 0,
@@ -8830,6 +8985,18 @@ var TableDesktopEditableField = ({
           }
         }
       }
+    ),
+    tags: /* @__PURE__ */ jsx133(
+      TableDesktopTagsField,
+      {
+        initialValue: editInitialValue,
+        inputLabel,
+        variant,
+        size,
+        onUpdateEditableCell,
+        rowId,
+        columnId
+      }
     )
   };
   if (!editableCellType) {
@@ -8849,7 +9016,7 @@ import {
   Stack,
   Typography as Typography34
 } from "@mui/material";
-import { jsx as jsx132, jsxs as jsxs89 } from "react/jsx-runtime";
+import { jsx as jsx134, jsxs as jsxs89 } from "react/jsx-runtime";
 var TableDesktopFooter = ({
   numPages,
   page,
@@ -8872,7 +9039,7 @@ var TableDesktopFooter = ({
         borderTop: `1px solid ${colors.neutral300}`
       },
       children: [
-        refetchData ? /* @__PURE__ */ jsx132(
+        refetchData ? /* @__PURE__ */ jsx134(
           Button18,
           {
             disableRipple: true,
@@ -8884,7 +9051,7 @@ var TableDesktopFooter = ({
               ml: 1,
               gap: 1
             },
-            children: /* @__PURE__ */ jsx132(
+            children: /* @__PURE__ */ jsx134(
               Refresh3,
               {
                 fontSize: "small",
@@ -8895,19 +9062,19 @@ var TableDesktopFooter = ({
         ) : null,
         /* @__PURE__ */ jsxs89(Box42, { sx: { display: "flex", ml: "auto", py: 1 }, children: [
           pageSize && pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ jsxs89(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
-            /* @__PURE__ */ jsx132(Typography34, { fontSize: 12, children: "Rows per page:" }),
-            /* @__PURE__ */ jsx132(
+            /* @__PURE__ */ jsx134(Typography34, { fontSize: 12, children: "Rows per page:" }),
+            /* @__PURE__ */ jsx134(
               Select5,
               {
                 value: pageSize,
                 onChange: onPageSizeChange,
                 size: "small",
                 variant: "standard",
-                children: pageSizeOptions.map((pageSizeOption) => /* @__PURE__ */ jsx132(MenuItem4, { value: pageSizeOption, children: pageSizeOption }, pageSizeOption))
+                children: pageSizeOptions.map((pageSizeOption) => /* @__PURE__ */ jsx134(MenuItem4, { value: pageSizeOption, children: pageSizeOption }, pageSizeOption))
               }
             )
           ] }) : null,
-          /* @__PURE__ */ jsx132(
+          /* @__PURE__ */ jsx134(
             Pagination2,
             {
               color: "standard",
@@ -8923,15 +9090,15 @@ var TableDesktopFooter = ({
 };
 
 // src/components/TableDesktopCell/TableDesktopCell.tsx
-import { useEffect as useEffect13, useState as useState22 } from "react";
+import { useEffect as useEffect14, useState as useState24 } from "react";
 import CheckIcon3 from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
 import EditIcon from "@mui/icons-material/Edit";
 import { IconButton as IconButton5, TableCell as TableCell6, Tooltip as Tooltip10 } from "@mui/material";
-import { Fragment as Fragment15, jsx as jsx133, jsxs as jsxs90 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx135, jsxs as jsxs90 } from "react/jsx-runtime";
 var getReadOnlyBooleanIcon = (value) => {
   if (value) {
-    return /* @__PURE__ */ jsx133(CheckIcon3, { sx: { fontSize: 16 } });
+    return /* @__PURE__ */ jsx135(CheckIcon3, { sx: { fontSize: 16 } });
   }
   return "-";
 };
@@ -8953,10 +9120,10 @@ var TableDesktopCell = ({
   onCellClick,
   headCell
 }) => {
-  const [isCellHovered, setIsCellHovered] = useState22(false);
-  const [isCellInEditMode, setIsCellInEditMode] = useState22(false);
+  const [isCellHovered, setIsCellHovered] = useState24(false);
+  const [isCellInEditMode, setIsCellInEditMode] = useState24(false);
   const { width, editableCellType } = headCell;
-  useEffect13(() => {
+  useEffect14(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         setIsCellInEditMode(false);
@@ -8974,7 +9141,7 @@ var TableDesktopCell = ({
     setIsCellInEditMode((prev) => !prev);
   };
   const isCellEditable = !!enableEditMode && !!editableCellType && !disabled;
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx135(
     TableCell6,
     {
       align: "left",
@@ -8989,8 +9156,8 @@ var TableDesktopCell = ({
         ":hover": isCellEditable ? getCellBackgroundColor(isCellInEditMode) : void 0,
         background: enableEditMode && isCellInEditMode ? colors.lightBlueBackground : void 0
       },
-      children: /* @__PURE__ */ jsx133(DynamicOverflowTooltip, { tooltipDescription: String(readOnlyValue), arrow: true, children: /* @__PURE__ */ jsxs90(Fragment15, { children: [
-        enableEditMode && isCellHovered ? /* @__PURE__ */ jsx133(Tooltip10, { title: isCellInEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ jsx133(
+      children: /* @__PURE__ */ jsx135(DynamicOverflowTooltip, { tooltipDescription: String(readOnlyValue), arrow: true, children: /* @__PURE__ */ jsxs90(Fragment16, { children: [
+        enableEditMode && isCellHovered ? /* @__PURE__ */ jsx135(Tooltip10, { title: isCellInEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ jsx135(
           IconButton5,
           {
             onClick: handleEditClick,
@@ -9005,10 +9172,10 @@ var TableDesktopCell = ({
                 backgroundColor: isCellInEditMode ? colors.lightBlueBackground : colors.neutral150
               }
             },
-            children: isCellInEditMode ? /* @__PURE__ */ jsx133(CloseIcon, { fontSize: "small", color: "error" }) : /* @__PURE__ */ jsx133(EditIcon, { fontSize: "small" })
+            children: isCellInEditMode ? /* @__PURE__ */ jsx135(CloseIcon, { fontSize: "small", color: "error" }) : /* @__PURE__ */ jsx135(EditIcon, { fontSize: "small" })
           }
         ) }) : null,
-        enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ jsx133(
+        enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ jsx135(
           TableDesktopEditableField,
           {
             editInitialValue,
@@ -9025,7 +9192,7 @@ var TableDesktopCell = ({
 
 // src/components/TableDesktopToolbar/TableDesktopToolbar.tsx
 import {
-  useState as useState23,
+  useState as useState25,
   useMemo as useMemo7,
   useRef as useRef9
 } from "react";
@@ -9042,7 +9209,7 @@ import {
   Tooltip as Tooltip11,
   Typography as Typography35
 } from "@mui/material";
-import { Fragment as Fragment16, jsx as jsx134, jsxs as jsxs91 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx136, jsxs as jsxs91 } from "react/jsx-runtime";
 var TableDesktopToolbar = ({
   toolbarLabel,
   headCells,
@@ -9066,10 +9233,10 @@ var TableDesktopToolbar = ({
   renderInfoIcons
 }) => {
   const scrollRef = useRef9(null);
-  const [bulkChanges, setBulkChanges] = useState23([]);
-  const [isBulkChangesDialogOpen, setIsBulkChangesDialogOpen] = useState23(false);
-  const [isExportCsvDialogOpen, setIsExportCsvDialogOpen] = useState23(false);
-  const [resetCounter, setResetCounter] = useState23(0);
+  const [bulkChanges, setBulkChanges] = useState25([]);
+  const [isBulkChangesDialogOpen, setIsBulkChangesDialogOpen] = useState25(false);
+  const [isExportCsvDialogOpen, setIsExportCsvDialogOpen] = useState25(false);
+  const [resetCounter, setResetCounter] = useState25(0);
   const visibleEditableColumns = useMemo7(
     () => headCells.filter(
       (headCell) => headCell?.enabled && !!headCell?.editableCellType
@@ -9128,20 +9295,20 @@ var TableDesktopToolbar = ({
                     whiteSpace: "nowrap"
                   },
                   children: [
-                    toolbarLabel ? /* @__PURE__ */ jsxs91(Fragment16, { children: [
-                      /* @__PURE__ */ jsx134(Typography35, { variant: "subtitle2", color: "textSecondary", children: toolbarLabel }),
-                      /* @__PURE__ */ jsx134(Divider11, { orientation: "vertical", sx: { height: 0.75, py: 2.5 } })
+                    toolbarLabel ? /* @__PURE__ */ jsxs91(Fragment17, { children: [
+                      /* @__PURE__ */ jsx136(Typography35, { variant: "subtitle2", color: "textSecondary", children: toolbarLabel }),
+                      /* @__PURE__ */ jsx136(Divider11, { orientation: "vertical", sx: { height: 0.75, py: 2.5 } })
                     ] }) : null,
-                    renderBulkChangesDialog && refetchData ? /* @__PURE__ */ jsx134(
+                    renderBulkChangesDialog && refetchData ? /* @__PURE__ */ jsx136(
                       Tooltip11,
                       {
                         title: disableBulkChangesMode ? "Access denied, you don\u2019t have permission to use this feature." : "",
-                        children: /* @__PURE__ */ jsx134(
+                        children: /* @__PURE__ */ jsx136(
                           FormControlLabel6,
                           {
                             label: "Bulk Changes Mode",
                             disabled: disableBulkChangesMode || !visibleEditableColumns.length,
-                            control: /* @__PURE__ */ jsx134(
+                            control: /* @__PURE__ */ jsx136(
                               Switch2,
                               {
                                 size: "small",
@@ -9156,16 +9323,16 @@ var TableDesktopToolbar = ({
                   ]
                 }
               ),
-              isScrollable && /* @__PURE__ */ jsx134(
+              isScrollable && /* @__PURE__ */ jsx136(
                 IconButton6,
                 {
                   "aria-label": "scroll-left",
                   sx: { padding: 0, alignSelf: "center" },
                   onClick: () => scroll("left"),
-                  children: /* @__PURE__ */ jsx134(KeyboardArrowLeft2, {})
+                  children: /* @__PURE__ */ jsx136(KeyboardArrowLeft2, {})
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx136(
                 Box43,
                 {
                   ref: scrollRef,
@@ -9183,12 +9350,15 @@ var TableDesktopToolbar = ({
                     }
                   },
                   children: isBulkChangesMode ? visibleEditableColumns.map((headCell) => {
-                    const { id, width, editableCellType } = headCell;
-                    return editableCellType && /* @__PURE__ */ jsx134(
+                    const { id, width, editableCellType, bulkUpdateDisabled } = headCell;
+                    if (bulkUpdateDisabled) {
+                      return null;
+                    }
+                    return editableCellType && /* @__PURE__ */ jsx136(
                       Box43,
                       {
                         sx: { width, flex: "0 0 auto" },
-                        children: /* @__PURE__ */ jsx134(
+                        children: /* @__PURE__ */ jsx136(
                           TableDesktopEditableField,
                           {
                             headCell,
@@ -9204,17 +9374,17 @@ var TableDesktopToolbar = ({
                   }) : null
                 }
               ),
-              isScrollable && /* @__PURE__ */ jsx134(
+              isScrollable && /* @__PURE__ */ jsx136(
                 IconButton6,
                 {
                   "aria-label": "scroll-right",
                   sx: { p: 0, alignSelf: "center" },
                   onClick: () => scroll("right"),
-                  children: /* @__PURE__ */ jsx134(KeyboardArrowRight2, {})
+                  children: /* @__PURE__ */ jsx136(KeyboardArrowRight2, {})
                 }
               ),
-              isBulkChangesMode ? /* @__PURE__ */ jsxs91(Fragment16, { children: [
-                /* @__PURE__ */ jsx134(
+              isBulkChangesMode ? /* @__PURE__ */ jsxs91(Fragment17, { children: [
+                /* @__PURE__ */ jsx136(
                   Button19,
                   {
                     variant: "outlined",
@@ -9227,7 +9397,7 @@ var TableDesktopToolbar = ({
                     children: "RESET"
                   }
                 ),
-                /* @__PURE__ */ jsx134(
+                /* @__PURE__ */ jsx136(
                   Button19,
                   {
                     variant: "contained",
@@ -9240,24 +9410,24 @@ var TableDesktopToolbar = ({
                 )
               ] }) : /* @__PURE__ */ jsxs91(Box43, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                 renderInfoIcons,
-                renderExportCsvDialog ? /* @__PURE__ */ jsx134(Tooltip11, { title: "Download List", children: /* @__PURE__ */ jsx134("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx134(
+                renderExportCsvDialog ? /* @__PURE__ */ jsx136(Tooltip11, { title: "Download List", children: /* @__PURE__ */ jsx136("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx136(
                   IconButton6,
                   {
                     disableRipple: true,
                     disabled: isDataEmpty,
                     "aria-label": "export-csv-button",
                     onClick: () => setIsExportCsvDialogOpen(true),
-                    children: /* @__PURE__ */ jsx134(Download, { fill: colors.neutral750 })
+                    children: /* @__PURE__ */ jsx136(Download, { fill: colors.neutral750 })
                   }
                 ) }) }) : null,
-                renderTableColumnConfigurationMenu ? /* @__PURE__ */ jsx134(Tooltip11, { title: "Table Column Configuration", children: /* @__PURE__ */ jsx134(
+                renderTableColumnConfigurationMenu ? /* @__PURE__ */ jsx136(Tooltip11, { title: "Table Column Configuration", children: /* @__PURE__ */ jsx136(
                   IconButton6,
                   {
                     disableRipple: true,
                     "aria-label": "table-column-config-button",
                     ref: tableToolbarMenuButtonRef,
                     onClick: onClickToolbarMenuOpen,
-                    children: /* @__PURE__ */ jsx134(IconTableEdit_default, { fill: colors.neutral750 })
+                    children: /* @__PURE__ */ jsx136(IconTableEdit_default, { fill: colors.neutral750 })
                   }
                 ) }) : null
               ] })
@@ -9290,11 +9460,11 @@ var TableDesktopToolbar = ({
 };
 
 // src/components/TableHeader/TableHeader.tsx
-import { memo as memo22, useEffect as useEffect14, useState as useState24 } from "react";
+import { memo as memo22, useEffect as useEffect15, useState as useState26 } from "react";
 import { ImportExport as ImportExportIcon } from "@mui/icons-material";
 import { TableCell as TableCell7, TableHead as TableHead3, TableRow as TableRow6, TableSortLabel as TableSortLabel3 } from "@mui/material";
 import { makeStyles as makeStyles46 } from "tss-react/mui";
-import { jsx as jsx135 } from "react/jsx-runtime";
+import { jsx as jsx137 } from "react/jsx-runtime";
 var useStyles46 = makeStyles46()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
@@ -9303,9 +9473,9 @@ var useStyles46 = makeStyles46()(() => ({
   }
 }));
 var TableHeader = ({ cells, onSort = null }) => {
-  const [sortableCells, setSortableCells] = useState24([]);
+  const [sortableCells, setSortableCells] = useState26([]);
   const { classes } = useStyles46();
-  useEffect14(() => {
+  useEffect15(() => {
     setSortableCells(cells);
   }, []);
   const getNewSortDirection = (direction) => {
@@ -9339,7 +9509,7 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ jsx135(TableHead3, { children: /* @__PURE__ */ jsx135(TableRow6, { children: sortableCells.map((cell, key) => /* @__PURE__ */ jsx135(TableCell7, { children: cell.isSortable ? /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx137(TableHead3, { children: /* @__PURE__ */ jsx137(TableRow6, { children: sortableCells.map((cell, key) => /* @__PURE__ */ jsx137(TableCell7, { children: cell.isSortable ? /* @__PURE__ */ jsx137(
     TableSortLabel3,
     {
       className: classes.sortLabel,
@@ -9355,7 +9525,7 @@ var TableHeader_default = memo22(TableHeader);
 // src/components/TextDivider/TextDivider.tsx
 import { Box as Box44, Typography as Typography36, Divider as Divider12, Button as Button20 } from "@mui/material";
 import { makeStyles as makeStyles47 } from "tss-react/mui";
-import { jsx as jsx136, jsxs as jsxs92 } from "react/jsx-runtime";
+import { jsx as jsx138, jsxs as jsxs92 } from "react/jsx-runtime";
 var useStyles47 = makeStyles47()(() => ({
   icon: {
     fontSize: 20
@@ -9400,10 +9570,10 @@ var TextDivider = ({
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__PURE__ */ jsx136(Divider12, { className: classes.leftDivider }),
-        /* @__PURE__ */ jsx136(Button20, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ jsxs92(Box44, { className: classes.center, children: [
-          Icon2 && iconPosition === "left" && /* @__PURE__ */ jsx136(Icon2, { className: classes.icon, style: { color: iconColor } }),
-          /* @__PURE__ */ jsx136(
+        /* @__PURE__ */ jsx138(Divider12, { className: classes.leftDivider }),
+        /* @__PURE__ */ jsx138(Button20, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ jsxs92(Box44, { className: classes.center, children: [
+          Icon2 && iconPosition === "left" && /* @__PURE__ */ jsx138(Icon2, { className: classes.icon, style: { color: iconColor } }),
+          /* @__PURE__ */ jsx138(
             Typography36,
             {
               color: "textSecondary",
@@ -9412,9 +9582,9 @@ var TextDivider = ({
               children: title
             }
           ),
-          Icon2 && iconPosition === "right" && /* @__PURE__ */ jsx136(Icon2, { className: classes.icon, style: { color: iconColor } })
+          Icon2 && iconPosition === "right" && /* @__PURE__ */ jsx138(Icon2, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ jsx136(Divider12, { className: classes.rightDivider })
+        /* @__PURE__ */ jsx138(Divider12, { className: classes.rightDivider })
       ]
     }
   );
@@ -9426,7 +9596,7 @@ import { DateRangePicker } from "react-dates";
 import { makeStyles as makeStyles48 } from "tss-react/mui";
 import "react-dates/initialize";
 import "react-dates/lib/css/_datepicker.css";
-import { jsx as jsx137 } from "react/jsx-runtime";
+import { jsx as jsx139 } from "react/jsx-runtime";
 var useStyles48 = makeStyles48()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
@@ -9522,7 +9692,7 @@ var ThemedDateRangePicker = ({
   ...props
 }) => {
   const { classes, cx } = useStyles48();
-  return /* @__PURE__ */ jsx137("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ jsx137(DateRangePicker, { ...props }) });
+  return /* @__PURE__ */ jsx139("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ jsx139(DateRangePicker, { ...props }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
@@ -9530,7 +9700,7 @@ var ThemedDateRangePicker_default = ThemedDateRangePicker;
 import { memo as memo23 } from "react";
 import { AppBar, Box as Box45, Toolbar } from "@mui/material";
 import { makeStyles as makeStyles49 } from "tss-react/mui";
-import { jsx as jsx138, jsxs as jsxs93 } from "react/jsx-runtime";
+import { jsx as jsx140, jsxs as jsxs93 } from "react/jsx-runtime";
 var useStyles49 = makeStyles49()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
@@ -9552,8 +9722,8 @@ var TheToolbar = ({
 }) => {
   const { classes } = useStyles49();
   return /* @__PURE__ */ jsxs93(Box45, { children: [
-    /* @__PURE__ */ jsx138(AppBar, { children: /* @__PURE__ */ jsxs93(Toolbar, { className: classes.topBar, children: [
-      isAuthenticated ? /* @__PURE__ */ jsx138(
+    /* @__PURE__ */ jsx140(AppBar, { children: /* @__PURE__ */ jsxs93(Toolbar, { className: classes.topBar, children: [
+      isAuthenticated ? /* @__PURE__ */ jsx140(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -9562,7 +9732,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ) : null,
-      /* @__PURE__ */ jsx138(
+      /* @__PURE__ */ jsx140(
         CompanyLogo_default,
         {
           size: "small",
@@ -9571,8 +9741,8 @@ var TheToolbar = ({
           imageLogoLightSmall
         }
       ),
-      /* @__PURE__ */ jsx138(Box45, { ml: 2, children: leftSection }),
-      /* @__PURE__ */ jsx138(Box45, { ml: "auto", children: rightSection })
+      /* @__PURE__ */ jsx140(Box45, { ml: 2, children: leftSection }),
+      /* @__PURE__ */ jsx140(Box45, { ml: "auto", children: rightSection })
     ] }) }),
     LeftDrawer
   ] });
@@ -9581,20 +9751,20 @@ var TheToolbar_default = memo23(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
 import { Alert as MuiAlert, Snackbar } from "@mui/material";
-import { jsx as jsx139 } from "react/jsx-runtime";
+import { jsx as jsx141 } from "react/jsx-runtime";
 var ToastMessage = ({
   toastType,
   toastMessage,
   open,
   onClose
-}) => /* @__PURE__ */ jsx139(
+}) => /* @__PURE__ */ jsx141(
   Snackbar,
   {
     open,
     autoHideDuration: 3e3,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
-    children: /* @__PURE__ */ jsx139(
+    children: /* @__PURE__ */ jsx141(
       MuiAlert,
       {
         elevation: 6,
@@ -9631,7 +9801,7 @@ import {
   Fade as Fade2
 } from "@mui/material";
 import { makeStyles as makeStyles50 } from "tss-react/mui";
-import { jsx as jsx140, jsxs as jsxs94 } from "react/jsx-runtime";
+import { jsx as jsx142, jsxs as jsxs94 } from "react/jsx-runtime";
 var useStyles50 = makeStyles50()((theme) => ({
   paper: {
     padding: theme.spacing(2)
@@ -9661,7 +9831,7 @@ var TwoButtonDialog = ({
   cancelButton
 }) => {
   const { classes } = useStyles50();
-  return /* @__PURE__ */ jsx140(
+  return /* @__PURE__ */ jsx142(
     Dialog5,
     {
       open,
@@ -9671,9 +9841,9 @@ var TwoButtonDialog = ({
       closeAfterTransition: true,
       BackdropComponent: Backdrop,
       BackdropProps: { timeout: 500 },
-      children: /* @__PURE__ */ jsx140(Fade2, { in: open, children: /* @__PURE__ */ jsxs94(Paper13, { className: classes.paper, children: [
+      children: /* @__PURE__ */ jsx142(Fade2, { in: open, children: /* @__PURE__ */ jsxs94(Paper13, { className: classes.paper, children: [
         /* @__PURE__ */ jsxs94(Box46, { className: classes.mb, children: [
-          /* @__PURE__ */ jsx140(Typography37, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx140(
+          /* @__PURE__ */ jsx142(Typography37, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx142(
             Box46,
             {
               sx: {
@@ -9690,15 +9860,15 @@ var TwoButtonDialog = ({
                 fontWeight: 600
               },
               children: [
-                subtitle1 && /* @__PURE__ */ jsx140(Typography37, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ jsx140(Typography37, { variant: "subtitle1", children: subtitle2 })
+                subtitle1 && /* @__PURE__ */ jsx142(Typography37, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ jsx142(Typography37, { variant: "subtitle1", children: subtitle2 })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx140(Divider13, {}),
+        /* @__PURE__ */ jsx142(Divider13, {}),
         /* @__PURE__ */ jsxs94(Box46, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ jsx140(
+          /* @__PURE__ */ jsx142(
             FilledButton_default,
             {
               copy: cancelLabel,
@@ -9711,7 +9881,7 @@ var TwoButtonDialog = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx140(
+          /* @__PURE__ */ jsx142(
             FilledButton_default,
             {
               color: "primary",
@@ -9720,7 +9890,7 @@ var TwoButtonDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx140(Loading_default, { isLoading: dialogLoading })
+        /* @__PURE__ */ jsx142(Loading_default, { isLoading: dialogLoading })
       ] }) })
     }
   );
@@ -9730,9 +9900,9 @@ var TwoButtonDialog_default = TwoButtonDialog;
 // src/components/UserBust/UserBust.tsx
 import { memo as memo24 } from "react";
 import { Avatar as Avatar2, Typography as Typography38 } from "@mui/material";
-import { jsx as jsx141, jsxs as jsxs95 } from "react/jsx-runtime";
+import { jsx as jsx143, jsxs as jsxs95 } from "react/jsx-runtime";
 var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs95("div", { children: [
-  /* @__PURE__ */ jsx141(
+  /* @__PURE__ */ jsx143(
     Avatar2,
     {
       src: user.profile_picture,
@@ -9741,17 +9911,17 @@ var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs9
     }
   ),
   /* @__PURE__ */ jsxs95("div", { style: { paddingTop: 16 }, children: [
-    /* @__PURE__ */ jsx141(Typography38, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
-    /* @__PURE__ */ jsx141(Typography38, { ...typographyProps.username, children: user.username })
+    /* @__PURE__ */ jsx143(Typography38, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
+    /* @__PURE__ */ jsx143(Typography38, { ...typographyProps.username, children: user.username })
   ] })
 ] });
 var UserBust_default = memo24(UserBust);
 
 // src/components/icons/IconChart.tsx
-import { jsx as jsx142 } from "react/jsx-runtime";
+import { jsx as jsx144 } from "react/jsx-runtime";
 var SvgIconChart = (props) => {
   const { fill } = props;
-  return /* @__PURE__ */ jsx142(
+  return /* @__PURE__ */ jsx144(
     "svg",
     {
       width: "20",
@@ -9760,7 +9930,7 @@ var SvgIconChart = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx142(
+      children: /* @__PURE__ */ jsx144(
         "path",
         {
           d: "M2.49967 11.6667L2.91634 11.725L6.72467 7.91667C6.57467 7.375 6.71634 6.75833 7.15801 6.325C7.80801 5.66667 8.85801 5.66667 9.50801 6.325C9.94967 6.75833 10.0913 7.375 9.94134 7.91667L12.083 10.0583L12.4997 10C12.6497 10 12.7913 10 12.9163 10.0583L15.8913 7.08333C15.833 6.95833 15.833 6.81667 15.833 6.66667C15.833 6.22464 16.0086 5.80072 16.3212 5.48816C16.6337 5.17559 17.0576 5 17.4997 5C17.9417 5 18.3656 5.17559 18.6782 5.48816C18.9907 5.80072 19.1663 6.22464 19.1663 6.66667C19.1663 7.10869 18.9907 7.53262 18.6782 7.84518C18.3656 8.15774 17.9417 8.33333 17.4997 8.33333C17.3497 8.33333 17.208 8.33333 17.083 8.275L14.108 11.25C14.1663 11.375 14.1663 11.5167 14.1663 11.6667C14.1663 12.1087 13.9907 12.5326 13.6782 12.8452C13.3656 13.1577 12.9417 13.3333 12.4997 13.3333C12.0576 13.3333 11.6337 13.1577 11.3212 12.8452C11.0086 12.5326 10.833 12.1087 10.833 11.6667L10.8913 11.25L8.74967 9.10833C8.48301 9.16667 8.18301 9.16667 7.91634 9.10833L4.10801 12.9167L4.16634 13.3333C4.16634 13.7754 3.99075 14.1993 3.67819 14.5118C3.36563 14.8244 2.9417 15 2.49967 15C2.05765 15 1.63372 14.8244 1.32116 14.5118C1.0086 14.1993 0.833008 13.7754 0.833008 13.3333C0.833008 12.8913 1.0086 12.4674 1.32116 12.1548C1.63372 11.8423 2.05765 11.6667 2.49967 11.6667Z",
@@ -9805,6 +9975,7 @@ export {
   FilterOptionsCheckboxes,
   FilterSimpleSelector_default as FilterSimpleSelector,
   FixedFooter_default as FixedFooter,
+  HashtagInput,
   Header_default as Header,
   IconChart_default as IconChart,
   IconCompare_default as IconCompare,