@progress/kendo-react-layout 7.0.0-develop.2 → 7.0.0-develop.3

package/index.mjs

@@ -3,16 +3,16 @@
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as t from "react";
-import { classNames as y, IconWrap as Q, getActiveElement as Ut, Keys as N, Draggable as lt, guid as le, validatePackage as V, shouldShowValidationUI as Fe, WatermarkOverlay as Be, svgIconPropType as Oe, dispatchEvent as q, kendoThemeMaps as Ge, toIconName as jt, getTabIndex as Pe, useDir as ye, focusFirstFocusableChild as Ie, useRtl as Vt, getter as jn, FOCUSABLE_ELEMENTS as Vn, Navigation as ct, SvgIcon as Xe, canUseDOM as qn, useAsyncFocusBlur as Gn } from "@progress/kendo-react-common";
+import { classNames as y, IconWrap as Q, getActiveElement as Ut, Keys as N, Draggable as lt, guid as se, validatePackage as V, shouldShowValidationUI as Fe, WatermarkOverlay as Be, svgIconPropType as Oe, dispatchEvent as q, kendoThemeMaps as Ge, toIconName as jt, getTabIndex as Pe, useDir as ye, focusFirstFocusableChild as Ie, useRtl as Vt, getter as jn, FOCUSABLE_ELEMENTS as Vn, Navigation as ct, SvgIcon as Xe, canUseDOM as qn, useAsyncFocusBlur as Gn } from "@progress/kendo-react-common";
 import { Popup as qt } from "@progress/kendo-react-popup";
 import * as r from "prop-types";
-import { caretAltLeftIcon as ae, caretAltRightIcon as oe, caretAltDownIcon as ze, caretAltUpIcon as Ye, chevronUpIcon as Gt, chevronDownIcon as Xt, checkOutlineIcon as Xn, exclamationCircleIcon as Yn, chevronLeftIcon as Zn, chevronRightIcon as Yt } from "@progress/kendo-svg-icons";
+import { caretAltLeftIcon as oe, caretAltRightIcon as le, caretAltDownIcon as ze, caretAltUpIcon as Ye, chevronUpIcon as Gt, chevronDownIcon as Xt, checkOutlineIcon as Xn, exclamationCircleIcon as Yn, chevronLeftIcon as Zn, chevronRightIcon as Yt } from "@progress/kendo-svg-icons";
 import { Button as Jn } from "@progress/kendo-react-buttons";
 import { Fade as Qn, Reveal as Zt, Animation as es } from "@progress/kendo-react-animation";
 import { provideLocalizationService as ts, useLocalization as Jt, useInternationalization as Qt } from "@progress/kendo-react-intl";
 import { ProgressBar as ns } from "@progress/kendo-react-progressbars";
 import { validatePackage as ce } from "@progress/kendo-licensing";
-const X = "", Ke = "0", ie = "_";
+const X = "", Ke = "0", re = "_";
 function De(e, s) {
   if (J(e))
     return s[Number(e)];
@@ -22,13 +22,13 @@ function De(e, s) {
   }
 }
 function ve(e) {
-  return ke(e) ? e : e.split(ie)[0];
+  return ke(e) ? e : e.split(re)[0];
 }
 function ss(e) {
   if (ke(e))
     return e;
   {
-    const s = e.indexOf(ie);
+    const s = e.indexOf(re);
     return e.substring(s + 1);
   }
 }
@@ -36,20 +36,20 @@ function Lt(e) {
   return He("0", e);
 }
 function is(e, s) {
-  return s.indexOf(e) === 0 ? s.length === e.length || s.charAt(e.length) === ie : !1;
+  return s.indexOf(e) === 0 ? s.length === e.length || s.charAt(e.length) === re : !1;
 }
 function He(e, s) {
-  return s ? s + ie + e : e;
+  return s ? s + re + e : e;
 }
 function ge(e) {
-  const s = e.lastIndexOf(ie);
+  const s = e.lastIndexOf(re);
   return s < 0 ? X : e.substring(0, s);
 }
 function ke(e) {
-  return e === X || e.indexOf(ie) < 0;
+  return e === X || e.indexOf(re) < 0;
 }
 function J(e) {
-  return e !== X && e.indexOf(ie) < 0;
+  return e !== X && e.indexOf(re) < 0;
 }
 function rs(e) {
   return os(e) === 1;
@@ -58,14 +58,14 @@ function as(e) {
   return Ze(e) === Ke;
 }
 function Ze(e) {
-  const s = e.lastIndexOf(ie);
+  const s = e.lastIndexOf(re);
   return s < 0 ? e : e.substring(s + 1);
 }
 function At(e, s, n) {
   return J(s) ? e ? Number(s) < n - 1 ? (Number(s) + 1).toString() : "0" : Number(s) > 0 ? (Number(s) - 1).toString() : (n - 1).toString() : s;
 }
 function os(e) {
-  return e.split(ie).length - 1;
+  return e.split(re).length - 1;
 }
 const zt = {
   vertical: "top",
@@ -183,9 +183,9 @@ class rn extends t.Component {
       case "downward":
         return { name: cs, icon: ze };
       case "rightward":
-        return { name: ds, icon: oe };
+        return { name: ds, icon: le };
       case "leftward":
-        return { name: us, icon: ae };
+        return { name: us, icon: oe };
       default:
         return {};
     }
@@ -489,7 +489,7 @@ class hs extends t.Component {
             Q,
             {
               name: this.props.prev.collapsible ? i ? this.props.prev.collapsed ? this.props.isRtl ? "caret-alt-left" : "caret-alt-right" : this.props.isRtl ? "caret-alt-right" : "caret-alt-left" : this.props.prev.collapsed ? "caret-alt-down" : "caret-alt-up" : void 0,
-              icon: this.props.prev.collapsible ? i ? this.props.prev.collapsed ? this.props.isRtl ? ae : oe : this.props.isRtl ? oe : ae : this.props.prev.collapsed ? ze : Ye : void 0,
+              icon: this.props.prev.collapsible ? i ? this.props.prev.collapsed ? this.props.isRtl ? oe : le : this.props.isRtl ? le : oe : this.props.prev.collapsed ? ze : Ye : void 0,
               size: "xsmall"
             }
           )
@@ -505,7 +505,7 @@ class hs extends t.Component {
             Q,
             {
               name: this.props.next.collapsible ? i ? this.props.next.collapsed ? this.props.isRtl ? "caret-alt-right" : "caret-alt-left" : this.props.isRtl ? "caret-alt-left" : "caret-alt-right" : this.props.next.collapsed ? "caret-alt-up" : "caret-alt-down" : void 0,
-              icon: this.props.next.collapsible ? i ? this.props.next.collapsed ? this.props.isRtl ? oe : ae : this.props.isRtl ? ae : oe : this.props.next.collapsed ? Ye : ze : void 0,
+              icon: this.props.next.collapsible ? i ? this.props.next.collapsed ? this.props.isRtl ? le : oe : this.props.isRtl ? oe : le : this.props.next.collapsed ? Ye : ze : void 0,
               size: "xsmall"
             }
           )
@@ -528,23 +528,20 @@ class on extends t.Component {
    * @hidden
    */
   render() {
-    const { id: s, active: n, disabled: i, title: a = "Untitled", first: o, last: l } = this.props;
-    let c = {
-      id: s,
+    const { id: s, active: n, disabled: i, title: a = "Untitled", first: o, last: l, contentPanelId: c, index: d } = this.props, u = {
+      id: `${s}-${d.toString()}`,
       "aria-selected": n,
-      "aria-controls": s,
+      "aria-controls": n ? c : void 0,
       "aria-disabled": i,
-      "aria-hidden": i,
       role: "tab",
       onClick: i ? void 0 : this.onClick
-    };
-    const d = y("k-item", {
+    }, m = y("k-item", {
       ["k-first"]: o,
       ["k-last"]: l,
       ["k-disabled"]: i,
       ["k-active"]: n
     });
-    return /* @__PURE__ */ t.createElement("li", { ...c, className: d, ref: (u) => this.itemRef = u, onBlur: this.blur }, /* @__PURE__ */ t.createElement("span", { className: "k-link" }, a));
+    return /* @__PURE__ */ t.createElement("li", { ...u, className: m, ref: (h) => this.itemRef = h, onBlur: this.blur }, /* @__PURE__ */ t.createElement("span", { className: "k-link" }, a));
   }
 }
 on.propTypes = {
@@ -581,10 +578,10 @@ class Qe extends t.Component {
       this.isRtl() && this.horizontalScroll() ? (n === de && d < 0 && (d += c, m += c), n === Te && d < l && (d -= c, m -= c), d = Math.min(0, Math.min(l, d))) : (n === de && d > 0 && (d -= c, u += c), n === Te && d < l && (d += c, u -= c), d = Math.max(0, Math.min(l, d)));
       const h = d === 0, p = i.type === "click" ? xe : void 0;
       if (o) {
-        const v = this.isRtl() ? Math.round(m) <= a.clientWidth || Math.floor(m) <= a.clientWidth : Math.round(u) <= a.clientWidth || Math.floor(u) <= a.clientWidth;
+        const f = this.isRtl() ? Math.round(m) <= a.clientWidth || Math.floor(m) <= a.clientWidth : Math.round(u) <= a.clientWidth || Math.floor(u) <= a.clientWidth;
         this.setState({
           disabledPrev: h,
-          disabledNext: v
+          disabledNext: f
         }), a.scrollTo({ left: d, behavior: p });
       } else
         this.setState({
@@ -596,12 +593,12 @@ class Qe extends t.Component {
         prev: {
           arrowTab: "k-tabstrip-prev",
           fontIcon: a ? this.isRtl() ? "caret-alt-right" : "caret-alt-left" : "caret-alt-up",
-          svgIcon: a ? this.isRtl() ? oe : ae : Ye
+          svgIcon: a ? this.isRtl() ? le : oe : Ye
         },
         next: {
           arrowTab: "k-tabstrip-next",
           fontIcon: a ? this.isRtl() ? "caret-alt-left" : "caret-alt-right" : "caret-alt-down",
-          svgIcon: a ? this.isRtl() ? ae : oe : ze
+          svgIcon: a ? this.isRtl() ? oe : le : ze
         }
       }, l = (n === de ? this.props.prevButton : this.props.nextButton) || Jn, c = n === de ? this.arrowClickPrev : this.arrowClickNext;
       return /* @__PURE__ */ t.createElement(
@@ -642,44 +639,47 @@ class Qe extends t.Component {
    * @hidden
    */
   render() {
-    const { selected: s, tabPosition: n, children: i, onSelect: a, onKeyDown: o } = this.props, l = t.Children.count(i), c = t.Children.toArray(i);
-    let d;
-    i && (d = ps(l).map((h, p, v) => {
-      const f = {
-        active: s === p,
-        disabled: c[p].props.disabled,
-        index: p,
-        title: c[p].props.title,
-        first: p === 0,
-        last: p === v.length - 1,
+    const { selected: s, tabPosition: n, children: i, onSelect: a, onKeyDown: o, navItemId: l } = this.props, c = t.Children.count(i), d = t.Children.toArray(i);
+    let u;
+    i && (u = ps(c).map((p, f, g) => {
+      const I = {
+        active: s === f,
+        disabled: d[f].props.disabled,
+        index: f,
+        title: d[f].props.title,
+        first: f === 0,
+        last: f === g.length - 1,
+        contentPanelId: this.props.contentPanelId,
+        id: l,
         onSelect: a
       };
-      return /* @__PURE__ */ t.createElement(on, { key: p, ...f });
+      return /* @__PURE__ */ t.createElement(on, { key: f, ...I });
     }));
-    const u = y("k-tabstrip-items-wrapper", {
+    const m = y("k-tabstrip-items-wrapper", {
       "k-hstack": n === "top" || n === "bottom",
       "k-vstack": n === "left" || n === "right"
-    }), m = y("k-tabstrip-items", "k-reset");
-    return /* @__PURE__ */ t.createElement("div", { className: u }, this.props.scrollable ? /* @__PURE__ */ t.createElement(t.Fragment, null, this.renderArrow(de, this.state.disabledPrev), /* @__PURE__ */ t.createElement(
+    }), h = y("k-tabstrip-items", "k-reset");
+    return /* @__PURE__ */ t.createElement("div", { className: m }, this.props.scrollable ? /* @__PURE__ */ t.createElement(t.Fragment, null, this.renderArrow(de, this.state.disabledPrev), /* @__PURE__ */ t.createElement(
       "ul",
       {
         ref: this.itemsNavRef,
-        className: m,
+        className: h,
         role: "tablist",
         tabIndex: this.props.tabIndex,
         onKeyDown: o,
-        onWheel: this.onWheel
+        onWheel: this.onWheel,
+        "aria-orientation": n === "left" || n === "right" ? "vertical" : void 0
       },
-      d
+      u
     ), this.renderArrow(Te, this.state.disabledNext)) : /* @__PURE__ */ t.createElement(
       "ul",
       {
-        className: m,
+        className: h,
         role: "tablist",
         tabIndex: this.props.tabIndex,
         onKeyDown: o
       },
-      d
+      u
     ));
   }
   scrollToSelected() {
@@ -712,7 +712,7 @@ Qe.propTypes = {
 };
 class ln extends t.Component {
   constructor() {
-    super(...arguments), this.contentId = le(), this.childFactory = (s) => t.cloneElement(s, {
+    super(...arguments), this.contentId = se(), this.childFactory = (s) => t.cloneElement(s, {
       ...s.props,
       in: s.props.children.props.id === String(this.contentId + this.props.selected)
     });
@@ -721,12 +721,23 @@ class ln extends t.Component {
    * @hidden
    */
   render() {
-    const { children: s, selected: n } = this.props, i = s && typeof n == "number" && t.Children.toArray(s)[n], a = y(
+    const { children: s, selected: n, contentPanelId: i, keepTabsMounted: a, navItemId: o } = this.props, l = s && typeof n == "number" && t.Children.toArray(s)[n], c = y(
       "k-tabstrip-content",
       "k-active",
-      i && i.props.contentClassName
+      l && l.props.contentClassName
+    );
+    return /* @__PURE__ */ t.createElement(
+      "div",
+      {
+        className: c,
+        style: this.props.style,
+        id: i,
+        role: "tabpanel",
+        "aria-hidden": a,
+        "aria-describedby": `${o}-${(n || "").toString()}`
+      },
+      this.renderContent(s)
     );
-    return /* @__PURE__ */ t.createElement("div", { className: a, style: this.props.style }, this.renderContent(s));
   }
   renderContent(s) {
     return this.props.keepTabsMounted ? t.Children.map(this.props.children, (n, i) => this.renderChild(n, i)) : this.renderChild(
@@ -736,9 +747,6 @@ class ln extends t.Component {
   }
   renderChild(s, n) {
     const i = n === this.props.selected, a = {
-      role: "tabpanel",
-      "aria-expanded": !0,
-      "aria-labelledby": n.toString(),
       style: {
         display: i ? void 0 : "none"
       }
@@ -771,13 +779,13 @@ const K = {
   name: "@progress/kendo-react-layout",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1700573048,
+  publishDate: 1700651721,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
 class cn extends t.Component {
   constructor(s) {
-    super(s), this._element = null, this.showLicenseWatermark = !1, this.keyBinding = {
+    super(s), this._element = null, this.contentPanelId = se(), this.navItemId = se(), this.showLicenseWatermark = !1, this.keyBinding = {
       [N.left]: () => this.prevNavigatableTab(),
       [N.right]: () => this.nextNavigatableTab(),
       [N.down]: () => this.nextNavigatableTab(),
@@ -859,6 +867,8 @@ class cn extends t.Component {
     const s = {
       ...this.props,
       children: this.children(),
+      contentPanelId: this.contentPanelId,
+      navItemId: this.navItemId,
       onKeyDown: this.onKeyDown,
       onSelect: this.onSelect
     }, { tabPosition: n, tabIndex: i = 0 } = s, a = n === "bottom", o = y(
@@ -970,8 +980,8 @@ class ue extends t.PureComponent {
       level: m,
       headerClassName: h,
       animation: p,
-      keepItemsMounted: v
-    } = this.props, f = {
+      keepItemsMounted: f
+    } = this.props, g = {
       role: "treeitem",
       "aria-disabled": o,
       "aria-hidden": !o && !d,
@@ -993,7 +1003,7 @@ class ue extends t.PureComponent {
         "k-focus": !o && c
       },
       h
-    ), k = { display: "block" }, g = bs(this.props), T = !o && n ? /* @__PURE__ */ t.createElement(
+    ), k = { display: "block" }, b = bs(this.props), T = !o && n ? /* @__PURE__ */ t.createElement(
       Q,
       {
         name: d ? "chevron-up" : "chevron-down",
@@ -1003,14 +1013,14 @@ class ue extends t.PureComponent {
           d ? "k-panelbar-collapse" : "k-panelbar-expand"
         )
       }
-    ) : null, R = !o && d || v ? /* @__PURE__ */ t.createElement(
+    ) : null, R = !o && d || f ? /* @__PURE__ */ t.createElement(
       "ul",
       {
         role: "group",
         "aria-expanded": d,
         "aria-hidden": !d,
         className: "k-panelbar-group k-panel k-group",
-        style: { display: v ? this.state.show ? "block" : "none" : "block" }
+        style: { display: f ? this.state.show ? "block" : "none" : "block" }
       },
       n
     ) : null, w = (p === void 0 || p) && !o && n ? /* @__PURE__ */ t.createElement(
@@ -1021,10 +1031,10 @@ class ue extends t.PureComponent {
         key: a + "_animation",
         style: k,
         children: R,
-        childFactory: v && this.childFactory,
-        unmountOnExit: !v,
-        onBeforeEnter: () => v && this.setState({ show: !0 }),
-        onAfterExited: () => v && this.setState({ show: !1 })
+        childFactory: f && this.childFactory,
+        unmountOnExit: !f,
+        onBeforeEnter: () => f && this.setState({ show: !0 }),
+        onAfterExited: () => f && this.setState({ show: !1 })
       }
     ) : R;
     return /* @__PURE__ */ t.createElement(
@@ -1032,9 +1042,9 @@ class ue extends t.PureComponent {
       {
         id: s,
         className: I,
-        ...f
+        ...g
       },
-      /* @__PURE__ */ t.createElement("span", { className: C, onClick: this.handleItemClick }, g, /* @__PURE__ */ t.createElement("span", { className: "k-panelbar-item-text" }, i), T),
+      /* @__PURE__ */ t.createElement("span", { className: C, onClick: this.handleItemClick }, b, /* @__PURE__ */ t.createElement("span", { className: "k-panelbar-item-text" }, i), T),
       w
     );
   }
@@ -1080,7 +1090,7 @@ const dn = ({
   if (u && u.type === ue) {
     let h, p = dt(u, d, m);
     if (u.props.children) {
-      const v = {
+      const f = {
         animation: e,
         keepItemsMounted: s,
         state: n,
@@ -1091,7 +1101,7 @@ const dn = ({
         level: c + 1,
         parentPrivateKey: [...d, p]
       };
-      h = dn(v);
+      h = dn(f);
     }
     return t.cloneElement(
       u,
@@ -1379,8 +1389,8 @@ function Is(e, s) {
 }
 function gn(e, s) {
   let n = {};
-  const { text: i, url: a, icon: o, svgIcon: l, disabled: c, cssClass: d, cssStyle: u, render: m, linkRender: h, contentRender: p, data: v } = e || s.props;
-  return i !== void 0 && (n.text = i), a !== void 0 && (n.url = a), o !== void 0 && (n.icon = o), l !== void 0 && (n.svgIcon = l), c !== void 0 && (n.disabled = c), d !== void 0 && (n.cssClass = d), u !== void 0 && (n.cssStyle = u), m !== void 0 && (n.render = m), h !== void 0 && (n.linkRender = h), p !== void 0 && (n.contentRender = p), v !== void 0 && (n.data = v), n;
+  const { text: i, url: a, icon: o, svgIcon: l, disabled: c, cssClass: d, cssStyle: u, render: m, linkRender: h, contentRender: p, data: f } = e || s.props;
+  return i !== void 0 && (n.text = i), a !== void 0 && (n.url = a), o !== void 0 && (n.icon = o), l !== void 0 && (n.svgIcon = l), c !== void 0 && (n.disabled = c), d !== void 0 && (n.cssClass = d), u !== void 0 && (n.cssStyle = u), m !== void 0 && (n.render = m), h !== void 0 && (n.linkRender = h), p !== void 0 && (n.contentRender = p), f !== void 0 && (n.data = f), n;
 }
 function et(e) {
   return t.Children.toArray(e).filter((s) => s && s.type === fn);
@@ -1428,20 +1438,20 @@ function Ns(e, s, n, i, a, o) {
     case N.home:
       return p();
     case N.end:
-      return v();
-    case N.esc:
       return f();
+    case N.esc:
+      return g();
     default:
       return w() ? I() : s;
   }
   function c() {
-    return a ? o ? T() : k() : o ? g() : C();
+    return a ? o ? T() : k() : o ? b() : C();
   }
   function d() {
-    return a ? o ? k() : T() : o ? C() : g();
+    return a ? o ? k() : T() : o ? C() : b();
   }
   function u() {
-    return a ? L() : J(s) ? b() : L();
+    return a ? L() : J(s) ? v() : L();
   }
   function m() {
     return a ? D() : J(s) ? R() : D();
@@ -1452,34 +1462,34 @@ function Ns(e, s, n, i, a, o) {
   function p() {
     return G()[0].id;
   }
-  function v() {
+  function f() {
     const S = G();
     return S[S.length - 1].id;
   }
-  function f() {
+  function g() {
     return J(s) ? s : ge(s);
   }
   function I() {
-    const S = i.toLowerCase(), M = G(), U = Number(Ze(s)), Z = M.slice(U + 1).concat(M.slice(0, U + 1)).find((re) => (re.text || "").toLowerCase().startsWith(S));
+    const S = i.toLowerCase(), M = G(), U = Number(Ze(s)), Z = M.slice(U + 1).concat(M.slice(0, U + 1)).find((ae) => (ae.text || "").toLowerCase().startsWith(S));
     return Z ? Z.id : s;
   }
   function C() {
-    return J(s) ? D() : rs(s) ? b(D(ve(s))) : ge(s);
+    return J(s) ? D() : rs(s) ? v(D(ve(s))) : ge(s);
   }
   function k() {
     return J(s) ? R() : ge(s);
   }
-  function g() {
-    return J(s) ? L() : b(
+  function b() {
+    return J(s) ? L() : v(
       A() ? s : L(ve(s))
     );
   }
   function T() {
-    return b(
+    return v(
       J(s) || A() ? s : L(ve(s))
     );
   }
-  function b(S) {
+  function v(S) {
     return ee(!0, S);
   }
   function R(S) {
@@ -1571,7 +1581,7 @@ const Wt = {
 };
 class ut extends t.Component {
   constructor(s) {
-    super(s), this.menuWrapperEl = null, this.guid = le(), this.directionHolder = new xs(), this.inputItems = [], this.items = [], this.reset = () => {
+    super(s), this.menuWrapperEl = null, this.guid = se(), this.directionHolder = new xs(), this.inputItems = [], this.items = [], this.reset = () => {
       this.clearItemHoverAndLeaveRequestsIfApplicable(), this.setState(Wt);
     }, this.onKeyDown = (n) => {
       if (this.state.focusedItemId !== X) {
@@ -1864,13 +1874,13 @@ class Ms extends t.Component {
         });
         return;
       }
-      const { originalPrevSize: p, originalNextSize: v, startTime: f, originalX: I, originalY: C } = this.state;
-      if (!o && c - f < Ps) {
+      const { originalPrevSize: p, originalNextSize: f, startTime: g, originalX: I, originalY: C } = this.state;
+      if (!o && c - g < Ps) {
         l && this.resetDragState();
         return;
       }
       let k;
-      this.orientation === "vertical" ? k = u - C : this.isRtl ? k = I - d : k = d - I, this.resize(a, a + 1, p, v, k, l, n), l && this.resetDragState();
+      this.orientation === "vertical" ? k = u - C : this.isRtl ? k = I - d : k = d - I, this.resize(a, a + 1, p, f, k, l, n), l && this.resetDragState();
     }, this.onBarKeyboardResize = (n, i, a, o) => {
       const { prevElement: l, nextElement: c } = this.surroudingPanes(n), d = this.elementSize(l), u = this.elementSize(c);
       this.resize(i, i + 1, d, u, a, !0, o);
@@ -1949,30 +1959,30 @@ class Ms extends t.Component {
     });
   }
   resize(s, n, i, a, o, l, c) {
-    const d = this.panesOptions(this.panesContent), u = d[s], m = d[n], h = i + a, p = this.containerSize(), v = (b) => this.toPixels(b, p), f = {
+    const d = this.panesOptions(this.panesContent), u = d[s], m = d[n], h = i + a, p = this.containerSize(), f = (v) => this.toPixels(v, p), g = {
       index: s,
       initialSize: i,
-      min: v(u.min) || h - v(m.max) || 0,
-      max: v(u.max) || h - v(m.min) || h
+      min: f(u.min) || h - f(m.max) || 0,
+      max: f(u.max) || h - f(m.min) || h
     }, I = {
       index: n,
       initialSize: a,
-      min: v(m.min) || h - v(u.max) || 0,
-      max: v(m.max) || h - v(u.min) || h
-    }, C = (b, R) => {
-      const w = d[b.index], O = this.clamp(b.min, b.max, b.initialSize + R);
+      min: f(m.min) || h - f(u.max) || 0,
+      max: f(m.max) || h - f(u.min) || h
+    }, C = (v, R) => {
+      const w = d[v.index], O = this.clamp(v.min, v.max, v.initialSize + R);
       return this.isPercent(w.size || "") ? 100 * O / p + "%" : O + "px";
     };
-    let k, g;
-    this.fixedSize(u.size) && this.fixedSize(m.size) ? (k = C(f, o), g = C(I, -o)) : m.collapsible || this.fixedSize(m.size) ? g = C(I, -o) : k = C(f, o);
-    const T = d.map((b, R) => {
-      const w = this.getPaneProps(b);
+    let k, b;
+    this.fixedSize(u.size) && this.fixedSize(m.size) ? (k = C(g, o), b = C(I, -o)) : m.collapsible || this.fixedSize(m.size) ? b = C(I, -o) : k = C(g, o);
+    const T = d.map((v, R) => {
+      const w = this.getPaneProps(v);
       return R === s ? {
         ...w,
         size: k
       } : R === n ? {
         ...w,
-        size: g
+        size: b
       } : {
         ...w
       };
@@ -2203,20 +2213,20 @@ const zs = {
     onSelect: m,
     index: h,
     tabIndex: p,
-    children: v,
-    ...f
-  } = e, { expanded: I, mini: C, item: k } = t.useContext(ht), g = t.useRef(null), T = t.useCallback(
+    children: f,
+    ...g
+  } = e, { expanded: I, mini: C, item: k } = t.useContext(ht), b = t.useRef(null), T = t.useCallback(
     () => {
-      g.current && g.current.focus();
+      b.current && b.current.focus();
     },
     []
   );
   t.useImperativeHandle(s, () => ({
-    element: g.current,
+    element: b.current,
     focus: T,
     props: e
   }));
-  const b = y(
+  const v = y(
     "k-drawer-item",
     {
       "k-selected": u,
@@ -2227,7 +2237,7 @@ const zs = {
     (O) => {
       if (m && !d) {
         const A = {
-          element: g.current,
+          element: b.current,
           focus: T,
           props: e
         };
@@ -2239,17 +2249,17 @@ const zs = {
   return c ? /* @__PURE__ */ t.createElement("li", { className: "k-drawer-item k-drawer-separator", role: "separator" }) : /* @__PURE__ */ t.createElement(
     "li",
     {
-      ref: g,
-      className: b,
+      ref: b,
+      className: v,
       style: i,
       role: "menuitem",
       "aria-label": a,
       "aria-disabled": d,
       onClick: R,
       tabIndex: Pe(p, d),
-      ...f
+      ...g
     },
-    k ? v : w
+    k ? f : w
   );
 });
 pt.propTypes = {
@@ -2275,19 +2285,19 @@ const Fs = 240, Bs = 50, Ks = { type: "slide", duration: 200 }, Hs = { type: "sl
     onOverlayClick: m,
     mini: h,
     dir: p,
-    width: v,
-    miniWidth: f,
+    width: f,
+    miniWidth: g,
     items: I,
     item: C,
     onSelect: k
-  } = t.useContext(ht), g = t.useRef(null), T = t.useCallback(
+  } = t.useContext(ht), b = t.useRef(null), T = t.useCallback(
     () => {
-      g.current && g.current.focus();
+      b.current && b.current.focus();
     },
     []
-  ), b = typeof l != "boolean" ? l : l === !1 ? Hs : Ks, R = v || Fs, w = f || Bs;
+  ), v = typeof l != "boolean" ? l : l === !1 ? Hs : Ks, R = f || Fs, w = g || Bs;
   t.useImperativeHandle(s, () => ({
-    element: g.current,
+    element: b.current,
     focus: T
   }));
   const O = t.useMemo(
@@ -2302,38 +2312,38 @@ const Fs = 240, Bs = 50, Ks = { type: "slide", duration: 200 }, Hs = { type: "sl
   ), A = {
     opacity: 1,
     flexBasis: R,
-    WebkitTransition: "all " + (b && b.duration) + "ms",
+    WebkitTransition: "all " + (v && v.duration) + "ms",
     /* Safari */
-    transition: "all " + (b && b.duration) + "ms"
+    transition: "all " + (v && v.duration) + "ms"
   }, D = {
     opacity: 1,
     transform: "translateX(0px)",
-    WebkitTransition: "all " + (b && b.duration) + "ms",
+    WebkitTransition: "all " + (v && v.duration) + "ms",
     /* Safari */
-    transition: "all " + (b && b.duration) + "ms"
+    transition: "all " + (v && v.duration) + "ms"
   }, L = {
     opacity: h ? 1 : 0,
     flexBasis: h ? w : 0,
-    WebkitTransition: "all " + (b && b.duration) + "ms",
+    WebkitTransition: "all " + (v && v.duration) + "ms",
     /* Safari */
-    transition: "all " + (b && b.duration) + "ms"
+    transition: "all " + (v && v.duration) + "ms"
   }, B = {
     opacity: 0,
     transform: "translateX(-100%)",
-    WebkitTransition: "all " + (b && b.duration) + "ms",
+    WebkitTransition: "all " + (v && v.duration) + "ms",
     /* Safari */
-    transition: "all " + (b && b.duration) + "ms"
+    transition: "all " + (v && v.duration) + "ms"
   }, G = {
     opacity: 0,
     transform: "translateX(100%)",
-    WebkitTransition: "all " + (b && b.duration) + "ms",
+    WebkitTransition: "all " + (v && v.duration) + "ms",
     /* Safari */
-    transition: "all " + (b && b.duration) + "ms"
+    transition: "all " + (v && v.duration) + "ms"
   }, ee = {
     transform: "translateX(0%)",
-    WebkitTransitionDuration: (b && b.duration) + "ms",
+    WebkitTransitionDuration: (v && v.duration) + "ms",
     /* Safari */
-    transitionDuration: (b && b.duration) + "ms"
+    transitionDuration: (v && v.duration) + "ms"
   }, W = c ? d === "push" ? A : D : d === "push" ? L : p === "ltr" && u === "start" || p === "rtl" && u === "end" ? h ? ee : B : h ? ee : G, S = I && /* @__PURE__ */ t.createElement(
     "ul",
     {
@@ -2348,16 +2358,16 @@ const Fs = 240, Bs = 50, Ks = { type: "slide", duration: 200 }, Hs = { type: "sl
           index: Y,
           ...U,
           onSelect: k
-        }, re = C || pt;
-        return /* @__PURE__ */ t.createElement(re, { key: Y, ...Z });
+        }, ae = C || pt;
+        return /* @__PURE__ */ t.createElement(ae, { key: Y, ...Z });
       }
     )
   ), M = /* @__PURE__ */ t.createElement(
     "div",
     {
-      style: b ? { ...W, ...a } : a,
+      style: v ? { ...W, ...a } : a,
       className: O,
-      ref: g
+      ref: b
     },
     /* @__PURE__ */ t.createElement(
       "div",
@@ -2393,11 +2403,11 @@ const gt = t.forwardRef((e, s) => {
     width: m,
     miniWidth: h,
     items: p,
-    item: v,
-    tabIndex: f,
+    item: f,
+    tabIndex: g,
     onOverlayClick: I,
     onSelect: C
-  } = e, k = t.useRef(null), g = t.useCallback(
+  } = e, k = t.useRef(null), b = t.useCallback(
     () => {
       k.current && k.current.focus();
     },
@@ -2405,7 +2415,7 @@ const gt = t.forwardRef((e, s) => {
   );
   t.useImperativeHandle(s, () => ({
     element: k.current,
-    focus: g
+    focus: b
   }));
   const T = t.useCallback(
     (w, O, A) => {
@@ -2421,7 +2431,7 @@ const gt = t.forwardRef((e, s) => {
       }
     },
     [p, C]
-  ), b = ye(k, e.dir), R = y(
+  ), v = ye(k, e.dir), R = y(
     {
       "k-drawer-container": !0,
       "k-drawer-expanded": n,
@@ -2440,9 +2450,9 @@ const gt = t.forwardRef((e, s) => {
         mode: i,
         position: a,
         mini: u,
-        dir: b,
+        dir: v,
         items: p,
-        item: v,
+        item: f,
         width: m,
         miniWidth: h,
         onOverlayClick: I,
@@ -2454,9 +2464,9 @@ const gt = t.forwardRef((e, s) => {
       {
         className: R,
         ref: k,
-        dir: b,
+        dir: v,
         style: c,
-        tabIndex: f
+        tabIndex: g
       },
       p && /* @__PURE__ */ t.createElement(ft, null),
       l
@@ -2532,15 +2542,15 @@ const Ws = {
     isValid: m,
     label: h,
     optional: p,
-    style: v,
-    tabIndex: f,
+    style: f,
+    tabIndex: g,
     text: I,
     ...C
   } = e, {
     animationDuration: k,
-    isVertical: g,
+    isVertical: b,
     item: T,
-    linear: b,
+    linear: v,
     mode: R,
     numOfSteps: w,
     value: O,
@@ -2563,7 +2573,7 @@ const Ws = {
     [S]
   );
   t.useImperativeHandle(s, M);
-  const U = !b || u === O - 1 || u === O || u === O + 1, Y = R === "labels" || !!c && !!h, Z = Jt(), me = ((ne) => Z.toLanguageString(ne, On[ne]))(Dn), se = typeof k == "number" ? k : k !== !1 ? Tn : Rn, Ee = t.useCallback(
+  const U = !v || u === O - 1 || u === O || u === O + 1, Y = R === "labels" || !!c && !!h, Z = Jt(), me = ((ne) => Z.toLanguageString(ne, On[ne]))(Dn), ie = typeof k == "number" ? k : k !== !1 ? Tn : Rn, Ee = t.useCallback(
     (ne) => {
       A && !o && q(
         A,
@@ -2604,12 +2614,12 @@ const Ws = {
     [u, w, O, a, p, o, l, m, i]
   ), _ = t.useMemo(
     () => ({
-      maxWidth: g ? void 0 : `calc(100% / ${w})`,
-      maxHeight: g ? `calc(100% / ${w})` : void 0,
+      maxWidth: b ? void 0 : `calc(100% / ${w})`,
+      maxHeight: b ? `calc(100% / ${w})` : void 0,
       pointerEvents: U ? void 0 : "none",
-      ...v
+      ...f
     }),
-    [g, w, v, U]
+    [b, w, f, U]
   ), F = m ? L : B, j = F ? /* @__PURE__ */ t.createElement(
     "span",
     {
@@ -2628,7 +2638,7 @@ const Ws = {
     {
       className: "k-step-indicator",
       "aria-hidden": !0,
-      style: { transitionDuration: se + "ms" }
+      style: { transitionDuration: ie + "ms" }
     },
     c || d ? !Y && m !== void 0 ? j : /* @__PURE__ */ t.createElement(Q, { className: "k-step-indicator-icon", name: c && jt(c), icon: d }) : m !== void 0 ? j : /* @__PURE__ */ t.createElement("span", { className: "k-step-indicator-text" }, I || u + 1)
   ) : null), Ce = /* @__PURE__ */ t.createElement("span", { className: "k-step-label" }, h && /* @__PURE__ */ t.createElement("span", { className: "k-step-text" }, h), Y && m !== void 0 && j, p && /* @__PURE__ */ t.createElement("span", { className: "k-step-label-optional" }, me)), fe = /* @__PURE__ */ t.createElement(t.Fragment, null, pe, Ce);
@@ -2647,7 +2657,7 @@ const Ws = {
         title: h || void 0,
         onClick: Ee,
         onFocus: he,
-        tabIndex: f || (l ? 0 : -1),
+        tabIndex: g || (l ? 0 : -1),
         "aria-current": a,
         "aria-disabled": o || !U || void 0,
         "aria-invalid": m !== void 0 && !m || void 0
@@ -2690,25 +2700,25 @@ const bt = t.forwardRef((e, s) => {
     linear: m,
     mode: h,
     orientation: p,
-    style: v,
-    successIcon: f,
+    style: f,
+    successIcon: g,
     successSVGIcon: I,
     onChange: C,
     onFocus: k
-  } = e, T = Jt().toLanguageString(st, On[st]), b = t.useRef(null), R = t.useCallback(
+  } = e, T = Jt().toLanguageString(st, On[st]), v = t.useRef(null), R = t.useCallback(
     () => {
-      b.current && Ie(b.current);
+      v.current && Ie(v.current);
     },
     []
   ), w = t.useCallback(
     () => ({
-      element: b.current,
+      element: v.current,
       focus: R
     }),
     [R]
   );
   t.useImperativeHandle(s, w);
-  const O = e.value || Pn.value, [A, D] = t.useState(O), L = u ? u.length : 0, B = p === "vertical", G = Vt(b, e.dir), ee = typeof n == "number" ? n : n !== !1 ? Tn : Rn;
+  const O = e.value || Pn.value, [A, D] = t.useState(O), L = u ? u.length : 0, B = p === "vertical", G = Vt(v, e.dir), ee = typeof n == "number" ? n : n !== !1 ? Tn : Rn;
   t.useEffect(() => {
     D(O);
   }, [O]);
@@ -2784,14 +2794,14 @@ const bt = t.forwardRef((e, s) => {
       a
     ),
     [m, a]
-  ), re = t.useMemo(
+  ), ae = t.useMemo(
     () => ({
       display: "grid",
       gridTemplateColumns: B ? void 0 : "repeat(" + L * 2 + ", 1fr)",
       gridTemplateRows: B ? "repeat(" + L + ", 1fr)" : void 0,
-      ...v
+      ...f
     }),
-    [B, L, v]
+    [B, L, f]
   ), me = t.useMemo(
     () => y(
       "k-step-list",
@@ -2801,7 +2811,7 @@ const bt = t.forwardRef((e, s) => {
       }
     ),
     [B]
-  ), se = t.useMemo(
+  ), ie = t.useMemo(
     () => ({
       gridColumnStart: B ? void 0 : 1,
       gridColumnEnd: B ? void 0 : -1,
@@ -2839,7 +2849,7 @@ const bt = t.forwardRef((e, s) => {
         mode: h,
         numOfSteps: L,
         value: O,
-        successIcon: f,
+        successIcon: g,
         successSVGIcon: I,
         errorIcon: l,
         errorSVGIcon: c,
@@ -2851,7 +2861,7 @@ const bt = t.forwardRef((e, s) => {
       "nav",
       {
         className: Z,
-        style: re,
+        style: ae,
         dir: G,
         onKeyDown: Y
       },
@@ -2859,7 +2869,7 @@ const bt = t.forwardRef((e, s) => {
         "ol",
         {
           className: me,
-          style: se
+          style: ie
         },
         he || i
       ),
@@ -2927,7 +2937,7 @@ const Mn = t.forwardRef((e, s) => {
     [c]
   );
   t.useImperativeHandle(s, d);
-  const u = t.useMemo(() => le(), []), m = t.useMemo(
+  const u = t.useMemo(() => se(), []), m = t.useMemo(
     () => e.themeColor || Ve.themeColor,
     [e.themeColor]
   ), h = t.useMemo(
@@ -2936,7 +2946,7 @@ const Mn = t.forwardRef((e, s) => {
   ), p = t.useMemo(
     () => e.positionMode || Ve.positionMode,
     [e.positionMode]
-  ), v = t.useMemo(
+  ), f = t.useMemo(
     () => y(
       "k-appbar",
       {
@@ -2956,7 +2966,7 @@ const Mn = t.forwardRef((e, s) => {
   return /* @__PURE__ */ t.createElement(
     "div",
     {
-      className: v,
+      className: f,
       style: a,
       id: o || u
     },
@@ -3297,14 +3307,14 @@ class zn extends t.Component {
       if (i === 0 && a === 0 && !l && !o)
         return;
       let c = !1;
-      const d = this.state.positions.map((f) => Object.assign({}, f)), u = d[n], m = d.find((f) => f.order === u.order + i);
+      const d = this.state.positions.map((g) => Object.assign({}, g)), u = d[n], m = d.find((g) => g.order === u.order + i);
       m && m !== u && (u.order += i, m.order += -i, c = !0);
       const h = u.col + a;
       a !== 0 && h >= 1 && h + u.colSpan <= (this.props.columns || 3) + 1 && (u.col = h, c = !0);
       const p = u.colSpan + l;
       l && p >= 1 && p + u.col <= (this.props.columns || 3) + 1 && (u.colSpan = p, c = !0);
-      const v = u.rowSpan + o;
-      o && v >= 1 && (u.rowSpan = v, c = !0), c && (this.setState({ positions: d }), q(this.props.onReposition, {}, this, { value: d }));
+      const f = u.rowSpan + o;
+      o && f >= 1 && (u.rowSpan = f, c = !0), c && (this.setState({ positions: d }), q(this.props.onReposition, {}, this, { value: d }));
     }, V(K), this.showLicenseWatermark = Fe(K);
   }
   /**
@@ -3415,12 +3425,12 @@ const Vs = {
     icon: m,
     svgIcon: h,
     text: p,
-    id: v,
-    onSelect: f,
+    id: f,
+    onSelect: g,
     onKeyDown: I,
     index: C,
     tabIndex: k
-  } = e, g = t.useMemo(
+  } = e, b = t.useMemo(
     () => y(
       "k-bottom-nav-item",
       {
@@ -3432,10 +3442,10 @@ const Vs = {
     [o, l, i]
   ), T = t.useCallback(
     (A) => {
-      f && C !== void 0 && !l && f(A, C);
+      g && C !== void 0 && !l && g(A, C);
     },
-    [f, C, l]
-  ), b = t.useCallback(
+    [g, C, l]
+  ), v = t.useCallback(
     (A) => {
       I && C !== void 0 && !l && I(A, C);
     },
@@ -3444,13 +3454,13 @@ const Vs = {
     "span",
     {
       ref: n,
-      className: g,
+      className: b,
       style: a,
       role: "link",
-      id: v,
+      id: f,
       tabIndex: k,
       onClick: T,
-      onKeyDown: b,
+      onKeyDown: v,
       "aria-current": o,
       "aria-disabled": l
     },
@@ -3497,14 +3507,14 @@ const vt = t.forwardRef((e, s) => {
     item: m,
     itemRender: h,
     disabled: p,
-    style: v,
-    id: f,
+    style: f,
+    id: g,
     onSelect: I,
     onKeyDown: C
-  } = e, k = t.useMemo(() => le(), []), g = ye(n, e.dir), T = t.useMemo(
+  } = e, k = t.useMemo(() => se(), []), b = ye(n, e.dir), T = t.useMemo(
     () => e.fillMode === null || e.fill === null ? null : e.fill || e.fillMode || be.fillMode,
     [e.fillMode, e.fill]
-  ), b = t.useMemo(
+  ), v = t.useMemo(
     () => e.themeColor || be.themeColor,
     [e.themeColor]
   ), R = t.useMemo(
@@ -3514,13 +3524,13 @@ const vt = t.forwardRef((e, s) => {
       Vs[l],
       {
         [`k-bottom-nav-${T}`]: T,
-        [`k-bottom-nav-${T}-${b}`]: !!(T && b),
+        [`k-bottom-nav-${T}-${v}`]: !!(T && v),
         "k-bottom-nav-border": c,
         "k-disabled": p
       },
       d
     ),
-    [o, b, T, l, c, p, d]
+    [o, v, T, l, c, p, d]
   ), w = t.useCallback(
     (D, L) => {
       u && !u[L].disabled && I && q(
@@ -3561,9 +3571,9 @@ const vt = t.forwardRef((e, s) => {
     {
       ref: n,
       className: R,
-      style: v,
-      id: f || k,
-      dir: g
+      style: f,
+      id: g || k,
+      dir: b
     },
     u && u.map((D, L) => /* @__PURE__ */ t.createElement(
       Ue,
@@ -3571,7 +3581,7 @@ const vt = t.forwardRef((e, s) => {
         ...D,
         key: L,
         index: L,
-        id: `${f || k}-${L}`,
+        id: `${g || k}-${L}`,
         disabled: p || D.disabled,
         selected: D.selected,
         dataItem: D,
@@ -3625,7 +3635,7 @@ const kt = t.forwardRef((e, s) => {
     []
   );
   t.useImperativeHandle(s, i);
-  const { className: a, style: o, id: l, children: c } = e, d = t.useMemo(() => le(), []), u = t.useMemo(
+  const { className: a, style: o, id: l, children: c } = e, d = t.useMemo(() => se(), []), u = t.useMemo(
     () => e.orientation || Ae.orientation,
     [e.orientation]
   ), m = u === "horizontal", h = t.useMemo(
@@ -3634,7 +3644,7 @@ const kt = t.forwardRef((e, s) => {
   ), p = t.useMemo(
     () => e.align && e.align.vertical ? e.align.vertical : Ae.vAlign,
     [e.align]
-  ), v = t.useMemo(
+  ), f = t.useMemo(
     () => y(
       "k-stack-layout",
       {
@@ -3652,7 +3662,7 @@ const kt = t.forwardRef((e, s) => {
       a
     ),
     [u, m, h, p, a]
-  ), f = {
+  ), g = {
     gap: `${typeof e.gap == "number" ? e.gap + "px" : e.gap}`,
     ...o
   };
@@ -3660,8 +3670,8 @@ const kt = t.forwardRef((e, s) => {
     "div",
     {
       ref: n,
-      className: v,
-      style: f,
+      className: f,
+      style: g,
       id: l || d
     },
     c
@@ -3694,7 +3704,7 @@ const yt = t.forwardRef((e, s) => {
     []
   );
   t.useImperativeHandle(s, i);
-  const { className: a, style: o, id: l, children: c, gap: d } = e, u = t.useMemo(() => le(), []), m = t.useMemo(
+  const { className: a, style: o, id: l, children: c, gap: d } = e, u = t.useMemo(() => se(), []), m = t.useMemo(
     () => e.align && e.align.horizontal ? e.align.horizontal : rt.hAlign,
     [e.align]
   ), h = t.useMemo(
@@ -3716,10 +3726,10 @@ const yt = t.forwardRef((e, s) => {
       a
     ),
     [m, h, a]
-  ), v = d ? `${typeof d.rows == "number" ? d.rows + "px" : d.rows} ${typeof d.cols == "number" ? d.cols + "px" : d.cols}` : void 0, f = e.rows && e.rows.map((k) => `${typeof k.height == "number" ? k.height + "px" : k.height}`).join(" "), I = e.cols && e.cols.map((k) => `${typeof k.width == "number" ? k.width + "px" : k.width}`).join(" "), C = {
-    gap: v,
+  ), f = d ? `${typeof d.rows == "number" ? d.rows + "px" : d.rows} ${typeof d.cols == "number" ? d.cols + "px" : d.cols}` : void 0, g = e.rows && e.rows.map((k) => `${typeof k.height == "number" ? k.height + "px" : k.height}`).join(" "), I = e.cols && e.cols.map((k) => `${typeof k.width == "number" ? k.width + "px" : k.width}`).join(" "), C = {
+    gap: f,
     gridTemplateColumns: I,
-    gridTemplateRows: f,
+    gridTemplateRows: g,
     ...o
   };
   return /* @__PURE__ */ t.createElement(
@@ -3762,7 +3772,7 @@ const Fn = t.forwardRef((e, s) => {
     []
   );
   t.useImperativeHandle(s, i);
-  const { className: a, style: o, id: l, children: c, row: d, col: u, rowSpan: m, colSpan: h } = e, p = t.useMemo(() => le(), []), v = {
+  const { className: a, style: o, id: l, children: c, row: d, col: u, rowSpan: m, colSpan: h } = e, p = t.useMemo(() => se(), []), f = {
     gridArea: `${d || "auto"} / ${u || "auto"} / ${m ? "span " + m : "auto"} / ${h ? "span " + h : "auto"}`,
     ...o
   };
@@ -3771,7 +3781,7 @@ const Fn = t.forwardRef((e, s) => {
     {
       ref: n,
       className: a,
-      style: v,
+      style: f,
       id: l || p
     },
     c
@@ -4000,11 +4010,11 @@ const wt = t.forwardRef((e, s) => {
     focus: d,
     props: e
   })), t.useImperativeHandle(s, () => n.current);
-  const m = ye(i, e.dir), h = (g) => {
-    n.current && q(e.onItemSelect, g, g.target, { id: g.target.id });
-  }, p = (g) => {
-    n.current && q(e.onKeyDown, g, g.target, { id: g.target.id });
-  }, v = e.valueField || Re.valueField, f = e.iconField || Re.iconField, I = e.iconClassField || Re.iconClassField, C = e.textField || Re.textField, k = e.size || "medium";
+  const m = ye(i, e.dir), h = (b) => {
+    n.current && q(e.onItemSelect, b, b.target, { id: b.target.id });
+  }, p = (b) => {
+    n.current && q(e.onKeyDown, b, b.target, { id: b.target.id });
+  }, f = e.valueField || Re.valueField, g = e.iconField || Re.iconField, I = e.iconClassField || Re.iconClassField, C = e.textField || Re.textField, k = e.size || "medium";
   return /* @__PURE__ */ t.createElement(
     "nav",
     {
@@ -4024,26 +4034,26 @@ const wt = t.forwardRef((e, s) => {
         e.className
       )
     },
-    /* @__PURE__ */ t.createElement(a, { rootItem: !0 }, /* @__PURE__ */ t.createElement(t.Fragment, null, e.data.map((g, T, b) => {
-      const R = g[v];
+    /* @__PURE__ */ t.createElement(a, { rootItem: !0 }, /* @__PURE__ */ t.createElement(t.Fragment, null, e.data.map((b, T, v) => {
+      const R = b[f];
       if (T === 0)
         return /* @__PURE__ */ t.createElement(
           o,
           {
             key: R,
             isFirstItem: !0,
-            isLastItem: b.length - 1 === T
+            isLastItem: v.length - 1 === T
           },
           /* @__PURE__ */ t.createElement(
             c,
             {
-              isLast: b.length - 1 === T,
+              isLast: v.length - 1 === T,
               isFirst: !0,
               id: String(R),
-              icon: g[f] || void 0,
-              iconClass: g[I] ? String(g[I]) : void 0,
-              text: g[C] ? String(g[C]) : void 0,
-              disabled: g.disabled || !1,
+              icon: b[g] || void 0,
+              iconClass: b[I] ? String(b[I]) : void 0,
+              text: b[C] ? String(b[C]) : void 0,
+              disabled: b.disabled || !1,
               onItemSelect: h,
               onKeyDown: p,
               ...e
@@ -4051,27 +4061,27 @@ const wt = t.forwardRef((e, s) => {
           )
         );
     }))),
-    /* @__PURE__ */ t.createElement(a, { rootItem: !1 }, /* @__PURE__ */ t.createElement(t.Fragment, null, e.data.map((g, T, b) => {
-      const R = g[v];
+    /* @__PURE__ */ t.createElement(a, { rootItem: !1 }, /* @__PURE__ */ t.createElement(t.Fragment, null, e.data.map((b, T, v) => {
+      const R = b[f];
       if (T !== 0)
         return /* @__PURE__ */ t.createElement(
           o,
           {
             key: R,
             isFirstItem: !1,
-            isLastItem: b.length - 1 === T
+            isLastItem: v.length - 1 === T
           },
           /* @__PURE__ */ t.createElement(l, { dir: m }),
           /* @__PURE__ */ t.createElement(
             c,
             {
-              isLast: b.length - 1 === T,
+              isLast: v.length - 1 === T,
               isFirst: !1,
               id: String(R),
-              icon: g[f] || void 0,
-              iconClass: g[I] ? String(g[I]) : void 0,
-              text: g[C] ? String(g[C]) : void 0,
-              disabled: g.disabled || !1,
+              icon: b[g] || void 0,
+              iconClass: b[I] ? String(b[I]) : void 0,
+              text: b[C] ? String(b[C]) : void 0,
+              disabled: b.disabled || !1,
               onItemSelect: h,
               onKeyDown: p,
               ...e
@@ -4291,7 +4301,7 @@ class Rt extends t.Component {
       expand: o,
       tabIndex: l,
       items: c
-    } = this.props, d = c == null ? void 0 : c.filter((f) => !f.group || f.group === "top"), u = c == null ? void 0 : c.filter((f) => f.group === "bottom"), m = d && d.length > 0 && u && u.length > 0, h = this.children(this.props.children), p = this.props.animationDuration || this.animationDuration, v = this.state.slide && /* @__PURE__ */ t.createElement(
+    } = this.props, d = c == null ? void 0 : c.filter((g) => !g.group || g.group === "top"), u = c == null ? void 0 : c.filter((g) => g.group === "bottom"), m = d && d.length > 0 && u && u.length > 0, h = this.children(this.props.children), p = this.props.animationDuration || this.animationDuration, f = this.state.slide && /* @__PURE__ */ t.createElement(
       "div",
       {
         className: y("k-actionsheet", this.props.className, {
@@ -4306,23 +4316,23 @@ class Rt extends t.Component {
       },
       h[ot] && !s && !n && h[ot],
       (s || n) && /* @__PURE__ */ t.createElement("div", { className: "k-actionsheet-titlebar k-text-center" }, /* @__PURE__ */ t.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ t.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy }, s && /* @__PURE__ */ t.createElement("div", null, s), n && /* @__PURE__ */ t.createElement("div", { className: "k-actionsheet-subtitle" }, n)))),
-      h[Kn] || /* @__PURE__ */ t.createElement("div", { className: "k-actionsheet-content" }, /* @__PURE__ */ t.createElement("div", { className: "k-list-ul", role: "group" }, d && d.map((f, I) => /* @__PURE__ */ t.createElement(
+      h[Kn] || /* @__PURE__ */ t.createElement("div", { className: "k-actionsheet-content" }, /* @__PURE__ */ t.createElement("div", { className: "k-list-ul", role: "group" }, d && d.map((g, I) => /* @__PURE__ */ t.createElement(
         at,
         {
-          ...f,
+          ...g,
           id: I,
           key: I,
-          item: f,
+          item: g,
           tabIndex: l || 0,
           onClick: this.handleItemClick
         }
-      ))), m && /* @__PURE__ */ t.createElement("hr", { className: "k-hr" }), /* @__PURE__ */ t.createElement("div", { className: "k-list-ul", role: "group" }, u && u.map((f, I) => /* @__PURE__ */ t.createElement(
+      ))), m && /* @__PURE__ */ t.createElement("hr", { className: "k-hr" }), /* @__PURE__ */ t.createElement("div", { className: "k-list-ul", role: "group" }, u && u.map((g, I) => /* @__PURE__ */ t.createElement(
         at,
         {
-          ...f,
+          ...g,
           id: I + ((d == null ? void 0 : d.length) || 0),
           key: I,
-          item: f,
+          item: g,
           tabIndex: l || 0,
           onClick: this.handleItemClick
         }
@@ -4349,8 +4359,8 @@ class Rt extends t.Component {
         enter: !0,
         appear: !1
       },
-      v
-    ) : v)) : null);
+      f
+    ) : f)) : null);
   }
 }
 Rt.displayName = "KendoReactActionSheet";
@@ -4366,33 +4376,33 @@ Rt.defaultProps = {
   navigatableElements: []
 };
 const Dt = (e) => {
-  const { title: n, subtitle: i, actions: a, images: o, description: l } = e.eventData, [c, d] = t.useState(e.eventData.opened || !1), [u, m] = t.useState(e.eventData.opened || !!e.collapsible), h = (f) => {
+  const { title: n, subtitle: i, actions: a, images: o, description: l } = e.eventData, [c, d] = t.useState(e.eventData.opened || !1), [u, m] = t.useState(e.eventData.opened || !!e.collapsible), h = (g) => {
     if (d(!c), e.onChange) {
       const I = {
-        syntheticEvent: f,
-        nativeEvent: f.nativeEvent,
+        syntheticEvent: g,
+        nativeEvent: g.nativeEvent,
         eventData: e.eventData
       };
       e.onChange.call(void 0, I);
     }
-  }, p = (f) => {
+  }, p = (g) => {
     if (e.onActionClick) {
       const I = {
-        syntheticEvent: f,
-        nativeEvent: f.nativeEvent,
+        syntheticEvent: g,
+        nativeEvent: g.nativeEvent,
         eventData: e.eventData
       };
       e.onActionClick.call(void 0, I);
     }
-  }, v = () => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(En, null, /* @__PURE__ */ t.createElement("div", { className: "k-card-description" }, /* @__PURE__ */ t.createElement("p", null, l), o && o.map((f, I) => /* @__PURE__ */ t.createElement(Nn, { key: I, src: f.src })))), /* @__PURE__ */ t.createElement(Cn, null, a && a.map((f, I) => /* @__PURE__ */ t.createElement(
+  }, f = () => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(En, null, /* @__PURE__ */ t.createElement("div", { className: "k-card-description" }, /* @__PURE__ */ t.createElement("p", null, l), o && o.map((g, I) => /* @__PURE__ */ t.createElement(Nn, { key: I, src: g.src })))), /* @__PURE__ */ t.createElement(Cn, null, a && a.map((g, I) => /* @__PURE__ */ t.createElement(
     "a",
     {
       key: I,
-      href: f.url,
+      href: g.url,
       className: "k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary",
       onClick: p
     },
-    f.text
+    g.text
   ))));
   return /* @__PURE__ */ t.createElement(
     "div",
@@ -4429,7 +4439,7 @@ const Dt = (e) => {
       /* @__PURE__ */ t.createElement("div", { className: "k-card-inner" }, /* @__PURE__ */ t.createElement(yn, null, /* @__PURE__ */ t.createElement(In, null, /* @__PURE__ */ t.createElement("span", { className: "k-event-title" }, n), e.collapsible && /* @__PURE__ */ t.createElement(
         "span",
         {
-          onClick: (f) => h(f),
+          onClick: (g) => h(g),
           className: "k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button"
         },
         /* @__PURE__ */ t.createElement(Xe, { icon: Yt })
@@ -4441,8 +4451,8 @@ const Dt = (e) => {
           onBeforeEnter: () => m(!1),
           onAfterExited: () => m(!0)
         },
-        c ? v() : null
-      ) : v())
+        c ? f() : null
+      ) : f())
     )
   );
 };
@@ -4454,16 +4464,16 @@ const mi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), Hn = (e
   let s;
   return e.reduce((i, a) => (s !== a.date.getFullYear() ? (s = a.date.getFullYear(), i.push({ yearFlag: s }, a)) : i.push(a), i), []);
 }, _n = (e) => {
-  const i = Qt(), [a, o] = t.useState(!1), [l, c] = t.useState(!0), [d, u] = t.useState(), [m, h] = t.useState(0), [p, v] = t.useState(), [f, I] = t.useState(0), [C, k] = t.useState(0), [g, T] = t.useState(1), [b, R] = t.useState(), [w, O] = t.useState(), [A, D] = t.useState([0, 0, 0]), [L, B] = t.useState(0), [G, ee] = t.useState(1), W = t.useRef(null), S = t.useRef(null), M = t.useRef(null), { eventsData: U, dateFormat: Y, navigatable: Z, onActionClick: re } = e, me = p ? `${p}%` : "150px", se = t.useRef(new ct({
+  const i = Qt(), [a, o] = t.useState(!1), [l, c] = t.useState(!0), [d, u] = t.useState(), [m, h] = t.useState(0), [p, f] = t.useState(), [g, I] = t.useState(0), [C, k] = t.useState(0), [b, T] = t.useState(1), [v, R] = t.useState(), [w, O] = t.useState(), [A, D] = t.useState([0, 0, 0]), [L, B] = t.useState(0), [G, ee] = t.useState(1), W = t.useRef(null), S = t.useRef(null), M = t.useRef(null), { eventsData: U, dateFormat: Y, navigatable: Z, onActionClick: ae } = e, me = p ? `${p}%` : "150px", ie = t.useRef(new ct({
     tabIndex: 0,
     root: W,
     selectors: [".k-timeline-scrollable-wrap"]
   }));
   t.useEffect(() => {
     W.current && e.navigatable && (setTimeout(() => {
-      const E = se.current.first;
+      const E = ie.current.first;
       E && E.setAttribute("tabindex", String(0));
-    }, 0), se.current.keyboardEvents = {
+    }, 0), ie.current.keyboardEvents = {
       keydown: {
         ArrowRight: he,
         ArrowLeft: H,
@@ -4471,11 +4481,11 @@ const mi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), Hn = (e
         Home: _
       }
     });
-  }, [e.navigatable, g, f]), t.useEffect(() => {
-    se.current.update();
+  }, [e.navigatable, b, g]), t.useEffect(() => {
+    ie.current.update();
   });
   const Ee = (E) => {
-    Z && se.current && se.current.triggerKeyboardEvent(E);
+    Z && ie.current && ie.current.triggerKeyboardEvent(E);
   };
   t.useEffect(() => {
     var z;
@@ -4484,33 +4494,33 @@ const mi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), Hn = (e
       E && E.disconnect();
     };
   }, []), t.useEffect(() => {
-    const E = S.current, x = E && E.children[g];
+    const E = S.current, x = E && E.children[b];
     if (x) {
       const P = x.offsetWidth, z = !(m >= 0);
       if (o(z), w) {
-        const $ = w.length * P > f * P * ((m * -1 + 100) / 100);
+        const $ = w.length * P > g * P * ((m * -1 + 100) / 100);
         c($);
       }
-      (E == null ? void 0 : E.offsetWidth) * -m / 100 >= E.children.length * P && (j(), Le(), h((x.offsetLeft - x.offsetWidth) / (f * x.offsetWidth) * 100 * -1)), Ot(x);
+      (E == null ? void 0 : E.offsetWidth) * -m / 100 >= E.children.length * P && (j(), Le(), h((x.offsetLeft - x.offsetWidth) / (g * x.offsetWidth) * 100 * -1)), Ot(x);
     }
-  }, [f, p, g]);
+  }, [g, p, b]);
   const he = (E, x, P) => {
     if (S.current) {
-      const z = S.current.children[g + 1], $ = z && z.classList.contains("k-timeline-flag-wrap") ? g + 2 : g + 1;
+      const z = S.current.children[b + 1], $ = z && z.classList.contains("k-timeline-flag-wrap") ? b + 2 : b + 1;
       if (w && w.length <= $)
         return;
-      f + C <= $ && Ce(), we($, P);
+      g + C <= $ && Ce(), we($, P);
     }
   }, H = (E, x, P) => {
     if (S.current) {
-      const z = S.current && S.current.children[g - 1], $ = z && z.classList.contains("k-timeline-flag-wrap") ? g - 2 : g - 1;
+      const z = S.current && S.current.children[b - 1], $ = z && z.classList.contains("k-timeline-flag-wrap") ? b - 2 : b - 1;
       if ($ <= 0)
         return;
       $ < C && pe(), we($, P);
     }
   }, _ = (E, x, P) => {
     if (S.current) {
-      if (g <= 1)
+      if (b <= 1)
         return;
       const z = 1;
       fe(!0, z, 0, 0), we(z, P);
@@ -4518,30 +4528,30 @@ const mi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), Hn = (e
   }, F = (E, x, P) => {
     if (S.current) {
       const z = S.current && S.current.children.length - 1;
-      if (z <= g)
+      if (z <= b)
         return;
-      const $ = Math.floor(z / f), Se = $ * -100, je = $ * f;
+      const $ = Math.floor(z / g), Se = $ * -100, je = $ * g;
       fe(!0, z, je, Se), we(z, P);
     }
   }, j = () => {
     const E = Hn(U);
-    O(E), R([E[g - 1], E[g], E[g + 1]]);
+    O(E), R([E[b - 1], E[b], E[b + 1]]);
   }, pe = () => {
     var x;
     if (S.current && w) {
-      const P = C - f, z = C - 1, $ = w[z] && ((x = w[z]) != null && x.yearFlag) ? z - 1 : z, Se = m + 100 > 0 ? 0 : m + 100;
+      const P = C - g, z = C - 1, $ = w[z] && ((x = w[z]) != null && x.yearFlag) ? z - 1 : z, Se = m + 100 > 0 ? 0 : m + 100;
       fe(!1, $, P, Se);
     }
   }, Ce = () => {
     if (S.current && w) {
-      const x = C + f, P = w[x] && w[x].yearFlag ? x + 1 : x, z = m - 100;
+      const x = C + g, P = w[x] && w[x].yearFlag ? x + 1 : x, z = m - 100;
       fe(!0, P, x, z);
     }
   }, fe = (E, x, P, z) => {
     ne(E, x), Le(), k(P), h(z), T(x);
   }, ne = (E, x) => {
-    if (b && w) {
-      const P = Ne(E, G), z = Object.assign([], b, { [P]: w[x] });
+    if (v && w) {
+      const P = Ne(E, G), z = Object.assign([], v, { [P]: w[x] });
       R(z), ee(P), B(E ? -100 : 100), setTimeout(() => {
         var Mt;
         const $ = (Mt = W.current) == null ? void 0 : Mt.offsetWidth, Se = Object.assign([], A, {
@@ -4557,18 +4567,18 @@ const mi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), Hn = (e
     }
   }, Ne = (E, x) => {
     const P = E ? x + 1 : x - 1;
-    return b ? P < 0 ? b.length - 1 : P % b.length : 0;
+    return v ? P < 0 ? v.length - 1 : P % v.length : 0;
   }, Ot = (E) => {
     var P;
-    const x = (g - C) * E.offsetWidth + E.offsetWidth / 2 + (((P = M.current) == null ? void 0 : P.offsetWidth) || 0);
+    const x = (b - C) * E.offsetWidth + E.offsetWidth / 2 + (((P = M.current) == null ? void 0 : P.offsetWidth) || 0);
     u(x);
   }, we = (E, x) => {
-    x.preventDefault(), E > g ? ne(!0, E) : E < g && ne(!1, E), T(E);
+    x.preventDefault(), E > b ? ne(!0, E) : E < b && ne(!1, E), T(E);
   }, Le = t.useCallback(() => {
-    const E = S.current, x = E && E.children[g];
+    const E = S.current, x = E && E.children[b];
     if (E instanceof HTMLElement && x) {
       const P = Math.round(E.offsetWidth / 150);
-      Ot(x), v(100 / P), I(P);
+      Ot(x), f(100 / P), I(P);
     }
   }, []), Un = () => ({
     transitionDuration: "300ms"
@@ -4589,7 +4599,7 @@ const mi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), Hn = (e
         { "k-disabled": !a }
       )
     },
-    /* @__PURE__ */ t.createElement(Xe, { icon: ae })
+    /* @__PURE__ */ t.createElement(Xe, { icon: oe })
   ), /* @__PURE__ */ t.createElement(
     "a",
     {
@@ -4602,7 +4612,7 @@ const mi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), Hn = (e
         { "k-disabled": !l }
       )
     },
-    /* @__PURE__ */ t.createElement(Xe, { icon: oe })
+    /* @__PURE__ */ t.createElement(Xe, { icon: le })
   ), /* @__PURE__ */ t.createElement("div", { className: "k-timeline-track" }, /* @__PURE__ */ t.createElement(
     "ul",
     {
@@ -4627,9 +4637,9 @@ const mi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), Hn = (e
         role: "tab",
         className: y(
           "k-timeline-track-item",
-          { "k-focus": x === g }
+          { "k-focus": x === b }
         ),
-        "aria-selected": x === g,
+        "aria-selected": x === b,
         style: { flex: `1 0 ${me}` },
         key: x
       },
@@ -4648,7 +4658,7 @@ const mi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), Hn = (e
       className: "k-timeline-scrollable-wrap",
       style: L === 0 ? { ...Pt(L) } : { ...Pt(L), ...Un() }
     },
-    b && b.map(
+    v && v.map(
       (E, x) => /* @__PURE__ */ t.createElement(
         "li",
         {
@@ -4661,7 +4671,7 @@ const mi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), Hn = (e
           {
             tabindex: A[x] === 0 ? 0 : -1,
             eventData: E,
-            onActionClick: re,
+            onActionClick: ae,
             horizontal: !0,
             collapsible: !1,
             calloutStyle: { left: `${d}px` }
@@ -4684,16 +4694,16 @@ const Wn = (e) => {
     navigatable: u,
     onChange: m,
     onActionClick: h
-  } = e, p = t.useRef(null), v = t.useRef(new ct({
+  } = e, p = t.useRef(null), f = t.useRef(new ct({
     tabIndex: 0,
     root: p,
     selectors: [".k-card-vertical"]
   }));
   t.useEffect(() => {
     p.current && e.navigatable && (setTimeout(() => {
-      const k = v.current.first;
+      const k = f.current.first;
       k && k.setAttribute("tabindex", String(0));
-    }, 0), v.current.keyboardEvents = {
+    }, 0), f.current.keyboardEvents = {
       keydown: {
         Space: I,
         Enter: I
@@ -4702,25 +4712,25 @@ const Wn = (e) => {
   }, [e.navigatable]), t.useEffect(() => {
     i(Hn(l));
   }, []), t.useEffect(() => {
-    v.current.update();
+    f.current.update();
   });
-  const f = (k) => {
-    u && v.current && v.current.triggerKeyboardEvent(k);
-  }, I = (k, g, T) => {
+  const g = (k) => {
+    u && f.current && f.current.triggerKeyboardEvent(k);
+  }, I = (k, b, T) => {
     T.preventDefault();
-    const b = k.querySelector(".k-card-title .k-event-collapse");
-    b && b.click();
+    const v = k.querySelector(".k-card-title .k-event-collapse");
+    v && v.click();
   };
   let C = 0;
-  return /* @__PURE__ */ t.createElement("ul", { ref: p, onKeyDown: f }, n && n.map((k, g) => {
-    const T = le(), b = (g + C) % 2 === 0;
-    return k.yearFlag && (C += 1), /* @__PURE__ */ t.createElement(t.Fragment, { key: g }, k.yearFlag ? /* @__PURE__ */ t.createElement("li", { className: "k-timeline-flag-wrap" }, /* @__PURE__ */ t.createElement("span", { className: "k-timeline-flag" }, k.yearFlag)) : /* @__PURE__ */ t.createElement("li", { className: y("k-timeline-event", { "k-reverse": b }) }, /* @__PURE__ */ t.createElement("div", { className: "k-timeline-date-wrap" }, /* @__PURE__ */ t.createElement("span", { className: "k-timeline-date", id: T }, s.formatDate(k.date, c))), /* @__PURE__ */ t.createElement("a", { className: "k-timeline-circle" }), /* @__PURE__ */ t.createElement(
+  return /* @__PURE__ */ t.createElement("ul", { ref: p, onKeyDown: g }, n && n.map((k, b) => {
+    const T = se(), v = (b + C) % 2 === 0;
+    return k.yearFlag && (C += 1), /* @__PURE__ */ t.createElement(t.Fragment, { key: b }, k.yearFlag ? /* @__PURE__ */ t.createElement("li", { className: "k-timeline-flag-wrap" }, /* @__PURE__ */ t.createElement("span", { className: "k-timeline-flag" }, k.yearFlag)) : /* @__PURE__ */ t.createElement("li", { className: y("k-timeline-event", { "k-reverse": v }) }, /* @__PURE__ */ t.createElement("div", { className: "k-timeline-date-wrap" }, /* @__PURE__ */ t.createElement("span", { className: "k-timeline-date", id: T }, s.formatDate(k.date, c))), /* @__PURE__ */ t.createElement("a", { className: "k-timeline-circle" }), /* @__PURE__ */ t.createElement(
       Dt,
       {
         id: T,
         tabindex: u ? 0 : -1,
         eventData: k,
-        alternated: d && b,
+        alternated: d && v,
         collapsible: a,
         transitionDuration: o,
         onChange: m,
@@ -4749,13 +4759,13 @@ const ei = (e) => {
     dateFormat: u,
     onChange: m,
     onActionClick: h
-  } = s, [p, v] = t.useState(), f = t.useRef(null);
+  } = s, [p, f] = t.useState(), g = t.useRef(null);
   return t.useEffect(() => {
-    f.current && v(f.current.offsetWidth);
+    g.current && f(g.current.offsetWidth);
   }, []), /* @__PURE__ */ t.createElement(
     "div",
     {
-      ref: f,
+      ref: g,
       className: y(
         "k-timeline",
         {
@@ -4843,8 +4853,8 @@ const $n = t.forwardRef((e, s) => {
     onAction: m,
     expandIcon: h,
     collapseIcon: p,
-    expandSVGIcon: v,
-    collapseSVGIcon: f
+    expandSVGIcon: f,
+    collapseSVGIcon: g
   } = e, I = t.useCallback(
     (R) => {
       q(m, R, o(), { expanded: l });
@@ -4857,9 +4867,9 @@ const $n = t.forwardRef((e, s) => {
     [m, l]
   ), k = t.useCallback(() => {
     e.disabled || a(!0);
-  }, [e.disabled]), g = t.useCallback(() => {
+  }, [e.disabled]), b = t.useCallback(() => {
     e.disabled || a(!1);
-  }, [e.disabled]), { onFocus: T, onBlur: b } = Gn({ onFocus: k, onBlur: g });
+  }, [e.disabled]), { onFocus: T, onBlur: v } = Gn({ onFocus: k, onBlur: b });
   return /* @__PURE__ */ t.createElement(
     "div",
     {
@@ -4874,7 +4884,7 @@ const $n = t.forwardRef((e, s) => {
         }
       ),
       onFocus: T,
-      onBlur: b,
+      onBlur: v,
       style: e.style,
       id: e.id,
       dir: Vt(n, e.dir),
@@ -4898,7 +4908,7 @@ const $n = t.forwardRef((e, s) => {
         Q,
         {
           name: l ? p ? void 0 : "chevron-up" : h ? void 0 : "chevron-down",
-          icon: l ? !f && !p ? Gt : f : !v && !h ? Xt : v,
+          icon: l ? !g && !p ? Gt : g : !f && !h ? Xt : f,
           className: y(
             l ? {
               [String(p)]: !!p