awing-library 2.1.2-dev.97 → 2.1.2-dev.99

package/dist/esm/index.js

@@ -3,7 +3,7 @@ import { initReactI18next, useTranslation, Trans, I18nextProvider } from 'react-
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, Fragment, Children, isValidElement, cloneElement, useMemo, createElement, forwardRef, useLayoutEffect, useCallback, createContext as createContext$1, memo, useReducer, useContext, PureComponent, createRef } from 'react';
 import { MoreVert, KeyboardArrowDown, Done as Done$1, FolderOpen, ArrowDropDown, ArrowDropUp, CheckBoxOutlineBlank, CheckBox, ExpandMore, ExpandLess, KeyboardArrowUp, DragIndicator, PinDrop, LastPage, FirstPage, KeyboardArrowRight, KeyboardArrowLeft, UnfoldMore, North, South, HighlightOff, CalendarTodaySharp, FileCopyOutlined, Close, Save, Check, ArrowRightAlt as ArrowRightAlt$1, CallSplit, ManageAccounts, People, Person, Info, ChevronRight as ChevronRight$1, Clear, AddCircleOutline, Search, MoreHoriz, CreateNewFolderOutlined, Delete, PlaylistAddCheck, FormatListNumbered, Add, MoreHorizOutlined, DisplaySettings, VisibilityOff, Visibility, ManageSearch, Notifications as Notifications$6, Science, Settings, AddBox, Edit as Edit$2, InsertDriveFile, SignalCellularAlt, Logout, ArrowRight, ChevronLeft as ChevronLeft$1 } from '@mui/icons-material';
-import { Tooltip as Tooltip$2, IconButton as IconButton$1, Menu as Menu$2, MenuItem as MenuItem$1, Button as Button$1, TextField as TextField$1, Grid as Grid$1, FormControl as FormControl$1, Select as Select$1, Box as Box$1, alpha as alpha$2, Typography as Typography$1, Paper as Paper$1, List as List$1, ListItem as ListItem$1, ListItemButton, ListItemText, Divider, Popover as Popover$1, Popper as Popper$2, Grow as Grow$1, ClickAwayListener, Autocomplete as Autocomplete$2, InputBase as InputBase$1, Stack, ButtonBase as ButtonBase$1, Collapse as Collapse$1, Chip as Chip$1, CircularProgress as CircularProgress$2, FormControlLabel, Checkbox as Checkbox$1, RadioGroup, Radio, InputLabel as InputLabel$1, ListSubheader as ListSubheader$1, FormLabel as FormLabel$1, TablePagination, TableRow, TableContainer, Table, TableHead, TableCell, TableSortLabel, TableBody, InputAdornment as InputAdornment$1, Drawer as Drawer$1, Dialog as Dialog$3, DialogTitle, DialogContent as DialogContent$1, DialogContentText, DialogActions as DialogActions$1, Tabs, Tab, Snackbar, Alert, Toolbar, Switch, tooltipClasses as tooltipClasses$1, styled as styled$4, Avatar, Skeleton, Badge, Stepper, Step, StepLabel, StepContent, Card, CardHeader, CardContent, NoSsr, ListItemIcon, AppBar, Container as Container$o, Icon, CssBaseline } from '@mui/material';
+import { Tooltip as Tooltip$2, IconButton as IconButton$1, Menu as Menu$2, MenuItem as MenuItem$1, Button as Button$1, TextField as TextField$1, Grid as Grid$1, FormControl as FormControl$1, Select as Select$1, Box as Box$1, alpha as alpha$2, Typography as Typography$1, Paper as Paper$1, List as List$1, ListItem as ListItem$1, ListItemButton, ListItemText, Divider, Popover as Popover$1, Popper as Popper$2, Grow as Grow$1, ClickAwayListener as ClickAwayListener$1, Autocomplete as Autocomplete$2, InputBase as InputBase$1, Stack, ButtonBase as ButtonBase$1, Collapse as Collapse$1, Chip as Chip$1, CircularProgress as CircularProgress$2, FormControlLabel, Checkbox as Checkbox$1, RadioGroup, Radio, InputLabel as InputLabel$1, ListSubheader as ListSubheader$1, FormLabel as FormLabel$1, TablePagination, TableRow, TableContainer, Table, TableHead, TableCell, TableSortLabel, TableBody, InputAdornment as InputAdornment$1, Drawer as Drawer$1, Dialog as Dialog$3, DialogTitle, DialogContent as DialogContent$1, DialogContentText, DialogActions as DialogActions$1, Tabs, Tab, Snackbar, Alert, Toolbar, Switch, tooltipClasses as tooltipClasses$1, styled as styled$4, Avatar, Skeleton, Badge, Stepper, Step, StepLabel, StepContent, Card, CardHeader, CardContent, NoSsr, ListItemIcon, AppBar, Container as Container$o, Icon, CssBaseline } from '@mui/material';
 import styled$3 from '@emotion/styled';
 import { CacheProvider, Global, ThemeContext as ThemeContext$2, keyframes, css } from '@emotion/react';
 import { makeStyles } from '@mui/styles';
@@ -41599,6 +41599,827 @@ function ThemeProvider$1({
   });
 }
 
+/**
+ * Get the value of a cookie
+ * Source: https://vanillajstoolkit.com/helpers/getcookie/
+ * @param name - The name of the cookie
+ * @return The cookie value
+ */
+function getCookie(name) {
+  if (typeof document !== 'undefined') {
+    const value = "; ".concat(document.cookie);
+    const parts = value.split("; ".concat(name, "="));
+    if (parts.length === 2) {
+      return parts[1].split(';').shift();
+    }
+  }
+  return undefined;
+}
+function getQueryVariable(variable) {
+  var query = window.location.search.substring(1);
+  var vars = query.split('&');
+  for (var i = 0; i < vars.length; i++) {
+    var pair = vars[i].split('=');
+    if (pair[0] === variable) {
+      return pair[1];
+    }
+  }
+  return '';
+}
+function generateUUID() {
+  // Public Domain/MIT
+  var d = new Date().getTime(); //Timestamp
+  var d2 = typeof performance !== 'undefined' && performance.now && performance.now() * 1000 || 0; //Time in microseconds since page-load or 0 if unsupported
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = Math.random() * 16; //random number between 0 and 16
+    if (d > 0) {
+      //Use timestamp until depleted
+      r = (d + r) % 16 | 0;
+      d = Math.floor(d / 16);
+    } else {
+      //Use microseconds since page-load if supported
+      r = (d2 + r) % 16 | 0;
+      d2 = Math.floor(d2 / 16);
+    }
+    return (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
+  });
+}
+const getRoutePath = (location, params) => {
+  const {
+    pathname
+  } = location;
+  if (!Object.keys(params).length) {
+    return pathname; // we don't need to replace anything
+  }
+  let path = pathname;
+  Object.entries(params).forEach(_ref => {
+    let [paramName, paramValue] = _ref;
+    if (paramValue) {
+      path = path.replace(paramValue, ":".concat(paramName));
+    }
+  });
+  return path;
+};
+const offlinePaginate = (array, pageIndex, pageSize) => [...array].slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+
+/**
+ * Xử lý dữ liệu dạng mảng hoặc object một cách đơn giản và hiệu quả.
+ * Tăng cường khả năng thao tác với danh sách dữ liệu.
+ */
+function convertArrayToObject(array, keyName) {
+  return array === null || array === void 0 ? void 0 : array.reduce((obj, item, _index) => {
+    return Object.assign(Object.assign({}, obj), {
+      [item[keyName]]: Object.assign({}, item)
+    });
+  }, {});
+}
+const convertDataSetPattern = data => {
+  const ctr = data === null || data === void 0 ? void 0 : data.map(item => item.ctr);
+  const numberOfConnections = data === null || data === void 0 ? void 0 : data.map(item => item.click);
+  const impressions = data === null || data === void 0 ? void 0 : data.map(item => item.view);
+  return [{
+    data: ctr,
+    label: i18n.t('Statistics.CTR'),
+    type: 'bar',
+    color: 'rgb(128, 176, 255)'
+  }, {
+    data: numberOfConnections,
+    label: i18n.t('Statistics.NumberOfConnections'),
+    type: 'line',
+    color: 'rgb(0, 85, 184)'
+  }, {
+    data: impressions,
+    label: i18n.t('Statistics.Impressions'),
+    type: 'line',
+    color: 'rgb(221, 4, 12)'
+  }];
+};
+const updateObjectFields = (originalObj, changedValues) => {
+  // Create a copy of the original object
+  const updatedObject = Object.assign({}, originalObj);
+  // Recursive function to update nested fields
+  const updateNestedFields = (obj, changes) => {
+    for (const [key, value] of Object.entries(changes)) {
+      // Check if the field exists in the original object
+      if (obj.hasOwnProperty(key)) {
+        // If the field is an object, recursively update nested fields
+        if (typeof obj[key] === 'object' && typeof value === 'object') {
+          updateNestedFields(obj[key], value);
+        } else {
+          // Otherwise, update the field value
+          obj[key] = value;
+        }
+      } else {
+        obj[key] = value;
+      }
+    }
+  };
+  // Update nested fields
+  updateNestedFields(updatedObject, changedValues);
+  return updatedObject;
+};
+function formatChartNumber(val, language) {
+  if (!val) return '0';
+  if (val === '-') {
+    return '-';
+  }
+  const temp = Math.round(Number(val) * 100) / 100;
+  let formatValue = formatNumberWithLanguage(temp, language);
+  return formatValue;
+}
+const setObject = (obj, arrKey, value) => {
+  lodashExports.set(obj, arrKey.reduce((acc, val) => acc + '[' + val + ']', ''), value);
+};
+//AWING_[NAME FEATURE]_[OBJECT_NAME]_[SUB_TITLE]_[DATEFORMAT yyyy-MM-DD]
+function nameExportStandard(nameFeature, objectName, subTitle) {
+  const currentTime = moment().format('YYYY-MM-DD');
+  const parts = [nameFeature, objectName, subTitle, currentTime].filter(Boolean);
+  return "AWING_".concat(parts.join('_').toUpperCase());
+}
+const formatJSON$1 = val => {
+  try {
+    const res = JSON.parse(val);
+    return JSON.stringify(res, null, 2);
+  } catch (_a) {
+    return val;
+  }
+};
+
+var TIMELINE_TYPE;
+(function (TIMELINE_TYPE) {
+  TIMELINE_TYPE[TIMELINE_TYPE["HOUR"] = 0] = "HOUR";
+  TIMELINE_TYPE[TIMELINE_TYPE["DAY"] = 1] = "DAY";
+})(TIMELINE_TYPE || (TIMELINE_TYPE = {}));
+var SortEnumType;
+(function (SortEnumType) {
+  SortEnumType["Asc"] = "ASC";
+  SortEnumType["Desc"] = "DESC";
+})(SortEnumType || (SortEnumType = {}));
+var DataGridSortType;
+(function (DataGridSortType) {
+  DataGridSortType["Asc"] = "ASC";
+  DataGridSortType["Desc"] = "DESC";
+  DataGridSortType["Ready"] = "READY";
+})(DataGridSortType || (DataGridSortType = {}));
+var DirectoryRoot;
+(function (DirectoryRoot) {
+  DirectoryRoot["Directory"] = "directory";
+  DirectoryRoot["Place"] = "place";
+  DirectoryRoot["Workflow"] = "workflow";
+  DirectoryRoot["Workflow_gate"] = "workflow_gate";
+  DirectoryRoot["Workflow_scheme"] = "workflow_scheme";
+  DirectoryRoot["Menu"] = "menu";
+  DirectoryRoot["Storage"] = "storage";
+  DirectoryRoot["Report"] = "report";
+  DirectoryRoot["Group"] = "group";
+  DirectoryRoot["Campaign"] = "campaign";
+  DirectoryRoot["Page"] = "page";
+  DirectoryRoot["PageWelcome"] = "pageWelcome";
+  DirectoryRoot["PageLogin"] = "pageLogin";
+  DirectoryRoot["PageGadget"] = "pageGadget";
+  DirectoryRoot["PageHistory"] = "pageHistory";
+  DirectoryRoot["CampaignCurrent"] = "campaignCurrent";
+  DirectoryRoot["CampaignHistory"] = "campaignHistory";
+  DirectoryRoot["Template"] = "template";
+  DirectoryRoot["Layout"] = "layout";
+  DirectoryRoot["Authentication_profile"] = "authentication_profile";
+  DirectoryRoot["Archive"] = "archive";
+  DirectoryRoot["Ap"] = "ap";
+  DirectoryRoot["Place_group"] = "place_group";
+  DirectoryRoot["Wizard"] = "wizard";
+  DirectoryRoot["Campaign_collection"] = "campaign_collection";
+  DirectoryRoot["Task_scheduler"] = "task_scheduler";
+})(DirectoryRoot || (DirectoryRoot = {}));
+var WorkspaceType;
+(function (WorkspaceType) {
+  WorkspaceType["AXN"] = "AXN";
+  WorkspaceType["ADMIN"] = "ADMIN";
+  WorkspaceType["ACM"] = "ACM";
+})(WorkspaceType || (WorkspaceType = {}));
+
+/**
+ * Quản lý và xử lý thời gian, ngày tháng một cách tiện lợi và nhất quán.
+ * Giảm thiểu lỗi khi thao tác với định dạng ngày giờ.
+ */
+function dateToString(date) {
+  return moment(date).format('L');
+}
+function calculatorDirectoryIdRoot(directoriesTree) {
+  let directoryId = 0;
+  let minLevel = Number.POSITIVE_INFINITY;
+  directoriesTree.forEach(directory => {
+    if (directory.level < minLevel) {
+      minLevel = directory.level;
+      directoryId = directory.directoryId;
+    }
+  });
+  return directoryId;
+}
+const convertTimeLine = value => {
+  let dateTime = '';
+  const hour = value.toString().substring(8, 10);
+  if (hour) {
+    dateTime += "".concat(hour, "h ");
+  }
+  const day = value.toString().substring(6, 8);
+  if (day) {
+    dateTime += "".concat(day, "-");
+  }
+  const month = value.toString().substring(4, 6);
+  if (month) {
+    dateTime += "".concat(month, "-");
+  }
+  const year = value.toString().substring(0, 4);
+  if (year) {
+    dateTime += "".concat(year);
+  }
+  //  `${year}-${month}-${day}T${hour}`
+  // return moment(dateTime).format("DD-MM").toString()
+  return dateTime;
+};
+const convertDateTimeToTimestamp = date => {
+  return {
+    seconds: date.getTime() / 1000,
+    nanos: 0
+  };
+};
+const convertTimestampToDateTime = timestamp => {
+  return moment.unix(Number(timestamp.seconds)).toDate();
+};
+const dateTimeToString = (dateTime, format) => {
+  return moment(dateTime).format(format);
+};
+const convertTimelineToDateTime = (timeline, timelineType) => {
+  let day = Number(timeline.toString().substring(6, 8));
+  let month = Number(timeline.toString().substring(4, 6));
+  let year = Number(timeline.toString().substring(0, 4));
+  if (timelineType === TIMELINE_TYPE.HOUR) {
+    let hours = Number(timeline.toString().substring(8, 10));
+    return new Date(year, month - 1, day, hours);
+  } else return new Date(year, month - 1, day);
+};
+// format: 'DD/MM/YYYY' => 07/02/2020
+function dateToStringDDMMYYYY(date) {
+  if (!date) return null;
+  const _date = new Date(date);
+  // const _language = i18next.language || 'vi';
+  const _language = 'en-GB';
+  let options = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  };
+  return _date.toLocaleDateString("".concat(_language), options);
+}
+// format: 'DD/MM/YYYY' => 07/02/2020
+function timestampToStringDDMMYYYY(date) {
+  if (!date) return null;
+  // const _date = new Date(date.seconds * 1000);
+  return dateToStringDDMMYYYY(new Date(date.seconds * 1000));
+}
+const getStartOfDay = dateTime => {
+  let date = dateTime.getDate();
+  let month = dateTime.getMonth();
+  let year = dateTime.getFullYear();
+  return new Date(year, month, date);
+};
+const getToday = () => {
+  let result = new Date();
+  result.setHours(0);
+  result.setMinutes(0);
+  result.setSeconds(0);
+  result.setMilliseconds(0);
+  return result;
+};
+function fillMissingDates(data) {
+  let startDate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let endDate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  let format = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'YYYYMMDD';
+  const result = data.concat();
+  // Parse the start and end dates
+  const start = moment(isNaN(Number(startDate)) ? startDate : String(startDate)).startOf('day');
+  const end = moment(isNaN(Number(endDate)) ? endDate : String(endDate)).endOf('day');
+  if (start.isAfter(end)) throw new Error('Start date must be before end date');
+  // Array to hold the complete range of dates
+  let dates = [];
+  // Iterate through the date range
+  for (let m = moment(start); m.isSameOrBefore(end); m.add(1, format === 'YYYYMMDD' ? 'days' : 'hours')) {
+    dates.push(m.format(format));
+  }
+  lodashExports.xor(data.map(d => d.x), dates).forEach(x => {
+    result.push({
+      x,
+      y: 0
+    });
+  });
+  return lodashExports.orderBy(Object.entries(lodashExports.groupBy(result, 'x')).map(_ref => {
+    let [key, value] = _ref;
+    return {
+      x: key,
+      y: lodashExports.sumBy(value, 'y')
+    };
+  }), ['x'], ['asc']);
+}
+function parseJSON(str) {
+  try {
+    return JSON.parse(str || '{}');
+  } catch (e) {
+    return str;
+  }
+}
+
+/**
+ * Xử lý các thao tác số học và toán học một cách tiện lợi.
+ * Hỗ trợ các phép toán phức tạp hoặc tối ưu hóa các logic tính toán thường dùng.
+ */
+function formatNumberByLocale(value, lang, locale) {
+  const localesMap = {
+    vi: 'vi-VN',
+    en: 'en-US',
+    ja: 'ja-JP',
+    th: 'th-TH',
+    id: 'id-ID',
+    fil: 'fil-PH'
+  };
+  const currentLang = lang || localStorage.getItem('i18nextLng');
+  if (value === undefined) return '';else if (currentLang && lodashExports.keysIn(localesMap).includes(currentLang)) return new Intl.NumberFormat(localesMap[currentLang]).format(value);else return new Intl.NumberFormat(locale).format(value);
+}
+function roundDecimalNumber(number) {
+  if (typeof number !== 'number') return null;
+  let str = JSON.stringify(Math.round(number * 1000000) / 1000000);
+  let signIndex = str.indexOf('.');
+  if (signIndex === -1) {
+    return str.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
+  } else {
+    return str.slice(0, signIndex).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') + str.slice(signIndex);
+  }
+}
+function WMAPEcalculator(data) {
+  // data là array có dạng [{estimate: number, reality: number},...]
+  if (data.length > 0) {
+    const numerator = data.reduce((acc, item) => Math.abs(item.reality - item.estimate) + acc, 0);
+    const dinominator = data.reduce((acc, item) => item.reality + acc, 0);
+    return dinominator === 0 ? numerator === 0 ? 0 : '∞' : numerator * 100 / dinominator;
+  } else {
+    return 0;
+  }
+}
+
+/**
+ * Hỗ trợ xử lý chuỗi văn bản, từ việc định dạng, chuyển đổi cho đến kiểm tra tính hợp lệ.
+ * Đảm bảo sự nhất quán và tái sử dụng các logic liên quan đến chuỗi.
+ */
+function changeToAlias() {
+  let str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  // Chuyển toàn bộ Tiếng Việt sang không dấu viết thường và các kí tự đặc biệt thành dấu "-"
+  return str.trim().normalize('NFD').toLowerCase().replace(/\s\s+/g, ' ').replace(/[\u0300-\u036f]/g, '').replace(/đ/g, 'd').replace(/`|~|!|@|"|#|\||\$|%|\^|&|\*|\(|\)|\+|=|,|\.|\/|\?|>|<|'|"|:|;|_/gi, '').replace(/ /g, '-').replace(/-----/gi, '-').replace(/----/gi, '-').replace(/---/gi, '-').replace(/--/gi, '-').replace(/"-|-"|"/gi, '');
+}
+const toCapitalize = function (str) {
+  let lower = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());
+};
+
+/**
+ * Đảm bảo dữ liệu được kiểm tra tính hợp lệ trước khi xử lý hoặc gửi đi.
+ * Được sử dụng nhiều trong xử lý form, API, hoặc đầu vào từ người dùng.
+ */
+/**
+ *  check string list ap input
+ *
+ * @param {string} stringListAP
+ * @returns {boolean}
+ */
+//Hàm này chỉ dùng bên ACM khi nào ai import hàm này move sang ACM nhé
+function checkValidStringListAP() {
+  let stringListAP = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let isValid = true;
+  const listAP = stringListAP.split('\n');
+  listAP.every(ap => {
+    const [macAp, nameAp] = ap.split(' ');
+    const regexMacAddress = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})|([0-9a-fA-F]{4}\\.[0-9a-fA-F]{4}\\.[0-9a-fA-F]{4})$/g;
+    // eslint-disable-next-line eqeqeq
+    const isValidMacAddress = macAp == macAp.match(regexMacAddress);
+    if (!isValidMacAddress || !nameAp || listAP.filter(item => item.includes(macAp)).length > 1) {
+      isValid = false;
+    }
+    return isValid;
+  });
+  return !isValid;
+}
+function checkValidMacAddress() {
+  let string = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  const regexMacAddress = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})|([0-9a-fA-F]{4}\\.[0-9a-fA-F]{4}\\.[0-9a-fA-F]{4})$/g;
+  return regexMacAddress.test(string);
+}
+function checkValidUrl(url) {
+  var pattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/;
+  if (!url || url.length > 1000 || url.trim().length <= 0 || !pattern.test(url)) return false;
+  return true;
+}
+function validateNumber() {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var numberRex = new RegExp('^[0-9]+$');
+  if (numberRex.test(String(value))) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Available filter operation types
+ */
+var FilterOperationType;
+(function (FilterOperationType) {
+  FilterOperationType["EQ"] = "eq";
+  FilterOperationType["CONTAINS"] = "contains";
+  FilterOperationType["STARTSWITH"] = "startswith";
+  FilterOperationType["ENDSWITH"] = "endswith";
+  FilterOperationType["GT"] = "gt";
+  FilterOperationType["GTE"] = "gte";
+  FilterOperationType["LT"] = "lt";
+  FilterOperationType["LTE"] = "lte";
+  FilterOperationType["IN"] = "in";
+  FilterOperationType["BETWEEN"] = "between";
+  FilterOperationType["NE"] = "ne";
+  FilterOperationType["NOTCONTAINS"] = "notcontains";
+  FilterOperationType["NOTIN"] = "notin";
+  FilterOperationType["ISEMPTY"] = "isempty";
+  FilterOperationType["CUSTOM"] = "custom";
+})(FilterOperationType || (FilterOperationType = {}));
+/**
+ * Logical operators for combining filter conditions
+ */
+var LogicalOperatorType;
+(function (LogicalOperatorType) {
+  LogicalOperatorType["AND"] = "and";
+  LogicalOperatorType["OR"] = "or";
+  LogicalOperatorType["NOT"] = "not";
+})(LogicalOperatorType || (LogicalOperatorType = {}));
+/**
+ * Converts an array of filter objects to a string condition
+ * @param filters - Array of objects with key, value, and type properties
+ * @param defaultOperator - Default logical operator to use when combining filters (AND or OR)
+ * @returns Object with a 'condition' property containing the string condition and optional 'params' array
+ */
+function convertArrayFiltersToCondition(filters) {
+  let defaultOperator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : LogicalOperatorType.AND;
+  // If there are no filters, return null
+  if (!filters || filters.length === 0) {
+    return null;
+  }
+  const conditions = [];
+  const params = [];
+  filters.forEach(_ref => {
+    let {
+      key,
+      value,
+      type,
+      isArray
+    } = _ref;
+    // Skip this filter if value is empty or undefined, except for ISEMPTY type which doesn't need a value
+    const typeStr = typeof type === 'string' ? type.toLowerCase() : type;
+    if (typeStr !== FilterOperationType.ISEMPTY && (value === undefined || value === '' || value === null)) {
+      return;
+    }
+    let condition;
+    // Handle isArray flag - if true, use Contains with parameter reference
+    if (isArray === true) {
+      // Format the value as a comma-separated string if it's an array
+      const paramValue = Array.isArray(value) ? value.join(',') : value;
+      // Add formatted value to params array and use parameterized reference
+      params.push(paramValue);
+      condition = "@".concat(params.length - 1, ".Contains(").concat(key, ")");
+    } else {
+      switch (typeStr) {
+        case FilterOperationType.EQ:
+          // Handle equality operator
+          condition = "".concat(key, "=\"").concat(value, "\"");
+          break;
+        case FilterOperationType.CONTAINS:
+          // Handle contains operator (capitalized for specific API format)
+          condition = "".concat(key, ".Contains(\"").concat(value, "\")");
+          break;
+        case FilterOperationType.STARTSWITH:
+          condition = "".concat(key, ".StartsWith(\"").concat(value, "\")");
+          break;
+        case FilterOperationType.ENDSWITH:
+          condition = "".concat(key, ".EndsWith(\"").concat(value, "\")");
+          break;
+        case FilterOperationType.GT:
+          condition = "".concat(key, ">").concat(value);
+          break;
+        case FilterOperationType.GTE:
+          condition = "".concat(key, ">=").concat(value);
+          break;
+        case FilterOperationType.LT:
+          condition = "".concat(key, "<").concat(value);
+          break;
+        case FilterOperationType.LTE:
+          condition = "".concat(key, "<=").concat(value);
+          break;
+        case FilterOperationType.ISEMPTY:
+          // Special handling for empty string/null checking
+          condition = "".concat(key, " == string.Empty");
+          break;
+        case FilterOperationType.IN:
+          // For array values
+          if (Array.isArray(value)) {
+            condition = "".concat(key, " IN (").concat(value.map(v => typeof v === 'string' ? "\"".concat(v, "\"") : v).join(', '), ")");
+          } else {
+            condition = "".concat(key, " IN (\"").concat(value, "\")");
+          }
+          break;
+        case FilterOperationType.BETWEEN:
+          // For range values - value should be an array with 2 elements
+          if (Array.isArray(value) && value.length === 2) {
+            condition = "(".concat(key, " >= ").concat(value[0], " && ").concat(key, " <= ").concat(value[1], ")");
+          } else {
+            condition = "".concat(key, " BETWEEN ").concat(value);
+          }
+          break;
+        case FilterOperationType.NE:
+          condition = "".concat(key, "!=\"").concat(value, "\"");
+          break;
+        case FilterOperationType.NOTCONTAINS:
+          condition = "!".concat(key, ".Contains(\"").concat(value, "\")");
+          break;
+        case FilterOperationType.NOTIN:
+          if (Array.isArray(value)) {
+            condition = "".concat(key, " NOT IN (").concat(value.map(v => typeof v === 'string' ? "\"".concat(v, "\"") : v).join(', '), ")");
+          } else {
+            condition = "".concat(key, " NOT IN (\"").concat(value, "\")");
+          }
+          break;
+        default:
+          // For any unhandled operators, use a generic method call format
+          const operatorName = typeof type === 'string' ? type : 'custom';
+          condition = "".concat(key, ".").concat(operatorName, "(\"").concat(value, "\")");
+      }
+    }
+    conditions.push(condition);
+  });
+  // Join all conditions with the specified operator
+  const logicalOperator = defaultOperator === LogicalOperatorType.OR ? ' || ' : ' && ';
+  const conditionString = conditions.join(logicalOperator);
+  // If condition is empty, return null instead of an object
+  if (conditionString === "") {
+    return null;
+  }
+  const result = {
+    condition: conditionString
+  };
+  // Only include params if we have any
+  if (params.length > 0) {
+    result.params = params;
+  }
+  return result;
+}
+/**
+ * Processes a filter expression (item or group) and returns the condition string
+ * @param expression - The filter expression to process
+ * @param isRoot - Whether this is the root level expression
+ * @param params - Array to collect parameters for parameterized queries
+ * @returns The string representation of the filter condition
+ */
+function processFilterExpression(expression) {
+  let isRoot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  // If it's a filter group with nested expressions
+  if ('operator' in expression) {
+    const group = expression;
+    const conditions = [];
+    // Process each filter in the group
+    group.filters.forEach(filter => {
+      const condition = processFilterExpression(filter, false, params);
+      if (condition) {
+        conditions.push(condition);
+      }
+    });
+    // If no valid conditions, return empty string
+    if (conditions.length === 0) {
+      return '';
+    }
+    let result;
+    // Based on the operator type, join the conditions accordingly
+    switch (group.operator) {
+      case LogicalOperatorType.OR:
+        result = conditions.join(' || ');
+        break;
+      case LogicalOperatorType.NOT:
+        // For 'not', we negate the conditions
+        result = "!(".concat(conditions.join(' && '), ")");
+        break;
+      case LogicalOperatorType.AND:
+      default:
+        result = conditions.join(' && ');
+      // Default to AND
+    }
+    // Wrap in parentheses to maintain correct operator precedence, but skip for root level
+    return !isRoot && conditions.length > 1 ? "(".concat(result, ")") : result;
+  }
+  // It's a simple filter item
+  const item = expression;
+  const {
+    key,
+    value,
+    type,
+    isArray
+  } = item;
+  // Skip this filter if value is empty or undefined, except for ISEMPTY type which doesn't need a value
+  const typeStr = typeof type === 'string' ? type.toLowerCase() : type;
+  if (typeStr !== FilterOperationType.ISEMPTY && (value === undefined || value === '' || value === null)) {
+    return '';
+  }
+  // Handle isArray flag - if true, use Contains with parameter reference
+  if (isArray === true) {
+    // Format the value as a comma-separated string if it's an array
+    const paramValue = Array.isArray(value) ? value.join(',') : value;
+    // Add formatted value to params array and use parameterized reference
+    params.push(paramValue);
+    return "@".concat(params.length - 1, ".Contains(").concat(key, ")");
+  }
+  switch (typeStr) {
+    case FilterOperationType.EQ:
+      return "".concat(key, "=\"").concat(value, "\"");
+    case FilterOperationType.CONTAINS:
+      return "".concat(key, ".Contains(\"").concat(value, "\")");
+    case FilterOperationType.STARTSWITH:
+      return "".concat(key, ".StartsWith(\"").concat(value, "\")");
+    case FilterOperationType.ENDSWITH:
+      return "".concat(key, ".EndsWith(\"").concat(value, "\")");
+    case FilterOperationType.GT:
+      return "".concat(key, ">").concat(value);
+    case FilterOperationType.GTE:
+      return "".concat(key, ">=").concat(value);
+    case FilterOperationType.LT:
+      return "".concat(key, "<").concat(value);
+    case FilterOperationType.LTE:
+      return "".concat(key, "<=").concat(value);
+    case FilterOperationType.ISEMPTY:
+      return "".concat(key, " == string.Empty");
+    case FilterOperationType.IN:
+      if (Array.isArray(value)) {
+        return "".concat(key, " IN (").concat(value.map(v => typeof v === 'string' ? "\"".concat(v, "\"") : v).join(', '), ")");
+      } else {
+        return "".concat(key, " IN (\"").concat(value, "\")");
+      }
+    case FilterOperationType.BETWEEN:
+      if (Array.isArray(value) && value.length === 2) {
+        return "(".concat(key, " >= ").concat(value[0], " && ").concat(key, " <= ").concat(value[1], ")");
+      } else {
+        return "".concat(key, " BETWEEN ").concat(value);
+      }
+    case FilterOperationType.NE:
+      return "".concat(key, "!=\"").concat(value, "\"");
+    case FilterOperationType.NOTCONTAINS:
+      return "!".concat(key, ".Contains(\"").concat(value, "\")");
+    case FilterOperationType.NOTIN:
+      if (Array.isArray(value)) {
+        return "".concat(key, " NOT IN (").concat(value.map(v => typeof v === 'string' ? "\"".concat(v, "\"") : v).join(', '), ")");
+      } else {
+        return "".concat(key, " NOT IN (\"").concat(value, "\")");
+      }
+    default:
+      const operatorName = typeof type === 'string' ? type : 'custom';
+      return "".concat(key, ".").concat(operatorName, "(\"").concat(value, "\")");
+  }
+}
+/**
+ * Converts a complex filter expression to a string condition
+ * @param filterExpression - Filter expression (can be nested with logical operators)
+ * @returns Object with a 'condition' property containing the string condition and optional 'params' array
+ */
+function convertFilterExpressionToCondition(filterExpression) {
+  const params = [];
+  const conditionString = processFilterExpression(filterExpression, true, params);
+  // If condition is empty, return null instead of an object
+  if (!conditionString) {
+    return null;
+  }
+  const result = {
+    condition: conditionString
+  };
+  // Only include params if we have any
+  if (params.length > 0) {
+    result.params = params;
+  }
+  return result;
+}
+/**
+ * Usage examples:
+ *  * Simple filter with AND:
+ * ```typescript
+ * const filters: FilterItem[] = [
+ *   { key: 'name', value: 'John', type: FilterOperationType.CONTAINS },
+ *   { key: 'age', value: 30, type: FilterOperationType.GTE }
+ * ];
+ * const result = convertArrayFiltersToCondition(filters); // name.Contains("John") && age>=30
+ * ```
+ *
+ * Simple filter with OR:
+ * ```typescript
+ * const filters: FilterItem[] = [
+ *   { key: 'status', value: 'active', type: FilterOperationType.EQ },
+ *   { key: 'status', value: 'pending', type: FilterOperationType.EQ }
+ * ];
+ * const result = convertArrayFiltersToCondition(filters, LogicalOperatorType.OR); // status="active" || status="pending"
+ * ```
+ *
+ * Filter with isArray property:
+ * ```typescript
+ * const filters: FilterItem[] = [
+ *   { key: 'objectTypeCode', value: 'OBJECTFILTER', type: FilterOperationType.EQ, isArray: false },
+ *   { key: 'name', value: 'Long', type: FilterOperationType.EQ, isArray: true },
+ * ];
+ * const result = convertArrayFiltersToCondition(filters);
+ * // Returns: { condition: 'objectTypeCode="OBJECTFILTER" && @0.Contains(name)', params: ["Long"] }
+ * ```
+ *
+ * Filter with isArray and array values:
+ * ```typescript
+ * const filters: FilterItem[] = [
+ *   { key: 'id', value: [1, 2, 3], type: FilterOperationType.EQ, isArray: true },
+ *   { key: 'names', value: ['name1', 'name2', 'name3'], type: FilterOperationType.EQ, isArray: true },
+ * ];
+ * const result = convertArrayFiltersToCondition(filters);
+ * // Returns: { condition: '@0.Contains(id) && @1.Contains(names)', params: ["1,2,3", "name1,name2,name3"] }
+ * ```
+ *
+ * Complex nested filter:
+ * ```typescript
+ * const complexFilter: FilterGroup = {
+ *   operator: LogicalOperatorType.AND,
+ *   filters: [
+ *     { key: 'name', value: 'John', type: FilterOperationType.CONTAINS },
+ *     {
+ *       operator: LogicalOperatorType.OR,
+ *       filters: [
+ *         { key: 'age', value: 30, type: FilterOperationType.GTE },
+ *         { key: 'vip', value: true, type: FilterOperationType.EQ }
+ *       ]
+ *     },
+ *     {
+ *       operator: LogicalOperatorType.NOT,
+ *       filters: [
+ *         { key: 'status', value: 'inactive', type: FilterOperationType.EQ }
+ *       ]
+ *     }
+ *   ]
+ * };
+ * const result = convertFilterExpressionToCondition(complexFilter);
+ * // name.Contains("John") && (age>=30 || vip="true") && !(status="inactive")
+ * ```
+ *
+ * Complex filter with parameterized values:
+ * ```typescript
+ * const complexFilter: FilterGroup = {
+ *   operator: LogicalOperatorType.AND,
+ *   filters: [
+ *     { key: 'objectTypeCode', value: 'OBJECTFILTER', type: FilterOperationType.EQ },
+ *     { key: 'name', value: 'Long', type: FilterOperationType.EQ, isArray: true }
+ *   ]
+ * };
+ * const result = convertFilterExpressionToCondition(complexFilter);
+ * // Returns: { condition: 'objectTypeCode="OBJECTFILTER" && @0.Contains(name)', params: ["Long"] }
+ * ```
+ *
+ * Complex filter with array values:
+ * ```typescript
+ * const complexFilter: FilterGroup = {
+ *   operator: LogicalOperatorType.AND,
+ *   filters: [
+ *     { key: 'objectTypeCode', value: 'OBJECTFILTER', type: FilterOperationType.EQ },
+ *     { key: 'id', value: [1, 2], type: FilterOperationType.EQ, isArray: true },
+ *     { key: 'name', value: ['name1', 'name2'], type: FilterOperationType.EQ, isArray: true }
+ *   ]
+ * };
+ * const result = convertFilterExpressionToCondition(complexFilter);
+ * // Returns: {
+ * //   condition: 'objectTypeCode="OBJECTFILTER" && @0.Contains(id) && @1.Contains(name)',
+ * //   params: ["1,2", "name1,name2"]
+ * // }
+ * ```
+ *
+ * Example with ISEMPTY check:
+ * ```typescript
+ * const complexFilter: FilterGroup = {
+ *   operator: LogicalOperatorType.AND,
+ *   filters: [
+ *     {
+ *       operator: LogicalOperatorType.OR,
+ *       filters: [
+ *         { key: 'apControllerCode', value: 'aerohive', type: FilterOperationType.CONTAINS },
+ *         { key: 'apControllerCode', type: FilterOperationType.ISEMPTY }
+ *       ]
+ *     },
+ *     { key: 'authenticationMethodCode', value: 'standard', type: FilterOperationType.CONTAINS }
+ *   ]
+ * };
+ * const result = convertFilterExpressionToCondition(complexFilter);
+ * // Returns: { condition: '(apControllerCode.Contains("aerohive") || apControllerCode == string.Empty) && authenticationMethodCode.Contains("standard")' }
+ * ```
+ */
+
 function ButtonSelect(props) {
   const {
       elementId,
@@ -41742,7 +42563,7 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const useUtilityClasses$Z = ownerState => {
+const useUtilityClasses$_ = ownerState => {
   const {
     color,
     fontSize,
@@ -41872,7 +42693,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$Z(ownerState);
+  const classes = useUtilityClasses$_(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -43636,7 +44457,7 @@ const ButtonDateRangePicker = props => {
           },
           children: jsxRuntimeExports.jsx(Paper$1, {
             elevation: 8,
-            children: jsxRuntimeExports.jsx(ClickAwayListener, {
+            children: jsxRuntimeExports.jsx(ClickAwayListener$1, {
               onClickAway: handleClose,
               children: jsxRuntimeExports.jsxs(Box$1, {
                 style: {
@@ -44337,7 +45158,7 @@ function DirectoryTree(props) {
       anchorEl: anchorEl,
       placement: "bottom-start",
       className: classes.popper,
-      children: jsxRuntimeExports.jsx(ClickAwayListener, {
+      children: jsxRuntimeExports.jsx(ClickAwayListener$1, {
         onClickAway: handleClose,
         children: jsxRuntimeExports.jsxs("div", {
           children: [jsxRuntimeExports.jsx("div", {
@@ -44358,827 +45179,6 @@ function DirectoryTree(props) {
   });
 }
 
-/**
- * Get the value of a cookie
- * Source: https://vanillajstoolkit.com/helpers/getcookie/
- * @param name - The name of the cookie
- * @return The cookie value
- */
-function getCookie(name) {
-  if (typeof document !== 'undefined') {
-    const value = "; ".concat(document.cookie);
-    const parts = value.split("; ".concat(name, "="));
-    if (parts.length === 2) {
-      return parts[1].split(';').shift();
-    }
-  }
-  return undefined;
-}
-function getQueryVariable(variable) {
-  var query = window.location.search.substring(1);
-  var vars = query.split('&');
-  for (var i = 0; i < vars.length; i++) {
-    var pair = vars[i].split('=');
-    if (pair[0] === variable) {
-      return pair[1];
-    }
-  }
-  return '';
-}
-function generateUUID() {
-  // Public Domain/MIT
-  var d = new Date().getTime(); //Timestamp
-  var d2 = typeof performance !== 'undefined' && performance.now && performance.now() * 1000 || 0; //Time in microseconds since page-load or 0 if unsupported
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    var r = Math.random() * 16; //random number between 0 and 16
-    if (d > 0) {
-      //Use timestamp until depleted
-      r = (d + r) % 16 | 0;
-      d = Math.floor(d / 16);
-    } else {
-      //Use microseconds since page-load if supported
-      r = (d2 + r) % 16 | 0;
-      d2 = Math.floor(d2 / 16);
-    }
-    return (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
-  });
-}
-const getRoutePath = (location, params) => {
-  const {
-    pathname
-  } = location;
-  if (!Object.keys(params).length) {
-    return pathname; // we don't need to replace anything
-  }
-  let path = pathname;
-  Object.entries(params).forEach(_ref => {
-    let [paramName, paramValue] = _ref;
-    if (paramValue) {
-      path = path.replace(paramValue, ":".concat(paramName));
-    }
-  });
-  return path;
-};
-const offlinePaginate = (array, pageIndex, pageSize) => [...array].slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
-
-/**
- * Xử lý dữ liệu dạng mảng hoặc object một cách đơn giản và hiệu quả.
- * Tăng cường khả năng thao tác với danh sách dữ liệu.
- */
-function convertArrayToObject(array, keyName) {
-  return array === null || array === void 0 ? void 0 : array.reduce((obj, item, _index) => {
-    return Object.assign(Object.assign({}, obj), {
-      [item[keyName]]: Object.assign({}, item)
-    });
-  }, {});
-}
-const convertDataSetPattern = data => {
-  const ctr = data === null || data === void 0 ? void 0 : data.map(item => item.ctr);
-  const numberOfConnections = data === null || data === void 0 ? void 0 : data.map(item => item.click);
-  const impressions = data === null || data === void 0 ? void 0 : data.map(item => item.view);
-  return [{
-    data: ctr,
-    label: i18n.t('Statistics.CTR'),
-    type: 'bar',
-    color: 'rgb(128, 176, 255)'
-  }, {
-    data: numberOfConnections,
-    label: i18n.t('Statistics.NumberOfConnections'),
-    type: 'line',
-    color: 'rgb(0, 85, 184)'
-  }, {
-    data: impressions,
-    label: i18n.t('Statistics.Impressions'),
-    type: 'line',
-    color: 'rgb(221, 4, 12)'
-  }];
-};
-const updateObjectFields = (originalObj, changedValues) => {
-  // Create a copy of the original object
-  const updatedObject = Object.assign({}, originalObj);
-  // Recursive function to update nested fields
-  const updateNestedFields = (obj, changes) => {
-    for (const [key, value] of Object.entries(changes)) {
-      // Check if the field exists in the original object
-      if (obj.hasOwnProperty(key)) {
-        // If the field is an object, recursively update nested fields
-        if (typeof obj[key] === 'object' && typeof value === 'object') {
-          updateNestedFields(obj[key], value);
-        } else {
-          // Otherwise, update the field value
-          obj[key] = value;
-        }
-      } else {
-        obj[key] = value;
-      }
-    }
-  };
-  // Update nested fields
-  updateNestedFields(updatedObject, changedValues);
-  return updatedObject;
-};
-function formatChartNumber(val, language) {
-  if (!val) return '0';
-  if (val === '-') {
-    return '-';
-  }
-  const temp = Math.round(Number(val) * 100) / 100;
-  let formatValue = formatNumberWithLanguage(temp, language);
-  return formatValue;
-}
-const setObject = (obj, arrKey, value) => {
-  lodashExports.set(obj, arrKey.reduce((acc, val) => acc + '[' + val + ']', ''), value);
-};
-//AWING_[NAME FEATURE]_[OBJECT_NAME]_[SUB_TITLE]_[DATEFORMAT yyyy-MM-DD]
-function nameExportStandard(nameFeature, objectName, subTitle) {
-  const currentTime = moment().format('YYYY-MM-DD');
-  const parts = [nameFeature, objectName, subTitle, currentTime].filter(Boolean);
-  return "AWING_".concat(parts.join('_').toUpperCase());
-}
-const formatJSON$1 = val => {
-  try {
-    const res = JSON.parse(val);
-    return JSON.stringify(res, null, 2);
-  } catch (_a) {
-    return val;
-  }
-};
-
-var TIMELINE_TYPE;
-(function (TIMELINE_TYPE) {
-  TIMELINE_TYPE[TIMELINE_TYPE["HOUR"] = 0] = "HOUR";
-  TIMELINE_TYPE[TIMELINE_TYPE["DAY"] = 1] = "DAY";
-})(TIMELINE_TYPE || (TIMELINE_TYPE = {}));
-var SortEnumType;
-(function (SortEnumType) {
-  SortEnumType["Asc"] = "ASC";
-  SortEnumType["Desc"] = "DESC";
-})(SortEnumType || (SortEnumType = {}));
-var DataGridSortType;
-(function (DataGridSortType) {
-  DataGridSortType["Asc"] = "ASC";
-  DataGridSortType["Desc"] = "DESC";
-  DataGridSortType["Ready"] = "READY";
-})(DataGridSortType || (DataGridSortType = {}));
-var DirectoryRoot;
-(function (DirectoryRoot) {
-  DirectoryRoot["Directory"] = "directory";
-  DirectoryRoot["Place"] = "place";
-  DirectoryRoot["Workflow"] = "workflow";
-  DirectoryRoot["Workflow_gate"] = "workflow_gate";
-  DirectoryRoot["Workflow_scheme"] = "workflow_scheme";
-  DirectoryRoot["Menu"] = "menu";
-  DirectoryRoot["Storage"] = "storage";
-  DirectoryRoot["Report"] = "report";
-  DirectoryRoot["Group"] = "group";
-  DirectoryRoot["Campaign"] = "campaign";
-  DirectoryRoot["Page"] = "page";
-  DirectoryRoot["PageWelcome"] = "pageWelcome";
-  DirectoryRoot["PageLogin"] = "pageLogin";
-  DirectoryRoot["PageGadget"] = "pageGadget";
-  DirectoryRoot["PageHistory"] = "pageHistory";
-  DirectoryRoot["CampaignCurrent"] = "campaignCurrent";
-  DirectoryRoot["CampaignHistory"] = "campaignHistory";
-  DirectoryRoot["Template"] = "template";
-  DirectoryRoot["Layout"] = "layout";
-  DirectoryRoot["Authentication_profile"] = "authentication_profile";
-  DirectoryRoot["Archive"] = "archive";
-  DirectoryRoot["Ap"] = "ap";
-  DirectoryRoot["Place_group"] = "place_group";
-  DirectoryRoot["Wizard"] = "wizard";
-  DirectoryRoot["Campaign_collection"] = "campaign_collection";
-  DirectoryRoot["Task_scheduler"] = "task_scheduler";
-})(DirectoryRoot || (DirectoryRoot = {}));
-var WorkspaceType;
-(function (WorkspaceType) {
-  WorkspaceType["AXN"] = "AXN";
-  WorkspaceType["ADMIN"] = "ADMIN";
-  WorkspaceType["ACM"] = "ACM";
-})(WorkspaceType || (WorkspaceType = {}));
-
-/**
- * Quản lý và xử lý thời gian, ngày tháng một cách tiện lợi và nhất quán.
- * Giảm thiểu lỗi khi thao tác với định dạng ngày giờ.
- */
-function dateToString(date) {
-  return moment(date).format('L');
-}
-function calculatorDirectoryIdRoot(directoriesTree) {
-  let directoryId = 0;
-  let minLevel = Number.POSITIVE_INFINITY;
-  directoriesTree.forEach(directory => {
-    if (directory.level < minLevel) {
-      minLevel = directory.level;
-      directoryId = directory.directoryId;
-    }
-  });
-  return directoryId;
-}
-const convertTimeLine = value => {
-  let dateTime = '';
-  const hour = value.toString().substring(8, 10);
-  if (hour) {
-    dateTime += "".concat(hour, "h ");
-  }
-  const day = value.toString().substring(6, 8);
-  if (day) {
-    dateTime += "".concat(day, "-");
-  }
-  const month = value.toString().substring(4, 6);
-  if (month) {
-    dateTime += "".concat(month, "-");
-  }
-  const year = value.toString().substring(0, 4);
-  if (year) {
-    dateTime += "".concat(year);
-  }
-  //  `${year}-${month}-${day}T${hour}`
-  // return moment(dateTime).format("DD-MM").toString()
-  return dateTime;
-};
-const convertDateTimeToTimestamp = date => {
-  return {
-    seconds: date.getTime() / 1000,
-    nanos: 0
-  };
-};
-const convertTimestampToDateTime = timestamp => {
-  return moment.unix(Number(timestamp.seconds)).toDate();
-};
-const dateTimeToString = (dateTime, format) => {
-  return moment(dateTime).format(format);
-};
-const convertTimelineToDateTime = (timeline, timelineType) => {
-  let day = Number(timeline.toString().substring(6, 8));
-  let month = Number(timeline.toString().substring(4, 6));
-  let year = Number(timeline.toString().substring(0, 4));
-  if (timelineType === TIMELINE_TYPE.HOUR) {
-    let hours = Number(timeline.toString().substring(8, 10));
-    return new Date(year, month - 1, day, hours);
-  } else return new Date(year, month - 1, day);
-};
-// format: 'DD/MM/YYYY' => 07/02/2020
-function dateToStringDDMMYYYY(date) {
-  if (!date) return null;
-  const _date = new Date(date);
-  // const _language = i18next.language || 'vi';
-  const _language = 'en-GB';
-  let options = {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit'
-  };
-  return _date.toLocaleDateString("".concat(_language), options);
-}
-// format: 'DD/MM/YYYY' => 07/02/2020
-function timestampToStringDDMMYYYY(date) {
-  if (!date) return null;
-  // const _date = new Date(date.seconds * 1000);
-  return dateToStringDDMMYYYY(new Date(date.seconds * 1000));
-}
-const getStartOfDay = dateTime => {
-  let date = dateTime.getDate();
-  let month = dateTime.getMonth();
-  let year = dateTime.getFullYear();
-  return new Date(year, month, date);
-};
-const getToday = () => {
-  let result = new Date();
-  result.setHours(0);
-  result.setMinutes(0);
-  result.setSeconds(0);
-  result.setMilliseconds(0);
-  return result;
-};
-function fillMissingDates(data) {
-  let startDate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  let endDate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  let format = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'YYYYMMDD';
-  const result = data.concat();
-  // Parse the start and end dates
-  const start = moment(isNaN(Number(startDate)) ? startDate : String(startDate)).startOf('day');
-  const end = moment(isNaN(Number(endDate)) ? endDate : String(endDate)).endOf('day');
-  if (start.isAfter(end)) throw new Error('Start date must be before end date');
-  // Array to hold the complete range of dates
-  let dates = [];
-  // Iterate through the date range
-  for (let m = moment(start); m.isSameOrBefore(end); m.add(1, format === 'YYYYMMDD' ? 'days' : 'hours')) {
-    dates.push(m.format(format));
-  }
-  lodashExports.xor(data.map(d => d.x), dates).forEach(x => {
-    result.push({
-      x,
-      y: 0
-    });
-  });
-  return lodashExports.orderBy(Object.entries(lodashExports.groupBy(result, 'x')).map(_ref => {
-    let [key, value] = _ref;
-    return {
-      x: key,
-      y: lodashExports.sumBy(value, 'y')
-    };
-  }), ['x'], ['asc']);
-}
-function parseJSON(str) {
-  try {
-    return JSON.parse(str || '{}');
-  } catch (e) {
-    return str;
-  }
-}
-
-/**
- * Xử lý các thao tác số học và toán học một cách tiện lợi.
- * Hỗ trợ các phép toán phức tạp hoặc tối ưu hóa các logic tính toán thường dùng.
- */
-function formatNumberByLocale(value, lang, locale) {
-  const localesMap = {
-    vi: 'vi-VN',
-    en: 'en-US',
-    ja: 'ja-JP',
-    th: 'th-TH',
-    id: 'id-ID',
-    fil: 'fil-PH'
-  };
-  const currentLang = lang || localStorage.getItem('i18nextLng');
-  if (value === undefined) return '';else if (currentLang && lodashExports.keysIn(localesMap).includes(currentLang)) return new Intl.NumberFormat(localesMap[currentLang]).format(value);else return new Intl.NumberFormat(locale).format(value);
-}
-function roundDecimalNumber(number) {
-  if (typeof number !== 'number') return null;
-  let str = JSON.stringify(Math.round(number * 1000000) / 1000000);
-  let signIndex = str.indexOf('.');
-  if (signIndex === -1) {
-    return str.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
-  } else {
-    return str.slice(0, signIndex).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') + str.slice(signIndex);
-  }
-}
-function WMAPEcalculator(data) {
-  // data là array có dạng [{estimate: number, reality: number},...]
-  if (data.length > 0) {
-    const numerator = data.reduce((acc, item) => Math.abs(item.reality - item.estimate) + acc, 0);
-    const dinominator = data.reduce((acc, item) => item.reality + acc, 0);
-    return dinominator === 0 ? numerator === 0 ? 0 : '∞' : numerator * 100 / dinominator;
-  } else {
-    return 0;
-  }
-}
-
-/**
- * Hỗ trợ xử lý chuỗi văn bản, từ việc định dạng, chuyển đổi cho đến kiểm tra tính hợp lệ.
- * Đảm bảo sự nhất quán và tái sử dụng các logic liên quan đến chuỗi.
- */
-function changeToAlias() {
-  let str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  // Chuyển toàn bộ Tiếng Việt sang không dấu viết thường và các kí tự đặc biệt thành dấu "-"
-  return str.trim().normalize('NFD').toLowerCase().replace(/\s\s+/g, ' ').replace(/[\u0300-\u036f]/g, '').replace(/đ/g, 'd').replace(/`|~|!|@|"|#|\||\$|%|\^|&|\*|\(|\)|\+|=|,|\.|\/|\?|>|<|'|"|:|;|_/gi, '').replace(/ /g, '-').replace(/-----/gi, '-').replace(/----/gi, '-').replace(/---/gi, '-').replace(/--/gi, '-').replace(/"-|-"|"/gi, '');
-}
-const toCapitalize = function (str) {
-  let lower = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  return (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());
-};
-
-/**
- * Đảm bảo dữ liệu được kiểm tra tính hợp lệ trước khi xử lý hoặc gửi đi.
- * Được sử dụng nhiều trong xử lý form, API, hoặc đầu vào từ người dùng.
- */
-/**
- *  check string list ap input
- *
- * @param {string} stringListAP
- * @returns {boolean}
- */
-//Hàm này chỉ dùng bên ACM khi nào ai import hàm này move sang ACM nhé
-function checkValidStringListAP() {
-  let stringListAP = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let isValid = true;
-  const listAP = stringListAP.split('\n');
-  listAP.every(ap => {
-    const [macAp, nameAp] = ap.split(' ');
-    const regexMacAddress = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})|([0-9a-fA-F]{4}\\.[0-9a-fA-F]{4}\\.[0-9a-fA-F]{4})$/g;
-    // eslint-disable-next-line eqeqeq
-    const isValidMacAddress = macAp == macAp.match(regexMacAddress);
-    if (!isValidMacAddress || !nameAp || listAP.filter(item => item.includes(macAp)).length > 1) {
-      isValid = false;
-    }
-    return isValid;
-  });
-  return !isValid;
-}
-function checkValidMacAddress() {
-  let string = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  const regexMacAddress = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})|([0-9a-fA-F]{4}\\.[0-9a-fA-F]{4}\\.[0-9a-fA-F]{4})$/g;
-  return regexMacAddress.test(string);
-}
-function checkValidUrl(url) {
-  var pattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/;
-  if (!url || url.length > 1000 || url.trim().length <= 0 || !pattern.test(url)) return false;
-  return true;
-}
-function validateNumber() {
-  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  var numberRex = new RegExp('^[0-9]+$');
-  if (numberRex.test(String(value))) {
-    return true;
-  }
-  return false;
-}
-
-/**
- * Available filter operation types
- */
-var FilterOperationType;
-(function (FilterOperationType) {
-  FilterOperationType["EQ"] = "eq";
-  FilterOperationType["CONTAINS"] = "contains";
-  FilterOperationType["STARTSWITH"] = "startswith";
-  FilterOperationType["ENDSWITH"] = "endswith";
-  FilterOperationType["GT"] = "gt";
-  FilterOperationType["GTE"] = "gte";
-  FilterOperationType["LT"] = "lt";
-  FilterOperationType["LTE"] = "lte";
-  FilterOperationType["IN"] = "in";
-  FilterOperationType["BETWEEN"] = "between";
-  FilterOperationType["NE"] = "ne";
-  FilterOperationType["NOTCONTAINS"] = "notcontains";
-  FilterOperationType["NOTIN"] = "notin";
-  FilterOperationType["ISEMPTY"] = "isempty";
-  FilterOperationType["CUSTOM"] = "custom";
-})(FilterOperationType || (FilterOperationType = {}));
-/**
- * Logical operators for combining filter conditions
- */
-var LogicalOperatorType;
-(function (LogicalOperatorType) {
-  LogicalOperatorType["AND"] = "and";
-  LogicalOperatorType["OR"] = "or";
-  LogicalOperatorType["NOT"] = "not";
-})(LogicalOperatorType || (LogicalOperatorType = {}));
-/**
- * Converts an array of filter objects to a string condition
- * @param filters - Array of objects with key, value, and type properties
- * @param defaultOperator - Default logical operator to use when combining filters (AND or OR)
- * @returns Object with a 'condition' property containing the string condition and optional 'params' array
- */
-function convertArrayFiltersToCondition(filters) {
-  let defaultOperator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : LogicalOperatorType.AND;
-  // If there are no filters, return null
-  if (!filters || filters.length === 0) {
-    return null;
-  }
-  const conditions = [];
-  const params = [];
-  filters.forEach(_ref => {
-    let {
-      key,
-      value,
-      type,
-      isArray
-    } = _ref;
-    // Skip this filter if value is empty or undefined, except for ISEMPTY type which doesn't need a value
-    const typeStr = typeof type === 'string' ? type.toLowerCase() : type;
-    if (typeStr !== FilterOperationType.ISEMPTY && (value === undefined || value === '' || value === null)) {
-      return;
-    }
-    let condition;
-    // Handle isArray flag - if true, use Contains with parameter reference
-    if (isArray === true) {
-      // Format the value as a comma-separated string if it's an array
-      const paramValue = Array.isArray(value) ? value.join(',') : value;
-      // Add formatted value to params array and use parameterized reference
-      params.push(paramValue);
-      condition = "@".concat(params.length - 1, ".Contains(").concat(key, ")");
-    } else {
-      switch (typeStr) {
-        case FilterOperationType.EQ:
-          // Handle equality operator
-          condition = "".concat(key, "=\"").concat(value, "\"");
-          break;
-        case FilterOperationType.CONTAINS:
-          // Handle contains operator (capitalized for specific API format)
-          condition = "".concat(key, ".Contains(\"").concat(value, "\")");
-          break;
-        case FilterOperationType.STARTSWITH:
-          condition = "".concat(key, ".StartsWith(\"").concat(value, "\")");
-          break;
-        case FilterOperationType.ENDSWITH:
-          condition = "".concat(key, ".EndsWith(\"").concat(value, "\")");
-          break;
-        case FilterOperationType.GT:
-          condition = "".concat(key, ">").concat(value);
-          break;
-        case FilterOperationType.GTE:
-          condition = "".concat(key, ">=").concat(value);
-          break;
-        case FilterOperationType.LT:
-          condition = "".concat(key, "<").concat(value);
-          break;
-        case FilterOperationType.LTE:
-          condition = "".concat(key, "<=").concat(value);
-          break;
-        case FilterOperationType.ISEMPTY:
-          // Special handling for empty string/null checking
-          condition = "".concat(key, " == string.Empty");
-          break;
-        case FilterOperationType.IN:
-          // For array values
-          if (Array.isArray(value)) {
-            condition = "".concat(key, " IN (").concat(value.map(v => typeof v === 'string' ? "\"".concat(v, "\"") : v).join(', '), ")");
-          } else {
-            condition = "".concat(key, " IN (\"").concat(value, "\")");
-          }
-          break;
-        case FilterOperationType.BETWEEN:
-          // For range values - value should be an array with 2 elements
-          if (Array.isArray(value) && value.length === 2) {
-            condition = "(".concat(key, " >= ").concat(value[0], " && ").concat(key, " <= ").concat(value[1], ")");
-          } else {
-            condition = "".concat(key, " BETWEEN ").concat(value);
-          }
-          break;
-        case FilterOperationType.NE:
-          condition = "".concat(key, "!=\"").concat(value, "\"");
-          break;
-        case FilterOperationType.NOTCONTAINS:
-          condition = "!".concat(key, ".Contains(\"").concat(value, "\")");
-          break;
-        case FilterOperationType.NOTIN:
-          if (Array.isArray(value)) {
-            condition = "".concat(key, " NOT IN (").concat(value.map(v => typeof v === 'string' ? "\"".concat(v, "\"") : v).join(', '), ")");
-          } else {
-            condition = "".concat(key, " NOT IN (\"").concat(value, "\")");
-          }
-          break;
-        default:
-          // For any unhandled operators, use a generic method call format
-          const operatorName = typeof type === 'string' ? type : 'custom';
-          condition = "".concat(key, ".").concat(operatorName, "(\"").concat(value, "\")");
-      }
-    }
-    conditions.push(condition);
-  });
-  // Join all conditions with the specified operator
-  const logicalOperator = defaultOperator === LogicalOperatorType.OR ? ' || ' : ' && ';
-  const conditionString = conditions.join(logicalOperator);
-  // If condition is empty, return null instead of an object
-  if (conditionString === "") {
-    return null;
-  }
-  const result = {
-    condition: conditionString
-  };
-  // Only include params if we have any
-  if (params.length > 0) {
-    result.params = params;
-  }
-  return result;
-}
-/**
- * Processes a filter expression (item or group) and returns the condition string
- * @param expression - The filter expression to process
- * @param isRoot - Whether this is the root level expression
- * @param params - Array to collect parameters for parameterized queries
- * @returns The string representation of the filter condition
- */
-function processFilterExpression(expression) {
-  let isRoot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  // If it's a filter group with nested expressions
-  if ('operator' in expression) {
-    const group = expression;
-    const conditions = [];
-    // Process each filter in the group
-    group.filters.forEach(filter => {
-      const condition = processFilterExpression(filter, false, params);
-      if (condition) {
-        conditions.push(condition);
-      }
-    });
-    // If no valid conditions, return empty string
-    if (conditions.length === 0) {
-      return '';
-    }
-    let result;
-    // Based on the operator type, join the conditions accordingly
-    switch (group.operator) {
-      case LogicalOperatorType.OR:
-        result = conditions.join(' || ');
-        break;
-      case LogicalOperatorType.NOT:
-        // For 'not', we negate the conditions
-        result = "!(".concat(conditions.join(' && '), ")");
-        break;
-      case LogicalOperatorType.AND:
-      default:
-        result = conditions.join(' && ');
-      // Default to AND
-    }
-    // Wrap in parentheses to maintain correct operator precedence, but skip for root level
-    return !isRoot && conditions.length > 1 ? "(".concat(result, ")") : result;
-  }
-  // It's a simple filter item
-  const item = expression;
-  const {
-    key,
-    value,
-    type,
-    isArray
-  } = item;
-  // Skip this filter if value is empty or undefined, except for ISEMPTY type which doesn't need a value
-  const typeStr = typeof type === 'string' ? type.toLowerCase() : type;
-  if (typeStr !== FilterOperationType.ISEMPTY && (value === undefined || value === '' || value === null)) {
-    return '';
-  }
-  // Handle isArray flag - if true, use Contains with parameter reference
-  if (isArray === true) {
-    // Format the value as a comma-separated string if it's an array
-    const paramValue = Array.isArray(value) ? value.join(',') : value;
-    // Add formatted value to params array and use parameterized reference
-    params.push(paramValue);
-    return "@".concat(params.length - 1, ".Contains(").concat(key, ")");
-  }
-  switch (typeStr) {
-    case FilterOperationType.EQ:
-      return "".concat(key, "=\"").concat(value, "\"");
-    case FilterOperationType.CONTAINS:
-      return "".concat(key, ".Contains(\"").concat(value, "\")");
-    case FilterOperationType.STARTSWITH:
-      return "".concat(key, ".StartsWith(\"").concat(value, "\")");
-    case FilterOperationType.ENDSWITH:
-      return "".concat(key, ".EndsWith(\"").concat(value, "\")");
-    case FilterOperationType.GT:
-      return "".concat(key, ">").concat(value);
-    case FilterOperationType.GTE:
-      return "".concat(key, ">=").concat(value);
-    case FilterOperationType.LT:
-      return "".concat(key, "<").concat(value);
-    case FilterOperationType.LTE:
-      return "".concat(key, "<=").concat(value);
-    case FilterOperationType.ISEMPTY:
-      return "".concat(key, " == string.Empty");
-    case FilterOperationType.IN:
-      if (Array.isArray(value)) {
-        return "".concat(key, " IN (").concat(value.map(v => typeof v === 'string' ? "\"".concat(v, "\"") : v).join(', '), ")");
-      } else {
-        return "".concat(key, " IN (\"").concat(value, "\")");
-      }
-    case FilterOperationType.BETWEEN:
-      if (Array.isArray(value) && value.length === 2) {
-        return "(".concat(key, " >= ").concat(value[0], " && ").concat(key, " <= ").concat(value[1], ")");
-      } else {
-        return "".concat(key, " BETWEEN ").concat(value);
-      }
-    case FilterOperationType.NE:
-      return "".concat(key, "!=\"").concat(value, "\"");
-    case FilterOperationType.NOTCONTAINS:
-      return "!".concat(key, ".Contains(\"").concat(value, "\")");
-    case FilterOperationType.NOTIN:
-      if (Array.isArray(value)) {
-        return "".concat(key, " NOT IN (").concat(value.map(v => typeof v === 'string' ? "\"".concat(v, "\"") : v).join(', '), ")");
-      } else {
-        return "".concat(key, " NOT IN (\"").concat(value, "\")");
-      }
-    default:
-      const operatorName = typeof type === 'string' ? type : 'custom';
-      return "".concat(key, ".").concat(operatorName, "(\"").concat(value, "\")");
-  }
-}
-/**
- * Converts a complex filter expression to a string condition
- * @param filterExpression - Filter expression (can be nested with logical operators)
- * @returns Object with a 'condition' property containing the string condition and optional 'params' array
- */
-function convertFilterExpressionToCondition(filterExpression) {
-  const params = [];
-  const conditionString = processFilterExpression(filterExpression, true, params);
-  // If condition is empty, return null instead of an object
-  if (!conditionString) {
-    return null;
-  }
-  const result = {
-    condition: conditionString
-  };
-  // Only include params if we have any
-  if (params.length > 0) {
-    result.params = params;
-  }
-  return result;
-}
-/**
- * Usage examples:
- *  * Simple filter with AND:
- * ```typescript
- * const filters: FilterItem[] = [
- *   { key: 'name', value: 'John', type: FilterOperationType.CONTAINS },
- *   { key: 'age', value: 30, type: FilterOperationType.GTE }
- * ];
- * const result = convertArrayFiltersToCondition(filters); // name.Contains("John") && age>=30
- * ```
- *
- * Simple filter with OR:
- * ```typescript
- * const filters: FilterItem[] = [
- *   { key: 'status', value: 'active', type: FilterOperationType.EQ },
- *   { key: 'status', value: 'pending', type: FilterOperationType.EQ }
- * ];
- * const result = convertArrayFiltersToCondition(filters, LogicalOperatorType.OR); // status="active" || status="pending"
- * ```
- *
- * Filter with isArray property:
- * ```typescript
- * const filters: FilterItem[] = [
- *   { key: 'objectTypeCode', value: 'OBJECTFILTER', type: FilterOperationType.EQ, isArray: false },
- *   { key: 'name', value: 'Long', type: FilterOperationType.EQ, isArray: true },
- * ];
- * const result = convertArrayFiltersToCondition(filters);
- * // Returns: { condition: 'objectTypeCode="OBJECTFILTER" && @0.Contains(name)', params: ["Long"] }
- * ```
- *
- * Filter with isArray and array values:
- * ```typescript
- * const filters: FilterItem[] = [
- *   { key: 'id', value: [1, 2, 3], type: FilterOperationType.EQ, isArray: true },
- *   { key: 'names', value: ['name1', 'name2', 'name3'], type: FilterOperationType.EQ, isArray: true },
- * ];
- * const result = convertArrayFiltersToCondition(filters);
- * // Returns: { condition: '@0.Contains(id) && @1.Contains(names)', params: ["1,2,3", "name1,name2,name3"] }
- * ```
- *
- * Complex nested filter:
- * ```typescript
- * const complexFilter: FilterGroup = {
- *   operator: LogicalOperatorType.AND,
- *   filters: [
- *     { key: 'name', value: 'John', type: FilterOperationType.CONTAINS },
- *     {
- *       operator: LogicalOperatorType.OR,
- *       filters: [
- *         { key: 'age', value: 30, type: FilterOperationType.GTE },
- *         { key: 'vip', value: true, type: FilterOperationType.EQ }
- *       ]
- *     },
- *     {
- *       operator: LogicalOperatorType.NOT,
- *       filters: [
- *         { key: 'status', value: 'inactive', type: FilterOperationType.EQ }
- *       ]
- *     }
- *   ]
- * };
- * const result = convertFilterExpressionToCondition(complexFilter);
- * // name.Contains("John") && (age>=30 || vip="true") && !(status="inactive")
- * ```
- *
- * Complex filter with parameterized values:
- * ```typescript
- * const complexFilter: FilterGroup = {
- *   operator: LogicalOperatorType.AND,
- *   filters: [
- *     { key: 'objectTypeCode', value: 'OBJECTFILTER', type: FilterOperationType.EQ },
- *     { key: 'name', value: 'Long', type: FilterOperationType.EQ, isArray: true }
- *   ]
- * };
- * const result = convertFilterExpressionToCondition(complexFilter);
- * // Returns: { condition: 'objectTypeCode="OBJECTFILTER" && @0.Contains(name)', params: ["Long"] }
- * ```
- *
- * Complex filter with array values:
- * ```typescript
- * const complexFilter: FilterGroup = {
- *   operator: LogicalOperatorType.AND,
- *   filters: [
- *     { key: 'objectTypeCode', value: 'OBJECTFILTER', type: FilterOperationType.EQ },
- *     { key: 'id', value: [1, 2], type: FilterOperationType.EQ, isArray: true },
- *     { key: 'name', value: ['name1', 'name2'], type: FilterOperationType.EQ, isArray: true }
- *   ]
- * };
- * const result = convertFilterExpressionToCondition(complexFilter);
- * // Returns: {
- * //   condition: 'objectTypeCode="OBJECTFILTER" && @0.Contains(id) && @1.Contains(name)',
- * //   params: ["1,2", "name1,name2"]
- * // }
- * ```
- *
- * Example with ISEMPTY check:
- * ```typescript
- * const complexFilter: FilterGroup = {
- *   operator: LogicalOperatorType.AND,
- *   filters: [
- *     {
- *       operator: LogicalOperatorType.OR,
- *       filters: [
- *         { key: 'apControllerCode', value: 'aerohive', type: FilterOperationType.CONTAINS },
- *         { key: 'apControllerCode', type: FilterOperationType.ISEMPTY }
- *       ]
- *     },
- *     { key: 'authenticationMethodCode', value: 'standard', type: FilterOperationType.CONTAINS }
- *   ]
- * };
- * const result = convertFilterExpressionToCondition(complexFilter);
- * // Returns: { condition: '(apControllerCode.Contains("aerohive") || apControllerCode == string.Empty) && authenticationMethodCode.Contains("standard")' }
- * ```
- */
-
 const HeaderBar = styled('header')({
   px: 2,
   display: 'flex',
@@ -45301,8 +45301,8 @@ function AdvancedSearch(props) {
                         fieldName
                       } = currentField;
                       const currentValue = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.value;
-                      const startDate = currentValue && !lodashExports.isNull(currentValue[0]) ? moment(currentValue[0]) : null;
-                      const endDate = currentValue && !lodashExports.isNull(currentValue[1]) ? moment(currentValue[1]) : null;
+                      const startDate = currentValue && !_$3.isNull(currentValue[0]) ? moment(currentValue[0]) : null;
+                      const endDate = currentValue && !_$3.isNull(currentValue[1]) ? moment(currentValue[1]) : null;
                       const handleChange = dateRange => {
                         const option = {
                           label: dateToString(dateRange[0]) + ' - ' + dateToString(dateRange[1]),
@@ -48611,7 +48611,7 @@ function isHTMLElement$1(element) {
 function isVirtualElement(element) {
   return !isHTMLElement$1(element);
 }
-const useUtilityClasses$Y = ownerState => {
+const useUtilityClasses$Z = ownerState => {
   const {
     classes
   } = ownerState;
@@ -48724,7 +48724,7 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
   if (TransitionProps !== null) {
     childProps.TransitionProps = TransitionProps;
   }
-  const classes = useUtilityClasses$Y(props);
+  const classes = useUtilityClasses$Z(props);
   const Root = slots.root ?? 'div';
   const rootProps = useSlotProps({
     elementType: Root,
@@ -49147,7 +49147,7 @@ function getListSubheaderUtilityClass(slot) {
 }
 generateUtilityClasses('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);
 
-const useUtilityClasses$X = ownerState => {
+const useUtilityClasses$Y = ownerState => {
   const {
     classes,
     color,
@@ -49242,7 +49242,7 @@ const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inPro
     disableSticky,
     inset
   };
-  const classes = useUtilityClasses$X(ownerState);
+  const classes = useUtilityClasses$Y(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(ListSubheaderRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -49307,7 +49307,7 @@ function getPaperUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
-const useUtilityClasses$W = ownerState => {
+const useUtilityClasses$X = ownerState => {
   const {
     square,
     elevation,
@@ -49379,7 +49379,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
     square,
     variant
   };
-  const classes = useUtilityClasses$W(ownerState);
+  const classes = useUtilityClasses$X(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     if (theme.shadows[elevation] === undefined) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
@@ -51542,7 +51542,7 @@ function getButtonBaseUtilityClass(slot) {
 }
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 
-const useUtilityClasses$V = ownerState => {
+const useUtilityClasses$W = ownerState => {
   const {
     disabled,
     focusVisible,
@@ -51771,7 +51771,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$V(ownerState);
+  const classes = useUtilityClasses$W(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -52012,7 +52012,7 @@ const rotateAnimation = typeof circularRotateKeyframe !== 'string' ? css`
 const dashAnimation = typeof circularDashKeyframe !== 'string' ? css`
         animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
       ` : null;
-const useUtilityClasses$U = ownerState => {
+const useUtilityClasses$V = ownerState => {
   const {
     classes,
     variant,
@@ -52140,7 +52140,7 @@ const CircularProgress$1 = /*#__PURE__*/React.forwardRef(function CircularProgre
     value,
     variant
   };
-  const classes = useUtilityClasses$U(ownerState);
+  const classes = useUtilityClasses$V(ownerState);
   const circleStyle = {};
   const rootStyle = {};
   const rootProps = {};
@@ -52251,7 +52251,7 @@ function getIconButtonUtilityClass(slot) {
 }
 const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator', 'loadingWrapper']);
 
-const useUtilityClasses$T = ownerState => {
+const useUtilityClasses$U = ownerState => {
   const {
     classes,
     disabled,
@@ -52443,7 +52443,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     loadingIndicator,
     size
   };
-  const classes = useUtilityClasses$T(ownerState);
+  const classes = useUtilityClasses$U(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(IconButtonRoot, {
     id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
@@ -52563,7 +52563,7 @@ function getChipUtilityClass(slot) {
 }
 const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorDefault', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
 
-const useUtilityClasses$S = ownerState => {
+const useUtilityClasses$T = ownerState => {
   const {
     classes,
     disabled,
@@ -52964,7 +52964,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     clickable,
     variant
   };
-  const classes = useUtilityClasses$S(ownerState);
+  const classes = useUtilityClasses$T(ownerState);
   const moreProps = component === ButtonBase ? {
     component: ComponentProp || 'div',
     focusVisibleClassName: classes.focusVisible,
@@ -53451,7 +53451,7 @@ const inputOverridesResolver = (props, styles) => {
   } = props;
   return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
 };
-const useUtilityClasses$R = ownerState => {
+const useUtilityClasses$S = ownerState => {
   const {
     classes,
     color,
@@ -53871,7 +53871,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     startAdornment,
     type
   };
-  const classes = useUtilityClasses$R(ownerState);
+  const classes = useUtilityClasses$S(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseInput;
@@ -54192,7 +54192,7 @@ var ClearIcon$1 = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 }), 'Close');
 
-var ArrowDropDownIcon$1 = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
+var ArrowDropDownIcon$2 = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
@@ -54277,7 +54277,7 @@ name, parameters) {
 }
 
 var _ClearIcon, _ArrowDropDownIcon;
-const useUtilityClasses$Q = ownerState => {
+const useUtilityClasses$R = ownerState => {
   const {
     classes,
     disablePortal,
@@ -54706,7 +54706,7 @@ const Autocomplete$1 = /*#__PURE__*/React.forwardRef(function Autocomplete(inPro
     options,
     PaperComponent: PaperComponentProp,
     PopperComponent: PopperComponentProp,
-    popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/jsxRuntimeExports.jsx(ArrowDropDownIcon$1, {})),
+    popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/jsxRuntimeExports.jsx(ArrowDropDownIcon$2, {})),
     readOnly = false,
     renderGroup: renderGroupProp,
     renderInput,
@@ -54772,7 +54772,7 @@ const Autocomplete$1 = /*#__PURE__*/React.forwardRef(function Autocomplete(inPro
     popupOpen,
     size
   };
-  const classes = useUtilityClasses$Q(ownerState);
+  const classes = useUtilityClasses$R(ownerState);
   const externalForwardedProps = {
     slots: {
       paper: PaperComponentProp,
@@ -55442,7 +55442,7 @@ function getSwitchBaseUtilityClass(slot) {
 }
 generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-const useUtilityClasses$P = ownerState => {
+const useUtilityClasses$Q = ownerState => {
   const {
     classes,
     checked,
@@ -55585,7 +55585,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     disableFocusRipple,
     edge
   };
-  const classes = useUtilityClasses$P(ownerState);
+  const classes = useUtilityClasses$Q(ownerState);
   const externalForwardedProps = {
     slots,
     slotProps: {
@@ -55799,7 +55799,7 @@ function getCheckboxUtilityClass(slot) {
 }
 const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
 
-const useUtilityClasses$O = ownerState => {
+const useUtilityClasses$P = ownerState => {
   const {
     classes,
     indeterminate,
@@ -55908,7 +55908,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     indeterminate,
     size
   };
-  const classes = useUtilityClasses$O(ownerState);
+  const classes = useUtilityClasses$P(ownerState);
   const externalInputProps = slotProps.input ?? inputProps;
   const [RootSlot, rootSlotProps] = useSlot('root', {
     ref,
@@ -56058,7 +56058,7 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes *
   value: PropTypes.any
 } : void 0;
 
-const useUtilityClasses$N = ownerState => {
+const useUtilityClasses$O = ownerState => {
   const {
     classes,
     disableUnderline
@@ -56189,7 +56189,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
     type = 'text',
     ...other
   } = props;
-  const classes = useUtilityClasses$N(props);
+  const classes = useUtilityClasses$O(props);
   const ownerState = {
     disableUnderline
   };
@@ -56403,7 +56403,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
 } : void 0;
 Input.muiName = 'Input';
 
-const useUtilityClasses$M = ownerState => {
+const useUtilityClasses$N = ownerState => {
   const {
     classes,
     disableUnderline,
@@ -56681,7 +56681,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     multiline,
     type
   };
-  const classes = useUtilityClasses$M(props);
+  const classes = useUtilityClasses$N(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -57049,7 +57049,7 @@ process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes /* remove-propt
   style: PropTypes.object
 } : void 0;
 
-const useUtilityClasses$L = ownerState => {
+const useUtilityClasses$M = ownerState => {
   const {
     classes
   } = ownerState;
@@ -57227,7 +57227,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     type = 'text',
     ...other
   } = props;
-  const classes = useUtilityClasses$L(props);
+  const classes = useUtilityClasses$M(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -57465,7 +57465,7 @@ function getFormLabelUtilityClasses(slot) {
 }
 const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 
-const useUtilityClasses$K = ownerState => {
+const useUtilityClasses$L = ownerState => {
   const {
     classes,
     color,
@@ -57562,7 +57562,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     focused: fcs.focused,
     required: fcs.required
   };
-  const classes = useUtilityClasses$K(ownerState);
+  const classes = useUtilityClasses$L(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, {
     as: component,
     ownerState: ownerState,
@@ -57636,7 +57636,7 @@ function getInputLabelUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
 
-const useUtilityClasses$J = ownerState => {
+const useUtilityClasses$K = ownerState => {
   const {
     classes,
     formControl,
@@ -57825,7 +57825,7 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
     required: fcs.required,
     focused: fcs.focused
   };
-  const classes = useUtilityClasses$J(ownerState);
+  const classes = useUtilityClasses$K(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, {
     "data-shrink": shrink,
     ref: ref,
@@ -57908,7 +57908,7 @@ function getFormControlUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 
-const useUtilityClasses$I = ownerState => {
+const useUtilityClasses$J = ownerState => {
   const {
     classes,
     margin,
@@ -58023,7 +58023,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     size,
     variant
   };
-  const classes = useUtilityClasses$I(ownerState);
+  const classes = useUtilityClasses$J(ownerState);
   const [adornedStart, setAdornedStart] = React.useState(() => {
     // We need to iterate through the children and find the Input in order
     // to fully support server-side rendering.
@@ -58205,7 +58205,7 @@ function getFormHelperTextUtilityClasses(slot) {
 const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
 
 var _span$2;
-const useUtilityClasses$H = ownerState => {
+const useUtilityClasses$I = ownerState => {
   const {
     classes,
     contained,
@@ -58302,7 +58302,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
 
   // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
   delete ownerState.ownerState;
-  const classes = useUtilityClasses$H(ownerState);
+  const classes = useUtilityClasses$I(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -58389,7 +58389,7 @@ function getListUtilityClass(slot) {
 }
 generateUtilityClasses('MuiList', ['root', 'padding', 'dense', 'subheader']);
 
-const useUtilityClasses$G = ownerState => {
+const useUtilityClasses$H = ownerState => {
   const {
     classes,
     disablePadding,
@@ -58455,7 +58455,7 @@ const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
     dense,
     disablePadding
   };
-  const classes = useUtilityClasses$G(ownerState);
+  const classes = useUtilityClasses$H(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(ListContext.Provider, {
     value: context,
     children: /*#__PURE__*/jsxRuntimeExports.jsxs(ListRoot, {
@@ -59838,7 +59838,7 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
-const useUtilityClasses$F = ownerState => {
+const useUtilityClasses$G = ownerState => {
   const {
     classes,
     invisible
@@ -59901,7 +59901,7 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     component,
     invisible
   };
-  const classes = useUtilityClasses$F(ownerState);
+  const classes = useUtilityClasses$G(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     root: components.Root,
@@ -60220,7 +60220,7 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
 
-const useUtilityClasses$E = ownerState => {
+const useUtilityClasses$F = ownerState => {
   const {
     open,
     exited,
@@ -60341,7 +60341,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     ...propsWithDefaults,
     exited
   };
-  const classes = useUtilityClasses$E(ownerState);
+  const classes = useUtilityClasses$F(ownerState);
   const childProps = {};
   if (children.props.tabIndex === undefined) {
     childProps.tabIndex = '-1';
@@ -60625,7 +60625,7 @@ function getTransformOriginValue(transformOrigin) {
 function resolveAnchorEl(anchorEl) {
   return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
 }
-const useUtilityClasses$D = ownerState => {
+const useUtilityClasses$E = ownerState => {
   const {
     classes
   } = ownerState;
@@ -60703,7 +60703,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     transitionDuration: transitionDurationProp,
     TransitionProps
   };
-  const classes = useUtilityClasses$D(ownerState);
+  const classes = useUtilityClasses$E(ownerState);
 
   // Returns the top/left offset of the position
   // to attach to on the anchor element (or body if none is provided)
@@ -61167,7 +61167,7 @@ const LTR_ORIGIN = {
   vertical: 'top',
   horizontal: 'left'
 };
-const useUtilityClasses$C = ownerState => {
+const useUtilityClasses$D = ownerState => {
   const {
     classes
   } = ownerState;
@@ -61238,7 +61238,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     TransitionProps,
     variant
   };
-  const classes = useUtilityClasses$C(ownerState);
+  const classes = useUtilityClasses$D(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React.useRef(null);
   const handleEntering = (element, isAppearing) => {
@@ -61484,7 +61484,7 @@ function getNativeSelectUtilityClasses(slot) {
 }
 const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 
-const useUtilityClasses$B = ownerState => {
+const useUtilityClasses$C = ownerState => {
   const {
     classes,
     variant,
@@ -61641,7 +61641,7 @@ const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInp
     variant,
     error
   };
-  const classes = useUtilityClasses$B(ownerState);
+  const classes = useUtilityClasses$C(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(React.Fragment, {
     children: [/*#__PURE__*/jsxRuntimeExports.jsx(NativeSelectSelect, {
       ownerState: ownerState,
@@ -61783,7 +61783,7 @@ function areEqualValues(a, b) {
 function isEmpty$1(display) {
   return display == null || typeof display === 'string' && !display.trim();
 }
-const useUtilityClasses$A = ownerState => {
+const useUtilityClasses$B = ownerState => {
   const {
     classes,
     variant,
@@ -62128,7 +62128,7 @@ const SelectInput$1 = /*#__PURE__*/React.forwardRef(function SelectInput(props,
     open,
     error
   };
-  const classes = useUtilityClasses$A(ownerState);
+  const classes = useUtilityClasses$B(ownerState);
   const paperProps = {
     ...MenuProps.PaperProps,
     ...MenuProps.slotProps?.paper
@@ -62368,7 +62368,7 @@ process.env.NODE_ENV !== "production" ? SelectInput$1.propTypes = {
   variant: PropTypes.oneOf(['standard', 'outlined', 'filled'])
 } : void 0;
 
-const useUtilityClasses$z = ownerState => {
+const useUtilityClasses$A = ownerState => {
   const {
     classes
   } = ownerState;
@@ -62401,7 +62401,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     className,
     defaultOpen = false,
     displayEmpty = false,
-    IconComponent = ArrowDropDownIcon$1,
+    IconComponent = ArrowDropDownIcon$2,
     id,
     input,
     inputProps,
@@ -62431,7 +62431,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     variant,
     classes: classesProp
   };
-  const classes = useUtilityClasses$z(ownerState);
+  const classes = useUtilityClasses$A(ownerState);
   const {
     root,
     ...restOfClasses
@@ -62655,7 +62655,7 @@ const variantComponent = {
   filled: FilledInput,
   outlined: OutlinedInput
 };
-const useUtilityClasses$y = ownerState => {
+const useUtilityClasses$z = ownerState => {
   const {
     classes
   } = ownerState;
@@ -62755,7 +62755,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     select,
     variant
   };
-  const classes = useUtilityClasses$y(ownerState);
+  const classes = useUtilityClasses$z(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     if (select && !children) {
       console.error('MUI: `children` must be passed when using the `TextField` component with `select`.');
@@ -63285,17 +63285,1250 @@ const BoxResizableSplit = props => {
   });
 };
 
-var ImageIcon = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
-  d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2M8.5 13.5l2.5 3.01L14.5 12l4.5 6H5z"
-}), 'Image');
+function getButtonUtilityClass(slot) {
+  return generateUtilityClass('MuiButton', slot);
+}
+const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge', 'loading', 'loadingWrapper', 'loadingIconPlaceholder', 'loadingIndicator', 'loadingPositionCenter', 'loadingPositionStart', 'loadingPositionEnd']);
 
-var MenuIcon = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
-  d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
-}), 'Menu');
+/**
+ * @ignore - internal component.
+ */
+const ButtonGroupContext = /*#__PURE__*/React.createContext({});
+if (process.env.NODE_ENV !== 'production') {
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
+}
 
-var PictureAsPdfIcon = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
-  d: "M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5zm4-3H19v1h1.5V11H19v2h-1.5V7h3zM9 9.5h1v-1H9zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4zm10 5.5h1v-3h-1z"
-}), 'PictureAsPdf');
+/**
+ * @ignore - internal component.
+ */
+const ButtonGroupButtonContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';
+}
+
+const useUtilityClasses$y = ownerState => {
+  const {
+    color,
+    disableElevation,
+    fullWidth,
+    size,
+    variant,
+    loading,
+    loadingPosition,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', loading && 'loading', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${capitalize(loadingPosition)}`],
+    startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`],
+    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`],
+    loadingIndicator: ['loadingIndicator'],
+    loadingWrapper: ['loadingWrapper']
+  };
+  const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
+  return {
+    ...classes,
+    // forward the focused, disabled, etc. classes to the ButtonBase
+    ...composedClasses
+  };
+};
+const commonIconStyles = [{
+  props: {
+    size: 'small'
+  },
+  style: {
+    '& > *:nth-of-type(1)': {
+      fontSize: 18
+    }
+  }
+}, {
+  props: {
+    size: 'medium'
+  },
+  style: {
+    '& > *:nth-of-type(1)': {
+      fontSize: 20
+    }
+  }
+}, {
+  props: {
+    size: 'large'
+  },
+  style: {
+    '& > *:nth-of-type(1)': {
+      fontSize: 22
+    }
+  }
+}];
+const ButtonRoot = styled(ButtonBase, {
+  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
+  name: 'MuiButton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.loading && styles.loading];
+  }
+})(memoTheme(({
+  theme
+}) => {
+  const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
+  const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
+  return {
+    ...theme.typography.button,
+    minWidth: 64,
+    padding: '6px 16px',
+    border: 0,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+      duration: theme.transitions.duration.short
+    }),
+    '&:hover': {
+      textDecoration: 'none'
+    },
+    [`&.${buttonClasses.disabled}`]: {
+      color: (theme.vars || theme).palette.action.disabled
+    },
+    variants: [{
+      props: {
+        variant: 'contained'
+      },
+      style: {
+        color: `var(--variant-containedColor)`,
+        backgroundColor: `var(--variant-containedBg)`,
+        boxShadow: (theme.vars || theme).shadows[2],
+        '&:hover': {
+          boxShadow: (theme.vars || theme).shadows[4],
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            boxShadow: (theme.vars || theme).shadows[2]
+          }
+        },
+        '&:active': {
+          boxShadow: (theme.vars || theme).shadows[8]
+        },
+        [`&.${buttonClasses.focusVisible}`]: {
+          boxShadow: (theme.vars || theme).shadows[6]
+        },
+        [`&.${buttonClasses.disabled}`]: {
+          color: (theme.vars || theme).palette.action.disabled,
+          boxShadow: (theme.vars || theme).shadows[0],
+          backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+        }
+      }
+    }, {
+      props: {
+        variant: 'outlined'
+      },
+      style: {
+        padding: '5px 15px',
+        border: '1px solid currentColor',
+        borderColor: `var(--variant-outlinedBorder, currentColor)`,
+        backgroundColor: `var(--variant-outlinedBg)`,
+        color: `var(--variant-outlinedColor)`,
+        [`&.${buttonClasses.disabled}`]: {
+          border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+        }
+      }
+    }, {
+      props: {
+        variant: 'text'
+      },
+      style: {
+        padding: '6px 8px',
+        color: `var(--variant-textColor)`,
+        backgroundColor: `var(--variant-textBg)`
+      }
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+      props: {
+        color
+      },
+      style: {
+        '--variant-textColor': (theme.vars || theme).palette[color].main,
+        '--variant-outlinedColor': (theme.vars || theme).palette[color].main,
+        '--variant-outlinedBorder': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha$1(theme.palette[color].main, 0.5),
+        '--variant-containedColor': (theme.vars || theme).palette[color].contrastText,
+        '--variant-containedBg': (theme.vars || theme).palette[color].main,
+        '@media (hover: hover)': {
+          '&:hover': {
+            '--variant-containedBg': (theme.vars || theme).palette[color].dark,
+            '--variant-textBg': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette[color].main, theme.palette.action.hoverOpacity),
+            '--variant-outlinedBorder': (theme.vars || theme).palette[color].main,
+            '--variant-outlinedBg': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette[color].main, theme.palette.action.hoverOpacity)
+          }
+        }
+      }
+    })), {
+      props: {
+        color: 'inherit'
+      },
+      style: {
+        color: 'inherit',
+        borderColor: 'currentColor',
+        '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
+        '@media (hover: hover)': {
+          '&:hover': {
+            '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
+            '--variant-textBg': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+            '--variant-outlinedBg': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette.text.primary, theme.palette.action.hoverOpacity)
+          }
+        }
+      }
+    }, {
+      props: {
+        size: 'small',
+        variant: 'text'
+      },
+      style: {
+        padding: '4px 5px',
+        fontSize: theme.typography.pxToRem(13)
+      }
+    }, {
+      props: {
+        size: 'large',
+        variant: 'text'
+      },
+      style: {
+        padding: '8px 11px',
+        fontSize: theme.typography.pxToRem(15)
+      }
+    }, {
+      props: {
+        size: 'small',
+        variant: 'outlined'
+      },
+      style: {
+        padding: '3px 9px',
+        fontSize: theme.typography.pxToRem(13)
+      }
+    }, {
+      props: {
+        size: 'large',
+        variant: 'outlined'
+      },
+      style: {
+        padding: '7px 21px',
+        fontSize: theme.typography.pxToRem(15)
+      }
+    }, {
+      props: {
+        size: 'small',
+        variant: 'contained'
+      },
+      style: {
+        padding: '4px 10px',
+        fontSize: theme.typography.pxToRem(13)
+      }
+    }, {
+      props: {
+        size: 'large',
+        variant: 'contained'
+      },
+      style: {
+        padding: '8px 22px',
+        fontSize: theme.typography.pxToRem(15)
+      }
+    }, {
+      props: {
+        disableElevation: true
+      },
+      style: {
+        boxShadow: 'none',
+        '&:hover': {
+          boxShadow: 'none'
+        },
+        [`&.${buttonClasses.focusVisible}`]: {
+          boxShadow: 'none'
+        },
+        '&:active': {
+          boxShadow: 'none'
+        },
+        [`&.${buttonClasses.disabled}`]: {
+          boxShadow: 'none'
+        }
+      }
+    }, {
+      props: {
+        fullWidth: true
+      },
+      style: {
+        width: '100%'
+      }
+    }, {
+      props: {
+        loadingPosition: 'center'
+      },
+      style: {
+        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+          duration: theme.transitions.duration.short
+        }),
+        [`&.${buttonClasses.loading}`]: {
+          color: 'transparent'
+        }
+      }
+    }]
+  };
+}));
+const ButtonStartIcon = styled('span', {
+  name: 'MuiButton',
+  slot: 'StartIcon',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart, styles[`iconSize${capitalize(ownerState.size)}`]];
+  }
+})(({
+  theme
+}) => ({
+  display: 'inherit',
+  marginRight: 8,
+  marginLeft: -4,
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      marginLeft: -2
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      loading: true
+    },
+    style: {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      loading: true,
+      fullWidth: true
+    },
+    style: {
+      marginRight: -8
+    }
+  }, ...commonIconStyles]
+}));
+const ButtonEndIcon = styled('span', {
+  name: 'MuiButton',
+  slot: 'EndIcon',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd, styles[`iconSize${capitalize(ownerState.size)}`]];
+  }
+})(({
+  theme
+}) => ({
+  display: 'inherit',
+  marginRight: -4,
+  marginLeft: 8,
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      marginRight: -2
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      loading: true
+    },
+    style: {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      loading: true,
+      fullWidth: true
+    },
+    style: {
+      marginLeft: -8
+    }
+  }, ...commonIconStyles]
+}));
+const ButtonLoadingIndicator = styled('span', {
+  name: 'MuiButton',
+  slot: 'LoadingIndicator'
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }, {
+    props: {
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 14
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      size: 'small'
+    },
+    style: {
+      left: 10
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'center'
+    },
+    style: {
+      left: '50%',
+      transform: 'translate(-50%)',
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 14
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      size: 'small'
+    },
+    style: {
+      right: 10
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      fullWidth: true
+    },
+    style: {
+      position: 'relative',
+      left: -10
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      fullWidth: true
+    },
+    style: {
+      position: 'relative',
+      right: -10
+    }
+  }]
+}));
+const ButtonLoadingIconPlaceholder = styled('span', {
+  name: 'MuiButton',
+  slot: 'LoadingIconPlaceholder'
+})({
+  display: 'inline-block',
+  width: '1em',
+  height: '1em'
+});
+const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
+  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
+  const contextProps = React.useContext(ButtonGroupContext);
+  const buttonGroupButtonContextPositionClassName = React.useContext(ButtonGroupButtonContext);
+  const resolvedProps = resolveProps(contextProps, inProps);
+  const props = useDefaultProps({
+    props: resolvedProps,
+    name: 'MuiButton'
+  });
+  const {
+    children,
+    color = 'primary',
+    component = 'button',
+    className,
+    disabled = false,
+    disableElevation = false,
+    disableFocusRipple = false,
+    endIcon: endIconProp,
+    focusVisibleClassName,
+    fullWidth = false,
+    id: idProp,
+    loading = null,
+    loadingIndicator: loadingIndicatorProp,
+    loadingPosition = 'center',
+    size = 'medium',
+    startIcon: startIconProp,
+    type,
+    variant = 'text',
+    ...other
+  } = props;
+  const loadingId = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/jsxRuntimeExports.jsx(CircularProgress$1, {
+    "aria-labelledby": loadingId,
+    color: "inherit",
+    size: 16
+  });
+  const ownerState = {
+    ...props,
+    color,
+    component,
+    disabled,
+    disableElevation,
+    disableFocusRipple,
+    fullWidth,
+    loading,
+    loadingIndicator,
+    loadingPosition,
+    size,
+    type,
+    variant
+  };
+  const classes = useUtilityClasses$y(ownerState);
+  const startIcon = (startIconProp || loading && loadingPosition === 'start') && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonStartIcon, {
+    className: classes.startIcon,
+    ownerState: ownerState,
+    children: startIconProp || /*#__PURE__*/jsxRuntimeExports.jsx(ButtonLoadingIconPlaceholder, {
+      className: classes.loadingIconPlaceholder,
+      ownerState: ownerState
+    })
+  });
+  const endIcon = (endIconProp || loading && loadingPosition === 'end') && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonEndIcon, {
+    className: classes.endIcon,
+    ownerState: ownerState,
+    children: endIconProp || /*#__PURE__*/jsxRuntimeExports.jsx(ButtonLoadingIconPlaceholder, {
+      className: classes.loadingIconPlaceholder,
+      ownerState: ownerState
+    })
+  });
+  const positionClassName = buttonGroupButtonContextPositionClassName || '';
+  const loader = typeof loading === 'boolean' ?
+  /*#__PURE__*/
+  // use plain HTML span to minimize the runtime overhead
+  jsxRuntimeExports.jsx("span", {
+    className: classes.loadingWrapper,
+    style: {
+      display: 'contents'
+    },
+    children: loading && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonLoadingIndicator, {
+      className: classes.loadingIndicator,
+      ownerState: ownerState,
+      children: loadingIndicator
+    })
+  }) : null;
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonRoot, {
+    ownerState: ownerState,
+    className: clsx(contextProps.className, classes.root, className, positionClassName),
+    component: component,
+    disabled: disabled || loading,
+    focusRipple: !disableFocusRipple,
+    focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+    ref: ref,
+    type: type,
+    id: loading ? loadingId : idProp,
+    ...other,
+    classes: classes,
+    children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
+  });
+});
+process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning']), PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: PropTypes.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * Element placed after the children.
+   */
+  endIcon: PropTypes.node,
+  /**
+   * @ignore
+   */
+  focusVisibleClassName: PropTypes.string,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: PropTypes.string,
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading: PropTypes.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: PropTypes.node,
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition: PropTypes.oneOf(['center', 'end', 'start']),
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+  /**
+   * Element placed before the children.
+   */
+  startIcon: PropTypes.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * @ignore
+   */
+  type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]),
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
+} : void 0;
+
+/**
+ * Gets only the valid children of a component,
+ * and ignores any nullish or falsy child.
+ *
+ * @param children the children
+ */
+function getValidReactChildren(children) {
+  return React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
+}
+
+function getButtonGroupUtilityClass(slot) {
+  return generateUtilityClass('MuiButtonGroup', slot);
+}
+const buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'horizontal', 'vertical', 'colorPrimary', 'colorSecondary', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
+
+const overridesResolver$4 = (props, styles) => {
+  const {
+    ownerState
+  } = props;
+  return [{
+    [`& .${buttonGroupClasses.grouped}`]: styles.grouped
+  }, {
+    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.orientation)}`]
+  }, {
+    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}`]
+  }, {
+    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.orientation)}`]
+  }, {
+    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.color)}`]
+  }, {
+    [`& .${buttonGroupClasses.firstButton}`]: styles.firstButton
+  }, {
+    [`& .${buttonGroupClasses.lastButton}`]: styles.lastButton
+  }, {
+    [`& .${buttonGroupClasses.middleButton}`]: styles.middleButton
+  }, styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
+};
+const useUtilityClasses$x = ownerState => {
+  const {
+    classes,
+    color,
+    disabled,
+    disableElevation,
+    fullWidth,
+    orientation,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', `color${capitalize(color)}`],
+    grouped: ['grouped', `grouped${capitalize(orientation)}`, `grouped${capitalize(variant)}`, `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color)}`, disabled && 'disabled'],
+    firstButton: ['firstButton'],
+    lastButton: ['lastButton'],
+    middleButton: ['middleButton']
+  };
+  return composeClasses(slots, getButtonGroupUtilityClass, classes);
+};
+const ButtonGroupRoot = styled('div', {
+  name: 'MuiButtonGroup',
+  slot: 'Root',
+  overridesResolver: overridesResolver$4
+})(memoTheme(({
+  theme
+}) => ({
+  display: 'inline-flex',
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  variants: [{
+    props: {
+      variant: 'contained'
+    },
+    style: {
+      boxShadow: (theme.vars || theme).shadows[2]
+    }
+  }, {
+    props: {
+      disableElevation: true
+    },
+    style: {
+      boxShadow: 'none'
+    }
+  }, {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      flexDirection: 'column',
+      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderTopRightRadius: 0,
+        borderTopLeftRadius: 0
+      },
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0
+      }
+    }
+  }, {
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      }
+    }
+  }, {
+    props: {
+      variant: 'text',
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
+    }
+  }, {
+    props: {
+      variant: 'text',
+      orientation: 'vertical'
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
+    }
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).flatMap(([color]) => [{
+    props: {
+      variant: 'text',
+      color
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha$1(theme.palette[color].main, 0.5)
+      }
+    }
+  }]), {
+    props: {
+      variant: 'outlined',
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderRightColor: 'transparent',
+        '&:hover': {
+          borderRightColor: 'currentColor'
+        }
+      },
+      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+        marginLeft: -1
+      }
+    }
+  }, {
+    props: {
+      variant: 'outlined',
+      orientation: 'vertical'
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderBottomColor: 'transparent',
+        '&:hover': {
+          borderBottomColor: 'currentColor'
+        }
+      },
+      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+        marginTop: -1
+      }
+    }
+  }, {
+    props: {
+      variant: 'contained',
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
+    }
+  }, {
+    props: {
+      variant: 'contained',
+      orientation: 'vertical'
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
+    }
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark'])).map(([color]) => ({
+    props: {
+      variant: 'contained',
+      color
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderColor: (theme.vars || theme).palette[color].dark
+      }
+    }
+  }))],
+  [`& .${buttonGroupClasses.grouped}`]: {
+    minWidth: 40,
+    boxShadow: 'none',
+    props: {
+      variant: 'contained'
+    },
+    style: {
+      '&:hover': {
+        boxShadow: 'none'
+      }
+    }
+  }
+})));
+const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiButtonGroup'
+  });
+  const {
+    children,
+    className,
+    color = 'primary',
+    component = 'div',
+    disabled = false,
+    disableElevation = false,
+    disableFocusRipple = false,
+    disableRipple = false,
+    fullWidth = false,
+    orientation = 'horizontal',
+    size = 'medium',
+    variant = 'outlined',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    color,
+    component,
+    disabled,
+    disableElevation,
+    disableFocusRipple,
+    disableRipple,
+    fullWidth,
+    orientation,
+    size,
+    variant
+  };
+  const classes = useUtilityClasses$x(ownerState);
+  const context = React.useMemo(() => ({
+    className: classes.grouped,
+    color,
+    disabled,
+    disableElevation,
+    disableFocusRipple,
+    disableRipple,
+    fullWidth,
+    size,
+    variant
+  }), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
+  const validChildren = getValidReactChildren(children);
+  const childrenCount = validChildren.length;
+  const getButtonPositionClassName = index => {
+    const isFirstButton = index === 0;
+    const isLastButton = index === childrenCount - 1;
+    if (isFirstButton && isLastButton) {
+      return '';
+    }
+    if (isFirstButton) {
+      return classes.firstButton;
+    }
+    if (isLastButton) {
+      return classes.lastButton;
+    }
+    return classes.middleButton;
+  };
+  return /*#__PURE__*/jsxRuntimeExports.jsx(ButtonGroupRoot, {
+    as: component,
+    role: "group",
+    className: clsx(classes.root, className),
+    ref: ref,
+    ownerState: ownerState,
+    ...other,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(ButtonGroupContext.Provider, {
+      value: context,
+      children: validChildren.map((child, index) => {
+        return /*#__PURE__*/jsxRuntimeExports.jsx(ButtonGroupButtonContext.Provider, {
+          value: getButtonPositionClassName(index),
+          children: child
+        }, index);
+      })
+    })
+  });
+});
+process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: PropTypes.bool,
+  /**
+   * If `true`, the button keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the button ripple effect is disabled.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the buttons will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
+} : void 0;
+
+var ArrowDropDownIcon$1 = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
+  d: "m7 10 5 5 5-5z"
+}), 'ArrowDropDown');
+
+// TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
+function mapEventPropToEvent(eventProp) {
+  return eventProp.substring(2).toLowerCase();
+}
+function clickedRootScrollbar$1(event, doc) {
+  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
+}
+/**
+ * Listen for click events that occur somewhere in the document, outside of the element itself.
+ * For instance, if you need to hide a menu when people click anywhere else on your page.
+ *
+ * Demos:
+ *
+ * - [Click-Away Listener](https://mui.com/material-ui/react-click-away-listener/)
+ * - [Menu](https://mui.com/material-ui/react-menu/)
+ *
+ * API:
+ *
+ * - [ClickAwayListener API](https://mui.com/material-ui/api/click-away-listener/)
+ */
+function ClickAwayListener(props) {
+  const {
+    children,
+    disableReactTree = false,
+    mouseEvent = 'onClick',
+    onClickAway,
+    touchEvent = 'onTouchEnd'
+  } = props;
+  const movedRef = React.useRef(false);
+  const nodeRef = React.useRef(null);
+  const activatedRef = React.useRef(false);
+  const syntheticEventRef = React.useRef(false);
+  React.useEffect(() => {
+    // Ensure that this component is not "activated" synchronously.
+    // https://github.com/facebook/react/issues/20074
+    setTimeout(() => {
+      activatedRef.current = true;
+    }, 0);
+    return () => {
+      activatedRef.current = false;
+    };
+  }, []);
+  const handleRef = useForkRef(getReactElementRef(children), nodeRef);
+
+  // The handler doesn't take event.defaultPrevented into account:
+  //
+  // event.preventDefault() is meant to stop default behaviors like
+  // clicking a checkbox to check it, hitting a button to submit a form,
+  // and hitting left arrow to move the cursor in a text input etc.
+  // Only special HTML elements have these default behaviors.
+  const handleClickAway = useEventCallback(event => {
+    // Given developers can stop the propagation of the synthetic event,
+    // we can only be confident with a positive value.
+    const insideReactTree = syntheticEventRef.current;
+    syntheticEventRef.current = false;
+    const doc = ownerDocument(nodeRef.current);
+
+    // 1. IE11 support, which trigger the handleClickAway even after the unbind
+    // 2. The child might render null.
+    // 3. Behave like a blur listener.
+    if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar$1(event, doc)) {
+      return;
+    }
+
+    // Do not act if user performed touchmove
+    if (movedRef.current) {
+      movedRef.current = false;
+      return;
+    }
+    let insideDOM;
+
+    // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
+    if (event.composedPath) {
+      insideDOM = event.composedPath().includes(nodeRef.current);
+    } else {
+      insideDOM = !doc.documentElement.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      event.target) || nodeRef.current.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      event.target);
+    }
+    if (!insideDOM && (disableReactTree || !insideReactTree)) {
+      onClickAway(event);
+    }
+  });
+
+  // Keep track of mouse/touch events that bubbled up through the portal.
+  const createHandleSynthetic = handlerName => event => {
+    syntheticEventRef.current = true;
+    const childrenPropsHandler = children.props[handlerName];
+    if (childrenPropsHandler) {
+      childrenPropsHandler(event);
+    }
+  };
+  const childrenProps = {
+    ref: handleRef
+  };
+  if (touchEvent !== false) {
+    childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
+  }
+  React.useEffect(() => {
+    if (touchEvent !== false) {
+      const mappedTouchEvent = mapEventPropToEvent(touchEvent);
+      const doc = ownerDocument(nodeRef.current);
+      const handleTouchMove = () => {
+        movedRef.current = true;
+      };
+      doc.addEventListener(mappedTouchEvent, handleClickAway);
+      doc.addEventListener('touchmove', handleTouchMove);
+      return () => {
+        doc.removeEventListener(mappedTouchEvent, handleClickAway);
+        doc.removeEventListener('touchmove', handleTouchMove);
+      };
+    }
+    return undefined;
+  }, [handleClickAway, touchEvent]);
+  if (mouseEvent !== false) {
+    childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
+  }
+  React.useEffect(() => {
+    if (mouseEvent !== false) {
+      const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
+      const doc = ownerDocument(nodeRef.current);
+      doc.addEventListener(mappedMouseEvent, handleClickAway);
+      return () => {
+        doc.removeEventListener(mappedMouseEvent, handleClickAway);
+      };
+    }
+    return undefined;
+  }, [handleClickAway, mouseEvent]);
+  return /*#__PURE__*/React.cloneElement(children, childrenProps);
+}
+process.env.NODE_ENV !== "production" ? ClickAwayListener.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The wrapped element.
+   */
+  children: elementAcceptingRef.isRequired,
+  /**
+   * If `true`, the React tree is ignored and only the DOM tree is considered.
+   * This prop changes how portaled elements are handled.
+   * @default false
+   */
+  disableReactTree: PropTypes.bool,
+  /**
+   * The mouse event to listen to. You can disable the listener by providing `false`.
+   * @default 'onClick'
+   */
+  mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
+  /**
+   * Callback fired when a "click away" event is detected.
+   */
+  onClickAway: PropTypes.func.isRequired,
+  /**
+   * The touch event to listen to. You can disable the listener by providing `false`.
+   * @default 'onTouchEnd'
+   */
+  touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line
+  ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
+}
 
 const dividerClasses = generateUtilityClasses('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
 
@@ -63318,7 +64551,7 @@ const v6Colors = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$x = ownerState => {
+const useUtilityClasses$w = ownerState => {
   const {
     align,
     gutterBottom,
@@ -63459,7 +64692,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     variantMapping
   };
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  const classes = useUtilityClasses$x(ownerState);
+  const classes = useUtilityClasses$w(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsx(TypographyRoot, {
     as: Component,
     ref: ref,
@@ -63574,7 +64807,7 @@ const overridesResolver$3 = (props, styles) => {
   } = props;
   return [styles.root, ownerState.dense && styles.dense, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];
 };
-const useUtilityClasses$w = ownerState => {
+const useUtilityClasses$v = ownerState => {
   const {
     disabled,
     dense,
@@ -63734,7 +64967,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     divider,
     disableGutters
   };
-  const classes = useUtilityClasses$w(props);
+  const classes = useUtilityClasses$v(props);
   const handleRef = useForkRef(menuItemRef, ref);
   let tabIndex;
   if (!props.disabled) {
@@ -63831,6 +65064,102 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes *
   tabIndex: PropTypes.number
 } : void 0;
 
+function SplitButton(props) {
+  var _a;
+  const {
+    options,
+    defaultSelected,
+    isChangeSelectedAndApplied,
+    onSubmit
+  } = props;
+  const anchorRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : 0);
+  const handleClick = () => {
+    onSubmit && onSubmit(selectedIndex);
+  };
+  const handleMenuItemClick = (_event, index) => {
+    setSelectedIndex(index);
+    isChangeSelectedAndApplied && onSubmit && onSubmit(index);
+    setOpen(false);
+  };
+  const handleToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+  const handleClose = event => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+    children: [jsxRuntimeExports.jsxs(ButtonGroup, {
+      variant: "contained",
+      ref: anchorRef,
+      "aria-label": "Button group with a nested menu",
+      children: [jsxRuntimeExports.jsx(Button, {
+        onClick: handleClick,
+        children: (_a = options[selectedIndex]) === null || _a === void 0 ? void 0 : _a.label
+      }), jsxRuntimeExports.jsx(Button, {
+        size: "small",
+        "aria-controls": open ? 'split-button-menu' : undefined,
+        "aria-expanded": open ? 'true' : undefined,
+        "aria-label": "select merge strategy",
+        "aria-haspopup": "menu",
+        onClick: handleToggle,
+        children: jsxRuntimeExports.jsx(ArrowDropDownIcon$1, {})
+      })]
+    }), jsxRuntimeExports.jsx(Popper, {
+      sx: {
+        zIndex: 1
+      },
+      open: open,
+      anchorEl: anchorRef.current,
+      role: undefined,
+      transition: true,
+      disablePortal: true,
+      children: _ref => {
+        let {
+          TransitionProps,
+          placement
+        } = _ref;
+        return jsxRuntimeExports.jsx(Grow, Object.assign({}, TransitionProps, {
+          style: {
+            transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
+          },
+          children: jsxRuntimeExports.jsx(Paper, {
+            children: jsxRuntimeExports.jsx(ClickAwayListener, {
+              onClickAway: handleClose,
+              children: jsxRuntimeExports.jsx(MenuList, {
+                id: "split-button-menu",
+                autoFocusItem: true,
+                children: options.map((option, index) => jsxRuntimeExports.jsx(MenuItem, {
+                  disabled: option.isDisabled,
+                  selected: index === selectedIndex,
+                  onClick: event => handleMenuItemClick(event, index),
+                  children: option.label
+                }, option.value))
+              })
+            })
+          })
+        }));
+      }
+    })]
+  });
+}
+
+var ImageIcon = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
+  d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2M8.5 13.5l2.5 3.01L14.5 12l4.5 6H5z"
+}), 'Image');
+
+var MenuIcon = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
+  d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
+}), 'Menu');
+
+var PictureAsPdfIcon = createSvgIcon(/*#__PURE__*/jsxRuntimeExports.jsx("path", {
+  d: "M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5zm4-3H19v1h1.5V11H19v2h-1.5V7h3zM9 9.5h1v-1H9zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4zm10 5.5h1v-3h-1z"
+}), 'PictureAsPdf');
+
 /*!
  * @kurkle/color v0.3.4
  * https://github.com/kurkle/color#readme
@@ -150625,7 +151954,7 @@ const DateRangePickerWrapper = props => {
       placement: openDirection === 'up' ? 'top-start' : 'bottom-start',
       popperRef: popperRef,
       "data-testid": "date-range-picker-popper",
-      children: jsxRuntimeExports.jsx(ClickAwayListener, {
+      children: jsxRuntimeExports.jsx(ClickAwayListener$1, {
         onClickAway: handleClosePopover,
         children: jsxRuntimeExports.jsx(Paper$1, {
           elevation: 8,
@@ -151679,7 +153008,7 @@ function useToolbarOwnerState() {
 }
 
 const _excluded$u = ["children", "className", "classes", "toolbarTitle", "hidden", "titleId", "classes", "landscapeDirection"];
-const useUtilityClasses$v = classes => {
+const useUtilityClasses$u = classes => {
   const slots = {
     root: ['root'],
     title: ['title'],
@@ -151758,7 +153087,7 @@ const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersToolbar(inP
     } = props,
     other = _objectWithoutPropertiesLoose$2(props, _excluded$u);
   const ownerState = useToolbarOwnerState();
-  const classes = useUtilityClasses$v(classesProp);
+  const classes = useUtilityClasses$u(classesProp);
   if (hidden) {
     return null;
   }
@@ -152231,7 +153560,7 @@ const usePickerActionsContext = () => {
 };
 
 const _excluded$t = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"];
-const useUtilityClasses$u = classes => {
+const useUtilityClasses$t = classes => {
   const slots = {
     root: ['root'],
     title: ['title']
@@ -152285,7 +153614,7 @@ const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolb
   } = usePickerContext();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
-  const classes = useUtilityClasses$u(classesProp);
+  const classes = useUtilityClasses$t(classesProp);
   const dateText = React.useMemo(() => {
     if (!utils.isValid(value)) {
       return toolbarPlaceholder;
@@ -152543,7 +153872,7 @@ const getActiveElement = (root = document) => {
 const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = '@media (pointer: fine)';
 
 const _excluded$s = ["PaperComponent", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
-const useUtilityClasses$t = classes => {
+const useUtilityClasses$s = classes => {
   const slots = {
     root: ['root'],
     paper: ['paper']
@@ -152778,7 +154107,7 @@ function PickerPopper(inProps) {
       });
     }
   }, [open, viewContainerRole, getCurrentViewMode]);
-  const classes = useUtilityClasses$t(classesProp);
+  const classes = useUtilityClasses$s(classesProp);
   const {
     ownerState: pickerOwnerState,
     rootRefObject
@@ -153624,692 +154953,6 @@ function getPickersLayoutUtilityClass(slot) {
 }
 const pickersLayoutClasses = generateUtilityClasses('MuiPickersLayout', ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'tabs', 'shortcuts']);
 
-function getButtonUtilityClass(slot) {
-  return generateUtilityClass('MuiButton', slot);
-}
-const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge', 'loading', 'loadingWrapper', 'loadingIconPlaceholder', 'loadingIndicator', 'loadingPositionCenter', 'loadingPositionStart', 'loadingPositionEnd']);
-
-/**
- * @ignore - internal component.
- */
-const ButtonGroupContext = /*#__PURE__*/React.createContext({});
-if (process.env.NODE_ENV !== 'production') {
-  ButtonGroupContext.displayName = 'ButtonGroupContext';
-}
-
-/**
- * @ignore - internal component.
- */
-const ButtonGroupButtonContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';
-}
-
-const useUtilityClasses$s = ownerState => {
-  const {
-    color,
-    disableElevation,
-    fullWidth,
-    size,
-    variant,
-    loading,
-    loadingPosition,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root', loading && 'loading', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${capitalize(loadingPosition)}`],
-    startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`],
-    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`],
-    loadingIndicator: ['loadingIndicator'],
-    loadingWrapper: ['loadingWrapper']
-  };
-  const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
-  return {
-    ...classes,
-    // forward the focused, disabled, etc. classes to the ButtonBase
-    ...composedClasses
-  };
-};
-const commonIconStyles = [{
-  props: {
-    size: 'small'
-  },
-  style: {
-    '& > *:nth-of-type(1)': {
-      fontSize: 18
-    }
-  }
-}, {
-  props: {
-    size: 'medium'
-  },
-  style: {
-    '& > *:nth-of-type(1)': {
-      fontSize: 20
-    }
-  }
-}, {
-  props: {
-    size: 'large'
-  },
-  style: {
-    '& > *:nth-of-type(1)': {
-      fontSize: 22
-    }
-  }
-}];
-const ButtonRoot = styled(ButtonBase, {
-  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
-  name: 'MuiButton',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.loading && styles.loading];
-  }
-})(memoTheme(({
-  theme
-}) => {
-  const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
-  const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
-  return {
-    ...theme.typography.button,
-    minWidth: 64,
-    padding: '6px 16px',
-    border: 0,
-    borderRadius: (theme.vars || theme).shape.borderRadius,
-    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
-      duration: theme.transitions.duration.short
-    }),
-    '&:hover': {
-      textDecoration: 'none'
-    },
-    [`&.${buttonClasses.disabled}`]: {
-      color: (theme.vars || theme).palette.action.disabled
-    },
-    variants: [{
-      props: {
-        variant: 'contained'
-      },
-      style: {
-        color: `var(--variant-containedColor)`,
-        backgroundColor: `var(--variant-containedBg)`,
-        boxShadow: (theme.vars || theme).shadows[2],
-        '&:hover': {
-          boxShadow: (theme.vars || theme).shadows[4],
-          // Reset on touch devices, it doesn't add specificity
-          '@media (hover: none)': {
-            boxShadow: (theme.vars || theme).shadows[2]
-          }
-        },
-        '&:active': {
-          boxShadow: (theme.vars || theme).shadows[8]
-        },
-        [`&.${buttonClasses.focusVisible}`]: {
-          boxShadow: (theme.vars || theme).shadows[6]
-        },
-        [`&.${buttonClasses.disabled}`]: {
-          color: (theme.vars || theme).palette.action.disabled,
-          boxShadow: (theme.vars || theme).shadows[0],
-          backgroundColor: (theme.vars || theme).palette.action.disabledBackground
-        }
-      }
-    }, {
-      props: {
-        variant: 'outlined'
-      },
-      style: {
-        padding: '5px 15px',
-        border: '1px solid currentColor',
-        borderColor: `var(--variant-outlinedBorder, currentColor)`,
-        backgroundColor: `var(--variant-outlinedBg)`,
-        color: `var(--variant-outlinedColor)`,
-        [`&.${buttonClasses.disabled}`]: {
-          border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
-        }
-      }
-    }, {
-      props: {
-        variant: 'text'
-      },
-      style: {
-        padding: '6px 8px',
-        color: `var(--variant-textColor)`,
-        backgroundColor: `var(--variant-textBg)`
-      }
-    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
-      props: {
-        color
-      },
-      style: {
-        '--variant-textColor': (theme.vars || theme).palette[color].main,
-        '--variant-outlinedColor': (theme.vars || theme).palette[color].main,
-        '--variant-outlinedBorder': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha$1(theme.palette[color].main, 0.5),
-        '--variant-containedColor': (theme.vars || theme).palette[color].contrastText,
-        '--variant-containedBg': (theme.vars || theme).palette[color].main,
-        '@media (hover: hover)': {
-          '&:hover': {
-            '--variant-containedBg': (theme.vars || theme).palette[color].dark,
-            '--variant-textBg': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette[color].main, theme.palette.action.hoverOpacity),
-            '--variant-outlinedBorder': (theme.vars || theme).palette[color].main,
-            '--variant-outlinedBg': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette[color].main, theme.palette.action.hoverOpacity)
-          }
-        }
-      }
-    })), {
-      props: {
-        color: 'inherit'
-      },
-      style: {
-        color: 'inherit',
-        borderColor: 'currentColor',
-        '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
-        '@media (hover: hover)': {
-          '&:hover': {
-            '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
-            '--variant-textBg': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-            '--variant-outlinedBg': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha$1(theme.palette.text.primary, theme.palette.action.hoverOpacity)
-          }
-        }
-      }
-    }, {
-      props: {
-        size: 'small',
-        variant: 'text'
-      },
-      style: {
-        padding: '4px 5px',
-        fontSize: theme.typography.pxToRem(13)
-      }
-    }, {
-      props: {
-        size: 'large',
-        variant: 'text'
-      },
-      style: {
-        padding: '8px 11px',
-        fontSize: theme.typography.pxToRem(15)
-      }
-    }, {
-      props: {
-        size: 'small',
-        variant: 'outlined'
-      },
-      style: {
-        padding: '3px 9px',
-        fontSize: theme.typography.pxToRem(13)
-      }
-    }, {
-      props: {
-        size: 'large',
-        variant: 'outlined'
-      },
-      style: {
-        padding: '7px 21px',
-        fontSize: theme.typography.pxToRem(15)
-      }
-    }, {
-      props: {
-        size: 'small',
-        variant: 'contained'
-      },
-      style: {
-        padding: '4px 10px',
-        fontSize: theme.typography.pxToRem(13)
-      }
-    }, {
-      props: {
-        size: 'large',
-        variant: 'contained'
-      },
-      style: {
-        padding: '8px 22px',
-        fontSize: theme.typography.pxToRem(15)
-      }
-    }, {
-      props: {
-        disableElevation: true
-      },
-      style: {
-        boxShadow: 'none',
-        '&:hover': {
-          boxShadow: 'none'
-        },
-        [`&.${buttonClasses.focusVisible}`]: {
-          boxShadow: 'none'
-        },
-        '&:active': {
-          boxShadow: 'none'
-        },
-        [`&.${buttonClasses.disabled}`]: {
-          boxShadow: 'none'
-        }
-      }
-    }, {
-      props: {
-        fullWidth: true
-      },
-      style: {
-        width: '100%'
-      }
-    }, {
-      props: {
-        loadingPosition: 'center'
-      },
-      style: {
-        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
-          duration: theme.transitions.duration.short
-        }),
-        [`&.${buttonClasses.loading}`]: {
-          color: 'transparent'
-        }
-      }
-    }]
-  };
-}));
-const ButtonStartIcon = styled('span', {
-  name: 'MuiButton',
-  slot: 'StartIcon',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart, styles[`iconSize${capitalize(ownerState.size)}`]];
-  }
-})(({
-  theme
-}) => ({
-  display: 'inherit',
-  marginRight: 8,
-  marginLeft: -4,
-  variants: [{
-    props: {
-      size: 'small'
-    },
-    style: {
-      marginLeft: -2
-    }
-  }, {
-    props: {
-      loadingPosition: 'start',
-      loading: true
-    },
-    style: {
-      transition: theme.transitions.create(['opacity'], {
-        duration: theme.transitions.duration.short
-      }),
-      opacity: 0
-    }
-  }, {
-    props: {
-      loadingPosition: 'start',
-      loading: true,
-      fullWidth: true
-    },
-    style: {
-      marginRight: -8
-    }
-  }, ...commonIconStyles]
-}));
-const ButtonEndIcon = styled('span', {
-  name: 'MuiButton',
-  slot: 'EndIcon',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd, styles[`iconSize${capitalize(ownerState.size)}`]];
-  }
-})(({
-  theme
-}) => ({
-  display: 'inherit',
-  marginRight: -4,
-  marginLeft: 8,
-  variants: [{
-    props: {
-      size: 'small'
-    },
-    style: {
-      marginRight: -2
-    }
-  }, {
-    props: {
-      loadingPosition: 'end',
-      loading: true
-    },
-    style: {
-      transition: theme.transitions.create(['opacity'], {
-        duration: theme.transitions.duration.short
-      }),
-      opacity: 0
-    }
-  }, {
-    props: {
-      loadingPosition: 'end',
-      loading: true,
-      fullWidth: true
-    },
-    style: {
-      marginLeft: -8
-    }
-  }, ...commonIconStyles]
-}));
-const ButtonLoadingIndicator = styled('span', {
-  name: 'MuiButton',
-  slot: 'LoadingIndicator'
-})(({
-  theme
-}) => ({
-  display: 'none',
-  position: 'absolute',
-  visibility: 'visible',
-  variants: [{
-    props: {
-      loading: true
-    },
-    style: {
-      display: 'flex'
-    }
-  }, {
-    props: {
-      loadingPosition: 'start'
-    },
-    style: {
-      left: 14
-    }
-  }, {
-    props: {
-      loadingPosition: 'start',
-      size: 'small'
-    },
-    style: {
-      left: 10
-    }
-  }, {
-    props: {
-      variant: 'text',
-      loadingPosition: 'start'
-    },
-    style: {
-      left: 6
-    }
-  }, {
-    props: {
-      loadingPosition: 'center'
-    },
-    style: {
-      left: '50%',
-      transform: 'translate(-50%)',
-      color: (theme.vars || theme).palette.action.disabled
-    }
-  }, {
-    props: {
-      loadingPosition: 'end'
-    },
-    style: {
-      right: 14
-    }
-  }, {
-    props: {
-      loadingPosition: 'end',
-      size: 'small'
-    },
-    style: {
-      right: 10
-    }
-  }, {
-    props: {
-      variant: 'text',
-      loadingPosition: 'end'
-    },
-    style: {
-      right: 6
-    }
-  }, {
-    props: {
-      loadingPosition: 'start',
-      fullWidth: true
-    },
-    style: {
-      position: 'relative',
-      left: -10
-    }
-  }, {
-    props: {
-      loadingPosition: 'end',
-      fullWidth: true
-    },
-    style: {
-      position: 'relative',
-      right: -10
-    }
-  }]
-}));
-const ButtonLoadingIconPlaceholder = styled('span', {
-  name: 'MuiButton',
-  slot: 'LoadingIconPlaceholder'
-})({
-  display: 'inline-block',
-  width: '1em',
-  height: '1em'
-});
-const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
-  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
-  const contextProps = React.useContext(ButtonGroupContext);
-  const buttonGroupButtonContextPositionClassName = React.useContext(ButtonGroupButtonContext);
-  const resolvedProps = resolveProps(contextProps, inProps);
-  const props = useDefaultProps({
-    props: resolvedProps,
-    name: 'MuiButton'
-  });
-  const {
-    children,
-    color = 'primary',
-    component = 'button',
-    className,
-    disabled = false,
-    disableElevation = false,
-    disableFocusRipple = false,
-    endIcon: endIconProp,
-    focusVisibleClassName,
-    fullWidth = false,
-    id: idProp,
-    loading = null,
-    loadingIndicator: loadingIndicatorProp,
-    loadingPosition = 'center',
-    size = 'medium',
-    startIcon: startIconProp,
-    type,
-    variant = 'text',
-    ...other
-  } = props;
-  const loadingId = useId(idProp);
-  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/jsxRuntimeExports.jsx(CircularProgress$1, {
-    "aria-labelledby": loadingId,
-    color: "inherit",
-    size: 16
-  });
-  const ownerState = {
-    ...props,
-    color,
-    component,
-    disabled,
-    disableElevation,
-    disableFocusRipple,
-    fullWidth,
-    loading,
-    loadingIndicator,
-    loadingPosition,
-    size,
-    type,
-    variant
-  };
-  const classes = useUtilityClasses$s(ownerState);
-  const startIcon = (startIconProp || loading && loadingPosition === 'start') && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonStartIcon, {
-    className: classes.startIcon,
-    ownerState: ownerState,
-    children: startIconProp || /*#__PURE__*/jsxRuntimeExports.jsx(ButtonLoadingIconPlaceholder, {
-      className: classes.loadingIconPlaceholder,
-      ownerState: ownerState
-    })
-  });
-  const endIcon = (endIconProp || loading && loadingPosition === 'end') && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonEndIcon, {
-    className: classes.endIcon,
-    ownerState: ownerState,
-    children: endIconProp || /*#__PURE__*/jsxRuntimeExports.jsx(ButtonLoadingIconPlaceholder, {
-      className: classes.loadingIconPlaceholder,
-      ownerState: ownerState
-    })
-  });
-  const positionClassName = buttonGroupButtonContextPositionClassName || '';
-  const loader = typeof loading === 'boolean' ?
-  /*#__PURE__*/
-  // use plain HTML span to minimize the runtime overhead
-  jsxRuntimeExports.jsx("span", {
-    className: classes.loadingWrapper,
-    style: {
-      display: 'contents'
-    },
-    children: loading && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonLoadingIndicator, {
-      className: classes.loadingIndicator,
-      ownerState: ownerState,
-      children: loadingIndicator
-    })
-  }) : null;
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonRoot, {
-    ownerState: ownerState,
-    className: clsx(contextProps.className, classes.root, className, positionClassName),
-    component: component,
-    disabled: disabled || loading,
-    focusRipple: !disableFocusRipple,
-    focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
-    ref: ref,
-    type: type,
-    id: loading ? loadingId : idProp,
-    ...other,
-    classes: classes,
-    children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
-  });
-});
-process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
-   * @default 'primary'
-   */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning']), PropTypes.string]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, no elevation is used.
-   * @default false
-   */
-  disableElevation: PropTypes.bool,
-  /**
-   * If `true`, the  keyboard focus ripple is disabled.
-   * @default false
-   */
-  disableFocusRipple: PropTypes.bool,
-  /**
-   * If `true`, the ripple effect is disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
-   */
-  disableRipple: PropTypes.bool,
-  /**
-   * Element placed after the children.
-   */
-  endIcon: PropTypes.node,
-  /**
-   * @ignore
-   */
-  focusVisibleClassName: PropTypes.string,
-  /**
-   * If `true`, the button will take up the full width of its container.
-   * @default false
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * The URL to link to when the button is clicked.
-   * If defined, an `a` element will be used as the root node.
-   */
-  href: PropTypes.string,
-  /**
-   * @ignore
-   */
-  id: PropTypes.string,
-  /**
-   * If `true`, the loading indicator is visible and the button is disabled.
-   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
-   * @default null
-   */
-  loading: PropTypes.bool,
-  /**
-   * Element placed before the children if the button is in loading state.
-   * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default, it renders a `CircularProgress` that is labeled by the button itself.
-   * @default <CircularProgress color="inherit" size={16} />
-   */
-  loadingIndicator: PropTypes.node,
-  /**
-   * The loading indicator can be positioned on the start, end, or the center of the button.
-   * @default 'center'
-   */
-  loadingPosition: PropTypes.oneOf(['center', 'end', 'start']),
-  /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   * @default 'medium'
-   */
-  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
-  /**
-   * Element placed before the children.
-   */
-  startIcon: PropTypes.node,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * @ignore
-   */
-  type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]),
-  /**
-   * The variant to use.
-   * @default 'text'
-   */
-  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
-} : void 0;
-
 function getDialogActionsUtilityClass(slot) {
   return generateUtilityClass('MuiDialogActions', slot);
 }
@@ -206515,4 +207158,4 @@ var index_es = /*#__PURE__*/Object.freeze({
     vectorsRatio: vectorsRatio
 });
 
-export { Container$n as Action, AdvancedSearch, AppContext, AppProvider, AsyncAutocomplete, AwingContext, BarLineChart, BoxResizableSplit, ButtonDateRangePicker, ButtonSelect, CircularProgress, DrawerBase as ClassicBaseDrawer, DrawerWrapper$1 as ClassicDrawer, CloseAction, ContentHeader, ControlPanels, CopyButton, CronTab, DataForm, DataGrid, DataGridGroup, DataGridSortType, InputFactory as DataInput, DateAutoFormat, Container$g as DatePicker, DateRangePicker$1 as DateRangePicker, Container$h as DateRangePickerOld, EnhancedDialog as DeprecatedEnhancedDialog, CreateDirectory as DirectoryForm, PermissionWarpper as DirectoryPermission, DirectoryRoot, DirectorySystem, DirectoryTree, DrawerWrapper as Drawer, DrawerNavigate, DrawerStateEnum, Container$m as EnhancedAutoComplete, EnumFieldInputType, EnumSelectedPlaceType, FIELD_TYPE, FilterNotification, FilterOperationType, FilterTreeView, FooterContainer as Footer, GoogleMap, GroupSystem, GroupTable, HierarchyTree, I18nProvider, INT_NUMBER_LIMIT, Container as Layout, Notifications as LayoutNotifications, LogicExpressionInput as LogicExpression, LogicalOperatorType, MemoWrap, MonacoEditor$1 as MonacoEditor, MultipleChoice, MultipleHierarchicalChoice, NoData, NotificationConfig, NotificationFilter as NotificationObjectFilter, NumberFormat, AsynchronousAutocomplete as OldAsyncAutoComplete, Page, PageManagement, Pagination, ParamConfigurationInputs, PieChart, PlaceFilter, RoleSystem, RoleTagSystem, SchemaSystem, SearchBox, Sharing as SharingSystem, ShowTreeItem, SimpleTreeItemWrapper, SortEnumType, Sortable, SortableTree, StatisticsCommon as Statistics, SubscriptionConfig, TIMELINE_TYPE, TYPE_CHART, TYPE_FILTERS, TabLabel, TableCellEditable$1 as TableCellEditable, TableEditable$1 as TableEditable, TableEditableBody$1 as TableEditableBody, TableEditable as TableEditableCollapsible, TableEditableBody as TableEditableCollapsibleBody, TableCellEditable as TableEditableCollapsibleCell, TableHeader as TableEditableCollapsibleTableHeader, TopBarActions as TableEditableCollapsibleTopBarActions, TableHeader$1 as TableHeader, TablePaginationActions, Template as TemplateConfig, ThemeProvider, ToolbarLayout as Toolbar, TopBarActions$1 as TopBarActions, TreeItemWithAction, User as UserSystem, WMAPEcalculator, WorkflowFeature as WorkflowSystem, WorkspaceType, Wrapper, arrayIsNotEmptyValid, calculateValue, calculatorDirectoryIdRoot, changeToAlias, checkValidMacAddress, checkValidStringListAP, checkValidUrl, colorValid, containsOnlyDigits, convertArrayFiltersToCondition, convertArrayToObject, convertDataSetPattern, convertDateTimeToTimestamp, convertFilterExpressionToCondition, convertFormulaToBinaryTree, convertTimeLine, convertTimelineToDateTime, convertTimestampToDateTime, convertToPostfix, darkTheme, dateRangeValid, dateTimeToString, dateToString, dateToStringDDMMYYYY, dateValid, download, downloadWithDataSet, emailValid, fillMissingDates, flattenTree, formatChartNumber, formatJSON$1 as formatJSON, formatNumberByLocale, formatNumberWithLanguage, generateUUID, getAllStringsBetweenBraces, getCookie, getDefaultValues, getGUID, getPrecedence, getQueryVariable, getRandomKey, getRoutePath, getStartOfDay, getToday, handleExportExcel, i18n as i18nLib, isOperand, isOperator, lightTheme, nameExportStandard, notNullValid, numberNotNullValid, numberOnlyValid, numberPercentageNotNullValid, off, offlinePaginate, parseJSON, passwordValid, positiveNumberNotNullValid, pub, replaceFieldsValue, roundDecimalNumber, setObject, stringNotNullValid, stringNullableValid, sub, textValidation, timestampToStringDDMMYYYY, toCapitalize, tokenize, updateGUID, updateObjectFields, urlValid, useAppHelper, useAwing, useDrawer, useGetContext$8 as useGetContext, useGetData, usePath, validateNumber };
+export { Container$n as Action, AdvancedSearch, AppContext, AppProvider, AsyncAutocomplete, AwingContext, BarLineChart, BoxResizableSplit, ButtonDateRangePicker, ButtonSelect, SplitButton as ButtonSplit, CircularProgress, DrawerBase as ClassicBaseDrawer, DrawerWrapper$1 as ClassicDrawer, CloseAction, ContentHeader, ControlPanels, CopyButton, CronTab, DataForm, DataGrid, DataGridGroup, DataGridSortType, InputFactory as DataInput, DateAutoFormat, Container$g as DatePicker, DateRangePicker$1 as DateRangePicker, Container$h as DateRangePickerOld, EnhancedDialog as DeprecatedEnhancedDialog, CreateDirectory as DirectoryForm, PermissionWarpper as DirectoryPermission, DirectoryRoot, DirectorySystem, DirectoryTree, DrawerWrapper as Drawer, DrawerNavigate, DrawerStateEnum, Container$m as EnhancedAutoComplete, EnumFieldInputType, EnumSelectedPlaceType, FIELD_TYPE, FilterNotification, FilterOperationType, FilterTreeView, FooterContainer as Footer, GoogleMap, GroupSystem, GroupTable, HierarchyTree, I18nProvider, INT_NUMBER_LIMIT, Container as Layout, Notifications as LayoutNotifications, LogicExpressionInput as LogicExpression, LogicalOperatorType, MemoWrap, MonacoEditor$1 as MonacoEditor, MultipleChoice, MultipleHierarchicalChoice, NoData, NotificationConfig, NotificationFilter as NotificationObjectFilter, NumberFormat, AsynchronousAutocomplete as OldAsyncAutoComplete, Page, PageManagement, Pagination, ParamConfigurationInputs, PieChart, PlaceFilter, RoleSystem, RoleTagSystem, SchemaSystem, SearchBox, Sharing as SharingSystem, ShowTreeItem, SimpleTreeItemWrapper, SortEnumType, Sortable, SortableTree, StatisticsCommon as Statistics, SubscriptionConfig, TIMELINE_TYPE, TYPE_CHART, TYPE_FILTERS, TabLabel, TableCellEditable$1 as TableCellEditable, TableEditable$1 as TableEditable, TableEditableBody$1 as TableEditableBody, TableEditable as TableEditableCollapsible, TableEditableBody as TableEditableCollapsibleBody, TableCellEditable as TableEditableCollapsibleCell, TableHeader as TableEditableCollapsibleTableHeader, TopBarActions as TableEditableCollapsibleTopBarActions, TableHeader$1 as TableHeader, TablePaginationActions, Template as TemplateConfig, ThemeProvider, ToolbarLayout as Toolbar, TopBarActions$1 as TopBarActions, TreeItemWithAction, User as UserSystem, WMAPEcalculator, WorkflowFeature as WorkflowSystem, WorkspaceType, Wrapper, arrayIsNotEmptyValid, calculateValue, calculatorDirectoryIdRoot, changeToAlias, checkValidMacAddress, checkValidStringListAP, checkValidUrl, colorValid, containsOnlyDigits, convertArrayFiltersToCondition, convertArrayToObject, convertDataSetPattern, convertDateTimeToTimestamp, convertFilterExpressionToCondition, convertFormulaToBinaryTree, convertTimeLine, convertTimelineToDateTime, convertTimestampToDateTime, convertToPostfix, darkTheme, dateRangeValid, dateTimeToString, dateToString, dateToStringDDMMYYYY, dateValid, download, downloadWithDataSet, emailValid, fillMissingDates, flattenTree, formatChartNumber, formatJSON$1 as formatJSON, formatNumberByLocale, formatNumberWithLanguage, generateUUID, getAllStringsBetweenBraces, getCookie, getDefaultValues, getGUID, getPrecedence, getQueryVariable, getRandomKey, getRoutePath, getStartOfDay, getToday, handleExportExcel, i18n as i18nLib, isOperand, isOperator, lightTheme, nameExportStandard, notNullValid, numberNotNullValid, numberOnlyValid, numberPercentageNotNullValid, off, offlinePaginate, parseJSON, passwordValid, positiveNumberNotNullValid, pub, replaceFieldsValue, roundDecimalNumber, setObject, stringNotNullValid, stringNullableValid, sub, textValidation, timestampToStringDDMMYYYY, toCapitalize, tokenize, updateGUID, updateObjectFields, urlValid, useAppHelper, useAwing, useDrawer, useGetContext$8 as useGetContext, useGetData, usePath, validateNumber };