@progress/kendo-react-buttons 7.1.1-develop.4 → 7.1.1-develop.5

package/index.mjs

@@ -3,27 +3,27 @@
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------*/
 "use client";
-import * as n from "react";
+import * as o from "react";
 import Ie from "react";
 import s from "prop-types";
-import { svgIconPropType as M, validatePackage as R, classNames as f, kendoThemeMaps as P, IconWrap as A, Keys as r, dispatchEvent as I, getActiveElement as se, useDir as xe, useMouse as $e, getTabIndex as me, toIconName as ve, getter as Me, useZIndexContext as rt, useId as Re, ZIndexContext as ct, withIdHOC as Ae } from "@progress/kendo-react-common";
+import { svgIconPropType as M, validatePackage as R, classNames as f, kendoThemeMaps as P, IconWrap as $, Keys as r, dispatchEvent as I, getActiveElement as se, useDir as xe, useMouse as Ae, getTabIndex as me, toIconName as ve, getter as Me, useZIndexContext as rt, useId as Re, ZIndexContext as ct, withIdHOC as $e } from "@progress/kendo-react-common";
 import { Popup as De } from "@progress/kendo-react-popup";
 import { caretAltDownIcon as dt, xCircleIcon as ut } from "@progress/kendo-svg-icons";
 const O = {
   name: "@progress/kendo-react-buttons",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1707215749,
+  publishDate: 1707401033,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
-function ht({ imageUrl: e, name: o, iconClass: t, svgIcon: i, imageAlt: a }) {
-  return e ? /* @__PURE__ */ n.createElement("img", { role: "presentation", className: "k-button-icon", alt: a, src: e }) : o || i ? /* @__PURE__ */ n.createElement(A, { className: "k-button-icon", name: o, icon: i }) : t ? /* @__PURE__ */ n.createElement("span", { role: "presentation", className: f("k-button-icon", t) }) : null;
+function ht({ imageUrl: e, name: n, iconClass: t, svgIcon: i, imageAlt: a }) {
+  return e ? /* @__PURE__ */ o.createElement("img", { role: "presentation", className: "k-button-icon", alt: a, src: e }) : n || i ? /* @__PURE__ */ o.createElement($, { className: "k-button-icon", name: n, icon: i }) : t ? /* @__PURE__ */ o.createElement("span", { role: "presentation", className: f("k-button-icon", t) }) : null;
 }
-const ee = class extends n.Component {
+const ee = class extends o.Component {
   constructor(e) {
-    super(e), this._element = null, this.handleClick = (o) => {
-      this.toggleIfApplicable(), this.props.onClick && this.props.onClick.call(void 0, o);
+    super(e), this._element = null, this.handleClick = (n) => {
+      this.toggleIfApplicable(), this.props.onClick && this.props.onClick.call(void 0, n);
     }, R(O), this.state = { selected: this.props.togglable === !0 && this.props.selected === !0 };
   }
   /**
@@ -42,8 +42,8 @@ const ee = class extends n.Component {
   /**
    * @hidden
    */
-  static getDerivedStateFromProps(e, o) {
-    return e.togglable && e.selected !== void 0 && e.selected !== o.selected ? { selected: e.selected } : null;
+  static getDerivedStateFromProps(e, n) {
+    return e.togglable && e.selected !== void 0 && e.selected !== n.selected ? { selected: e.selected } : null;
   }
   /**
    * @hidden
@@ -51,7 +51,7 @@ const ee = class extends n.Component {
   render() {
     const {
       children: e,
-      togglable: o,
+      togglable: n,
       icon: t,
       iconClass: i,
       svgIcon: a,
@@ -71,11 +71,11 @@ const ee = class extends n.Component {
       imageUrl: l,
       imageAlt: u
     });
-    return /* @__PURE__ */ n.createElement(
+    return /* @__PURE__ */ o.createElement(
       "button",
       {
         ref: (E) => this._element = E,
-        "aria-pressed": o ? this.state.selected : void 0,
+        "aria-pressed": n ? this.state.selected : void 0,
         ...w,
         onClick: this.handleClick,
         className: f(
@@ -94,7 +94,7 @@ const ee = class extends n.Component {
         )
       },
       x,
-      e && /* @__PURE__ */ n.createElement("span", { className: "k-button-text" }, e)
+      e && /* @__PURE__ */ o.createElement("span", { className: "k-button-text" }, e)
     );
   }
   toggleIfApplicable() {
@@ -151,15 +151,15 @@ const pt = {
 ], ft = {
   styles: pt
 }, ue = ft.styles;
-class bt extends n.Component {
-  constructor(o) {
-    super(o), this._element = null, R(O);
+class bt extends o.Component {
+  constructor(n) {
+    super(n), this._element = null, R(O);
   }
   /**
    * @hidden
    */
   render() {
-    const o = this.mapButtons(this.props.children), t = f(
+    const n = this.mapButtons(this.props.children), t = f(
       [ue["button-group"]],
       {
         ["k-disabled"]: this.props.disabled,
@@ -174,7 +174,7 @@ class bt extends n.Component {
       role: "group",
       "aria-disabled": this.props.disabled
     };
-    return /* @__PURE__ */ n.createElement(
+    return /* @__PURE__ */ o.createElement(
       "div",
       {
         ref: (a) => {
@@ -183,24 +183,24 @@ class bt extends n.Component {
         ...i,
         className: t
       },
-      o
+      n
     );
   }
-  mapButtons(o) {
-    const t = n.Children.count(o), i = this.props.dir !== void 0 ? this.props.dir === "rtl" : this._element && getComputedStyle(this._element).direction === "rtl" || !1;
-    return n.Children.map(o, (a, l) => n.isValidElement(a) ? this.renderButton(a, l, l === t - 1, i) : a);
+  mapButtons(n) {
+    const t = o.Children.count(n), i = this.props.dir !== void 0 ? this.props.dir === "rtl" : this._element && getComputedStyle(this._element).direction === "rtl" || !1;
+    return o.Children.map(n, (a, l) => o.isValidElement(a) ? this.renderButton(a, l, l === t - 1, i) : a);
   }
-  renderButton(o, t, i, a) {
-    const l = f(o.props.className, {
+  renderButton(n, t, i, a) {
+    const l = f(n.props.className, {
       [ue["group-start"]]: a ? i : t === 0,
       [ue["group-end"]]: a ? t === 0 : i
-    }), u = { ...this.props.width ? { width: this.props.width } : {}, ...o.props.style || {} }, c = this.props.disabled || o.props.disabled, g = {
-      ...o.props,
+    }), u = { ...this.props.width ? { width: this.props.width } : {}, ...n.props.style || {} }, c = this.props.disabled || n.props.disabled, g = {
+      ...n.props,
       ...l ? { className: l } : {},
       ...Object.keys(u).length ? { style: u } : {},
       ...c !== void 0 ? { disabled: c } : {}
     };
-    return n.Children.count(o.props.children) > 0 ? n.cloneElement(o, g, o.props.children) : n.cloneElement(o, g);
+    return o.Children.count(n.props.children) > 0 ? o.cloneElement(n, g, n.props.children) : o.cloneElement(n, g);
   }
 }
 bt.propTypes = {
@@ -211,12 +211,12 @@ bt.propTypes = {
   dir: s.string
 };
 const we = (e) => {
-  const o = n.useCallback(
+  const n = o.useCallback(
     (l) => {
       e.onClick(l, e.index);
     },
     [e]
-  ), t = e.dataItem.render || e.item || (e.item === void 0 ? e.render : null), i = e.dataItem.text !== void 0 ? e.dataItem.text : e.textField ? e.dataItem[e.textField] : e.dataItem, a = /* @__PURE__ */ n.createElement(
+  ), t = e.dataItem.render || e.item || (e.item === void 0 ? e.render : null), i = e.dataItem.text !== void 0 ? e.dataItem.text : e.textField ? e.dataItem[e.textField] : e.dataItem, a = /* @__PURE__ */ o.createElement(
     "li",
     {
       id: e.id,
@@ -226,13 +226,13 @@ const we = (e) => {
         { "k-focus": e.focused }
       ),
       tabIndex: -1,
-      onClick: o,
+      onClick: n,
       onMouseDown: e.onDown,
       onPointerDown: e.onDown,
       role: "menuitem",
       "aria-disabled": e.dataItem.disabled || void 0
     },
-    /* @__PURE__ */ n.createElement(
+    /* @__PURE__ */ o.createElement(
       "span",
       {
         tabIndex: -1,
@@ -245,7 +245,7 @@ const we = (e) => {
         ),
         key: "icon"
       },
-      t ? /* @__PURE__ */ n.createElement(t, { item: e.dataItem, itemIndex: e.index }) : /* @__PURE__ */ n.createElement(n.Fragment, null, (e.dataItem.icon || e.dataItem.iconClass || e.dataItem.svgIcon) && /* @__PURE__ */ n.createElement(A, { className: e.dataItem.iconClass, name: e.dataItem.icon, icon: e.dataItem.svgIcon }), e.dataItem.imageUrl && /* @__PURE__ */ n.createElement(
+      t ? /* @__PURE__ */ o.createElement(t, { item: e.dataItem, itemIndex: e.index }) : /* @__PURE__ */ o.createElement(o.Fragment, null, (e.dataItem.icon || e.dataItem.iconClass || e.dataItem.svgIcon) && /* @__PURE__ */ o.createElement($, { className: e.dataItem.iconClass, name: e.dataItem.icon, icon: e.dataItem.svgIcon }), e.dataItem.imageUrl && /* @__PURE__ */ o.createElement(
         "img",
         {
           role: "presentation",
@@ -253,14 +253,14 @@ const we = (e) => {
           src: e.dataItem.imageUrl,
           className: "k-icon"
         }
-      ), i && /* @__PURE__ */ n.createElement("span", { className: "k-menu-link-text" }, i))
+      ), i && /* @__PURE__ */ o.createElement("span", { className: "k-menu-link-text" }, i))
     )
   );
   return e.item !== void 0 && /* to be removed in 5.0.0 */
   e.render !== void 0 ? e.render.call(void 0, a, e) : a;
 };
 we.displayName = "KendoReactButtonItem";
-class Te extends n.Component {
+class Te extends o.Component {
   /**
    * @hidden
    */
@@ -276,11 +276,11 @@ Te.propTypes = {
   disabled: s.bool,
   render: s.any
 };
-const Le = (e, o, t, i) => {
+const Le = (e, n, t, i) => {
   if (t)
     return e;
   const a = Math.min(i - 1, Math.max(0, e));
-  switch (o) {
+  switch (n) {
     case r.enter:
     case r.space:
     case r.esc:
@@ -300,16 +300,16 @@ const Le = (e, o, t, i) => {
   }
 };
 function _e(e) {
-  let o = { horizontal: "left", vertical: "bottom" };
-  return e && (o.horizontal = "right"), o;
+  let n = { horizontal: "left", vertical: "bottom" };
+  return e && (n.horizontal = "right"), n;
 }
 function He(e) {
-  let o = { horizontal: "left", vertical: "top" };
-  return e && (o.horizontal = "right"), o;
+  let n = { horizontal: "left", vertical: "top" };
+  return e && (n.horizontal = "right"), n;
 }
-let Ee = class extends n.Component {
-  constructor(o) {
-    super(o), this.state = {
+let Ee = class extends o.Component {
+  constructor(n) {
+    super(n), this.state = {
       focused: !1,
       focusedIndex: -1,
       opened: !1
@@ -393,9 +393,9 @@ let Ee = class extends n.Component {
    * @hidden
    */
   render() {
-    this.buttonsData = this.props.items || n.Children.toArray(this.props.children).filter((c) => c && c.type === Te).map((c) => c.props);
-    const o = this.isRtl(), t = o ? "rtl" : void 0, { id: i, style: a, tabIndex: l, disabled: u } = this.props;
-    return /* @__PURE__ */ n.createElement(
+    this.buttonsData = this.props.items || o.Children.toArray(this.props.children).filter((c) => c && c.type === Te).map((c) => c.props);
+    const n = this.isRtl(), t = n ? "rtl" : void 0, { id: i, style: a, tabIndex: l, disabled: u } = this.props;
+    return /* @__PURE__ */ o.createElement(
       "div",
       {
         id: i,
@@ -415,7 +415,7 @@ let Ee = class extends n.Component {
         dir: t,
         ref: (c) => this.wrapper = c
       },
-      /* @__PURE__ */ n.createElement(
+      /* @__PURE__ */ o.createElement(
         ne,
         {
           ref: (c) => this.mainButton = c && c.element,
@@ -444,7 +444,7 @@ let Ee = class extends n.Component {
         },
         this.props.text
       ),
-      /* @__PURE__ */ n.createElement(
+      /* @__PURE__ */ o.createElement(
         ne,
         {
           type: "button",
@@ -464,7 +464,7 @@ let Ee = class extends n.Component {
           "aria-label": "menu toggling button"
         }
       ),
-      this.renderPopup(o)
+      this.renderPopup(n)
     );
   }
   /**
@@ -479,10 +479,10 @@ let Ee = class extends n.Component {
   get element() {
     return this.mainButton;
   }
-  dispatchClickEvent(o, t) {
-    this.isItemDisabled(t) || (t === -1 ? I(this.props.onButtonClick, o, this, void 0) : I(
+  dispatchClickEvent(n, t) {
+    this.isItemDisabled(t) || (t === -1 ? I(this.props.onButtonClick, n, this, void 0) : I(
       this.props.onItemClick,
-      o,
+      n,
       this,
       {
         item: this.buttonsData[t],
@@ -490,21 +490,21 @@ let Ee = class extends n.Component {
       }
     ));
   }
-  renderPopup(o) {
+  renderPopup(n) {
     const { popupSettings: t = {} } = this.props, { focusedIndex: i } = this.state;
-    return /* @__PURE__ */ n.createElement(
+    return /* @__PURE__ */ o.createElement(
       De,
       {
         anchor: this.wrapper,
         show: this.opened,
         animate: t.animate,
         popupClass: f("k-menu-popup", t.popupClass),
-        anchorAlign: t.anchorAlign || _e(o),
-        popupAlign: t.popupAlign || He(o),
-        style: o ? { direction: "rtl" } : void 0,
+        anchorAlign: t.anchorAlign || _e(n),
+        popupAlign: t.popupAlign || He(n),
+        style: n ? { direction: "rtl" } : void 0,
         onClose: this.onPopupClose
       },
-      /* @__PURE__ */ n.createElement(
+      /* @__PURE__ */ o.createElement(
         "ul",
         {
           role: "menu",
@@ -522,8 +522,8 @@ let Ee = class extends n.Component {
     );
   }
   renderChildItems() {
-    const { item: o, itemRender: t, textField: i } = this.props;
-    return this.buttonsData.length > 0 ? this.buttonsData.map((a, l) => /* @__PURE__ */ n.createElement(
+    const { item: n, itemRender: t, textField: i } = this.props;
+    return this.buttonsData.length > 0 ? this.buttonsData.map((a, l) => /* @__PURE__ */ o.createElement(
       we,
       {
         className: "k-menu-item",
@@ -533,15 +533,15 @@ let Ee = class extends n.Component {
         onClick: this.onItemClick,
         onDown: this.onItemDown,
         render: t,
-        item: o,
+        item: n,
         key: l,
         index: l,
         id: `${this.guid}-${l}`
       }
     )) : null;
   }
-  isItemDisabled(o) {
-    return this.buttonsData[o] ? this.buttonsData[o].disabled : this.props.disabled;
+  isItemDisabled(n) {
+    return this.buttonsData[n] ? this.buttonsData[n].disabled : this.props.disabled;
   }
   isRtl() {
     return this.props.dir !== void 0 ? this.props.dir === "rtl" : !!this.wrapper && getComputedStyle(this.wrapper).direction === "rtl";
@@ -579,7 +579,7 @@ Ee.defaultProps = {
   fillMode: "solid",
   themeColor: "base"
 };
-class Ue extends n.Component {
+class Ue extends o.Component {
   /**
    * @hidden
    */
@@ -596,9 +596,9 @@ Ue.propTypes = {
   disabled: s.bool,
   render: s.any
 };
-let Ne = class extends n.Component {
-  constructor(o) {
-    super(o), this.state = {
+let Ne = class extends o.Component {
+  constructor(n) {
+    super(n), this.state = {
       opened: !1,
       focused: !1,
       focusedIndex: -1
@@ -682,8 +682,8 @@ let Ne = class extends n.Component {
    * @hidden
    */
   render() {
-    const o = this.isRtl(), t = o ? "rtl" : void 0, { id: i, style: a, tabIndex: l, disabled: u } = this.props;
-    return this.buttonsData = this.props.items || n.Children.toArray(this.props.children).filter((c) => c && c.type === Ue).map((c) => c.props), /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+    const n = this.isRtl(), t = n ? "rtl" : void 0, { id: i, style: a, tabIndex: l, disabled: u } = this.props;
+    return this.buttonsData = this.props.items || o.Children.toArray(this.props.children).filter((c) => c && c.type === Ue).map((c) => c.props), /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
       ne,
       {
         id: i,
@@ -724,7 +724,7 @@ let Ne = class extends n.Component {
         title: this.props.title
       },
       this.props.text
-    ), this.renderPopup(o));
+    ), this.renderPopup(n));
   }
   /**
    * @hidden
@@ -738,10 +738,10 @@ let Ne = class extends n.Component {
   get element() {
     return this.mainButton;
   }
-  dispatchClickEvent(o, t) {
+  dispatchClickEvent(n, t) {
     this.isItemDisabled(t) || I(
       this.props.onItemClick,
-      o,
+      n,
       this,
       {
         item: this.buttonsData[t],
@@ -749,21 +749,21 @@ let Ne = class extends n.Component {
       }
     );
   }
-  renderPopup(o) {
+  renderPopup(n) {
     const { popupSettings: t = {}, id: i } = this.props, { focusedIndex: a } = this.state;
-    return /* @__PURE__ */ n.createElement(
+    return /* @__PURE__ */ o.createElement(
       De,
       {
         anchor: this.mainButton,
         show: this.opened,
         animate: t.animate,
         popupClass: f("k-menu-popup", t.popupClass),
-        anchorAlign: t.anchorAlign || _e(o),
-        popupAlign: t.popupAlign || He(o),
-        style: o ? { direction: "rtl" } : void 0,
+        anchorAlign: t.anchorAlign || _e(n),
+        popupAlign: t.popupAlign || He(n),
+        style: n ? { direction: "rtl" } : void 0,
         onClose: this.onPopupClose
       },
-      /* @__PURE__ */ n.createElement(
+      /* @__PURE__ */ o.createElement(
         "ul",
         {
           role: "menu",
@@ -783,8 +783,8 @@ let Ne = class extends n.Component {
     );
   }
   renderChildItems() {
-    const { item: o, itemRender: t, textField: i } = this.props;
-    return this.buttonsData.length > 0 ? this.buttonsData.map((a, l) => /* @__PURE__ */ n.createElement(
+    const { item: n, itemRender: t, textField: i } = this.props;
+    return this.buttonsData.length > 0 ? this.buttonsData.map((a, l) => /* @__PURE__ */ o.createElement(
       we,
       {
         className: "k-menu-item",
@@ -794,15 +794,15 @@ let Ne = class extends n.Component {
         onClick: this.onItemClick,
         onDown: this.onItemDown,
         render: t,
-        item: o,
+        item: n,
         index: l,
         key: l,
         id: `${this.guid}-${l}`
       }
     )) : null;
   }
-  isItemDisabled(o) {
-    return this.buttonsData[o] ? this.buttonsData[o].disabled : this.props.disabled;
+  isItemDisabled(n) {
+    return this.buttonsData[n] ? this.buttonsData[n].disabled : this.props.disabled;
   }
   isRtl() {
     return this.props.dir !== void 0 ? this.props.dir === "rtl" : !!this.mainButton && getComputedStyle(this.mainButton).direction === "rtl";
@@ -838,20 +838,20 @@ Ne.defaultProps = {
   fillMode: "solid",
   themeColor: "base"
 };
-const Ce = class extends n.Component {
+const Ce = class extends o.Component {
   constructor(e) {
-    super(e), this._element = null, this.offsetHeight = 0, this.offsetWidth = 0, this.buttons = [], this.focusedSelector = this.selectors.map((o) => o + ":focus").join(","), this.setTabIndex = (o) => {
+    super(e), this._element = null, this.offsetHeight = 0, this.offsetWidth = 0, this.buttons = [], this.focusedSelector = this.selectors.map((n) => n + ":focus").join(","), this.setTabIndex = (n) => {
       const { tabIndex: t = Ce.defaultProps.tabIndex } = this.props;
       this.buttons.forEach((i, a) => {
-        i.tabIndex = a === o ? t : -1;
+        i.tabIndex = a === n ? t : -1;
       });
-    }, this.onKeyDown = (o) => {
-      const t = o.target;
-      if (!(o.keyCode === r.left || o.keyCode === r.right || o.keyCode === r.home || o.keyCode === r.end) || o.defaultPrevented || this.buttons.findIndex((l) => l === t) === -1)
+    }, this.onKeyDown = (n) => {
+      const t = n.target;
+      if (!(n.keyCode === r.left || n.keyCode === r.right || n.keyCode === r.home || n.keyCode === r.end) || n.defaultPrevented || this.buttons.findIndex((l) => l === t) === -1)
         return;
       const a = this.focusedIndex;
-      o.keyCode === r.left ? this.focusButton(a, a === 0 ? this.buttons.length - 1 : a - 1) : this.focusButton(a, a === this.buttons.length - 1 ? 0 : a + 1), o.keyCode === r.home && this.focusButton(a, 0), o.keyCode === r.end && this.focusButton(a, this.buttons.length - 1);
-    }, this.onWindowResize = (o) => {
+      n.keyCode === r.left ? this.focusButton(a, a === 0 ? this.buttons.length - 1 : a - 1) : this.focusButton(a, a === this.buttons.length - 1 ? 0 : a + 1), n.keyCode === r.home && this.focusButton(a, 0), n.keyCode === r.end && this.focusButton(a, this.buttons.length - 1);
+    }, this.onWindowResize = (n) => {
       const t = this.element;
       if (!t)
         return;
@@ -859,7 +859,7 @@ const Ce = class extends n.Component {
       if (this.offsetWidth !== i || this.offsetHeight !== a) {
         this.offsetWidth = i, this.offsetHeight = a;
         const l = { offsetWidth: this.offsetWidth, offsetHeight: this.offsetHeight };
-        this.props.onResize && this.props.onResize.call(void 0, { target: this, ...l, nativeEvent: o });
+        this.props.onResize && this.props.onResize.call(void 0, { target: this, ...l, nativeEvent: n });
       }
     }, R(O);
   }
@@ -868,7 +868,7 @@ const Ce = class extends n.Component {
   }
   get focusedIndex() {
     const e = this.element && this.element.querySelector(this.focusedSelector);
-    return Math.max(0, this.buttons.findIndex((o) => o === e));
+    return Math.max(0, this.buttons.findIndex((n) => n === e));
   }
   /**
    * Returns the HTML element of the Toolbar component.
@@ -901,7 +901,7 @@ const Ce = class extends n.Component {
    * @hidden
    */
   render() {
-    return /* @__PURE__ */ n.createElement(
+    return /* @__PURE__ */ o.createElement(
       "div",
       {
         id: this.props.id,
@@ -922,8 +922,8 @@ const Ce = class extends n.Component {
       this.props.children
     );
   }
-  focusButton(e, o) {
-    const { tabIndex: t = Ce.defaultProps.tabIndex } = this.props, i = this.buttons[o];
+  focusButton(e, n) {
+    const { tabIndex: t = Ce.defaultProps.tabIndex } = this.props, i = this.buttons[n];
     if (i) {
       i.tabIndex = t, i.focus();
       const a = this.buttons[e];
@@ -947,7 +947,7 @@ We.defaultProps = {
   tabIndex: 0,
   size: "medium"
 };
-class gt extends n.PureComponent {
+class gt extends o.PureComponent {
   constructor() {
     super(...arguments), this._element = null;
   }
@@ -961,13 +961,13 @@ class gt extends n.PureComponent {
    * @hidden
    */
   render() {
-    return /* @__PURE__ */ n.createElement(
+    return /* @__PURE__ */ o.createElement(
       "div",
       {
         id: this.props.id,
         className: f("k-toolbar-item", this.props.className),
         style: this.props.style,
-        ref: (o) => this._element = o
+        ref: (n) => this._element = n
       },
       this.props.children
     );
@@ -976,25 +976,25 @@ class gt extends n.PureComponent {
 gt.propTypes = {
   className: s.string
 };
-class Wt extends n.PureComponent {
+class Wt extends o.PureComponent {
   /**
    * @hidden
    */
   render() {
-    return /* @__PURE__ */ n.createElement("div", { className: f("k-separator", this.props.className) });
+    return /* @__PURE__ */ o.createElement("div", { className: f("k-separator", this.props.className) });
   }
 }
-const je = n.forwardRef((e, o) => {
-  const t = n.useRef(null), i = n.useRef(null);
-  n.useImperativeHandle(i, () => ({ element: t.current })), n.useImperativeHandle(o, () => ({ element: t.current }));
-  const a = n.useMemo(
+const je = o.forwardRef((e, n) => {
+  const t = o.useRef(null), i = o.useRef(null);
+  o.useImperativeHandle(i, () => ({ element: t.current })), o.useImperativeHandle(n, () => ({ element: t.current }));
+  const a = o.useMemo(
     () => f(
       "k-spacer",
       e.className
     ),
     [e.className]
   );
-  return /* @__PURE__ */ n.createElement(
+  return /* @__PURE__ */ o.createElement(
     "span",
     {
       ref: t,
@@ -1006,33 +1006,33 @@ je.displayName = "KendoReactToolbarSpacer";
 je.propTypes = {
   className: s.string
 };
-const Ve = Ie.createContext([null, (e) => {
-}]), Ze = Ie.createContext([null, (e) => {
+const Ze = Ie.createContext([null, (e) => {
 }]), qe = Ie.createContext([null, (e) => {
+}]), Ge = Ie.createContext([null, (e) => {
 }]);
 var te = /* @__PURE__ */ ((e) => (e.next = "next", e.prev = "prev", e.current = "current", e.reset = "reset", e))(te || {});
-const yt = (e, o) => {
-  const t = o.items.findIndex((i) => i === e);
-  switch (o.type) {
+const yt = (e, n) => {
+  const t = n.items.findIndex((i) => i === e);
+  switch (n.type) {
     case "next":
-      return t === o.items.length - 1 ? e : o.items[t + 1];
+      return t === n.items.length - 1 ? e : n.items[t + 1];
     case "prev":
-      return t === 0 ? e : o.items[t - 1];
+      return t === 0 ? e : n.items[t - 1];
     case "current":
-      return o.payload;
+      return n.payload;
     case "reset":
       return null;
     default:
       return e;
   }
 };
-var Ge = /* @__PURE__ */ ((e) => (e.remove = "remove", e.add = "add", e.reorder = "reorder", e))(Ge || {});
-const kt = (e, o) => {
-  switch (o.type) {
+var Xe = /* @__PURE__ */ ((e) => (e.remove = "remove", e.add = "add", e.reorder = "reorder", e))(Xe || {});
+const kt = (e, n) => {
+  switch (n.type) {
     case "add":
       break;
     case "remove":
-      return e.filter((t) => t[o.valueField] !== o.payload);
+      return e.filter((t) => t[n.valueField] !== n.payload);
     case "reorder":
       break;
     default:
@@ -1040,31 +1040,31 @@ const kt = (e, o) => {
   }
 };
 var pe = /* @__PURE__ */ ((e) => (e.toggle = "toggle", e.remove = "remove", e))(pe || {});
-const vt = (e, o) => {
-  switch (o.selection) {
+const vt = (e, n) => {
+  switch (n.selection) {
     case "single":
-      switch (o.type) {
+      switch (n.type) {
         case "toggle": {
           if (!Array.isArray(e) || e === null)
-            return o.payload === e ? null : o.payload;
+            return n.payload === e ? null : n.payload;
           throw new Error("State cannot be an array in single selection");
         }
         case "remove":
-          return o.payload === e ? null : e;
+          return n.payload === e ? null : e;
         default:
           return e;
       }
     case "multiple":
-      switch (o.type) {
+      switch (n.type) {
         case "toggle": {
           if (Array.isArray(e))
-            return e.some((t) => t === o.payload) ? e.filter((t) => t !== o.payload) : [...e, o.payload];
+            return e.some((t) => t === n.payload) ? e.filter((t) => t !== n.payload) : [...e, n.payload];
           if (e === null)
-            return [o.payload];
+            return [n.payload];
           throw new Error("State cannot be non-array in multiple selection");
         }
         case "remove":
-          return Array.isArray(e) ? e.some((t) => t === o.payload) ? e.filter((t) => t !== o.payload) : [...e, o.payload] : e;
+          return Array.isArray(e) ? e.some((t) => t === n.payload) ? e.filter((t) => t !== n.payload) : [...e, n.payload] : e;
         default:
           return e;
       }
@@ -1073,34 +1073,34 @@ const vt = (e, o) => {
     default:
       return e;
   }
-}, j = n.forwardRef((e, o) => {
+}, j = o.forwardRef((e, n) => {
   R(O);
-  const t = n.useRef(null), i = n.useRef(null), a = xe(i, e.dir);
-  n.useImperativeHandle(t, () => ({
+  const t = o.useRef(null), i = o.useRef(null), a = xe(i, e.dir);
+  o.useImperativeHandle(t, () => ({
     element: i.current,
     props: e
-  })), n.useImperativeHandle(o, () => t.current);
-  const [l, u] = n.useContext(Ve), [c, g] = n.useContext(Ze), [, v] = n.useContext(qe), h = n.useMemo(
+  })), o.useImperativeHandle(n, () => t.current);
+  const [l, u] = o.useContext(Ze), [c, g] = o.useContext(qe), [, v] = o.useContext(Ge), h = o.useMemo(
     () => e.selected || (Array.isArray(l) ? l.some((p) => p === e.value) : l === e.value),
     [e.selected, e.value, l]
-  ), D = n.useMemo(
+  ), D = o.useMemo(
     () => c === e.value,
     [e.value, c]
   );
-  n.useEffect(
+  o.useEffect(
     () => {
       D && i.current && i.current.focus();
     },
     [D]
   );
-  const N = n.useCallback(
+  const N = o.useCallback(
     (p) => {
       u({ type: pe.toggle, payload: e.value, event: p });
     },
     [u, e.value]
-  ), w = n.useCallback(
+  ), w = o.useCallback(
     (p) => {
-      e.removable && (v({ type: Ge.remove, payload: e.value, event: p }), g({ type: te.reset, payload: e.value, event: p }), u({ type: pe.remove, payload: e.value, event: p }), e.onRemove && e.onRemove.call(
+      e.removable && (v({ type: Xe.remove, payload: e.value, event: p }), g({ type: te.reset, payload: e.value, event: p }), u({ type: pe.remove, payload: e.value, event: p }), e.onRemove && e.onRemove.call(
         void 0,
         {
           target: t.current,
@@ -1109,7 +1109,7 @@ const vt = (e, o) => {
       ));
     },
     [e.onRemove, e.value, e.removable, v, g, u]
-  ), S = n.useCallback(
+  ), S = o.useCallback(
     (p) => {
       switch (p.keyCode) {
         case r.left:
@@ -1134,7 +1134,7 @@ const vt = (e, o) => {
       );
     },
     [e.onKeyDown, e.value, g, u, w]
-  ), B = n.useCallback(
+  ), B = o.useCallback(
     (p) => {
       g({ payload: e.value, type: te.current, event: p }), e.onFocus && e.onFocus.call(
         void 0,
@@ -1145,7 +1145,7 @@ const vt = (e, o) => {
       );
     },
     [e.onFocus, e.value, g]
-  ), x = n.useCallback(
+  ), x = o.useCallback(
     (p) => {
       e.onBlur && e.onBlur.call(
         void 0,
@@ -1156,8 +1156,8 @@ const vt = (e, o) => {
       );
     },
     [e.onBlur]
-  ), E = $e(e, t, { onClick: N });
-  return /* @__PURE__ */ n.createElement(
+  ), E = Ae(e, t, { onClick: N });
+  return /* @__PURE__ */ o.createElement(
     "div",
     {
       ...E,
@@ -1189,8 +1189,8 @@ const vt = (e, o) => {
       onBlur: x,
       onKeyDown: S
     },
-    h && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ n.createElement(
-      A,
+    h && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ o.createElement(
+      $,
       {
         className: "k-chip-icon",
         name: e.selectedIcon ? ve(e.selectedIcon) : void 0,
@@ -1198,8 +1198,8 @@ const vt = (e, o) => {
         size: "small"
       }
     ),
-    (e.icon || e.svgIcon) && /* @__PURE__ */ n.createElement(
-      A,
+    (e.icon || e.svgIcon) && /* @__PURE__ */ o.createElement(
+      $,
       {
         className: "k-chip-icon",
         name: e.icon ? ve(e.icon) : void 0,
@@ -1207,13 +1207,13 @@ const vt = (e, o) => {
         size: "small"
       }
     ),
-    e.avatar && /* @__PURE__ */ n.createElement(
+    e.avatar && /* @__PURE__ */ o.createElement(
       "div",
       {
         className: `k-chip-avatar k-avatar k-rounded-${e.avatar.rounded} k-avatar-md k-avatar-solid k-avatar-solid-primary`,
         style: e.avatar.style
       },
-      /* @__PURE__ */ n.createElement("span", { className: "k-avatar-image" }, /* @__PURE__ */ n.createElement(
+      /* @__PURE__ */ o.createElement("span", { className: "k-avatar-image" }, /* @__PURE__ */ o.createElement(
         "img",
         {
           src: e.avatar.image,
@@ -1221,7 +1221,7 @@ const vt = (e, o) => {
         }
       ))
     ),
-    /* @__PURE__ */ n.createElement("span", { className: "k-chip-content" }, e.children !== void 0 ? e.children : e.text && /* @__PURE__ */ n.createElement(
+    /* @__PURE__ */ o.createElement("span", { className: "k-chip-content" }, e.children !== void 0 ? e.children : e.text && /* @__PURE__ */ o.createElement(
       "span",
       {
         "aria-label": e.ariaLabel || e.text,
@@ -1229,8 +1229,8 @@ const vt = (e, o) => {
       },
       e.text
     )),
-    e.removable && /* @__PURE__ */ n.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ n.createElement("span", { className: f("k-chip-action", "k-chip-remove-action"), onClick: w }, /* @__PURE__ */ n.createElement(
-      A,
+    e.removable && /* @__PURE__ */ o.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ o.createElement("span", { className: f("k-chip-action", "k-chip-remove-action"), onClick: w }, /* @__PURE__ */ o.createElement(
+      $,
       {
         name: e.removeIcon ? ve(e.removeIcon) : void 0,
         icon: e.removeSvgIcon || ut,
@@ -1273,27 +1273,28 @@ const vt = (e, o) => {
 j.displayName = "KendoReactChip";
 j.propTypes = Ct;
 j.defaultProps = It;
-const xt = (e, o, t) => {
-  const [i, a] = n.useState(e);
+const xt = (e, n, t) => {
+  n.selection === "multiple" ? Array.isArray(e) || (e = e ? [e] : null) : n.selection === "single" && Array.isArray(e) && (e = e ? e.join("") : null);
+  const [i, a] = o.useState(e);
   return [i, (u) => {
-    const c = vt(o.state || i, { ...u, ...o });
-    t && t(c, u.event), a(c);
+    const c = vt(n.state || i, { ...u, ...n });
+    t && t(c, u.event), n.selection !== "none" && a(c);
   }];
 }, Dt = (e) => {
-  const [o, t] = n.useState(null);
-  return [o, (a) => {
+  const [n, t] = o.useState(null);
+  return [n, (a) => {
     const l = yt(a.payload, { ...a, ...e });
     t(l);
   }];
-}, wt = (e, o, t) => {
-  const [i, a] = n.useState(e);
+}, wt = (e, n, t) => {
+  const [i, a] = o.useState(e);
   return [i, (u) => {
-    const c = kt(o.state || i, { ...u, ...o });
+    const c = kt(n.state || i, { ...u, ...n });
     t && t(c, u.event), a(c);
   }];
-}, Se = n.forwardRef((e, o) => {
+}, Se = o.forwardRef((e, n) => {
   R(O);
-  const t = n.useRef(null), i = n.useRef(null), a = xe(i, e.dir), {
+  const t = o.useRef(null), i = o.useRef(null), a = xe(i, e.dir), {
     chip: l,
     id: u,
     style: c,
@@ -1311,15 +1312,15 @@ const xt = (e, o, t) => {
     textField: T = W.textField,
     onChange: K,
     onDataChange: z
-  } = e, L = n.useMemo(
+  } = e, L = o.useMemo(
     () => l || j,
     [l, j]
   );
-  n.useImperativeHandle(t, () => ({
+  o.useImperativeHandle(t, () => ({
     element: i.current,
     props: e
-  })), n.useImperativeHandle(o, () => t.current);
-  const $ = n.useCallback(
+  })), o.useImperativeHandle(n, () => t.current);
+  const A = o.useCallback(
     (m, y) => {
       K && t.current && K.call(void 0, {
         value: m,
@@ -1328,14 +1329,14 @@ const xt = (e, o, t) => {
       });
     },
     [K]
-  ), [V, Z] = xt(
-    x,
+  ), [Z, q] = xt(
+    x || e.defaultValue,
     {
       selection: B,
       state: x
     },
-    $
-  ), oe = n.useCallback(
+    A
+  ), oe = o.useCallback(
     (m, y) => {
       z && t.current && z.call(void 0, {
         value: m,
@@ -1344,33 +1345,33 @@ const xt = (e, o, t) => {
       });
     },
     [z]
-  ), [q, ie] = wt(
+  ), [G, ie] = wt(
     e.data || E,
     {
       state: e.data,
       valueField: p
     },
     oe
-  ), G = n.useCallback(
+  ), X = o.useCallback(
     (m, y) => (m.push(y[p]), m),
     [p]
-  ), _ = n.useMemo(
-    () => e.data || q,
-    [e.data, q]
-  ), ae = n.useMemo(
-    () => x || V,
-    [x, V]
-  ), le = n.useMemo(
-    () => _.reduce(G, []),
-    [_, G]
-  ), X = n.useCallback(
+  ), _ = o.useMemo(
+    () => e.data || G,
+    [e.data, G]
+  ), ae = o.useMemo(
+    () => x || Z,
+    [x, Z]
+  ), le = o.useMemo(
+    () => _.reduce(X, []),
+    [_, X]
+  ), V = o.useCallback(
     (m) => Me(p)(m),
     [p]
-  ), k = n.useCallback(
+  ), k = o.useCallback(
     (m) => Me(T)(m),
     [T]
-  ), [fe, be] = Dt({ items: le }), re = $e(e, t);
-  return /* @__PURE__ */ n.createElement(Ve.Provider, { value: [ae, Z] }, /* @__PURE__ */ n.createElement(Ze.Provider, { value: [fe, be] }, /* @__PURE__ */ n.createElement(qe.Provider, { value: [_, ie] }, /* @__PURE__ */ n.createElement(
+  ), [fe, be] = Dt({ items: le }), re = Ae(e, t);
+  return /* @__PURE__ */ o.createElement(Ze.Provider, { value: [ae, q] }, /* @__PURE__ */ o.createElement(qe.Provider, { value: [fe, be] }, /* @__PURE__ */ o.createElement(Ge.Provider, { value: [_, ie] }, /* @__PURE__ */ o.createElement(
     "div",
     {
       ref: i,
@@ -1395,15 +1396,15 @@ const xt = (e, o, t) => {
       "aria-orientation": "horizontal",
       "aria-multiselectable": B === "multiple"
     },
-    _.map((m, y) => /* @__PURE__ */ n.createElement(
+    _.map((m, y) => /* @__PURE__ */ o.createElement(
       L,
       {
         role: "option",
         dataItem: m,
         size: h,
-        key: [X(m), y].join("-"),
+        key: [V(m), y].join("-"),
         text: k(m),
-        value: X(m),
+        value: V(m),
         ariaLabel: m.ariaLabel,
         svgIcon: m.svgIcon || void 0
       }
@@ -1442,7 +1443,7 @@ const xt = (e, o, t) => {
 Se.displayName = "KendoReactChipList";
 Se.propTypes = Et;
 Se.defaultProps = W;
-const Be = n.forwardRef((e, o) => {
+const Be = o.forwardRef((e, n) => {
   const {
     className: t,
     disabled: i,
@@ -1459,25 +1460,25 @@ const Be = n.forwardRef((e, o) => {
     onDown: S,
     onClick: B,
     ...x
-  } = e, E = n.useRef(null), p = n.useCallback(
+  } = e, E = o.useRef(null), p = o.useCallback(
     () => {
       E.current && E.current.focus();
     },
     []
-  ), T = n.useCallback(
+  ), T = o.useCallback(
     () => ({
       element: E.current,
       focus: p
     }),
     [p]
   );
-  n.useImperativeHandle(o, T);
-  const K = n.useCallback(
-    ($) => {
-      B && h !== void 0 && !i && B($, h);
+  o.useImperativeHandle(n, T);
+  const K = o.useCallback(
+    (A) => {
+      B && h !== void 0 && !i && B(A, h);
     },
     [B, h]
-  ), z = n.useMemo(
+  ), z = o.useMemo(
     () => f(
       "k-fab-item",
       {
@@ -1488,7 +1489,7 @@ const Be = n.forwardRef((e, o) => {
     ),
     [t, i, g]
   ), L = N;
-  return /* @__PURE__ */ n.createElement(
+  return /* @__PURE__ */ o.createElement(
     "li",
     {
       ref: E,
@@ -1504,7 +1505,7 @@ const Be = n.forwardRef((e, o) => {
       onPointerDown: S,
       ...x
     },
-    L ? /* @__PURE__ */ n.createElement(L, { itemIndex: h, item: D }) : /* @__PURE__ */ n.createElement(n.Fragment, null, a && /* @__PURE__ */ n.createElement("span", { className: "k-fab-item-text" }, a), l || w ? /* @__PURE__ */ n.createElement(A, { className: "k-fab-item-icon", name: l, icon: w }) : null)
+    L ? /* @__PURE__ */ o.createElement(L, { itemIndex: h, item: D }) : /* @__PURE__ */ o.createElement(o.Fragment, null, a && /* @__PURE__ */ o.createElement("span", { className: "k-fab-item-text" }, a), l || w ? /* @__PURE__ */ o.createElement($, { className: "k-fab-item-icon", name: l, icon: w }) : null)
   );
 });
 Be.propTypes = {
@@ -1521,36 +1522,36 @@ Be.propTypes = {
   customProp: s.any
 };
 Be.displayName = "KendoFloatingActionButtonItem";
-const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o) => {
-  const t = { horizontal: o ? "right" : "left", vertical: "bottom" };
-  return e.horizontal === "end" && (t.horizontal = o ? "left" : "right"), t;
-}, St = (e, o) => {
-  const t = { horizontal: o ? "right" : "left", vertical: "top" };
-  return e.horizontal === "end" && (t.horizontal = o ? "left" : "right"), t;
-}, Bt = (e, o) => {
-  const t = o === "end" ? "end" : "start";
+const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, n) => {
+  const t = { horizontal: n ? "right" : "left", vertical: "bottom" };
+  return e.horizontal === "end" && (t.horizontal = n ? "left" : "right"), t;
+}, St = (e, n) => {
+  const t = { horizontal: n ? "right" : "left", vertical: "top" };
+  return e.horizontal === "end" && (t.horizontal = n ? "left" : "right"), t;
+}, Bt = (e, n) => {
+  const t = n === "end" ? "end" : "start";
   return {
     rtl: { end: "k-text-left", start: "k-text-right" },
     ltr: { start: "k-text-left", end: "k-text-right" }
   }[e][t];
-}, Ft = (e, o, t, i) => {
-  const a = o.horizontal, l = o.vertical;
+}, Ft = (e, n, t, i) => {
+  const a = n.horizontal, l = n.vertical;
   if (e.current) {
     const u = t && t.x !== void 0 ? he(t.x) : Ke, c = t && t.x !== void 0 ? `calc(50% + ${he(t.x)})` : "50%", g = t && t.y !== void 0 ? he(t.y) : Ke, v = t && t.y !== void 0 ? `calc(50% + ${he(t.y)})` : "50%";
-    e.current.style.setProperty(zt(o, i), a === "center" ? c : u), e.current.style.setProperty(Pt(o), l === "middle" ? v : g), i && ((l === "top" || l === "bottom") && a === "start" && e.current.style.setProperty("left", "unset"), l === "middle" && a === "end" && e.current.style.setProperty("right", "unset"), l === "middle" && a === "start" && e.current.style.setProperty("left", "unset"));
+    e.current.style.setProperty(zt(n, i), a === "center" ? c : u), e.current.style.setProperty(Pt(n), l === "middle" ? v : g), i && ((l === "top" || l === "bottom") && a === "start" && e.current.style.setProperty("left", "unset"), l === "middle" && a === "end" && e.current.style.setProperty("right", "unset"), l === "middle" && a === "start" && e.current.style.setProperty("left", "unset"));
   }
-}, zt = (e, o) => {
+}, zt = (e, n) => {
   const { horizontal: t } = e;
   return {
-    end: o ? "left" : "right",
+    end: n ? "left" : "right",
     center: "left",
-    start: o ? "right" : "left"
+    start: n ? "right" : "left"
   }[t || "end"];
 }, Pt = (e) => ({
   top: "top",
   middle: "top",
   bottom: "bottom"
-})[e.vertical || "bottom"], Mt = 2, Rt = 100, Xe = n.forwardRef((e, o) => {
+})[e.vertical || "bottom"], Mt = 2, Rt = 100, Ve = o.forwardRef((e, n) => {
   R(O);
   const {
     align: t = Y.align,
@@ -1574,53 +1575,53 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
     accessKey: K,
     popupSettings: z = {},
     modal: L,
-    onClick: $,
-    onItemClick: V,
-    onFocus: Z,
+    onClick: A,
+    onItemClick: Z,
+    onFocus: q,
     onBlur: oe,
-    onKeyDown: q,
+    onKeyDown: G,
     onOpen: ie,
-    onClose: G,
+    onClose: X,
     ..._
-  } = e, ae = rt(), le = ae ? ae + Mt : Rt, X = n.useRef(null), k = n.useRef(null), fe = n.useRef(null), be = n.useRef(null), re = n.useCallback(
+  } = e, ae = rt(), le = ae ? ae + Mt : Rt, V = o.useRef(null), k = o.useRef(null), fe = o.useRef(null), be = o.useRef(null), re = o.useCallback(
     () => {
       k.current && k.current.focus();
     },
     []
-  ), m = n.useCallback(
+  ), m = o.useCallback(
     () => ({
       element: k.current,
       focus: re
     }),
     [re]
   );
-  n.useImperativeHandle(X, m), n.useImperativeHandle(o, () => X.current);
-  const [y, F] = n.useState(!1), [ce, H] = n.useState(!1), [J, C] = n.useState(-1), Je = Re() + "-button-id", ge = xe(k, e.dir), Q = ge === "rtl", de = Re() + "-list-id";
-  n.useEffect(
+  o.useImperativeHandle(V, m), o.useImperativeHandle(n, () => V.current);
+  const [y, F] = o.useState(!1), [ce, H] = o.useState(!1), [J, C] = o.useState(-1), Je = Re() + "-button-id", ge = xe(k, e.dir), Q = ge === "rtl", de = Re() + "-list-id";
+  o.useEffect(
     () => {
       Ft(k, t, i, Q);
     },
     [k, t, i, Q]
-  ), n.useEffect(
+  ), o.useEffect(
     () => {
       ce && k && k.current && k.current.focus();
     },
     [ce, k]
   );
-  const U = n.useCallback(
+  const U = o.useCallback(
     (d, b) => {
       h && I(
-        b ? ie : G,
+        b ? ie : X,
         d,
         m(),
         void 0
       );
     },
-    [ie, G, h]
-  ), Fe = n.useCallback(
+    [ie, X, h]
+  ), Fe = o.useCallback(
     (d) => {
-      !d.target || l || (!h && $ ? I(
-        $,
+      !d.target || l || (!h && A ? I(
+        A,
         d,
         m(),
         void 0
@@ -1630,23 +1631,23 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
       F,
       H,
       C,
-      $,
+      A,
       U,
       y,
       h,
       l
     ]
-  ), Qe = n.useCallback(
+  ), Qe = o.useCallback(
     (d) => {
-      H(!0), C(y ? 0 : -1), Z && I(
-        Z,
+      H(!0), C(y ? 0 : -1), q && I(
+        q,
         d,
         m(),
         void 0
       );
     },
-    [Z, H, C]
-  ), Ye = n.useCallback(
+    [q, H, C]
+  ), Ye = o.useCallback(
     (d) => {
       H(!1), F(!1), C(-1), I(
         oe,
@@ -1656,15 +1657,15 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
       ), y && U(d, !1);
     },
     [oe, H, F, C, U]
-  ), et = n.useCallback(
+  ), et = o.useCallback(
     (d) => {
       d.preventDefault();
     },
     []
-  ), ye = n.useCallback(
+  ), ye = o.useCallback(
     (d, b) => {
       h && (h[b].disabled || I(
-        V,
+        Z,
         d,
         m(),
         {
@@ -1673,18 +1674,18 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
         }
       ));
     },
-    [V]
-  ), tt = n.useCallback(
+    [Z]
+  ), tt = o.useCallback(
     (d, b) => {
       !d.target || !h || (C(b), F(!1), ye(d, b), U(d, !1));
     },
     [C, F, ye, U]
-  ), st = n.useCallback(
+  ), st = o.useCallback(
     (d) => {
       se(document) === k.current && d.preventDefault();
     },
     [k]
-  ), nt = n.useCallback(
+  ), nt = o.useCallback(
     (d) => {
       const b = J, ke = h ? h.length : -1;
       if (d.altKey) {
@@ -1715,14 +1716,14 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
           break;
       }
       I(
-        q,
+        G,
         d,
         m(),
         void 0
       );
     },
-    [q, J, C, Q, F]
-  ), ot = n.useMemo(
+    [G, J, C, Q, F]
+  ), ot = o.useMemo(
     () => f(
       "k-fab k-fab-solid",
       {
@@ -1740,7 +1741,7 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
       a
     ),
     [E, S, x, l, w, t, ce, a]
-  ), it = h && h.map((d, b) => /* @__PURE__ */ n.createElement(
+  ), it = h && h.map((d, b) => /* @__PURE__ */ o.createElement(
     Be,
     {
       ...d,
@@ -1759,7 +1760,7 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
       onDown: st
     }
   )), ze = !!((u || c) && !N), at = k.current ? k.current.offsetWidth : 0, lt = 32, Pe = at / 2 - lt / 2;
-  return /* @__PURE__ */ n.createElement(ct.Provider, { value: le }, /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+  return /* @__PURE__ */ o.createElement(ct.Provider, { value: le }, /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
     "button",
     {
       ref: k,
@@ -1785,9 +1786,9 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
       onKeyDown: nt,
       ..._
     },
-    u || c ? /* @__PURE__ */ n.createElement(A, { className: "k-fab-icon", name: u, icon: c }) : g ? /* @__PURE__ */ n.createElement("span", { role: "presentation", className: g }) : null,
-    N && /* @__PURE__ */ n.createElement("span", { className: "k-fab-text" }, N)
-  ), L && y && /* @__PURE__ */ n.createElement(
+    u || c ? /* @__PURE__ */ o.createElement($, { className: "k-fab-icon", name: u, icon: c }) : g ? /* @__PURE__ */ o.createElement("span", { role: "presentation", className: g }) : null,
+    N && /* @__PURE__ */ o.createElement("span", { className: "k-fab-text" }, N)
+  ), L && y && /* @__PURE__ */ o.createElement(
     "div",
     {
       className: "k-overlay",
@@ -1796,7 +1797,7 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
         ...p
       }
     }
-  ), /* @__PURE__ */ n.createElement(
+  ), /* @__PURE__ */ o.createElement(
     De,
     {
       ref: be,
@@ -1808,7 +1809,7 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
       popupAlign: z.popupAlign || St(t, Q),
       style: { boxShadow: "none" }
     },
-    /* @__PURE__ */ n.createElement(
+    /* @__PURE__ */ o.createElement(
       "ul",
       {
         ref: fe,
@@ -1828,7 +1829,7 @@ const Ke = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Nt = (e, o)
     )
   )));
 });
-Xe.propTypes = {
+Ve.propTypes = {
   className: s.string,
   style: s.object,
   id: s.string,
@@ -1874,10 +1875,10 @@ const Y = {
   themeColor: "primary",
   positionMode: "fixed"
 };
-Xe.displayName = "KendoFloatingActionButton";
-const Ot = Ae(Ne);
+Ve.displayName = "KendoFloatingActionButton";
+const Ot = $e(Ne);
 Ot.displayName = "KendoReactDropDownButton";
-const Kt = Ae(Ee);
+const Kt = $e(Ee);
 Kt.displayName = "KendoReactSplitButton";
 export {
   ne as Button,
@@ -1887,7 +1888,7 @@ export {
   Ot as DropDownButton,
   Ne as DropDownButtonClassComponent,
   Ue as DropDownButtonItem,
-  Xe as FloatingActionButton,
+  Ve as FloatingActionButton,
   Be as FloatingActionButtonItem,
   Kt as SplitButton,
   Ee as SplitButtonClassComponent,