@progress/kendo-react-layout 7.1.0-develop.2 → 7.1.0-develop.5

package/index.mjs

@@ -101,8 +101,8 @@ function cs(e, s) {
 }
 function sn(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: g } = 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), g !== void 0 && (n.data = g), 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;
 }
 function Je(e) {
   return t.Children.toArray(e).filter((s) => s && s.type === nn);
@@ -150,20 +150,20 @@ function ms(e, s, n, i, a, o) {
     case C.home:
       return p();
     case C.end:
-      return g();
+      return v();
     case C.esc:
-      return b();
+      return g();
     default:
       return w() ? y() : s;
   }
   function c() {
-    return a ? o ? R() : N() : o ? f() : E();
+    return a ? o ? R() : N() : o ? f() : I();
   }
   function d() {
-    return a ? o ? N() : R() : o ? E() : f();
+    return a ? o ? N() : R() : o ? I() : f();
   }
   function u() {
-    return a ? L() : J(s) ? v() : L();
+    return a ? L() : J(s) ? b() : L();
   }
   function m() {
     return a ? D() : J(s) ? S() : D();
@@ -174,34 +174,34 @@ function ms(e, s, n, i, a, o) {
   function p() {
     return G()[0].id;
   }
-  function g() {
+  function v() {
     const x = G();
     return x[x.length - 1].id;
   }
-  function b() {
+  function g() {
     return J(s) ? s : pe(s);
   }
   function y() {
     const x = i.toLowerCase(), M = G(), j = Number(Ze(s)), Z = M.slice(j + 1).concat(M.slice(0, j + 1)).find((re) => (re.text || "").toLowerCase().startsWith(x));
     return Z ? Z.id : s;
   }
-  function E() {
-    return J(s) ? D() : as(s) ? v(D(ge(s))) : pe(s);
+  function I() {
+    return J(s) ? D() : as(s) ? b(D(ge(s))) : pe(s);
   }
   function N() {
     return J(s) ? S() : pe(s);
   }
   function f() {
-    return J(s) ? L() : v(
+    return J(s) ? L() : b(
       A() ? s : L(ge(s))
     );
   }
   function R() {
-    return v(
+    return b(
       J(s) || A() ? s : L(ge(s))
     );
   }
-  function v(x) {
+  function b(x) {
     return ee(!0, x);
   }
   function S(x) {
@@ -622,7 +622,7 @@ const K = {
   name: "@progress/kendo-react-layout",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1705398378,
+  publishDate: 1705499324,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 }, _t = {
@@ -811,20 +811,18 @@ class mn extends t.Component {
    * @hidden
    */
   render() {
-    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()}`,
+    const { id: s, active: n, disabled: i, title: a = "Untitled", contentPanelId: o, index: l } = this.props, c = {
+      id: `${s}-${l.toString()}`,
       "aria-selected": n,
-      "aria-controls": n ? c : void 0,
+      "aria-controls": n ? o : void 0,
       "aria-disabled": i,
       role: "tab",
       onClick: i ? void 0 : this.onClick
-    }, m = k("k-item", {
-      ["k-first"]: o,
-      ["k-last"]: l,
+    }, d = k("k-item", "k-tabstrip-item", {
       ["k-disabled"]: i,
       ["k-active"]: n
     });
-    return /* @__PURE__ */ t.createElement("li", { ...u, className: m, ref: (h) => this.itemRef = h, onBlur: this.blur }, /* @__PURE__ */ t.createElement("span", { className: "k-link" }, a));
+    return /* @__PURE__ */ t.createElement("li", { ...c, className: d, ref: (u) => this.itemRef = u, onBlur: this.blur, "aria-controls": o }, /* @__PURE__ */ t.createElement("span", { className: "k-link" }, a));
   }
 }
 mn.propTypes = {
@@ -861,10 +859,10 @@ class tt extends t.Component {
       this.isRtl() && this.horizontalScroll() ? (n === le && d < 0 && (d += c, m += c), n === xe && d < l && (d -= c, m -= c), d = Math.min(0, Math.min(l, d))) : (n === le && d > 0 && (d -= c, u += c), n === xe && d < l && (d += c, u -= c), d = Math.max(0, Math.min(l, d)));
       const h = d === 0, p = i.type === "click" ? Se : void 0;
       if (o) {
-        const g = this.isRtl() ? Math.round(m) <= a.clientWidth || Math.floor(m) <= a.clientWidth : Math.round(u) <= a.clientWidth || Math.floor(u) <= a.clientWidth;
+        const v = 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: g
+          disabledNext: v
         }), a.scrollTo({ left: d, behavior: p });
       } else
         this.setState({
@@ -922,47 +920,47 @@ class tt extends t.Component {
    * @hidden
    */
   render() {
-    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 = Es(c).map((p, g, b) => {
-      const y = {
+    const { selected: s, tabPosition: n, children: i, onSelect: a, onKeyDown: o, navItemId: l, contentPanelId: c } = this.props, d = t.Children.count(i), u = t.Children.toArray(i);
+    let m;
+    i && (m = Es(d).map((v, g, y) => {
+      const I = {
         active: s === g,
-        disabled: d[g].props.disabled,
+        disabled: u[g].props.disabled,
         index: g,
-        title: d[g].props.title,
+        title: u[g].props.title,
         first: g === 0,
-        last: g === b.length - 1,
-        contentPanelId: this.props.contentPanelId,
+        last: g === y.length - 1,
+        contentPanelId: c,
         id: l,
         onSelect: a
       };
-      return /* @__PURE__ */ t.createElement(mn, { key: g, ...y });
+      return /* @__PURE__ */ t.createElement(mn, { key: g, ...I });
     }));
-    const m = k("k-tabstrip-items-wrapper", {
+    const h = k("k-tabstrip-items-wrapper", {
       "k-hstack": n === "top" || n === "bottom",
       "k-vstack": n === "left" || n === "right"
-    }), h = k("k-tabstrip-items", "k-reset");
-    return /* @__PURE__ */ t.createElement("div", { className: m }, this.props.scrollable ? /* @__PURE__ */ t.createElement(t.Fragment, null, this.renderArrow(le, this.state.disabledPrev), /* @__PURE__ */ t.createElement(
+    }), p = k("k-tabstrip-items", "k-reset");
+    return /* @__PURE__ */ t.createElement("div", { className: h }, this.props.scrollable ? /* @__PURE__ */ t.createElement(t.Fragment, null, this.renderArrow(le, this.state.disabledPrev), /* @__PURE__ */ t.createElement(
       "ul",
       {
         ref: this.itemsNavRef,
-        className: h,
+        className: p,
         role: "tablist",
         tabIndex: this.props.tabIndex,
         onKeyDown: o,
         onWheel: this.onWheel,
         "aria-orientation": n === "left" || n === "right" ? "vertical" : void 0
       },
-      u
+      m
     ), this.renderArrow(xe, this.state.disabledNext)) : /* @__PURE__ */ t.createElement(
       "ul",
       {
-        className: h,
+        className: p,
         role: "tablist",
         tabIndex: this.props.tabIndex,
         onKeyDown: o
       },
-      u
+      m
     ));
   }
   scrollToSelected() {
@@ -1017,7 +1015,7 @@ class hn extends t.Component {
         id: i,
         role: "tabpanel",
         "aria-hidden": a,
-        "aria-describedby": `${o}-${(n || "").toString()}`
+        "aria-labelledby": `${o}-${(n == null ? void 0 : n.toString()) || ""}`
       },
       this.renderContent(s)
     );
@@ -1376,8 +1374,8 @@ class ce extends t.PureComponent {
       level: m,
       headerClassName: h,
       animation: p,
-      keepItemsMounted: g
-    } = this.props, b = {
+      keepItemsMounted: v
+    } = this.props, g = {
       role: "treeitem",
       "aria-disabled": o,
       "aria-hidden": !o && !d,
@@ -1392,7 +1390,7 @@ class ce extends t.PureComponent {
       },
       `k-level-${m}`,
       u
-    ), E = k(
+    ), I = k(
       "k-link",
       {
         "k-selected": !o && l,
@@ -1409,14 +1407,14 @@ class ce extends t.PureComponent {
           d ? "k-panelbar-collapse" : "k-panelbar-expand"
         )
       }
-    ) : null, S = !o && d || g ? /* @__PURE__ */ t.createElement(
+    ) : null, S = !o && d || v ? /* @__PURE__ */ t.createElement(
       "ul",
       {
         role: "group",
         "aria-expanded": d,
         "aria-hidden": !d,
         className: "k-panelbar-group k-panel k-group",
-        style: { display: g ? this.state.show ? "block" : "none" : "block" }
+        style: { display: v ? this.state.show ? "block" : "none" : "block" }
       },
       n
     ) : null, w = (p === void 0 || p) && !o && n ? /* @__PURE__ */ t.createElement(
@@ -1427,10 +1425,10 @@ class ce extends t.PureComponent {
         key: a + "_animation",
         style: N,
         children: S,
-        childFactory: g && this.childFactory,
-        unmountOnExit: !g,
-        onBeforeEnter: () => g && this.setState({ show: !0 }),
-        onAfterExited: () => g && this.setState({ show: !1 })
+        childFactory: v && this.childFactory,
+        unmountOnExit: !v,
+        onBeforeEnter: () => v && this.setState({ show: !0 }),
+        onAfterExited: () => v && this.setState({ show: !1 })
       }
     ) : S;
     return /* @__PURE__ */ t.createElement(
@@ -1438,9 +1436,9 @@ class ce extends t.PureComponent {
       {
         id: s,
         className: y,
-        ...b
+        ...g
       },
-      /* @__PURE__ */ t.createElement("span", { className: E, onClick: this.handleItemClick }, f, /* @__PURE__ */ t.createElement("span", { className: "k-panelbar-item-text" }, i), R),
+      /* @__PURE__ */ t.createElement("span", { className: I, onClick: this.handleItemClick }, f, /* @__PURE__ */ t.createElement("span", { className: "k-panelbar-item-text" }, i), R),
       w
     );
   }
@@ -1486,7 +1484,7 @@ const pn = ({
   if (u && u.type === ce) {
     let h, p = ut(u, d, m);
     if (u.props.children) {
-      const g = {
+      const v = {
         animation: e,
         keepItemsMounted: s,
         state: n,
@@ -1497,7 +1495,7 @@ const pn = ({
         level: c + 1,
         parentPrivateKey: [...d, p]
       };
-      h = pn(g);
+      h = pn(v);
     }
     return t.cloneElement(
       u,
@@ -1883,13 +1881,13 @@ class Ls extends t.Component {
         });
         return;
       }
-      const { originalPrevSize: p, originalNextSize: g, startTime: b, originalX: y, originalY: E } = this.state;
-      if (!o && c - b < Ms) {
+      const { originalPrevSize: p, originalNextSize: v, startTime: g, originalX: y, originalY: I } = this.state;
+      if (!o && c - g < Ms) {
         l && this.resetDragState();
         return;
       }
       let N;
-      this.orientation === "vertical" ? N = u - E : this.isRtl ? N = y - d : N = d - y, this.resize(a, a + 1, p, g, N, l, n), l && this.resetDragState();
+      this.orientation === "vertical" ? N = u - I : this.isRtl ? N = y - d : N = d - y, this.resize(a, a + 1, p, v, N, 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);
@@ -1968,24 +1966,24 @@ class Ls 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(), g = (v) => this.toPixels(v, p), b = {
+    const d = this.panesOptions(this.panesContent), u = d[s], m = d[n], h = i + a, p = this.containerSize(), v = (b) => this.toPixels(b, p), g = {
       index: s,
       initialSize: i,
-      min: g(u.min) || h - g(m.max) || 0,
-      max: g(u.max) || h - g(m.min) || h
+      min: v(u.min) || h - v(m.max) || 0,
+      max: v(u.max) || h - v(m.min) || h
     }, y = {
       index: n,
       initialSize: a,
-      min: g(m.min) || h - g(u.max) || 0,
-      max: g(m.max) || h - g(u.min) || h
-    }, E = (v, S) => {
-      const w = d[v.index], O = this.clamp(v.min, v.max, v.initialSize + S);
+      min: v(m.min) || h - v(u.max) || 0,
+      max: v(m.max) || h - v(u.min) || h
+    }, I = (b, S) => {
+      const w = d[b.index], O = this.clamp(b.min, b.max, b.initialSize + S);
       return this.isPercent(w.size || "") ? 100 * O / p + "%" : O + "px";
     };
     let N, f;
-    this.fixedSize(u.size) && this.fixedSize(m.size) ? (N = E(b, o), f = E(y, -o)) : m.collapsible || this.fixedSize(m.size) ? f = E(y, -o) : N = E(b, o);
-    const R = d.map((v, S) => {
-      const w = this.getPaneProps(v);
+    this.fixedSize(u.size) && this.fixedSize(m.size) ? (N = I(g, o), f = I(y, -o)) : m.collapsible || this.fixedSize(m.size) ? f = I(y, -o) : N = I(g, o);
+    const R = d.map((b, S) => {
+      const w = this.getPaneProps(b);
       return S === s ? {
         ...w,
         size: N
@@ -2223,9 +2221,9 @@ const Fs = {
     onSelect: m,
     index: h,
     tabIndex: p,
-    children: g,
-    ...b
-  } = e, { expanded: y, mini: E, item: N } = t.useContext(ht), f = t.useRef(null), R = t.useCallback(
+    children: v,
+    ...g
+  } = e, { expanded: y, mini: I, item: N } = t.useContext(ht), f = t.useRef(null), R = t.useCallback(
     () => {
       f.current && f.current.focus();
     },
@@ -2236,7 +2234,7 @@ const Fs = {
     focus: R,
     props: e
   }));
-  const v = k(
+  const b = k(
     "k-drawer-item",
     {
       "k-selected": u,
@@ -2255,21 +2253,21 @@ const Fs = {
       }
     },
     [m, h, d]
-  ), w = /* @__PURE__ */ t.createElement(t.Fragment, null, (o || l) && /* @__PURE__ */ t.createElement(Q, { name: o && jt(o), icon: l }), !y && E ? null : /* @__PURE__ */ t.createElement("span", { className: "k-item-text" }, a));
+  ), w = /* @__PURE__ */ t.createElement(t.Fragment, null, (o || l) && /* @__PURE__ */ t.createElement(Q, { name: o && jt(o), icon: l }), !y && I ? null : /* @__PURE__ */ t.createElement("span", { className: "k-item-text" }, a));
   return c ? /* @__PURE__ */ t.createElement("li", { className: "k-drawer-item k-drawer-separator", role: "separator" }) : /* @__PURE__ */ t.createElement(
     "li",
     {
       ref: f,
-      className: v,
+      className: b,
       style: i,
       role: "menuitem",
       "aria-label": a,
       "aria-disabled": d,
       onClick: S,
       tabIndex: Oe(p, d),
-      ...b
+      ...g
     },
-    N ? g : w
+    N ? v : w
   );
 });
 pt.propTypes = {
@@ -2295,17 +2293,17 @@ const Bs = 240, Ks = 50, Hs = { type: "slide", duration: 200 }, _s = { type: "sl
     onOverlayClick: m,
     mini: h,
     dir: p,
-    width: g,
-    miniWidth: b,
+    width: v,
+    miniWidth: g,
     items: y,
-    item: E,
+    item: I,
     onSelect: N
   } = t.useContext(ht), f = t.useRef(null), R = t.useCallback(
     () => {
       f.current && f.current.focus();
     },
     []
-  ), v = typeof l != "boolean" ? l : l === !1 ? _s : Hs, S = g || Bs, w = b || Ks;
+  ), b = typeof l != "boolean" ? l : l === !1 ? _s : Hs, S = v || Bs, w = g || Ks;
   t.useImperativeHandle(s, () => ({
     element: f.current,
     focus: R
@@ -2322,38 +2320,38 @@ const Bs = 240, Ks = 50, Hs = { type: "slide", duration: 200 }, _s = { type: "sl
   ), A = {
     opacity: 1,
     flexBasis: S,
-    WebkitTransition: "all " + (v && v.duration) + "ms",
+    WebkitTransition: "all " + (b && b.duration) + "ms",
     /* Safari */
-    transition: "all " + (v && v.duration) + "ms"
+    transition: "all " + (b && b.duration) + "ms"
   }, D = {
     opacity: 1,
     transform: "translateX(0px)",
-    WebkitTransition: "all " + (v && v.duration) + "ms",
+    WebkitTransition: "all " + (b && b.duration) + "ms",
     /* Safari */
-    transition: "all " + (v && v.duration) + "ms"
+    transition: "all " + (b && b.duration) + "ms"
   }, L = {
     opacity: h ? 1 : 0,
     flexBasis: h ? w : 0,
-    WebkitTransition: "all " + (v && v.duration) + "ms",
+    WebkitTransition: "all " + (b && b.duration) + "ms",
     /* Safari */
-    transition: "all " + (v && v.duration) + "ms"
+    transition: "all " + (b && b.duration) + "ms"
   }, B = {
     opacity: 0,
     transform: "translateX(-100%)",
-    WebkitTransition: "all " + (v && v.duration) + "ms",
+    WebkitTransition: "all " + (b && b.duration) + "ms",
     /* Safari */
-    transition: "all " + (v && v.duration) + "ms"
+    transition: "all " + (b && b.duration) + "ms"
   }, G = {
     opacity: 0,
     transform: "translateX(100%)",
-    WebkitTransition: "all " + (v && v.duration) + "ms",
+    WebkitTransition: "all " + (b && b.duration) + "ms",
     /* Safari */
-    transition: "all " + (v && v.duration) + "ms"
+    transition: "all " + (b && b.duration) + "ms"
   }, ee = {
     transform: "translateX(0%)",
-    WebkitTransitionDuration: (v && v.duration) + "ms",
+    WebkitTransitionDuration: (b && b.duration) + "ms",
     /* Safari */
-    transitionDuration: (v && v.duration) + "ms"
+    transitionDuration: (b && b.duration) + "ms"
   }, $ = c ? d === "push" ? A : D : d === "push" ? L : p === "ltr" && u === "start" || p === "rtl" && u === "end" ? h ? ee : B : h ? ee : G, x = y && /* @__PURE__ */ t.createElement(
     "ul",
     {
@@ -2368,14 +2366,14 @@ const Bs = 240, Ks = 50, Hs = { type: "slide", duration: 200 }, _s = { type: "sl
           index: Y,
           ...j,
           onSelect: N
-        }, re = E || pt;
+        }, re = I || pt;
         return /* @__PURE__ */ t.createElement(re, { key: Y, ...Z });
       }
     )
   ), M = /* @__PURE__ */ t.createElement(
     "div",
     {
-      style: v ? { ...$, ...a } : a,
+      style: b ? { ...$, ...a } : a,
       className: O,
       ref: f
     },
@@ -2413,10 +2411,10 @@ const gt = t.forwardRef((e, s) => {
     width: m,
     miniWidth: h,
     items: p,
-    item: g,
-    tabIndex: b,
+    item: v,
+    tabIndex: g,
     onOverlayClick: y,
-    onSelect: E
+    onSelect: I
   } = e, N = t.useRef(null), f = t.useCallback(
     () => {
       N.current && N.current.focus();
@@ -2429,7 +2427,7 @@ const gt = t.forwardRef((e, s) => {
   }));
   const R = t.useCallback(
     (w, O, A) => {
-      if (p && E) {
+      if (p && I) {
         const D = {
           itemTarget: w,
           itemIndex: O,
@@ -2437,11 +2435,11 @@ const gt = t.forwardRef((e, s) => {
           nativeEvent: A && A.nativeEvent,
           target: void 0
         };
-        E.call(void 0, D);
+        I.call(void 0, D);
       }
     },
-    [p, E]
-  ), v = ve(N, e.dir), S = k(
+    [p, I]
+  ), b = ve(N, e.dir), S = k(
     {
       "k-drawer-container": !0,
       "k-drawer-expanded": n,
@@ -2460,9 +2458,9 @@ const gt = t.forwardRef((e, s) => {
         mode: i,
         position: a,
         mini: u,
-        dir: v,
+        dir: b,
         items: p,
-        item: g,
+        item: v,
         width: m,
         miniWidth: h,
         onOverlayClick: y,
@@ -2474,9 +2472,9 @@ const gt = t.forwardRef((e, s) => {
       {
         className: S,
         ref: N,
-        dir: v,
+        dir: b,
         style: c,
-        tabIndex: b
+        tabIndex: g
       },
       p && /* @__PURE__ */ t.createElement(ft, null),
       l
@@ -2552,15 +2550,15 @@ const $s = {
     isValid: m,
     label: h,
     optional: p,
-    style: g,
-    tabIndex: b,
+    style: v,
+    tabIndex: g,
     text: y,
-    ...E
+    ...I
   } = e, {
     animationDuration: N,
     isVertical: f,
     item: R,
-    linear: v,
+    linear: b,
     mode: S,
     numOfSteps: w,
     value: O,
@@ -2583,7 +2581,7 @@ const $s = {
     [x]
   );
   t.useImperativeHandle(s, M);
-  const j = !v || u === O - 1 || u === O || u === O + 1, Y = S === "labels" || !!c && !!h, Z = en(), de = ((ne) => Z.toLanguageString(ne, Pn[ne]))(On), se = typeof N == "number" ? N : N !== !1 ? Rn : Dn, Ie = t.useCallback(
+  const j = !b || u === O - 1 || u === O || u === O + 1, Y = S === "labels" || !!c && !!h, Z = en(), de = ((ne) => Z.toLanguageString(ne, Pn[ne]))(On), se = typeof N == "number" ? N : N !== !1 ? Rn : Dn, Ie = t.useCallback(
     (ne) => {
       A && !o && q(
         A,
@@ -2627,9 +2625,9 @@ const $s = {
       maxWidth: f ? void 0 : `calc(100% / ${w})`,
       maxHeight: f ? `calc(100% / ${w})` : void 0,
       pointerEvents: j ? void 0 : "none",
-      ...g
+      ...v
     }),
-    [f, w, g, j]
+    [f, w, v, j]
   ), F = m ? L : B, V = F ? /* @__PURE__ */ t.createElement(
     "span",
     {
@@ -2658,7 +2656,7 @@ const $s = {
       ref: $,
       className: H,
       style: _,
-      ...E
+      ...I
     },
     /* @__PURE__ */ t.createElement(
       "a",
@@ -2667,7 +2665,7 @@ const $s = {
         title: h || void 0,
         onClick: Ie,
         onFocus: ue,
-        tabIndex: b || (l ? 0 : -1),
+        tabIndex: g || (l ? 0 : -1),
         "aria-current": a,
         "aria-disabled": o || !j || void 0,
         "aria-invalid": m !== void 0 && !m || void 0
@@ -2710,39 +2708,39 @@ const bt = t.forwardRef((e, s) => {
     linear: m,
     mode: h,
     orientation: p,
-    style: g,
-    successIcon: b,
+    style: v,
+    successIcon: g,
     successSVGIcon: y,
-    onChange: E,
+    onChange: I,
     onFocus: N
-  } = e, R = en().toLanguageString(st, Pn[st]), v = t.useRef(null), S = t.useCallback(
+  } = e, R = en().toLanguageString(st, Pn[st]), b = t.useRef(null), S = t.useCallback(
     () => {
-      v.current && ke(v.current);
+      b.current && ke(b.current);
     },
     []
   ), w = t.useCallback(
     () => ({
-      element: v.current,
+      element: b.current,
       focus: S
     }),
     [S]
   );
   t.useImperativeHandle(s, w);
-  const O = e.value || Mn.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 ? Rn : Dn;
+  const O = e.value || Mn.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 ? Rn : Dn;
   t.useEffect(() => {
     D(O);
   }, [O]);
   const $ = t.useCallback(
     (H, _) => {
       const F = _ === O - 1, V = _ === O, me = _ === O + 1;
-      O !== _ && E && !o && (!m || F || V || me) && (q(
-        E,
+      O !== _ && I && !o && (!m || F || V || me) && (q(
+        I,
         H,
         w(),
         { value: _ }
       ), D(_));
     },
-    [O, m, E, o, D]
+    [O, m, I, o, D]
   ), x = t.useCallback(
     (H) => {
       let _ = H.value, F = H.syntheticEvent;
@@ -2809,9 +2807,9 @@ const bt = t.forwardRef((e, s) => {
       display: "grid",
       gridTemplateColumns: B ? void 0 : "repeat(" + L * 2 + ", 1fr)",
       gridTemplateRows: B ? "repeat(" + L + ", 1fr)" : void 0,
-      ...g
+      ...v
     }),
-    [B, L, g]
+    [B, L, v]
   ), de = t.useMemo(
     () => k(
       "k-step-list",
@@ -2859,7 +2857,7 @@ const bt = t.forwardRef((e, s) => {
         mode: h,
         numOfSteps: L,
         value: O,
-        successIcon: b,
+        successIcon: g,
         successSVGIcon: y,
         errorIcon: l,
         errorSVGIcon: c,
@@ -2956,7 +2954,7 @@ const Ln = t.forwardRef((e, s) => {
   ), p = t.useMemo(
     () => e.positionMode || Ve.positionMode,
     [e.positionMode]
-  ), g = t.useMemo(
+  ), v = t.useMemo(
     () => k(
       "k-appbar",
       {
@@ -2976,7 +2974,7 @@ const Ln = t.forwardRef((e, s) => {
   return /* @__PURE__ */ t.createElement(
     "div",
     {
-      className: g,
+      className: v,
       style: a,
       id: o || u
     },
@@ -3317,14 +3315,14 @@ class Fn extends t.Component {
       if (i === 0 && a === 0 && !l && !o)
         return;
       let c = !1;
-      const d = this.state.positions.map((b) => Object.assign({}, b)), u = d[n], m = d.find((b) => b.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 g = u.rowSpan + o;
-      o && g >= 1 && (u.rowSpan = g, c = !0), c && (this.setState({ positions: d }), q(this.props.onReposition, {}, this, { value: d }));
+      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 }));
     }, W(K), this.showLicenseWatermark = ze(K);
   }
   /**
@@ -3435,10 +3433,10 @@ const qs = {
     icon: m,
     svgIcon: h,
     text: p,
-    id: g,
-    onSelect: b,
+    id: v,
+    onSelect: g,
     onKeyDown: y,
-    index: E,
+    index: I,
     tabIndex: N
   } = e, f = t.useMemo(
     () => k(
@@ -3452,14 +3450,14 @@ const qs = {
     [o, l, i]
   ), R = t.useCallback(
     (A) => {
-      b && E !== void 0 && !l && b(A, E);
+      g && I !== void 0 && !l && g(A, I);
     },
-    [b, E, l]
-  ), v = t.useCallback(
+    [g, I, l]
+  ), b = t.useCallback(
     (A) => {
-      y && E !== void 0 && !l && y(A, E);
+      y && I !== void 0 && !l && y(A, I);
     },
-    [y, E, l]
+    [y, I, l]
   ), S = d, w = c, O = /* @__PURE__ */ t.createElement(
     "span",
     {
@@ -3467,14 +3465,14 @@ const qs = {
       className: f,
       style: a,
       role: "link",
-      id: g,
+      id: v,
       tabIndex: N,
       onClick: R,
-      onKeyDown: v,
+      onKeyDown: b,
       "aria-current": o,
       "aria-disabled": l
     },
-    w ? /* @__PURE__ */ t.createElement(w, { itemIndex: E, item: u }) : /* @__PURE__ */ t.createElement(t.Fragment, null, (m || h) && /* @__PURE__ */ t.createElement(Q, { className: "k-bottom-nav-item-icon", name: m, icon: h, size: "xlarge" }), p && /* @__PURE__ */ t.createElement("span", { className: "k-bottom-nav-item-text", style: { userSelect: "none" } }, p))
+    w ? /* @__PURE__ */ t.createElement(w, { itemIndex: I, item: u }) : /* @__PURE__ */ t.createElement(t.Fragment, null, (m || h) && /* @__PURE__ */ t.createElement(Q, { className: "k-bottom-nav-item-icon", name: m, icon: h, size: "xlarge" }), p && /* @__PURE__ */ t.createElement("span", { className: "k-bottom-nav-item-text", style: { userSelect: "none" } }, p))
   );
   return S !== void 0 ? S.call(void 0, O, e) : O;
 }), Xs = {
@@ -3517,14 +3515,14 @@ const vt = t.forwardRef((e, s) => {
     item: m,
     itemRender: h,
     disabled: p,
-    style: g,
-    id: b,
+    style: v,
+    id: g,
     onSelect: y,
-    onKeyDown: E
+    onKeyDown: I
   } = e, N = ye(), f = ve(n, e.dir), R = t.useMemo(
     () => e.fillMode === null || e.fill === null ? null : e.fill || e.fillMode || fe.fillMode,
     [e.fillMode, e.fill]
-  ), v = t.useMemo(
+  ), b = t.useMemo(
     () => e.themeColor || fe.themeColor,
     [e.themeColor]
   ), S = t.useMemo(
@@ -3534,13 +3532,13 @@ const vt = t.forwardRef((e, s) => {
       qs[l],
       {
         [`k-bottom-nav-${R}`]: R,
-        [`k-bottom-nav-${R}-${v}`]: !!(R && v),
+        [`k-bottom-nav-${R}-${b}`]: !!(R && b),
         "k-bottom-nav-border": c,
         "k-disabled": p
       },
       d
     ),
-    [o, v, R, l, c, p, d]
+    [o, b, R, l, c, p, d]
   ), w = t.useCallback(
     (D, L) => {
       u && !u[L].disabled && y && q(
@@ -3568,21 +3566,21 @@ const vt = t.forwardRef((e, s) => {
           break;
       }
       q(
-        E,
+        I,
         D,
         a(),
         void 0
       );
     },
-    [w, E]
+    [w, I]
   );
   return /* @__PURE__ */ t.createElement(
     "nav",
     {
       ref: n,
       className: S,
-      style: g,
-      id: b || N,
+      style: v,
+      id: g || N,
       dir: f
     },
     u && u.map((D, L) => /* @__PURE__ */ t.createElement(
@@ -3591,7 +3589,7 @@ const vt = t.forwardRef((e, s) => {
         ...D,
         key: L,
         index: L,
-        id: `${b || N}-${L}`,
+        id: `${g || N}-${L}`,
         disabled: p || D.disabled,
         selected: D.selected,
         dataItem: D,
@@ -3654,7 +3652,7 @@ const kt = t.forwardRef((e, s) => {
   ), p = t.useMemo(
     () => e.align && e.align.vertical ? e.align.vertical : Le.vAlign,
     [e.align]
-  ), g = t.useMemo(
+  ), v = t.useMemo(
     () => k(
       "k-stack-layout",
       {
@@ -3672,7 +3670,7 @@ const kt = t.forwardRef((e, s) => {
       a
     ),
     [u, m, h, p, a]
-  ), b = {
+  ), g = {
     gap: `${typeof e.gap == "number" ? e.gap + "px" : e.gap}`,
     ...o
   };
@@ -3680,8 +3678,8 @@ const kt = t.forwardRef((e, s) => {
     "div",
     {
       ref: n,
-      className: g,
-      style: b,
+      className: v,
+      style: g,
       id: l || d
     },
     c
@@ -3736,10 +3734,10 @@ const yt = t.forwardRef((e, s) => {
       a
     ),
     [m, h, a]
-  ), g = d ? `${typeof d.rows == "number" ? d.rows + "px" : d.rows} ${typeof d.cols == "number" ? d.cols + "px" : d.cols}` : void 0, b = e.rows && e.rows.map((N) => `${typeof N.height == "number" ? N.height + "px" : N.height}`).join(" "), y = e.cols && e.cols.map((N) => `${typeof N.width == "number" ? N.width + "px" : N.width}`).join(" "), E = {
-    gap: g,
+  ), v = 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((N) => `${typeof N.height == "number" ? N.height + "px" : N.height}`).join(" "), y = e.cols && e.cols.map((N) => `${typeof N.width == "number" ? N.width + "px" : N.width}`).join(" "), I = {
+    gap: v,
     gridTemplateColumns: y,
-    gridTemplateRows: b,
+    gridTemplateRows: g,
     ...o
   };
   return /* @__PURE__ */ t.createElement(
@@ -3747,7 +3745,7 @@ const yt = t.forwardRef((e, s) => {
     {
       ref: n,
       className: p,
-      style: E,
+      style: I,
       id: l || u
     },
     c
@@ -3782,7 +3780,7 @@ const Bn = 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 = ye(), g = {
+  const { className: a, style: o, id: l, children: c, row: d, col: u, rowSpan: m, colSpan: h } = e, p = ye(), v = {
     gridArea: `${d || "auto"} / ${u || "auto"} / ${m ? "span " + m : "auto"} / ${h ? "span " + h : "auto"}`,
     ...o
   };
@@ -3791,7 +3789,7 @@ const Bn = t.forwardRef((e, s) => {
     {
       ref: n,
       className: a,
-      style: g,
+      style: v,
       id: l || p
     },
     c
@@ -4024,7 +4022,7 @@ const wt = t.forwardRef((e, s) => {
     n.current && q(e.onItemSelect, f, f.target, { id: f.target.id });
   }, p = (f) => {
     n.current && q(e.onKeyDown, f, f.target, { id: f.target.id });
-  }, g = e.valueField || Te.valueField, b = e.iconField || Te.iconField, y = e.iconClassField || Te.iconClassField, E = e.textField || Te.textField, N = e.size || "medium";
+  }, v = e.valueField || Te.valueField, g = e.iconField || Te.iconField, y = e.iconClassField || Te.iconClassField, I = e.textField || Te.textField, N = e.size || "medium";
   return /* @__PURE__ */ t.createElement(
     "nav",
     {
@@ -4044,25 +4042,25 @@ const wt = t.forwardRef((e, s) => {
         e.className
       )
     },
-    /* @__PURE__ */ t.createElement(a, { rootItem: !0 }, /* @__PURE__ */ t.createElement(t.Fragment, null, e.data.map((f, R, v) => {
-      const S = f[g];
+    /* @__PURE__ */ t.createElement(a, { rootItem: !0 }, /* @__PURE__ */ t.createElement(t.Fragment, null, e.data.map((f, R, b) => {
+      const S = f[v];
       if (R === 0)
         return /* @__PURE__ */ t.createElement(
           o,
           {
             key: S,
             isFirstItem: !0,
-            isLastItem: v.length - 1 === R
+            isLastItem: b.length - 1 === R
           },
           /* @__PURE__ */ t.createElement(
             c,
             {
-              isLast: v.length - 1 === R,
+              isLast: b.length - 1 === R,
               isFirst: !0,
               id: String(S),
-              icon: f[b] || void 0,
+              icon: f[g] || void 0,
               iconClass: f[y] ? String(f[y]) : void 0,
-              text: f[E] ? String(f[E]) : void 0,
+              text: f[I] ? String(f[I]) : void 0,
               disabled: f.disabled || !1,
               onItemSelect: h,
               onKeyDown: p,
@@ -4071,26 +4069,26 @@ const wt = t.forwardRef((e, s) => {
           )
         );
     }))),
-    /* @__PURE__ */ t.createElement(a, { rootItem: !1 }, /* @__PURE__ */ t.createElement(t.Fragment, null, e.data.map((f, R, v) => {
-      const S = f[g];
+    /* @__PURE__ */ t.createElement(a, { rootItem: !1 }, /* @__PURE__ */ t.createElement(t.Fragment, null, e.data.map((f, R, b) => {
+      const S = f[v];
       if (R !== 0)
         return /* @__PURE__ */ t.createElement(
           o,
           {
             key: S,
             isFirstItem: !1,
-            isLastItem: v.length - 1 === R
+            isLastItem: b.length - 1 === R
           },
           /* @__PURE__ */ t.createElement(l, { dir: m }),
           /* @__PURE__ */ t.createElement(
             c,
             {
-              isLast: v.length - 1 === R,
+              isLast: b.length - 1 === R,
               isFirst: !1,
               id: String(S),
-              icon: f[b] || void 0,
+              icon: f[g] || void 0,
               iconClass: f[y] ? String(f[y]) : void 0,
-              text: f[E] ? String(f[E]) : void 0,
+              text: f[I] ? String(f[I]) : void 0,
               disabled: f.disabled || !1,
               onItemSelect: h,
               onKeyDown: p,
@@ -4311,7 +4309,7 @@ class Rt extends t.Component {
       expand: o,
       tabIndex: l,
       items: c
-    } = this.props, d = c == null ? void 0 : c.filter((b) => !b.group || b.group === "top"), u = c == null ? void 0 : c.filter((b) => b.group === "bottom"), m = d && d.length > 0 && u && u.length > 0, h = this.children(this.props.children), p = this.props.animationDuration || this.animationDuration, g = 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, v = this.state.slide && /* @__PURE__ */ t.createElement(
       "div",
       {
         className: k("k-actionsheet", this.props.className, {
@@ -4326,23 +4324,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[Hn] || /* @__PURE__ */ t.createElement("div", { className: "k-actionsheet-content" }, /* @__PURE__ */ t.createElement("div", { className: "k-list-ul", role: "group" }, d && d.map((b, y) => /* @__PURE__ */ t.createElement(
+      h[Hn] || /* @__PURE__ */ t.createElement("div", { className: "k-actionsheet-content" }, /* @__PURE__ */ t.createElement("div", { className: "k-list-ul", role: "group" }, d && d.map((g, y) => /* @__PURE__ */ t.createElement(
         at,
         {
-          ...b,
+          ...g,
           id: y,
           key: y,
-          item: b,
+          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((b, y) => /* @__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, y) => /* @__PURE__ */ t.createElement(
         at,
         {
-          ...b,
+          ...g,
           id: y + ((d == null ? void 0 : d.length) || 0),
           key: y,
-          item: b,
+          item: g,
           tabIndex: l || 0,
           onClick: this.handleItemClick
         }
@@ -4369,8 +4367,8 @@ class Rt extends t.Component {
         enter: !0,
         appear: !1
       },
-      g
-    ) : g)) : null);
+      v
+    ) : v)) : null);
   }
 }
 Rt.displayName = "KendoReactActionSheet";
@@ -4386,33 +4384,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 = (b) => {
+  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 y = {
-        syntheticEvent: b,
-        nativeEvent: b.nativeEvent,
+        syntheticEvent: g,
+        nativeEvent: g.nativeEvent,
         eventData: e.eventData
       };
       e.onChange.call(void 0, y);
     }
-  }, p = (b) => {
+  }, p = (g) => {
     if (e.onActionClick) {
       const y = {
-        syntheticEvent: b,
-        nativeEvent: b.nativeEvent,
+        syntheticEvent: g,
+        nativeEvent: g.nativeEvent,
         eventData: e.eventData
       };
       e.onActionClick.call(void 0, y);
     }
-  }, g = () => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(Cn, null, /* @__PURE__ */ t.createElement("div", { className: "k-card-description" }, /* @__PURE__ */ t.createElement("p", null, l), o && o.map((b, y) => /* @__PURE__ */ t.createElement(wn, { key: y, src: b.src })))), /* @__PURE__ */ t.createElement(Nn, null, a && a.map((b, y) => /* @__PURE__ */ t.createElement(
+  }, v = () => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(Cn, null, /* @__PURE__ */ t.createElement("div", { className: "k-card-description" }, /* @__PURE__ */ t.createElement("p", null, l), o && o.map((g, y) => /* @__PURE__ */ t.createElement(wn, { key: y, src: g.src })))), /* @__PURE__ */ t.createElement(Nn, null, a && a.map((g, y) => /* @__PURE__ */ t.createElement(
     "a",
     {
       key: y,
-      href: b.url,
+      href: g.url,
       className: "k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary",
       onClick: p
     },
-    b.text
+    g.text
   ))));
   return /* @__PURE__ */ t.createElement(
     "div",
@@ -4433,7 +4431,7 @@ const Dt = (e) => {
         role: e.horizontal ? "tabpanel" : "button",
         "aria-expanded": e.collapsible && u,
         className: "k-card-with-callout",
-        onClick: (b) => h(b)
+        onClick: (g) => h(g)
       },
       /* @__PURE__ */ t.createElement(
         "span",
@@ -4462,8 +4460,8 @@ const Dt = (e) => {
           onBeforeEnter: () => m(!1),
           onAfterExited: () => m(!0)
         },
-        c ? g() : null
-      ) : g())
+        c ? v() : null
+      ) : v())
     )
   );
 };
@@ -4475,15 +4473,15 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (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), []);
 }, Wn = (e) => {
-  const i = tn(), [a, o] = t.useState(!1), [l, c] = t.useState(!0), [d, u] = t.useState(), [m, h] = t.useState(0), [p, g] = t.useState(), [b, y] = t.useState(0), [E, N] = t.useState(0), [f, R] = t.useState(1), [v, S] = t.useState(), [w, O] = t.useState(), [A, D] = t.useState([0, 0, 0]), [L, B] = t.useState(0), [G, ee] = t.useState(1), $ = t.useRef(null), x = t.useRef(null), M = t.useRef(null), { eventsData: j, dateFormat: Y, navigatable: Z, onActionClick: re } = e, de = p ? `${p}%` : "150px", se = t.useRef(new ct({
+  const i = tn(), [a, o] = t.useState(!1), [l, c] = t.useState(!0), [d, u] = t.useState(), [m, h] = t.useState(0), [p, v] = t.useState(), [g, y] = t.useState(0), [I, N] = t.useState(0), [f, R] = t.useState(1), [b, S] = t.useState(), [w, O] = t.useState(), [A, D] = t.useState([0, 0, 0]), [L, B] = t.useState(0), [G, ee] = t.useState(1), $ = t.useRef(null), x = t.useRef(null), M = t.useRef(null), { eventsData: j, dateFormat: Y, navigatable: Z, onActionClick: re } = e, de = p ? `${p}%` : "150px", se = t.useRef(new ct({
     tabIndex: 0,
     root: $,
     selectors: [".k-timeline-scrollable-wrap"]
   }));
   t.useEffect(() => {
     $.current && e.navigatable && (setTimeout(() => {
-      const I = se.current.first;
-      I && I.setAttribute("tabindex", String(0));
+      const E = se.current.first;
+      E && E.setAttribute("tabindex", String(0));
     }, 0), se.current.keyboardEvents = {
       keydown: {
         ArrowRight: ue,
@@ -4492,78 +4490,78 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (e
         Home: _
       }
     });
-  }, [e.navigatable, f, b]), t.useEffect(() => {
+  }, [e.navigatable, f, g]), t.useEffect(() => {
     se.current.update();
   });
-  const Ie = (I) => {
-    Z && se.current && se.current.triggerKeyboardEvent(I);
+  const Ie = (E) => {
+    Z && se.current && se.current.triggerKeyboardEvent(E);
   };
   t.useEffect(() => {
     var z;
-    const I = qt && window.ResizeObserver && new window.ResizeObserver(Me), T = x.current, P = ((z = $ == null ? void 0 : $.current) == null ? void 0 : z.offsetWidth) || 0;
-    return I && T && I.observe(T), V(), Me(), D([P, 0, -P]), () => {
-      I && I.disconnect();
+    const E = qt && window.ResizeObserver && new window.ResizeObserver(Me), T = x.current, P = ((z = $ == null ? void 0 : $.current) == null ? void 0 : z.offsetWidth) || 0;
+    return E && T && E.observe(T), V(), Me(), D([P, 0, -P]), () => {
+      E && E.disconnect();
     };
   }, []), t.useEffect(() => {
-    const I = x.current, T = I && I.children[f];
+    const E = x.current, T = E && E.children[f];
     if (T) {
       const P = T.offsetWidth, z = !(m >= 0);
       if (o(z), w) {
-        const U = w.length * P > b * P * ((m * -1 + 100) / 100);
+        const U = w.length * P > g * P * ((m * -1 + 100) / 100);
         c(U);
       }
-      (I == null ? void 0 : I.offsetWidth) * -m / 100 >= I.children.length * P && (V(), Me(), h((T.offsetLeft - T.offsetWidth) / (b * T.offsetWidth) * 100 * -1)), Ot(T);
+      (E == null ? void 0 : E.offsetWidth) * -m / 100 >= E.children.length * P && (V(), Me(), h((T.offsetLeft - T.offsetWidth) / (g * T.offsetWidth) * 100 * -1)), Ot(T);
     }
-  }, [b, p, f]);
-  const ue = (I, T, P) => {
+  }, [g, p, f]);
+  const ue = (E, T, P) => {
     if (x.current) {
       const z = x.current.children[f + 1], U = z && z.classList.contains("k-timeline-flag-wrap") ? f + 2 : f + 1;
       if (w && w.length <= U)
         return;
-      b + E <= U && Ee(), Ne(U, P);
+      g + I <= U && Ee(), Ne(U, P);
     }
-  }, H = (I, T, P) => {
+  }, H = (E, T, P) => {
     if (x.current) {
       const z = x.current && x.current.children[f - 1], U = z && z.classList.contains("k-timeline-flag-wrap") ? f - 2 : f - 1;
       if (U <= 0)
         return;
-      U < E && me(), Ne(U, P);
+      U < I && me(), Ne(U, P);
     }
-  }, _ = (I, T, P) => {
+  }, _ = (E, T, P) => {
     if (x.current) {
       if (f <= 1)
         return;
       const z = 1;
       he(!0, z, 0, 0), Ne(z, P);
     }
-  }, F = (I, T, P) => {
+  }, F = (E, T, P) => {
     if (x.current) {
       const z = x.current && x.current.children.length - 1;
       if (z <= f)
         return;
-      const U = Math.floor(z / b), we = U * -100, je = U * b;
+      const U = Math.floor(z / g), we = U * -100, je = U * g;
       he(!0, z, je, we), Ne(z, P);
     }
   }, V = () => {
-    const I = _n(j);
-    O(I), S([I[f - 1], I[f], I[f + 1]]);
+    const E = _n(j);
+    O(E), S([E[f - 1], E[f], E[f + 1]]);
   }, me = () => {
     var T;
     if (x.current && w) {
-      const P = E - b, z = E - 1, U = w[z] && ((T = w[z]) != null && T.yearFlag) ? z - 1 : z, we = m + 100 > 0 ? 0 : m + 100;
+      const P = I - g, z = I - 1, U = w[z] && ((T = w[z]) != null && T.yearFlag) ? z - 1 : z, we = m + 100 > 0 ? 0 : m + 100;
       he(!1, U, P, we);
     }
   }, Ee = () => {
     if (x.current && w) {
-      const T = E + b, P = w[T] && w[T].yearFlag ? T + 1 : T, z = m - 100;
+      const T = I + g, P = w[T] && w[T].yearFlag ? T + 1 : T, z = m - 100;
       he(!0, P, T, z);
     }
-  }, he = (I, T, P, z) => {
-    ne(I, T), Me(), N(P), h(z), R(T);
-  }, ne = (I, T) => {
-    if (v && w) {
-      const P = Ce(I, G), z = Object.assign([], v, { [P]: w[T] });
-      S(z), ee(P), B(I ? -100 : 100), setTimeout(() => {
+  }, he = (E, T, P, z) => {
+    ne(E, T), Me(), N(P), h(z), R(T);
+  }, ne = (E, T) => {
+    if (b && w) {
+      const P = Ce(E, G), z = Object.assign([], b, { [P]: w[T] });
+      S(z), ee(P), B(E ? -100 : 100), setTimeout(() => {
         var Mt;
         const U = (Mt = $.current) == null ? void 0 : Mt.offsetWidth, we = Object.assign([], A, {
           [P]: 0,
@@ -4576,25 +4574,25 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (e
         S(je), D(we), B(0);
       }, e.transitionDuration || 300);
     }
-  }, Ce = (I, T) => {
-    const P = I ? T + 1 : T - 1;
-    return v ? P < 0 ? v.length - 1 : P % v.length : 0;
-  }, Ot = (I) => {
+  }, Ce = (E, T) => {
+    const P = E ? T + 1 : T - 1;
+    return b ? P < 0 ? b.length - 1 : P % b.length : 0;
+  }, Ot = (E) => {
     var P;
-    const T = (f - E) * I.offsetWidth + I.offsetWidth / 2 + (((P = M.current) == null ? void 0 : P.offsetWidth) || 0);
+    const T = (f - I) * E.offsetWidth + E.offsetWidth / 2 + (((P = M.current) == null ? void 0 : P.offsetWidth) || 0);
     u(T);
-  }, Ne = (I, T) => {
-    T.preventDefault(), I > f ? ne(!0, I) : I < f && ne(!1, I), R(I);
+  }, Ne = (E, T) => {
+    T.preventDefault(), E > f ? ne(!0, E) : E < f && ne(!1, E), R(E);
   }, Me = t.useCallback(() => {
-    const I = x.current, T = I && I.children[f];
-    if (I instanceof HTMLElement && T) {
-      const P = Math.round(I.offsetWidth / 150);
-      Ot(T), g(100 / P), y(P);
+    const E = x.current, T = E && E.children[f];
+    if (E instanceof HTMLElement && T) {
+      const P = Math.round(E.offsetWidth / 150);
+      Ot(T), v(100 / P), y(P);
     }
   }, []), Vn = () => ({
     transitionDuration: "300ms"
-  }), Pt = (I) => ({
-    transform: `translateX(${I}%)`,
+  }), Pt = (E) => ({
+    transform: `translateX(${E}%)`,
     transformOrigin: "left top"
   });
   return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: "k-timeline-track-wrap", ref: $, onKeyDown: Ie }, /* @__PURE__ */ t.createElement(
@@ -4633,7 +4631,7 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (e
       tabIndex: 0,
       style: { transform: `translateX(${m}%)` }
     },
-    w && w.map((I, T) => I.yearFlag ? /* @__PURE__ */ t.createElement(
+    w && w.map((E, T) => E.yearFlag ? /* @__PURE__ */ t.createElement(
       "li",
       {
         role: "none",
@@ -4641,7 +4639,7 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (e
         style: { flex: `1 0 ${de}` },
         key: T
       },
-      /* @__PURE__ */ t.createElement("span", { className: "k-timeline-flag" }, I.yearFlag)
+      /* @__PURE__ */ t.createElement("span", { className: "k-timeline-flag" }, E.yearFlag)
     ) : /* @__PURE__ */ t.createElement(
       "li",
       {
@@ -4654,7 +4652,7 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (e
         style: { flex: `1 0 ${de}` },
         key: T
       },
-      /* @__PURE__ */ t.createElement("div", { className: "k-timeline-date-wrap" }, /* @__PURE__ */ t.createElement("span", { className: "k-timeline-date" }, i.formatDate(I.date, Y))),
+      /* @__PURE__ */ t.createElement("div", { className: "k-timeline-date-wrap" }, /* @__PURE__ */ t.createElement("span", { className: "k-timeline-date" }, i.formatDate(E.date, Y))),
       /* @__PURE__ */ t.createElement(
         "span",
         {
@@ -4669,19 +4667,19 @@ const fi = (e) => e.sort((n, i) => n.date.getTime() - i.date.getTime()), _n = (e
       className: "k-timeline-scrollable-wrap",
       style: L === 0 ? { ...Pt(L) } : { ...Pt(L), ...Vn() }
     },
-    v && v.map(
-      (I, T) => /* @__PURE__ */ t.createElement(
+    b && b.map(
+      (E, T) => /* @__PURE__ */ t.createElement(
         "li",
         {
           key: T,
           className: "k-timeline-event",
           style: { transform: `translate3d(${A[T]}px, 0px, 0px)` }
         },
-        I && /* @__PURE__ */ t.createElement(
+        E && /* @__PURE__ */ t.createElement(
           Dt,
           {
             tabindex: A[T] === 0 ? 0 : -1,
-            eventData: I,
+            eventData: E,
             onActionClick: re,
             horizontal: !0,
             collapsible: !1,
@@ -4705,16 +4703,16 @@ const $n = (e) => {
     navigatable: u,
     onChange: m,
     onActionClick: h
-  } = e, p = t.useRef(null), g = t.useRef(new ct({
+  } = e, p = t.useRef(null), v = t.useRef(new ct({
     tabIndex: 0,
     root: p,
     selectors: [".k-card-vertical"]
   }));
   t.useEffect(() => {
     p.current && e.navigatable && (setTimeout(() => {
-      const f = g.current.first;
+      const f = v.current.first;
       f && f.setAttribute("tabindex", String(0));
-    }, 0), g.current.keyboardEvents = {
+    }, 0), v.current.keyboardEvents = {
       keydown: {
         Space: y,
         Enter: y
@@ -4723,28 +4721,28 @@ const $n = (e) => {
   }, [e.navigatable]), t.useEffect(() => {
     i(_n(l));
   }, []), t.useEffect(() => {
-    g.current.update();
+    v.current.update();
   });
-  const b = (f) => {
-    u && g.current && g.current.triggerKeyboardEvent(f);
-  }, y = (f, R, v) => {
-    v.preventDefault();
+  const g = (f) => {
+    u && v.current && v.current.triggerKeyboardEvent(f);
+  }, y = (f, R, b) => {
+    b.preventDefault();
     const S = f.querySelector(".k-card-title .k-event-collapse");
     S && S.click();
   };
-  let E = 0;
+  let I = 0;
   const N = ye();
-  return /* @__PURE__ */ t.createElement("ul", { ref: p, onKeyDown: b }, n && n.map((f, R) => {
-    const v = (R + E) % 2 === 0;
-    f.yearFlag && (E += 1);
-    const S = N + "-" + R, w = d ? { "k-reverse": v } : void 0;
+  return /* @__PURE__ */ t.createElement("ul", { ref: p, onKeyDown: g }, n && n.map((f, R) => {
+    const b = (R + I) % 2 === 0;
+    f.yearFlag && (I += 1);
+    const S = N + "-" + R, w = d ? { "k-reverse": b } : void 0;
     return /* @__PURE__ */ t.createElement(t.Fragment, { key: R }, f.yearFlag ? /* @__PURE__ */ t.createElement("li", { className: "k-timeline-flag-wrap" }, /* @__PURE__ */ t.createElement("span", { className: "k-timeline-flag" }, f.yearFlag)) : /* @__PURE__ */ t.createElement("li", { className: k("k-timeline-event", w) }, /* @__PURE__ */ t.createElement("div", { className: "k-timeline-date-wrap" }, /* @__PURE__ */ t.createElement("span", { className: "k-timeline-date", id: S }, s.formatDate(f.date, c))), /* @__PURE__ */ t.createElement("span", { className: "k-timeline-circle" }), /* @__PURE__ */ t.createElement(
       Dt,
       {
         id: S,
         tabindex: u ? 0 : -1,
         eventData: f,
-        alternated: d && v,
+        alternated: d && b,
         collapsible: a,
         transitionDuration: o,
         onChange: m,
@@ -4773,13 +4771,13 @@ const ti = (e) => {
     dateFormat: u,
     onChange: m,
     onActionClick: h
-  } = s, [p, g] = t.useState(), b = t.useRef(null);
+  } = s, [p, v] = t.useState(), g = t.useRef(null);
   return t.useEffect(() => {
-    b.current && g(b.current.offsetWidth);
+    g.current && v(g.current.offsetWidth);
   }, []), /* @__PURE__ */ t.createElement(
     "div",
     {
-      ref: b,
+      ref: g,
       className: k(
         "k-timeline",
         {
@@ -4867,14 +4865,14 @@ const Un = t.forwardRef((e, s) => {
     onAction: m,
     expandIcon: h,
     collapseIcon: p,
-    expandSVGIcon: g,
-    collapseSVGIcon: b
+    expandSVGIcon: v,
+    collapseSVGIcon: g
   } = e, y = t.useCallback(
     (S) => {
       q(m, S, o(), { expanded: l });
     },
     [m, l]
-  ), E = t.useCallback(
+  ), I = t.useCallback(
     (S) => {
       (S.keyCode === C.enter || S.keyCode === C.space) && (S.preventDefault(), q(m, S, o(), { expanded: l }));
     },
@@ -4883,7 +4881,7 @@ const Un = t.forwardRef((e, s) => {
     e.disabled || a(!0);
   }, [e.disabled]), f = t.useCallback(() => {
     e.disabled || a(!1);
-  }, [e.disabled]), { onFocus: R, onBlur: v } = Xn({ onFocus: N, onBlur: f });
+  }, [e.disabled]), { onFocus: R, onBlur: b } = Xn({ onFocus: N, onBlur: f });
   return /* @__PURE__ */ t.createElement(
     "div",
     {
@@ -4898,11 +4896,11 @@ const Un = t.forwardRef((e, s) => {
         }
       ),
       onFocus: R,
-      onBlur: v,
+      onBlur: b,
       style: e.style,
       id: e.id,
       dir: Vt(n, e.dir),
-      onKeyDown: c ? void 0 : E
+      onKeyDown: c ? void 0 : I
     },
     /* @__PURE__ */ t.createElement(
       "div",
@@ -4922,7 +4920,7 @@ const Un = t.forwardRef((e, s) => {
         Q,
         {
           name: l ? p ? void 0 : "chevron-up" : h ? void 0 : "chevron-down",
-          icon: l ? !b && !p ? Yt : b : !g && !h ? Zt : g,
+          icon: l ? !g && !p ? Yt : g : !v && !h ? Zt : v,
           className: k(
             l ? {
               [String(p)]: !!p