@unifiedsoftware/react-components 1.0.8 → 1.0.10

package/dist/index.mjs

@@ -1,7 +1,1088 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value2) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value: value2 }) : obj[key] = value2;
+var __spreadValues = (a, b) => {
+  for (var prop2 in b || (b = {}))
+    if (__hasOwnProp.call(b, prop2))
+      __defNormalProp(a, prop2, b[prop2]);
+  if (__getOwnPropSymbols)
+    for (var prop2 of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop2))
+        __defNormalProp(a, prop2, b[prop2]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/utils.js
+var isPresent = function(value2) {
+  return value2 !== null && value2 !== void 0;
+};
+var isBlank = function(value2) {
+  return value2 === null || value2 === void 0;
+};
+var isArray = function(value2) {
+  return Array.isArray(value2);
+};
+var isFunction = function(value2) {
+  return typeof value2 === "function";
+};
+var isString = function(value2) {
+  return typeof value2 === "string";
+};
+var isNullOrEmptyString = function(value2) {
+  return isBlank(value2) || value2.trim().length === 0;
+};
+var isNotNullOrEmptyString = function(value2) {
+  return !isNullOrEmptyString(value2);
+};
+var isNumeric = function(value2) {
+  return !isNaN(value2 - parseFloat(value2));
+};
+var isDate = function(value2) {
+  return value2 && value2.getTime;
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/filtering/filter-descriptor.interface.js
+var isCompositeFilterDescriptor = function(source) {
+  return isPresent(source.filters);
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/funcs.js
+var ifElse = function(predicate, right, left) {
+  return function(value2) {
+    return predicate(value2) ? right(value2) : left(value2);
+  };
+};
+var compose = function() {
+  var args = [];
+  for (var _i = 0; _i < arguments.length; _i++) {
+    args[_i] = arguments[_i];
+  }
+  return function(data) {
+    return args.reduceRight(function(acc, curr) {
+      return curr(acc);
+    }, data);
+  };
+};
+var constant = function(x) {
+  return function() {
+    return x;
+  };
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/filter-serialization.common.js
+var toUTC = function(date) {
+  return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
+};
+var isDateValue = function(x) {
+  return isDate(x.value);
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/filtering/filter.operators.js
+var operatorMap = function(key) {
+  return {
+    "!=": "neq",
+    "<": "lt",
+    "<=": "lte",
+    "==": "eq",
+    ">": "gt",
+    ">=": "gte",
+    equal: "eq",
+    equals: "eq",
+    equalto: "eq",
+    ge: "gte",
+    greater: "gt",
+    greaterthan: "gt",
+    greaterthanequal: "gte",
+    isempty: "isempty",
+    isequalto: "eq",
+    isgreaterthan: "gt",
+    isgreaterthanorequalto: "gte",
+    islessthan: "lt",
+    islessthanorequalto: "lte",
+    isnotempty: "isnotempty",
+    isnotequalto: "neq",
+    isnull: "isnull",
+    le: "lte",
+    less: "lt",
+    lessthan: "lt",
+    lessthanequal: "lte",
+    ne: "neq",
+    notequal: "neq",
+    notequals: "neq",
+    notequalto: "neq",
+    notsubstringof: "doesnotcontain"
+  }[key.toLowerCase()] || key;
+};
+var normalizeOperator = function(descriptor) {
+  if (descriptor.filters) {
+    descriptor.filters = descriptor.filters.map(function(filter2) {
+      var result = Object.assign({}, filter2);
+      if (!isCompositeFilterDescriptor(filter2) && isString(filter2.operator)) {
+        result.operator = operatorMap(filter2.operator);
+      }
+      if (isCompositeFilterDescriptor(filter2)) {
+        normalizeOperator(result);
+      }
+      return result;
+    });
+  }
+};
+var normalizeDescriptor = function(descriptor) {
+  if (!isCompositeFilterDescriptor(descriptor)) {
+    return {
+      filters: isArray(descriptor) ? descriptor : [descriptor],
+      logic: "and"
+    };
+  }
+  return Object.assign({}, descriptor);
+};
+var normalizeFilters = function(descriptor) {
+  if (isPresent(descriptor)) {
+    descriptor = normalizeDescriptor(descriptor);
+    normalizeOperator(descriptor);
+  }
+  return descriptor;
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/odata.operators.js
+var emptyString = constant("");
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/accessor.js
+var getterCache = {};
+var FIELD_REGEX = /\[(?:(\d+)|['"](.*?)['"])\]|((?:(?!\[.*?\]|\.).)+)/g;
+getterCache["undefined"] = function(obj) {
+  return obj;
+};
+var getter = function(field, safe) {
+  var key = field + safe;
+  if (getterCache[key]) {
+    return getterCache[key];
+  }
+  var fields = [];
+  field.replace(FIELD_REGEX, function(_, index, indexAccessor, field2) {
+    fields.push(isPresent(index) ? index : indexAccessor || field2);
+    return void 0;
+  });
+  getterCache[key] = function(obj) {
+    var result = obj;
+    for (var idx = 0; idx < fields.length; idx++) {
+      result = result[fields[idx]];
+      if (!isPresent(result) && safe) {
+        return result;
+      }
+    }
+    return result;
+  };
+  return getterCache[key];
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/mvc/operators.js
+var pairwise = function(key) {
+  return function(value2) {
+    return [key, value2];
+  };
+};
+var empty = function() {
+  return null;
+};
+var isNotEmptyArray = function(value2) {
+  return isPresent(value2) && isArray(value2) && value2.length > 0;
+};
+var has = function(accessor) {
+  return function(value2) {
+    return isPresent(accessor(value2));
+  };
+};
+var isNotEmpty = function(accessor) {
+  return function(value2) {
+    return isNotEmptyArray(accessor(value2));
+  };
+};
+var runOrEmpty = function(predicate, fn) {
+  return ifElse(predicate, fn, empty);
+};
+var calcPage = function(_a) {
+  var skip3 = _a.skip, take3 = _a.take;
+  return Math.floor((skip3 || 0) / take3) + 1;
+};
+var formatDescriptors = function(accessor, formatter) {
+  return function(state) {
+    return accessor(state).map(formatter).join("~");
+  };
+};
+var removeAfter = function(what) {
+  return function(str) {
+    return str.slice(0, str.indexOf(what));
+  };
+};
+var replace = function(patterns) {
+  return compose.apply(void 0, patterns.map(function(_a) {
+    var left = _a[0], right = _a[1];
+    return function(s) {
+      return s.replace(new RegExp(left, "g"), right);
+    };
+  }));
+};
+var sanitizeDateLiterals = replace([['"', ""], [":", "-"]]);
+var removeAfterDot = removeAfter(".");
+var directionFormatter = function(_a) {
+  var field = _a.field, _b = _a.dir, dir = _b === void 0 ? "asc" : _b;
+  return field + "-" + dir;
+};
+var aggregateFormatter = function(_a) {
+  var field = _a.field, aggregate = _a.aggregate;
+  return field + "-" + aggregate;
+};
+var take = getter("take");
+var aggregates = getter("aggregates");
+var skip = getter("skip");
+var group = getter("group");
+var sort = getter("sort", true);
+var formatSort = formatDescriptors(sort, directionFormatter);
+var formatGroup = formatDescriptors(group, directionFormatter);
+var formatAggregates = formatDescriptors(aggregates, aggregateFormatter);
+var prefixDateValue = function(value2) {
+  return "datetime'" + value2 + "'";
+};
+var formatDateValue = compose(prefixDateValue, removeAfterDot, sanitizeDateLiterals, JSON.stringify, toUTC);
+var formatDate = function(_a) {
+  var field = _a.field, value2 = _a.value, ignoreCase = _a.ignoreCase, operator = _a.operator;
+  return {
+    value: formatDateValue(value2),
+    field,
+    ignoreCase,
+    operator
+  };
+};
+var normalizeSort = function(state) {
+  return Object.assign({}, state, {
+    sort: (sort(state) || []).filter(function(_a) {
+      var dir = _a.dir;
+      return isNotNullOrEmptyString(dir);
+    })
+  });
+};
+var transformSkip = compose(pairwise("page"), calcPage);
+var transformTake = compose(pairwise("pageSize"), take);
+var transformGroup = compose(pairwise("group"), formatGroup);
+var transformSort = compose(pairwise("sort"), formatSort);
+var transformAggregates = compose(pairwise("aggregate"), formatAggregates);
+var serializePage = runOrEmpty(has(skip), transformSkip);
+var serializePageSize = runOrEmpty(has(take), transformTake);
+var serializeGroup = runOrEmpty(isNotEmpty(group), transformGroup);
+var serializeAggregates = runOrEmpty(has(aggregates), transformAggregates);
+var serializeSort = compose(runOrEmpty(isNotEmpty(sort), transformSort), normalizeSort);
+var filterFormatter = function(_a) {
+  var field = _a.field, operator = _a.operator, value2 = _a.value;
+  return field + "~" + operator + "~" + value2;
+};
+var dateFormatter = ifElse(isDateValue, compose(filterFormatter, formatDate), filterFormatter);
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/mvc/deserialization.js
+var set = function(field, target, value2) {
+  target[field] = value2;
+  return target;
+};
+var toCamelCase = function(str) {
+  return str.replace(/(^[A-Z])/g, function(_, g1) {
+    return g1.toLowerCase();
+  });
+};
+var prop = function(fieldName) {
+  return function(obj) {
+    var value2 = obj[fieldName];
+    if (isPresent(value2)) {
+      return value2;
+    }
+    return obj[toCamelCase(fieldName)];
+  };
+};
+var member = prop("Member");
+var aggregateMethodName = prop("AggregateMethodName");
+var value = prop("Value");
+var convert = function(mapper) {
+  return function(values) {
+    return Object.keys(values).reduce(mapper.bind(null, values), {});
+  };
+};
+var translateAggregate = convert(function(source, acc, field) {
+  return set(field.toLowerCase(), acc, source[field]);
+});
+var translateAggregates = convert(function(source, acc, field) {
+  return set(field, acc, translateAggregate(source[field]));
+});
+var valueOrDefault = function(value2, defaultValue) {
+  return isPresent(value2) ? value2 : defaultValue;
+};
+var normalizeGroup = function(group2) {
+  return {
+    aggregates: group2.Aggregates || group2.aggregates,
+    field: group2.Member || group2.member || group2.field,
+    hasSubgroups: group2.HasSubgroups || group2.hasSubgroups || false,
+    items: group2.Items || group2.items,
+    value: valueOrDefault(group2.Key, valueOrDefault(group2.key, group2.value))
+  };
+};
+var translateGroup = compose(function(_a) {
+  var field = _a.field, hasSubgroups = _a.hasSubgroups, value2 = _a.value, aggregates2 = _a.aggregates, items = _a.items;
+  return {
+    aggregates: translateAggregates(aggregates2),
+    field,
+    items: hasSubgroups ? items.map(translateGroup) : items,
+    value: value2
+  };
+}, normalizeGroup);
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/transducers.js
+var map = function(transform) {
+  return function(reduce) {
+    return function(acc, curr, index) {
+      return reduce(acc, transform(curr, index));
+    };
+  };
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/grouping/aggregate.operators.js
+var identity2 = map(function(x) {
+  return x;
+});
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/filtering/filter-no-eval.js
+var logic = {
+  "or": {
+    concat: function(acc, fn) {
+      return function(a) {
+        return acc(a) || fn(a);
+      };
+    },
+    identity: function() {
+      return false;
+    }
+  },
+  "and": {
+    concat: function(acc, fn) {
+      return function(a) {
+        return acc(a) && fn(a);
+      };
+    },
+    identity: function() {
+      return true;
+    }
+  }
+};
+var operatorsMap = {
+  contains: function(a, b) {
+    return (a || "").indexOf(b) >= 0;
+  },
+  doesnotcontain: function(a, b) {
+    return (a || "").indexOf(b) === -1;
+  },
+  doesnotendwith: function(a, b) {
+    return (a || "").indexOf(b, (a || "").length - (b || "").length) < 0;
+  },
+  doesnotstartwith: function(a, b) {
+    return (a || "").lastIndexOf(b, 0) === -1;
+  },
+  endswith: function(a, b) {
+    return (a || "").indexOf(b, (a || "").length - (b || "").length) >= 0;
+  },
+  eq: function(a, b) {
+    return a === b;
+  },
+  gt: function(a, b) {
+    return a > b;
+  },
+  gte: function(a, b) {
+    return a >= b;
+  },
+  isempty: function(a) {
+    return a === "";
+  },
+  isnotempty: function(a) {
+    return a !== "";
+  },
+  isnotnull: function(a) {
+    return isPresent(a);
+  },
+  isnull: function(a) {
+    return isBlank(a);
+  },
+  lt: function(a, b) {
+    return a < b;
+  },
+  lte: function(a, b) {
+    return a <= b;
+  },
+  neq: function(a, b) {
+    return a != b;
+  },
+  startswith: function(a, b) {
+    return (a || "").lastIndexOf(b, 0) === 0;
+  }
+};
+var dateRegExp = /^\/Date\((.*?)\)\/$/;
+var convertValue = function(value2, ignoreCase) {
+  if (value2 != null && isString(value2)) {
+    var date = dateRegExp.exec(value2);
+    if (date) {
+      return (/* @__PURE__ */ new Date(+date[1])).getTime();
+    } else if (ignoreCase) {
+      return value2.toLowerCase();
+    }
+  } else if (value2 != null && isDate(value2)) {
+    return value2.getTime();
+  }
+  return value2;
+};
+var typedGetter = function(prop2, value2, ignoreCase) {
+  if (!isPresent(value2)) {
+    return prop2;
+  }
+  var acc = prop2;
+  if (isString(value2)) {
+    var date = dateRegExp.exec(value2);
+    if (date) {
+      value2 = /* @__PURE__ */ new Date(+date[1]);
+    } else {
+      acc = function(a) {
+        var x = prop2(a);
+        if (typeof x === "string" && ignoreCase) {
+          return x.toLowerCase();
+        } else {
+          return isNumeric(x) ? x + "" : x;
+        }
+      };
+    }
+  }
+  if (isDate(value2)) {
+    return function(a) {
+      var x = acc(a);
+      return isDate(x) ? x.getTime() : x;
+    };
+  }
+  return acc;
+};
+var transformFilter = function(_a) {
+  var field = _a.field, ignoreCase = _a.ignoreCase, value2 = _a.value, operator = _a.operator;
+  field = !isPresent(field) ? function(a) {
+    return a;
+  } : field;
+  ignoreCase = isPresent(ignoreCase) ? ignoreCase : true;
+  var itemProp = typedGetter(isFunction(field) ? field : getter(field, true), value2, ignoreCase);
+  value2 = convertValue(value2, ignoreCase);
+  var op = isFunction(operator) ? operator : operatorsMap[operator];
+  return function(a) {
+    return op(itemProp(a), value2, ignoreCase);
+  };
+};
+var transformCompositeFilter = function(filter2) {
+  var combiner = logic[filter2.logic];
+  return filter2.filters.filter(isPresent).map(function(x) {
+    return isCompositeFilterDescriptor(x) ? transformCompositeFilter(x) : transformFilter(x);
+  }).reduce(combiner.concat, combiner.identity);
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/filtering/filter-expression.factory.js
+var compileFilter = function(descriptor) {
+  if (!descriptor || descriptor.filters.length === 0) {
+    return function() {
+      return true;
+    };
+  }
+  return transformCompositeFilter(descriptor);
+};
+var filterBy = function(data, descriptor) {
+  if (!isPresent(descriptor) || isCompositeFilterDescriptor(descriptor) && descriptor.filters.length === 0) {
+    return data;
+  }
+  return data.filter(compileFilter(normalizeFilters(descriptor)));
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/grouping/group.operators.js
+var identity3 = map(function(x) {
+  return x;
+});
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/filtering/operators.enum.js
+var FilterOperator;
+(function(FilterOperator2) {
+  FilterOperator2["Contains"] = "contains";
+  FilterOperator2["DoesNotContain"] = "doesnotcontain";
+  FilterOperator2["DoesNotEndWith"] = "doesnotendwith";
+  FilterOperator2["DoesNotStartWith"] = "doesnotstartwith";
+  FilterOperator2["EndsWith"] = "endswith";
+  FilterOperator2["EqualTo"] = "eq";
+  FilterOperator2["GreaterThan"] = "gt";
+  FilterOperator2["GreaterThanOrEqual"] = "gte";
+  FilterOperator2["IsEmpty"] = "isempty";
+  FilterOperator2["IsNotEmpty"] = "isnotempty";
+  FilterOperator2["IsNotNull"] = "isnotnull";
+  FilterOperator2["IsNull"] = "isnull";
+  FilterOperator2["LessThan"] = "lt";
+  FilterOperator2["LessThanOrEqual"] = "lte";
+  FilterOperator2["NotEqualTo"] = "neq";
+  FilterOperator2["StartsWith"] = "startswith";
+})(FilterOperator || (FilterOperator = {}));
+
+// src/components/Select/SelectClient.tsx
+import {
+  ComboBox
+} from "@progress/kendo-react-dropdowns";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var SelectClient = ({
+  value: valueProp,
+  data: propData,
+  filter: filterProp,
+  keyField: keyField2 = "key",
+  textField: textField3 = "text",
+  placeholder,
+  virtual,
+  filterable,
+  disabled,
+  loading,
+  className,
+  onChange,
+  onFilterChange
+}) => {
+  const [value2, setValue] = useState(valueProp);
+  const [filter2, setFilter] = useState(filterProp);
+  const handleChange = (event) => {
+    const value3 = event.target.value || null;
+    if (valueProp !== void 0) {
+      onChange(value3);
+    } else {
+      setValue(value3);
+    }
+  };
+  const pageSize3 = virtual == null ? void 0 : virtual.pageSize;
+  const filteredData = useRef([]);
+  const [state, setState] = useState({
+    skip: 0,
+    total: propData.total,
+    subsetData: propData.items.slice(0, pageSize3)
+  });
+  const handleFilterChange = (event) => {
+    if (pageSize3) {
+      filteredData.current = filterBy(propData.items.slice(), event.filter);
+      const data = filteredData.current.slice(0, pageSize3);
+      setState({
+        subsetData: data,
+        skip: 0,
+        total: filteredData.current.length
+      });
+    }
+    const filter3 = event.filter.value;
+    if (filterProp !== void 0) {
+      onFilterChange == null ? void 0 : onFilterChange(filter3);
+    } else {
+      setFilter(filter3);
+    }
+  };
+  const handlePageChange = (event) => {
+    if (pageSize3) {
+      const skip3 = event.page.skip;
+      const take3 = event.page.take;
+      const newSubsetData = filteredData.current.slice(skip3, skip3 + take3);
+      setState(__spreadProps(__spreadValues({}, state), { subsetData: newSubsetData, skip: skip3 }));
+    }
+  };
+  useEffect(() => {
+    if (valueProp !== void 0) {
+      setValue(valueProp);
+    }
+  }, [valueProp]);
+  useEffect(() => {
+    setFilter(filterProp);
+  }, [filterProp]);
+  useEffect(() => {
+    if (pageSize3) {
+      filteredData.current = propData.items.slice();
+    }
+  }, [propData]);
+  return /* @__PURE__ */ jsx(
+    ComboBox,
+    {
+      value: value2,
+      data: pageSize3 ? state.subsetData : propData.items,
+      placeholder,
+      dataItemKey: keyField2,
+      textField: textField3,
+      filterable,
+      filter: filter2,
+      virtual: pageSize3 ? {
+        total: state.total,
+        pageSize: pageSize3,
+        skip: state.skip
+      } : void 0,
+      disabled,
+      loading,
+      className,
+      onChange: handleChange,
+      onFilterChange: handleFilterChange,
+      onPageChange: handlePageChange
+    }
+  );
+};
+var SelectClient_default = SelectClient;
+
+// src/components/Select/SelectServer.tsx
+import {
+  ComboBox as ComboBox2
+} from "@progress/kendo-react-dropdowns";
+import { cloneElement, useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var textField = "ContactName";
+var emptyItem = { [textField]: "loading ...", CustomerID: 0 };
+var pageSize = 10;
+var loadingData = [];
+while (loadingData.length < pageSize) {
+  loadingData.push(__spreadValues({}, emptyItem));
+}
+var SelectServer = ({
+  data: dataProp,
+  value: valueProp,
+  keyField: keyField2 = "key",
+  textField: textField3 = "text",
+  placeholder,
+  virtual,
+  filterable,
+  filter: filterProp = "",
+  disabled,
+  loading,
+  className,
+  onChange,
+  onDataChange,
+  onFilterChange,
+  getData,
+  renderItem
+}) => {
+  var _a;
+  const dataCaching = useRef2([]);
+  const pendingRequest = useRef2();
+  const requestStarted = useRef2(false);
+  const emptyItem3 = { [keyField2]: 0, [textField3]: "loading ..." };
+  const [loadingData3, setLoadingData] = useState2([]);
+  const [data, setData] = useState2(dataProp.items);
+  const [total, setTotal] = useState2(0);
+  const [value2, setValue] = useState2(valueProp);
+  const [filter2, setFilter] = useState2(filterProp);
+  const pageSize3 = (_a = virtual == null ? void 0 : virtual.pageSize) != null ? _a : 10;
+  const skipRef = useRef2(0);
+  const resetCach = () => {
+    dataCaching.current.length = 0;
+  };
+  const requestData = useCallback((state) => {
+    const { skip: skip3 } = state;
+    if (requestStarted.current) {
+      clearTimeout(pendingRequest.current);
+      pendingRequest.current = setTimeout(() => {
+        requestData(state);
+      }, 50);
+      return;
+    }
+    requestStarted.current = true;
+    getData(state).then(({ items, total: total2 }) => {
+      items.forEach((item, index) => {
+        dataCaching.current[index + skip3] = item;
+      });
+      if (skip3 === skipRef.current) {
+        setData(items);
+        setTotal(total2);
+        onDataChange == null ? void 0 : onDataChange({ items, total: total2 });
+      }
+      requestStarted.current = false;
+    }).catch(() => {
+      requestStarted.current = false;
+    });
+  }, []);
+  const handleFilterChange = useCallback((event) => {
+    const filter3 = event.filter.value;
+    if (filterProp !== void 0) {
+      onFilterChange == null ? void 0 : onFilterChange(filter3);
+    } else {
+      setFilter(filter3);
+    }
+    resetCach();
+    requestData({ skip: 0, filter: filter3 });
+    setData(loadingData3);
+    skipRef.current = 0;
+  }, []);
+  const shouldRequestData = useCallback((skip3) => {
+    for (let i = 0; i < pageSize3; i++) {
+      if (!dataCaching.current[skip3 + i]) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+  const getCachedData = useCallback((skip3) => {
+    const data2 = [];
+    for (let i = 0; i < pageSize3; i++) {
+      data2.push(dataCaching.current[i + skip3] || emptyItem3);
+    }
+    return data2;
+  }, []);
+  const pageChange = useCallback(
+    (event) => {
+      if (filter2 !== void 0) {
+        const newSkip = event.page.skip;
+        if (shouldRequestData(newSkip)) {
+          requestData({ skip: newSkip, filter: filter2 });
+        }
+        const data2 = getCachedData(newSkip);
+        setData(data2);
+        skipRef.current = newSkip;
+      }
+    },
+    [getCachedData, requestData, shouldRequestData, filter2]
+  );
+  const handleChange = useCallback((event) => {
+    const value3 = event.target.value;
+    if (value3 && value3[textField3] === emptyItem3[textField3]) {
+      return;
+    }
+    if (valueProp !== void 0) {
+      onChange(value3);
+    } else {
+      setValue(value3);
+    }
+  }, []);
+  const handleItemRender = (li, itemProps) => {
+    const itemChildren = renderItem == null ? void 0 : renderItem(itemProps.dataItem);
+    if (!itemChildren)
+      return cloneElement(li, li.props);
+    return cloneElement(li, li.props, itemChildren);
+  };
+  useEffect2(() => {
+    const pageSize4 = 10;
+    const loadingData4 = [];
+    while (loadingData4.length < pageSize4) {
+      loadingData4.push(emptyItem3);
+    }
+    setLoadingData(loadingData4);
+  }, []);
+  useEffect2(() => {
+    if (valueProp !== void 0) {
+      setValue(valueProp);
+    }
+  }, [valueProp]);
+  useEffect2(() => {
+    if (filterProp !== void 0) {
+      setFilter(filterProp);
+    }
+  }, [filterProp]);
+  useEffect2(() => {
+    requestData({ skip: 0, filter: filter2 });
+    return () => {
+      resetCach();
+    };
+  }, [filter2, requestData]);
+  useEffect2(() => {
+    setData(dataProp.items);
+  }, [dataProp]);
+  return /* @__PURE__ */ jsx2(
+    ComboBox2,
+    {
+      data,
+      value: value2,
+      placeholder,
+      dataItemKey: keyField2,
+      textField: textField3,
+      filterable,
+      onFilterChange: handleFilterChange,
+      virtual: {
+        pageSize: pageSize3,
+        skip: skipRef.current,
+        total
+      },
+      disabled,
+      loading,
+      className,
+      onChange: handleChange,
+      onPageChange: pageChange,
+      itemRender: handleItemRender
+    }
+  );
+};
+var SelectServer_default = SelectServer;
+
+// src/components/Select/Select.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Select = (props) => {
+  return props.filterMode === "client" ? /* @__PURE__ */ jsx3(SelectClient_default, __spreadValues({}, props)) : /* @__PURE__ */ jsx3(SelectServer_default, __spreadValues({}, props));
+};
+var Select_default = Select;
+
+// src/components/MultiSelect/MultiSelectClient.tsx
+import {
+  MultiSelect
+} from "@progress/kendo-react-dropdowns";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var textField2 = "text";
+var keyField = "key";
+var emptyItem2 = { [textField2]: "loading ...", [keyField]: 0 };
+var pageSize2 = 10;
+var loadingData2 = [];
+while (loadingData2.length < pageSize2) {
+  loadingData2.push(__spreadValues({}, emptyItem2));
+}
+var SelectClient2 = ({
+  data: dataProp,
+  value: valueProp,
+  keyField: keyField2 = "key",
+  textField: textField3 = "text",
+  placeholder,
+  virtual,
+  filterable,
+  filter: filterProp,
+  disabled,
+  loading,
+  className,
+  onChange,
+  onFilterChange
+}) => {
+  const [value2, setValue] = useState3(valueProp);
+  const [filter2, setFilter] = useState3(filterProp);
+  const handleChange = (event) => {
+    onChange(event.target.value);
+  };
+  const pageSize3 = virtual == null ? void 0 : virtual.pageSize;
+  const filteredData = useRef3([]);
+  const [state, setState] = useState3({
+    skip: 0,
+    total: dataProp.total,
+    subsetData: dataProp.items.slice(0, pageSize3)
+  });
+  const handleFilterChange = (event) => {
+    if (pageSize3) {
+      filteredData.current = filterBy(dataProp.items.slice(), event.filter);
+      const data = filteredData.current.slice(0, pageSize3);
+      setState({
+        subsetData: data,
+        skip: 0,
+        total: filteredData.current.length
+      });
+    }
+    onFilterChange == null ? void 0 : onFilterChange(event.filter.value);
+  };
+  const pageChange = (event) => {
+    if (pageSize3) {
+      const skip3 = event.page.skip;
+      const take3 = event.page.take;
+      const newSubsetData = filteredData.current.slice(skip3, skip3 + take3);
+      setState(__spreadProps(__spreadValues({}, state), { subsetData: newSubsetData, skip: skip3 }));
+    }
+  };
+  useEffect3(() => {
+    setValue(valueProp);
+  }, [valueProp]);
+  useEffect3(() => {
+    setFilter(filterProp);
+  }, [filterProp]);
+  useEffect3(() => {
+    if (pageSize3) {
+      filteredData.current = dataProp.items.slice();
+    }
+  }, [dataProp]);
+  return /* @__PURE__ */ jsx4(
+    MultiSelect,
+    {
+      value: value2,
+      data: pageSize3 ? state.subsetData : dataProp.items,
+      placeholder,
+      dataItemKey: keyField2,
+      textField: textField3,
+      filterable,
+      filter: filter2,
+      virtual: pageSize3 ? {
+        total: state.total,
+        pageSize: pageSize3,
+        skip: state.skip
+      } : void 0,
+      disabled,
+      loading,
+      className,
+      onChange: handleChange,
+      onFilterChange: handleFilterChange,
+      onPageChange: pageChange
+    }
+  );
+};
+var MultiSelectClient_default = SelectClient2;
+
+// src/components/MultiSelect/MultiSelectServer.tsx
+import {
+  MultiSelect as MultiSelect2
+} from "@progress/kendo-react-dropdowns";
+import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var MultiSelectServer = ({
+  data: dataProp,
+  value: valueProp,
+  keyField: keyField2 = "key",
+  textField: textField3 = "text",
+  placeholder,
+  virtual,
+  filterable,
+  filter: filterProp = "",
+  disabled,
+  loading,
+  className,
+  onDataChange,
+  onChange,
+  onFilterChange,
+  getData
+}) => {
+  var _a;
+  const dataCaching = useRef4([]);
+  const pendingRequest = useRef4();
+  const requestStarted = useRef4(false);
+  const emptyItem3 = { [keyField2]: 0, [textField3]: "loading ..." };
+  const [loadingData3, setLoadingData] = useState4([]);
+  const [data, setData] = useState4(dataProp.items);
+  const [total, setTotal] = useState4(0);
+  const [value2, setValue] = useState4(valueProp);
+  const [filter2, setFilter] = useState4(filterProp);
+  const pageSize3 = (_a = virtual == null ? void 0 : virtual.pageSize) != null ? _a : 10;
+  const skipRef = useRef4(0);
+  const resetCach = () => {
+    dataCaching.current.length = 0;
+  };
+  const requestData = useCallback2((state) => {
+    if (requestStarted.current) {
+      clearTimeout(pendingRequest.current);
+      pendingRequest.current = setTimeout(() => {
+        requestData(state);
+      }, 50);
+      return;
+    }
+    requestStarted.current = true;
+    getData(state).then(({ items, total: total2 }) => {
+      const { skip: skip3 } = state;
+      items.forEach((item, index) => {
+        dataCaching.current[index + skip3] = item;
+      });
+      if (skip3 === skipRef.current) {
+        setData(items);
+        setTotal(total2);
+        onDataChange == null ? void 0 : onDataChange({ items, total: total2 });
+      }
+      requestStarted.current = false;
+    }).catch(() => {
+      requestStarted.current = false;
+    });
+  }, []);
+  const handleFilterChange = useCallback2((event) => {
+    const filter3 = event.filter.value;
+    resetCach();
+    requestData({ skip: 0, filter: filter3 });
+    setData(loadingData3);
+    skipRef.current = 0;
+    setFilter(filter3);
+    onFilterChange == null ? void 0 : onFilterChange(filter3);
+  }, []);
+  const shouldRequestData = useCallback2((skip3) => {
+    for (let i = 0; i < pageSize3; i++) {
+      if (!dataCaching.current[skip3 + i]) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+  const getCachedData = useCallback2((skip3) => {
+    const data2 = [];
+    for (let i = 0; i < pageSize3; i++) {
+      data2.push(dataCaching.current[i + skip3] || emptyItem3);
+    }
+    return data2;
+  }, []);
+  const pageChange = useCallback2(
+    (event) => {
+      const newSkip = event.page.skip;
+      if (shouldRequestData(newSkip)) {
+        requestData({ skip: newSkip, filter: filter2 });
+      }
+      const data2 = getCachedData(newSkip);
+      setData(data2);
+      skipRef.current = newSkip;
+    },
+    [getCachedData, requestData, shouldRequestData, filter2]
+  );
+  const handleChange = useCallback2((event) => {
+    const value3 = event.target.value;
+    if (value3 && value3[textField3] === emptyItem3[textField3]) {
+      return;
+    }
+    setValue(value3);
+    onChange(value3);
+  }, []);
+  useEffect4(() => {
+    const pageSize4 = 10;
+    const loadingData4 = [];
+    while (loadingData4.length < pageSize4) {
+      loadingData4.push(emptyItem3);
+    }
+    setLoadingData(loadingData4);
+  }, []);
+  useEffect4(() => {
+    setData(dataProp.items);
+  }, [dataProp]);
+  useEffect4(() => {
+    setValue(valueProp);
+  }, [valueProp]);
+  useEffect4(() => {
+    setFilter(filterProp);
+  }, [filterProp]);
+  useEffect4(() => {
+    requestData({ skip: 0, filter: filter2 });
+    return () => {
+      resetCach();
+    };
+  }, [filter2, requestData]);
+  return /* @__PURE__ */ jsx5(
+    MultiSelect2,
+    {
+      data,
+      value: value2,
+      placeholder,
+      dataItemKey: keyField2,
+      textField: textField3,
+      filterable,
+      onFilterChange: handleFilterChange,
+      virtual: {
+        pageSize: pageSize3,
+        skip: skipRef.current,
+        total
+      },
+      disabled,
+      loading,
+      className,
+      onChange: handleChange,
+      onPageChange: pageChange
+    }
+  );
+};
+var MultiSelectServer_default = MultiSelectServer;
+
+// src/components/MultiSelect/MultiSelect.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var MultiSelect3 = (props) => {
+  return props.filterMode === "client" ? /* @__PURE__ */ jsx6(MultiSelectClient_default, __spreadValues({}, props)) : /* @__PURE__ */ jsx6(MultiSelectServer_default, __spreadValues({}, props));
+};
+var MultiSelect_default = MultiSelect3;
+
 // src/components/DropdownEnumList.tsx
 import { DropDownList } from "@progress/kendo-react-dropdowns";
-import { useEffect, useState } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect as useEffect5, useState as useState5 } from "react";
+import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
 function parsearDataForComboBox(array, key, text, itemAll = false) {
   const dataForComboBox = [];
   if (itemAll)
@@ -36,16 +1117,16 @@ function EnumToArray(typeEnum, replaceGuionForSpace = true, description) {
   return values;
 }
 var DropEnumList = ({ dataEnum, description, onChange, width, defaultValue }) => {
-  const [value, setValue] = useState("");
-  const [data, setData] = useState([]);
-  useEffect(() => {
+  const [value2, setValue] = useState5("");
+  const [data, setData] = useState5([]);
+  useEffect5(() => {
     setData(
       parsearDataForComboBox(EnumToArray(dataEnum, true, description), "value", "label", false).sort(
         (a, b) => Number(a.key) - Number(b.key)
       )
     );
   }, []);
-  useEffect(() => {
+  useEffect5(() => {
     if (data.length > 0) {
       setValue(data.filter((x) => x.key == defaultValue)[0]);
     }
@@ -54,7 +1135,7 @@ var DropEnumList = ({ dataEnum, description, onChange, width, defaultValue }) =>
     onChange(e);
     setValue(e);
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx7(Fragment, { children: /* @__PURE__ */ jsx7(
     DropDownList,
     {
       className: "d-inline-block align-middle mr-2",
@@ -69,23 +1150,23 @@ var DropEnumList = ({ dataEnum, description, onChange, width, defaultValue }) =>
       style: {
         width: `${width}px`
       },
-      defaultValue: value
+      defaultValue: value2
     }
   ) });
 };
 
 // src/contexts/BreadCrumbContext.tsx
 import { useLocalStorage } from "@unifiedsoftware/react-ui";
-import { createContext, useState as useState2 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { createContext, useState as useState6 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var BreadCrumbContext = createContext({});
 var BreadCrumbContextProvider = ({ children }) => {
   const [active, setActive] = useLocalStorage("@active", "");
   const [path, setPath] = useLocalStorage("@path", "/");
   const [goBack, setGoBack] = useLocalStorage("@goBack", false);
   const [pathChild, setPathChild] = useLocalStorage("@pathChild", "");
-  const [routes, setRoutes] = useState2([]);
-  return /* @__PURE__ */ jsx2(
+  const [routes, setRoutes] = useState6([]);
+  return /* @__PURE__ */ jsx8(
     BreadCrumbContext.Provider,
     {
       value: {
@@ -106,51 +1187,51 @@ var BreadCrumbContextProvider = ({ children }) => {
 };
 
 // src/contexts/DrawerContext.tsx
-import { createContext as createContext2, useState as useState3 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { createContext as createContext2, useState as useState7 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var DrawerContext = createContext2({});
 var DrawerContextProvider = ({ children }) => {
-  const [active, setActive] = useState3(false);
-  return /* @__PURE__ */ jsx3(DrawerContext.Provider, { value: { active, setActive }, children });
+  const [active, setActive] = useState7(false);
+  return /* @__PURE__ */ jsx9(DrawerContext.Provider, { value: { active, setActive }, children });
 };
 
 // src/contexts/HistoryContext.tsx
 import { useLocalStorage as useLocalStorage2 } from "@unifiedsoftware/react-ui";
 import { createContext as createContext3 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var HistoryContext = createContext3({});
 var HistoryContextProvider = ({ children }) => {
   const [list, setList] = useLocalStorage2("@list_paths", []);
-  const updateList = (value) => {
+  const updateList = (value2) => {
     setList(
       (prev) => prev.concat({
-        path: value.path,
-        name: value.name,
+        path: value2.path,
+        name: value2.name,
         date: /* @__PURE__ */ new Date()
       })
     );
   };
-  return /* @__PURE__ */ jsx4(HistoryContext.Provider, { value: { list, updateList }, children });
+  return /* @__PURE__ */ jsx10(HistoryContext.Provider, { value: { list, updateList }, children });
 };
 
 // src/contexts/SidebarMainContext.tsx
-import { createContext as createContext4, useState as useState4 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { createContext as createContext4, useState as useState8 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var SidebarMainContext = createContext4({});
 var SidebarMainContextProvider = ({ children }) => {
-  const [open, setOpen] = useState4(true);
-  return /* @__PURE__ */ jsx5(SidebarMainContext.Provider, { value: { open, setOpen }, children });
+  const [open, setOpen] = useState8(true);
+  return /* @__PURE__ */ jsx11(SidebarMainContext.Provider, { value: { open, setOpen }, children });
 };
 
 // src/contexts/GlobalProvider.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function GlobalProvider({ children }) {
-  return /* @__PURE__ */ jsx6(HistoryContextProvider, { children: /* @__PURE__ */ jsx6(BreadCrumbContextProvider, { children: /* @__PURE__ */ jsx6(SidebarMainContextProvider, { children: /* @__PURE__ */ jsx6(DrawerContextProvider, { children }) }) }) });
+  return /* @__PURE__ */ jsx12(HistoryContextProvider, { children: /* @__PURE__ */ jsx12(BreadCrumbContextProvider, { children: /* @__PURE__ */ jsx12(SidebarMainContextProvider, { children: /* @__PURE__ */ jsx12(DrawerContextProvider, { children }) }) }) });
 }
 
 // src/layout/AppBreadcrumb.tsx
 import { Link as Link3, useRouter } from "@unifiedsoftware/react-router";
-import { useContext, useEffect as useEffect2 } from "react";
+import { useContext, useEffect as useEffect6 } from "react";
 import { MdClose } from "react-icons/md";
 import { VscChevronRight } from "react-icons/vsc";
 
@@ -234,7 +1315,11 @@ var MenuTitle = styled2.p`
 import styled3 from "styled-components";
 var Navbar = styled3.nav`
 	background: ${(props) => {
-  return !props.gradient ? ` linear-gradient( 90.03deg, #92190e 80.71%, #f0b92c 107.21% ) !important` : `#92190e`;
+  return !props.$gradient ? ` linear-gradient(
+    90.03deg,
+    #92190e 80.71%,
+    #f0b92c 107.21%
+  ) !important` : `#92190e`;
 }};
 	z-index: 10;
 	width: 100%;
@@ -339,7 +1424,7 @@ var ItemSidebar = styled5.div`
 	}
 `;
 var SidebarNavigation = styled5.nav`
-	position: ${({ fixed = true }) => fixed ? "fixed" : "static"};
+	position: ${({ $fixed = true }) => $fixed ? "fixed" : "static"};
 	top: 0;
 	left: 0;
 	min-height: 100vh;
@@ -349,14 +1434,13 @@ var SidebarNavigation = styled5.nav`
 	background: white;
 	font-family: 'Inter', sans-serif;
 	padding: 0;
-	width: ${({ fixed = true, active = true }) => fixed ? active ? "270px" : "0px" : "auto"};
+	width: ${({ $fixed = true, $active = true }) => $fixed ? $active ? "270px" : "0px" : "auto"};
 	z-index: 11;
 	transition: width 0.2s ease-in-out;
-
 	overflow: hidden;
 	height: 100vh;
 	overflow-y: auto;
-	box-shadow: ${({ shadow = true }) => shadow ? "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px" : "none"};
+	box-shadow: ${({ $shadow = true }) => $shadow ? "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px" : "none"};
 
 	&::-webkit-scrollbar {
 		display: none !important;
@@ -511,7 +1595,7 @@ var ConfigurationOption = styled5.nav`
 
 	font-family: 'Inter', sans-serif;
 	padding: 0;
-	width: ${(props) => props.active ? "300px" : "0px"};
+	width: ${(props) => props.$active ? "300px" : "0px"};
 	z-index: 11;
 	transition: width 0.2s ease-in-out;
 	overflow: hidden !important;
@@ -546,7 +1630,7 @@ var Main = styled6.main`
 	padding: 10px 60px;
 	position: relative;
 	padding-left: ${(props) => {
-  return props.activeDrawer ? `300px` : `30px`;
+  return props.$activeDrawer ? `300px` : `30px`;
 }};
 	@media (max-width: 470px) {
 		padding: 10px 10px;
@@ -574,46 +1658,46 @@ var CloseIcon = styled6.button`
 `;
 
 // src/layout/AppBreadcrumb.tsx
-import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs } from "react/jsx-runtime";
 var AppBreadCrumb = ({ title, paths }) => {
   const { setRoutes } = useContext(BreadCrumbContext);
-  useEffect2(() => {
+  useEffect6(() => {
     if (!(paths == null ? void 0 : paths.length))
       return;
     setRoutes(paths != null ? paths : []);
   }, []);
-  return /* @__PURE__ */ jsx7(BreadCrumbTitle, { children: title != null ? title : "Home" });
+  return /* @__PURE__ */ jsx13(BreadCrumbTitle, { children: title != null ? title : "Home" });
 };
 var AppBreadCrumbNav = ({ paths }) => {
   const router = useRouter();
   const { active, path, routes, setRoutes } = useContext(BreadCrumbContext);
   const { updateList } = useContext(HistoryContext);
-  useEffect2(() => {
+  useEffect6(() => {
     updateList({ name: active, path });
   }, [path, active]);
-  useEffect2(() => {
+  useEffect6(() => {
     setRoutes(paths != null ? paths : []);
   }, [paths]);
   return /* @__PURE__ */ jsxs(Breadcrumb, { children: [
     /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center", children: [
-      /* @__PURE__ */ jsx7(Link3, { href: "/", className: "link", children: "HOME" }),
-      routes.length > 0 && /* @__PURE__ */ jsx7(VscChevronRight, { color: "black" }),
+      /* @__PURE__ */ jsx13(Link3, { href: "/", className: "link", children: "HOME" }),
+      routes.length > 0 && /* @__PURE__ */ jsx13(VscChevronRight, { color: "black" }),
       routes.length > 0 ? routes.map((i, idx, arr) => {
         if (i.route === -1) {
           return /* @__PURE__ */ jsxs("span", { className: "link", onClick: () => router.back(), children: [
             i.title,
             " ",
-            idx + 1 === arr.length ? "" : /* @__PURE__ */ jsx7(VscChevronRight, { color: "black" })
+            idx + 1 === arr.length ? "" : /* @__PURE__ */ jsx13(VscChevronRight, { color: "black" })
           ] }, idx);
         }
         return /* @__PURE__ */ jsxs(Link3, { href: i.route, className: "link", children: [
           i.title,
           " ",
-          idx + 1 === arr.length ? "" : /* @__PURE__ */ jsx7(VscChevronRight, { color: "black" })
+          idx + 1 === arr.length ? "" : /* @__PURE__ */ jsx13(VscChevronRight, { color: "black" })
         ] }, idx);
       }) : ""
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx13(
       CloseIcon,
       {
         onClick: () => {
@@ -624,21 +1708,21 @@ var AppBreadCrumbNav = ({ paths }) => {
           }
           router.push(`${routes && routes[(routes == null ? void 0 : routes.length) - 2].route}`);
         },
-        children: /* @__PURE__ */ jsx7(MdClose, { fontSize: 20 })
+        children: /* @__PURE__ */ jsx13(MdClose, { fontSize: 20 })
       }
     )
   ] });
 };
 
 // src/layout/AppLoader.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect7 } from "react";
 import ReactDOM from "react-dom";
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs2 } from "react/jsx-runtime";
 var LoaderGrid = () => {
   const Loader = /* @__PURE__ */ jsxs2("div", { className: "k-loading-mask", children: [
-    /* @__PURE__ */ jsx8("span", { className: "k-loading-text", children: "Loading" }),
-    /* @__PURE__ */ jsx8("div", { className: "k-loading-image" }),
-    /* @__PURE__ */ jsx8("div", { className: "k-loading-color" })
+    /* @__PURE__ */ jsx14("span", { className: "k-loading-text", children: "Loading" }),
+    /* @__PURE__ */ jsx14("div", { className: "k-loading-image" }),
+    /* @__PURE__ */ jsx14("div", { className: "k-loading-color" })
   ] });
   const gridContent = document && document.querySelector(".k-grid-content");
   const reportContent = document && document.querySelector(".loading-report");
@@ -648,11 +1732,11 @@ var AppLoader = (props) => {
   const { type = "grid", parent, minDuration } = props;
   const parentEl = type === "grid" ? document.querySelector(parent != null ? parent : ".k-grid-container") : parent ? document.querySelector(parent) : null;
   const Loading = /* @__PURE__ */ jsxs2("div", { className: `${type}-loading k-loading-mask`, children: [
-    /* @__PURE__ */ jsx8("span", { className: "k-loading-text", children: "Loading" }),
-    /* @__PURE__ */ jsx8("div", { className: "k-loading-image" }),
-    /* @__PURE__ */ jsx8("div", { className: "k-loading-color" })
+    /* @__PURE__ */ jsx14("span", { className: "k-loading-text", children: "Loading" }),
+    /* @__PURE__ */ jsx14("div", { className: "k-loading-image" }),
+    /* @__PURE__ */ jsx14("div", { className: "k-loading-color" })
   ] });
-  useEffect3(() => {
+  useEffect7(() => {
     if (type === "button") {
       const loadingEl = document.createElement("div");
       loadingEl.className = "icon button-loading k-loading-mask";
@@ -691,7 +1775,7 @@ var AppLoader = (props) => {
 import { Dropdown } from "react-bootstrap";
 import { BsArrowsFullscreen } from "react-icons/bs";
 import { FiCheckCircle, FiFilter, FiPlusSquare, FiRefreshCcw, FiSave } from "react-icons/fi";
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs3 } from "react/jsx-runtime";
 var NavOptions = ({
   exportExcel,
   customButtons,
@@ -703,14 +1787,14 @@ var NavOptions = ({
 }) => {
   return /* @__PURE__ */ jsxs3(MenuOptions, { children: [
     onCreate && /* @__PURE__ */ jsxs3("button", { className: "button-option", onClick: onCreate, children: [
-      /* @__PURE__ */ jsx9(FiPlusSquare, { className: "icon" }),
+      /* @__PURE__ */ jsx15(FiPlusSquare, { className: "icon" }),
       " ",
-      /* @__PURE__ */ jsx9("span", { className: "text", children: "New" })
+      /* @__PURE__ */ jsx15("span", { className: "text", children: "New" })
     ] }),
     onRefresh && /* @__PURE__ */ jsxs3("button", { className: "button-option", onClick: onRefresh, children: [
-      /* @__PURE__ */ jsx9(FiRefreshCcw, { className: "icon" }),
+      /* @__PURE__ */ jsx15(FiRefreshCcw, { className: "icon" }),
       " ",
-      /* @__PURE__ */ jsx9("span", { className: "text", children: "Refresh" })
+      /* @__PURE__ */ jsx15("span", { className: "text", children: "Refresh" })
     ] }),
     exportExcel && exportExcel.length > 0 && /* @__PURE__ */ jsxs3(Dropdown, { className: "button-option", children: [
       /* @__PURE__ */ jsxs3(
@@ -720,8 +1804,8 @@ var NavOptions = ({
           className: "p-2 bg-light text-dark border-0 font-weight-bold",
           title: "Export to Excel",
           children: [
-            /* @__PURE__ */ jsx9(FiSave, { className: "icon" }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx15(FiSave, { className: "icon" }),
+            /* @__PURE__ */ jsx15(
               "span",
               {
                 style: {
@@ -735,45 +1819,45 @@ var NavOptions = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx9(Dropdown.Menu, { children: exportExcel.map((item, index) => {
+      /* @__PURE__ */ jsx15(Dropdown.Menu, { children: exportExcel.map((item, index) => {
         return /* @__PURE__ */ jsxs3(Dropdown.Item, { onClick: item.onAction, children: [
-          /* @__PURE__ */ jsx9("i", { className: `${item.classNameIcon}   mr-2` }),
+          /* @__PURE__ */ jsx15("i", { className: `${item.classNameIcon}   mr-2` }),
           " ",
           item.title
         ] }, index);
       }) })
     ] }),
     onSelect && /* @__PURE__ */ jsxs3("button", { className: "button-option", onClick: onSelect, children: [
-      /* @__PURE__ */ jsx9(FiCheckCircle, { className: "icon" }),
+      /* @__PURE__ */ jsx15(FiCheckCircle, { className: "icon" }),
       " ",
-      /* @__PURE__ */ jsx9("span", { className: "text", children: "Select All" })
+      /* @__PURE__ */ jsx15("span", { className: "text", children: "Select All" })
     ] }),
     onClear && /* @__PURE__ */ jsxs3("button", { className: "button-option", onClick: onClear, children: [
-      /* @__PURE__ */ jsx9(FiFilter, { className: "icon" }),
+      /* @__PURE__ */ jsx15(FiFilter, { className: "icon" }),
       " ",
-      /* @__PURE__ */ jsx9("span", { className: "text", children: "Clear Filters" })
+      /* @__PURE__ */ jsx15("span", { className: "text", children: "Clear Filters" })
     ] }),
     onExpandScreen && /* @__PURE__ */ jsxs3("button", { className: "button-option", onClick: onExpandScreen, children: [
-      /* @__PURE__ */ jsx9(BsArrowsFullscreen, { className: "icon" }),
+      /* @__PURE__ */ jsx15(BsArrowsFullscreen, { className: "icon" }),
       " ",
-      /* @__PURE__ */ jsx9("span", { className: "text", children: "Full Page" })
+      /* @__PURE__ */ jsx15("span", { className: "text", children: "Full Page" })
     ] }),
     customButtons == null ? void 0 : customButtons.map((custom, index) => {
       if (custom.render) {
         return custom.render;
       }
       return /* @__PURE__ */ jsxs3("button", { className: "button-option", onClick: custom.onAction, children: [
-        custom.Icon !== void 0 && /* @__PURE__ */ jsx9(custom.Icon, { className: "icon" }),
-        /* @__PURE__ */ jsx9("span", { className: "text", children: custom.title })
+        custom.Icon !== void 0 && /* @__PURE__ */ jsx15(custom.Icon, { className: "icon" }),
+        /* @__PURE__ */ jsx15("span", { className: "text", children: custom.title })
       ] }, index);
     })
   ] });
 };
 
 // src/layout/title.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Title = ({ title }) => {
-  return /* @__PURE__ */ jsx10(TitlePage, { children: title != null ? title : "Home" });
+  return /* @__PURE__ */ jsx16(TitlePage, { children: title != null ? title : "Home" });
 };
 export {
   AppBreadCrumb,
@@ -797,8 +1881,10 @@ export {
   MenuItem as MenuItems,
   MenuOptions,
   MenuTitle,
+  MultiSelect_default as MultiSelect,
   NavOptions,
   Navbar,
+  Select_default as Select,
   SidebarMainContext,
   SidebarMainContextProvider,
   SidebarNavigation,