@progress/kendo-react-dropdowns 7.1.0-develop.12 → 7.1.0-develop.13

package/index.mjs

@@ -5,16 +5,16 @@
 "use client";
 import * as o from "react";
 import l from "prop-types";
-import { IconWrap as ke, classNames as B, Keys as f, svgIconPropType as gs, createPropsContext as Be, withIdHOC as St, withPropsContext as wt, validatePackage as We, canUseDOM as Fe, getTabIndex as $t, kendoThemeMaps as qe, getActiveElement as ws, usePropsContext as Gt, getScrollbarWidth as Es, getter as It, setScrollbarWidth as Ds, useId as fs, useRtl as ms, noop as De, mapTree as Ts, extendDataItem as Fs } from "@progress/kendo-react-common";
-import { FloatingLabel as $e } from "@progress/kendo-react-labels";
-import { searchIcon as Ms, caretAltDownIcon as Ut, xIcon as ot, plusIcon as Ns } from "@progress/kendo-svg-icons";
-import { Popup as jt, PopupPropsContext as Os } from "@progress/kendo-react-popup";
-import { TextBox as Ps, InputPrefix as _s } from "@progress/kendo-react-inputs";
-import { provideLocalizationService as He, registerForLocalization as vs, useLocalization as bs } from "@progress/kendo-react-intl";
-import { Button as Te, Chip as Rs } from "@progress/kendo-react-buttons";
-import { ActionSheet as Yt, ActionSheetHeader as Jt, ActionSheetContent as at, ActionSheetFooter as Vs } from "@progress/kendo-react-layout";
+import { IconWrap as Ce, classNames as B, Keys as g, svgIconPropType as ms, createPropsContext as Be, withIdHOC as Et, withPropsContext as Ft, validatePackage as $e, canUseDOM as Me, getTabIndex as Ut, kendoThemeMaps as Ge, getActiveElement as Fs, useCustomComponent as Lt, usePropsContext as jt, getScrollbarWidth as Ds, getter as Ct, setScrollbarWidth as Ts, useId as vs, useRtl as bs, noop as De, mapTree as Ms, extendDataItem as Ns } from "@progress/kendo-react-common";
+import { FloatingLabel as Ue } from "@progress/kendo-react-labels";
+import { searchIcon as Os, caretAltDownIcon as Yt, xIcon as lt, plusIcon as Ps } from "@progress/kendo-svg-icons";
+import { Popup as Jt, PopupPropsContext as _s } from "@progress/kendo-react-popup";
+import { TextBox as Rs, InputPrefix as Vs } from "@progress/kendo-react-inputs";
+import { provideLocalizationService as Ae, registerForLocalization as ys, useLocalization as Is } from "@progress/kendo-react-intl";
+import { Button as Te, Chip as Bs } from "@progress/kendo-react-buttons";
+import { ActionSheet as Qt, ActionSheetHeader as Xt, ActionSheetContent as rt, ActionSheetFooter as Ks } from "@progress/kendo-react-layout";
 import { TreeView as kt } from "@progress/kendo-react-treeview";
-class Et extends o.Component {
+class Dt extends o.Component {
   render() {
     const {
       children: t,
@@ -24,7 +24,7 @@ class Et extends o.Component {
       popupSettings: a
     } = this.props;
     return /* @__PURE__ */ o.createElement(
-      jt,
+      Jt,
       {
         style: { width: e, direction: s },
         contentKey: n && n.join(),
@@ -34,13 +34,13 @@ class Et extends o.Component {
     );
   }
 }
-const Qt = o.forwardRef((i, t) => {
+const Zt = o.forwardRef((i, t) => {
   const e = o.useRef(null);
   return o.useImperativeHandle(
     t,
     () => e.current
   ), /* @__PURE__ */ o.createElement("div", { className: "k-list-filter" }, /* @__PURE__ */ o.createElement(
-    Ps,
+    Rs,
     {
       ...i,
       ref: e,
@@ -52,11 +52,11 @@ const Qt = o.forwardRef((i, t) => {
       size: i.size,
       fillMode: i.fillMode,
       rounded: i.rounded,
-      prefix: () => /* @__PURE__ */ o.createElement(_s, null, /* @__PURE__ */ o.createElement(ke, { name: "search", icon: Ms }))
+      prefix: () => /* @__PURE__ */ o.createElement(Vs, null, /* @__PURE__ */ o.createElement(Ce, { name: "search", icon: Os }))
     }
   ));
 });
-Qt.propTypes = {
+Zt.propTypes = {
   value: l.oneOfType([l.string, l.number, l.array]),
   tabIndex: l.number,
   onChange: l.func,
@@ -65,9 +65,9 @@ Qt.propTypes = {
   rounded: l.oneOf([null, "small", "medium", "large", "full"]),
   fillMode: l.oneOf([null, "solid", "flat", "outline"])
 };
-Qt.displayName = "KendoReactListFilter";
-const Re = Qt;
-class Ae extends o.Component {
+Zt.displayName = "KendoReactListFilter";
+const Re = Zt;
+class We extends o.Component {
   render() {
     const {
       group: t,
@@ -77,20 +77,20 @@ class Ae extends o.Component {
     return s !== void 0 ? s.call(void 0, n, this.props) : n;
   }
 }
-const G = (i) => i != null, Bs = (i, t) => {
+const U = (i) => i != null, Ls = (i, t) => {
   for (let e = 0; e < i.length; e++)
     if (i.charAt(e) !== t)
       return !1;
   return !0;
-}, Ks = (i, t, e) => {
+}, zs = (i, t, e) => {
   let s = i;
   return e && (s = [e].concat(s)), s.slice(t).concat(s.slice(0, t));
-}, os = (i, t, e) => {
-  if (!G(i))
+}, ls = (i, t, e) => {
+  if (!U(i))
     return !1;
   let s = String(i);
   return e && (s = s.toLowerCase()), s.indexOf(t) === 0;
-}, Ls = (i, t, e, s, n) => {
+}, Hs = (i, t, e, s, n) => {
   const a = i.offsetHeight, p = t.children.item(e), c = p.offsetTop + (n ? s - i.scrollTop : 0), d = p.offsetHeight;
   if (n) {
     let r = 0;
@@ -110,11 +110,11 @@ const G = (i) => i != null, Bs = (i, t) => {
     }
   }
   return s;
-}, Kt = (i, t, e, s = !1) => {
+}, zt = (i, t, e, s = !1) => {
   const n = (a) => s ? a : a.toLowerCase();
   return i.findIndex((a) => e ? n(V(a, e)) === n(t) : n(t) === n(a.toString()));
 }, V = (i, t) => {
-  if (t && G(i)) {
+  if (t && U(i)) {
     const e = t.split(".");
     let s = i;
     return e.forEach((n) => {
@@ -122,12 +122,12 @@ const G = (i) => i != null, Bs = (i, t) => {
     }), s;
   }
   return i;
-}, zi = (i, t, e) => {
+}, Wi = (i, t, e) => {
   if (!i)
     return;
   const s = i.findIndex((n) => V(n, t) === e);
   return i[s];
-}, zs = (i = [], t = [], e) => {
+}, As = (i = [], t = [], e) => {
   if (i === t)
     return !0;
   if (i.length !== t.length)
@@ -136,18 +136,18 @@ const G = (i) => i != null, Bs = (i, t) => {
     if (!R(i[s], t[s], e))
       return !1;
   return !0;
-}, mt = (i, t, e) => {
+}, bt = (i, t, e) => {
   t.forEach((s) => {
     const n = i.findIndex((a) => R(a, s, e));
     n !== -1 && i.splice(n, 1);
   });
-}, R = (i, t, e) => i === t || G(i) === G(t) && V(i, e) === V(t, e), as = (i, t, e) => {
+}, R = (i, t, e) => i === t || U(i) === U(t) && V(i, e) === V(t, e), rs = (i, t, e) => {
   if (t) {
-    const s = Kt(i, t, e, !0);
+    const s = zt(i, t, e, !0);
     return s !== -1 ? i[s] : i[Ve(i, t, e)];
   }
   return i[0];
-}, Hs = (i, t = [], e) => {
+}, Ws = (i, t = [], e) => {
   let s = "";
   if (i) {
     const n = t[Ve(t, i, e)];
@@ -157,10 +157,10 @@ const G = (i) => i != null, Bs = (i, t) => {
     }
   }
   return s;
-}, As = (i) => {
+}, qs = (i) => {
   i.target.nodeName !== "INPUT" && i.preventDefault();
-}, Ct = (i, t, e) => !!i != !!t || i.text !== t.text ? !1 : i === t || zs(i.data, t.data, e), Ws = (i) => i.preventDefault();
-class qs extends o.Component {
+}, St = (i, t, e) => !!i != !!t || i.text !== t.text ? !1 : i === t || As(i.data, t.data, e), $s = (i) => i.preventDefault();
+class Gs extends o.Component {
   render() {
     const {
       selected: t,
@@ -171,7 +171,7 @@ class qs extends o.Component {
       "div",
       {
         onClick: this.props.onClick,
-        onMouseDown: Ws,
+        onMouseDown: $s,
         style: { position: "unset" },
         className: B("k-list-optionlabel", {
           "k-selected": t
@@ -181,7 +181,7 @@ class qs extends o.Component {
     );
   }
 }
-class $s extends o.Component {
+class Us extends o.Component {
   constructor() {
     super(...arguments), this.handleClick = (t) => this.props.onClick(this.props.index, t);
   }
@@ -216,7 +216,7 @@ class $s extends o.Component {
     return c !== void 0 ? c.call(void 0, d, this.props) : d;
   }
 }
-class Gs extends o.Component {
+class js extends o.Component {
   render() {
     const {
       group: t,
@@ -236,16 +236,16 @@ class Gs extends o.Component {
     return s !== void 0 ? s.call(void 0, a, this.props) : a;
   }
 }
-const fe = "dropdowns.nodata", st = "dropdowns.clear", Lt = "dropdowns.comboArrowBtnAriaLabelExpand", zt = "dropdowns.comboArrowBtnAriaLabelCollapse", Ht = "dropdowns.dropDownListArrowBtnAriaLabel", it = "dropdowns.apply", nt = "dropdowns.cancel", le = {
-  [st]: "clear",
-  [fe]: "NO DATA FOUND.",
-  [Lt]: "expand combobox",
-  [zt]: "collapse combobox",
-  [Ht]: "select",
-  [it]: "Apply",
-  [nt]: "Cancel"
+const ve = "dropdowns.nodata", nt = "dropdowns.clear", Ht = "dropdowns.comboArrowBtnAriaLabelExpand", At = "dropdowns.comboArrowBtnAriaLabelCollapse", Wt = "dropdowns.dropDownListArrowBtnAriaLabel", ot = "dropdowns.apply", at = "dropdowns.cancel", ce = {
+  [nt]: "clear",
+  [ve]: "NO DATA FOUND.",
+  [Ht]: "expand combobox",
+  [At]: "collapse combobox",
+  [Wt]: "select",
+  [ot]: "Apply",
+  [at]: "Cancel"
 };
-class Ge extends o.Component {
+class je extends o.Component {
   renderItems() {
     const {
       textField: t,
@@ -257,55 +257,55 @@ class Ge extends o.Component {
       skip: c = 0,
       virtual: d,
       focusedIndex: r,
-      highlightSelected: h = !0,
-      value: u,
-      data: g,
+      highlightSelected: u = !0,
+      value: h,
+      data: f,
       itemRender: m,
       groupHeaderItemRender: v
-    } = this.props, b = Array.isArray(u);
+    } = this.props, b = Array.isArray(h);
     let w = 0;
-    return g.map((S, D) => {
-      const N = c + D, O = c + D + w, _ = S.disabled ? !1 : h && (!b && R(S, u, e) || b && u.findIndex((E) => R(E, S, e)) !== -1);
-      let C, F, x;
-      return D > 0 && s !== void 0 && (F = V(S, s), x = V(g[D - 1], s), F && x && F !== x && (C = F)), C !== void 0 && n === "modern" && (w += 1), [
-        C !== void 0 && n === "modern" && /* @__PURE__ */ o.createElement(
-          Gs,
+    return f.map((k, F) => {
+      const O = c + F, N = c + F + w, _ = k.disabled ? !1 : u && (!b && R(k, h, e) || b && h.findIndex((E) => R(E, k, e)) !== -1);
+      let S, T, C;
+      return F > 0 && s !== void 0 && (T = V(k, s), C = V(f[F - 1], s), T && C && T !== C && (S = T)), S !== void 0 && n === "modern" && (w += 1), [
+        S !== void 0 && n === "modern" && /* @__PURE__ */ o.createElement(
+          js,
           {
-            id: `option-${p}-${O}`,
+            id: `option-${p}-${N}`,
             virtual: d,
-            key: N + "-group-item",
-            group: C,
+            key: O + "-group-item",
+            group: S,
             isMultiColumn: a,
             render: v
           }
         ),
         /* @__PURE__ */ o.createElement(
-          $s,
+          Us,
           {
-            id: `option-${p}-${C !== void 0 && n === "modern" ? O + 1 : O}`,
+            id: `option-${p}-${S !== void 0 && n === "modern" ? N + 1 : N}`,
             virtual: d,
-            dataItem: S,
+            dataItem: k,
             groupMode: n,
             selected: _,
-            focused: r === D,
-            index: N,
-            key: N,
+            focused: r === F,
+            index: O,
+            key: O,
             onClick: this.props.onClick,
             textField: t,
-            group: C,
+            group: S,
             render: m,
-            disabled: S.disabled
+            disabled: k.disabled
           }
         )
       ];
     });
   }
   renderNoValueElement(t) {
-    const e = this.props.noDataRender, s = /* @__PURE__ */ o.createElement("div", { className: "k-nodata" }, /* @__PURE__ */ o.createElement("div", null, t.toLanguageString(fe, le[fe])));
+    const e = this.props.noDataRender, s = /* @__PURE__ */ o.createElement("div", { className: "k-nodata" }, /* @__PURE__ */ o.createElement("div", null, t.toLanguageString(ve, ce[ve])));
     return e ? e.call(void 0, s) : s;
   }
   render() {
-    const t = He(this), {
+    const t = Ae(this), {
       id: e,
       show: s,
       wrapperCssClass: n,
@@ -314,9 +314,9 @@ class Ge extends o.Component {
       listRef: c,
       wrapperRef: d,
       listClassName: r = "k-list-ul",
-      ariaSetSize: h
-    } = this.props, u = this.renderItems();
-    return u.length ? /* @__PURE__ */ o.createElement(
+      ariaSetSize: u
+    } = this.props, h = this.renderItems();
+    return h.length ? /* @__PURE__ */ o.createElement(
       "div",
       {
         className: n,
@@ -333,20 +333,20 @@ class Ge extends o.Component {
           id: e,
           role: "listbox",
           "aria-hidden": s ? void 0 : !0,
-          "aria-setsize": h,
+          "aria-setsize": u,
           className: r,
           ref: c,
           style: p
         },
-        u
+        h
       ),
       this.props.scroller && /* @__PURE__ */ o.createElement("div", { className: "k-height-container" }, this.props.scroller)
     ) : this.renderNoValueElement(t);
   }
 }
-vs(Ge);
-const Us = 1533915;
-class js {
+ys(je);
+const Ys = 1533915;
+class Js {
   constructor() {
     this.container = null, this.scrollElement = null, this.list = null, this.containerHeight = 0, this.skip = 0, this.total = 0, this.enabled = !1, this.pageSize = 0, this.itemHeight = 0, this.PageChange = null, this.prevScrollPos = 0, this.listTranslate = 0, this.scrollSyncing = !1, this.scrollerRef = (t) => {
       const e = this;
@@ -354,7 +354,7 @@ class js {
     }, this.calcScrollElementHeight = () => {
       this.scrollSyncing = !0;
       let t = !1;
-      this.itemHeight = this.list ? this.list.children[0].offsetHeight : this.itemHeight, this.containerHeight = Math.min(Us, this.itemHeight * this.total);
+      this.itemHeight = this.list ? this.list.children[0].offsetHeight : this.itemHeight, this.containerHeight = Math.min(Ys, this.itemHeight * this.total);
       const e = this.containerHeight;
       return this.scrollElement && (t = this.scrollElement.style.height !== e + "px", t && (this.scrollElement.style.height = e + "px")), this.scrollSyncing = !1, t;
     }, this.scrollHandler = this.scrollHandler.bind(this);
@@ -410,25 +410,25 @@ class js {
     return t = Math.max(0, t), t = Math.min(this.containerHeight, t), t;
   }
 }
-class Ys {
+class Qs {
   navigate(t) {
     const e = t.keyCode;
-    if (e === f.up || e === f.left)
+    if (e === g.up || e === g.left)
       return this.next({ current: t.current, min: t.min, max: t.max, step: t.skipItems ? t.skipItems : -1 });
-    if (e === f.down || e === f.right)
+    if (e === g.down || e === g.right)
       return this.next({ current: t.current, min: t.min, max: t.max, step: t.skipItems ? t.skipItems : 1 });
-    if (e === f.home)
+    if (e === g.home)
       return 0;
-    if (e === f.end)
+    if (e === g.end)
       return t.max;
   }
   next(t) {
-    return G(t.current) ? Math.min(t.max, Math.max(t.current + t.step, t.min)) : t.min;
+    return U(t.current) ? Math.min(t.max, Math.max(t.current + t.step, t.min)) : t.min;
   }
 }
-const Xt = class {
+const es = class {
   constructor(i) {
-    this.wrapper = null, this.list = null, this.vs = new js(), this.navigation = new Ys(), this.handleItemClick = (t, e) => {
+    this.wrapper = null, this.list = null, this.vs = new Js(), this.navigation = new Qs(), this.handleItemClick = (t, e) => {
       const s = this.initState();
       s.syntheticEvent = e, e.stopPropagation(), this.component.handleItemSelect(t, s), this.togglePopup(s), this.applyState(s);
     }, this.handleFocus = (t) => {
@@ -465,9 +465,9 @@ const Xt = class {
       }
       window.setTimeout(() => s.enabled = !0, 10);
     }, this.scrollPopupByPageSize = (t) => {
-      var p, c, d, r, h, u;
+      var p, c, d, r, u, h;
       const e = this.vs, s = (c = (p = this.list) == null ? void 0 : p.parentElement) == null ? void 0 : c.scrollTop, n = e.enabled && e.itemHeight ? e.itemHeight : this.list ? this.list.children[0].offsetHeight : 0, a = (r = (d = this.list) == null ? void 0 : d.parentElement) == null ? void 0 : r.offsetHeight;
-      s !== void 0 && a !== void 0 && ((u = (h = this.list) == null ? void 0 : h.parentElement) == null || u.scroll({ top: s + t * Math.floor(a / n) * n }));
+      s !== void 0 && a !== void 0 && ((h = (u = this.list) == null ? void 0 : u.parentElement) == null || h.scroll({ top: s + t * Math.floor(a / n) * n }));
     }, this.renderScrollElement = () => {
       const t = this.vs;
       return t.enabled && /* @__PURE__ */ o.createElement(
@@ -499,7 +499,7 @@ const Xt = class {
       this.scrollToItem(i, t, !0);
     }, 10), s && i >= 0) {
       const n = this.vs, a = n.container || s.parentNode, p = t !== void 0 ? t : n.enabled;
-      Ls(a, s, i, n.translate, p);
+      Hs(a, s, i, n.translate, p);
     }
   }
   initState() {
@@ -542,7 +542,7 @@ const Xt = class {
     i && a && this.vs.enabled && (a.skip > 0 && R(i, s[0], n) ? this.triggerOnPageChange(t, a.skip - 1, a.pageSize) : !p && a.skip + a.pageSize < a.total && R(i, s[s.length - 1], n) && this.triggerOnPageChange(t, a.skip + 1, a.pageSize));
   }
   getPopupSettings() {
-    return Object.assign({}, Xt.defaultProps.popupSettings, this.component.props.popupSettings);
+    return Object.assign({}, es.defaultProps.popupSettings, this.component.props.popupSettings);
   }
   getGroupedDataModernMode(i, t) {
     let e = [];
@@ -551,8 +551,8 @@ const Xt = class {
     }), e;
   }
 };
-let ie = Xt;
-ie.basicPropTypes = {
+let oe = es;
+oe.basicPropTypes = {
   opened: l.bool,
   disabled: l.bool,
   dir: l.string,
@@ -585,8 +585,8 @@ ie.basicPropTypes = {
   header: l.node,
   footer: l.node
 };
-ie.propTypes = {
-  ...Xt.basicPropTypes,
+oe.propTypes = {
+  ...es.basicPropTypes,
   value: l.any,
   defaultValue: l.any,
   filterable: l.bool,
@@ -599,23 +599,23 @@ ie.propTypes = {
   onFilterChange: l.func,
   onPageChange: l.func
 };
-ie.defaultProps = {
+oe.defaultProps = {
   popupSettings: {
     height: "200px"
   },
   required: !1,
   validityStyles: !0
 };
-const Ue = {
+const Ye = {
   name: "@progress/kendo-react-dropdowns",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1706183375,
+  publishDate: 1706184332,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
-}, xt = 500, Se = 768, Js = "Please select a value from the list!", { sizeMap: Bt, roundedMap: Qs } = qe, At = class extends o.Component {
+}, wt = 500, we = 768, Xs = "Please select a value from the list!", { sizeMap: Kt, roundedMap: Zs } = Ge, qt = class extends o.Component {
   constructor(i) {
-    super(i), this.state = {}, this._element = null, this.base = new ie(this), this.searchState = { word: "", last: "" }, this._select = null, this._skipFocusEvent = !1, this._filterInput = null, this._navigated = !1, this._lastKeypressIsFilter = !1, this.itemHeight = 0, this.focus = () => {
+    super(i), this.state = {}, this._element = null, this.base = new oe(this), this.searchState = { word: "", last: "" }, this._select = null, this._skipFocusEvent = !1, this._filterInput = null, this._navigated = !1, this._lastKeypressIsFilter = !1, this.itemHeight = 0, this.focus = () => {
       this.base.wrapper && this.base.wrapper.focus();
     }, this.handleItemSelect = (t, e) => {
       const { data: s = [], virtual: n, dataItemKey: a, defaultItem: p } = this.props, c = n ? n.skip : 0, d = t === -1 && p !== void 0 ? p : s[t - c], r = !R(d, this.value, a);
@@ -641,39 +641,39 @@ const Ue = {
         }
       )
     ), this.renderListContainer = () => {
-      const { header: t, footer: e, dir: s, data: n = [], size: a, groupField: p, groupStickyHeaderItemRender: c, list: d } = this.props, r = this.base, h = r.getPopupSettings(), u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = h.width !== void 0 ? h.width : r.popupWidth, m = {
+      const { header: t, footer: e, dir: s, data: n = [], size: a, groupField: p, groupStickyHeaderItemRender: c, list: d } = this.props, r = this.base, u = r.getPopupSettings(), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = u.width !== void 0 ? u.width : r.popupWidth, m = {
         dir: s !== void 0 ? s : r.dirCalculated,
-        width: g,
+        width: f,
         popupSettings: {
           popupClass: B(
-            h.popupClass,
+            u.popupClass,
             "k-list-container",
             "k-dropdownlist-popup"
           ),
-          className: h.className,
-          animate: h.animate,
+          className: u.className,
+          animate: u.animate,
           anchor: this.element,
-          show: u,
+          show: h,
           onOpen: this.onPopupOpened,
           onClose: this.onPopupClosed,
-          appendTo: h.appendTo
+          appendTo: u.appendTo
         },
         itemsCount: [n.length]
       };
       let { group: v } = this.state;
-      return v === void 0 && p !== void 0 && (v = V(n[0], p)), /* @__PURE__ */ o.createElement(Et, { ...m }, this.renderListFilter(), t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), /* @__PURE__ */ o.createElement(
+      return v === void 0 && p !== void 0 && (v = V(n[0], p)), /* @__PURE__ */ o.createElement(Dt, { ...m }, this.renderListFilter(), t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), /* @__PURE__ */ o.createElement(
         "div",
         {
           className: B(
             "k-list",
             {
-              [`k-list-${Bt[a] || a}`]: a,
+              [`k-list-${Kt[a] || a}`]: a,
               "k-virtual-list": this.base.vs.enabled
             }
           )
         },
         this.renderDefaultItem(),
-        !d && v && n.length !== 0 && /* @__PURE__ */ o.createElement(Ae, { group: v, groupMode: "modern", render: c }),
+        !d && v && n.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: v, groupMode: "modern", render: c }),
         this.renderList()
       ), e && /* @__PURE__ */ o.createElement("div", { className: "k-list-footer" }, e));
     }, this.renderList = () => {
@@ -685,12 +685,12 @@ const Ue = {
         groupHeaderItemRender: a,
         listNoDataRender: p,
         itemRender: c
-      } = this.props, d = this.base.vs, r = n.skip, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = this.base.getPopupSettings(), g = `translateY(${d.translate}px)`;
+      } = this.props, d = this.base.vs, r = n.skip, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.getPopupSettings(), f = `translateY(${d.translate}px)`;
       return /* @__PURE__ */ o.createElement(
-        Ge,
+        je,
         {
           id: this._listboxId,
-          show: h,
+          show: u,
           data: t.slice(),
           focusedIndex: this.getFocusedIndex(),
           value: this.value,
@@ -700,9 +700,9 @@ const Ue = {
           groupField: this.props.groupField,
           groupMode: "modern",
           listRef: (m) => d.list = this.base.list = m,
-          wrapperStyle: { maxHeight: u.height },
+          wrapperStyle: { maxHeight: h.height },
           wrapperCssClass: "k-list-content",
-          listStyle: d.enabled ? { transform: g } : void 0,
+          listStyle: d.enabled ? { transform: f } : void 0,
           key: "listkey",
           skip: r,
           onClick: this.handleItemClick,
@@ -724,8 +724,8 @@ const Ue = {
         const p = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : s ? s.children[0].offsetHeight : 0), d = t.target.scrollTop - e.skip * p;
         a = this.base.getGroupedDataModernMode(a, n);
         let r = a[0][n];
-        for (let h = 1; h < a.length && !(p * h > d); h++)
-          a[h] && a[h][n] && (r = a[h][n]);
+        for (let u = 1; u < a.length && !(p * u > d); u++)
+          a[u] && a[u][n] && (r = a[u][n]);
         r !== this.state.group && this.setState({
           group: r
         });
@@ -747,7 +747,7 @@ const Ue = {
     }, this.renderDefaultItem = () => {
       const { textField: t, defaultItem: e, dataItemKey: s } = this.props;
       return e !== void 0 && /* @__PURE__ */ o.createElement(
-        qs,
+        Gs,
         {
           defaultItem: e,
           textField: t,
@@ -760,20 +760,20 @@ const Ue = {
       clearTimeout(this._typingTimeout), this.props.filterable || (this._typingTimeout = window.setTimeout(() => this.searchState.word = "", this.props.delay), this.selectNext(t));
     }, this.selectNext = (t) => {
       const { data: e = [], dataItemKey: s } = this.props;
-      let n = e.map((S, D) => ({ item: S, itemIndex: D }));
-      const a = this.searchState.word, p = this.searchState.last, c = Bs(a, p);
-      let d = n.length, r = Math.max(0, e.findIndex((S) => R(S, this.value, s))), h;
-      this.props.defaultItem && (h = { item: this.props.defaultItem, itemIndex: -1 }, d += 1, r += 1), r += c ? 1 : 0, n = Ks(n, r, h);
-      let u, g, m, v = 0;
+      let n = e.map((k, F) => ({ item: k, itemIndex: F }));
+      const a = this.searchState.word, p = this.searchState.last, c = Ls(a, p);
+      let d = n.length, r = Math.max(0, e.findIndex((k) => R(k, this.value, s))), u;
+      this.props.defaultItem && (u = { item: this.props.defaultItem, itemIndex: -1 }, d += 1, r += 1), r += c ? 1 : 0, n = zs(n, r, u);
+      let h, f, m, v = 0;
       const { textField: b, ignoreCase: w } = this.props;
       for (; v < d; v++)
-        if (u = V(n[v].item, b), g = c && os(u, p, w), m = os(u, a, w), g || m) {
+        if (h = V(n[v].item, b), f = c && ls(h, p, w), m = ls(h, a, w), f || m) {
           v = n[v].itemIndex;
           break;
         }
       if (v !== d) {
-        const S = this.base.initState();
-        S.syntheticEvent = t, this.handleItemSelect(v, S), this.applyState(S), this._valueDuringOnChange = void 0;
+        const k = this.base.initState();
+        k.syntheticEvent = t, this.handleItemSelect(v, k), this.applyState(k), this._valueDuringOnChange = void 0;
       }
     }, this.handleKeyDown = (t) => {
       t && t.target instanceof Element && t.target.nodeName === "INPUT" && t.stopPropagation && t.stopPropagation();
@@ -786,81 +786,81 @@ const Ue = {
         virtual: c = { skip: 0, total: 0, pageSize: 0 },
         dataItemKey: d,
         groupField: r = "",
-        textField: h,
-        skipDisabledItems: u = !0
-      } = this.props, g = this.value, m = e.findIndex((F) => R(F, g, d)), v = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = t.keyCode, w = b === f.home || b === f.end, S = b === f.up || b === f.down, D = !v && (t.altKey && b === f.down || b === f.enter || b === f.space), N = v && (t.altKey && b === f.up || b === f.esc), O = p && (b === f.left || b === f.right), _ = S || O && !s || w, C = this.base.initState();
-      if (C.syntheticEvent = t, !n) {
+        textField: u,
+        skipDisabledItems: h = !0
+      } = this.props, f = this.value, m = e.findIndex((T) => R(T, f, d)), v = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = t.keyCode, w = b === g.home || b === g.end, k = b === g.up || b === g.down, F = !v && (t.altKey && b === g.down || b === g.enter || b === g.space), O = v && (t.altKey && b === g.up || b === g.esc), N = p && (b === g.left || b === g.right), _ = k || N && !s || w, S = this.base.initState();
+      if (S.syntheticEvent = t, !n) {
         if (w && this.base.vs.enabled)
-          b === f.home ? c.skip !== 0 ? (this.base.triggerOnPageChange(C, 0, c.pageSize), this._navigated = !0) : this.triggerOnChange(e[0], C) : c.skip < c.total - c.pageSize ? (this.base.triggerOnPageChange(C, c.total - c.pageSize, c.pageSize), this._navigated = !0) : this.triggerOnChange(e[e.length - 1], C);
-        else if (v && b === f.pageUp)
+          b === g.home ? c.skip !== 0 ? (this.base.triggerOnPageChange(S, 0, c.pageSize), this._navigated = !0) : this.triggerOnChange(e[0], S) : c.skip < c.total - c.pageSize ? (this.base.triggerOnPageChange(S, c.total - c.pageSize, c.pageSize), this._navigated = !0) : this.triggerOnChange(e[e.length - 1], S);
+        else if (v && b === g.pageUp)
           this.base.scrollPopupByPageSize(-1);
-        else if (v && b === f.pageDown)
+        else if (v && b === g.pageDown)
           this.base.scrollPopupByPageSize(1);
-        else if (v && b === f.enter) {
-          const F = this.getFocusedIndex();
-          this.haveFocusedItemAndDataNotEmpty(e, F) ? (this.triggerOnChange(null, C), this.applyState(C)) : this.handleItemSelect(F, C), this.base.togglePopup(C), t.preventDefault();
-        } else if (D || N)
-          N && this.resetValueIfDisabledItem(), this.base.togglePopup(C), t.preventDefault();
+        else if (v && b === g.enter) {
+          const T = this.getFocusedIndex();
+          this.haveFocusedItemAndDataNotEmpty(e, T) ? (this.triggerOnChange(null, S), this.applyState(S)) : this.handleItemSelect(T, S), this.base.togglePopup(S), t.preventDefault();
+        } else if (F || O)
+          O && this.resetValueIfDisabledItem(), this.base.togglePopup(S), t.preventDefault();
         else if (_) {
-          if (this._lastKeypressIsFilter = !1, r !== "" && h)
-            if (!u && v)
-              this.onNavigate(C, b);
+          if (this._lastKeypressIsFilter = !1, r !== "" && u)
+            if (!h && v)
+              this.onNavigate(S, b);
             else {
-              let F;
-              if (b === f.down || b === f.right) {
-                const x = e.slice(m + 1).find((E) => !E.disabled && E[h]);
-                F = x && e.findIndex((E) => E[h] === x[h]);
-              } else if (b === f.up || b === f.left) {
-                let x;
+              let T;
+              if (b === g.down || b === g.right) {
+                const C = e.slice(m + 1).find((E) => !E.disabled && E[u]);
+                T = C && e.findIndex((E) => E[u] === C[u]);
+              } else if (b === g.up || b === g.left) {
+                let C;
                 if (m === 0 && a)
-                  F = -1;
+                  T = -1;
                 else if (m === -1)
-                  x = e, F = e.findIndex((E) => !E.disabled && E[h]);
+                  C = e, T = e.findIndex((E) => !E.disabled && E[u]);
                 else {
-                  x = e.slice(0, m);
-                  let E = x.pop();
+                  C = e.slice(0, m);
+                  let E = C.pop();
                   for (; E && E.disabled; )
-                    E = x.pop();
-                  F = E && e.findIndex((M) => M[h] === E[h]);
+                    E = C.pop();
+                  T = E && e.findIndex((M) => M[u] === E[u]);
                 }
               }
-              if (F !== void 0) {
-                const x = F - m;
-                this.onNavigate(C, b, x);
+              if (T !== void 0) {
+                const C = T - m;
+                this.onNavigate(S, b, C);
               } else
-                F === void 0 && e.findIndex((x) => x[h] === g[h]) === e.length - 1 && this.onNavigate(C, b);
+                T === void 0 && e.findIndex((C) => C[u] === f[u]) === e.length - 1 && this.onNavigate(S, b);
             }
-          else if (!u && v || w)
-            this.onNavigate(C, b);
-          else if (h) {
-            let F;
-            if (b === f.down || b === f.right) {
-              const x = e.slice(m + 1).find((E) => !E.disabled && E[h]);
-              F = x && e.findIndex((E) => E[h] === x[h]);
-            } else if (b === f.up || b === f.left) {
-              let x;
+          else if (!h && v || w)
+            this.onNavigate(S, b);
+          else if (u) {
+            let T;
+            if (b === g.down || b === g.right) {
+              const C = e.slice(m + 1).find((E) => !E.disabled && E[u]);
+              T = C && e.findIndex((E) => E[u] === C[u]);
+            } else if (b === g.up || b === g.left) {
+              let C;
               if (m === 0 && a)
-                F = -1;
+                T = -1;
               else if (m === -1)
-                x = e, F = e.find((E) => !E.disabled && E[h]);
+                C = e, T = e.find((E) => !E.disabled && E[u]);
               else {
-                x = e.slice(0, m);
-                let E = x.pop();
+                C = e.slice(0, m);
+                let E = C.pop();
                 for (; E && E.disabled; )
-                  E = x.pop();
-                F = E && e.findIndex((M) => M[h] === E[h]);
+                  E = C.pop();
+                T = E && e.findIndex((M) => M[u] === E[u]);
               }
             }
-            if (F !== void 0) {
-              const x = F - m;
-              this.onNavigate(C, b, x);
+            if (T !== void 0) {
+              const C = T - m;
+              this.onNavigate(S, b, C);
             } else
-              F === void 0 && e.findIndex((x) => x[h] === g[h]) === e.length - 1 && this.onNavigate(C, b);
+              T === void 0 && e.findIndex((C) => C[u] === f[u]) === e.length - 1 && this.onNavigate(S, b);
           } else
-            this.onNavigate(C, b);
+            this.onNavigate(S, b);
           t.preventDefault();
         }
-        this.applyState(C);
+        this.applyState(S);
       }
     }, this.handleItemClick = (t, e) => {
       this.base.handleItemClick(t, e), this._valueDuringOnChange = void 0;
@@ -869,7 +869,7 @@ const Ue = {
     }, this.handleBlur = (t) => {
       if (this._skipFocusEvent || !this.state.focused)
         return;
-      const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { adaptive: s } = this.props, { windowWidth: n = 0 } = this.state, a = n <= Se && s, p = this.base.initState();
+      const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { adaptive: s } = this.props, { windowWidth: n = 0 } = this.state, a = n <= we && s, p = this.base.initState();
       p.syntheticEvent = t, p.data.focused = !1, p.events.push({ type: "onBlur" }), e && this.resetValueIfDisabledItem(), e && !a && this.base.togglePopup(p), this.applyState(p);
     }, this.handleDefaultItemClick = (t) => {
       const e = this.base.initState();
@@ -880,7 +880,7 @@ const Ue = {
       const e = this.base.initState();
       e.syntheticEvent = t, this.state.focused || (e.data.focused = !0), this.resetValueIfDisabledItem(), this.base.togglePopup(e), this.applyState(e);
     }, this.handleKeyPress = (t) => {
-      if (this.props.filterable || t.which === 0 || t.keyCode === f.enter)
+      if (this.props.filterable || t.which === 0 || t.keyCode === g.enter)
         return;
       let e = String.fromCharCode(t.charCode || t.keyCode);
       this.props.ignoreCase && (e = e.toLowerCase()), e === " " && t.preventDefault(), this.searchState = {
@@ -902,9 +902,9 @@ const Ue = {
       );
     }, this.setValidity = () => {
       this._select && this._select.setCustomValidity && this._select.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || Js
+        this.validity.valid ? "" : this.props.validationMessage || Xs
       );
-    }, We(Ue);
+    }, $e(Ye);
   }
   get _inputId() {
     return this.props.id + "-accessibility-id";
@@ -916,7 +916,7 @@ const Ue = {
     return this.props.id + "-guid";
   }
   get document() {
-    if (Fe)
+    if (Me)
       return this.element && this.element.ownerDocument || document;
   }
   /**
@@ -930,7 +930,7 @@ const Ue = {
    */
   get value() {
     let i;
-    return this._valueDuringOnChange !== void 0 ? i = this._valueDuringOnChange : this.props.value !== void 0 ? i = this.props.value : this.state.value !== void 0 ? i = this.state.value : this.props.defaultValue !== void 0 && (i = this.props.defaultValue), !G(i) && this.props.defaultItem !== void 0 && (i = this.props.defaultItem), i;
+    return this._valueDuringOnChange !== void 0 ? i = this._valueDuringOnChange : this.props.value !== void 0 ? i = this.props.value : this.state.value !== void 0 ? i = this.state.value : this.props.defaultValue !== void 0 && (i = this.props.defaultValue), !U(i) && this.props.defaultItem !== void 0 && (i = this.props.defaultItem), i;
   }
   /**
    * The index of the selected item.
@@ -957,30 +957,30 @@ const Ue = {
     };
   }
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : At.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : qt.defaultProps.validityStyles;
   }
   /**
    * @hidden
    */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : At.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : qt.defaultProps.required;
   }
   /**
    * @hidden
    */
   componentDidUpdate(i, t) {
-    var u;
+    var h;
     const { dataItemKey: e, virtual: s, groupField: n = "", textField: a } = this.props;
     let { data: p = [] } = this.props;
-    const c = i.virtual ? i.virtual.total : 0, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = i.opened !== void 0 ? i.opened : t.opened, h = !r && d;
-    if (this.base.getPopupSettings().animate || h && this.onPopupOpened(), s && s.total !== c)
+    const c = i.virtual ? i.virtual.total : 0, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = i.opened !== void 0 ? i.opened : t.opened, u = !r && d;
+    if (this.base.getPopupSettings().animate || u && this.onPopupOpened(), s && s.total !== c)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      const g = this.value, m = i.value !== void 0 ? i.value : t.value;
-      let v = p.findIndex((w) => R(w, g, e));
-      n !== "" && g && a && (v = (u = this.base.getGroupedDataModernMode(p, n)) == null ? void 0 : u.map((w) => w[a]).indexOf(g[a]));
-      const b = !R(m, g, e);
-      h && s ? this.base.scrollToVirtualItem(s, v) : h && !s ? (this.onPopupOpened(), p && p.length !== 0 && this.base.resetGroupStickyHeader(p[0][n], this), this.base.scrollToItem(v)) : d && r && g && b && !this._navigated ? this.base.scrollToItem(v) : d && r && this._navigated && (this._navigated && s && s.skip === 0 ? this.base.vs.reset() : this._navigated && s && s.skip === s.total - s.pageSize && this.base.vs.scrollToEnd());
+      const f = this.value, m = i.value !== void 0 ? i.value : t.value;
+      let v = p.findIndex((w) => R(w, f, e));
+      n !== "" && f && a && (v = (h = this.base.getGroupedDataModernMode(p, n)) == null ? void 0 : h.map((w) => w[a]).indexOf(f[a]));
+      const b = !R(m, f, e);
+      u && s ? this.base.scrollToVirtualItem(s, v) : u && !s ? (this.onPopupOpened(), p && p.length !== 0 && this.base.resetGroupStickyHeader(p[0][n], this), this.base.scrollToItem(v)) : d && r && f && b && !this._navigated ? this.base.scrollToItem(v) : d && r && this._navigated && (this._navigated && s && s.skip === 0 ? this.base.vs.reset() : this._navigated && s && s.skip === s.total - s.pageSize && this.base.vs.scrollToEnd());
     }
     this._navigated = !1, this.setValidity();
   }
@@ -989,7 +989,7 @@ const Ue = {
    */
   componentDidMount() {
     var i;
-    this.observerResize = Fe && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (i = this.document) != null && i.body && this.observerResize && this.observerResize.observe(this.document.body);
+    this.observerResize = Me && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (i = this.document) != null && i.body && this.observerResize && this.observerResize.observe(this.document.body);
   }
   /** @hidden */
   componentWillUnmount() {
@@ -1000,17 +1000,17 @@ const Ue = {
    * @hidden
    */
   render() {
-    const i = He(this).toLanguageString(Ht, le[Ht]), { style: t, className: e, label: s, dir: n, virtual: a, size: p, rounded: c, fillMode: d, adaptive: r } = this.props, { windowWidth: h = 0 } = this.state, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.value, m = V(g, this.props.textField), v = !this.validityStyles || this.validity.valid, b = this.base, w = b.vs, S = h <= Se && r;
+    const i = Ae(this).toLanguageString(Wt, ce[Wt]), { style: t, className: e, label: s, dir: n, virtual: a, size: p, rounded: c, fillMode: d, adaptive: r } = this.props, { windowWidth: u = 0 } = this.state, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = this.value, m = V(f, this.props.textField), v = !this.validityStyles || this.validity.valid, b = this.base, w = b.vs, k = u <= we && r;
     w.enabled = a !== void 0, a !== void 0 && (b.vs.skip = a.skip, b.vs.total = a.total, b.vs.pageSize = a.pageSize);
     const {
-      dataItemKey: D,
-      data: N = [],
-      disabled: O,
+      dataItemKey: F,
+      data: O = [],
+      disabled: N,
       tabIndex: _,
-      loading: C,
-      iconClassName: F,
-      valueRender: x
-    } = this.props, { focused: E } = this.state, M = N.findIndex((Y) => R(Y, g, D)), K = /* @__PURE__ */ o.createElement("span", { id: this._inputId, className: "k-input-inner" }, /* @__PURE__ */ o.createElement("span", { className: "k-input-value-text" }, m)), U = x !== void 0 ? x.call(void 0, K, g) : K, j = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+      loading: S,
+      iconClassName: T,
+      valueRender: C
+    } = this.props, { focused: E } = this.state, M = O.findIndex((Y) => R(Y, f, F)), H = /* @__PURE__ */ o.createElement("span", { id: this._inputId, className: "k-input-inner" }, /* @__PURE__ */ o.createElement("span", { className: "k-input-value-text" }, m)), J = C !== void 0 ? C.call(void 0, H, f) : H, j = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
       "span",
       {
         ref: this.componentRef,
@@ -1018,43 +1018,43 @@ const Ue = {
           "k-dropdownlist k-picker",
           e,
           {
-            [`k-picker-${Bt[p] || p}`]: p,
-            [`k-rounded-${Qs[c] || c}`]: c,
+            [`k-picker-${Kt[p] || p}`]: p,
+            [`k-rounded-${Zs[c] || c}`]: c,
             [`k-picker-${d}`]: d,
             "k-focus": E,
-            "k-disabled": O,
+            "k-disabled": N,
             "k-invalid": !v,
-            "k-loading": C,
+            "k-loading": S,
             "k-required": this.required
           }
         ),
         style: s ? { ...t, width: void 0 } : t,
         dir: n,
-        onMouseDown: u ? (Y) => {
+        onMouseDown: h ? (Y) => {
           Y.target.nodeName !== "INPUT" && (this.focusElement(this.base.wrapper), Y.preventDefault());
         } : void 0,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
-        tabIndex: $t(_, O),
+        tabIndex: Ut(_, N),
         accessKey: this.props.accessKey,
         onKeyDown: this.handleKeyDown,
         onKeyPress: this.handleKeyPress,
-        onClick: O ? void 0 : this.handleWrapperClick,
+        onClick: N ? void 0 : this.handleWrapperClick,
         role: "combobox",
         "aria-required": this.required,
-        "aria-disabled": O || void 0,
+        "aria-disabled": N || void 0,
         "aria-haspopup": "listbox",
-        "aria-expanded": u || !1,
+        "aria-expanded": h || !1,
         "aria-owns": this._listboxId,
-        "aria-activedescendant": u ? "option-" + this._guid + "-" + (M + (a ? a.skip : 0)) : void 0,
+        "aria-activedescendant": h ? "option-" + this._guid + "-" + (M + (a ? a.skip : 0)) : void 0,
         "aria-label": this.props.ariaLabel || this.props.label,
         "aria-labelledby": this.props.ariaLabelledBy,
         "aria-describedby": this.props.ariaDescribedBy || this._inputId,
         id: this.props.id,
         title: this.props.title
       },
-      U,
-      C && /* @__PURE__ */ o.createElement(ke, { className: "k-input-loading-icon", name: "loading" }),
+      J,
+      S && /* @__PURE__ */ o.createElement(Ce, { className: "k-input-loading-icon", name: "loading" }),
       /* @__PURE__ */ o.createElement(
         Te,
         {
@@ -1064,20 +1064,20 @@ const Ue = {
           "aria-hidden": !0,
           size: p,
           fillMode: d,
-          iconClass: F,
+          iconClass: T,
           className: "k-input-button",
           rounded: null,
           themeColor: "base",
-          icon: F ? void 0 : "caret-alt-down",
-          svgIcon: F ? this.props.svgIcon : Ut,
+          icon: T ? void 0 : "caret-alt-down",
+          svgIcon: T ? this.props.svgIcon : Yt,
           onMouseDown: (Y) => this.state.focused && Y.preventDefault()
         }
       ),
-      this.dummySelect(g),
-      !S && this.renderListContainer()
-    ), S && this.renderAdaptiveListContainer());
+      this.dummySelect(f),
+      !k && this.renderListContainer()
+    ), k && this.renderAdaptiveListContainer());
     return s ? /* @__PURE__ */ o.createElement(
-      $e,
+      Ue,
       {
         label: s,
         editorValue: m,
@@ -1097,27 +1097,27 @@ const Ue = {
       defaultItem: n,
       dataItemKey: a,
       virtual: p = { skip: 0, total: 0, pageSize: 0 }
-    } = this.props, c = this.base.vs, d = this.value, r = s.findIndex((u) => R(u, d, a)), h = this.base.navigation.navigate({
+    } = this.props, c = this.base.vs, d = this.value, r = s.findIndex((h) => R(h, d, a)), u = this.base.navigation.navigate({
       current: p.skip + r,
       max: (c.enabled ? p.total : s.length) - 1,
       min: n !== void 0 ? -1 : 0,
       keyCode: t,
       skipItems: e || void 0
     });
-    h !== void 0 && this.handleItemSelect(h, i), this.applyState(i);
+    u !== void 0 && this.handleItemSelect(u, i), this.applyState(i);
   }
   renderAdaptiveListContainer() {
-    const { windowWidth: i = 0 } = this.state, { header: t, footer: e, size: s, adaptiveTitle: n, groupField: a, groupStickyHeaderItemRender: p, list: c, data: d = [] } = this.props, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = {
+    const { windowWidth: i = 0 } = this.state, { header: t, footer: e, size: s, adaptiveTitle: n, groupField: a, groupStickyHeaderItemRender: p, list: c, data: d = [] } = this.props, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = {
       navigatable: !1,
       navigatableElements: [],
       expand: r,
       animation: !0,
-      onClose: (g) => this.handleWrapperClick(g),
-      animationStyles: i <= xt ? { top: 0, width: "100%", height: "100%" } : void 0,
-      className: i <= xt ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
+      onClose: (f) => this.handleWrapperClick(f),
+      animationStyles: i <= wt ? { top: 0, width: "100%", height: "100%" } : void 0,
+      className: i <= wt ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
     };
-    let { group: u } = this.state;
-    return u === void 0 && a !== void 0 && (u = V(d[0], a)), /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(Yt, { ...h }, /* @__PURE__ */ o.createElement(Jt, { className: "k-text-center" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ o.createElement("div", null, n)), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ o.createElement(
+    let { group: h } = this.state;
+    return h === void 0 && a !== void 0 && (h = V(d[0], a)), /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(Qt, { ...u }, /* @__PURE__ */ o.createElement(Xt, { className: "k-text-center" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ o.createElement("div", null, n)), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ o.createElement(
       Te,
       {
         tabIndex: 0,
@@ -1127,21 +1127,21 @@ const Ue = {
         fillMode: "flat",
         onClick: this.handleWrapperClick,
         icon: "x",
-        svgIcon: ot
+        svgIcon: lt
       }
-    ))), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderListFilter())), /* @__PURE__ */ o.createElement(at, { className: "!k-overflow-hidden" }, t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), /* @__PURE__ */ o.createElement(
+    ))), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderListFilter())), /* @__PURE__ */ o.createElement(rt, { className: "!k-overflow-hidden" }, t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), /* @__PURE__ */ o.createElement(
       "div",
       {
         className: B(
           "k-list",
           {
-            [`k-list-${Bt[s] || s}`]: s,
+            [`k-list-${Kt[s] || s}`]: s,
             "k-virtual-list": this.base.vs.enabled
           }
         )
       },
       this.renderDefaultItem(),
-      !c && u && d.length !== 0 && /* @__PURE__ */ o.createElement(Ae, { group: u, groupMode: "modern", render: p }),
+      !c && h && d.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: h, groupMode: "modern", render: p }),
       this.renderList()
     ), e && /* @__PURE__ */ o.createElement("div", { className: "k-list-footer" }, e))));
   }
@@ -1155,7 +1155,7 @@ const Ue = {
       filterable: p,
       skipDisabledItems: c = !0
     } = this.props, d = this.props.filter ? this.props.filter : this.state.text;
-    return c && e && !d && !i ? t.findIndex((r) => !r.disabled && r[e]) : G(i) && d === void 0 || p && d === "" ? t.findIndex((r) => R(r, i, s)) : d ? this._lastKeypressIsFilter ? a(t, d, e) : t.findIndex((r) => R(r, i, s)) : n.skip === 0 ? 0 : -1;
+    return c && e && !d && !i ? t.findIndex((r) => !r.disabled && r[e]) : U(i) && d === void 0 || p && d === "" ? t.findIndex((r) => R(r, i, s)) : d ? this._lastKeypressIsFilter ? a(t, d, e) : t.findIndex((r) => R(r, i, s)) : n.skip === 0 ? 0 : -1;
   }
   focusElement(i) {
     this._skipFocusEvent = !0, i.focus(), window.setTimeout(() => this._skipFocusEvent = !1, 30);
@@ -1178,13 +1178,13 @@ const Ue = {
     return t !== void 0 && t !== -1 && i && i.length > 0 && i[t].disabled;
   }
 };
-let Dt = At;
-Dt.displayName = "DropDownList";
-Dt.propTypes = {
+let Tt = qt;
+Tt.displayName = "DropDownList";
+Tt.propTypes = {
   delay: l.number,
   ignoreCase: l.bool,
   iconClassName: l.string,
-  svgIcon: gs,
+  svgIcon: ms,
   defaultItem: l.any,
   valueRender: l.func,
   valueMap: l.func,
@@ -1199,25 +1199,25 @@ Dt.propTypes = {
   groupField: l.string,
   list: l.any,
   skipDisabledItems: l.bool,
-  ...ie.propTypes
+  ...oe.propTypes
 };
-Dt.defaultProps = {
+Tt.defaultProps = {
   delay: 500,
   tabIndex: 0,
   ignoreCase: !0,
-  ...ie.defaultProps,
+  ...oe.defaultProps,
   required: !1,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   groupMode: "modern"
 };
-const Xs = Be(), Zs = St(wt(
-  Xs,
-  Dt
+const ei = Be(), ti = Et(Ft(
+  ei,
+  Tt
 ));
-Zs.displayName = "KendoReactDropDownList";
-class Zt extends o.Component {
+ti.displayName = "KendoReactDropDownList";
+class ts extends o.Component {
   constructor() {
     super(...arguments), this._input = null;
   }
@@ -1228,8 +1228,8 @@ class Zt extends o.Component {
     return this._input;
   }
   componentDidUpdate(t) {
-    const e = t.value, s = t.suggestedText, { value: n, suggestedText: a, focused: p } = this.props, c = this.input, d = e !== n || a !== s, r = d && e.startsWith(n) && !(s && a && s.endsWith(a)), h = ws(document);
-    p && c && h !== c && c.focus(), a && d && !r && c && c.setSelectionRange(n.length - a.length, n.length);
+    const e = t.value, s = t.suggestedText, { value: n, suggestedText: a, focused: p } = this.props, c = this.input, d = e !== n || a !== s, r = d && e.startsWith(n) && !(s && a && s.endsWith(a)), u = Fs(document);
+    p && c && u !== c && c.focus(), a && d && !r && c && c.setSelectionRange(n.length - a.length, n.length);
   }
   render() {
     const { expanded: t = !1, disabled: e, role: s = "listbox", render: n } = this.props, a = /* @__PURE__ */ o.createElement(
@@ -1269,12 +1269,12 @@ class Zt extends o.Component {
     return n ? n.call(void 0, a) : a;
   }
 }
-class lt extends o.Component {
+class dt extends o.Component {
   constructor() {
     super(...arguments), this.onMouseDown = (t) => t.preventDefault();
   }
   render() {
-    const t = He(this).toLanguageString(st, le[st]);
+    const t = Ae(this).toLanguageString(nt, ce[nt]);
     return /* @__PURE__ */ o.createElement(
       "span",
       {
@@ -1286,14 +1286,14 @@ class lt extends o.Component {
         title: t,
         key: "clearbutton"
       },
-      /* @__PURE__ */ o.createElement(ke, { name: "x", icon: ot })
+      /* @__PURE__ */ o.createElement(Ce, { name: "x", icon: lt })
     );
   }
 }
-vs(lt);
-const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe, yt = class extends o.Component {
+ys(dt);
+const si = Lt, qe = si, ii = "Please enter a valid value!", { sizeMap: yt, roundedMap: ni } = Ge, xt = class extends o.Component {
   constructor(i) {
-    super(i), this.state = {}, this.base = new ie(this), this._element = null, this._suggested = "", this._skipBlur = !1, this._input = null, this._adaptiveFilterInput = null, this.itemHeight = 0, this.focus = () => {
+    super(i), this.state = {}, this.base = new oe(this), this._element = null, this._suggested = "", this._skipBlur = !1, this._input = null, this._adaptiveFilterInput = null, this.itemHeight = 0, this.focus = () => {
       this._input && this._input.focus();
     }, this.handleItemSelect = (t, e) => {
       const { data: s = [], virtual: n, dataItemKey: a } = this.props, p = n ? n.skip : 0, c = s[t - p], d = !R(c, this.value, a);
@@ -1312,7 +1312,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
       }
       this.applyState(d);
     }, this.renderMobileListFilter = () => {
-      const t = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, e = V(this.value, this.props.textField), s = G(t) ? t : e;
+      const t = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, e = V(this.value, this.props.textField), s = U(t) ? t : e;
       return /* @__PURE__ */ o.createElement(
         Re,
         {
@@ -1338,8 +1338,8 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
       const p = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : s ? s.children[0].offsetHeight : 0), d = t.target.scrollTop - e.skip * p;
       this.props.groupMode === "modern" && (a = this.base.getGroupedDataModernMode(a, n));
       let r = a[0][n];
-      for (let h = 1; h < a.length && !(p * h > d); h++)
-        a[h] && a[h][n] && (r = a[h][n]);
+      for (let u = 1; u < a.length && !(p * u > d); u++)
+        a[u] && a[u][n] && (r = a[u][n]);
       r !== this.state.group && (this.setState({
         group: r
       }), this.props.onGroupScroll && this.props.onGroupScroll.call(void 0, { group: r }));
@@ -1357,57 +1357,57 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
         n.syntheticEvent = t, this.base.togglePopup(n), this.base.filterChanged(s, n), this.applyState(n);
       }
     }, this.onInputKeyDown = (t) => {
-      const { data: e = [], skipDisabledItems: s, textField: n, dataItemKey: a, groupField: p } = this.props, c = this.value, d = Math.max(0, e.findIndex((w) => R(w, c, a))), r = t.keyCode, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = this.base.initState();
-      if (u.syntheticEvent = t, !t.altKey && (r === f.up || r === f.down)) {
+      const { data: e = [], skipDisabledItems: s, textField: n, dataItemKey: a, groupField: p } = this.props, c = this.value, d = Math.max(0, e.findIndex((w) => R(w, c, a))), r = t.keyCode, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
+      if (h.syntheticEvent = t, !t.altKey && (r === g.up || r === g.down)) {
         if (t.preventDefault(), p !== "" && n)
-          if (!this.props.skipDisabledItems && h)
-            this.onNavigate(u, r);
+          if (!this.props.skipDisabledItems && u)
+            this.onNavigate(h, r);
           else {
             let w = 0;
-            if (r === f.down || r === f.right) {
-              const S = e.slice(d + 1).find((D) => !D.disabled && D[n]);
-              w = S && e.findIndex((D) => D[n] === S[n]);
-            } else if (r === f.up || r === f.left) {
-              let S;
+            if (r === g.down || r === g.right) {
+              const k = e.slice(d + 1).find((F) => !F.disabled && F[n]);
+              w = k && e.findIndex((F) => F[n] === k[n]);
+            } else if (r === g.up || r === g.left) {
+              let k;
               if (d === 0)
-                S = e, w = e.findIndex((D) => !D.disabled && D[n]);
+                k = e, w = e.findIndex((F) => !F.disabled && F[n]);
               else {
-                S = e.slice(0, d);
-                let D = S.pop();
-                for (; D && D.disabled; )
-                  D = S.pop();
-                w = D && e.findIndex((N) => N[n] === D[n]);
+                k = e.slice(0, d);
+                let F = k.pop();
+                for (; F && F.disabled; )
+                  F = k.pop();
+                w = F && e.findIndex((O) => O[n] === F[n]);
               }
             }
             if (w !== void 0) {
-              const S = w - d;
-              this.onNavigate(u, r, S);
+              const k = w - d;
+              this.onNavigate(h, r, k);
             } else
-              w === void 0 && e.findIndex((S) => S[n] === c[n]) === e.length - 1 && this.onNavigate(u, r);
+              w === void 0 && e.findIndex((k) => k[n] === c[n]) === e.length - 1 && this.onNavigate(h, r);
           }
-        else if (!this.props.skipDisabledItems && h)
-          this.onNavigate(u, r);
+        else if (!this.props.skipDisabledItems && u)
+          this.onNavigate(h, r);
         else {
           let w = null;
-          if (r === f.down || r === f.right)
-            w = e.slice(d + 1).find((S) => !S.disabled);
-          else if (r === f.up || r === f.left) {
-            const S = e.slice(0, d);
-            for (w = S.pop(); w && w.disabled; )
-              w = S.pop();
+          if (r === g.down || r === g.right)
+            w = e.slice(d + 1).find((k) => !k.disabled);
+          else if (r === g.up || r === g.left) {
+            const k = e.slice(0, d);
+            for (w = k.pop(); w && w.disabled; )
+              w = k.pop();
           }
           if (w) {
-            const S = w.id - d - 1;
-            this.onNavigate(u, r, S);
+            const k = w.id - d - 1;
+            this.onNavigate(h, r, k);
           } else
-            this.onNavigate(u, r);
+            this.onNavigate(h, r);
         }
-        this.applyState(u);
+        this.applyState(h);
       }
-      const g = () => {
-        t.preventDefault(), this.base.togglePopup(u), this.applyState(u);
+      const f = () => {
+        t.preventDefault(), this.base.togglePopup(h), this.applyState(h);
       }, m = this.getFocusedIndex(), v = m === -1, b = !v && this.getCurrentValueDisabledStatus(n, e, m);
-      h ? r === f.pageUp ? this.base.scrollPopupByPageSize(-1) : r === f.pageDown ? this.base.scrollPopupByPageSize(1) : t.altKey && r === f.up ? g() : r === f.enter ? (t.preventDefault(), (n && !v && t.currentTarget.value ? e[m][n] : void 0) ? !s && n && b ? this.clearValueOnEnterOrEsc(t) : b || this.applyValueOnEnter(t.currentTarget.value, u) : this.applyValueOnEnter(t.currentTarget.value, u)) : r === f.esc && (!s && n && b && this.clearValueOnEnterOrEsc(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, u)) : !h && r === f.esc ? this.clearValueOnEnterOrEsc(t) : t.altKey && r === f.down && g();
+      u ? r === g.pageUp ? this.base.scrollPopupByPageSize(-1) : r === g.pageDown ? this.base.scrollPopupByPageSize(1) : t.altKey && r === g.up ? f() : r === g.enter ? (t.preventDefault(), (n && !v && t.currentTarget.value ? e[m][n] : void 0) ? !s && n && b ? this.clearValueOnEnterOrEsc(t) : b || this.applyValueOnEnter(t.currentTarget.value, h) : this.applyValueOnEnter(t.currentTarget.value, h)) : r === g.esc && (!s && n && b && this.clearValueOnEnterOrEsc(t), this.applyValueOnRejectSuggestions(t.currentTarget.value, h)) : !u && r === g.esc ? this.clearValueOnEnterOrEsc(t) : t.altKey && r === g.down && f();
     }, this.inputOnChange = (t) => {
       const e = this.base.initState();
       e.syntheticEvent = t;
@@ -1415,7 +1415,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
       if (this.props.suggest) {
         const p = n.selectionEnd === a.length;
         let c = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-        G(c) || (c = V(this.value, this.props.textField) || "");
+        U(c) || (c = V(this.value, this.props.textField) || "");
         const d = c && c === a, r = c && c.length > a.length;
         d || r || !p ? this._suggested = "" : this.suggestValue(a);
       }
@@ -1434,15 +1434,15 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
       e.syntheticEvent = t, t.stopPropagation(), this.clearValue();
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || ei
+        this.validity.valid ? "" : this.props.validationMessage || ii
       );
-    }, We(Ue);
+    }, $e(Ye);
   }
   get _inputId() {
     return this.props.id;
   }
   get document() {
-    if (Fe)
+    if (Me)
       return this.element && this.element.ownerDocument || document;
   }
   /** @hidden */
@@ -1453,7 +1453,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
    * The mobile mode of the ComboBox.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= Se && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= we && this.props.adaptive);
   }
   /**
    * The value of the ComboBox.
@@ -1493,31 +1493,31 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
     };
   }
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : yt.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : xt.defaultProps.validityStyles;
   }
   /** @hidden */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : yt.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : xt.defaultProps.required;
   }
   /** @hidden */
   componentDidUpdate(i, t) {
-    var g;
-    const { dataItemKey: e, virtual: s, groupField: n = "", data: a = [], textField: p } = this.props, c = i.virtual ? i.virtual.total : 0, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = i.opened !== void 0 ? i.opened : t.opened, h = !r && d, u = this.value;
-    if (this._valueOnDidUpdate = u, s && s.total !== c)
+    var f;
+    const { dataItemKey: e, virtual: s, groupField: n = "", data: a = [], textField: p } = this.props, c = i.virtual ? i.virtual.total : 0, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = i.opened !== void 0 ? i.opened : t.opened, u = !r && d, h = this.value;
+    if (this._valueOnDidUpdate = h, s && s.total !== c)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
       const m = i.value !== void 0 ? i.value : t.value;
-      let v = a.findIndex((w) => R(w, u, e));
-      this.props.groupMode === "modern" && p && u && (v = (g = this.base.getGroupedDataModernMode(a, n)) == null ? void 0 : g.map((w) => w[p]).indexOf(u[p]));
-      const b = !R(m, u, e);
-      h && s ? this.base.scrollToVirtualItem(s, v) : h && !s ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][n], this), this.base.scrollToItem(v)) : d && r && u && b && this.base.scrollToItem(v);
+      let v = a.findIndex((w) => R(w, h, e));
+      this.props.groupMode === "modern" && p && h && (v = (f = this.base.getGroupedDataModernMode(a, n)) == null ? void 0 : f.map((w) => w[p]).indexOf(h[p]));
+      const b = !R(m, h, e);
+      u && s ? this.base.scrollToVirtualItem(s, v) : u && !s ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][n], this), this.base.scrollToItem(v)) : d && r && h && b && this.base.scrollToItem(v);
     }
-    h && this._input && this._input.focus(), this.setValidity();
+    u && this._input && this._input.focus(), this.setValidity();
   }
   /** @hidden */
   componentDidMount() {
     var i;
-    this.observerResize = Fe && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (i = this.document) != null && i.body && this.observerResize && this.observerResize.observe(this.document.body);
+    this.observerResize = Me && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (i = this.document) != null && i.body && this.observerResize && this.observerResize.observe(this.document.body);
   }
   /** @hidden */
   componentWillUnmount() {
@@ -1526,39 +1526,39 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
   }
   /** @hidden */
   render() {
-    const i = He(this).toLanguageString(Lt, le[Lt]), t = He(this).toLanguageString(
-      zt,
-      le[zt]
+    const i = Ae(this).toLanguageString(Ht, ce[Ht]), t = Ae(this).toLanguageString(
+      At,
+      ce[At]
     ), {
       dir: e,
       disabled: s,
-      clearButton: n = yt.defaultProps.clearButton,
+      clearButton: n = xt.defaultProps.clearButton,
       label: a,
       textField: p,
       adaptive: c,
       className: d,
       style: r,
-      loading: h,
-      iconClassName: u,
-      virtual: g,
+      loading: u,
+      iconClassName: h,
+      virtual: f,
       size: m,
       rounded: v,
       fillMode: b,
       opened: w = this.state.opened,
-      placeholder: S
-    } = this.props, { windowWidth: D = 0 } = this.state, N = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, _ = V(this.value, p), C = G(O) ? O : _, F = n && (!!C || G(this.value)), E = this.base.vs, M = this.props.id || this._inputId, K = D <= Se && c;
-    E.enabled = g !== void 0, g !== void 0 && (E.skip = g.skip, E.total = g.total, E.pageSize = g.pageSize);
-    const U = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+      placeholder: k
+    } = this.props, { windowWidth: F = 0 } = this.state, O = !this.validityStyles || this.validity.valid, N = this.props.filter !== void 0 ? this.props.filter : this.state.text, _ = V(this.value, p), S = U(N) ? N : _, T = n && (!!S || U(this.value)), E = this.base.vs, M = this.props.id || this._inputId, H = F <= we && c;
+    E.enabled = f !== void 0, f !== void 0 && (E.skip = f.skip, E.total = f.total, E.pageSize = f.pageSize);
+    const [J, j] = qe(this.props.prefix || o.Fragment), [Y, W] = qe(this.props.suffix || o.Fragment), ge = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
       "span",
       {
         className: B(
           "k-combobox k-input",
           {
-            [`k-input-${vt[m] || m}`]: m,
-            [`k-rounded-${ti[v] || v}`]: v,
+            [`k-input-${yt[m] || m}`]: m,
+            [`k-rounded-${ni[v] || v}`]: v,
             [`k-input-${b}`]: b,
-            "k-invalid": !N,
-            "k-loading": h,
+            "k-invalid": !O,
+            "k-loading": u,
             "k-required": this.required,
             "k-disabled": s
           },
@@ -1568,66 +1568,67 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
         style: a ? { ...r, width: void 0 } : r,
         dir: e
       },
-      this.renderSearchBar(C || "", M, S),
-      F && !h && /* @__PURE__ */ o.createElement(lt, { onClick: this.clearButtonClick, key: "clearbutton" }),
-      h && /* @__PURE__ */ o.createElement(ke, { className: "k-input-loading-icon", name: "loading", key: "loading" }),
+      /* @__PURE__ */ o.createElement(J, { ...j }),
+      this.renderSearchBar(S || "", M, k),
+      T && !u && /* @__PURE__ */ o.createElement(dt, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      u && /* @__PURE__ */ o.createElement(Ce, { className: "k-input-loading-icon", name: "loading", key: "loading" }),
+      /* @__PURE__ */ o.createElement(Y, { ...W }),
       /* @__PURE__ */ o.createElement(
         Te,
         {
           tabIndex: -1,
           type: "button",
           "aria-label": w ? t : i,
-          icon: u ? void 0 : "caret-alt-down",
-          svgIcon: u ? this.props.svgIcon : Ut,
-          iconClass: u,
+          icon: h ? void 0 : "caret-alt-down",
+          svgIcon: h ? this.props.svgIcon : Yt,
+          iconClass: h,
           size: m,
           fillMode: b,
           rounded: null,
           themeColor: "base",
           className: "k-input-button",
           onClick: this.toggleBtnClick,
-          onMouseDown: (j) => j.preventDefault()
+          onMouseDown: (Z) => Z.preventDefault()
         }
       ),
-      !K && this.renderListContainer()
-    ), K && this.renderAdaptiveListContainer());
+      !H && this.renderListContainer()
+    ), H && this.renderAdaptiveListContainer());
     return a ? /* @__PURE__ */ o.createElement(
-      $e,
+      Ue,
       {
         label: a,
         editorId: M,
-        editorValue: C,
-        editorValid: N,
+        editorValue: S,
+        editorValid: O,
         editorDisabled: s,
         style: { width: r ? r.width : void 0 },
-        children: U
+        children: ge
       }
-    ) : U;
+    ) : ge;
   }
   /** @hidden */
   onNavigate(i, t, e) {
     const { data: s = [], virtual: n = { skip: 0 } } = this.props, a = this.props.filter ? this.props.filter : this.state.text, p = this.getFocusedIndex(), c = this.base.vs, d = this.value;
-    if (this._suggested = "", p !== -1 && !G(d))
+    if (this._suggested = "", p !== -1 && !U(d))
       this.handleItemSelect(p, i);
     else if (a === "")
       this.handleItemSelect(0, i);
     else {
-      let r = n.skip + p;
-      const h = this.base.navigation.navigate({
+      const r = n.skip + p, u = this.base.navigation.navigate({
         keyCode: t,
         current: r,
         max: (c.enabled ? c.total : s.length) - 1,
         min: 0,
         skipItems: e || void 0
       });
-      h !== void 0 && this.handleItemSelect(h, i);
+      u !== void 0 && this.handleItemSelect(u, i);
     }
   }
   getCurrentValueDisabledStatus(i, t, e) {
     return i && t && t[e] && t[e].disabled;
   }
   applyValueOnEnter(i, t) {
-    const { data: e = [], textField: s, allowCustom: n } = this.props, a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, c = V(this.value, s) === i ? this.index : Kt(e, i, s), d = c !== -1;
+    const { data: e = [], textField: s, allowCustom: n } = this.props, a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, c = V(this.value, s) === i ? this.index : zt(e, i, s), d = c !== -1;
     let r;
     if (this._suggested = "", d)
       r = e[c];
@@ -1638,31 +1639,31 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
     this.triggerOnChange(r, t), a && this.base.togglePopup(t), this.props.filter === void 0 && this.state.text !== void 0 && (t.data.text = void 0), this.applyState(t);
   }
   applyValueOnRejectSuggestions(i, t) {
-    const { data: e = [], textField: s, allowCustom: n } = this.props, a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = V(this.value, s), c = this.state.windowWidth && this.state.windowWidth <= Se;
-    if (this._suggested = "", i === p || i === "" && !G(p))
+    const { data: e = [], textField: s, allowCustom: n } = this.props, a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = V(this.value, s), c = this.state.windowWidth && this.state.windowWidth <= we;
+    if (this._suggested = "", i === p || i === "" && !U(p))
       return a && !c && this.base.togglePopup(t), this.applyState(t);
-    const d = Kt(e, i, s, !0), r = d !== -1;
-    let h = null;
-    r ? h = e[d] : n && (h = i ? s ? { [s]: i } : i : null), this.triggerOnChange(h, t), this.state.text !== void 0 && (t.data.text = void 0, this.base.filterChanged("", t)), a && !c && this.base.togglePopup(t), this.applyState(t);
+    const d = zt(e, i, s, !0), r = d !== -1;
+    let u = null;
+    r ? u = e[d] : n && (u = i ? s ? { [s]: i } : i : null), this.triggerOnChange(u, t), this.state.text !== void 0 && (t.data.text = void 0, this.base.filterChanged("", t)), a && !c && this.base.togglePopup(t), this.applyState(t);
   }
   selectFocusedItem(i, t) {
     const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { data: s = [], textField: n, virtual: a = { skip: 0 }, focusedItemIndex: p = Ve } = this.props, c = a.skip, d = i === "" && c === 0 ? 0 : p(s, i, n);
     return d !== -1 ? this.handleItemSelect(d + c, t) : (this.triggerOnChange(null, t), this.state.text !== void 0 && (t.data.text = void 0)), e && this.base.togglePopup(t), this.applyState(t);
   }
   renderAdaptiveListContainer() {
-    const { windowWidth: i = 0 } = this.state, { header: t, footer: e, size: s, data: n = [], groupField: a, groupMode: p, list: c, virtual: d, adaptiveTitle: r, groupStickyHeaderItemRender: h } = this.props, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
-    let { group: g } = this.state;
-    g === void 0 && a !== void 0 && (g = V(n[0], a));
+    const { windowWidth: i = 0 } = this.state, { header: t, footer: e, size: s, data: n = [], groupField: a, groupMode: p, list: c, virtual: d, adaptiveTitle: r, groupStickyHeaderItemRender: u } = this.props, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    let { group: f } = this.state;
+    f === void 0 && a !== void 0 && (f = V(n[0], a));
     const m = {
       navigatable: !1,
       navigatableElements: [],
-      expand: u,
+      expand: h,
       animation: !0,
       onClose: (v) => this.toggleBtnClick(v),
-      animationStyles: i <= xt ? { top: 0, width: "100%", height: "100%" } : void 0,
-      className: i <= xt ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
+      animationStyles: i <= wt ? { top: 0, width: "100%", height: "100%" } : void 0,
+      className: i <= wt ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
     };
-    return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(Yt, { ...m }, /* @__PURE__ */ o.createElement(Jt, { className: "k-text-center" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ o.createElement("div", null, r)), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ o.createElement(
+    return /* @__PURE__ */ o.createElement(Qt, { ...m }, /* @__PURE__ */ o.createElement(Xt, { className: "k-text-center" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ o.createElement("div", null, r)), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ o.createElement(
       Te,
       {
         tabIndex: 0,
@@ -1672,51 +1673,51 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
         fillMode: "flat",
         onClick: this.toggleBtnClick,
         icon: "x",
-        svgIcon: ot
+        svgIcon: lt
       }
-    ))), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())), /* @__PURE__ */ o.createElement(at, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ o.createElement("div", { className: B(
+    ))), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())), /* @__PURE__ */ o.createElement(rt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ o.createElement("div", { className: B(
       {
-        ["k-list"]: !c,
-        ["k-list-lg"]: !0,
-        ["k-virtual-list"]: d,
-        ["k-data-table"]: c,
-        [`k-table-${vt[s] || s}`]: c && s
+        "k-list": !c,
+        "k-list-lg": !0,
+        "k-virtual-list": d,
+        "k-data-table": c,
+        [`k-table-${yt[s] || s}`]: c && s
       }
-    ) }, t && /* @__PURE__ */ o.createElement("div", { className: "k-table-header" }, t), !c && g && n.length !== 0 && /* @__PURE__ */ o.createElement(Ae, { group: g, groupMode: p, render: h }), this.renderList(), e && /* @__PURE__ */ o.createElement("div", { className: "k-list-footer" }, e))))));
+    ) }, t && /* @__PURE__ */ o.createElement("div", { className: "k-table-header" }, t), !c && f && n.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: f, groupMode: p, render: u }), this.renderList(), e && /* @__PURE__ */ o.createElement("div", { className: "k-list-footer" }, e)))));
   }
   renderListContainer() {
-    const i = this.base, { dir: t, header: e, footer: s, data: n = [], groupField: a, groupMode: p, size: c, list: d, virtual: r, groupStickyHeaderItemRender: h } = this.props, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = i.getPopupSettings(), m = g.width !== void 0 ? g.width : i.popupWidth;
+    const i = this.base, { dir: t, header: e, footer: s, data: n = [], groupField: a, groupMode: p, size: c, list: d, virtual: r, groupStickyHeaderItemRender: u } = this.props, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = i.getPopupSettings(), m = f.width !== void 0 ? f.width : i.popupWidth;
     let { group: v } = this.state;
     return v === void 0 && a !== void 0 && (v = V(n[0], a)), /* @__PURE__ */ o.createElement(
-      Et,
+      Dt,
       {
         width: m,
         popupSettings: {
-          animate: g.animate,
+          animate: f.animate,
           anchor: this.element,
-          show: u,
+          show: h,
           popupClass: B(
-            g.popupClass,
+            f.popupClass,
             "k-list-container",
             "k-combobox-popup"
           ),
-          className: g.className,
-          appendTo: g.appendTo
+          className: f.className,
+          appendTo: f.appendTo
         },
         dir: t !== void 0 ? t : this.base.dirCalculated,
         itemsCount: [n.length]
       },
       /* @__PURE__ */ o.createElement("div", { className: B(
         {
-          ["k-list"]: !d,
-          [`k-list-${vt[c] || c}`]: !d && c,
-          ["k-virtual-list"]: r,
-          ["k-data-table"]: d,
-          [`k-table-${vt[c] || c}`]: d && c
+          "k-list": !d,
+          [`k-list-${yt[c] || c}`]: !d && c,
+          "k-virtual-list": r,
+          "k-data-table": d,
+          [`k-table-${yt[c] || c}`]: d && c
         }
-      ) }, e && /* @__PURE__ */ o.createElement("div", { className: "k-table-header" }, e), !d && v && n.length !== 0 && /* @__PURE__ */ o.createElement(Ae, { group: v, groupMode: p, render: h }), this.renderList(), s && /* @__PURE__ */ o.createElement("div", { className: B(
+      ) }, e && /* @__PURE__ */ o.createElement("div", { className: "k-table-header" }, e), !d && v && n.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: v, groupMode: p, render: u }), this.renderList(), s && /* @__PURE__ */ o.createElement("div", { className: B(
         {
-          ["k-list-footer"]: !this.props.footerClassName
+          "k-list-footer": !this.props.footerClassName
         },
         this.props.footerClassName
       ) }, s))
@@ -1731,13 +1732,13 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
       groupHeaderItemRender: a,
       data: p = [],
       virtual: c = { skip: 0, total: void 0 }
-    } = this.props, d = i.getPopupSettings(), r = i.vs, h = c.skip, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = `translateY(${r.translate}px)`, m = u ? this.getFocusedIndex() : void 0, v = this.props.filter !== void 0 ? this.props.filter : this.state.text, b = V(this.value, t), w = G(v) && v !== b ? null : this.value, S = this.props.list || Ge;
+    } = this.props, d = i.getPopupSettings(), r = i.vs, u = c.skip, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = `translateY(${r.translate}px)`, m = h ? this.getFocusedIndex() : void 0, v = this.props.filter !== void 0 ? this.props.filter : this.state.text, b = V(this.value, t), w = U(v) && v !== b ? null : this.value, k = this.props.list || je;
     return /* @__PURE__ */ o.createElement(
-      S,
+      k,
       {
         id: i.listBoxId,
         virtual: !!c,
-        show: u,
+        show: h,
         data: p,
         focusedIndex: m,
         value: w,
@@ -1747,24 +1748,24 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
         groupMode: this.props.groupMode,
         isMultiColumn: this.props.isMultiColumn,
         optionsGuid: i.guid,
-        listRef: (D) => {
-          r.list = this.base.list = D, this.itemHeight = 0;
+        listRef: (F) => {
+          r.list = this.base.list = F, this.itemHeight = 0;
         },
-        wrapperStyle: this.state.windowWidth && this.state.windowWidth > Se ? { maxHeight: d.height } : {},
+        wrapperStyle: this.state.windowWidth && this.state.windowWidth > we ? { maxHeight: d.height } : {},
         wrapperCssClass: B(
           "k-list-content",
           {
-            ["k-list-scroller"]: !c
+            "k-list-scroller": !c
           }
         ),
-        listStyle: r.enabled ? { transform: g } : void 0,
+        listStyle: r.enabled ? { transform: f } : void 0,
         key: "listkey",
-        skip: h,
+        skip: u,
         onClick: this.handleItemClick,
         itemRender: n,
         groupHeaderItemRender: a,
         noDataRender: s,
-        onMouseDown: (D) => D.preventDefault(),
+        onMouseDown: (F) => F.preventDefault(),
         onScroll: this.onScroll,
         wrapperRef: r.scrollerRef,
         scroller: this.base.renderScrollElement(),
@@ -1779,9 +1780,9 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
       data: a = [],
       dataItemKey: p,
       virtual: c = { skip: 0 }
-    } = this.props, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = this.value, h = Math.max(0, a.findIndex((u) => R(u, r, p)));
+    } = this.props, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = this.value, u = Math.max(0, a.findIndex((h) => R(h, r, p)));
     return this._suggested && !R(this._valueOnDidUpdate, r, p) && (this._suggested = ""), /* @__PURE__ */ o.createElement(
-      Zt,
+      ts,
       {
         id: t,
         readOnly: d && this.mobileMode,
@@ -1791,7 +1792,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
         accessKey: this.props.accessKey,
         value: i + this._suggested,
         suggestedText: this._suggested,
-        ref: (u) => this._input = u && u.input,
+        ref: (h) => this._input = h && h.input,
         onClick: this.onInputClick,
         onKeyDown: this.onInputKeyDown,
         onChange: this.inputOnChange,
@@ -1800,7 +1801,7 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
         disabled: n,
         expanded: d,
         owns: this.base.listBoxId,
-        activedescendant: `option-${this.base.guid}-${h + c.skip}`,
+        activedescendant: `option-${this.base.guid}-${u + c.skip}`,
         role: "combobox",
         ariaLabelledBy: this.props.ariaLabelledBy,
         ariaDescribedBy: this.props.ariaDescribedBy,
@@ -1817,28 +1818,28 @@ const ei = "Please enter a valid value!", { sizeMap: vt, roundedMap: ti } = qe,
   }
   triggerOnChange(i, t) {
     const e = this.value;
-    !G(e) && !G(i) || R(e, i, this.props.dataItemKey) || (this.props.value === void 0 && (t.data.value = i), this._valueDuringOnChange = i, t.events.push({ type: "onChange" }));
+    !U(e) && !U(i) || R(e, i, this.props.dataItemKey) || (this.props.value === void 0 && (t.data.value = i), this._valueDuringOnChange = i, t.events.push({ type: "onChange" }));
   }
   getFocusedIndex() {
     const i = this.value, { data: t = [], textField: e, dataItemKey: s, virtual: n = { skip: 0 }, focusedItemIndex: a = Ve, skipDisabledItems: p } = this.props, c = this.props.filter ? this.props.filter : this.state.text;
-    return G(i) && c === void 0 ? t.findIndex((d) => R(d, i, s)) : c ? a(t, c, e) : p && e && !c && n.skip === 0 ? t.findIndex((d) => !d.disabled && d[e]) : n.skip === 0 ? 0 : -1;
+    return U(i) && c === void 0 ? t.findIndex((d) => R(d, i, s)) : c ? a(t, c, e) : p && e && !c && n.skip === 0 ? t.findIndex((d) => !d.disabled && d[e]) : n.skip === 0 ? 0 : -1;
   }
   suggestValue(i) {
     const { data: t, textField: e } = this.props;
-    this._suggested = Hs(i, t, e);
+    this._suggested = Ws(i, t, e);
   }
   applyState(i) {
     this.base.applyState(i), this._valueDuringOnChange = void 0;
   }
   calculateMedia(i) {
-    for (let t of i)
+    for (const t of i)
       this.setState({ windowWidth: t.target.clientWidth });
   }
 };
-let rt = yt;
-rt.displayName = "ComboBox";
-rt.propTypes = {
-  ...ie.propTypes,
+let ct = xt;
+ct.displayName = "ComboBox";
+ct.propTypes = {
+  ...oe.propTypes,
   size: l.oneOf([null, "small", "medium", "large"]),
   rounded: l.oneOf([null, "small", "medium", "large", "full"]),
   fillMode: l.oneOf([null, "solid", "flat", "outline"]),
@@ -1852,7 +1853,7 @@ rt.propTypes = {
   allowCustom: l.bool,
   clearButton: l.bool,
   iconClassName: l.string,
-  svgIcon: gs,
+  svgIcon: ms,
   validationMessage: l.string,
   required: l.bool,
   id: l.string,
@@ -1862,8 +1863,8 @@ rt.propTypes = {
   valueRender: l.func,
   skipDisabledItems: l.bool
 };
-rt.defaultProps = {
-  ...ie.defaultProps,
+ct.defaultProps = {
+  ...oe.defaultProps,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
@@ -1872,13 +1873,15 @@ rt.defaultProps = {
   required: !1,
   groupMode: "modern",
   isMultiColumn: !1,
-  skipDisabledItems: !0
+  skipDisabledItems: !0,
+  prefix: o.Fragment,
+  suffix: o.Fragment
 };
-const si = Be(), ys = St(wt(si, rt));
-ys.displayName = "KendoReactComboBox";
-const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe, Wt = class extends o.Component {
+const oi = Be(), xs = Et(Ft(oi, ct));
+xs.displayName = "KendoReactComboBox";
+const ai = "Please enter a valid value!", { sizeMap: ds, roundedMap: li } = Ge, $t = class extends o.Component {
   constructor(i) {
-    super(i), this.state = {}, this.base = new ie(this), this._element = null, this._suggested = "", this._input = null, this._isScrolling = !1, this.itemHeight = 0, this.focus = () => {
+    super(i), this.state = {}, this.base = new oe(this), this._element = null, this._suggested = "", this._input = null, this._isScrolling = !1, this.itemHeight = 0, this.focus = () => {
       this._input && this._input.focus();
     }, this.handleItemSelect = (t, e) => {
       const { data: s = [] } = this.props, n = V(s[t], this.props.textField);
@@ -1890,7 +1893,7 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
       this.base.togglePopup(t);
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || ii
+        this.validity.valid ? "" : this.props.validationMessage || ai
       );
     }, this.onScroll = (t) => {
       this._isScrolling = !0;
@@ -1911,9 +1914,9 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
     }, this.onChangeHandler = (t) => {
       const s = this.base.initState(), n = t.currentTarget, a = n.value, p = n.selectionEnd === a.length;
       s.syntheticEvent = t;
-      const c = this._suggested, d = this.value, r = d && d.substring(0, d.length - c.length), h = r && r === a, u = r && r.length > a.length, { suggest: g } = this.props, m = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
-      if (g !== void 0 && g !== !1) {
-        h || u || !p ? this._suggested = "" : this.suggestValue(a);
+      const c = this._suggested, d = this.value, r = d && d.substring(0, d.length - c.length), u = r && r === a, h = r && r.length > a.length, { suggest: f } = this.props, m = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+      if (f !== void 0 && f !== !1) {
+        u || h || !p ? this._suggested = "" : this.suggestValue(a);
         const v = a + this._suggested, b = { userInput: a, value: this._suggested };
         this.triggerOnChange(v, s, { suggestion: b });
       } else
@@ -1927,38 +1930,38 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
     }, this.onInputKeyDown = (t) => {
       const { data: e = [], skipDisabledItems: s, groupField: n, textField: a } = this.props;
       this._isScrolling && (this._isScrolling = !1);
-      const p = this.focusedIndex(), c = e[p], d = t.keyCode, r = t.altKey, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = this.base.initState();
-      u.syntheticEvent = t;
-      const g = () => {
-        h && t.preventDefault();
+      const p = this.focusedIndex(), c = e[p], d = t.keyCode, r = t.altKey, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
+      h.syntheticEvent = t;
+      const f = () => {
+        u && t.preventDefault();
       };
-      if (r && d === f.down)
+      if (r && d === g.down)
         this.setState({
           opened: !0
         });
-      else if (r && d === f.up)
+      else if (r && d === g.up)
         this.setState({
           opened: !1
         });
-      else if (h && d === f.pageUp)
+      else if (u && d === g.pageUp)
         this.base.scrollPopupByPageSize(-1);
-      else if (h && d === f.pageDown)
+      else if (u && d === g.pageDown)
         this.base.scrollPopupByPageSize(1);
-      else if (h && (d === f.enter || d === f.esc))
-        g(), s === !1 && c && c.disabled ? (h && this.togglePopup(u), this.applyState(u)) : this.applyInputValue(t.currentTarget.value, u, t.keyCode);
-      else if (!h && d === f.esc) {
+      else if (u && (d === g.enter || d === g.esc))
+        f(), s === !1 && c && c.disabled ? (u && this.togglePopup(h), this.applyState(h)) : this.applyInputValue(t.currentTarget.value, h, t.keyCode);
+      else if (!u && d === g.esc) {
         const m = "";
-        this._suggested = "", this.triggerOnChange(m, u), this.state.focusedItem !== void 0 && (u.data.focusedItem = void 0), this.applyState(u);
-      } else if (d === f.up || d === f.down) {
+        this._suggested = "", this.triggerOnChange(m, h), this.state.focusedItem !== void 0 && (h.data.focusedItem = void 0), this.applyState(h);
+      } else if (d === g.up || d === g.down) {
         if (n !== "" && a)
-          if (!this.props.skipDisabledItems && h)
-            this.onNavigate(u, d);
+          if (!this.props.skipDisabledItems && u)
+            this.onNavigate(h, d);
           else {
             let m = 0;
-            if (d === f.down || d === f.right) {
+            if (d === g.down || d === g.right) {
               const v = e.slice(p + 1).find((b) => !b.disabled && b[a]);
               m = v && e.findIndex((b) => b[a] === v[a]);
-            } else if (d === f.up || d === f.left) {
+            } else if (d === g.up || d === g.left) {
               let v;
               if (p === -1)
                 v = e, m = e.findIndex((b) => !b.disabled && b[a]);
@@ -1972,35 +1975,35 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
             }
             if (m !== void 0) {
               const v = m - p;
-              this.onNavigate(u, d, v);
+              this.onNavigate(h, d, v);
             } else
-              m === void 0 && e.findIndex((v) => v[a]) === e.length - 1 && this.onNavigate(u, d);
+              m === void 0 && e.findIndex((v) => v[a]) === e.length - 1 && this.onNavigate(h, d);
           }
-        else if (!this.props.skipDisabledItems && h)
-          this.onNavigate(u, d);
+        else if (!this.props.skipDisabledItems && u)
+          this.onNavigate(h, d);
         else {
           let m = null;
-          if (d === f.down || d === f.right)
+          if (d === g.down || d === g.right)
             m = e.slice(p + 1).find((v) => !v.disabled);
-          else if (d === f.up || d === f.left) {
+          else if (d === g.up || d === g.left) {
             const v = e.slice(0, p);
             for (m = v.pop(); m && m.disabled; )
               m = v.pop();
           }
           if (m) {
             const v = m.id - p - 1;
-            this.onNavigate(u, d, v);
+            this.onNavigate(h, d, v);
           } else
-            this.onNavigate(u, d);
+            this.onNavigate(h, d);
         }
-        this.applyState(u), g();
+        this.applyState(h), f();
       }
     }, this.handleBlur = (t) => {
       if (this.state.focused) {
         const e = this.base.initState();
         e.data.focused = !1, e.events.push({ type: "onBlur" }), e.syntheticEvent = t, this.applyInputValue(t.currentTarget.value, e);
       }
-    }, We(Ue);
+    }, $e(Ye);
   }
   get _inputId() {
     return this.props.id + "-accessibility-id";
@@ -2038,25 +2041,25 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
    * @hidden
    */
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : Wt.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : $t.defaultProps.validityStyles;
   }
   /**
    * @hidden
    */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : Wt.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : $t.defaultProps.required;
   }
   /**
    * @hidden
    */
   componentDidUpdate(i, t) {
-    var g;
-    const { groupField: e = "", data: s = [] } = this.props, { data: n = [] } = i, a = this.focusedIndex(), p = s[a], c = n !== s, d = p !== void 0 && t.focusedItem !== p, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = i.opened !== void 0 ? i.opened : t.opened, u = !h && r;
+    var f;
+    const { groupField: e = "", data: s = [] } = this.props, { data: n = [] } = i, a = this.focusedIndex(), p = s[a], c = n !== s, d = p !== void 0 && t.focusedItem !== p, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = i.opened !== void 0 ? i.opened : t.opened, h = !u && r;
     if (e === "")
-      (r && (d || c) || u) && this.base.scrollToItem(a);
+      (r && (d || c) || h) && this.base.scrollToItem(a);
     else if (!this._isScrolling) {
-      let m = (g = this.base.getGroupedDataModernMode(s, e)) == null ? void 0 : g.indexOf(p);
-      u && (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][e], this), this.base.scrollToItem(m)), r && h && d && this.base.scrollToItem(m);
+      let m = (f = this.base.getGroupedDataModernMode(s, e)) == null ? void 0 : f.indexOf(p);
+      h && (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][e], this), this.base.scrollToItem(m)), r && u && d && this.base.scrollToItem(m);
     }
     this.setValidity();
   }
@@ -2070,53 +2073,55 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
    * @hidden
    */
   render() {
-    const { dir: i, disabled: t, label: e, className: s, style: n, loading: a, suggest: p, size: c, rounded: d, fillMode: r } = this.props, h = !this.validityStyles || this.validity.valid, u = this.base, g = this.value, m = this.props.clearButton !== !1 && !a && !!g, v = this.props.id || this._inputId;
+    const { dir: i, disabled: t, label: e, className: s, style: n, loading: a, suggest: p, size: c, rounded: d, fillMode: r } = this.props, u = !this.validityStyles || this.validity.valid, h = this.base, f = this.value, m = this.props.clearButton !== !1 && !a && !!f, v = this.props.id || this._inputId;
     typeof p == "string" && (this._suggested = p);
-    const b = /* @__PURE__ */ o.createElement(
+    const [b, w] = qe(this.props.prefix || o.Fragment), [k, F] = qe(this.props.suffix || o.Fragment), O = /* @__PURE__ */ o.createElement(
       "span",
       {
         className: B(
           "k-autocomplete k-input",
           s,
           {
-            [`k-input-${ls[c] || c}`]: c,
-            [`k-rounded-${ni[d] || d}`]: d,
+            [`k-input-${ds[c] || c}`]: c,
+            [`k-rounded-${li[d] || d}`]: d,
             [`k-input-${r}`]: r,
-            "k-invalid": !h,
+            "k-invalid": !u,
             "k-loading": a,
             "k-required": this.required,
             "k-disabled": t
           }
         ),
-        ref: (w) => {
-          this._element = w, u.wrapper = w;
+        ref: (N) => {
+          this._element = N, h.wrapper = N;
         },
         style: e ? { ...n, width: void 0 } : n,
         dir: i
       },
-      this.renderSearchBar(g || "", v),
-      a && /* @__PURE__ */ o.createElement(ke, { className: "k-input-loading-icon", name: "loading" }),
-      m && !a && /* @__PURE__ */ o.createElement(lt, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      /* @__PURE__ */ o.createElement(b, { ...w }),
+      this.renderSearchBar(f || "", v),
+      a && /* @__PURE__ */ o.createElement(Ce, { className: "k-input-loading-icon", name: "loading" }),
+      m && !a && /* @__PURE__ */ o.createElement(dt, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      /* @__PURE__ */ o.createElement(k, { ...F }),
       this.renderListContainer()
     );
     return e ? /* @__PURE__ */ o.createElement(
-      $e,
+      Ue,
       {
         label: e,
         editorId: v,
-        editorValue: g,
-        editorValid: h,
+        editorValue: f,
+        editorValid: u,
         editorDisabled: t,
         style: { width: n ? n.width : void 0 },
-        children: b
+        children: O
       }
-    ) : b;
+    ) : O;
   }
   /**
    * @hidden
    */
   onNavigate(i, t, e) {
-    const s = this.value, { data: n = [], textField: a, focusedItemIndex: p } = this.props, c = this.state.focusedItem !== void 0 ? n.findIndex((r) => R(r, this.state.focusedItem, a)) : p ? p(n, s, a) : n.indexOf(as(n, s, a)), d = this.base.navigation.navigate({
+    const s = this.value, { data: n = [], textField: a, focusedItemIndex: p } = this.props, c = this.state.focusedItem !== void 0 ? n.findIndex((r) => R(r, this.state.focusedItem, a)) : p ? p(n, s, a) : n.indexOf(rs(n, s, a)), d = this.base.navigation.navigate({
       keyCode: t,
       current: c,
       max: n.length - 1,
@@ -2130,7 +2135,7 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
    */
   applyInputValue(i, t, e) {
     const s = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { data: n = [], textField: a } = this.props, p = this.focusedIndex(), c = n[p];
-    if (this._suggested = "", s && e === f.enter && c && !c.disabled) {
+    if (this._suggested = "", s && e === g.enter && c && !c.disabled) {
       const d = V(n[this.focusedIndex(i)], a);
       this.triggerOnChange(d, t);
     }
@@ -2139,7 +2144,7 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
   renderSearchBar(i, t) {
     const e = this.base, { placeholder: s, tabIndex: n, disabled: a, readonly: p } = this.props, { focused: c } = this.state, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     return /* @__PURE__ */ o.createElement(
-      Zt,
+      ts,
       {
         id: t,
         placeholder: s,
@@ -2177,16 +2182,16 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
       groupField: p,
       list: c,
       groupStickyHeaderItemRender: d
-    } = this.props, r = i.getPopupSettings(), h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, u = r.width !== void 0 ? r.width : i.popupWidth;
-    let { group: g } = this.state;
-    return g === void 0 && p !== void 0 && (g = V(n[0], p)), /* @__PURE__ */ o.createElement(
-      Et,
+    } = this.props, r = i.getPopupSettings(), u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = r.width !== void 0 ? r.width : i.popupWidth;
+    let { group: f } = this.state;
+    return f === void 0 && p !== void 0 && (f = V(n[0], p)), /* @__PURE__ */ o.createElement(
+      Dt,
       {
-        width: u,
+        width: h,
         popupSettings: {
           animate: r.animate,
           anchor: this.element,
-          show: h,
+          show: u,
           popupClass: B(
             r.popupClass,
             "k-list-container",
@@ -2205,11 +2210,11 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
           className: B(
             "k-list",
             {
-              [`k-list-${ls[a] || a}`]: a
+              [`k-list-${ds[a] || a}`]: a
             }
           )
         },
-        !c && g && n.length !== 0 && /* @__PURE__ */ o.createElement(Ae, { group: g, groupMode: "modern", render: d }),
+        !c && f && n.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: f, groupMode: "modern", render: d }),
         this.renderList()
       ),
       s && /* @__PURE__ */ o.createElement("div", { className: "k-list-footer" }, s)
@@ -2224,7 +2229,7 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
       groupHeaderItemRender: p
     } = this.props, c = this.value, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     return /* @__PURE__ */ o.createElement(
-      Ge,
+      je,
       {
         id: i.listBoxId,
         show: d,
@@ -2271,15 +2276,15 @@ const ii = "Please enter a valid value!", { sizeMap: ls, roundedMap: ni } = qe,
     if (s)
       return s(t, a, e);
     {
-      const p = t.indexOf(as(t, a, e));
+      const p = t.indexOf(rs(t, a, e));
       return n && e && p === -1 ? t.findIndex((c) => !c.disabled && c[e]) : Math.max(0, p);
     }
   }
 };
-let Tt = Wt;
-Tt.displayName = "AutoComplete";
-Tt.propTypes = {
-  ...ie.basicPropTypes,
+let Mt = $t;
+Mt.displayName = "AutoComplete";
+Mt.propTypes = {
+  ...oe.basicPropTypes,
   size: l.oneOf([null, "small", "medium", "large"]),
   rounded: l.oneOf([null, "small", "medium", "large", "full"]),
   fillMode: l.oneOf([null, "solid", "flat", "outline"]),
@@ -2299,21 +2304,23 @@ Tt.propTypes = {
   list: l.any,
   skipDisabledItems: l.bool
 };
-Tt.defaultProps = {
-  ...ie.defaultProps,
+Mt.defaultProps = {
+  ...oe.defaultProps,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
-  skipDisabledItems: !0
+  skipDisabledItems: !0,
+  prefix: o.Fragment,
+  suffix: o.Fragment
 };
-const oi = Be(), ai = St(wt(oi, Tt));
-ai.displayName = "KendoReactAutoComplete";
-const li = (i) => i.syntheticEvent.preventDefault(), ri = (i) => i.syntheticEvent.stopPropagation();
-class Is extends o.Component {
+const ri = Be(), di = Et(Ft(ri, Mt));
+di.displayName = "KendoReactAutoComplete";
+const ci = (i) => i.syntheticEvent.preventDefault(), pi = (i) => i.syntheticEvent.stopPropagation();
+class Cs extends o.Component {
   render() {
     const { data: t, guid: e, focused: s, tagRender: n, tag: a, onTagDelete: p, size: c } = this.props;
     return /* @__PURE__ */ o.createElement(o.Fragment, null, t.map((d, r) => {
-      const h = a ? /* @__PURE__ */ o.createElement(
+      const u = a ? /* @__PURE__ */ o.createElement(
         a,
         {
           key: d.text + r,
@@ -2323,7 +2330,7 @@ class Is extends o.Component {
           onTagDelete: p
         }
       ) : /* @__PURE__ */ o.createElement(
-        Rs,
+        Bs,
         {
           id: `tag-${e}-${d.text.replace(/\s+/g, "-")}`,
           "aria-selected": !0,
@@ -2332,19 +2339,19 @@ class Is extends o.Component {
           key: d.text + r,
           text: d.text,
           removable: !0,
-          onRemove: (u) => p.call(void 0, d.data, u.syntheticEvent),
-          onMouseDown: li,
-          onClick: ri,
+          onRemove: (h) => p.call(void 0, d.data, h.syntheticEvent),
+          onMouseDown: ci,
+          onClick: pi,
           className: d === s ? "k-focus" : void 0,
           size: c
         }
       );
-      return n ? n(d, h) : h;
+      return n ? n(d, u) : u;
     }), this.props.children);
   }
 }
-var tt = /* @__PURE__ */ ((i) => (i[i.PopupList = 0] = "PopupList", i[i.TagsList = 1] = "TagsList", i))(tt || {});
-const rs = 500, es = (i) => {
+var it = /* @__PURE__ */ ((i) => (i[i.PopupList = 0] = "PopupList", i[i.TagsList = 1] = "TagsList", i))(it || {});
+const cs = 500, ss = (i) => {
   const {
     footer: t,
     children: e,
@@ -2355,17 +2362,17 @@ const rs = 500, es = (i) => {
     animation: c,
     onClose: d,
     adaptiveTitle: r,
-    mobileFilter: h
-  } = i, u = {
+    mobileFilter: u
+  } = i, h = {
     navigatable: n || !1,
     navigatableElements: a || [],
     expand: p,
     animation: c !== !1,
     onClose: d,
-    animationStyles: s <= rs ? { top: 0, width: "100%", height: "100%" } : void 0,
-    className: s <= rs ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
+    animationStyles: s <= cs ? { top: 0, width: "100%", height: "100%" } : void 0,
+    className: s <= cs ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
   };
-  return /* @__PURE__ */ o.createElement(Yt, { ...u }, /* @__PURE__ */ o.createElement(Jt, { className: "k-text-center" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ o.createElement("div", null, r)), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ o.createElement(
+  return /* @__PURE__ */ o.createElement(Qt, { ...h }, /* @__PURE__ */ o.createElement(Xt, { className: "k-text-center" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ o.createElement("div", null, r)), /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ o.createElement(
     Te,
     {
       tabIndex: 0,
@@ -2374,10 +2381,10 @@ const rs = 500, es = (i) => {
       type: "button",
       fillMode: "flat",
       icon: "x",
-      svgIcon: ot,
+      svgIcon: lt,
       onClick: d
     }
-  ))), h && /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, h)), e, t && /* @__PURE__ */ o.createElement(Vs, { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ o.createElement(
+  ))), u && /* @__PURE__ */ o.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, u)), e, t && /* @__PURE__ */ o.createElement(Ks, { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ o.createElement(
     Te,
     {
       size: "large",
@@ -2401,26 +2408,26 @@ const rs = 500, es = (i) => {
     },
     t.applyText
   )));
-}, { sizeMap: bt, roundedMap: di } = qe, ci = "Please enter a valid value!", ds = (i) => i.preventDefault(), cs = (i) => i === 2, qt = class extends o.Component {
+}, { sizeMap: It, roundedMap: ui } = Ge, hi = "Please enter a valid value!", ps = (i) => i.preventDefault(), us = (i) => i === 2, Gt = class extends o.Component {
   constructor(i) {
     super(i), this.state = {
-      activedescendant: tt.PopupList,
+      activedescendant: it.PopupList,
       currentValue: []
-    }, this._element = null, this._valueItemsDuringOnChange = null, this.base = new ie(this), this._tags = [], this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._lastSelectedOrDeslectedItemIndex = null, this.itemHeight = 0, this.scrollToFocused = !1, this.localization = null, this.focus = () => {
+    }, this._element = null, this._valueItemsDuringOnChange = null, this.base = new oe(this), this._tags = [], this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._lastSelectedOrDeslectedItemIndex = null, this.itemHeight = 0, this.scrollToFocused = !1, this.localization = null, this.focus = () => {
       this._input && this._input.focus();
     }, this.handleItemSelect = (t, e) => {
-      const { data: s = [], dataItemKey: n, virtual: a } = this.props, p = a ? a.skip : 0, c = s[t - p], d = this.value.findIndex((u) => R(u, c, n));
-      this._lastSelectedOrDeslectedItemIndex = s.findIndex((u) => R(u, c, n));
+      const { data: s = [], dataItemKey: n, virtual: a } = this.props, p = a ? a.skip : 0, c = s[t - p], d = this.value.findIndex((h) => R(h, c, n));
+      this._lastSelectedOrDeslectedItemIndex = s.findIndex((h) => R(h, c, n));
       let r = [];
       d !== -1 ? (r = this.value, r.splice(d, 1)) : r = [...this.value, c], (this.props.filter !== void 0 ? this.props.filter : this.state.text) && !this.mobileMode && (this.state.text && (e.data.text = ""), this.base.filterChanged("", e)), this._adaptiveInput && this._adaptiveInput.blur(), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.triggerOnChange(r, e), this.base.triggerPageChangeCornerItems(c, e);
     }, this.onTagDelete = (t, e) => {
       const s = this.base.initState();
       s.syntheticEvent = e, this.opened && this.base.togglePopup(s), !this.state.focused && !this.mobileMode && (s.data.focused = !0, this.focus());
       const n = this.value;
-      mt(n, t, this.props.dataItemKey), this.triggerOnChange(n, s), this.applyState(s);
+      bt(n, t, this.props.dataItemKey), this.triggerOnChange(n, s), this.applyState(s);
     }, this.itemFocus = (t, e) => {
-      const { data: s = [], allowCustom: n, virtual: a } = this.props, p = a ? a.skip : 0, c = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: d } = this.getFocusedState(), r = n && c, h = s[t - p];
-      h && d !== t ? this.state.focusedIndex !== t && (e.data.focusedIndex = t, e.data.activedescendant = tt.PopupList) : r && t === -1 && this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(h, e);
+      const { data: s = [], allowCustom: n, virtual: a } = this.props, p = a ? a.skip : 0, c = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: d } = this.getFocusedState(), r = n && c, u = s[t - p];
+      u && d !== t ? this.state.focusedIndex !== t && (e.data.focusedIndex = t, e.data.activedescendant = it.PopupList) : r && t === -1 && this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(u, e);
     }, this.componentRef = (t) => {
       this._element = t, this.base.wrapper = t;
     }, this.searchbarRef = (t) => {
@@ -2433,121 +2440,121 @@ const rs = 500, es = (i) => {
       const e = this.base.initState();
       e.syntheticEvent = t, t.stopPropagation(), this.value.length > 0 && this.triggerOnChange([], e), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.opened && this.base.togglePopup(e);
       const s = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      G(s) && s !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this._lastSelectedOrDeslectedItemIndex = null, this.applyState(e);
+      U(s) && s !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this._lastSelectedOrDeslectedItemIndex = null, this.applyState(e);
     }, this.onInputKeyDown = (t) => {
-      const { data: e = [], textField: s, groupField: n } = this.props, a = t.keyCode, p = this.props.filter !== void 0 ? this.props.filter : this.state.text, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: d, focusedIndex: r } = this.getFocusedState(), h = this.base.initState();
-      if (h.syntheticEvent = t, !p && this.value.length > 0 && (a === f.left || a === f.right || a === f.home || a === f.end || a === f.delete || a === f.backspace) && !t.shiftKey)
-        return this.onTagsNavigate(t, h);
-      const u = () => {
-        t.preventDefault(), this.base.togglePopup(h), this.applyState(h);
+      const { data: e = [], textField: s, groupField: n } = this.props, a = t.keyCode, p = this.props.filter !== void 0 ? this.props.filter : this.state.text, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: d, focusedIndex: r } = this.getFocusedState(), u = this.base.initState();
+      if (u.syntheticEvent = t, !p && this.value.length > 0 && (a === g.left || a === g.right || a === g.home || a === g.end || a === g.delete || a === g.backspace) && !t.shiftKey)
+        return this.onTagsNavigate(t, u);
+      const h = () => {
+        t.preventDefault(), this.base.togglePopup(u), this.applyState(u);
       };
       if (this.opened)
-        if (a === f.pageUp)
+        if (a === g.pageUp)
           this.base.scrollPopupByPageSize(-1);
-        else if (a === f.pageDown)
+        else if (a === g.pageDown)
           this.base.scrollPopupByPageSize(1);
         else if ((t.ctrlKey || t.metaKey) && t.code === "KeyA") {
           const m = (this.state.value && this.state.value.length) === e.length ? [] : e;
-          this.updateStateOnKeyboardNavigation(m, h);
-        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === f.end) {
-          const g = e.slice(this.getFocusedState().focusedIndex);
-          this.itemFocus(e.length - 1, h), this.updateStateOnKeyboardNavigation(g, h);
-        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === f.home) {
-          const g = e.slice(0, this.getFocusedState().focusedIndex + 1);
-          this.itemFocus(0, h), this.updateStateOnKeyboardNavigation(g, h);
-        } else if (t.shiftKey && t.keyCode === f.up) {
-          let g;
+          this.updateStateOnKeyboardNavigation(m, u);
+        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === g.end) {
+          const f = e.slice(this.getFocusedState().focusedIndex);
+          this.itemFocus(e.length - 1, u), this.updateStateOnKeyboardNavigation(f, u);
+        } else if ((t.ctrlKey || t.metaKey) && t.shiftKey && t.keyCode === g.home) {
+          const f = e.slice(0, this.getFocusedState().focusedIndex + 1);
+          this.itemFocus(0, u), this.updateStateOnKeyboardNavigation(f, u);
+        } else if (t.shiftKey && t.keyCode === g.up) {
+          let f;
           const m = this.getLastSelectedOrDeselectedIndex(1, r);
-          m === null ? g = r !== 0 ? e.slice(r - 1, r) : [e[r]] : m === r ? g = [e[m - 1]] : r >= 0 && (g = m > r ? e.slice(r - 1, m) : e.slice(m - 1, r)), g && g.length > 0 && (r >= 1 && this.itemFocus(r - 1, h), this.updateStateOnKeyboardNavigation(g, h));
-        } else if (t.shiftKey && t.keyCode === f.down) {
-          let g;
+          m === null ? f = r !== 0 ? e.slice(r - 1, r) : [e[r]] : m === r ? f = [e[m - 1]] : r >= 0 && (f = m > r ? e.slice(r - 1, m) : e.slice(m - 1, r)), f && f.length > 0 && (r >= 1 && this.itemFocus(r - 1, u), this.updateStateOnKeyboardNavigation(f, u));
+        } else if (t.shiftKey && t.keyCode === g.down) {
+          let f;
           const m = this.getLastSelectedOrDeselectedIndex(0, r);
-          m === null ? g = r !== e.length - 1 ? e.slice(r, r + 1) : [e[r]] : m === r ? g = e.slice(r, r + 2) : r >= 0 && (g = m > r ? e.slice(r + 1, m + 1) : e.slice(m, r + 2)), g && g.length >= 1 && (this.itemFocus(r + 1, h), this.updateStateOnKeyboardNavigation(g, h));
-        } else if (t.altKey && a === f.up)
-          u();
-        else if (a === f.up || a === f.down) {
+          m === null ? f = r !== e.length - 1 ? e.slice(r, r + 1) : [e[r]] : m === r ? f = e.slice(r, r + 2) : r >= 0 && (f = m > r ? e.slice(r + 1, m + 1) : e.slice(m, r + 2)), f && f.length >= 1 && (this.itemFocus(r + 1, u), this.updateStateOnKeyboardNavigation(f, u));
+        } else if (t.altKey && a === g.up)
+          h();
+        else if (a === g.up || a === g.down) {
           if (n !== "" && s)
             if (!this.props.skipDisabledItems && c)
-              this.onNavigate(h, a);
+              this.onNavigate(u, a);
             else {
-              let g = 0;
-              if (a === f.down || a === f.right) {
+              let f = 0;
+              if (a === g.down || a === g.right) {
                 const m = e.slice(r + 1).find((v) => !v.disabled && v[s]);
-                g = m && e.findIndex((v) => v[s] === m[s]);
-              } else if (a === f.up || a === f.left) {
+                f = m && e.findIndex((v) => v[s] === m[s]);
+              } else if (a === g.up || a === g.left) {
                 let m;
                 if (r === -1)
-                  m = e, g = e.findIndex((v) => !v.disabled && v[s]);
+                  m = e, f = e.findIndex((v) => !v.disabled && v[s]);
                 else {
                   m = e.slice(0, r);
                   let v = m.pop();
                   for (; v && v.disabled; )
                     v = m.pop();
-                  g = v && e.findIndex((b) => b[s] === v[s]);
+                  f = v && e.findIndex((b) => b[s] === v[s]);
                 }
               }
-              if (g) {
-                const m = g - r;
-                this.onNavigate(h, a, m);
+              if (f) {
+                const m = f - r;
+                this.onNavigate(u, a, m);
               } else
-                g !== void 0 && this.onNavigate(h, a);
+                f !== void 0 && this.onNavigate(u, a);
             }
           else if (!this.props.skipDisabledItems && c)
-            this.onNavigate(h, a);
+            this.onNavigate(u, a);
           else {
-            let g = null;
-            if (a === f.down || a === f.right)
-              g = e.slice(r + 1).find((m) => !m.disabled);
-            else if (a === f.up || a === f.left) {
+            let f = null;
+            if (a === g.down || a === g.right)
+              f = e.slice(r + 1).find((m) => !m.disabled);
+            else if (a === g.up || a === g.left) {
               const m = e.slice(0, r);
-              for (g = m.pop(); g && g.disabled; )
-                g = m.pop();
+              for (f = m.pop(); f && f.disabled; )
+                f = m.pop();
             }
-            if (g) {
-              const m = g.id - r - 1;
-              this.onNavigate(h, a, m);
+            if (f) {
+              const m = f.id - r - 1;
+              this.onNavigate(u, a, m);
             } else
-              this.onNavigate(h, a);
+              this.onNavigate(u, a);
           }
-          this.applyState(h), t.preventDefault();
+          this.applyState(u), t.preventDefault();
         } else
-          a === f.enter ? (t.preventDefault(), this.props.allowCustom && p && d === null ? this.customItemSelect(t) : d && d.disabled ? u() : this.selectFocusedItem(t)) : a === f.esc && u();
+          a === g.enter ? (t.preventDefault(), this.props.allowCustom && p && d === null ? this.customItemSelect(t) : d && d.disabled ? h() : this.selectFocusedItem(t)) : a === g.esc && h();
       else
-        t.altKey && a === f.down && u();
+        t.altKey && a === g.down && h();
     }, this.listContainerContent = () => {
-      const { header: t, footer: e, allowCustom: s, size: n, data: a = [], groupStickyHeaderItemRender: p, groupField: c, list: d } = this.props, r = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: h } = this.getFocusedState(), u = s && r && /* @__PURE__ */ o.createElement(
+      const { header: t, footer: e, allowCustom: s, size: n, data: a = [], groupStickyHeaderItemRender: p, groupField: c, list: d } = this.props, r = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: u } = this.getFocusedState(), h = s && r && /* @__PURE__ */ o.createElement(
         "div",
         {
           className: B("k-list", {
-            [`k-list-${bt[n] || n}`]: n
+            [`k-list-${It[n] || n}`]: n
           }),
           key: "customitem",
           onClick: this.customItemSelect,
-          onMouseDown: ds
+          onMouseDown: ps
         },
         /* @__PURE__ */ o.createElement(
           "div",
           {
-            className: B("k-list-item k-custom-item", { "k-focus": cs(h) }),
+            className: B("k-list-item k-custom-item", { "k-focus": us(u) }),
             style: { fontStyle: "italic" }
           },
           r,
-          /* @__PURE__ */ o.createElement(ke, { name: "plus", icon: Ns, style: { position: "absolute", right: "0.5em" } })
+          /* @__PURE__ */ o.createElement(Ce, { name: "plus", icon: Ps, style: { position: "absolute", right: "0.5em" } })
         )
       );
-      let { group: g } = this.state;
-      return g === void 0 && c !== void 0 && (g = V(a[0], c)), /* @__PURE__ */ o.createElement(o.Fragment, null, t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), u, /* @__PURE__ */ o.createElement(
+      let { group: f } = this.state;
+      return f === void 0 && c !== void 0 && (f = V(a[0], c)), /* @__PURE__ */ o.createElement(o.Fragment, null, t && /* @__PURE__ */ o.createElement("div", { className: "k-list-header" }, t), h, /* @__PURE__ */ o.createElement(
         "div",
         {
           className: B(
             "k-list",
             {
-              [`k-list-${this.mobileMode ? "lg" : bt[n] || n}`]: n,
+              [`k-list-${this.mobileMode ? "lg" : It[n] || n}`]: n,
               "k-virtual-list": this.base.vs.enabled
             }
           )
         },
-        !d && g && a.length !== 0 && /* @__PURE__ */ o.createElement(Ae, { group: g, groupMode: "modern", render: p }),
+        !d && f && a.length !== 0 && /* @__PURE__ */ o.createElement(We, { group: f, groupMode: "modern", render: p }),
         this.renderList()
       ), e && /* @__PURE__ */ o.createElement("div", { className: "k-list-footer" }, e));
     }, this.renderListContainer = () => {
@@ -2570,10 +2577,10 @@ const rs = 500, es = (i) => {
         },
         itemsCount: [s.length, this.value.length]
       };
-      return /* @__PURE__ */ o.createElement(Et, { ...p }, this.listContainerContent());
+      return /* @__PURE__ */ o.createElement(Dt, { ...p }, this.listContainerContent());
     }, this.renderAdaptiveListContainer = () => {
       const { adaptiveTitle: t, filterable: e, filter: s } = this.props, { windowWidth: n = 0 } = this.state, a = s !== void 0 ? s : this.state.text;
-      this.localization = He(this);
+      this.localization = Ae(this);
       const p = e ? /* @__PURE__ */ o.createElement(
         Re,
         {
@@ -2592,23 +2599,23 @@ const rs = 500, es = (i) => {
         windowWidth: n,
         mobileFilter: p,
         footer: {
-          cancelText: this.localization.toLanguageString(nt, le[nt]),
+          cancelText: this.localization.toLanguageString(at, ce[at]),
           onCancel: this.onCancel,
-          applyText: this.localization.toLanguageString(it, le[it]),
+          applyText: this.localization.toLanguageString(ot, ce[ot]),
           onApply: this.closePopup
         }
       };
-      return /* @__PURE__ */ o.createElement(es, { ...c }, /* @__PURE__ */ o.createElement(at, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
+      return /* @__PURE__ */ o.createElement(ss, { ...c }, /* @__PURE__ */ o.createElement(rt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
     }, this.closePopup = (t) => {
       const e = this.base.initState();
       e.syntheticEvent = t, t.stopPropagation(), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.opened && this.base.togglePopup(e), e.events.push({ type: "onClose" });
       const s = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      G(s) && s !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
+      U(s) && s !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
     }, this.onCancel = (t) => {
       const e = this.base.initState();
       e.syntheticEvent = t, t.stopPropagation(), this.state.focusedIndex !== void 0 && (e.data.focusedIndex = void 0), this.opened && this.base.togglePopup(e), e.events.push({ type: "onCancel" });
       const s = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      G(s) && s !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
+      U(s) && s !== "" && this.base.filterChanged("", e), this.state.text && (e.data.text = ""), this.applyState(e);
     }, this.renderList = () => {
       const {
         data: t = [],
@@ -2618,9 +2625,9 @@ const rs = 500, es = (i) => {
         groupHeaderItemRender: a,
         dataItemKey: p,
         virtual: c = { skip: 0, total: void 0 }
-      } = this.props, d = this.base.vs, { focusedIndex: r } = this.getFocusedState(), h = this.base.getPopupSettings(), u = `translateY(${d.translate}px)`;
+      } = this.props, d = this.base.vs, { focusedIndex: r } = this.getFocusedState(), u = this.base.getPopupSettings(), h = `translateY(${d.translate}px)`;
       return /* @__PURE__ */ o.createElement(
-        Ge,
+        je,
         {
           id: this.base.listBoxId,
           show: this.opened,
@@ -2632,19 +2639,19 @@ const rs = 500, es = (i) => {
           optionsGuid: this.base.guid,
           groupField: this.props.groupField,
           groupMode: "modern",
-          listRef: (g) => {
-            d.list = this.base.list = g;
+          listRef: (f) => {
+            d.list = this.base.list = f;
           },
-          wrapperStyle: this.mobileMode ? {} : { maxHeight: h.height },
+          wrapperStyle: this.mobileMode ? {} : { maxHeight: u.height },
           wrapperCssClass: "k-list-content",
-          listStyle: d.enabled ? { transform: u } : void 0,
+          listStyle: d.enabled ? { transform: h } : void 0,
           key: "listKey",
           skip: c.skip,
           onClick: this.handleItemClick,
           itemRender: n,
           groupHeaderItemRender: a,
           noDataRender: s,
-          onMouseDown: ds,
+          onMouseDown: ps,
           onBlur: this.handleBlur,
           onScroll: this.onScroll,
           wrapperRef: d.scrollerRef,
@@ -2661,8 +2668,8 @@ const rs = 500, es = (i) => {
         const p = this.itemHeight = this.itemHeight || (e.enabled ? e.itemHeight : s ? s.children[0].offsetHeight : 0), d = t.target.scrollTop - e.skip * p;
         a = this.base.getGroupedDataModernMode(a, n);
         let r = a[0][n];
-        for (let h = 1; h < a.length && !(p * h > d); h++)
-          a[h] && a[h][n] && (r = a[h][n]);
+        for (let u = 1; u < a.length && !(p * u > d); u++)
+          a[u] && a[u][n] && (r = a[u][n]);
         r !== this.state.group && this.setState({
           group: r
         });
@@ -2700,15 +2707,15 @@ const rs = 500, es = (i) => {
       }, 0);
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || ci
+        this.validity.valid ? "" : this.props.validationMessage || hi
       );
-    }, We(Ue);
+    }, $e(Ye);
   }
   get _inputId() {
     return this.props.id;
   }
   get document() {
-    if (Fe)
+    if (Me)
       return this.element && this.element.ownerDocument || document;
   }
   /** @hidden */
@@ -2731,7 +2738,7 @@ const rs = 500, es = (i) => {
    * The mobile mode of the ComboBox.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= Se && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= we && this.props.adaptive);
   }
   /**
    * Represents the value of the MultiSelect.
@@ -2759,27 +2766,27 @@ const rs = 500, es = (i) => {
   }
   /** @hidden */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : qt.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : Gt.defaultProps.required;
   }
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : qt.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : Gt.defaultProps.validityStyles;
   }
   /** @hidden */
   componentDidUpdate(i, t) {
-    var u;
+    var h;
     const { virtual: e, groupField: s = "", data: n = [] } = this.props, a = e ? e.skip : 0, p = i.virtual ? i.virtual.total : 0, c = i.opened !== void 0 ? i.opened : t.opened, d = !c && this.opened, r = c && !this.opened;
     if (!this.base.getPopupSettings().animate && r && this.onPopupClosed(), e && e.total !== p)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      let { focusedItem: g, focusedIndex: m } = this.getFocusedState();
-      s !== "" && (m = (u = this.base.getGroupedDataModernMode(n, s)) == null ? void 0 : u.indexOf(g)), d && e ? this.base.scrollToVirtualItem(e, m - a) : d && !e ? (n && n.length !== 0 && this.base.resetGroupStickyHeader(n[0][s], this), this.base.scrollToItem(m)) : this.opened && c && g && this.scrollToFocused && this.base.scrollToItem(m - a);
+      let { focusedItem: f, focusedIndex: m } = this.getFocusedState();
+      s !== "" && (m = (h = this.base.getGroupedDataModernMode(n, s)) == null ? void 0 : h.indexOf(f)), d && e ? this.base.scrollToVirtualItem(e, m - a) : d && !e ? (n && n.length !== 0 && this.base.resetGroupStickyHeader(n[0][s], this), this.base.scrollToItem(m)) : this.opened && c && f && this.scrollToFocused && this.base.scrollToItem(m - a);
     }
     this.scrollToFocused = !1, this.setValidity();
   }
   /** @hidden */
   componentDidMount() {
     var i;
-    this.observerResize = Fe && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (i = this.document) != null && i.body && this.observerResize && this.observerResize.observe(this.document.body);
+    this.observerResize = Me && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (i = this.document) != null && i.body && this.observerResize && this.observerResize.observe(this.document.body);
   }
   /** @hidden */
   componentWillUnmount() {
@@ -2788,18 +2795,18 @@ const rs = 500, es = (i) => {
   }
   /** @hidden */
   onNavigate(i, t, e) {
-    const { allowCustom: s, data: n = [] } = this.props, a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: p, focusedIndex: c } = this.getFocusedState(), d = s && a, r = cs(p), h = this.base, u = h.vs;
-    if (this.opened && t === f.up && r)
+    const { allowCustom: s, data: n = [] } = this.props, a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: p, focusedIndex: c } = this.getFocusedState(), d = s && a, r = us(p), u = this.base, h = u.vs;
+    if (this.opened && t === g.up && r)
       this.state.focusedIndex !== void 0 && (i.data.focusedIndex = void 0);
     else {
-      const g = h.navigation.navigate({
+      const f = u.navigation.navigate({
         keyCode: t,
         current: c,
-        max: (u.enabled ? u.total : n.length) - 1,
+        max: (h.enabled ? h.total : n.length) - 1,
         min: d ? -1 : 0,
         skipItems: e || void 0
       });
-      g !== void 0 && (this.itemFocus(g, i), this.scrollToFocused = !0);
+      f !== void 0 && (this.itemFocus(f, i), this.scrollToFocused = !0);
     }
     this.applyState(i);
   }
@@ -2816,25 +2823,25 @@ const rs = 500, es = (i) => {
       virtual: c,
       size: d,
       rounded: r,
-      fillMode: h,
-      loading: u,
-      filter: g
-    } = this.props, { text: m, focused: v, focusedTag: b, currentValue: w } = this.state, S = this.base.vs, D = this.props.id || this._inputId;
-    S.enabled = c !== void 0, c !== void 0 && (S.skip = c.skip, S.total = c.total, S.pageSize = c.pageSize);
-    const N = this.mobileMode && this.opened ? w : this.tagsToRender;
+      fillMode: u,
+      loading: h,
+      filter: f
+    } = this.props, { text: m, focused: v, focusedTag: b, currentValue: w } = this.state, k = this.base.vs, F = this.props.id || this._inputId;
+    k.enabled = c !== void 0, c !== void 0 && (k.skip = c.skip, k.total = c.total, k.pageSize = c.pageSize);
+    const O = this.mobileMode && this.opened ? w : this.tagsToRender;
     this.setItems(this.tagsToRender, this._tags);
-    const O = !this.validityStyles || this.validity.valid, _ = !!(g !== void 0 ? g : m) || N && N.length > 0, C = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+    const N = !this.validityStyles || this.validity.valid, _ = !!(f !== void 0 ? f : m) || O && O.length > 0, [S, T] = qe(this.props.prefix || o.Fragment), [C, E] = qe(this.props.suffix || o.Fragment), M = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
       "div",
       {
         ref: this.componentRef,
         className: B("k-multiselect k-input", t, {
-          [`k-input-${bt[d] || d}`]: d,
-          [`k-rounded-${di[r] || r}`]: r,
-          [`k-input-${h}`]: h,
+          [`k-input-${It[d] || d}`]: d,
+          [`k-rounded-${ui[r] || r}`]: r,
+          [`k-input-${u}`]: u,
           "k-focus": v && !n,
-          "k-invalid": !O,
+          "k-invalid": !N,
           "k-disabled": n,
-          "k-loading": u,
+          "k-loading": h,
           "k-required": this.required
         }),
         style: e ? { ...i, width: void 0 } : i,
@@ -2842,57 +2849,59 @@ const rs = 500, es = (i) => {
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onClick: this.handleWrapperClick,
-        onMouseDown: As
+        onMouseDown: qs
       },
+      /* @__PURE__ */ o.createElement(S, { ...T }),
       /* @__PURE__ */ o.createElement("div", { className: B("k-input-values") }, /* @__PURE__ */ o.createElement(
         "div",
         {
           className: B(
             "k-chip-list",
-            { [`k-chip-list-${bt[d] || d}`]: d }
+            { [`k-chip-list-${It[d] || d}`]: d }
           ),
           role: "listbox",
           id: "tagslist-" + this.base.guid
         },
-        N && N.length > 0 && /* @__PURE__ */ o.createElement(
-          Is,
+        O && O.length > 0 && /* @__PURE__ */ o.createElement(
+          Cs,
           {
             tagRender: this.props.tagRender,
             onTagDelete: this.onTagDelete,
-            data: N,
+            data: O,
             guid: this.base.guid,
-            focused: b ? N.find((F) => Ct(F, b, p)) : void 0,
+            focused: b ? O.find((H) => St(H, b, p)) : void 0,
             size: d
           }
         )
-      ), this.renderSearchBar(D)),
-      u && /* @__PURE__ */ o.createElement(ke, { className: "k-input-loading-icon", name: "loading" }),
-      _ && /* @__PURE__ */ o.createElement(lt, { onClick: this.clearButtonClick }),
+      ), this.renderSearchBar(F)),
+      h && /* @__PURE__ */ o.createElement(Ce, { className: "k-input-loading-icon", name: "loading" }),
+      /* @__PURE__ */ o.createElement(C, { ...E }),
+      _ && /* @__PURE__ */ o.createElement(dt, { onClick: this.clearButtonClick }),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
     return e ? /* @__PURE__ */ o.createElement(
-      $e,
+      Ue,
       {
         label: e,
-        editorId: D,
+        editorId: F,
         editorValue: m || V(this.value[0], a),
-        editorValid: O,
+        editorValid: N,
         editorDisabled: n,
         style: { width: i ? i.width : void 0 },
-        children: C
+        children: M
       }
-    ) : C;
+    ) : M;
   }
   renderSearchBar(i) {
-    const { activedescendant: t, focusedTag: e, currentValue: s } = this.state, { disabled: n, placeholder: a, ariaDescribedBy: p } = this.props, c = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: d } = this.getFocusedState(), r = this.value.length === 0 && !c ? a : void 0, h = s && s.length > 0 ? void 0 : a, u = t === tt.TagsList && e !== void 0 ? `tag-${this.base.guid}-${e.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${d}`;
+    const { activedescendant: t, focusedTag: e, currentValue: s } = this.state, { disabled: n, placeholder: a, ariaDescribedBy: p } = this.props, c = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: d } = this.getFocusedState(), r = this.value.length === 0 && !c ? a : void 0, u = s && s.length > 0 ? void 0 : a, h = t === it.TagsList && e !== void 0 ? `tag-${this.base.guid}-${e.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${d}`;
     return /* @__PURE__ */ o.createElement(
-      Zt,
+      ts,
       {
         id: i,
         size: Math.max((r || "").length, c.length, 1),
         tabIndex: this.props.tabIndex,
         accessKey: this.props.accessKey,
-        placeholder: this.mobileMode && this.opened ? h : r,
+        placeholder: this.mobileMode && this.opened ? u : r,
         value: c,
         onChange: this.onChangeHandler,
         onKeyDown: this.onInputKeyDown,
@@ -2901,7 +2910,7 @@ const rs = 500, es = (i) => {
         expanded: this.opened,
         owns: this.base.listBoxId,
         role: "combobox",
-        activedescendant: u,
+        activedescendant: h,
         ariaDescribedBy: `tagslist-${this.base.guid}${p ? " " + p : ""}`,
         ariaLabelledBy: this.props.ariaLabelledBy,
         ariaRequired: this.required
@@ -2910,31 +2919,31 @@ const rs = 500, es = (i) => {
   }
   onTagsNavigate(i, t) {
     const e = i.keyCode, { focusedTag: s } = this.state, n = this._tags, a = this.props.dataItemKey;
-    let p = s ? n.findIndex((r) => Ct(r, s, a)) : -1, c;
+    let p = s ? n.findIndex((r) => St(r, s, a)) : -1, c;
     const d = p !== -1;
-    if (e === f.left)
+    if (e === g.left)
       d ? p = Math.max(0, p - 1) : p = n.length - 1, c = n[p];
-    else if (e === f.right)
+    else if (e === g.right)
       p === n.length - 1 ? c = void 0 : d && (p = Math.min(n.length - 1, p + 1), c = n[p]);
-    else if (e === f.home && !i.shiftKey)
+    else if (e === g.home && !i.shiftKey)
       c = n[0];
-    else if (e === f.end && !i.shiftKey)
+    else if (e === g.end && !i.shiftKey)
       c = n[n.length - 1];
-    else if (e === f.delete) {
+    else if (e === g.delete) {
       if (d) {
         const r = this.value;
-        mt(r, n[p].data, a), this.triggerOnChange(r, t);
+        bt(r, n[p].data, a), this.triggerOnChange(r, t);
       }
-    } else if (e === f.backspace) {
+    } else if (e === g.backspace) {
       const r = this.value;
       if (d)
-        mt(r, n[p].data, a), this.triggerOnChange(r, t);
+        bt(r, n[p].data, a), this.triggerOnChange(r, t);
       else if (!d && n.length) {
-        const h = n.pop();
-        mt(r, h.data, a), this.triggerOnChange(r, t);
+        const u = n.pop();
+        bt(r, u.data, a), this.triggerOnChange(r, t);
       }
     }
-    c !== s && (t.data.focusedTag = c, t.data.activedescendant = tt.TagsList), this.applyState(t);
+    c !== s && (t.data.focusedTag = c, t.data.activedescendant = it.TagsList), this.applyState(t);
   }
   triggerOnChange(i, t) {
     this.props.value === void 0 && (t.data.value = [...i]), this._valueItemsDuringOnChange = [], this.setItems(i, this._valueItemsDuringOnChange), t.events.push({ type: "onChange" });
@@ -2948,7 +2957,7 @@ const rs = 500, es = (i) => {
   }
   getFocusedState() {
     const { focusedIndex: i } = this.state, t = this.props.filter !== void 0 ? this.props.filter : this.state.text, { allowCustom: e, data: s = [], dataItemKey: n, virtual: a, textField: p, focusedItemIndex: c = Ve, skipDisabledItems: d } = this.props, r = a && a.skip || 0;
-    let h;
+    let u;
     if (i !== void 0)
       return {
         focusedIndex: i,
@@ -2956,7 +2965,7 @@ const rs = 500, es = (i) => {
         focusedType: 1
         /* ListItem */
       };
-    const u = this.value;
+    const h = this.value;
     if (e && t)
       return {
         focusedItem: null,
@@ -2965,25 +2974,25 @@ const rs = 500, es = (i) => {
         /* CustomItem */
       };
     if (t)
-      return h = c(s, t, p), {
-        focusedItem: s[h],
-        focusedIndex: h + r,
+      return u = c(s, t, p), {
+        focusedItem: s[u],
+        focusedIndex: u + r,
         focusedType: 1
         /* ListItem */
       };
-    if (u.length) {
-      const g = u[u.length - 1];
-      return h = s.findIndex((m) => R(m, g, n)), s[h] !== void 0 ? {
-        focusedIndex: h + r,
-        focusedItem: s[h],
+    if (h.length) {
+      const f = h[h.length - 1];
+      return u = s.findIndex((m) => R(m, f, n)), s[u] !== void 0 ? {
+        focusedIndex: u + r,
+        focusedItem: s[u],
         focusedType: 1
         /* ListItem */
       } : { focusedType: 0, focusedIndex: -1 };
     } else if (d && p && !t && r === 0) {
-      const g = s.findIndex((m) => !m.disabled && m[p]);
+      const f = s.findIndex((m) => !m.disabled && m[p]);
       return {
-        focusedIndex: g,
-        focusedItem: s[g - r],
+        focusedIndex: f,
+        focusedItem: s[f - r],
         focusedType: 1
         /* ListItem */
       };
@@ -3024,10 +3033,10 @@ const rs = 500, es = (i) => {
     return this._lastSelectedOrDeslectedItemIndex === null && (this._lastSelectedOrDeslectedItemIndex = t), this._lastSelectedOrDeslectedItemIndex !== null ? this._lastSelectedOrDeslectedItemIndex + i : null;
   }
 };
-let Ft = qt;
-Ft.displayName = "MultiSelect";
-Ft.propTypes = {
-  ...ie.propTypes,
+let Nt = Gt;
+Nt.displayName = "MultiSelect";
+Nt.propTypes = {
+  ...oe.propTypes,
   autoClose: l.bool,
   value: l.arrayOf(l.any),
   defaultValue: l.arrayOf(l.any),
@@ -3048,20 +3057,22 @@ Ft.propTypes = {
   onCancel: l.func,
   skipDisabledItems: l.bool
 };
-Ft.defaultProps = {
-  ...ie.defaultProps,
+Nt.defaultProps = {
+  ...oe.defaultProps,
   autoClose: !0,
   required: !1,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   groupMode: "modern",
-  skipDisabledItems: !0
+  skipDisabledItems: !0,
+  prefix: o.Fragment,
+  suffix: o.Fragment
 };
-const pi = Be(), hi = St(wt(pi, Ft));
-hi.displayName = "KendoReactMultiSelect";
-const ui = (i) => /* @__PURE__ */ o.createElement(
-  Ge,
+const fi = Be(), gi = Et(Ft(fi, Nt));
+gi.displayName = "KendoReactMultiSelect";
+const mi = (i) => /* @__PURE__ */ o.createElement(
+  je,
   {
     ...i,
     wrapperCssClass: "k-table-body k-table-scroller",
@@ -3073,20 +3084,22 @@ const ui = (i) => /* @__PURE__ */ o.createElement(
     ),
     listStyle: { ...i.listStyle }
   }
-), gi = (i, t) => i ? typeof i == "number" ? i + "px" : i : t, fi = Be(), ts = o.forwardRef((i, t) => {
-  const e = Gt(fi, i), s = o.useRef(null), n = o.useRef(null), a = Es(), {
-    columns: p = ze.columns,
-    popupSettings: c = ze.popupSettings,
+), vi = (i, t) => i ? typeof i == "number" ? i + "px" : i : t, bi = Be(), is = o.forwardRef((i, t) => {
+  const e = jt(bi, i), s = o.useRef(null), n = o.useRef(null), a = Ds(), {
+    columns: p = He.columns,
+    popupSettings: c = He.popupSettings,
     className: d,
     size: r,
-    onOpen: h,
-    onClose: u,
-    onFocus: g,
-    onBlur: m,
-    onChange: v,
-    onFilterChange: b,
-    onPageChange: w,
-    ...S
+    prefix: u = o.Fragment,
+    suffix: h = o.Fragment,
+    onOpen: f,
+    onClose: m,
+    onFocus: v,
+    onBlur: b,
+    onChange: w,
+    onFilterChange: k,
+    onPageChange: F,
+    ...O
   } = e;
   o.useImperativeHandle(s, () => ({
     element: n.current && n.current.element,
@@ -3101,101 +3114,101 @@ const ui = (i) => /* @__PURE__ */ o.createElement(
     },
     props: e
   })), o.useImperativeHandle(t, () => s.current);
-  const D = o.useMemo(
+  const N = o.useMemo(
     () => {
       if (e.groupField !== void 0 && e.data)
         return V(e.data[0], e.groupField);
     },
     [e.data, e.groupField]
-  ), [N, O] = o.useState(D), [_, C] = o.useState(!0), F = o.useMemo(
+  ), [_, S] = o.useState(N), [T, C] = o.useState(!0), [E] = Lt(u), [M] = Lt(h), H = o.useMemo(
     () => {
-      const P = /* @__PURE__ */ o.createElement("th", { className: "k-table-th", colSpan: p.length }, N);
+      const P = /* @__PURE__ */ o.createElement("th", { className: "k-table-th", colSpan: p.length }, _);
       return /* @__PURE__ */ o.createElement(o.Fragment, null, e.header, /* @__PURE__ */ o.createElement("div", { className: "k-table-header-wrap" }, /* @__PURE__ */ o.createElement("table", { className: "k-table", role: "presentation" }, /* @__PURE__ */ o.createElement("colgroup", null, p.map(
-        (H, L) => /* @__PURE__ */ o.createElement(
+        (q, be) => /* @__PURE__ */ o.createElement(
           "col",
           {
-            key: H.uniqueKey ? H.uniqueKey : L,
-            style: { width: H.width ? H.width : ze.width }
+            key: q.uniqueKey ? q.uniqueKey : be,
+            style: { width: q.width ? q.width : He.width }
           }
         )
-      )), /* @__PURE__ */ o.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ o.createElement("tr", { className: "k-table-row" }, p.map((H, L) => /* @__PURE__ */ o.createElement("th", { className: "k-table-th", key: H.uniqueKey ? H.uniqueKey : L }, H.header || " "))), N && _ && /* @__PURE__ */ o.createElement("tr", { className: "k-table-group-row" }, e.groupStickyHeaderItemRender ? e.groupStickyHeaderItemRender.call(void 0, P, {}) : P)))));
+      )), /* @__PURE__ */ o.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ o.createElement("tr", { className: "k-table-row" }, p.map((q, be) => /* @__PURE__ */ o.createElement("th", { className: "k-table-th", key: q.uniqueKey ? q.uniqueKey : be }, q.header || " "))), _ && T && /* @__PURE__ */ o.createElement("tr", { className: "k-table-group-row" }, e.groupStickyHeaderItemRender ? e.groupStickyHeaderItemRender.call(void 0, P, {}) : P)))));
     },
-    [e.header, p, N, _]
-  ), x = o.useMemo(
+    [e.header, p, _, T]
+  ), J = o.useMemo(
     () => (
       // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
-      `calc(${p.map((P) => gi(P.width, ze.width)).filter(Boolean).join(" + ")} + ${a}px + 4px)`
+      `calc(${p.map((P) => vi(P.width, He.width)).filter(Boolean).join(" + ")} + ${a}px + 4px)`
     ),
     [p, a]
-  ), E = e.virtual ? e.virtual.skip : 0, M = o.useCallback(
-    (P, H) => {
-      const L = p.map((J, W) => /* @__PURE__ */ o.createElement(
+  ), j = e.virtual ? e.virtual.skip : 0, Y = o.useCallback(
+    (P, q) => {
+      const be = p.map((X, Je) => /* @__PURE__ */ o.createElement(
         "span",
         {
           className: e.itemRender ? void 0 : "k-table-td",
-          style: e.itemRender ? void 0 : { width: J.width ? J.width : ze.width },
-          key: J.uniqueKey ? J.uniqueKey : W
+          style: e.itemRender ? void 0 : { width: X.width ? X.width : He.width },
+          key: X.uniqueKey ? X.uniqueKey : Je
         },
-        J.field ? String(It(J.field)(H.dataItem)) : ""
+        X.field ? String(Ct(X.field)(q.dataItem)) : ""
       ));
-      let me, Ce, Me, Ne, Oe = e.data || [];
-      const A = H.index - E;
-      e.groupField !== void 0 && (Ne = It(e.groupField), Ce = Ne(Oe[A]), Me = Ne(Oe[A - 1]), Ce && Me && Ce !== Me && (me = Ce)), me && e.groupMode === "classic" && L.push(/* @__PURE__ */ o.createElement("div", { key: "group", className: "k-table-td k-table-group-td" }, /* @__PURE__ */ o.createElement("span", null, me)));
-      const X = o.cloneElement(P, {
+      let ke, L, Q, le, z = e.data || [];
+      const Ee = q.index - j;
+      e.groupField !== void 0 && (le = Ct(e.groupField), L = le(z[Ee]), Q = le(z[Ee - 1]), L && Q && L !== Q && (ke = L)), ke && e.groupMode === "classic" && be.push(/* @__PURE__ */ o.createElement("div", { key: "group", className: "k-table-td k-table-group-td" }, /* @__PURE__ */ o.createElement("span", null, ke)));
+      const re = o.cloneElement(P, {
         ...P.props,
         className: B("k-table-row", {
-          "k-table-alt-row": H.index % 2 !== 0,
-          "k-focus": H.focused,
-          "k-selected": H.selected,
-          "k-first": !!me,
-          "k-disabled": H.dataItem.disabled
+          "k-table-alt-row": q.index % 2 !== 0,
+          "k-focus": q.focused,
+          "k-selected": q.selected,
+          "k-first": !!ke,
+          "k-disabled": q.dataItem.disabled
         })
-      }, L);
-      return e.itemRender ? e.itemRender.call(void 0, X, H) : X;
+      }, be);
+      return e.itemRender ? e.itemRender.call(void 0, re, q) : re;
     },
-    [p, e.groupField, e.itemRender, e.data, E]
-  ), K = o.useCallback(
-    (P, H) => {
+    [p, e.groupField, e.itemRender, e.data, j]
+  ), W = o.useCallback(
+    (P, q) => {
       P && P.call(void 0, {
-        ...H,
+        ...q,
         target: s.current
       });
     },
     []
-  ), U = o.useCallback((P) => (e.virtual || O(D), K(h, P)), [K, h, e.virtual, D]), j = o.useCallback((P) => K(u, P), [u]), Y = o.useCallback((P) => K(g, P), [g]), re = o.useCallback((P) => K(m, P), [m]), we = o.useCallback((P) => K(v, P), [v]), ne = o.useCallback((P) => K(w, P), [w]), Q = o.useCallback((P) => (O(D), K(b, {
+  ), ge = o.useCallback((P) => (e.virtual || S(N), W(f, P)), [W, f, e.virtual, N]), Z = o.useCallback((P) => W(m, P), [m]), ee = o.useCallback((P) => W(v, P), [v]), ae = o.useCallback((P) => W(b, P), [b]), Ke = o.useCallback((P) => W(w, P), [w]), Ne = o.useCallback((P) => W(F, P), [F]), Le = o.useCallback((P) => (S(N), W(k, {
     ...P,
     mobileMode: P.target.mobileMode
-  })), [b]), oe = o.useCallback(
+  })), [k]), A = o.useCallback(
     (P) => {
-      O(P.group);
+      S(P.group);
     },
     []
   );
   o.useEffect(() => {
-    Ds();
+    Ts();
   }), o.useEffect(() => {
     const P = e.data;
-    O(D), P && P.length !== 0 ? C(!0) : C(!1);
+    S(N), P && P.length !== 0 ? C(!0) : C(!1);
   }, [e.data]);
-  const Ke = o.useCallback((P) => /* @__PURE__ */ o.createElement(ui, { ...P }), []);
+  const Oe = o.useCallback((P) => /* @__PURE__ */ o.createElement(mi, { ...P }), []);
   return /* @__PURE__ */ o.createElement(
-    Os.Provider,
+    _s.Provider,
     {
       value: (P) => ({ ...P, popupClass: `k-dropdowngrid-popup ${c.popupClass}` })
     },
     /* @__PURE__ */ o.createElement(
-      ys,
+      xs,
       {
-        ...S,
-        list: Ke,
+        ...O,
+        list: Oe,
         popupSettings: {
-          width: x,
+          width: J,
           ...c,
           className: c.className
         },
         ref: n,
-        header: F,
-        itemRender: M,
+        header: H,
+        itemRender: Y,
         groupHeaderItemRender: e.groupHeaderItemRender,
         size: e.size,
         rounded: e.rounded,
@@ -3203,28 +3216,30 @@ const ui = (i) => /* @__PURE__ */ o.createElement(
         groupMode: e.groupMode,
         groupField: e.groupField,
         isMultiColumn: !0,
-        onOpen: U,
-        onClose: j,
-        onFocus: Y,
-        onBlur: re,
-        onChange: we,
-        onFilterChange: Q,
-        onPageChange: ne,
-        onGroupScroll: oe,
+        onOpen: ge,
+        onClose: Z,
+        onFocus: ee,
+        onBlur: ae,
+        onChange: Ke,
+        onFilterChange: Le,
+        onPageChange: Ne,
+        onGroupScroll: A,
         className: B("k-dropdowngrid", d),
         required: e.required,
         adaptive: e.adaptive,
         adaptiveFilter: e.adaptiveFilter,
         adaptiveTitle: e.adaptiveTitle,
         footer: e.footer,
-        footerClassName: "k-table-footer"
+        footerClassName: "k-table-footer",
+        prefix: E,
+        suffix: M
       }
     )
   );
-}), mi = {
-  ...rt.propTypes,
+}), yi = {
+  ...ct.propTypes,
   columns: l.any.isRequired
-}, ze = {
+}, He = {
   columns: [],
   popupSettings: {},
   width: "200px",
@@ -3232,9 +3247,9 @@ const ui = (i) => /* @__PURE__ */ o.createElement(
   rounded: "medium",
   fillMode: "solid"
 };
-ts.displayName = "KendoMultiColumnComboBox";
-ts.propTypes = mi;
-ts.defaultProps = ze;
+is.displayName = "KendoMultiColumnComboBox";
+is.propTypes = yi;
+is.defaultProps = He;
 function ks(i, t, e) {
   const [s, n] = o.useState(t);
   return o.useEffect(
@@ -3244,14 +3259,14 @@ function ks(i, t, e) {
     e
   ), s;
 }
-const Cs = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata" }, /* @__PURE__ */ o.createElement("div", null, i.children)), { sizeMap: vi, roundedMap: bi } = qe, yi = "Please select a value from the list!", Ii = (i) => /* @__PURE__ */ o.createElement("span", { className: "k-input-value-text" }, i.children), ps = (i) => i.split("_").map((t) => parseInt(t, 10)), ki = (i, t) => {
+const Ss = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata" }, /* @__PURE__ */ o.createElement("div", null, i.children)), { sizeMap: Ii, roundedMap: xi } = Ge, Ci = "Please select a value from the list!", ki = (i) => /* @__PURE__ */ o.createElement("span", { className: "k-input-value-text" }, i.children), hs = (i) => i.split("_").map((t) => parseInt(t, 10)), Si = (i, t) => {
   const { validationMessage: e, valid: s, required: n } = i;
   return {
     customError: e !== void 0,
     valid: !!(s !== void 0 ? s : !n || t),
     valueMissing: !t
   };
-}, hs = {
+}, fs = {
   selectField: "selected",
   subItemsField: "items",
   popupSettings: {
@@ -3266,361 +3281,361 @@ const Cs = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
   size: "medium",
   rounded: "medium",
   fillMode: "solid"
-}, Ci = Be(), xs = o.forwardRef((i, t) => {
-  We(Ue);
-  const e = Gt(Ci, i), s = {
-    ...hs,
+}, wi = Be(), ws = o.forwardRef((i, t) => {
+  $e(Ye);
+  const e = jt(wi, i), s = {
+    ...fs,
     ...e
-  }, n = fs(), a = s.id || n, {
+  }, n = vs(), a = s.id || n, {
     data: p,
     dataItemKey: c,
     popupSettings: d,
     style: r,
-    opened: h,
-    disabled: u,
-    onOpen: g = De,
+    opened: u,
+    disabled: h,
+    onOpen: f = De,
     onClose: m = De,
     placeholder: v,
     label: b,
     name: w,
-    selectField: S,
-    subItemsField: D,
-    validationMessage: N,
-    valid: O,
+    selectField: k,
+    subItemsField: F,
+    validationMessage: O,
+    valid: N,
     required: _,
-    validityStyles: C
-  } = s, F = $t(s.tabIndex, u), x = o.useRef(null), E = o.useRef(null), M = o.useRef(null), K = o.useRef(null), U = o.useRef(null), j = o.useRef(null), Y = o.useRef(!1), [re, we] = o.useState(void 0), ne = s.value !== void 0, Q = ne ? s.value : re !== void 0 ? re : s.defaultValue, oe = G(Q), Ke = oe ? V(Q, s.textField) : "", P = ki({ validationMessage: N, valid: O, required: _ }, oe), H = o.useCallback(() => E.current && E.current.focus(), []);
+    validityStyles: S
+  } = s, T = Ut(s.tabIndex, h), C = o.useRef(null), E = o.useRef(null), M = o.useRef(null), H = o.useRef(null), J = o.useRef(null), j = o.useRef(null), Y = o.useRef(!1), [W, ge] = o.useState(void 0), Z = s.value !== void 0, ee = Z ? s.value : W !== void 0 ? W : s.defaultValue, ae = U(ee), Ke = ae ? V(ee, s.textField) : "", Ne = Si({ validationMessage: O, valid: N, required: _ }, ae), Le = o.useCallback(() => E.current && E.current.focus(), []);
   o.useImperativeHandle(
-    x,
+    C,
     () => ({
       props: s,
       element: E.current,
-      focus: H
+      focus: Le
     })
-  ), o.useImperativeHandle(t, () => x.current);
-  const L = ms(E, s.dir), me = d.width !== void 0 ? d.width : r.width !== void 0 ? r.width : hs.popupSettings.width, Me = {
-    width: ks(E, me),
-    ...L !== void 0 ? { direction: L } : {}
-  }, [Ne, Oe] = o.useState(!1), A = h !== void 0 ? h : Ne, [X, J] = o.useState(!1), [W, je] = o.useState(), ue = !!(W && W <= Se && s.adaptive), [ve, Mt] = o.useState(""), is = o.useCallback(
+  ), o.useImperativeHandle(t, () => C.current);
+  const A = bs(E, s.dir), Oe = d.width !== void 0 ? d.width : r.width !== void 0 ? r.width : fs.popupSettings.width, q = {
+    width: ks(E, Oe),
+    ...A !== void 0 ? { direction: A } : {}
+  }, [be, ke] = o.useState(!1), L = u !== void 0 ? u : be, [Q, le] = o.useState(!1), [z, Ee] = o.useState(), re = !!(z && z <= we && s.adaptive), [X, Je] = o.useState(""), os = o.useCallback(
     () => {
-      U.current && U.current.setCustomValidity && U.current.setCustomValidity(
-        P.valid ? "" : N === void 0 ? yi : N
+      J.current && J.current.setCustomValidity && J.current.setCustomValidity(
+        Ne.valid ? "" : O === void 0 ? Ci : O
       );
     },
-    [N, P]
+    [O, Ne]
   );
-  o.useEffect(is), o.useEffect(() => {
-    const I = Fe && window.ResizeObserver && new window.ResizeObserver(Rt.bind(void 0));
+  o.useEffect(os), o.useEffect(() => {
+    const I = Me && window.ResizeObserver && new window.ResizeObserver(Vt.bind(void 0));
     return document != null && document.body && I && I.observe(document.body), () => {
       document != null && document.body && I && I.disconnect();
     };
   }, []);
-  const dt = o.useCallback(
+  const pt = o.useCallback(
     (I) => {
-      if (!A) {
-        if (g) {
-          const T = { ...I };
-          g.call(void 0, T);
+      if (!L) {
+        if (f) {
+          const D = { ...I };
+          f.call(void 0, D);
         }
-        h === void 0 && Oe(!0);
+        u === void 0 && ke(!0);
       }
     },
-    [A, h, g]
-  ), xe = o.useCallback(
+    [L, u, f]
+  ), Se = o.useCallback(
     (I) => {
-      if (A) {
+      if (L) {
         if (m) {
-          const T = { ...I };
-          m.call(void 0, T);
+          const D = { ...I };
+          m.call(void 0, D);
         }
-        h === void 0 && (Oe(!1), ue && setTimeout(() => {
-          var T;
-          q((T = K.current) == null ? void 0 : T.element);
+        u === void 0 && (ke(!1), re && setTimeout(() => {
+          var D;
+          $((D = H.current) == null ? void 0 : D.element);
         }, 300));
       }
     },
-    [A, h, m, ue]
-  ), Nt = o.useCallback(
+    [L, u, m, re]
+  ), Ot = o.useCallback(
     (I) => {
-      if (!I.isDefaultPrevented() && x.current) {
-        J(!0);
-        const T = {
+      if (!I.isDefaultPrevented() && C.current) {
+        le(!0);
+        const D = {
           syntheticEvent: I,
           nativeEvent: I.nativeEvent,
-          target: x.current
+          target: C.current
         };
-        (A ? xe : dt)(T);
+        (L ? Se : pt)(D);
       }
     },
-    [A, h, g, m]
-  ), se = o.useCallback(
+    [L, u, f, m]
+  ), ne = o.useCallback(
     (I) => {
       Y.current = !0, I(), window.setTimeout(() => Y.current = !1, 0);
     },
     []
-  ), Le = o.useCallback(
+  ), ze = o.useCallback(
     (I) => {
-      var k, z;
-      const { keyCode: T, altKey: $ } = I, de = j.current && j.current.element;
-      if (!x.current || I.isDefaultPrevented() && ((k = M.current) == null ? void 0 : k.element) === I.target)
+      var x, K;
+      const { keyCode: D, altKey: G } = I, pe = j.current && j.current.element;
+      if (!C.current || I.isDefaultPrevented() && ((x = M.current) == null ? void 0 : x.element) === I.target)
         return;
       const y = {
         syntheticEvent: I,
         nativeEvent: I.nativeEvent,
-        target: x.current
+        target: C.current
       };
-      if (A)
-        if (T === f.esc || $ && T === f.up)
-          I.preventDefault(), xe(y);
-        else if (de && de.querySelector(".k-focus") && (T === f.up || T === f.down || T === f.left || T === f.right || T === f.home || T === f.end)) {
-          if (T === f.up && ((z = M.current) != null && z.element)) {
-            const ee = Array.from(de.querySelectorAll(".k-treeview-item")), ye = [...ee].reverse().find((Ie) => !!(Ie && Ie.querySelector(".k-focus")));
-            if (ye && ee.indexOf(ye) === 0)
-              return se(() => {
-                var Ie;
-                q((Ie = M.current) == null ? void 0 : Ie.element);
+      if (L)
+        if (D === g.esc || G && D === g.up)
+          I.preventDefault(), Se(y);
+        else if (pe && pe.querySelector(".k-focus") && (D === g.up || D === g.down || D === g.left || D === g.right || D === g.home || D === g.end)) {
+          if (D === g.up && ((K = M.current) != null && K.element)) {
+            const se = Array.from(pe.querySelectorAll(".k-treeview-item")), Ie = [...se].reverse().find((xe) => !!(xe && xe.querySelector(".k-focus")));
+            if (Ie && se.indexOf(Ie) === 0)
+              return ne(() => {
+                var xe;
+                $((xe = M.current) == null ? void 0 : xe.element);
               });
           }
-          se(De);
+          ne(De);
         } else
-          T === f.down && se(() => {
-            var ee;
-            q(((ee = M.current) == null ? void 0 : ee.element) || de);
+          D === g.down && ne(() => {
+            var se;
+            $(((se = M.current) == null ? void 0 : se.element) || pe);
           });
       else
-        $ && T === f.down ? (I.preventDefault(), dt(y)) : A || T === f.esc && ht(I);
+        G && D === g.down ? (I.preventDefault(), pt(y)) : L || D === g.esc && ft(I);
     },
-    [A, h, g, m]
+    [L, u, f, m]
   ), Pe = o.useCallback(
     (I) => {
-      const { keyCode: T, altKey: $ } = I;
-      $ || T !== f.up && T !== f.down || (I.preventDefault(), se(
-        T === f.up ? () => {
-          q(E.current);
+      const { keyCode: D, altKey: G } = I;
+      G || D !== g.up && D !== g.down || (I.preventDefault(), ne(
+        D === g.up ? () => {
+          $(E.current);
         } : () => {
-          q(j.current && j.current.element);
+          $(j.current && j.current.element);
         }
       ));
     },
     []
-  ), q = o.useCallback(
+  ), $ = o.useCallback(
     (I) => {
-      I && se(() => I.focus());
+      I && ne(() => I.focus());
     },
     []
-  ), he = o.useCallback(
+  ), fe = o.useCallback(
     () => {
       var I;
-      !X && A && !h ? xe({ target: x.current }) : e.filterable ? q((I = M.current) == null ? void 0 : I.element) : q(j.current && j.current.element);
+      !Q && L && !u ? Se({ target: C.current }) : e.filterable ? $((I = M.current) == null ? void 0 : I.element) : $(j.current && j.current.element);
     },
-    [m, e.filterable, X, h, A]
-  ), Z = o.useCallback(
+    [m, e.filterable, Q, u, L]
+  ), te = o.useCallback(
     () => {
-      X && q(E.current);
+      Q && $(E.current);
     },
-    [X]
-  ), Ot = o.useCallback(
+    [Q]
+  ), Pt = o.useCallback(
     (I) => {
-      if (!X && !Y.current && (J(!0), e.onFocus && x.current)) {
-        const T = {
+      if (!Q && !Y.current && (le(!0), e.onFocus && C.current)) {
+        const D = {
           syntheticEvent: I,
           nativeEvent: I.nativeEvent,
-          target: x.current
+          target: C.current
         };
-        e.onFocus.call(void 0, T);
+        e.onFocus.call(void 0, D);
       }
     },
-    [X, e.onFocus]
-  ), Pt = o.useCallback(
+    [Q, e.onFocus]
+  ), _t = o.useCallback(
     (I) => {
-      if (X && !Y.current && x.current) {
-        J(!1);
-        const T = {
+      if (Q && !Y.current && C.current) {
+        le(!1);
+        const D = {
           syntheticEvent: I,
           nativeEvent: I.nativeEvent,
-          target: x.current
+          target: C.current
         };
         if (e.onBlur) {
-          const $ = { ...T };
-          e.onBlur.call(void 0, $);
+          const G = { ...D };
+          e.onBlur.call(void 0, G);
         }
-        ue || xe(T);
+        re || Se(D);
       }
     },
-    [X, e.onBlur, A, h, m]
-  ), _t = o.useCallback(
+    [Q, e.onBlur, L, u, m]
+  ), Rt = o.useCallback(
     () => {
-      X && se(De), ue && setTimeout(() => {
+      Q && ne(De), re && setTimeout(() => {
         var I;
-        q((I = K.current) == null ? void 0 : I.element);
+        $((I = H.current) == null ? void 0 : I.element);
       }, 300);
     },
-    [X, ue]
-  ), ct = o.useCallback(
-    (I, T, $) => {
+    [Q, re]
+  ), ut = o.useCallback(
+    (I, D, G) => {
       if (e.onChange) {
-        const de = {
-          value: T,
-          level: $ ? ps($) : [],
+        const pe = {
+          value: D,
+          level: G ? hs(G) : [],
           ...I
         };
-        e.onChange.call(void 0, de);
+        e.onChange.call(void 0, pe);
       }
-      ne || we(T);
+      Z || ge(D);
     },
-    [e.onChange, ne]
-  ), pt = o.useCallback(
+    [e.onChange, Z]
+  ), ht = o.useCallback(
     (I) => {
-      if (R(I.item, Q, c) || !x.current)
+      if (R(I.item, ee, c) || !C.current)
         return;
-      const { item: T, itemHierarchicalIndex: $, nativeEvent: de, syntheticEvent: y } = I, k = {
+      const { item: D, itemHierarchicalIndex: G, nativeEvent: pe, syntheticEvent: y } = I, x = {
         syntheticEvent: y,
-        nativeEvent: de,
-        target: x.current
+        nativeEvent: pe,
+        target: C.current
       };
-      ct(k, T, $), xe(k);
+      ut(x, D, G), Se(x);
     },
-    [ne, Q, e.onChange, c, A, h, m]
-  ), ht = o.useCallback(
+    [Z, ee, e.onChange, c, L, u, m]
+  ), ft = o.useCallback(
     (I) => {
-      if (!x.current)
+      if (!C.current)
         return;
-      const T = {
+      const D = {
         syntheticEvent: I,
         nativeEvent: I.nativeEvent,
-        target: x.current
+        target: C.current
       };
-      ct(T, null), xe(T), I.preventDefault();
+      ut(D, null), Se(D), I.preventDefault();
     },
-    [ne, e.onChange, A, h, m]
-  ), ut = o.useCallback(
+    [Z, e.onChange, L, u, m]
+  ), gt = o.useCallback(
     (I) => {
-      if (I.syntheticEvent.stopPropagation(), e.onExpandChange && x.current) {
-        const { item: T, itemHierarchicalIndex: $, nativeEvent: de, syntheticEvent: y } = I, k = {
-          level: ps($),
-          item: T,
-          nativeEvent: de,
+      if (I.syntheticEvent.stopPropagation(), e.onExpandChange && C.current) {
+        const { item: D, itemHierarchicalIndex: G, nativeEvent: pe, syntheticEvent: y } = I, x = {
+          level: hs(G),
+          item: D,
+          nativeEvent: pe,
           syntheticEvent: y,
-          target: x.current
+          target: C.current
         };
-        e.onExpandChange.call(void 0, k);
+        e.onExpandChange.call(void 0, x);
       }
     },
     [e.onExpandChange]
-  ), Ye = o.useCallback(
+  ), Qe = o.useCallback(
     (I) => {
-      if (e.onFilterChange && x.current) {
-        const $ = {
+      if (e.onFilterChange && C.current) {
+        const G = {
           filter: { field: e.textField, operator: "contains", value: I.target.value },
           syntheticEvent: I.syntheticEvent,
           nativeEvent: I.nativeEvent,
-          target: x.current
+          target: C.current
         };
-        e.onFilterChange.call(void 0, $), e.filter === void 0 && Mt(I.target.value);
+        e.onFilterChange.call(void 0, G), e.filter === void 0 && Je(I.target.value);
       }
     },
     [e.onFilterChange, e.filter, e.textField]
-  ), Je = () => {
+  ), Xe = () => {
     const I = s.filterable ? /* @__PURE__ */ o.createElement(
       Re,
       {
-        value: s.filter === void 0 ? ve : s.filter,
-        ref: K,
-        onChange: Ye,
+        value: s.filter === void 0 ? X : s.filter,
+        ref: H,
+        onChange: Qe,
         onKeyDown: Pe,
-        size: ge,
-        rounded: be,
-        fillMode: Ee
+        size: me,
+        rounded: ye,
+        fillMode: Fe
       }
-    ) : null, T = {
+    ) : null, D = {
       adaptiveTitle: s.adaptiveTitle,
-      expand: A,
-      onClose: ($) => xe($),
-      windowWidth: W,
+      expand: L,
+      onClose: (G) => Se(G),
+      windowWidth: z,
       mobileFilter: I
     };
-    return /* @__PURE__ */ o.createElement(es, { ...T }, /* @__PURE__ */ o.createElement(at, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ o.createElement("div", { className: "k-list k-list-lg" }, p.length > 0 ? /* @__PURE__ */ o.createElement(
+    return /* @__PURE__ */ o.createElement(ss, { ...D }, /* @__PURE__ */ o.createElement(rt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ o.createElement("div", { className: "k-list k-list-lg" }, p.length > 0 ? /* @__PURE__ */ o.createElement(
       kt,
       {
         ref: j,
-        tabIndex: F,
-        data: Qe,
+        tabIndex: T,
+        data: Ze,
         focusIdField: c,
         textField: s.textField,
-        selectField: S,
+        selectField: k,
         expandField: s.expandField,
-        childrenField: D,
+        childrenField: F,
         expandIcons: !0,
-        onItemClick: pt,
-        onExpandChange: ut,
-        size: ge,
+        onItemClick: ht,
+        onExpandChange: gt,
+        size: me,
         item: s.item,
-        dir: L
+        dir: A
       }
-    ) : /* @__PURE__ */ o.createElement(Xe, null, Ze.toLanguageString(fe, le[fe]))))));
-  }, Rt = o.useCallback(
+    ) : /* @__PURE__ */ o.createElement(et, null, tt.toLanguageString(ve, ce[ve]))))));
+  }, Vt = o.useCallback(
     (I) => {
-      for (let T of I)
-        je(T.target.clientWidth);
+      for (let D of I)
+        Ee(D.target.clientWidth);
     },
     []
-  ), Qe = o.useMemo(
-    () => ne || !oe ? p : Ts(
+  ), Ze = o.useMemo(
+    () => Z || !ae ? p : Ms(
       p,
-      D,
-      (I) => Fs(
+      F,
+      (I) => Ns(
         I,
-        D,
-        { [S]: R(I, Q, c) }
+        F,
+        { [k]: R(I, ee, c) }
       )
     ),
-    [p, Q, ne, oe, S, D]
-  ), Xe = s.listNoData || Cs, gt = s.valueHolder || Ii, Ze = bs(), ft = !C || P.valid, { size: ge, rounded: be, fillMode: Ee } = s, ae = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+    [p, ee, Z, ae, k, F]
+  ), et = s.listNoData || Ss, mt = s.valueHolder || ki, tt = Is(), vt = !S || Ne.valid, { size: me, rounded: ye, fillMode: Fe } = s, de = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
     "span",
     {
       className: B("k-dropdowntree k-picker", s.className, {
-        [`k-picker-${vi[ge] || ge}`]: ge,
-        [`k-rounded-${bi[be] || be}`]: be,
-        [`k-picker-${Ee}`]: Ee,
-        "k-focus": X,
-        "k-invalid": !ft,
+        [`k-picker-${Ii[me] || me}`]: me,
+        [`k-rounded-${xi[ye] || ye}`]: ye,
+        [`k-picker-${Fe}`]: Fe,
+        "k-focus": Q,
+        "k-invalid": !vt,
         "k-loading": s.loading,
         "k-required": _,
         "k-disabled": s.disabled
       }),
-      tabIndex: F,
+      tabIndex: T,
       accessKey: s.accessKey,
       id: a,
       style: b ? { ...r, width: void 0 } : r,
-      dir: L,
+      dir: A,
       ref: E,
-      onKeyDown: u ? void 0 : Le,
-      onMouseDown: _t,
-      onClick: u ? void 0 : Nt,
-      onFocus: Ot,
-      onBlur: Pt,
+      onKeyDown: h ? void 0 : ze,
+      onMouseDown: Rt,
+      onClick: h ? void 0 : Ot,
+      onFocus: Pt,
+      onBlur: _t,
       role: "combobox",
       "aria-haspopup": "tree",
-      "aria-expanded": A,
-      "aria-disabled": u,
+      "aria-expanded": L,
+      "aria-disabled": h,
       "aria-label": b,
       "aria-labelledby": s.ariaLabelledBy,
       "aria-describedby": s.ariaDescribedBy,
       "aria-required": _
     },
-    /* @__PURE__ */ o.createElement("span", { className: "k-input-inner" }, /* @__PURE__ */ o.createElement(gt, { item: Q }, Ke || v)),
-    s.loading && /* @__PURE__ */ o.createElement(ke, { className: "k-input-loading-icon", name: "loading" }),
-    oe && !u && /* @__PURE__ */ o.createElement(
+    /* @__PURE__ */ o.createElement("span", { className: "k-input-inner" }, /* @__PURE__ */ o.createElement(mt, { item: ee }, Ke || v)),
+    s.loading && /* @__PURE__ */ o.createElement(Ce, { className: "k-input-loading-icon", name: "loading" }),
+    ae && !h && /* @__PURE__ */ o.createElement(
       "span",
       {
-        onClick: ht,
+        onClick: ft,
         className: "k-clear-value",
-        title: Ze.toLanguageString(st, le[st]),
+        title: tt.toLanguageString(nt, ce[nt]),
         role: "button",
         tabIndex: -1,
         onMouseDown: (I) => I.preventDefault()
       },
-      /* @__PURE__ */ o.createElement(ke, { name: "x", icon: ot })
+      /* @__PURE__ */ o.createElement(Ce, { name: "x", icon: lt })
     ),
     /* @__PURE__ */ o.createElement(
       Te,
@@ -3629,90 +3644,90 @@ const Cs = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
         type: "button",
         "aria-label": "select",
         className: "k-input-button",
-        size: ge,
-        fillMode: Ee,
+        size: me,
+        fillMode: Fe,
         themeColor: "base",
         rounded: null,
         icon: "caret-alt-down",
-        svgIcon: Ut
+        svgIcon: Yt
       }
     ),
     /* @__PURE__ */ o.createElement(
       "select",
       {
         name: w,
-        ref: U,
+        ref: J,
         tabIndex: -1,
         "aria-hidden": !0,
         title: b,
         style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
       },
-      /* @__PURE__ */ o.createElement("option", { value: s.valueMap ? s.valueMap.call(void 0, Q) : Q })
+      /* @__PURE__ */ o.createElement("option", { value: s.valueMap ? s.valueMap.call(void 0, ee) : ee })
     ),
-    !ue && /* @__PURE__ */ o.createElement(
-      jt,
+    !re && /* @__PURE__ */ o.createElement(
+      Jt,
       {
-        className: B(d.className, { "k-rtl": L === "rtl" }),
+        className: B(d.className, { "k-rtl": A === "rtl" }),
         popupClass: B(
           d.popupClass,
           "k-dropdowntree-popup"
         ),
-        style: Me,
+        style: q,
         animate: d.animate,
         anchor: E.current,
-        show: A,
-        onOpen: he,
-        onClose: Z,
+        show: L,
+        onOpen: fe,
+        onClose: te,
         appendTo: d.appendTo
       },
       s.filterable && /* @__PURE__ */ o.createElement(
         Re,
         {
-          value: s.filter === void 0 ? ve : s.filter,
+          value: s.filter === void 0 ? X : s.filter,
           ref: M,
-          onChange: Ye,
+          onChange: Qe,
           onKeyDown: Pe,
-          size: ge,
-          rounded: be,
-          fillMode: Ee
+          size: me,
+          rounded: ye,
+          fillMode: Fe
         }
       ),
       p.length > 0 ? /* @__PURE__ */ o.createElement(
         kt,
         {
           ref: j,
-          tabIndex: F,
-          data: Qe,
+          tabIndex: T,
+          data: Ze,
           focusIdField: c,
           textField: s.textField,
-          selectField: S,
+          selectField: k,
           expandField: s.expandField,
-          childrenField: D,
+          childrenField: F,
           expandIcons: !0,
-          onItemClick: pt,
-          onExpandChange: ut,
-          size: ge,
+          onItemClick: ht,
+          onExpandChange: gt,
+          size: me,
           item: s.item,
-          dir: L
+          dir: A
         }
-      ) : /* @__PURE__ */ o.createElement(Xe, null, Ze.toLanguageString(fe, le[fe]))
+      ) : /* @__PURE__ */ o.createElement(et, null, tt.toLanguageString(ve, ce[ve]))
     )
-  ), ue && Je());
+  ), re && Xe());
   return b ? /* @__PURE__ */ o.createElement(
-    $e,
+    Ue,
     {
       label: b,
       editorValue: Ke,
       editorPlaceholder: v,
-      editorValid: ft,
-      editorDisabled: u,
+      editorValid: vt,
+      editorDisabled: h,
       editorId: a,
       style: { width: r ? r.width : void 0 },
-      children: ae,
-      dir: L
+      children: de,
+      dir: A
     }
-  ) : ae;
-}), xi = {
+  ) : de;
+}), Ei = {
   opened: l.bool,
   disabled: l.bool,
   dir: l.string,
@@ -3765,9 +3780,9 @@ const Cs = (i) => /* @__PURE__ */ o.createElement("div", { className: "k-nodata"
   adaptiveTitle: l.string,
   adaptive: l.bool
 };
-xs.displayName = "KendoReactDropDownTree";
-xs.propTypes = xi;
-const Si = "Please select a value from the list!", { sizeMap: us, roundedMap: wi } = qe, Ei = (i) => i.split("_").map((t) => parseInt(t, 10)), Di = (i, t) => {
+ws.displayName = "KendoReactDropDownTree";
+ws.propTypes = Ei;
+const Fi = "Please select a value from the list!", { sizeMap: gs, roundedMap: Di } = Ge, Ti = (i) => i.split("_").map((t) => parseInt(t, 10)), Mi = (i, t) => {
   const { validationMessage: e, valid: s, required: n } = i;
   return {
     customError: e !== void 0,
@@ -3788,399 +3803,399 @@ const Si = "Please select a value from the list!", { sizeMap: us, roundedMap: wi
   fillMode: "solid",
   required: !1,
   validityStyles: !0
-}, Ti = Be(), ss = o.forwardRef((i, t) => {
-  const e = Gt(Ti, i);
-  We(Ue);
-  const s = fs(), n = e.id || s, {
+}, Ni = Be(), ns = o.forwardRef((i, t) => {
+  const e = jt(Ni, i);
+  $e(Ye);
+  const s = vs(), n = e.id || s, {
     data: a = [],
     dataItemKey: p,
     popupSettings: c = {},
     style: d = {},
     opened: r,
-    disabled: h,
-    onOpen: u = De,
-    onClose: g = De,
+    disabled: u,
+    onOpen: h = De,
+    onClose: f = De,
     placeholder: m,
     label: v,
     name: b,
     checkField: w = _e.checkField,
-    checkIndeterminateField: S = _e.checkIndeterminateField,
-    subItemsField: D = _e.subItemsField,
-    validationMessage: N,
-    valid: O,
+    checkIndeterminateField: k = _e.checkIndeterminateField,
+    subItemsField: F = _e.subItemsField,
+    validationMessage: O,
+    valid: N,
     tags: _,
-    value: C,
-    required: F = _e.required,
-    validityStyles: x = _e.validityStyles
-  } = e, E = $t(e.tabIndex, h), M = o.useRef(null), K = o.useRef(null), U = o.useRef(null), j = o.useRef(null), Y = o.useRef(null), re = o.useRef(null), we = o.useRef(!1), ne = o.useRef([]), Q = o.useRef(null), [oe, Ke] = o.useState(), [P, H] = o.useState(!1), [L, me] = o.useState(!1), [Ce, Me] = o.useState(), [Ne, Oe] = o.useState([]), [A, X] = o.useState(""), J = !!(Ce && Ce <= Se && e.adaptive), W = r !== void 0 ? r : P, je = !!(Array.isArray(C) && C.length), ue = Di({ validationMessage: N, valid: O, required: F }, je), ve = ms(K, e.dir), Mt = c.width !== void 0 ? c.width : d.width !== void 0 ? d.width : _e.popupSettings.width, dt = {
-    width: ks(K, Mt),
-    ...ve !== void 0 ? { direction: ve } : {}
-  }, xe = o.useCallback(() => K.current && K.current.focus(), []);
-  ne.current = _ === void 0 ? (C || []).map((y) => ({ text: V(y, e.textField), data: [y] })) : [..._], o.useImperativeHandle(
+    value: S,
+    required: T = _e.required,
+    validityStyles: C = _e.validityStyles
+  } = e, E = Ut(e.tabIndex, u), M = o.useRef(null), H = o.useRef(null), J = o.useRef(null), j = o.useRef(null), Y = o.useRef(null), W = o.useRef(null), ge = o.useRef(!1), Z = o.useRef([]), ee = o.useRef(null), [ae, Ke] = o.useState(), [Ne, Le] = o.useState(!1), [A, Oe] = o.useState(!1), [P, q] = o.useState(), [be, ke] = o.useState([]), [L, Q] = o.useState(""), le = !!(P && P <= we && e.adaptive), z = r !== void 0 ? r : Ne, Ee = !!(Array.isArray(S) && S.length), re = Mi({ validationMessage: O, valid: N, required: T }, Ee), X = bs(H, e.dir), Je = c.width !== void 0 ? c.width : d.width !== void 0 ? d.width : _e.popupSettings.width, pt = {
+    width: ks(H, Je),
+    ...X !== void 0 ? { direction: X } : {}
+  }, Se = o.useCallback(() => H.current && H.current.focus(), []);
+  Z.current = _ === void 0 ? (S || []).map((y) => ({ text: V(y, e.textField), data: [y] })) : [..._], o.useImperativeHandle(
     M,
     () => ({
       props: e,
-      element: K.current,
-      focus: xe
+      element: H.current,
+      focus: Se
     })
   ), o.useImperativeHandle(t, () => M.current);
-  const Nt = o.useCallback(
+  const Ot = o.useCallback(
     () => {
       Y.current && Y.current.setCustomValidity && Y.current.setCustomValidity(
-        ue.valid ? "" : N === void 0 ? Si : N
+        re.valid ? "" : O === void 0 ? Fi : O
       );
     },
-    [N, ue]
+    [O, re]
   );
-  o.useEffect(Nt), o.useEffect(() => {
-    const y = Fe && window.ResizeObserver && new window.ResizeObserver(ft.bind(void 0));
+  o.useEffect(Ot), o.useEffect(() => {
+    const y = Me && window.ResizeObserver && new window.ResizeObserver(vt.bind(void 0));
     return document != null && document.body && y && y.observe(document.body), () => {
       y && y.disconnect();
     };
   }, []), o.useEffect(
     () => {
-      Q.current && W && Q.current.setPosition(Q.current._popup);
+      ee.current && z && ee.current.setPosition(ee.current._popup);
     },
-    [C, W]
+    [S, z]
   );
-  const se = o.useCallback(
-    (y, k, z) => {
+  const ne = o.useCallback(
+    (y, x, K) => {
       if (e.onChange) {
-        const ee = {
-          items: k,
-          operation: z,
+        const se = {
+          items: x,
+          operation: K,
           ...y
         };
-        e.onChange.call(void 0, ee);
+        e.onChange.call(void 0, se);
       }
     },
     [e.onChange]
-  ), Le = o.useCallback(
+  ), ze = o.useCallback(
     (y) => {
-      if (R(y.item, C, p) || !M.current)
+      if (R(y.item, S, p) || !M.current)
         return;
-      const { item: k, nativeEvent: z, syntheticEvent: ee } = y, ye = {
-        syntheticEvent: ee,
-        nativeEvent: z,
+      const { item: x, nativeEvent: K, syntheticEvent: se } = y, Ie = {
+        syntheticEvent: se,
+        nativeEvent: K,
         target: M.current
       };
-      se(ye, [k], "toggle");
+      ne(Ie, [x], "toggle");
     },
-    [C, p, se]
+    [S, p, ne]
   ), Pe = o.useCallback(
     (y) => {
-      if (!W) {
-        if (u) {
-          const k = { ...y };
-          u.call(void 0, k);
+      if (!z) {
+        if (h) {
+          const x = { ...y };
+          h.call(void 0, x);
         }
-        r === void 0 && (H(!0), Oe(C || []), J && setTimeout(() => {
-          var k;
-          Z((k = j.current) == null ? void 0 : k.element);
+        r === void 0 && (Le(!0), ke(S || []), le && setTimeout(() => {
+          var x;
+          te((x = j.current) == null ? void 0 : x.element);
         }, 300));
       }
     },
-    [W, r, u, J, j]
-  ), q = o.useCallback(
+    [z, r, h, le, j]
+  ), $ = o.useCallback(
     (y) => {
-      if (W) {
-        if (g) {
-          const k = { ...y };
-          g.call(void 0, k);
+      if (z) {
+        if (f) {
+          const x = { ...y };
+          f.call(void 0, x);
         }
-        r === void 0 && H(!1);
+        r === void 0 && Le(!1);
       }
     },
-    [W, r, g]
-  ), he = o.useCallback(
+    [z, r, f]
+  ), fe = o.useCallback(
     (y) => {
-      we.current = !0, y(), window.setTimeout(() => we.current = !1, 0);
+      ge.current = !0, y(), window.setTimeout(() => ge.current = !1, 0);
     },
     []
-  ), Z = o.useCallback(
+  ), te = o.useCallback(
     (y) => {
-      y && he(() => y.focus());
+      y && fe(() => y.focus());
     },
-    [he]
-  ), Ot = o.useCallback(
+    [fe]
+  ), Pt = o.useCallback(
     () => {
       var y;
-      !L && W ? q({ target: M.current }) : e.filterable ? Z((y = U.current) == null ? void 0 : y.element) : Z(re.current && re.current.element);
+      !A && z ? $({ target: M.current }) : e.filterable ? te((y = J.current) == null ? void 0 : y.element) : te(W.current && W.current.element);
     },
-    [L, W, Z, q, e.filterable]
-  ), Pt = o.useCallback(
+    [A, z, te, $, e.filterable]
+  ), _t = o.useCallback(
     () => {
-      L && Z(K.current);
+      A && te(H.current);
     },
-    [L, Z]
-  ), _t = o.useCallback(
+    [A, te]
+  ), Rt = o.useCallback(
     (y) => {
-      if (!L && !we.current && (me(!0), e.onFocus && M.current)) {
-        const k = {
+      if (!A && !ge.current && (Oe(!0), e.onFocus && M.current)) {
+        const x = {
           syntheticEvent: y,
           nativeEvent: y.nativeEvent,
           target: M.current
         };
-        e.onFocus.call(void 0, k);
+        e.onFocus.call(void 0, x);
       }
     },
-    [L, e.onFocus]
-  ), ct = o.useCallback(
+    [A, e.onFocus]
+  ), ut = o.useCallback(
     (y) => {
-      if (L && !we.current && M.current) {
-        me(!1);
-        const k = {
+      if (A && !ge.current && M.current) {
+        Oe(!1);
+        const x = {
           syntheticEvent: y,
           nativeEvent: y.nativeEvent,
           target: M.current
         };
         if (e.onBlur) {
-          const z = { ...k };
-          e.onBlur.call(void 0, z);
+          const K = { ...x };
+          e.onBlur.call(void 0, K);
         }
-        J || q(k);
+        le || $(x);
       }
     },
-    [L, e.onBlur, W, r, g]
-  ), pt = o.useCallback(
+    [A, e.onBlur, z, r, f]
+  ), ht = o.useCallback(
     () => {
-      L && he(De);
+      A && fe(De);
     },
-    [L, he]
-  ), ht = o.useCallback(
+    [A, fe]
+  ), ft = o.useCallback(
     (y) => {
       if (!y.isDefaultPrevented() && M.current) {
-        me(!0);
-        const k = {
+        Oe(!0);
+        const x = {
           syntheticEvent: y,
           nativeEvent: y.nativeEvent,
           target: M.current
         };
-        W || Pe(k);
+        z || Pe(x);
       }
     },
-    [W, Pe]
-  ), ut = o.useCallback(
+    [z, Pe]
+  ), gt = o.useCallback(
     (y) => {
-      var Ie, ns;
-      const { keyCode: k, altKey: z } = y, ee = re.current && re.current.element;
-      if (!M.current || y.isDefaultPrevented() && ((Ie = U.current) == null ? void 0 : Ie.element) === y.target)
+      var xe, as;
+      const { keyCode: x, altKey: K } = y, se = W.current && W.current.element;
+      if (!M.current || y.isDefaultPrevented() && ((xe = J.current) == null ? void 0 : xe.element) === y.target)
         return;
-      const ye = {
+      const Ie = {
         syntheticEvent: y,
         nativeEvent: y.nativeEvent,
         target: M.current
       };
-      if (C && C.length > 0 && (k === f.left || k === f.right || k === f.home || k === f.end || k === f.delete)) {
-        const te = ne.current;
-        let ce = oe ? te.findIndex((Ss) => Ct(Ss, oe, p)) : -1, pe;
-        const Vt = ce !== -1;
-        k === f.left ? (Vt ? ce = Math.max(0, ce - 1) : ce = te.length - 1, pe = te[ce]) : k === f.right ? ce === te.length - 1 ? pe = void 0 : Vt && (ce = Math.min(te.length - 1, ce + 1), pe = te[ce]) : k === f.home ? pe = te[0] : k === f.end ? pe = te[te.length - 1] : k === f.delete && Vt && se(ye, te[ce].data, "delete"), pe !== oe && Ke(pe);
+      if (S && S.length > 0 && (x === g.left || x === g.right || x === g.home || x === g.end || x === g.delete)) {
+        const ie = Z.current;
+        let ue = ae ? ie.findIndex((Es) => St(Es, ae, p)) : -1, he;
+        const Bt = ue !== -1;
+        x === g.left ? (Bt ? ue = Math.max(0, ue - 1) : ue = ie.length - 1, he = ie[ue]) : x === g.right ? ue === ie.length - 1 ? he = void 0 : Bt && (ue = Math.min(ie.length - 1, ue + 1), he = ie[ue]) : x === g.home ? he = ie[0] : x === g.end ? he = ie[ie.length - 1] : x === g.delete && Bt && ne(Ie, ie[ue].data, "delete"), he !== ae && Ke(he);
       }
-      if (W)
-        if (k === f.esc || z && k === f.up)
-          y.preventDefault(), q(ye);
-        else if (ee && ee.querySelector(".k-focus") && (k === f.up || k === f.down || k === f.left || k === f.right || k === f.home || k === f.end)) {
-          if (k === f.up && ((ns = U.current) != null && ns.element)) {
-            const te = Array.from(ee.querySelectorAll(".k-treeview-item")), ce = [...te].reverse().find((pe) => !!(pe && pe.querySelector(".k-focus")));
-            if (ce && te.indexOf(ce) === 0)
-              return he(() => {
-                var pe;
-                Z((pe = U.current) == null ? void 0 : pe.element);
+      if (z)
+        if (x === g.esc || K && x === g.up)
+          y.preventDefault(), $(Ie);
+        else if (se && se.querySelector(".k-focus") && (x === g.up || x === g.down || x === g.left || x === g.right || x === g.home || x === g.end)) {
+          if (x === g.up && ((as = J.current) != null && as.element)) {
+            const ie = Array.from(se.querySelectorAll(".k-treeview-item")), ue = [...ie].reverse().find((he) => !!(he && he.querySelector(".k-focus")));
+            if (ue && ie.indexOf(ue) === 0)
+              return fe(() => {
+                var he;
+                te((he = J.current) == null ? void 0 : he.element);
               });
           }
-          he(De);
+          fe(De);
         } else
-          k === f.down && he(() => {
-            var te;
-            Z(((te = U.current) == null ? void 0 : te.element) || ee);
+          x === g.down && fe(() => {
+            var ie;
+            te(((ie = J.current) == null ? void 0 : ie.element) || se);
           });
       else
-        z && k === f.down && (y.preventDefault(), Pe(ye));
+        K && x === g.down && (y.preventDefault(), Pe(Ie));
     },
-    [W, q, Z, he, Pe, oe, p, C, se]
-  ), Ye = o.useCallback(
+    [z, $, te, fe, Pe, ae, p, S, ne]
+  ), Qe = o.useCallback(
     (y) => {
-      const { keyCode: k, altKey: z } = y;
-      z || k !== f.up && k !== f.down || (y.preventDefault(), he(
-        k === f.up ? () => {
-          Z(K.current);
+      const { keyCode: x, altKey: K } = y;
+      K || x !== g.up && x !== g.down || (y.preventDefault(), fe(
+        x === g.up ? () => {
+          te(H.current);
         } : () => {
-          Z(re.current && re.current.element);
+          te(W.current && W.current.element);
         }
       ));
     },
-    [Z, he]
-  ), Je = o.useCallback(
+    [te, fe]
+  ), Xe = o.useCallback(
     (y) => {
       if (!M.current)
         return;
-      const k = {
+      const x = {
         syntheticEvent: y,
         nativeEvent: y.nativeEvent,
         target: M.current
       };
-      se(k, [], "clear"), q(k), y.preventDefault();
+      ne(x, [], "clear"), $(x), y.preventDefault();
     },
-    [se, q]
-  ), Rt = o.useCallback(
-    (y, k) => {
-      var z;
-      q({ target: M.current }), L || Z((z = U.current) == null ? void 0 : z.element), se({
-        syntheticEvent: k,
-        nativeEvent: k.nativeEvent,
+    [ne, $]
+  ), Vt = o.useCallback(
+    (y, x) => {
+      var K;
+      $({ target: M.current }), A || te((K = J.current) == null ? void 0 : K.element), ne({
+        syntheticEvent: x,
+        nativeEvent: x.nativeEvent,
         target: M.current
       }, y, "delete");
     },
-    [se, q, Z, L]
-  ), Qe = o.useCallback(
+    [ne, $, te, A]
+  ), Ze = o.useCallback(
     (y) => {
       if (e.onExpandChange && M.current) {
-        const { item: k, itemHierarchicalIndex: z, nativeEvent: ee, syntheticEvent: ye } = y, Ie = {
-          level: Ei(z),
-          item: k,
-          nativeEvent: ee,
-          syntheticEvent: ye,
+        const { item: x, itemHierarchicalIndex: K, nativeEvent: se, syntheticEvent: Ie } = y, xe = {
+          level: Ti(K),
+          item: x,
+          nativeEvent: se,
+          syntheticEvent: Ie,
           target: M.current
         };
-        e.onExpandChange.call(void 0, Ie);
+        e.onExpandChange.call(void 0, xe);
       }
     },
     [e.onExpandChange]
-  ), Xe = o.useCallback(
+  ), et = o.useCallback(
     (y) => {
       if (e.onFilterChange && M.current) {
-        const z = {
+        const K = {
           filter: { field: e.textField, operator: "contains", value: y.target.value },
           syntheticEvent: y.syntheticEvent,
           nativeEvent: y.nativeEvent,
           target: M.current
         };
-        e.onFilterChange.call(void 0, z), e.filter === void 0 && X(y.target.value);
+        e.onFilterChange.call(void 0, K), e.filter === void 0 && Q(y.target.value);
       }
     },
     [e.onFilterChange, e.filter, e.textField]
-  ), gt = o.useCallback(
+  ), mt = o.useCallback(
     (y) => {
       if (!M.current)
         return;
-      const k = {
+      const x = {
         syntheticEvent: y,
         nativeEvent: y.nativeEvent,
         target: M.current
       };
-      e.onCancel && e.onCancel.call(void 0, k), q(k), y.preventDefault();
+      e.onCancel && e.onCancel.call(void 0, x), $(x), y.preventDefault();
     },
-    [e.onCancel, q]
-  ), Ze = () => {
+    [e.onCancel, $]
+  ), tt = () => {
     const y = e.filterable ? /* @__PURE__ */ o.createElement(
       Re,
       {
-        value: e.filter === void 0 ? A : e.filter,
+        value: e.filter === void 0 ? L : e.filter,
         ref: j,
-        onChange: Xe,
-        onKeyDown: Ye,
-        size: ae,
+        onChange: et,
+        onKeyDown: Qe,
+        size: de,
         rounded: I,
-        fillMode: T
+        fillMode: D
       }
-    ) : null, k = {
+    ) : null, x = {
       adaptiveTitle: e.adaptiveTitle,
-      expand: W,
-      onClose: (z) => e.onCancel ? gt(z) : Je(z),
-      windowWidth: Ce,
+      expand: z,
+      onClose: (K) => e.onCancel ? mt(K) : Xe(K),
+      windowWidth: P,
       mobileFilter: y,
       footer: {
-        cancelText: be.toLanguageString(nt, le[nt]),
-        onCancel: (z) => e.onCancel ? gt(z) : Je(z),
-        applyText: be.toLanguageString(it, le[it]),
-        onApply: (z) => q(z)
+        cancelText: ye.toLanguageString(at, ce[at]),
+        onCancel: (K) => e.onCancel ? mt(K) : Xe(K),
+        applyText: ye.toLanguageString(ot, ce[ot]),
+        onApply: (K) => $(K)
       }
     };
-    return /* @__PURE__ */ o.createElement(es, { ...k }, /* @__PURE__ */ o.createElement(at, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ o.createElement("div", { className: "k-list k-list-lg" }, a.length > 0 ? /* @__PURE__ */ o.createElement(
+    return /* @__PURE__ */ o.createElement(ss, { ...x }, /* @__PURE__ */ o.createElement(rt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ o.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ o.createElement("div", { className: "k-list k-list-lg" }, a.length > 0 ? /* @__PURE__ */ o.createElement(
       kt,
       {
-        ref: re,
+        ref: W,
         tabIndex: E,
         data: a,
         focusIdField: p,
         textField: e.textField,
         checkField: w,
-        checkIndeterminateField: S,
+        checkIndeterminateField: k,
         expandField: e.expandField,
-        childrenField: D,
+        childrenField: F,
         expandIcons: !0,
-        onItemClick: Le,
-        onCheckChange: Le,
-        onExpandChange: Qe,
+        onItemClick: ze,
+        onCheckChange: ze,
+        onExpandChange: Ze,
         checkboxes: !0,
-        size: ae,
+        size: de,
         item: e.item,
-        dir: ve
+        dir: X
       }
-    ) : /* @__PURE__ */ o.createElement(ge, null, be.toLanguageString(fe, le[fe]))))));
-  }, ft = o.useCallback(
+    ) : /* @__PURE__ */ o.createElement(me, null, ye.toLanguageString(ve, ce[ve]))))));
+  }, vt = o.useCallback(
     (y) => {
-      for (let k of y)
-        Me(k.target.clientWidth);
+      for (let x of y)
+        q(x.target.clientWidth);
     },
     []
-  ), ge = e.listNoData || Cs, be = bs(), Ee = !x || ue.valid, { size: ae, rounded: I, fillMode: T } = e, $ = J && W ? Ne : ne.current, de = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+  ), me = e.listNoData || Ss, ye = Is(), Fe = !C || re.valid, { size: de, rounded: I, fillMode: D } = e, G = le && z ? be : Z.current, pe = /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
     "span",
     {
       className: B("k-multiselecttree k-input", e.className, {
-        [`k-input-${us[ae] || ae}`]: ae,
-        [`k-rounded-${wi[I] || I}`]: I,
-        [`k-input-${T}`]: T,
-        "k-focus": L && !h,
-        "k-invalid": !Ee,
-        "k-disabled": h,
+        [`k-input-${gs[de] || de}`]: de,
+        [`k-rounded-${Di[I] || I}`]: I,
+        [`k-input-${D}`]: D,
+        "k-focus": A && !u,
+        "k-invalid": !Fe,
+        "k-disabled": u,
         "k-loading": e.loading,
-        "k-required": F
+        "k-required": T
       }),
       tabIndex: E,
       accessKey: e.accessKey,
       id: n,
       style: v ? { ...d, width: void 0 } : d,
-      dir: ve,
-      ref: K,
-      onKeyDown: h ? void 0 : ut,
-      onMouseDown: pt,
-      onFocus: _t,
-      onBlur: ct,
+      dir: X,
+      ref: H,
+      onKeyDown: u ? void 0 : gt,
+      onMouseDown: ht,
+      onFocus: Rt,
+      onBlur: ut,
       role: "combobox",
       "aria-haspopup": "tree",
-      "aria-expanded": W,
-      "aria-disabled": h,
+      "aria-expanded": z,
+      "aria-disabled": u,
       "aria-label": v,
       "aria-labelledby": e.ariaLabelledBy,
       "aria-describedby": e.ariaDescribedBy ? e.ariaDescribedBy : "tagslist-" + n,
       "aria-required": e.required,
-      onClick: h ? void 0 : ht
+      onClick: u ? void 0 : ft
     },
     /* @__PURE__ */ o.createElement(
       "div",
       {
         id: "tagslist-" + n,
         className: B("k-input-values k-chip-list k-selection-multiple", {
-          [`k-chip-list-${us[ae] || ae}`]: ae
+          [`k-chip-list-${gs[de] || de}`]: de
         })
       },
-      $.length > 0 && /* @__PURE__ */ o.createElement(
-        Is,
+      G.length > 0 && /* @__PURE__ */ o.createElement(
+        Cs,
         {
           tag: e.tag,
-          onTagDelete: Rt,
-          data: $,
+          onTagDelete: Vt,
+          data: G,
           guid: n,
-          focused: oe ? ne.current.find((y) => Ct(y, oe, p)) : void 0,
-          size: ae
+          focused: ae ? Z.current.find((y) => St(y, ae, p)) : void 0,
+          size: de
         }
       )
     ),
-    /* @__PURE__ */ o.createElement("span", { className: "k-input-inner" }, $.length === 0 && /* @__PURE__ */ o.createElement("span", { className: "k-input-value-text" }, m)),
-    e.loading && /* @__PURE__ */ o.createElement(ke, { className: "k-input-loading-icon", name: "loading" }),
-    je && !h && $.length > 0 && /* @__PURE__ */ o.createElement(lt, { onClick: Je }),
+    /* @__PURE__ */ o.createElement("span", { className: "k-input-inner" }, G.length === 0 && /* @__PURE__ */ o.createElement("span", { className: "k-input-value-text" }, m)),
+    e.loading && /* @__PURE__ */ o.createElement(Ce, { className: "k-input-loading-icon", name: "loading" }),
+    Ee && !u && G.length > 0 && /* @__PURE__ */ o.createElement(dt, { onClick: Xe }),
     /* @__PURE__ */ o.createElement(
       "select",
       {
@@ -4194,79 +4209,79 @@ const Si = "Please select a value from the list!", { sizeMap: us, roundedMap: wi
       /* @__PURE__ */ o.createElement(
         "option",
         {
-          value: e.valueMap ? e.valueMap.call(void 0, C) : C
+          value: e.valueMap ? e.valueMap.call(void 0, S) : S
         }
       )
     ),
-    !J && /* @__PURE__ */ o.createElement(
-      jt,
+    !le && /* @__PURE__ */ o.createElement(
+      Jt,
       {
         popupClass: B(
           c.popupClass,
           "k-multiselecttree-popup"
         ),
-        className: B(c.className, { "k-rtl": ve === "rtl" }),
-        style: dt,
+        className: B(c.className, { "k-rtl": X === "rtl" }),
+        style: pt,
         animate: c.animate,
-        anchor: K.current,
-        show: W,
-        onOpen: Ot,
-        onClose: Pt,
+        anchor: H.current,
+        show: z,
+        onOpen: Pt,
+        onClose: _t,
         appendTo: c.appendTo,
-        ref: Q
+        ref: ee
       },
       e.filterable && /* @__PURE__ */ o.createElement(
         Re,
         {
-          value: e.filter === void 0 ? A : e.filter,
-          ref: U,
-          onChange: Xe,
-          onKeyDown: Ye,
+          value: e.filter === void 0 ? L : e.filter,
+          ref: J,
+          onChange: et,
+          onKeyDown: Qe,
           tabIndex: E,
-          size: ae,
+          size: de,
           rounded: I,
-          fillMode: T
+          fillMode: D
         }
       ),
       a.length > 0 ? /* @__PURE__ */ o.createElement(
         kt,
         {
-          ref: re,
+          ref: W,
           tabIndex: E,
           data: a,
           focusIdField: p,
           textField: e.textField,
           checkField: w,
-          checkIndeterminateField: S,
+          checkIndeterminateField: k,
           expandField: e.expandField,
-          childrenField: D,
+          childrenField: F,
           expandIcons: !0,
-          onItemClick: Le,
-          onCheckChange: Le,
-          onExpandChange: Qe,
+          onItemClick: ze,
+          onCheckChange: ze,
+          onExpandChange: Ze,
           checkboxes: !0,
-          size: ae,
+          size: de,
           item: e.item,
-          dir: ve
+          dir: X
         }
-      ) : /* @__PURE__ */ o.createElement(ge, null, be.toLanguageString(fe, le[fe]))
+      ) : /* @__PURE__ */ o.createElement(me, null, ye.toLanguageString(ve, ce[ve]))
     )
-  ), J && Ze());
+  ), le && tt());
   return v ? /* @__PURE__ */ o.createElement(
-    $e,
+    Ue,
     {
       label: v,
-      editorValue: je,
+      editorValue: Ee,
       editorPlaceholder: m,
-      editorValid: Ee,
-      editorDisabled: h,
+      editorValid: Fe,
+      editorDisabled: u,
       editorId: n,
       style: { width: d ? d.width : void 0 },
-      children: de,
-      dir: ve
+      children: pe,
+      dir: X
     }
-  ) : de;
-}), Fi = {
+  ) : pe;
+}), Oi = {
   opened: l.bool,
   disabled: l.bool,
   dir: l.string,
@@ -4324,101 +4339,101 @@ const Si = "Please select a value from the list!", { sizeMap: us, roundedMap: wi
   adaptiveTitle: l.string,
   adaptive: l.bool
 };
-ss.displayName = "KendoReactMultiSelectTree";
-ss.defaultProps = _e;
-ss.propTypes = Fi;
-const et = (i, t) => {
+ns.displayName = "KendoReactMultiSelectTree";
+ns.defaultProps = _e;
+ns.propTypes = Oi;
+const st = (i, t) => {
   const e = {};
   return i && i.length && i.forEach((s) => {
     e[t(s)] = !0;
   }), e;
-}, Hi = (i, t) => {
+}, qi = (i, t) => {
   const {
     items: e,
     dataItemKey: s,
     value: n,
     subItemsField: a = "items",
     operation: p
-  } = t, c = It(s), d = et(n, c);
+  } = t, c = Ct(s), d = st(n, c);
   if (p === "clear")
     return [];
   if (p === "delete") {
-    const O = et(e, c);
-    return n.filter((_) => !O[c(_)]);
+    const N = st(e, c);
+    return n.filter((_) => !N[c(_)]);
   }
-  const r = e[0], h = c(r), u = It(a), g = [...i], m = [];
+  const r = e[0], u = c(r), h = Ct(a), f = [...i], m = [];
   let v = [], b;
-  for (; g.length; ) {
-    const O = g.pop();
-    if (h === c(O)) {
-      v = m.map((_) => _.item), b = O;
+  for (; f.length; ) {
+    const N = f.pop();
+    if (u === c(N)) {
+      v = m.map((_) => _.item), b = N;
       break;
     } else {
-      m && m.length && m[m.length - 1].parentPosition === g.length && m.pop();
-      const _ = u(O);
-      _ && _.length && (m.push({ item: O, parentPosition: g.length }), g.push(..._));
+      m && m.length && m[m.length - 1].parentPosition === f.length && m.pop();
+      const _ = h(N);
+      _ && _.length && (m.push({ item: N, parentPosition: f.length }), f.push(..._));
     }
   }
-  const w = [...u(b) || []];
-  let S = [];
+  const w = [...h(b) || []];
+  let k = [];
   for (; w.length; ) {
-    const O = w.pop();
-    S.push(O);
-    const _ = u(O);
+    const N = w.pop();
+    k.push(N);
+    const _ = h(N);
     _ && _.length && w.push(..._);
   }
-  const D = !d[h], N = [];
-  if (D) {
-    N.push(...n), N.push(b), N.push(...S.filter((C) => !d[c(C)]));
-    const O = v.filter((C) => !d[c(C)]), _ = et(N, c);
-    for (let C = O.length - 1; C > -1; C--) {
-      const F = O[C], x = u(F);
-      if (x.filter((M) => _[c(M)]).length < x.length)
+  const F = !d[u], O = [];
+  if (F) {
+    O.push(...n), O.push(b), O.push(...k.filter((S) => !d[c(S)]));
+    const N = v.filter((S) => !d[c(S)]), _ = st(O, c);
+    for (let S = N.length - 1; S > -1; S--) {
+      const T = N[S], C = h(T);
+      if (C.filter((M) => _[c(M)]).length < C.length)
         break;
-      N.push(F), _[c(F)] = !0;
+      O.push(T), _[c(T)] = !0;
     }
   } else {
-    const O = c(b), _ = et(S, c), C = et(v, c);
-    N.push(
-      ...n.filter((F) => {
-        const x = c(F);
-        return !_[x] && O !== x && !C[x];
+    const N = c(b), _ = st(k, c), S = st(v, c);
+    O.push(
+      ...n.filter((T) => {
+        const C = c(T);
+        return !_[C] && N !== C && !S[C];
       })
     );
   }
-  return N;
+  return O;
 };
 export {
-  ai as AutoComplete,
-  oi as AutoCompletePropsContext,
-  Tt as AutoCompleteWithoutContext,
-  ys as ComboBox,
-  si as ComboBoxPropsContext,
-  rt as ComboBoxWithoutContext,
-  Zs as DropDownList,
-  Dt as DropDownListClassComponent,
-  Xs as DropDownListPropsContext,
-  Dt as DropDownListWithoutContext,
-  xs as DropDownTree,
-  Ci as DropDownTreePropsContext,
-  Ge as List,
-  Et as ListContainer,
+  di as AutoComplete,
+  ri as AutoCompletePropsContext,
+  Mt as AutoCompleteWithoutContext,
+  xs as ComboBox,
+  oi as ComboBoxPropsContext,
+  ct as ComboBoxWithoutContext,
+  ti as DropDownList,
+  Tt as DropDownListClassComponent,
+  ei as DropDownListPropsContext,
+  Tt as DropDownListWithoutContext,
+  ws as DropDownTree,
+  wi as DropDownTreePropsContext,
+  je as List,
+  Dt as ListContainer,
   Re as ListFilter,
-  $s as ListItem,
-  ts as MultiColumnComboBox,
-  fi as MultiColumnComboBoxPropsContext,
-  hi as MultiSelect,
-  pi as MultiSelectPropsContext,
-  ss as MultiSelectTree,
-  Ti as MultiSelectTreePropsContext,
-  Ft as MultiSelectWithoutContext,
-  Zt as SearchBar,
-  Is as TagList,
-  le as dropdownsMessages,
-  zi as findByFieldValue,
+  Us as ListItem,
+  is as MultiColumnComboBox,
+  bi as MultiColumnComboBoxPropsContext,
+  gi as MultiSelect,
+  fi as MultiSelectPropsContext,
+  ns as MultiSelectTree,
+  Ni as MultiSelectTreePropsContext,
+  Nt as MultiSelectWithoutContext,
+  ts as SearchBar,
+  Cs as TagList,
+  ce as dropdownsMessages,
+  Wi as findByFieldValue,
   V as getItemValue,
-  Hi as getMultiSelectTreeValue,
-  et as getValueMap,
-  fe as nodata,
-  Ls as scrollToItem
+  qi as getMultiSelectTreeValue,
+  st as getValueMap,
+  ve as nodata,
+  Hs as scrollToItem
 };