@progress/kendo-react-inputs 7.0.0-develop.8 → 7.0.0

package/index.mjs

@@ -2,58 +2,59 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------*/
+"use client";
 import * as n from "react";
 import * as r from "prop-types";
-import { useInternationalization as Vn, useLocalization as Ae, provideLocalizationService as Qe, registerForIntl as Mn, registerForLocalization as ca } from "@progress/kendo-react-intl";
-import { createPropsContext as he, validatePackage as pe, usePropsContext as Ve, guid as Le, useCustomComponent as Ue, dispatchEvent as Q, getActiveElement as Sa, classNames as G, kendoThemeMaps as ne, getTabIndex as ie, withPropsContext as je, useDir as $e, Keys as z, Draggable as Qa, IconWrap as fe, focusFirstFocusableChild as en, svgIconPropType as Ot, useDraggable as Nn, noop as Ne, useRtl as Pn, toIconName as It, useAsyncFocusBlur as Dn } from "@progress/kendo-react-common";
-import { caretAltUpIcon as Ft, caretAltDownIcon as ft, caretAltExpandIcon as Bn, caretAltLeftIcon as wa, caretAltRightIcon as Ia, checkIcon as Lt, xIcon as Tt, dropletSliderIcon as On, paletteIcon as Fn, dropletSlashIcon as Tn, starOutlineIcon as La, starIcon as Ra, hyperlinkOpenIcon as Va } from "@progress/kendo-svg-icons";
-import { FloatingLabel as da, Label as Xe } from "@progress/kendo-react-labels";
-import { Button as ge, ButtonGroup as zn } from "@progress/kendo-react-buttons";
-import { parseColor as pt, Color as tn } from "@progress/kendo-drawing";
-import { Popup as _n } from "@progress/kendo-react-popup";
-import { SignaturePad as An } from "@progress/kendo-inputs-common";
-import { Dialog as $n } from "@progress/kendo-react-dialogs";
+import { useInternationalization as Mn, useLocalization as _e, provideLocalizationService as Je, registerForIntl as Nn, registerForLocalization as da } from "@progress/kendo-react-intl";
+import { createPropsContext as he, validatePackage as pe, usePropsContext as Re, useId as Qe, useCustomComponent as qe, dispatchEvent as Q, getActiveElement as wa, classNames as G, kendoThemeMaps as ne, getTabIndex as ie, withIdHOC as et, withPropsContext as Ue, useDir as Ae, Keys as z, Draggable as en, IconWrap as fe, focusFirstFocusableChild as tn, svgIconPropType as Ft, useDraggable as Pn, noop as Me, useRtl as Dn, toIconName as Lt, useAsyncFocusBlur as Bn } from "@progress/kendo-react-common";
+import { caretAltUpIcon as Tt, caretAltDownIcon as ht, caretAltExpandIcon as On, caretAltLeftIcon as Ia, caretAltRightIcon as La, checkIcon as Rt, xIcon as zt, dropletSliderIcon as Fn, paletteIcon as Tn, dropletSlashIcon as zn, starOutlineIcon as Ra, starIcon as Va, hyperlinkOpenIcon as Ma } from "@progress/kendo-svg-icons";
+import { FloatingLabel as ua, Label as We } from "@progress/kendo-react-labels";
+import { Button as ge, ButtonGroup as _n } from "@progress/kendo-react-buttons";
+import { parseColor as mt, Color as an } from "@progress/kendo-drawing";
+import { Popup as An } from "@progress/kendo-react-popup";
+import { SignaturePad as $n } from "@progress/kendo-inputs-common";
+import { Dialog as Hn } from "@progress/kendo-react-dialogs";
 const me = {
   name: "@progress/kendo-react-inputs",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1701260084,
+  publishDate: 1702304779,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
-}, Ye = "numerictextbox.increment", Ze = "numerictextbox.decrement", zt = "slider.increment", _t = "slider.decrement", ze = "slider.dragTitle", Te = "colorGradient.r", an = "colorGradient.g", nn = "colorGradient.b", sn = "colorGradient.a", rn = "colorGradient.hex", At = "colorGradient.contrastRatio", $t = "colorGradient.colorGradientAALevel", Ht = "colorGradient.colorGradientAAALevel", Gt = "colorGradient.colorGradientPass", Kt = "colorGradient.colorGradientFail", qt = "colorGradient.hueSliderLabel", Ut = "colorGradient.alphaSliderLabel", jt = "colorGradient.toggleInputsButton", ln = "flatColorPicker.cancelBtn", on = "flatColorPicker.applyBtn", Wt = "flatColorPicker.colorGradientBtn", Xt = "flatColorPicker.colorPaletteBtn", Yt = "flatColorPicker.clearBtn", cn = "checkbox.validation", dn = "checkbox.optionalText", Hn = "radioButton.validation", Zt = "switch.validation", Jt = "colorPicker.dropdownButtonAriaLabel", Qt = "rating.ariaLabel", ea = "signature.clear", ta = "signature.maximize", aa = "signature.minimize", $ = {
-  [Ye]: "Increase value",
-  [Ze]: "Decrease value",
-  [zt]: "Increase",
-  [_t]: "Decrease",
-  [ze]: "Drag",
-  [Te]: "r",
-  [an]: "g",
-  [nn]: "b",
-  [sn]: "a",
-  [rn]: "hex",
-  [At]: "Contrast ratio",
-  [$t]: "AA",
-  [Ht]: "AAA",
-  [Gt]: "Pass",
-  [Kt]: "Fail",
-  [qt]: "Hue slider",
-  [Ut]: "Alpha slider",
-  [jt]: "Toggle colorgradient inputs",
-  [ln]: "Cancel",
-  [on]: "Apply",
-  [Wt]: "Color Gradient view",
-  [Xt]: "Color Palette view",
-  [Yt]: "Clear color value",
-  [cn]: "Please check this box if you want to proceed!",
-  [dn]: "(Optional)",
-  [Hn]: "Please select option if you want to proceed!",
-  [Zt]: "Please turn on if you want to proceed!",
-  [Jt]: "Select",
-  [Qt]: "Rating",
-  [ea]: "Clear",
-  [ta]: "Maximize",
-  [aa]: "Minimize"
-}, ht = 11111111111111e-7, Gn = 0.31111111111111117, Kn = 1, un = 1, fn = 0, ke = /\d/, hn = 15, Ma = () => ({
+}, Xe = "numerictextbox.increment", Ye = "numerictextbox.decrement", _t = "slider.increment", At = "slider.decrement", Te = "slider.dragTitle", Fe = "colorGradient.r", nn = "colorGradient.g", sn = "colorGradient.b", rn = "colorGradient.a", ln = "colorGradient.hex", $t = "colorGradient.contrastRatio", Ht = "colorGradient.colorGradientAALevel", Gt = "colorGradient.colorGradientAAALevel", Kt = "colorGradient.colorGradientPass", qt = "colorGradient.colorGradientFail", Ut = "colorGradient.hueSliderLabel", jt = "colorGradient.alphaSliderLabel", Wt = "colorGradient.toggleInputsButton", on = "flatColorPicker.cancelBtn", cn = "flatColorPicker.applyBtn", Xt = "flatColorPicker.colorGradientBtn", Yt = "flatColorPicker.colorPaletteBtn", Zt = "flatColorPicker.clearBtn", dn = "checkbox.validation", un = "checkbox.optionalText", Gn = "radioButton.validation", Jt = "switch.validation", Qt = "colorPicker.dropdownButtonAriaLabel", ea = "rating.ariaLabel", ta = "signature.clear", aa = "signature.maximize", na = "signature.minimize", $ = {
+  [Xe]: "Increase value",
+  [Ye]: "Decrease value",
+  [_t]: "Increase",
+  [At]: "Decrease",
+  [Te]: "Drag",
+  [Fe]: "r",
+  [nn]: "g",
+  [sn]: "b",
+  [rn]: "a",
+  [ln]: "hex",
+  [$t]: "Contrast ratio",
+  [Ht]: "AA",
+  [Gt]: "AAA",
+  [Kt]: "Pass",
+  [qt]: "Fail",
+  [Ut]: "Hue slider",
+  [jt]: "Alpha slider",
+  [Wt]: "Toggle colorgradient inputs",
+  [on]: "Cancel",
+  [cn]: "Apply",
+  [Xt]: "Color Gradient view",
+  [Yt]: "Color Palette view",
+  [Zt]: "Clear color value",
+  [dn]: "Please check this box if you want to proceed!",
+  [un]: "(Optional)",
+  [Gn]: "Please select option if you want to proceed!",
+  [Jt]: "Please turn on if you want to proceed!",
+  [Qt]: "Select",
+  [ea]: "Rating",
+  [ta]: "Clear",
+  [aa]: "Maximize",
+  [na]: "Minimize"
+}, pt = 11111111111111e-7, Kn = 0.31111111111111117, qn = 1, fn = 1, hn = 0, ke = /\d/, pn = 15, Na = () => ({
   eventValue: null,
   prevLooseValue: "",
   currentLooseValue: "",
@@ -63,64 +64,64 @@ const me = {
   decimalSelect: !1,
   valueIsCorrected: !1,
   valueIsOutOfRange: !1
-}), Rt = (a, t) => a !== void 0 ? a : t, ue = (a, t, e) => a === null && a === void 0 ? "" : typeof a == "string" ? a : e.formatNumber(a, t), Na = (a) => (String(a).split(".")[1] || "").length, pn = (a, t) => Math.max(Na(a), Na(t)), qn = (a) => Math.min(a, hn), mn = (a, t) => {
-  const e = qn(t);
+}), Vt = (a, t) => a !== void 0 ? a : t, ue = (a, t, e) => a === null && a === void 0 ? "" : typeof a == "string" ? a : e.formatNumber(a, t), Pa = (a) => (String(a).split(".")[1] || "").length, mn = (a, t) => Math.max(Pa(a), Pa(t)), Un = (a) => Math.min(a, pn), gn = (a, t) => {
+  const e = Un(t);
   return parseFloat(a.toFixed(e));
-}, Pa = (a, t, e, s, l, i, c) => {
-  const o = pn(a || 0, e || 0), h = Ke(mn((a || 0) + (e || 0), o), s, l);
-  t.eventValue = h, t.currentLooseValue = ue(h, i, c), t.selectionStart = t.selectionEnd = Je(t.currentLooseValue, ke);
 }, Da = (a, t, e, s, l, i, c) => {
-  const o = pn(a || 0, e || 0), h = Ke(mn((a || 0) - (e || 0), o), s, l);
-  t.eventValue = h, t.currentLooseValue = ue(h, i, c), t.selectionStart = t.selectionEnd = Je(t.currentLooseValue, ke);
-}, Ke = (a, t, e) => a == null ? a : !(a > 1 || a < 1 || a === 1) || e !== void 0 && t !== void 0 && e < t ? null : (e !== void 0 && a > e && (a = e), t !== void 0 && a < t && (a = t), a), Un = (a, t) => {
+  const o = mn(a || 0, e || 0), f = Ge(gn((a || 0) + (e || 0), o), s, l);
+  t.eventValue = f, t.currentLooseValue = ue(f, i, c), t.selectionStart = t.selectionEnd = Ze(t.currentLooseValue, ke);
+}, Ba = (a, t, e, s, l, i, c) => {
+  const o = mn(a || 0, e || 0), f = Ge(gn((a || 0) - (e || 0), o), s, l);
+  t.eventValue = f, t.currentLooseValue = ue(f, i, c), t.selectionStart = t.selectionEnd = Ze(t.currentLooseValue, ke);
+}, Ge = (a, t, e) => a == null ? a : !(a > 1 || a < 1 || a === 1) || e !== void 0 && t !== void 0 && e < t ? null : (e !== void 0 && a > e && (a = e), t !== void 0 && a < t && (a = t), a), jn = (a, t) => {
   const e = t.findIndex(([l, i]) => !!i && a.indexOf(i) === a.length - i.length);
   if (e === -1)
     return -1;
   const s = t[e][1];
   return a.length - s.length;
-}, jn = (a, t) => {
+}, Wn = (a, t) => {
   const e = t.findIndex(([l, i]) => !!l && a.indexOf(l) === 0);
   return e === -1 ? -1 : t[e][0].length;
-}, Wn = (a, t, e) => {
-  const s = Un(a, t);
+}, Xn = (a, t, e) => {
+  const s = jn(a, t);
   if (s !== -1 && e.selectionStart > s) {
     e.selectionStart = e.selectionEnd = s;
     return;
   }
   e.selectionStart > a.length && (e.selectionStart = e.selectionEnd = a.length);
-  const l = jn(a, t);
+  const l = Wn(a, t);
   l !== -1 && e.selectionStart < l && (e.selectionStart = e.selectionEnd = l), e.selectionStart === -1 && (e.selectionStart = e.selectionEnd = 0);
-}, Re = (a, t, e, s) => {
-  a.selectionStart = a.selectionEnd = t, Wn(e, s, a);
-}, Vt = (a, t, e, s) => {
-  a.eventValue = s.parseNumber(a.prevLooseValue, t), a.currentLooseValue = a.prevLooseValue, a.valueIsCorrected = !0, Re(a, a.selectionStart, a.currentLooseValue, e);
-}, Xn = (a, t) => {
+}, Le = (a, t, e, s) => {
+  a.selectionStart = a.selectionEnd = t, Xn(e, s, a);
+}, Mt = (a, t, e, s) => {
+  a.eventValue = s.parseNumber(a.prevLooseValue, t), a.currentLooseValue = a.prevLooseValue, a.valueIsCorrected = !0, Le(a, a.selectionStart, a.currentLooseValue, e);
+}, Yn = (a, t) => {
   const e = String(a.currentLooseValue), s = String(a.prevLooseValue);
   return e.split(t.minusSign).length !== s.split(t.minusSign).length && e.length === s.length + t.minusSign.length;
-}, Yn = (a, t) => {
+}, Zn = (a, t) => {
   const e = String(a.currentLooseValue), s = String(a.prevLooseValue);
   return e.indexOf(t.minusSign) === -1 && s.indexOf(t.minusSign) !== -1;
-}, Zn = (a, t) => String(a.currentLooseValue).split(t.decimal).length > 2, Jn = (a, t) => {
-  const e = t.formatNumber(ht, a), s = t.formatNumber(-ht, a), l = t.formatNumber(fn, a), i = t.formatNumber(un, a), c = at(e), o = at(s), h = at(l), d = at(i), p = nt(e), f = nt(s), m = nt(l), v = nt(i);
+}, Jn = (a, t) => String(a.currentLooseValue).split(t.decimal).length > 2, Qn = (a, t) => {
+  const e = t.formatNumber(pt, a), s = t.formatNumber(-pt, a), l = t.formatNumber(hn, a), i = t.formatNumber(fn, a), c = nt(e), o = nt(s), f = nt(l), d = nt(i), m = st(e), u = st(s), h = st(l), y = st(i);
   return {
-    positiveInfo: [c, p],
-    negativeInfo: [o, f],
-    zeroInfo: [h, m],
-    oneInfo: [d, v]
+    positiveInfo: [c, m],
+    negativeInfo: [o, u],
+    zeroInfo: [f, h],
+    oneInfo: [d, y]
   };
-}, Qn = (a, t) => {
-  const e = t.formatNumber(ht, a), s = t.formatNumber(-ht, a), l = t.formatNumber(fn, a), i = t.formatNumber(un, a), c = t.numberSymbols(), o = new RegExp(`[\\d\\${c.decimal}${c.group}]`, "g");
-  return [e, s, l, i].map((d) => d.replace(o, "")).join("").split("").filter((d, p, f) => f.indexOf(d) === p).join("");
-}, Mt = (a, t) => {
+}, es = (a, t) => {
+  const e = t.formatNumber(pt, a), s = t.formatNumber(-pt, a), l = t.formatNumber(hn, a), i = t.formatNumber(fn, a), c = t.numberSymbols(), o = new RegExp(`[\\d\\${c.decimal}${c.group}]`, "g");
+  return [e, s, l, i].map((d) => d.replace(o, "")).join("").split("").filter((d, m, u) => u.indexOf(d) === m).join("");
+}, Nt = (a, t) => {
   const e = a.indexOf(t.decimal);
-  return e > -1 ? e : Je(a, ke);
-}, na = (a) => a.split("").reverse().join(""), Je = (a, t) => a.length - na(a).search(t), at = (a) => a.split(a[a.search(ke)])[0], nt = (a) => {
-  const t = na(a);
-  return na(t.split(t[t.search(ke)])[0]);
-}, Nt = (a, t) => a.search(t), Ba = (a, t) => {
+  return e > -1 ? e : Ze(a, ke);
+}, sa = (a) => a.split("").reverse().join(""), Ze = (a, t) => a.length - sa(a).search(t), nt = (a) => a.split(a[a.search(ke)])[0], st = (a) => {
+  const t = sa(a);
+  return sa(t.split(t[t.search(ke)])[0]);
+}, Pt = (a, t) => a.search(t), Oa = (a, t) => {
   const e = a.indexOf(t);
   return e > -1 ? a.length - e - 1 : 0;
-}, Oa = (a, t, e, s, l) => {
+}, Fa = (a, t, e, s, l) => {
   const i = a.replace(l, "")[0] === "0", c = t.replace(l, "")[0] === "0";
   if (i && !c)
     return e - 1;
@@ -129,122 +130,122 @@ const me = {
   let o = 0;
   for (let d = 0; d < e; d++)
     ke.test(a.charAt(d)) && o++;
-  let h = 0;
-  for (; o > 0 && t.length > h; )
-    ke.test(t.charAt(h)) && o--, h++;
-  return h;
-}, Fa = (a, t, e) => {
-  const s = { ...a }, { prevLooseValue: l } = s, i = e.numberSymbols(), c = Qn(t, e), o = String(s.currentLooseValue), h = String(l), d = new RegExp(`[^\\d\\${i.decimal}]`, "g"), p = new RegExp(`[^\\d\\${i.decimal}\\${i.group}]`, "g"), f = new RegExp(`[\\d\\${i.decimal}\\${i.group}]`), m = o.replace(d, ""), v = Nt(o, ke), N = v === -1 ? -1 : Je(o, ke), D = o.indexOf(i.decimal), L = (o.substring(0, v) + o.substring(v, N).replace(p, "") + o.substring(N, o.length)).split("").filter((u) => c.indexOf(u) !== -1 || u.search(f) !== -1).join(""), I = e.formatNumber(Gn, t).replace(d, ""), S = I.indexOf(i.decimal), R = S > -1 ? I.length - S - 1 : 0, P = e.formatNumber(Kn, t).replace(d, ""), O = P.indexOf(i.decimal), w = O > -1 ? P.length - O - 1 : 0, {
+  let f = 0;
+  for (; o > 0 && t.length > f; )
+    ke.test(t.charAt(f)) && o--, f++;
+  return f;
+}, Ta = (a, t, e) => {
+  const s = { ...a }, { prevLooseValue: l } = s, i = e.numberSymbols(), c = es(t, e), o = String(s.currentLooseValue), f = String(l), d = new RegExp(`[^\\d\\${i.decimal}]`, "g"), m = new RegExp(`[^\\d\\${i.decimal}\\${i.group}]`, "g"), u = new RegExp(`[\\d\\${i.decimal}\\${i.group}]`), h = o.replace(d, ""), y = Pt(o, ke), M = y === -1 ? -1 : Ze(o, ke), D = o.indexOf(i.decimal), N = (o.substring(0, y) + o.substring(y, M).replace(m, "") + o.substring(M, o.length)).split("").filter((p) => c.indexOf(p) !== -1 || p.search(u) !== -1).join(""), L = e.formatNumber(Kn, t).replace(d, ""), S = L.indexOf(i.decimal), w = S > -1 ? L.length - S - 1 : 0, B = e.formatNumber(qn, t).replace(d, ""), O = B.indexOf(i.decimal), I = O > -1 ? B.length - O - 1 : 0, {
     positiveInfo: F,
-    negativeInfo: T,
-    zeroInfo: _,
+    negativeInfo: _,
+    zeroInfo: T,
     oneInfo: E
-  } = Jn(t, e), M = [F, T, _, E], H = M.findIndex((u) => u.findIndex((k) => !!k) !== -1) !== 1, q = o.length > 0 && o.length < h.length, Z = typeof t == "string" && t[0] === "p" && o && o.indexOf(i.percentSign) === -1;
+  } = Qn(t, e), V = [F, _, T, E], H = V.findIndex((p) => p.findIndex((v) => !!v) !== -1) !== 1, q = o.length > 0 && o.length < f.length, Z = typeof t == "string" && t[0] === "p" && o && o.indexOf(i.percentSign) === -1;
   if (!s.isPaste) {
     if (o === "")
       return s.eventValue = null, s.currentLooseValue = "", s;
-    if (s.currentLooseValue === i.minusSign && e.formatNumber(-0, t) !== h)
-      return s.eventValue = -0, s.currentLooseValue = ue(s.eventValue, t, e), Re(
+    if (s.currentLooseValue === i.minusSign && e.formatNumber(-0, t) !== f)
+      return s.eventValue = -0, s.currentLooseValue = ue(s.eventValue, t, e), Le(
         s,
-        Mt(s.currentLooseValue, i),
+        Nt(s.currentLooseValue, i),
         s.currentLooseValue,
-        M
+        V
       ), s;
     if (s.currentLooseValue === i.decimal) {
       s.eventValue = 0;
-      const y = ue(s.eventValue, t, e);
-      if (w === 0 && R > 0) {
-        const C = Je(y, ke);
-        s.currentLooseValue = y.substring(0, C) + i.decimal + y.substring(C);
+      const k = ue(s.eventValue, t, e);
+      if (I === 0 && w > 0) {
+        const C = Ze(k, ke);
+        s.currentLooseValue = k.substring(0, C) + i.decimal + k.substring(C);
       } else
-        s.currentLooseValue = y;
-      return Re(
+        s.currentLooseValue = k;
+      return Le(
         s,
-        Mt(s.currentLooseValue, i) + 1,
+        Nt(s.currentLooseValue, i) + 1,
         s.currentLooseValue,
-        M
+        V
       ), s;
     }
-    if (Xn(s, i)) {
-      const y = e.parseNumber(l, t);
-      s.eventValue = -(y !== null ? y : 0), s.currentLooseValue = ue(s.eventValue, t, e);
-      const C = Nt(s.currentLooseValue, ke), B = Nt(h, ke);
-      return Re(
+    if (Yn(s, i)) {
+      const k = e.parseNumber(l, t);
+      s.eventValue = -(k !== null ? k : 0), s.currentLooseValue = ue(s.eventValue, t, e);
+      const C = Pt(s.currentLooseValue, ke), P = Pt(f, ke);
+      return Le(
         s,
-        s.selectionEnd - 1 + (C - B),
+        s.selectionEnd - 1 + (C - P),
         s.currentLooseValue,
-        M
+        V
       ), s;
     }
-    if (Yn(s, i))
-      return s.eventValue = e.parseNumber(s.currentLooseValue, t), Re(
+    if (Zn(s, i))
+      return s.eventValue = e.parseNumber(s.currentLooseValue, t), Le(
         s,
         s.selectionStart,
         s.currentLooseValue,
-        M
+        V
       ), s;
-    if (Zn(s, i))
-      return Vt(s, t, M, e), s;
+    if (Jn(s, i))
+      return Mt(s, t, V, e), s;
     if (Z)
       return s.eventValue = e.parseNumber(o, t) / 100, s.currentLooseValue = ue(s.eventValue, t, e), s;
-    if (String(s.currentLooseValue).replace(/[^\d]/g, "").length > hn || m !== o && o && H && M.findIndex(([C, B]) => {
-      const j = o.indexOf(C), J = o.indexOf(B), V = j === 0, b = J === o.length - B.length, W = j + C.length !== v && v !== -1 && o[j + C.length] !== i.decimal, K = J !== N && N !== -1 && o[J - 1] !== i.decimal;
-      return C && B ? W || K ? !1 : V && b : C ? W ? !1 : V : B ? K ? !1 : b : !1;
+    if (String(s.currentLooseValue).replace(/[^\d]/g, "").length > pn || h !== o && o && H && V.findIndex(([C, P]) => {
+      const j = o.indexOf(C), J = o.indexOf(P), R = j === 0, b = J === o.length - P.length, W = j + C.length !== y && y !== -1 && o[j + C.length] !== i.decimal, K = J !== M && M !== -1 && o[J - 1] !== i.decimal;
+      return C && P ? W || K ? !1 : R && b : C ? W ? !1 : R : P ? K ? !1 : b : !1;
     }) === -1)
-      return Vt(s, t, M, e), s;
-    if (m[m.length - 1] === i.decimal && R > 0)
-      return s.eventValue = e.parseNumber(o, t), s.currentLooseValue = L, s;
-    if (s.currentLooseValue && l && (c + i.decimal + i.group).split("").findIndex((C) => o.split("").filter((B) => B === C).length < h.split("").filter((B) => B === C).length && o.length + 1 === h.length ? !(C === i.decimal && Ba(h.replace(d, ""), i.decimal) === 0) : !1) > -1)
+      return Mt(s, t, V, e), s;
+    if (h[h.length - 1] === i.decimal && w > 0)
+      return s.eventValue = e.parseNumber(o, t), s.currentLooseValue = N, s;
+    if (s.currentLooseValue && l && (c + i.decimal + i.group).split("").findIndex((C) => o.split("").filter((P) => P === C).length < f.split("").filter((P) => P === C).length && o.length + 1 === f.length ? !(C === i.decimal && Oa(f.replace(d, ""), i.decimal) === 0) : !1) > -1)
       return s.eventValue = e.parseNumber(a.prevLooseValue, t), s.currentLooseValue = a.prevLooseValue, s;
-    const k = Ba(m, i.decimal), g = m[m.length - 1] === "0";
-    if (q && g && k < w)
+    const v = Oa(h, i.decimal), g = h[h.length - 1] === "0";
+    if (q && g && v < I)
       return s.eventValue = e.parseNumber(s.currentLooseValue, t), s.currentLooseValue = ue(s.eventValue, t, e), s;
-    if (k > 0) {
-      const y = o.substring(0, D);
-      if (g && (!y || h.indexOf(y) !== 0)) {
+    if (v > 0) {
+      const k = o.substring(0, D);
+      if (g && (!k || f.indexOf(k) !== 0)) {
         s.eventValue = e.parseNumber(s.currentLooseValue, t);
         const C = ue(s.eventValue, t, e);
-        return Re(
+        return Le(
           s,
-          Oa(o, C, s.selectionEnd, q, d),
+          Fa(o, C, s.selectionEnd, q, d),
           C,
-          M
+          V
         ), s.currentLooseValue = C, s;
       }
-      if (k > R) {
-        const C = o.indexOf(i.decimal), B = o.substring(0, C) + o.substring(C, C + 1 + R) + o.substring(N, String(s.currentLooseValue).length);
-        return s.eventValue = e.parseNumber(B, t), s.currentLooseValue = B, Re(s, s.selectionStart, B, M), s;
+      if (v > w) {
+        const C = o.indexOf(i.decimal), P = o.substring(0, C) + o.substring(C, C + 1 + w) + o.substring(M, String(s.currentLooseValue).length);
+        return s.eventValue = e.parseNumber(P, t), s.currentLooseValue = P, Le(s, s.selectionStart, P, V), s;
       }
-      if (w !== R && k <= R && g)
-        return s.eventValue = e.parseNumber(s.currentLooseValue, t), s.currentLooseValue = L, s;
-      if (k < w)
+      if (I !== w && v <= w && g)
+        return s.eventValue = e.parseNumber(s.currentLooseValue, t), s.currentLooseValue = N, s;
+      if (v < I)
         return s.eventValue = e.parseNumber(s.currentLooseValue, t), s.currentLooseValue = ue(s.eventValue, t, e), s;
     }
   }
   if (s.eventValue = e.parseNumber(s.currentLooseValue, t), Z && (s.eventValue = s.eventValue / 100), typeof s.eventValue == "number") {
-    const u = ue(s.eventValue, t, e);
-    o.length === 1 ? Re(s, Mt(u, i), u, M) : Re(
+    const p = ue(s.eventValue, t, e);
+    o.length === 1 ? Le(s, Nt(p, i), p, V) : Le(
       s,
-      Oa(o, u, s.selectionEnd, q, d),
-      u,
-      M
-    ), s.currentLooseValue = u;
+      Fa(o, p, s.selectionEnd, q, d),
+      p,
+      V
+    ), s.currentLooseValue = p;
   } else
-    s.currentLooseValue = ue(e.parseNumber(m), t, e);
+    s.currentLooseValue = ue(e.parseNumber(h), t, e);
   return s;
-}, es = "Please enter a valid value!", ts = he(), _e = n.forwardRef((a, t) => {
+}, ts = "Please enter a valid value!", as = he(), ze = n.forwardRef((a, t) => {
   pe(me);
-  const e = Ve(ts, a), s = n.useMemo(() => Le(), []), l = e.id || s, i = Vn(), c = Ae(), o = n.useRef(null), h = n.useRef(), [d, p] = n.useState(!1), f = n.useRef(Ma()), m = n.useRef(!1), v = n.useRef(), N = n.useRef(e.defaultValue), D = ue(
-    f.current.focused && !e.disabled ? f.current.currentLooseValue : Rt(e.value, N.current),
+  const e = Re(as, a), s = Qe(), l = e.id || s, i = Mn(), c = _e(), o = n.useRef(null), f = n.useRef(), [d, m] = n.useState(!1), u = n.useRef(Na()), h = n.useRef(!1), y = n.useRef(), M = n.useRef(e.defaultValue), D = ue(
+    u.current.focused && !e.disabled ? u.current.currentLooseValue : Vt(e.value, M.current),
     e.format,
     i
   );
-  v.current = D;
-  const [L] = Ue(e.prefix), [I] = Ue(e.suffix);
+  y.current = D;
+  const [N] = qe(e.prefix), [L] = qe(e.suffix);
   n.useEffect(
     () => {
       o.current && o.current.setCustomValidity && o.current.setCustomValidity(
-        w().valid ? "" : e.validationMessage || es
+        I().valid ? "" : e.validationMessage || ts
       );
     }
   );
@@ -253,88 +254,88 @@ const me = {
       o.current && o.current.focus();
     },
     []
-  ), R = n.useCallback(
-    () => h.current !== void 0 ? h.current : Rt(e.value, N.current),
+  ), w = n.useCallback(
+    () => f.current !== void 0 ? f.current : Vt(e.value, M.current),
     [e.value]
-  ), P = n.useCallback(
+  ), B = n.useCallback(
     () => e.name,
     [e.name]
   ), O = n.useCallback(
     () => e.required,
     [e.required]
-  ), w = n.useCallback(
+  ), I = n.useCallback(
     () => {
-      const V = e.validationMessage !== void 0, b = R(), W = e.valid !== void 0 ? e.valid : !f.current.valueIsOutOfRange && (!O() || b != null);
+      const R = e.validationMessage !== void 0, b = w(), W = e.valid !== void 0 ? e.valid : !u.current.valueIsOutOfRange && (!O() || b != null);
       return {
-        customError: V,
+        customError: R,
         valid: W,
         valueMissing: b == null
       };
     },
-    [e.validationMessage, e.valid, R, O]
+    [e.validationMessage, e.valid, w, O]
   ), F = n.useCallback(
     () => e.validityStyles,
     [e.validityStyles]
-  ), T = n.useCallback(
+  ), _ = n.useCallback(
     () => e,
     [e]
-  ), _ = n.useCallback(
+  ), T = n.useCallback(
     () => {
-      const V = {
+      const R = {
         element: o.current,
         focus: S
       };
-      return Object.defineProperty(V, "name", { get: P }), Object.defineProperty(V, "value", { get: R }), Object.defineProperty(V, "validity", { get: w }), Object.defineProperty(V, "validityStyles", { get: F }), Object.defineProperty(V, "required", { get: O }), Object.defineProperty(V, "props", { get: T }), V;
+      return Object.defineProperty(R, "name", { get: B }), Object.defineProperty(R, "value", { get: w }), Object.defineProperty(R, "validity", { get: I }), Object.defineProperty(R, "validityStyles", { get: F }), Object.defineProperty(R, "required", { get: O }), Object.defineProperty(R, "props", { get: _ }), R;
     },
-    [P, R, w, F, O, S, T]
+    [B, w, I, F, O, S, _]
   );
-  n.useImperativeHandle(t, _);
+  n.useImperativeHandle(t, T);
   const E = n.useCallback(
     () => ({
-      eventValue: Rt(e.value, N.current),
-      prevLooseValue: v.current,
+      eventValue: Vt(e.value, M.current),
+      prevLooseValue: y.current,
       currentLooseValue: o.current.value,
       selectionStart: o.current.selectionStart,
       selectionEnd: o.current.selectionEnd,
       decimalSelect: !1,
       valueIsCorrected: !1,
       valueIsOutOfRange: !1,
-      isPaste: m.current,
-      focused: f.current.focused
+      isPaste: h.current,
+      focused: u.current.focused
     }),
     [e.value]
-  ), M = n.useCallback(
-    (V, b) => {
+  ), V = n.useCallback(
+    (R, b) => {
       if (e.disabled)
         return;
-      h.current = b.eventValue, N.current = b.eventValue;
-      const W = ue(Ke(b.eventValue, e.min, e.max), e.format, i), K = Ke(i.parseNumber(W, e.format), e.min, e.max);
-      K !== b.eventValue && (b.valueIsOutOfRange = !0, b.eventValue = K, N.current = K), e.value !== b.eventValue && Q(
+      f.current = b.eventValue, M.current = b.eventValue;
+      const W = ue(Ge(b.eventValue, e.min, e.max), e.format, i), K = Ge(i.parseNumber(W, e.format), e.min, e.max);
+      K !== b.eventValue && (b.valueIsOutOfRange = !0, b.eventValue = K, M.current = K), e.value !== b.eventValue && Q(
         e.onChange,
-        V,
-        _(),
+        R,
+        T(),
         { value: b.eventValue }
-      ), h.current = void 0, f.current = b, p((le) => !le);
+      ), f.current = void 0, u.current = b, m((le) => !le);
     },
-    [e.value, e.onChange, e.disabled, p, _]
+    [e.value, e.onChange, e.disabled, m, T]
   ), H = n.useCallback(
-    (V) => {
+    (R) => {
       const b = E();
-      m.current = !1, M(V, Fa(b, e.format, i));
+      h.current = !1, V(R, Ta(b, e.format, i));
     },
-    [e.format, e.onChange, i, M, E]
+    [e.format, e.onChange, i, V, E]
   ), q = n.useCallback(
-    (V) => {
+    (R) => {
       let b = E();
       const W = i.parseNumber(String(b.currentLooseValue), e.format);
       if (b.selectionEnd > b.selectionStart && b.selectionEnd - b.selectionStart === String(b.currentLooseValue).length) {
-        const K = i.numberSymbols(), ee = K && V.key === K.minusSign, le = K && V.key === K.decimal;
-        m.current = !ee && !le;
+        const K = i.numberSymbols(), ee = K && R.key === K.minusSign, le = K && R.key === K.decimal;
+        h.current = !ee && !le;
         return;
       }
-      switch (V.keyCode) {
+      switch (R.keyCode) {
         case 38:
-          Pa(
+          Da(
             W,
             b,
             e.step,
@@ -345,7 +346,7 @@ const me = {
           );
           break;
         case 40:
-          Da(
+          Ba(
             W,
             b,
             e.step,
@@ -358,32 +359,32 @@ const me = {
         case 13: {
           if (e.rangeOnEnter === !1)
             return;
-          const K = ue(Ke(W, e.min, e.max), e.format, i), ee = Ke(i.parseNumber(K, e.format), e.min, e.max);
+          const K = ue(Ge(W, e.min, e.max), e.format, i), ee = Ge(i.parseNumber(K, e.format), e.min, e.max);
           b.eventValue = ee, b.currentLooseValue = ue(ee, e.format, i), b.selectionStart = b.selectionEnd = b.currentLooseValue.length;
           break;
         }
         case 110: {
           const K = o.current, ee = i.numberSymbols();
-          K && (b.currentLooseValue = b.currentLooseValue.slice(0, b.selectionStart) + ee.decimal + b.currentLooseValue.slice(b.selectionEnd), b.selectionStart = b.selectionEnd = b.selectionStart + 1, b = Fa(b, e.format, i));
+          K && (b.currentLooseValue = b.currentLooseValue.slice(0, b.selectionStart) + ee.decimal + b.currentLooseValue.slice(b.selectionEnd), b.selectionStart = b.selectionEnd = b.selectionStart + 1, b = Ta(b, e.format, i));
           break;
         }
         default:
           return;
       }
-      V.preventDefault(), M(V, b);
+      R.preventDefault(), V(R, b);
     },
-    [e.format, e.min, e.max, e.step, e.onChange, e.rangeOnEnter, M, E]
+    [e.format, e.min, e.max, e.step, e.onChange, e.rangeOnEnter, V, E]
   ), Z = n.useCallback(
     () => {
-      m.current = !0;
+      h.current = !0;
     },
     []
-  ), u = n.useCallback(
-    (V) => {
+  ), p = n.useCallback(
+    (R) => {
       if (e.readOnly || e.disabled)
         return;
       const b = E();
-      Pa(
+      Da(
         i.parseNumber(String(b.currentLooseValue), e.format),
         b,
         e.step,
@@ -391,15 +392,15 @@ const me = {
         e.max,
         e.format,
         i
-      ), M(V, b);
+      ), V(R, b);
     },
-    [e.format, e.min, e.max, e.step, e.onChange, e.readOnly, e.disabled, M, E]
-  ), k = n.useCallback(
-    (V) => {
+    [e.format, e.min, e.max, e.step, e.onChange, e.readOnly, e.disabled, V, E]
+  ), v = n.useCallback(
+    (R) => {
       if (e.readOnly || e.disabled)
         return;
       const b = E();
-      Da(
+      Ba(
         i.parseNumber(String(b.currentLooseValue), e.format),
         b,
         e.step,
@@ -407,51 +408,51 @@ const me = {
         e.max,
         e.format,
         i
-      ), M(V, b);
+      ), V(R, b);
     },
-    [e.format, e.min, e.max, e.step, e.onChange, e.readOnly, e.disabled, M, E]
+    [e.format, e.min, e.max, e.step, e.onChange, e.readOnly, e.disabled, V, E]
   ), g = n.useCallback(
-    (V) => {
-      const b = Sa(document);
-      !document || b !== o.current || !o.current || e.readOnly || e.disabled || (V.nativeEvent.deltaY < 0 && u(V), V.nativeEvent.deltaY > 0 && k(V));
+    (R) => {
+      const b = wa(document);
+      !document || b !== o.current || !o.current || e.readOnly || e.disabled || (R.nativeEvent.deltaY < 0 && p(R), R.nativeEvent.deltaY > 0 && v(R));
     },
-    [u, k, e.disabled, e.readOnly]
-  ), y = n.useCallback(
-    (V) => {
-      f.current.currentLooseValue = v.current, f.current.focused = !0, Q(
+    [p, v, e.disabled, e.readOnly]
+  ), k = n.useCallback(
+    (R) => {
+      u.current.currentLooseValue = y.current, u.current.focused = !0, Q(
         e.onFocus,
-        V,
-        _(),
+        R,
+        T(),
         {}
-      ), p((b) => !b);
+      ), m((b) => !b);
     },
-    [e.onFocus, p, _]
+    [e.onFocus, m, T]
   ), C = n.useCallback(
-    (V) => {
-      f.current = Ma(), Q(
+    (R) => {
+      u.current = Na(), Q(
         e.onBlur,
-        V,
-        _(),
+        R,
+        T(),
         {}
-      ), p((b) => !b);
+      ), m((b) => !b);
     },
-    [e.onBlur, p, _]
-  ), B = n.useCallback(
-    (V) => {
+    [e.onBlur, m, T]
+  ), P = n.useCallback(
+    (R) => {
       if (document && o.current) {
-        const b = Sa(document);
-        V.preventDefault(), b !== o.current && o.current.focus();
+        const b = wa(document);
+        R.preventDefault(), b !== o.current && o.current.focus();
       }
     },
     []
   );
   n.useLayoutEffect(
     () => {
-      o.current && o.current.type !== "number" && f.current.selectionStart !== void 0 && f.current.selectionEnd !== void 0 && (o.current.selectionStart = f.current.selectionStart, o.current.selectionEnd = f.current.selectionEnd, f.current.selectionStart = void 0, f.current.selectionEnd = void 0);
+      o.current && o.current.type !== "number" && u.current.selectionStart !== void 0 && u.current.selectionEnd !== void 0 && (o.current.selectionStart = u.current.selectionStart, o.current.selectionEnd = u.current.selectionEnd, u.current.selectionStart = void 0, u.current.selectionEnd = void 0);
     },
     [d]
   );
-  const j = !F() || w().valid, J = /* @__PURE__ */ n.createElement(
+  const j = !F() || I().valid, J = /* @__PURE__ */ n.createElement(
     "span",
     {
       dir: e.dir,
@@ -471,7 +472,7 @@ const me = {
       ),
       "aria-disabled": e.disabled ? "true" : void 0
     },
-    /* @__PURE__ */ n.createElement(L, null),
+    /* @__PURE__ */ n.createElement(N, null),
     /* @__PURE__ */ n.createElement(
       "input",
       {
@@ -498,7 +499,7 @@ const me = {
         readOnly: e.readOnly,
         style: e.inputStyle,
         onChange: H,
-        onFocus: y,
+        onFocus: k,
         onBlur: C,
         onKeyDown: q,
         onPaste: Z,
@@ -506,13 +507,13 @@ const me = {
         ref: o
       }
     ),
-    /* @__PURE__ */ n.createElement(I, null),
+    /* @__PURE__ */ n.createElement(L, null),
     e.children,
     e.spinners && /* @__PURE__ */ n.createElement(
       "span",
       {
         className: "k-input-spinner k-spin-button",
-        onMouseDown: B
+        onMouseDown: P
       },
       /* @__PURE__ */ n.createElement(
         ge,
@@ -520,12 +521,12 @@ const me = {
           tabIndex: -1,
           type: "button",
           icon: "caret-alt-up",
-          svgIcon: Ft,
+          svgIcon: Tt,
           rounded: null,
           className: "k-spinner-increase",
-          "aria-label": c.toLanguageString(Ye, $[Ye]),
-          title: c.toLanguageString(Ye, $[Ye]),
-          onClick: u
+          "aria-label": c.toLanguageString(Xe, $[Xe]),
+          title: c.toLanguageString(Xe, $[Xe]),
+          onClick: p
         }
       ),
       /* @__PURE__ */ n.createElement(
@@ -534,18 +535,18 @@ const me = {
           tabIndex: -1,
           type: "button",
           icon: "caret-alt-down",
-          svgIcon: ft,
+          svgIcon: ht,
           rounded: null,
           className: "k-spinner-decrease",
-          "aria-label": c.toLanguageString(Ze, $[Ze]),
-          title: c.toLanguageString(Ze, $[Ze]),
-          onClick: k
+          "aria-label": c.toLanguageString(Ye, $[Ye]),
+          title: c.toLanguageString(Ye, $[Ye]),
+          onClick: v
         }
       )
     )
   );
   return e.label ? /* @__PURE__ */ n.createElement(
-    da,
+    ua,
     {
       label: e.label,
       editorId: l,
@@ -559,7 +560,7 @@ const me = {
     }
   ) : J;
 });
-_e.propTypes = {
+ze.propTypes = {
   value: r.number,
   defaultValue: r.number,
   step: r.number,
@@ -605,8 +606,8 @@ _e.propTypes = {
   rounded: r.oneOf([null, "small", "medium", "large", "full"]),
   fillMode: r.oneOf([null, "solid", "flat", "outline"])
 };
-_e.displayName = "KendoNumericTextBox";
-_e.defaultProps = {
+ze.displayName = "KendoNumericTextBox";
+ze.defaultProps = {
   prefix: (a) => null,
   suffix: (a) => null,
   step: 1,
@@ -625,47 +626,47 @@ _e.defaultProps = {
   rounded: "medium",
   fillMode: "solid"
 };
-const ae = (a) => a != null, se = (a, t, e) => !ae(a) || isNaN(a) || a <= t ? t : a >= e ? e : a, Pe = (a, t, e = !0) => {
+const ae = (a) => a != null, se = (a, t, e) => !ae(a) || isNaN(a) || a <= t ? t : a >= e ? e : a, Ne = (a, t, e = !0) => {
   if (["hex", "rgba"].indexOf(t) === -1)
     throw new Error(`Unsupported color output format '${t}'. The available options are 'hex' or 'rgba'.`);
   if (!ae(a))
     return;
-  const l = pt(a.trim(), e);
+  const l = mt(a.trim(), e);
   if (ae(l))
     return t === "hex" ? l.toCss() : l.toCssRgba();
-}, Pt = (a, t = !0) => {
-  const e = pt(a, t);
+}, Dt = (a, t = !0) => {
+  const e = mt(a, t);
   return ae(e) ? e.toHSV() : {};
-}, qe = (a, t = !0) => {
-  const e = pt(a, t);
+}, Ke = (a, t = !0) => {
+  const e = mt(a, t);
   return ae(e) ? e.toBytes() : {};
-}, ua = (a) => {
+}, fa = (a) => {
   const t = se(a.h, 0, 359.9), e = se(a.s, 0, 1), s = se(a.v, 0, 1), l = se(a.a, 0, 1);
-  return tn.fromHSV(t, e, s, l).toCssRgba();
-}, st = (a) => ua({ h: a, s: 1, v: 1, a: 1 }), as = (a) => {
+  return an.fromHSV(t, e, s, l).toCssRgba();
+}, rt = (a) => fa({ h: a, s: 1, v: 1, a: 1 }), ns = (a) => {
   const t = se(a.r, 0, 255), e = se(a.g, 0, 255), s = se(a.b, 0, 255), l = se(a.a, 0, 1);
-  return tn.fromBytes(t, e, s, l).toCssRgba();
-}, Ta = (a, t) => {
-  const e = se(a.r, 0, 255), s = se(a.g, 0, 255), l = se(a.b, 0, 255), i = se(a.a, 0, 1), c = se(t.r, 0, 255), o = se(t.g, 0, 255), h = se(t.b, 0, 255);
+  return an.fromBytes(t, e, s, l).toCssRgba();
+}, za = (a, t) => {
+  const e = se(a.r, 0, 255), s = se(a.g, 0, 255), l = se(a.b, 0, 255), i = se(a.a, 0, 1), c = se(t.r, 0, 255), o = se(t.g, 0, 255), f = se(t.b, 0, 255);
   return {
     r: Math.round((1 - i) * c + i * e),
     g: Math.round((1 - i) * o + i * s),
-    b: Math.round((1 - i) * h + i * l)
+    b: Math.round((1 - i) * f + i * l)
   };
-}, za = (a) => {
+}, _a = (a) => {
   let t = [a.r || 0, a.g || 0, a.b || 0].map(function(e) {
     return e /= 255, e <= 0.03928 ? e / 12.92 : Math.pow((e + 0.055) / 1.055, 2.4);
   });
   return t[0] * 0.2126 + t[1] * 0.7152 + t[2] * 0.0722;
-}, ns = (a, t) => {
+}, ss = (a, t) => {
   const e = Math.max(a, t), s = Math.min(a, t);
   return (e + 0.05) / (s + 0.05);
-}, gn = (a, t) => ns(
-  za(Ta(a, t)),
-  za(Ta(t, { r: 0, g: 0, b: 0, a: 1 }))
-), sa = class extends n.Component {
+}, bn = (a, t) => ss(
+  _a(za(a, t)),
+  _a(za(t, { r: 0, g: 0, b: 0, a: 1 }))
+), ra = class extends n.Component {
   constructor(a) {
-    super(a), this._input = null, this._inputId = Le(), this.focus = () => {
+    super(a), this._input = null, this.focus = () => {
       this._input && this._input.focus();
     }, this.isInvalid = (t) => {
       let e = !1;
@@ -691,9 +692,12 @@ const ae = (a) => a != null, se = (a, t, e) => !ae(a) || isNaN(a) || a <= t ? t
         e && e.classList.contains("k-empty") && e.classList.remove("k-empty");
       }
     }, pe(me), this.state = {
-      value: this.props.defaultValue || sa.defaultProps.defaultValue
+      value: this.props.defaultValue || ra.defaultProps.defaultValue
     };
   }
+  get _inputId() {
+    return this.props.id;
+  }
   /**
    * Gets the native input element of the Input component.
    */
@@ -736,7 +740,7 @@ const ae = (a) => a != null, se = (a, t, e) => !ae(a) || isNaN(a) || a <= t ? t
    * @hidden
    */
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : sa.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : ra.defaultProps.validityStyles;
   }
   /**
    * @hidden
@@ -764,54 +768,54 @@ const ae = (a) => a != null, se = (a, t, e) => !ae(a) || isNaN(a) || a <= t ? t
       valid: c,
       // Removed to support direct use in Form Field component
       visited: o,
-      touched: h,
+      touched: f,
       modified: d,
-      ariaLabelledBy: p,
-      ariaDescribedBy: f,
-      validityStyles: m,
-      style: v,
-      ariaLabel: N,
+      ariaLabelledBy: m,
+      ariaDescribedBy: u,
+      validityStyles: h,
+      style: y,
+      ariaLabel: M,
       ...D
-    } = this.props, L = s || this._inputId, I = !this.validityStyles || this.validity.valid, S = G(a, "k-input k-input-md k-rounded-md k-input-solid"), R = /* @__PURE__ */ n.createElement(
+    } = this.props, N = s || this._inputId, L = !this.validityStyles || this.validity.valid, S = G(a, "k-input k-input-md k-rounded-md k-input-solid"), w = /* @__PURE__ */ n.createElement(
       "input",
       {
-        "aria-labelledby": p,
-        "aria-describedby": f,
+        "aria-labelledby": m,
+        "aria-describedby": u,
         "aria-disabled": this.props.disabled || void 0,
-        "aria-invalid": !I || void 0,
-        "aria-label": N || void 0,
+        "aria-invalid": !L || void 0,
+        "aria-label": M || void 0,
         ...D,
-        style: t ? void 0 : v,
+        style: t ? void 0 : y,
         value: this.value,
-        id: L,
+        id: N,
         className: S,
         onChange: this.handleChange,
         onAnimationStart: this.handleAutoFill,
-        ref: (P) => {
-          this._input = P;
+        ref: (B) => {
+          this._input = B;
         }
       }
     );
     return t ? /* @__PURE__ */ n.createElement(
-      da,
+      ua,
       {
         label: t,
         labelClassName: e,
-        editorId: L,
+        editorId: N,
         editorValue: String(this.value),
-        editorValid: I,
+        editorValid: L,
         editorDisabled: D.disabled,
         editorPlaceholder: D.placeholder,
-        children: R,
-        style: v,
+        children: w,
+        style: y,
         dir: D.dir
       }
-    ) : R;
+    ) : w;
   }
 };
-let mt = sa;
-mt.displayName = "Input";
-mt.propTypes = {
+let gt = ra;
+gt.displayName = "Input";
+gt.propTypes = {
   label: r.string,
   labelClassName: r.string,
   validationMessage: r.string,
@@ -822,25 +826,25 @@ mt.propTypes = {
   ariaDescribedBy: r.string,
   ariaLabel: r.string
 };
-mt.defaultProps = {
+gt.defaultProps = {
   defaultValue: "",
   required: !1,
   validityStyles: !0
 };
-const ss = he(), bn = je(ss, mt);
-bn.displayName = "KendoReactInput";
-class rs extends n.Component {
+const rs = he(), vn = et(Ue(rs, gt));
+vn.displayName = "KendoReactInput";
+class is extends n.Component {
   constructor(t) {
     super(t), this.onChange = (e) => {
-      const s = e.target.value, l = Pe(s, "rgba");
+      const s = e.target.value, l = Ne(s, "rgba");
       this.setState({ hex: s }), ae(l) && this.props.onHexChange(s, l, e);
     }, this.onBlur = () => {
-      ae(Pe(this.state.hex, "rgba")) || this.setState({ hex: this.state.originalHex });
+      ae(Ne(this.state.hex, "rgba")) || this.setState({ hex: this.state.originalHex });
     }, this.state = { hex: this.props.hex, originalHex: this.props.hex };
   }
   render() {
     return /* @__PURE__ */ n.createElement(
-      bn,
+      vn,
       {
         value: this.state.hex,
         onChange: this.onChange,
@@ -853,8 +857,8 @@ class rs extends n.Component {
     return t.hex !== e.originalHex ? { hex: t.hex, originalHex: t.hex } : null;
   }
 }
-const Oe = ["rgba", "rgb", "hex"];
-class fa extends n.Component {
+const Be = ["rgba", "rgb", "hex"];
+class ha extends n.Component {
   constructor(t) {
     super(t), this.onRgbaRChange = (e) => {
       this.dispatchRgbaChange({ r: e.value }, e);
@@ -864,29 +868,29 @@ class fa extends n.Component {
       this.dispatchRgbaChange({ b: e.value }, e);
     }, this.onRgbaAChange = (e) => {
       this.dispatchRgbaChange({ a: e.value }, e);
-    }, this.state = { inputMode: t.defaultInputMode || Oe[1] };
+    }, this.state = { inputMode: t.defaultInputMode || Be[1] };
   }
   render() {
-    const t = Qe(this), e = t.toLanguageString(Te, $[rn]), s = t.toLanguageString(Te, $[Te]), l = t.toLanguageString(Te, $[an]), i = t.toLanguageString(Te, $[nn]), c = t.toLanguageString(Te, $[sn]), o = t.toLanguageString(jt, $[jt]);
+    const t = Je(this), e = t.toLanguageString(Fe, $[ln]), s = t.toLanguageString(Fe, $[Fe]), l = t.toLanguageString(Fe, $[nn]), i = t.toLanguageString(Fe, $[sn]), c = t.toLanguageString(Fe, $[rn]), o = t.toLanguageString(Wt, $[Wt]);
     return /* @__PURE__ */ n.createElement("div", { className: "k-colorgradient-inputs k-hstack" }, /* @__PURE__ */ n.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ n.createElement(
       ge,
       {
         "aria-label": o,
         fillMode: "flat",
         icon: "caret-alt-expand",
-        svgIcon: Bn,
+        svgIcon: On,
         className: "k-colorgradient-toggle-mode k-icon-button",
         onClick: this.onToggleModeChange.bind(this)
       }
     )), this.state.inputMode === "hex" && /* @__PURE__ */ n.createElement("div", { className: "k-vstack k-flex-1" }, /* @__PURE__ */ n.createElement("span", { className: "k-hex-value k-textbox k-input" }, /* @__PURE__ */ n.createElement(
-      rs,
+      is,
       {
         hex: this.props.hex,
         onHexChange: this.props.onHexChange,
         disabled: this.props.disabled
       }
-    )), /* @__PURE__ */ n.createElement(Xe, { className: "k-colorgradient-input-label" }, e)), (this.state.inputMode === "rgb" || this.state.inputMode === "rgba") && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ n.createElement(
-      _e,
+    )), /* @__PURE__ */ n.createElement(We, { className: "k-colorgradient-input-label" }, e)), (this.state.inputMode === "rgb" || this.state.inputMode === "rgba") && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ n.createElement(
+      ze,
       {
         inputType: "number",
         value: this.props.rgba.r,
@@ -898,8 +902,8 @@ class fa extends n.Component {
         onChange: this.onRgbaRChange,
         disabled: this.props.disabled
       }
-    ), /* @__PURE__ */ n.createElement(Xe, { className: "k-colorgradient-input-label" }, s)), /* @__PURE__ */ n.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ n.createElement(
-      _e,
+    ), /* @__PURE__ */ n.createElement(We, { className: "k-colorgradient-input-label" }, s)), /* @__PURE__ */ n.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ n.createElement(
+      ze,
       {
         inputType: "number",
         value: this.props.rgba.g,
@@ -911,8 +915,8 @@ class fa extends n.Component {
         onChange: this.onRgbaGChange,
         disabled: this.props.disabled
       }
-    ), /* @__PURE__ */ n.createElement(Xe, { className: "k-colorgradient-input-label" }, l)), /* @__PURE__ */ n.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ n.createElement(
-      _e,
+    ), /* @__PURE__ */ n.createElement(We, { className: "k-colorgradient-input-label" }, l)), /* @__PURE__ */ n.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ n.createElement(
+      ze,
       {
         inputType: "number",
         value: this.props.rgba.b,
@@ -924,8 +928,8 @@ class fa extends n.Component {
         onChange: this.onRgbaBChange,
         disabled: this.props.disabled
       }
-    ), /* @__PURE__ */ n.createElement(Xe, { className: "k-colorgradient-input-label" }, i))), this.state.inputMode === "rgba" && /* @__PURE__ */ n.createElement("div", { className: "k-vstack" }, this.props.opacity && /* @__PURE__ */ n.createElement(
-      _e,
+    ), /* @__PURE__ */ n.createElement(We, { className: "k-colorgradient-input-label" }, i))), this.state.inputMode === "rgba" && /* @__PURE__ */ n.createElement("div", { className: "k-vstack" }, this.props.opacity && /* @__PURE__ */ n.createElement(
+      ze,
       {
         inputType: "number",
         value: this.props.rgba.a,
@@ -938,26 +942,26 @@ class fa extends n.Component {
         onChange: this.onRgbaAChange,
         disabled: this.props.disabled
       }
-    ), this.props.opacity && /* @__PURE__ */ n.createElement(Xe, { className: "k-colorgradient-input-label" }, c)));
+    ), this.props.opacity && /* @__PURE__ */ n.createElement(We, { className: "k-colorgradient-input-label" }, c)));
   }
   dispatchRgbaChange(t, e) {
     let s = { ...this.props.rgba };
     t.r !== void 0 && (s.r = t.r), t.g !== void 0 && (s.g = t.g), t.b !== void 0 && (s.b = t.b), t.a !== void 0 && (s.a = t.a), this.props.onRgbaChange(s, e);
   }
   onToggleModeChange() {
-    const t = Oe.length - 1 === Oe.indexOf(this.state.inputMode) ? 0 : Oe.indexOf(this.state.inputMode) + 1;
+    const t = Be.length - 1 === Be.indexOf(this.state.inputMode) ? 0 : Be.indexOf(this.state.inputMode) + 1;
     if (this.props.opacity)
-      this.setState({ inputMode: Oe[t] });
+      this.setState({ inputMode: Be[t] });
     else {
-      const e = Oe[t] === "rgba" ? t + 1 : t;
-      this.setState({ inputMode: Oe[e] });
+      const e = Be[t] === "rgba" ? t + 1 : t;
+      this.setState({ inputMode: Be[e] });
     }
   }
 }
-Mn(fa);
-ca(fa);
-const vn = "data-slider-label", Ir = (a) => {
-  const t = n.useRef(null), e = $e(t), s = a.vertical ? { bottom: `${a.position}%` } : { [e === "rtl" ? "right" : "left"]: `${a.position}%` }, l = a.vertical ? "k-tick-vertical" : "k-tick-horizontal";
+Nn(ha);
+da(ha);
+const kn = "data-slider-label", Lr = (a) => {
+  const t = n.useRef(null), e = Ae(t), s = a.vertical ? { bottom: `${a.position}%` } : { [e === "rtl" ? "right" : "left"]: `${a.position}%` }, l = a.vertical ? "k-tick-vertical" : "k-tick-horizontal";
   return /* @__PURE__ */ n.createElement(
     "li",
     {
@@ -973,7 +977,7 @@ const vn = "data-slider-label", Ir = (a) => {
     a.children && /* @__PURE__ */ n.createElement(
       "span",
       {
-        [vn]: !0,
+        [kn]: !0,
         className: "k-label",
         onClick: a.onClick
       },
@@ -981,7 +985,7 @@ const vn = "data-slider-label", Ir = (a) => {
     )
   );
 };
-class gt extends n.Component {
+class bt extends n.Component {
   constructor(t) {
     super(t), this.state = {
       value: this.props.defaultValue === void 0 ? this.props.min : this.props.defaultValue,
@@ -990,7 +994,7 @@ class gt extends n.Component {
     }, this._sliderTrack = null, this._element = null, this.buttons = (e) => {
       if (!e.enabled)
         return e.children;
-      const s = this.state.dir === "rtl" ? this.props.vertical ? Ft : wa : this.props.vertical ? Ft : Ia, l = this.state.dir === "rtl" ? this.props.vertical ? ft : Ia : this.props.vertical ? ft : wa, i = this.state.dir === "rtl" ? this.props.vertical ? "caret-alt-up" : "caret-alt-left" : this.props.vertical ? "caret-alt-up" : "caret-alt-right", c = this.state.dir === "rtl" ? this.props.vertical ? "caret-alt-down" : "caret-alt-right" : this.props.vertical ? "caret-alt-down" : "caret-alt-left";
+      const s = this.state.dir === "rtl" ? this.props.vertical ? Tt : Ia : this.props.vertical ? Tt : La, l = this.state.dir === "rtl" ? this.props.vertical ? ht : La : this.props.vertical ? ht : Ia, i = this.state.dir === "rtl" ? this.props.vertical ? "caret-alt-up" : "caret-alt-left" : this.props.vertical ? "caret-alt-up" : "caret-alt-right", c = this.state.dir === "rtl" ? this.props.vertical ? "caret-alt-down" : "caret-alt-right" : this.props.vertical ? "caret-alt-down" : "caret-alt-left";
       return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
         ge,
         {
@@ -1017,7 +1021,7 @@ class gt extends n.Component {
     }, this.isLabel = (e) => {
       let s = e;
       for (; s; ) {
-        if (s.getAttribute(vn))
+        if (s.getAttribute(kn))
           return !0;
         s = s.parentElement;
       }
@@ -1062,7 +1066,7 @@ class gt extends n.Component {
    * @hidden
    */
   render() {
-    const t = Qe(this), e = (this.state.value - this.props.min) / (this.props.max - this.props.min) * 100, s = this.props.vertical ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" }, l = this.props.vertical ? { paddingTop: 0, height: "100%" } : {};
+    const t = Je(this), e = (this.state.value - this.props.min) / (this.props.max - this.props.min) * 100, s = this.props.vertical ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" }, l = this.props.vertical ? { paddingTop: 0, height: "100%" } : {};
     return /* @__PURE__ */ n.createElement(
       "div",
       {
@@ -1090,10 +1094,10 @@ class gt extends n.Component {
           enabled: this.props.buttons,
           decrement: this.decrement,
           increment: this.increment,
-          incrementTitle: t.toLanguageString(zt, $[zt]),
-          decrementTitle: t.toLanguageString(_t, $[_t])
+          incrementTitle: t.toLanguageString(_t, $[_t]),
+          decrementTitle: t.toLanguageString(At, $[At])
         },
-        /* @__PURE__ */ n.createElement(Qa, { onDrag: this.dragOver, onPress: this.dragStart }, /* @__PURE__ */ n.createElement(
+        /* @__PURE__ */ n.createElement(en, { onDrag: this.dragOver, onPress: this.dragStart }, /* @__PURE__ */ n.createElement(
           "div",
           {
             className: "k-slider-track-wrap",
@@ -1148,7 +1152,7 @@ class gt extends n.Component {
                 "aria-label": this.props.ariaLabel,
                 tabIndex: ie(this.props.tabIndex, this.props.disabled, void 0),
                 className: "k-draghandle",
-                title: t.toLanguageString(ze, $[ze]),
+                title: t.toLanguageString(Te, $[Te]),
                 style: this.props.vertical ? { bottom: "calc(" + e + "%)", zIndex: 1 } : this.state.dir === "rtl" ? { right: "calc(" + e + "% - 13px)", zIndex: 1 } : { left: "calc(" + e + "%)", zIndex: 1 }
               }
             )
@@ -1167,8 +1171,8 @@ class gt extends n.Component {
     e = Math.min(Math.max(e, this.props.min), this.props.max), this.setState({ value: e }), Q(this.props.onChange, t, this, { value: e });
   }
 }
-gt.displayName = "Slider";
-gt.propTypes = {
+bt.displayName = "Slider";
+bt.propTypes = {
   min: r.number.isRequired,
   max: r.number.isRequired,
   value: r.number,
@@ -1179,51 +1183,51 @@ gt.propTypes = {
   ariaLabel: r.string
   // TODO: validation when buttons is set to true, but no step is provided
 };
-const is = he(), ra = je(is, gt);
-ra.displayName = "KendoReactSlider";
-ca(gt);
-const He = {};
-function ls(a, t, e) {
-  He[a] = { value: t, hsva: e };
-}
+const ls = he(), ia = Ue(ls, bt);
+ia.displayName = "KendoReactSlider";
+da(bt);
+const $e = {};
 function os(a, t, e) {
-  He[a] = { value: t, rgba: e };
+  $e[a] = { value: t, hsva: e };
 }
 function cs(a, t, e) {
-  He[a] = { value: t, hex: e };
+  $e[a] = { value: t, rgba: e };
+}
+function ds(a, t, e) {
+  $e[a] = { value: t, hex: e };
 }
-function ds(a) {
-  delete He[a];
+function us(a) {
+  delete $e[a];
 }
-function us(a, t) {
+function fs(a, t) {
   if (a) {
-    const e = He[a];
+    const e = $e[a];
     return e && e.value === t ? e.hex : void 0;
   } else
     return;
 }
-function fs(a, t) {
+function hs(a, t) {
   if (a) {
-    const e = He[a];
+    const e = $e[a];
     return e && e.value === t ? e.hsva : void 0;
   } else
     return;
 }
-function hs(a, t) {
+function ps(a, t) {
   if (a) {
-    const e = He[a];
+    const e = $e[a];
     return e && e.value === t ? e.rgba : void 0;
   } else
     return;
 }
-class kn extends n.Component {
+class yn extends n.Component {
   render() {
-    const t = Qe(this), e = t.toLanguageString(At, $[At]), s = t.toLanguageString($t, $[$t]), l = t.toLanguageString(Ht, $[Ht]), i = t.toLanguageString(Gt, $[Gt]), c = t.toLanguageString(Kt, $[Kt]), o = gn(this.props.rgba, this.props.bgColor), h = 4.5.toFixed(1), d = 7 .toFixed(1), p = `${e}: ${o.toFixed(2)}`, f = `${s}: ${h}`, m = `${l}: ${d}`, v = /* @__PURE__ */ n.createElement("span", { className: "k-contrast-validation k-text-success" }, i, " ", /* @__PURE__ */ n.createElement(fe, { name: "check", icon: Lt })), N = /* @__PURE__ */ n.createElement("span", { className: "k-contrast-validation k-text-error" }, c, " ", /* @__PURE__ */ n.createElement(fe, { name: "x", icon: Tt }));
-    return /* @__PURE__ */ n.createElement("div", { className: "k-vbox k-colorgradient-color-contrast" }, /* @__PURE__ */ n.createElement("div", { className: "k-contrast-ratio" }, /* @__PURE__ */ n.createElement("span", { className: "k-contrast-ratio-text" }, p), o >= 4.5 ? /* @__PURE__ */ n.createElement("span", { className: "k-contrast-validation k-text-success" }, /* @__PURE__ */ n.createElement(fe, { name: "check", icon: Lt }), o >= 7 && /* @__PURE__ */ n.createElement(fe, { name: "check", icon: Lt })) : /* @__PURE__ */ n.createElement("span", { className: "k-contrast-validation k-text-error" }, /* @__PURE__ */ n.createElement(fe, { name: "x", icon: Tt }))), /* @__PURE__ */ n.createElement("div", null, /* @__PURE__ */ n.createElement("span", null, f), o >= 4.5 ? v : N), /* @__PURE__ */ n.createElement("div", null, /* @__PURE__ */ n.createElement("span", null, m), o >= 7 ? v : N));
+    const t = Je(this), e = t.toLanguageString($t, $[$t]), s = t.toLanguageString(Ht, $[Ht]), l = t.toLanguageString(Gt, $[Gt]), i = t.toLanguageString(Kt, $[Kt]), c = t.toLanguageString(qt, $[qt]), o = bn(this.props.rgba, this.props.bgColor), f = 4.5.toFixed(1), d = 7 .toFixed(1), m = `${e}: ${o.toFixed(2)}`, u = `${s}: ${f}`, h = `${l}: ${d}`, y = /* @__PURE__ */ n.createElement("span", { className: "k-contrast-validation k-text-success" }, i, " ", /* @__PURE__ */ n.createElement(fe, { name: "check", icon: Rt })), M = /* @__PURE__ */ n.createElement("span", { className: "k-contrast-validation k-text-error" }, c, " ", /* @__PURE__ */ n.createElement(fe, { name: "x", icon: zt }));
+    return /* @__PURE__ */ n.createElement("div", { className: "k-vbox k-colorgradient-color-contrast" }, /* @__PURE__ */ n.createElement("div", { className: "k-contrast-ratio" }, /* @__PURE__ */ n.createElement("span", { className: "k-contrast-ratio-text" }, m), o >= 4.5 ? /* @__PURE__ */ n.createElement("span", { className: "k-contrast-validation k-text-success" }, /* @__PURE__ */ n.createElement(fe, { name: "check", icon: Rt }), o >= 7 && /* @__PURE__ */ n.createElement(fe, { name: "check", icon: Rt })) : /* @__PURE__ */ n.createElement("span", { className: "k-contrast-validation k-text-error" }, /* @__PURE__ */ n.createElement(fe, { name: "x", icon: zt }))), /* @__PURE__ */ n.createElement("div", null, /* @__PURE__ */ n.createElement("span", null, u), o >= 4.5 ? y : M), /* @__PURE__ */ n.createElement("div", null, /* @__PURE__ */ n.createElement("span", null, h), o >= 7 ? y : M));
   }
 }
-ca(kn);
-const rt = (a, t) => a.length === 0 ? "" : `<path d="${a.reduce(
+da(yn);
+const it = (a, t) => a.length === 0 ? "" : `<path d="${a.reduce(
   (s, l, i, c) => i === 0 ? (
     // if first point
     `M ${l[0]},${l[1]}`
@@ -1232,33 +1236,33 @@ const rt = (a, t) => a.length === 0 ? "" : `<path d="${a.reduce(
     `${s} ${t(l, i, c)}`
   ),
   ""
-)}" fill="none" stroke="white" stroke-width="1"/>`, ps = (a, t) => {
+)}" fill="none" stroke="white" stroke-width="1"/>`, ms = (a, t) => {
   const e = t[0] - a[0], s = t[1] - a[1];
   return {
     length: Math.sqrt(Math.pow(e, 2) + Math.pow(s, 2)),
     angle: Math.atan2(s, e)
   };
-}, ms = (a) => (t, e, s, l) => {
-  const i = e || t, c = s || t, o = 0.1, h = a(i, c), d = h.angle + (l ? Math.PI : 0), p = h.length * o, f = t[0] + Math.cos(d) * p, m = t[1] + Math.sin(d) * p;
-  return [f, m];
-}, gs = (a) => (t, e, s) => {
+}, gs = (a) => (t, e, s, l) => {
+  const i = e || t, c = s || t, o = 0.1, f = a(i, c), d = f.angle + (l ? Math.PI : 0), m = f.length * o, u = t[0] + Math.cos(d) * m, h = t[1] + Math.sin(d) * m;
+  return [u, h];
+}, bs = (a) => (t, e, s) => {
   const [l, i] = a(s[e - 1], s[e - 2], t), [c, o] = a(t, s[e - 1], s[e + 1], !0);
   return `C ${l},${i} ${c},${o} ${t[0]},${t[1]}`;
-}, _a = 4.5, Aa = 7, it = 16;
-class bs extends n.Component {
+}, Aa = 4.5, $a = 7, lt = 16;
+class vs extends n.Component {
   renderSvgCurveLine() {
-    const t = this.props.metrics, e = (i, c, o, h, d) => {
-      const p = (o + h) / 2, f = Object.assign({}, this.props.hsva, { s: c / t.width, v: 1 - p / t.height }), m = gn(qe(ua(f)), qe(this.props.backgroundColor || ""));
-      return o + 0.5 > h ? m < i + 1 && m > i - 1 ? p : null : d(m, i) ? e(i, c, o, h - (h - o) / 2, d) : e(i, c, o + (h - o) / 2, h, d);
+    const t = this.props.metrics, e = (i, c, o, f, d) => {
+      const m = (o + f) / 2, u = Object.assign({}, this.props.hsva, { s: c / t.width, v: 1 - m / t.height }), h = bn(Ke(fa(u)), Ke(this.props.backgroundColor || ""));
+      return o + 0.5 > f ? h < i + 1 && h > i - 1 ? m : null : d(h, i) ? e(i, c, o, f - (f - o) / 2, d) : e(i, c, o + (f - o) / 2, f, d);
     }, s = (i, c, o = !1) => {
-      const h = [];
+      const f = [];
       for (let d = 0; d <= t.width; d += t.width / c) {
-        const p = e(i, d, 0, t.height, o ? (f, m) => f < m : (f, m) => f > m);
-        p !== null && h.push([d, p]);
+        const m = e(i, d, 0, t.height, o ? (u, h) => u < h : (u, h) => u > h);
+        m !== null && f.push([d, m]);
       }
-      return h;
-    }, l = gs(ms(ps));
-    return rt(s(_a, it), l) + rt(s(_a, it, !0), l) + rt(s(Aa, it), l) + rt(s(Aa, it, !0), l);
+      return f;
+    }, l = bs(gs(ms));
+    return it(s(Aa, lt), l) + it(s(Aa, lt, !0), l) + it(s($a, lt), l) + it(s($a, lt, !0), l);
   }
   shouldComponentUpdate(t) {
     return !(t.hsva.h === this.props.hsva.h && t.hsva.a === this.props.hsva.a && this.props.backgroundColor === t.backgroundColor);
@@ -1282,22 +1286,22 @@ class bs extends n.Component {
     );
   }
 }
-const vs = "rgba", $a = "rgba(255, 255, 255, 1)", ia = class extends n.Component {
+const ks = "rgba", Ha = "rgba(255, 255, 255, 1)", la = class extends n.Component {
   constructor(a) {
     super(a), this.wrapper = null, this.onHexChange = (e, s, l) => {
       if (this.isUncontrolled) {
-        const i = Pt(s);
-        this.setState({ hsva: i, backgroundColor: st(i.h), rgba: qe(s), hex: e });
+        const i = Dt(s);
+        this.setState({ hsva: i, backgroundColor: rt(i.h), rgba: Ke(s), hex: e });
       } else
-        cs(this.state.guid, s, e);
+        ds(this.state.guid, s, e);
       this.dispatchChangeEvent(s, l, l.nativeEvent);
     }, this.onRgbaChange = (e, s) => {
-      const l = as(e);
+      const l = ns(e);
       if (this.isUncontrolled) {
-        const i = Pt(l), c = Pe(l, "hex");
-        this.setState({ hsva: i, backgroundColor: st(i.h), rgba: e, hex: c });
+        const i = Dt(l), c = Ne(l, "hex");
+        this.setState({ hsva: i, backgroundColor: rt(i.h), rgba: e, hex: c });
       } else
-        os(this.state.guid, l, e);
+        cs(this.state.guid, l, e);
       this.dispatchChangeEvent(l, s.syntheticEvent, s.nativeEvent);
     }, this.onAlphaSliderChange = (e) => {
       this.handleHsvaChange(
@@ -1318,28 +1322,28 @@ const vs = "rgba", $a = "rgba(255, 255, 255, 1)", ia = class extends n.Component
     }, this.onGradientWrapperClick = (e) => {
       this.changePosition(e);
     }, this.changePosition = (e) => {
-      const s = this.getGradientRectMetrics(), l = e.clientX - s.left, i = e.clientY - s.top, c = se(l, 0, s.width), o = se(i, 0, s.height), h = Object.assign(
+      const s = this.getGradientRectMetrics(), l = e.clientX - s.left, i = e.clientY - s.top, c = se(l, 0, s.width), o = se(i, 0, s.height), f = Object.assign(
         {},
         this.state.hsva,
         { s: c / s.width, v: 1 - o / s.height }
       );
-      this.handleHsvaChange(h, e, e.nativeEvent);
+      this.handleHsvaChange(f, e, e.nativeEvent);
     }, this.onFocus = (e) => {
       this.props.onFocus && this.props.onFocus.call(
         void 0,
         { nativeEvent: e, target: this }
       );
     }, this.focus = () => {
-      en(this.wrapper);
+      tn(this.wrapper);
     }, pe(me);
-    const t = a.value || a.defaultValue || Pe($a, vs);
-    this.state = Object.assign({}, ia.getStateFromValue(t), { isFirstRender: !0, guid: Le() });
+    const t = a.value || a.defaultValue || Ne(Ha, ks);
+    this.state = Object.assign({}, la.getStateFromValue(t), { isFirstRender: !0, guid: this.props.id });
   }
   /**
    * @hidden
    */
   static getDerivedStateFromProps(a, t) {
-    return a.value && !t.isFirstRender ? ia.getStateFromValue(a.value, t.guid) : null;
+    return a.value && !t.isFirstRender ? la.getStateFromValue(a.value, t.guid) : null;
   }
   /**
    * @hidden
@@ -1351,7 +1355,7 @@ const vs = "rgba", $a = "rgba(255, 255, 255, 1)", ia = class extends n.Component
    * @hidden
    */
   componentWillUnmount() {
-    ds(this.state.guid);
+    us(this.state.guid);
   }
   /**
    * @hidden
@@ -1387,12 +1391,12 @@ const vs = "rgba", $a = "rgba(255, 255, 255, 1)", ia = class extends n.Component
    * @hidden
    */
   handleHsvaChange(a, t, e) {
-    const s = ua(a);
+    const s = fa(a);
     if (this.isUncontrolled) {
-      const l = Pe(s, "hex");
-      this.setState({ hsva: a, backgroundColor: st(a.h), rgba: qe(s), hex: l });
+      const l = Ne(s, "hex");
+      this.setState({ hsva: a, backgroundColor: rt(a.h), rgba: Ke(s), hex: l });
     } else
-      ls(this.state.guid, s, a);
+      os(this.state.guid, s, a);
     this.dispatchChangeEvent(s, t, e);
   }
   /**
@@ -1408,8 +1412,8 @@ const vs = "rgba", $a = "rgba(255, 255, 255, 1)", ia = class extends n.Component
    * @hidden
    */
   static getStateFromValue(a, t) {
-    ae(Pe(a, "hex")) || (a = $a);
-    const e = fs(t, a) || Pt(a), s = hs(t, a) || qe(a), l = us(t, a) || Pe(a, "hex"), i = st(e.h);
+    ae(Ne(a, "hex")) || (a = Ha);
+    const e = hs(t, a) || Dt(a), s = ps(t, a) || Ke(a), l = fs(t, a) || Ne(a, "hex"), i = rt(e.h);
     return { hsva: e, backgroundColor: i, rgba: s, hex: l };
   }
   /**
@@ -1434,7 +1438,7 @@ const vs = "rgba", $a = "rgba(255, 255, 255, 1)", ia = class extends n.Component
    * @hidden
    */
   render() {
-    const a = Qe(this), t = G("k-colorgradient", { "k-disabled": this.props.disabled }, this.props.className);
+    const a = Je(this), t = G("k-colorgradient", { "k-disabled": this.props.disabled }, this.props.className);
     return /* @__PURE__ */ n.createElement(
       "div",
       {
@@ -1451,7 +1455,7 @@ const vs = "rgba", $a = "rgba(255, 255, 255, 1)", ia = class extends n.Component
         onFocus: this.onFocus
       },
       /* @__PURE__ */ n.createElement("div", { className: "k-colorgradient-canvas k-hstack" }, /* @__PURE__ */ n.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ n.createElement(
-        Qa,
+        en,
         {
           onDrag: this.onDrag,
           onRelease: this.onRelease,
@@ -1467,14 +1471,14 @@ const vs = "rgba", $a = "rgba(255, 255, 255, 1)", ia = class extends n.Component
           this.renderRectangleDragHandle()
         )
       ), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ n.createElement(
-        bs,
+        vs,
         {
           metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
           hsva: this.state.hsva,
           backgroundColor: this.props.backgroundColor
         }
       )), /* @__PURE__ */ n.createElement("div", { className: "k-hsv-controls k-hstack" }, /* @__PURE__ */ n.createElement(
-        ra,
+        ia,
         {
           value: this.state.hsva.h,
           buttons: !1,
@@ -1485,10 +1489,10 @@ const vs = "rgba", $a = "rgba(255, 255, 255, 1)", ia = class extends n.Component
           onChange: this.onHueSliderChange,
           className: "k-hue-slider k-colorgradient-slider",
           disabled: this.props.disabled,
-          ariaLabel: a.toLanguageString(qt, $[qt])
+          ariaLabel: a.toLanguageString(Ut, $[Ut])
         }
       ), this.props.opacity && /* @__PURE__ */ n.createElement(
-        ra,
+        ia,
         {
           value: ae(this.state.hsva.a) ? this.state.hsva.a * 100 : 100,
           buttons: !1,
@@ -1496,7 +1500,7 @@ const vs = "rgba", $a = "rgba(255, 255, 255, 1)", ia = class extends n.Component
           min: 0,
           max: 100,
           step: 1,
-          ariaLabel: a.toLanguageString(Ut, $[Ut]),
+          ariaLabel: a.toLanguageString(jt, $[jt]),
           onChange: this.onAlphaSliderChange,
           className: "k-alpha-slider k-colorgradient-slider",
           disabled: this.props.disabled,
@@ -1504,7 +1508,7 @@ const vs = "rgba", $a = "rgba(255, 255, 255, 1)", ia = class extends n.Component
         }
       ))),
       /* @__PURE__ */ n.createElement(
-        fa,
+        ha,
         {
           rgba: this.state.rgba,
           onRgbaChange: this.onRgbaChange,
@@ -1516,18 +1520,18 @@ const vs = "rgba", $a = "rgba(255, 255, 255, 1)", ia = class extends n.Component
         }
       ),
       this.props.backgroundColor && /* @__PURE__ */ n.createElement(
-        kn,
+        yn,
         {
-          bgColor: qe(this.props.backgroundColor),
+          bgColor: Ke(this.props.backgroundColor),
           rgba: this.state.rgba
         }
       )
     );
   }
 };
-let bt = ia;
-bt.displayName = "ColorGradient";
-bt.propTypes = {
+let vt = la;
+vt.displayName = "ColorGradient";
+vt.propTypes = {
   defaultValue: r.string,
   value: r.string,
   onChange: r.func,
@@ -1544,14 +1548,14 @@ bt.propTypes = {
   ariaDescribedBy: r.string,
   className: r.string
 };
-bt.defaultProps = {
+vt.defaultProps = {
   opacity: !0,
   role: "textbox",
   format: "rgb"
 };
-const ks = he(), ha = je(ks, bt);
-ha.displayName = "KendoReactColorGradient";
-class ys {
+const ys = he(), pa = et(Ue(ys, vt));
+pa.displayName = "KendoReactColorGradient";
+class Cs {
   constructor() {
     this.colorRows = [];
   }
@@ -1567,7 +1571,7 @@ class ys {
   getCellCoordsFor(t) {
     if (!ae(t))
       return;
-    const e = t && pt(t, !0), s = [t];
+    const e = t && mt(t, !0), s = [t];
     ae(e) && s.push(e.toCss(), e.toCssRgba());
     for (let l = 0; l < this.colorRows.length; l++)
       for (let i = 0; i < this.colorRows[l].length; i++)
@@ -1588,7 +1592,7 @@ class ys {
     return t < 0 ? 0 : t > e ? e : t;
   }
 }
-const Cs = {
+const xs = {
   basic: {
     colors: ["#000000", "#7f7f7f", "#880015", "#ed1c24", "#ff7f27", "#fff200", "#22b14c", "#00a2e8", "#3f48cc", "#a349a4", " ffffff", "#c3c3c3", "#b97a57", "#ffaec9", "#ffc90e", "#efe4b0", "#b5e61d", "#99d9ea", "#7092be", "#c8bfe7"],
     columns: 10
@@ -1637,10 +1641,10 @@ const Cs = {
     colors: ["#000000", "#1a1a1a", "#333333", "#4d4d4d", "#666666", "#808080", "#999999", "#b3b3b3", "#cccccc", "#e6e6e6", "#f2f2f2", "#ffffff"],
     columns: 12
   }
-}, yn = 24, Ha = 10, Cn = "office";
-class vt extends n.Component {
+}, Cn = 24, Ga = 10, xn = "office";
+class kt extends n.Component {
   constructor(t) {
-    super(t), this.wrapper = null, this.paletteService = null, this.guid = Le(), this.focus = () => {
+    super(t), this.wrapper = null, this.paletteService = null, this.focus = () => {
       this.wrapper && this.wrapper.focus();
     }, this.onKeyDown = (e) => {
       switch (e.keyCode) {
@@ -1677,11 +1681,14 @@ class vt extends n.Component {
       isFirstRender: !0
     };
   }
+  get guid() {
+    return this.props.id;
+  }
   /**
    * @hidden
    */
   render() {
-    const t = this.getPaletteInfo(), e = this.paletteService = new ys();
+    const t = this.getPaletteInfo(), e = this.paletteService = new Cs();
     e.setColorMatrix(t.colors, t.columns);
     const s = e.getCellCoordsFor(this.state.selectedColor), l = e.getCellCoordsFor(this.state.focusedColor), i = G("k-colorpalette", { "k-disabled": this.props.disabled }, this.props.className);
     return t.colors.length ? /* @__PURE__ */ n.createElement(
@@ -1731,7 +1738,7 @@ class vt extends n.Component {
     this.isUncontrolled && this.setState({ selectedColor: this.state.focusedColor }), this.dispatchChangeEvent(this.state.focusedColor, t);
   }
   dispatchChangeEvent(t, e) {
-    Q(this.props.onChange, e, this, { value: t, rgbaValue: Pe(t, "rgba") });
+    Q(this.props.onChange, e, this, { value: t, rgbaValue: Ne(t, "rgba") });
   }
   get focusedColorCooridanates() {
     return this.state.focusedColor && this.paletteService ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : void 0;
@@ -1741,25 +1748,25 @@ class vt extends n.Component {
   }
   getPaletteInfo() {
     if (typeof this.props.palette == "string") {
-      const t = Cs[this.props.palette];
+      const t = xs[this.props.palette];
       return ae(t) ? {
         colors: t.colors,
-        columns: this.props.columns || t.columns || Ha
+        columns: this.props.columns || t.columns || Ga
       } : { colors: [], columns: 0 };
     } else
-      return { colors: this.props.palette || [], columns: this.props.columns || Ha };
+      return { colors: this.props.palette || [], columns: this.props.columns || Ga };
   }
   renderRows(t, e, s) {
     return t.map((l, i) => /* @__PURE__ */ n.createElement("tr", { role: "row", key: i }, this.renderColumns(l, i, e, s)));
   }
   renderColumns(t, e, s, l) {
-    const i = s !== void 0 && s.row === e, c = s && s.col, o = l !== void 0 && l.row === e, h = l && l.col, d = typeof this.props.tileSize != "number" ? this.props.tileSize : { width: this.props.tileSize, height: this.props.tileSize }, p = d.width + "px", f = d.height + "px";
-    return t.map((m, v) => {
-      const N = i && c === v, D = G(
+    const i = s !== void 0 && s.row === e, c = s && s.col, o = l !== void 0 && l.row === e, f = l && l.col, d = typeof this.props.tileSize != "number" ? this.props.tileSize : { width: this.props.tileSize, height: this.props.tileSize }, m = d.width + "px", u = d.height + "px";
+    return t.map((h, y) => {
+      const M = i && c === y, D = G(
         "k-colorpalette-tile",
         {
-          "k-selected": N,
-          "k-focus": o && h === v
+          "k-selected": M,
+          "k-focus": o && f === y
         }
       );
       return /* @__PURE__ */ n.createElement(
@@ -1767,12 +1774,12 @@ class vt extends n.Component {
         {
           role: "gridcell",
           className: D,
-          "aria-label": m,
-          "aria-selected": N ? !0 : this.props.disabled ? void 0 : !1,
-          style: { backgroundColor: m, width: p, height: f, minWidth: p },
-          onClick: (L) => this.onColorClick(m, L),
-          id: this.createCellId({ row: e, col: v }),
-          key: v
+          "aria-label": h,
+          "aria-selected": M ? !0 : this.props.disabled ? void 0 : !1,
+          style: { backgroundColor: h, width: m, height: u, minWidth: m },
+          onClick: (N) => this.onColorClick(h, N),
+          id: this.createCellId({ row: e, col: y }),
+          key: y
         }
       );
     });
@@ -1781,8 +1788,8 @@ class vt extends n.Component {
     return `${this.guid}_${t.row}_${t.col}`;
   }
 }
-vt.displayName = "ColorPalette";
-vt.propTypes = {
+kt.displayName = "ColorPalette";
+kt.propTypes = {
   palette: r.oneOfType([r.arrayOf(r.string.isRequired), r.string]),
   columns: r.number,
   tileSize: r.any,
@@ -1797,22 +1804,22 @@ vt.propTypes = {
   ariaDescribedBy: r.string,
   className: r.string
 };
-vt.defaultProps = {
-  palette: Cn,
-  tileSize: yn
+kt.defaultProps = {
+  palette: xn,
+  tileSize: Cn
 };
-const xs = he(), pa = je(xs, vt);
-pa.displayName = "KendoReactColorPalette";
-const Es = "bottom", Ss = "top", xn = (a) => {
+const Es = he(), ma = et(Ue(Es, kt));
+ma.displayName = "KendoReactColorPalette";
+const Ss = "bottom", ws = "top", En = (a) => {
   const t = a.popupSettings || {}, e = a.dir === "rtl" ? "right" : "left", s = n.useMemo(
-    () => ({ horizontal: e, vertical: Es }),
+    () => ({ horizontal: e, vertical: Ss }),
     [e]
   ), l = n.useMemo(
-    () => ({ horizontal: e, vertical: Ss }),
+    () => ({ horizontal: e, vertical: ws }),
     [e]
   );
   return /* @__PURE__ */ n.createElement(n.Fragment, null, a.input, a.button, /* @__PURE__ */ n.createElement(
-    _n,
+    An,
     {
       style: {
         ...(t || {}).style,
@@ -1830,87 +1837,87 @@ const Es = "bottom", Ss = "top", xn = (a) => {
     a.content
   ));
 };
-xn.displayName = "KendoPickerComponent";
-const ws = {
+En.displayName = "KendoPickerComponent";
+const Is = {
   opacity: !0
-}, Is = {
-  palette: Cn,
-  tileSize: yn
-}, Dt = (a) => a !== void 0, Ls = he(), ma = n.forwardRef((a, t) => {
+}, Ls = {
+  palette: xn,
+  tileSize: Cn
+}, Bt = (a) => a !== void 0, Rs = he(), ga = n.forwardRef((a, t) => {
   pe(me);
-  const e = Ve(Ls, a), s = Ae(), {
-    size: l = ct.size,
-    rounded: i = ct.rounded,
-    fillMode: c = ct.fillMode,
+  const e = Re(Rs, a), s = _e(), {
+    size: l = dt.size,
+    rounded: i = dt.rounded,
+    fillMode: c = dt.fillMode,
     popupSettings: o,
-    gradientSettings: h,
+    gradientSettings: f,
     paletteSettings: d,
-    valid: p,
-    disabled: f,
-    tabIndex: m,
-    view: v,
-    icon: N,
+    valid: m,
+    disabled: u,
+    tabIndex: h,
+    view: y,
+    icon: M,
     svgIcon: D,
-    iconClassName: L,
-    onChange: I,
+    iconClassName: N,
+    onChange: L,
     onFocus: S,
-    onBlur: R,
-    onActiveColorClick: P,
+    onBlur: w,
+    onActiveColorClick: B,
     className: O
-  } = e, w = n.useRef(null), F = n.useRef(null), T = n.useRef(null), _ = n.useRef(), E = n.useRef(null), [M, H] = n.useState(!1), [q, Z] = n.useState(e.defaultValue), [u, k] = n.useState(!1), g = Dt(e.value), y = Dt(e.open), C = g ? e.value : q, B = y ? e.open : u, j = n.useCallback(
+  } = e, I = n.useRef(null), F = n.useRef(null), _ = n.useRef(null), T = n.useRef(), E = n.useRef(null), [V, H] = n.useState(!1), [q, Z] = n.useState(e.defaultValue), [p, v] = n.useState(!1), g = Bt(e.value), k = Bt(e.open), C = g ? e.value : q, P = k ? e.open : p, j = n.useCallback(
     () => {
-      w.current && w.current.focus();
+      I.current && I.current.focus();
     },
     []
   );
   n.useImperativeHandle(t, () => ({
     // we agreed that each element will have focus method exposed
-    element: w.current,
+    element: I.current,
     actionElement: E.current,
     value: C,
     focus: j
   }), [C, j]);
   const J = n.useCallback(
     (A, xe) => {
-      y || (!A && !xe && w && w.current && w.current.focus(), k(A));
+      k || (!A && !xe && I && I.current && I.current.focus(), v(A));
     },
-    [y]
-  ), V = n.useCallback(
+    [k]
+  ), R = n.useCallback(
     (A) => {
       const { altKey: xe, keyCode: ve } = A;
       if (ve === z.esc) {
         J(!1);
         return;
       }
-      if (ve === z.enter && !y) {
-        A.preventDefault(), A.stopPropagation(), J(!B);
+      if (ve === z.enter && !k) {
+        A.preventDefault(), A.stopPropagation(), J(!P);
         return;
       }
-      xe && (ve === z.up || ve === z.down) && (A.preventDefault(), A.stopPropagation(), ve === z.up && w && w.current && (w.current.focus(), J(!1)), ve === z.down && J(!0));
+      xe && (ve === z.up || ve === z.down) && (A.preventDefault(), A.stopPropagation(), ve === z.up && I && I.current && (I.current.focus(), J(!1)), ve === z.down && J(!0));
     },
-    [B, y]
+    [P, k]
   ), b = n.useCallback(
     () => {
-      y || (F.current ? F.current.focus() : T.current && T.current.focus());
+      k || (F.current ? F.current.focus() : _.current && _.current.focus());
     },
-    [y]
+    [k]
   ), W = n.useCallback(
     () => {
-      J(!B, !0);
+      J(!P, !0);
     },
-    [B]
+    [P]
   ), K = n.useCallback(
     (A) => {
-      P && P.call(void 0, {
+      B && B.call(void 0, {
         syntheticEvent: A,
         nativeEvent: A.nativeEvent,
         value: C
       });
     },
-    [P, C]
+    [B, C]
   ), ee = n.useCallback(
     (A) => {
-      _.current ? (clearTimeout(_.current), _.current = void 0) : H(!0), S && S.call(void 0, {
+      T.current ? (clearTimeout(T.current), T.current = void 0) : H(!0), S && S.call(void 0, {
         nativeEvent: A.nativeEvent,
         syntheticEvent: A
       });
@@ -1918,31 +1925,31 @@ const ws = {
     [S]
   ), le = n.useCallback(
     () => {
-      J(!1, !0), H(!1), _.current = void 0;
+      J(!1, !0), H(!1), T.current = void 0;
     },
     []
   ), Ee = n.useCallback(
     (A) => {
-      clearTimeout(_.current), _.current = window.setTimeout(le), R && R.call(void 0, {
+      clearTimeout(T.current), T.current = window.setTimeout(le), w && w.call(void 0, {
         nativeEvent: A.nativeEvent,
         syntheticEvent: A
       });
     },
-    [R]
+    [w]
   ), oe = n.useCallback(
     (A, xe) => {
       const ve = xe ? A.rgbaValue : A.value;
-      g || Z(ve), xe && J(!1), I && I.call(void 0, {
+      g || Z(ve), xe && J(!1), L && L.call(void 0, {
         value: ve,
         nativeEvent: A.nativeEvent,
         syntheticEvent: A.syntheticEvent
       });
     },
-    [g, I]
+    [g, L]
   ), ce = n.useCallback(
     (A) => oe(A, !0),
-    [Dt, oe]
-  ), be = $e(w, e.dir), Ge = p !== !1;
+    [Bt, oe]
+  ), be = Ae(I, e.dir), He = m !== !1;
   return /* @__PURE__ */ n.createElement(
     "span",
     {
@@ -1952,8 +1959,8 @@ const ws = {
       "aria-labelledby": e.ariaLabelledBy,
       "aria-describedby": e.ariaDescribedBy,
       "aria-haspopup": "dialog",
-      "aria-expanded": B,
-      "aria-disabled": f ? "true" : void 0,
+      "aria-expanded": P,
+      "aria-disabled": u ? "true" : void 0,
       className: G(
         "k-colorpicker",
         "k-picker",
@@ -1962,27 +1969,27 @@ const ws = {
           [`k-picker-${ne.sizeMap[l] || l}`]: l,
           [`k-picker-${c}`]: c,
           [`k-rounded-${ne.roundedMap[i] || i}`]: i,
-          "k-invalid": !Ge,
-          "k-disabled": f,
-          "k-focus": M,
+          "k-invalid": !He,
+          "k-disabled": u,
+          "k-focus": V,
           className: O
         }
       ),
-      ref: w,
-      tabIndex: ie(m, f),
+      ref: I,
+      tabIndex: ie(h, u),
       title: e.title,
-      onKeyDown: V,
+      onKeyDown: R,
       onFocus: ee,
       onBlur: Ee,
       dir: be
     },
     /* @__PURE__ */ n.createElement(
-      xn,
+      En,
       {
         dir: be,
-        open: B,
+        open: P,
         onOpen: b,
-        popupAnchor: w.current || void 0,
+        popupAnchor: I.current || void 0,
         popupSettings: { ...o },
         input: /* @__PURE__ */ n.createElement("span", { onClick: K, className: "k-input-inner" }, /* @__PURE__ */ n.createElement(
           "span",
@@ -1992,12 +1999,12 @@ const ws = {
               "k-color-preview",
               {
                 "k-no-color": !C,
-                "k-icon-color-preview": N || D || L
+                "k-icon-color-preview": M || D || N
               }
             )
           },
-          L && /* @__PURE__ */ n.createElement("span", { className: G("k-color-preview-icon", L) }),
-          !L && (N || D) && /* @__PURE__ */ n.createElement(fe, { name: N, icon: D }),
+          N && /* @__PURE__ */ n.createElement("span", { className: G("k-color-preview-icon", N) }),
+          !N && (M || D) && /* @__PURE__ */ n.createElement(fe, { name: M, icon: D }),
           /* @__PURE__ */ n.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: C } })
         )),
         button: /* @__PURE__ */ n.createElement(
@@ -2009,24 +2016,24 @@ const ws = {
             className: "k-input-button",
             rounded: null,
             icon: "caret-alt-down",
-            svgIcon: ft,
-            "aria-label": s.toLanguageString(Jt, $[Jt])
+            svgIcon: ht,
+            "aria-label": s.toLanguageString(Qt, $[Qt])
           }
         ),
-        content: /* @__PURE__ */ n.createElement(n.Fragment, null, (v === "combo" || v === "gradient") && /* @__PURE__ */ n.createElement(
-          ha,
+        content: /* @__PURE__ */ n.createElement(n.Fragment, null, (y === "combo" || y === "gradient") && /* @__PURE__ */ n.createElement(
+          pa,
           {
-            ...h,
+            ...f,
             tabIndex: 0,
             ref: F,
             value: C,
             onChange: oe
           }
-        ), (v === "combo" || v === "palette") && /* @__PURE__ */ n.createElement(
-          pa,
+        ), (y === "combo" || y === "palette") && /* @__PURE__ */ n.createElement(
+          ma,
           {
             ...d,
-            ref: T,
+            ref: _,
             value: C,
             onChange: ce
           }
@@ -2035,7 +2042,7 @@ const ws = {
     )
   );
 });
-ma.propTypes = {
+ga.propTypes = {
   value: r.string,
   defaultValue: r.string,
   disabled: r.bool,
@@ -2043,7 +2050,7 @@ ma.propTypes = {
   dir: r.string,
   id: r.string,
   icon: r.string,
-  svgIcon: Ot,
+  svgIcon: Ft,
   ariaLabelledBy: r.string,
   ariaDescribedBy: r.string,
   size: r.oneOf([null, "small", "medium", "large"]),
@@ -2051,23 +2058,23 @@ ma.propTypes = {
   fillMode: r.oneOf([null, "solid", "flat", "outline"]),
   className: r.string
 };
-const ct = {
+const dt = {
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   view: "palette",
-  gradientSettings: ws,
-  paletteSettings: Is
+  gradientSettings: Is,
+  paletteSettings: Ls
 };
-ma.defaultProps = ct;
-ma.displayName = "KendoColorPicker";
-const Ga = "rgba(255, 255, 255, 1)", En = n.forwardRef((a, t) => {
+ga.defaultProps = dt;
+ga.displayName = "KendoColorPicker";
+const Ka = "rgba(255, 255, 255, 1)", Sn = n.forwardRef((a, t) => {
   pe(me);
-  const e = n.useRef(null), s = n.useRef(null), l = n.useRef(null), { defaultValue: i = Ga, showButtons: c = !0, showPreview: o = !0, showClearButton: h = !0 } = a, [d, p] = n.useState((a.view || "ColorGradient") === "ColorGradient"), [f, m] = n.useState(a.value || i), [v, N] = n.useState(a.value || i), D = a.value !== void 0 ? a.value : v;
+  const e = n.useRef(null), s = n.useRef(null), l = n.useRef(null), { defaultValue: i = Ka, showButtons: c = !0, showPreview: o = !0, showClearButton: f = !0 } = a, [d, m] = n.useState((a.view || "ColorGradient") === "ColorGradient"), [u, h] = n.useState(a.value || i), [y, M] = n.useState(a.value || i), D = a.value !== void 0 ? a.value : y;
   n.useEffect(() => {
-    m(a.value || i);
+    h(a.value || i);
   }, [a.value, i]);
-  const L = Ae(), I = n.useCallback(
+  const N = _e(), L = n.useCallback(
     () => {
       e.current && e.current.focus();
     },
@@ -2075,86 +2082,86 @@ const Ga = "rgba(255, 255, 255, 1)", En = n.forwardRef((a, t) => {
   );
   n.useImperativeHandle(e, () => ({
     element: s.current,
-    focus: I,
+    focus: L,
     props: a,
     value: D
-  }), [D, I, a]), n.useImperativeHandle(t, () => e.current);
+  }), [D, L, a]), n.useImperativeHandle(t, () => e.current);
   const S = n.useCallback(
     (E) => {
-      (E === "ColorGradient" && !d || E === "ColorPalette" && d) && p(!d);
+      (E === "ColorGradient" && !d || E === "ColorPalette" && d) && m(!d);
     },
     [d]
-  ), R = n.useCallback(
+  ), w = n.useCallback(
     (E) => {
-      if (m(i), a.onPreviewChange) {
-        const M = {
+      if (h(i), a.onPreviewChange) {
+        const V = {
           value: i,
           nativeEvent: E.nativeEvent,
           syntheticEvent: E
         };
-        a.onPreviewChange.call(void 0, M);
+        a.onPreviewChange.call(void 0, V);
       }
     },
     [i, a.onPreviewChange]
-  ), P = n.useCallback(
+  ), B = n.useCallback(
     (E) => {
-      if (m(E.value), a.onPreviewChange) {
-        const M = {
+      if (h(E.value), a.onPreviewChange) {
+        const V = {
           value: E.value,
           nativeEvent: E.nativeEvent,
           syntheticEvent: E.syntheticEvent
         };
-        a.onPreviewChange.call(void 0, M);
+        a.onPreviewChange.call(void 0, V);
       }
     },
     [a.onPreviewChange]
   ), O = n.useCallback(
     (E) => {
-      if (N(f), a.onChange) {
-        const M = {
-          value: f,
+      if (M(u), a.onChange) {
+        const V = {
+          value: u,
           nativeEvent: E.nativeEvent,
           syntheticEvent: E
         };
-        a.onChange.call(void 0, M);
+        a.onChange.call(void 0, V);
       }
     },
-    [f, a.onChange]
-  ), w = n.useCallback(
+    [u, a.onChange]
+  ), I = n.useCallback(
     () => {
-      N(Ga);
+      M(Ka);
     },
     []
   ), F = n.useCallback(
     (E) => {
-      if (m(v), a.onPreviewChange) {
-        const M = {
-          value: v,
+      if (h(y), a.onPreviewChange) {
+        const V = {
+          value: y,
           nativeEvent: E.nativeEvent,
           syntheticEvent: E
         };
-        a.onPreviewChange.call(void 0, M);
+        a.onPreviewChange.call(void 0, V);
       }
     },
-    [v, a.onPreviewChange]
-  ), T = n.useCallback(
+    [y, a.onPreviewChange]
+  ), _ = n.useCallback(
     (E) => {
       s.current && !(E.nativeEvent.target instanceof HTMLInputElement) && s.current.focus();
     },
     [s]
-  ), _ = n.useCallback(
+  ), T = n.useCallback(
     (E) => {
       var H;
-      if ((!E.relatedTarget || !((H = s.current) != null && H.contains(E.relatedTarget))) && (c || N(f), !c && a.onChange)) {
+      if ((!E.relatedTarget || !((H = s.current) != null && H.contains(E.relatedTarget))) && (c || M(u), !c && a.onChange)) {
         const q = {
-          value: f,
+          value: u,
           nativeEvent: E.nativeEvent,
           syntheticEvent: E
         };
         a.onChange.call(void 0, q);
       }
     },
-    [f, c, a.onChange]
+    [u, c, a.onChange]
   );
   return /* @__PURE__ */ n.createElement(
     "div",
@@ -2174,67 +2181,67 @@ const Ga = "rgba(255, 255, 255, 1)", En = n.forwardRef((a, t) => {
         },
         a.className
       ),
-      onBlur: _
+      onBlur: T
     },
-    /* @__PURE__ */ n.createElement(n.Fragment, null, a.header || /* @__PURE__ */ n.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ n.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, /* @__PURE__ */ n.createElement(zn, { className: "k-button-group-flat" }, /* @__PURE__ */ n.createElement(
+    /* @__PURE__ */ n.createElement(n.Fragment, null, a.header || /* @__PURE__ */ n.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ n.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, /* @__PURE__ */ n.createElement(_n, { className: "k-button-group-flat" }, /* @__PURE__ */ n.createElement(
       ge,
       {
         type: "button",
-        "aria-label": L.toLanguageString(
-          Wt,
-          $[Wt]
+        "aria-label": N.toLanguageString(
+          Xt,
+          $[Xt]
         ),
         togglable: !0,
         fillMode: "flat",
         selected: d,
         onClick: () => S("ColorGradient"),
         icon: "droplet-slider",
-        svgIcon: On
+        svgIcon: Fn
       }
     ), /* @__PURE__ */ n.createElement(
       ge,
       {
         type: "button",
-        "aria-label": L.toLanguageString(
-          Xt,
-          $[Xt]
+        "aria-label": N.toLanguageString(
+          Yt,
+          $[Yt]
         ),
         togglable: !0,
         fillMode: "flat",
         selected: !d,
         onClick: () => S("ColorPalette"),
         icon: "palette",
-        svgIcon: Fn
+        svgIcon: Tn
       }
-    ))), /* @__PURE__ */ n.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ n.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, h && /* @__PURE__ */ n.createElement(
+    ))), /* @__PURE__ */ n.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ n.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, f && /* @__PURE__ */ n.createElement(
       ge,
       {
         type: "button",
         fillMode: "flat",
-        onClick: R,
-        "aria-label": L.toLanguageString(
-          Yt,
-          $[Yt]
+        onClick: w,
+        "aria-label": N.toLanguageString(
+          Zt,
+          $[Zt]
         ),
         icon: "droplet-slash",
-        svgIcon: Tn
+        svgIcon: zn
       }
-    ), o && /* @__PURE__ */ n.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ n.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: f } }), /* @__PURE__ */ n.createElement("span", { className: "k-coloreditor-current-color k-color-preview", style: { background: v }, onClick: F })))), /* @__PURE__ */ n.createElement("div", { className: "k-coloreditor-views k-vstack" }, d ? /* @__PURE__ */ n.createElement(
-      ha,
+    ), o && /* @__PURE__ */ n.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ n.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: u } }), /* @__PURE__ */ n.createElement("span", { className: "k-coloreditor-current-color k-color-preview", style: { background: y }, onClick: F })))), /* @__PURE__ */ n.createElement("div", { className: "k-coloreditor-views k-vstack" }, d ? /* @__PURE__ */ n.createElement(
+      pa,
       {
         ref: l,
         role: "none",
         tabIndex: -1,
         ariaLabel: void 0,
-        value: f,
-        onChange: P,
-        onFocus: T,
+        value: u,
+        onChange: B,
+        onFocus: _,
         opacity: a.opacity,
         format: a.format
       }
-    ) : /* @__PURE__ */ n.createElement(pa, { ariaDisabled: !0, ariaLabelledBy: "required_label", value: f, onChange: P, onFocus: T })), c && /* @__PURE__ */ n.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end" }, /* @__PURE__ */ n.createElement(ge, { type: "button", className: "k-coloreditor-cancel", onClick: w }, $[ln]), /* @__PURE__ */ n.createElement(ge, { type: "button", className: "k-coloreditor-apply k-primary", onClick: O }, $[on])))
+    ) : /* @__PURE__ */ n.createElement(ma, { ariaDisabled: !0, ariaLabelledBy: "required_label", value: u, onChange: B, onFocus: _ })), c && /* @__PURE__ */ n.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end" }, /* @__PURE__ */ n.createElement(ge, { type: "button", className: "k-coloreditor-cancel", onClick: I }, $[on]), /* @__PURE__ */ n.createElement(ge, { type: "button", className: "k-coloreditor-apply k-primary", onClick: O }, $[cn])))
   );
-}), Rs = {
+}), Vs = {
   id: r.string,
   style: r.any,
   className: r.string,
@@ -2254,9 +2261,9 @@ const Ga = "rgba(255, 255, 255, 1)", En = n.forwardRef((a, t) => {
   showPreview: r.bool,
   showButtons: r.bool
 };
-En.displayName = "KendoFlatColorPicker";
-En.propTypes = Rs;
-var De = /* @__PURE__ */ ((a) => (a[a.Literal = 0] = "Literal", a[a.Mask = 1] = "Mask", a[a.Undefined = 2] = "Undefined", a))(De || {});
+Sn.displayName = "KendoFlatColorPicker";
+Sn.propTypes = Vs;
+var Pe = /* @__PURE__ */ ((a) => (a[a.Literal = 0] = "Literal", a[a.Mask = 1] = "Mask", a[a.Undefined = 2] = "Undefined", a))(Pe || {});
 class Y {
   constructor(t, e, s = 2) {
     this.value = t, this.rest = e, this.type = s;
@@ -2279,7 +2286,7 @@ class Y {
     return `Result({ value: '${this.value}', rest: ${this.rest} })`;
   }
 }
-class Ka {
+class qa {
   constructor(t = [], e = []) {
     this.input = t, this.control = e, this.inputCursor = 0, this.controlCursor = 0;
   }
@@ -2309,13 +2316,13 @@ class Ka {
     this.inputCursor++, this.controlCursor++;
   }
 }
-const qa = (a) => (a || "").split(""), Vs = "\\";
+const Ua = (a) => (a || "").split(""), Ms = "\\";
 class Ce {
   constructor(t) {
     this.parse = t;
   }
   run(t, e = "") {
-    return t instanceof Ka ? this.parse(t) : this.parse(new Ka(qa(t), qa(e)));
+    return t instanceof qa ? this.parse(t) : this.parse(new qa(Ua(t), Ua(e)));
   }
   // map :: Functor f => f a ~> (a -> b) -> f b
   map(t) {
@@ -2326,23 +2333,23 @@ class Ce {
     return new Ce((e) => this.parse(e).chain((s, l) => t(s).run(l)));
   }
   isLiteral(t) {
-    return this.run(t).type === De.Literal;
+    return this.run(t).type === Pe.Literal;
   }
 }
-const Ms = (a) => (t) => new Ce((e) => {
+const Ns = (a) => (t) => new Ce((e) => {
   const { prompt: s, promptPlaceholder: l } = a;
   for (; !e.eof(); ) {
     const { char: i, control: c } = e.peek();
     if (i === c && c === s)
-      return e.eat(), new Y(s, e, De.Mask);
+      return e.eat(), new Y(s, e, Pe.Mask);
     if (t.test(i))
-      return e.eat(), new Y(i, e, De.Mask);
+      return e.eat(), new Y(i, e, Pe.Mask);
     if (i === l)
-      return e.eat(), new Y(s, e, De.Mask);
+      return e.eat(), new Y(s, e, Pe.Mask);
     e.eat_input();
   }
-  return e.eat(), new Y(s, e, De.Mask);
-}), Ns = (a) => new Ce((t) => t.peek().char === a ? (t.eat(), new Y(a, t, De.Literal)) : new Y(a, t, De.Literal)), Ps = (a) => (t) => new Ce((e) => {
+  return e.eat(), new Y(s, e, Pe.Mask);
+}), Ps = (a) => new Ce((t) => t.peek().char === a ? (t.eat(), new Y(a, t, Pe.Literal)) : new Y(a, t, Pe.Literal)), Ds = (a) => (t) => new Ce((e) => {
   for (; !e.eof(); ) {
     const { char: s, control: l } = e.peek();
     if (s === a && l === a)
@@ -2352,29 +2359,29 @@ const Ms = (a) => (t) => new Ce((e) => {
     e.eat_input();
   }
   return e.eat(), new Y("", e);
-}), Ds = (a) => new Ce((t) => {
+}), Bs = (a) => new Ce((t) => {
   if (t.eof())
     return new Y("", t);
   const { char: e } = t.peek();
   return e === a && t.eat(), new Y(a, t);
-}), lt = (a, t) => new Ce((e) => {
+}), ot = (a, t) => new Ce((e) => {
   let { char: s } = e.next();
   const l = a[s];
-  return s === Vs ? (s = e.next().char, new Y(t.literal(s), e)) : l ? new Y(t.mask(l), e) : new Y(t.literal(s), e);
-}), Ua = (a) => new Ce((t) => {
+  return s === Ms ? (s = e.next().char, new Y(t.literal(s), e)) : l ? new Y(t.mask(l), e) : new Y(t.literal(s), e);
+}), ja = (a) => new Ce((t) => {
   const { prompt: e, promptPlaceholder: s } = a;
   let { char: l } = t.next();
   return l === e ? new Y(s, t) : new Y(l, t);
-}), ja = (a) => new Ce((t) => {
+}), Wa = (a) => new Ce((t) => {
   let { char: e } = t.next();
   return a ? new Y(e, t) : new Y("", t);
-}), Bs = (a) => new Ce((t) => new Y(a, t)), Os = (a, t) => a.chain((e) => t.map((s) => e.concat([s]))), Fe = (a) => a.reduce((t, e) => Os(t, e), Bs([])), ot = (a) => new Ce((t) => {
+}), Os = (a) => new Ce((t) => new Y(a, t)), Fs = (a, t) => a.chain((e) => t.map((s) => e.concat([s]))), Oe = (a) => a.reduce((t, e) => Fs(t, e), Os([])), ct = (a) => new Ce((t) => {
   let e = new Y([], t);
   for (; !t.eof(); )
     e = e.concat(a.run(t));
   return e;
 });
-class Fs {
+class Ts {
   constructor() {
     this.rules = {}, this.prompt = "_", this.mask = "", this.promptPlaceholder = " ", this.includeLiterals = !1, this.maskTokens = [], this.unmaskTokens = [], this.rawTokens = [], this.validationTokens = [];
   }
@@ -2383,13 +2390,13 @@ class Fs {
   }
   validationValue(t = "") {
     let e = t;
-    return Fe(this.validationTokens).run(t).fold((s) => {
+    return Oe(this.validationTokens).run(t).fold((s) => {
       e = s.join("");
     }), e;
   }
   rawValue(t = "") {
     let e = t;
-    return this.rawTokens.length && Fe(this.rawTokens).run(t).fold((s) => {
+    return this.rawTokens.length && Oe(this.rawTokens).run(t).fold((s) => {
       e = s.join("");
     }), e;
   }
@@ -2398,7 +2405,7 @@ class Fs {
    */
   maskRaw(t = "") {
     let e = t;
-    return this.maskTokens.length && Fe(this.maskTokens).run(t).fold((s) => {
+    return this.maskTokens.length && Oe(this.maskTokens).run(t).fold((s) => {
       e = s.join("");
     }), e;
   }
@@ -2407,9 +2414,9 @@ class Fs {
   }
   maskInRange(t, e, s, l) {
     let i = "", c = l;
-    const o = e.split("").slice(0, s), h = e.split("").slice(l);
-    return Fe(this.maskTokens.slice(s, l)).run(t).fold((d) => {
-      i = o.concat(d).concat(h).join("");
+    const o = e.split("").slice(0, s), f = e.split("").slice(l);
+    return Oe(this.maskTokens.slice(s, l)).run(t).fold((d) => {
+      i = o.concat(d).concat(f).join("");
     }), {
       selection: c,
       value: i
@@ -2417,8 +2424,8 @@ class Fs {
   }
   maskRemoved(t, e, s) {
     let l = "", i = s;
-    const c = t.split("").slice(s), o = t.split("").slice(0, s).join(""), h = this.maskTokens.length - (t.length - s);
-    return Fe(this.maskTokens.slice(0, h)).run(o, e).fold((d) => {
+    const c = t.split("").slice(s), o = t.split("").slice(0, s).join(""), f = this.maskTokens.length - (t.length - s);
+    return Oe(this.maskTokens.slice(0, f)).run(o, e).fold((d) => {
       i = this.adjustPosition(d, i), l = d.concat(c).join("");
     }), {
       selection: i,
@@ -2432,10 +2439,10 @@ class Fs {
   maskInserted(t, e, s) {
     let l = "", i = s;
     const c = t.slice(0, s);
-    return Fe(this.unmaskTokens).run(c, e).chain((o) => {
+    return Oe(this.unmaskTokens).run(c, e).chain((o) => {
       i = o.join("").length;
-      const h = e.slice(i);
-      return Fe(this.maskTokens).run(o.join("") + h, e);
+      const f = e.slice(i);
+      return Oe(this.maskTokens).run(o.join("") + f, e);
     }).fold((o) => {
       l = o.join("");
     }), {
@@ -2446,43 +2453,43 @@ class Fs {
   get maskTokenCreator() {
     const { prompt: t, promptPlaceholder: e } = this;
     return {
-      literal: (s) => Ns(s),
-      mask: (s) => Ms({ prompt: t, promptPlaceholder: e })(s)
+      literal: (s) => Ps(s),
+      mask: (s) => Ns({ prompt: t, promptPlaceholder: e })(s)
     };
   }
   get unmaskTokenCreator() {
     return {
-      literal: (t) => Ds(t),
-      mask: (t) => Ps(this.prompt)(t)
+      literal: (t) => Bs(t),
+      mask: (t) => Ds(this.prompt)(t)
     };
   }
   get rawTokenCreator() {
     const { prompt: t, promptPlaceholder: e, includeLiterals: s } = this;
     return {
-      literal: (l) => ja(s),
-      mask: (l) => Ua({ prompt: t, promptPlaceholder: e })
+      literal: (l) => Wa(s),
+      mask: (l) => ja({ prompt: t, promptPlaceholder: e })
     };
   }
   get validationTokenCreator() {
     const { prompt: t } = this;
     return {
-      literal: (e) => ja(!1),
-      mask: (e) => Ua({ prompt: t, promptPlaceholder: "" })
+      literal: (e) => Wa(!1),
+      mask: (e) => ja({ prompt: t, promptPlaceholder: "" })
     };
   }
   tokenize() {
-    ot(lt(this.rules, this.maskTokenCreator)).run(this.mask).fold((t, e) => {
+    ct(ot(this.rules, this.maskTokenCreator)).run(this.mask).fold((t, e) => {
       this.maskTokens = t;
-    }), ot(lt(this.rules, this.unmaskTokenCreator)).run(this.mask).fold((t, e) => {
+    }), ct(ot(this.rules, this.unmaskTokenCreator)).run(this.mask).fold((t, e) => {
       this.unmaskTokens = t;
-    }), ot(lt(this.rules, this.rawTokenCreator)).run(this.mask).fold((t, e) => {
+    }), ct(ot(this.rules, this.rawTokenCreator)).run(this.mask).fold((t, e) => {
       this.rawTokens = t;
-    }), ot(lt(this.rules, this.validationTokenCreator)).run(this.mask).fold((t, e) => {
+    }), ct(ot(this.rules, this.validationTokenCreator)).run(this.mask).fold((t, e) => {
       this.validationTokens = t;
     });
   }
 }
-const Sn = {
+const wn = {
   "#": /[\d\s\+\-]/,
   "&": /[\S]/,
   0: /[\d]/,
@@ -2492,7 +2499,7 @@ const Sn = {
   C: /./,
   L: /[a-zA-Z]/,
   a: /[a-zA-Z0-9\s]/
-}, Wa = () => !1, Ts = (a, t) => a.includeLiterals !== t.includeLiterals || a.mask !== t.mask || a.prompt !== t.prompt || a.promptPlaceholder !== t.promptPlaceholder || !zs(a.rules, t.rules), zs = (a, t) => {
+}, Xa = () => !1, zs = (a, t) => a.includeLiterals !== t.includeLiterals || a.mask !== t.mask || a.prompt !== t.prompt || a.promptPlaceholder !== t.promptPlaceholder || !_s(a.rules, t.rules), _s = (a, t) => {
   if (!!a != !!t)
     return !1;
   if (a === t || !a || !t)
@@ -2511,9 +2518,9 @@ const Sn = {
       }
   }
   return e;
-}, Me = class extends n.Component {
+}, Ve = class extends n.Component {
   constructor(a) {
-    super(a), this.state = {}, this._inputId = `k-${Le()}`, this._service = new Fs(), this._isPasted = !1, this._selection = [null, null], this._input = null, this.focus = () => {
+    super(a), this.state = {}, this._inputId = `k-${this.props.id}`, this._service = new Ts(), this._isPasted = !1, this._selection = [null, null], this._input = null, this.focus = () => {
       this._input && this._input.focus();
     }, this.pasteHandler = (t) => {
       const { selectionStart: e, selectionEnd: s } = t.target;
@@ -2528,7 +2535,7 @@ const Sn = {
       let o;
       if (this._isPasted) {
         this._isPasted = !1;
-        const h = c.length - i, d = s.length - h;
+        const f = c.length - i, d = s.length - f;
         o = this._service.maskInRange(s.slice(l, d), c, l, i);
       } else
         o = this._service.maskInput(s, c, e.selectionStart || 0);
@@ -2612,13 +2619,13 @@ const Sn = {
    * @hidden
    */
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : Me.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : Ve.defaultProps.validityStyles;
   }
   /**
    * @hidden
    */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : Me.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : Ve.defaultProps.required;
   }
   /**
    * Gets the `name` property of the MaskedTextBox.
@@ -2635,7 +2642,7 @@ const Sn = {
       const l = a.selection, i = this.props.selection;
       (!l && i || l && i && (l.start !== i.start || l.end !== i.end)) && (e = i.start, s = i.end), e !== null && s !== null && this.element.setSelectionRange(e, s);
     }
-    Ts(a, this.props) && this.updateService(), this.setValidity();
+    zs(a, this.props) && this.updateService(), this.setValidity();
   }
   /**
    * @hidden
@@ -2648,13 +2655,13 @@ const Sn = {
    */
   render() {
     const {
-      size: a = Me.defaultProps.size,
-      fillMode: t = Me.defaultProps.fillMode,
-      rounded: e = Me.defaultProps.rounded
+      size: a = Ve.defaultProps.size,
+      fillMode: t = Ve.defaultProps.fillMode,
+      rounded: e = Ve.defaultProps.rounded
     } = this.props, s = this.props.id || this._inputId, l = !this.validityStyles || this.validity.valid, i = this.props.style || {}, {
-      prefix: c = Me.defaultProps.prefix,
-      suffix: o = Me.defaultProps.suffix
-    } = this.props, [h] = Ue(c), [d] = Ue(o), p = /* @__PURE__ */ n.createElement(
+      prefix: c = Ve.defaultProps.prefix,
+      suffix: o = Ve.defaultProps.suffix
+    } = this.props, [f] = qe(c), [d] = qe(o), m = /* @__PURE__ */ n.createElement(
       "span",
       {
         dir: this.props.dir,
@@ -2672,7 +2679,7 @@ const Sn = {
         ),
         style: this.props.label ? i : { width: this.props.width, ...i }
       },
-      /* @__PURE__ */ n.createElement(h, null),
+      /* @__PURE__ */ n.createElement(f, null),
       /* @__PURE__ */ n.createElement(
         "input",
         {
@@ -2694,19 +2701,19 @@ const Sn = {
           disabled: this.props.disabled || void 0,
           readOnly: this.props.readonly || void 0,
           placeholder: this.props.placeholder,
-          ref: (f) => this._input = f,
+          ref: (u) => this._input = u,
           onChange: this.onChangeHandler,
           onPaste: this.pasteHandler,
           onFocus: this.focusHandler,
           onBlur: this.blurHandler,
-          onDragStart: Wa,
-          onDrop: Wa
+          onDragStart: Xa,
+          onDrop: Xa
         }
       ),
       /* @__PURE__ */ n.createElement(d, null)
     );
     return this.props.label ? /* @__PURE__ */ n.createElement(
-      da,
+      ua,
       {
         label: this.props.label,
         editorId: s,
@@ -2714,11 +2721,11 @@ const Sn = {
         editorValid: l,
         editorDisabled: this.props.disabled,
         editorPlaceholder: this.props.placeholder,
-        children: p,
+        children: m,
         style: { width: this.props.width },
         dir: this.props.dir
       }
-    ) : p;
+    ) : m;
   }
   triggerOnChange(a, t) {
     if (this.setState({
@@ -2747,12 +2754,12 @@ const Sn = {
     this._service.update(t);
   }
   get rules() {
-    return Object.assign({}, Sn, this.props.rules);
+    return Object.assign({}, wn, this.props.rules);
   }
 };
-let kt = Me;
-kt.displayName = "MaskedTextBox";
-kt.propTypes = {
+let yt = Ve;
+yt.displayName = "MaskedTextBox";
+yt.propTypes = {
   value: r.string,
   defaultValue: r.string,
   placeholder: r.string,
@@ -2799,12 +2806,12 @@ kt.propTypes = {
   rounded: r.oneOf([null, "small", "medium", "large", "full"]),
   fillMode: r.oneOf([null, "solid", "flat", "outline"])
 };
-kt.defaultProps = {
+yt.defaultProps = {
   prompt: "_",
   promptPlaceholder: " ",
   includeLiterals: !1,
   maskValidation: !0,
-  rules: Sn,
+  rules: wn,
   required: !1,
   validityStyles: !0,
   prefix: (a) => null,
@@ -2813,10 +2820,10 @@ kt.defaultProps = {
   rounded: "medium",
   fillMode: "solid"
 };
-const _s = he(), As = je(_s, kt);
-As.displayName = "KendoReactMaskedTextBox";
+const As = he(), $s = et(Ue(As, yt));
+$s.displayName = "KendoReactMaskedTextBox";
 var X = /* @__PURE__ */ ((a) => (a.start = "start", a.end = "end", a.min = "min", a.max = "max", a.increase = "increase", a.decrease = "decrease", a))(X || {});
-const $s = (a, t) => {
+const Hs = (a, t) => {
   let e, s;
   switch (t.type) {
     case "start":
@@ -2892,18 +2899,18 @@ const $s = (a, t) => {
       break;
   }
   return e;
-}, Hs = (a, t, e) => {
+}, Gs = (a, t, e) => {
   const [s, l] = n.useState(a), i = n.useCallback(
     (c) => {
-      const o = $s(t.state || s, { ...c, ...t });
+      const o = Hs(t.state || s, { ...c, ...t });
       e && e(o, c.event), l(o);
     },
     [t, e]
   );
   return [s, i];
-}, Gs = he(), ga = n.forwardRef((a, t) => {
+}, Ks = he(), ba = n.forwardRef((a, t) => {
   pe(me);
-  const e = Ve(Gs, a), s = n.useRef(null), l = n.useRef(null), i = n.useRef(null), c = n.useRef(null), o = n.useRef(null), h = n.useCallback(
+  const e = Re(Ks, a), s = n.useRef(null), l = n.useRef(null), i = n.useRef(null), c = n.useRef(null), o = n.useRef(null), f = n.useCallback(
     () => {
       c.current && c.current.focus();
     },
@@ -2911,71 +2918,71 @@ const $s = (a, t) => {
   );
   n.useImperativeHandle(s, () => ({
     element: l.current,
-    focus: h,
+    focus: f,
     props: e
   })), n.useImperativeHandle(t, () => s.current);
   const d = n.useMemo(
     () => e.min,
     [e.min]
-  ), p = n.useMemo(
+  ), m = n.useMemo(
     () => e.max,
     [e.max]
-  ), f = n.useMemo(
-    () => e.step !== void 0 ? e.step : dt.step,
-    [e.step, dt.step]
-  ), m = $e(l, e.dir), v = (g, y) => {
+  ), u = n.useMemo(
+    () => e.step !== void 0 ? e.step : ut.step,
+    [e.step, ut.step]
+  ), h = Ae(l, e.dir), y = (g, k) => {
     e.onChange && s.current && e.onChange.call(void 0, {
       value: g,
       target: s.current,
-      syntheticEvent: y
+      syntheticEvent: k
     });
-  }, [N, D] = n.useState(""), [L, I] = Hs(
-    e.defaultValue || dt.defaultValue,
+  }, [M, D] = n.useState(""), [N, L] = Gs(
+    e.defaultValue || ut.defaultValue,
     {
       min: d,
-      max: p,
-      step: f,
+      max: m,
+      step: u,
       state: e.value
     },
-    v
+    y
   ), S = n.useMemo(
-    () => e.value || L,
-    [e.value, L]
-  ), R = n.useRef(null), P = n.useRef(null), O = n.useMemo(
-    () => (S.start - d) / (p - d) * 100,
-    [S.start, d, p]
-  ), w = n.useMemo(
-    () => (S.end - d) / (p - d) * 100,
-    [S.end, d, p]
+    () => e.value || N,
+    [e.value, N]
+  ), w = n.useRef(null), B = n.useRef(null), O = n.useMemo(
+    () => (S.start - d) / (m - d) * 100,
+    [S.start, d, m]
+  ), I = n.useMemo(
+    () => (S.end - d) / (m - d) * 100,
+    [S.end, d, m]
   ), F = n.useMemo(
     () => e.vertical ? { paddingTop: 0, height: "100%" } : {},
     [e.vertical]
-  ), T = n.useMemo(
+  ), _ = n.useMemo(
     () => e.vertical ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" },
     [e.vertical]
-  ), _ = Ae(), E = n.useCallback(
+  ), T = _e(), E = n.useCallback(
     (g) => {
-      if (!P.current)
+      if (!B.current)
         return;
-      const y = P.current.getBoundingClientRect(), C = e.vertical ? y.bottom - g.clientY : m === "rtl" ? y.right - g.clientX : g.clientX - y.left, B = e.vertical ? y.height : y.width, j = C / B;
-      return d + j * (p - d);
+      const k = B.current.getBoundingClientRect(), C = e.vertical ? k.bottom - g.clientY : h === "rtl" ? k.right - g.clientX : g.clientX - k.left, P = e.vertical ? k.height : k.width, j = C / P;
+      return d + j * (m - d);
     },
     [
-      P,
+      B,
       e.vertical,
-      m,
+      h,
       d,
-      p,
-      L.start,
-      L.end,
+      m,
+      N.start,
+      N.end,
       e.value && e.value.start,
       e.value && e.value.end
     ]
-  ), M = n.useCallback(
+  ), V = n.useCallback(
     (g) => g <= S.start ? "start" : g >= S.end ? "end" : 2 * g < S.end + S.start ? "start" : "end",
     [
-      L.start,
-      L.end,
+      N.start,
+      N.end,
       e.value && e.value.start,
       e.value && e.value.end
     ]
@@ -2983,76 +2990,76 @@ const $s = (a, t) => {
     (g) => {
       switch (g.keyCode) {
         case z.right:
-          g.preventDefault(), I({ type: m === "rtl" ? X.decrease : X.increase, key: "start", event: g });
+          g.preventDefault(), L({ type: h === "rtl" ? X.decrease : X.increase, key: "start", event: g });
           break;
         case z.up:
-          g.preventDefault(), I({ type: X.increase, key: "start", event: g });
+          g.preventDefault(), L({ type: X.increase, key: "start", event: g });
           break;
         case z.left:
-          g.preventDefault(), I({ type: m === "rtl" ? X.increase : X.decrease, key: "start", event: g });
+          g.preventDefault(), L({ type: h === "rtl" ? X.increase : X.decrease, key: "start", event: g });
           break;
         case z.down:
-          g.preventDefault(), I({ type: X.decrease, key: "start", event: g });
+          g.preventDefault(), L({ type: X.decrease, key: "start", event: g });
           break;
         case z.home:
-          g.preventDefault(), I({ type: X.min, key: "start", event: g });
+          g.preventDefault(), L({ type: X.min, key: "start", event: g });
           break;
         case z.end:
-          g.preventDefault(), I({ type: X.max, key: "start", event: g });
+          g.preventDefault(), L({ type: X.max, key: "start", event: g });
           break;
       }
     },
-    [I]
+    [L]
   ), q = n.useCallback(
     (g) => {
       switch (g.keyCode) {
         case z.right:
-          g.preventDefault(), I({ type: m === "rtl" ? X.decrease : X.increase, key: "end", event: g });
+          g.preventDefault(), L({ type: h === "rtl" ? X.decrease : X.increase, key: "end", event: g });
           break;
         case z.up:
-          g.preventDefault(), I({ type: X.increase, key: "end", event: g });
+          g.preventDefault(), L({ type: X.increase, key: "end", event: g });
           break;
         case z.left:
-          g.preventDefault(), I({ type: m === "rtl" ? X.increase : X.decrease, key: "end", event: g });
+          g.preventDefault(), L({ type: h === "rtl" ? X.increase : X.decrease, key: "end", event: g });
           break;
         case z.down:
-          g.preventDefault(), I({ type: X.decrease, key: "end", event: g });
+          g.preventDefault(), L({ type: X.decrease, key: "end", event: g });
           break;
         case z.home:
-          g.preventDefault(), I({ type: X.min, key: "end", event: g });
+          g.preventDefault(), L({ type: X.min, key: "end", event: g });
           break;
         case z.end:
-          g.preventDefault(), I({ type: X.max, key: "end", event: g });
+          g.preventDefault(), L({ type: X.max, key: "end", event: g });
           break;
       }
     },
-    [I, m]
+    [L, h]
   ), Z = n.useCallback(
     (g) => {
-      const y = E(g), C = M(y);
+      const k = E(g), C = V(k);
       D(C), C === "end" ? o.current.focus() : c.current.focus();
-      const B = C === "end" ? X.end : X.start;
-      I({ type: B, payload: y, event: g });
+      const P = C === "end" ? X.end : X.start;
+      L({ type: P, payload: k, event: g });
     },
-    [e.vertical, d, p, I]
+    [e.vertical, d, m, L]
   );
-  return Nn(P, { onPress: Z, onDrag: (g) => {
-    const y = E(g), C = N === "end" ? X.end : X.start;
-    I({ type: C, payload: y, event: g });
+  return Pn(B, { onPress: Z, onDrag: (g) => {
+    const k = E(g), C = M === "end" ? X.end : X.start;
+    L({ type: C, payload: k, event: g });
   }, onRelease: (g) => {
-    const y = E(g), C = N === "end" ? X.end : X.start;
-    I({ type: C, payload: y, event: g }), D("");
+    const k = E(g), C = M === "end" ? X.end : X.start;
+    L({ type: C, payload: k, event: g }), D("");
   } }), /* @__PURE__ */ n.createElement(
     "div",
     {
       id: e.id,
       style: e.style,
       ref: l,
-      dir: m,
+      dir: h,
       className: G(
         "k-slider",
         {
-          "k-rtl": m === "rtl",
+          "k-rtl": h === "rtl",
           "k-disabled": e.disabled,
           "k-slider-vertical": e.vertical,
           "k-slider-horizontal": !e.vertical
@@ -3063,13 +3070,13 @@ const $s = (a, t) => {
     /* @__PURE__ */ n.createElement(
       "div",
       {
-        ref: P,
+        ref: B,
         className: "k-slider-track-wrap",
         style: {
           flexGrow: 1,
           position: "relative",
           touchAction: "none",
-          ...T
+          ..._
         }
       },
       e.children && /* @__PURE__ */ n.createElement(
@@ -3090,20 +3097,20 @@ const $s = (a, t) => {
       /* @__PURE__ */ n.createElement(
         "div",
         {
-          ref: R,
+          ref: w,
           className: "k-slider-track",
-          style: e.vertical ? { bottom: 0, height: "100%" } : { [m === "rtl" ? "right" : "left"]: 0, width: "100%" }
+          style: e.vertical ? { bottom: 0, height: "100%" } : { [h === "rtl" ? "right" : "left"]: 0, width: "100%" }
         },
-        O !== null && w !== null && /* @__PURE__ */ n.createElement(
+        O !== null && I !== null && /* @__PURE__ */ n.createElement(
           "div",
           {
             "data-selection": !0,
             ref: i,
             title: `${S.start} - ${S.end}`,
             className: "k-slider-selection",
-            style: e.vertical ? { height: w - O + "%", bottom: O + "%" } : {
-              [m === "rtl" ? "right" : "left"]: O + "%",
-              width: w - O + "%"
+            style: e.vertical ? { height: I - O + "%", bottom: O + "%" } : {
+              [h === "rtl" ? "right" : "left"]: O + "%",
+              width: I - O + "%"
             }
           }
         ),
@@ -3114,13 +3121,13 @@ const $s = (a, t) => {
             role: "slider",
             tabIndex: ie(e.startTabIndex, e.disabled, void 0),
             "aria-valuemin": d,
-            "aria-valuemax": Math.max(p, S.end),
+            "aria-valuemax": Math.max(m, S.end),
             "aria-valuenow": S.start,
             "aria-disabled": e.disabled ? "true" : void 0,
             "aria-valuetext": `${S.start} - ${S.end}`,
             className: "k-draghandle",
-            title: _.toLanguageString(ze, $[ze]),
-            style: e.vertical ? { bottom: "calc(" + O + "%)", zIndex: 1 } : m === "rtl" ? { right: "calc(" + O + "% - 13px)", zIndex: 1 } : { left: "calc(" + O + "%)", zIndex: 1 },
+            title: T.toLanguageString(Te, $[Te]),
+            style: e.vertical ? { bottom: "calc(" + O + "%)", zIndex: 1 } : h === "rtl" ? { right: "calc(" + O + "% - 13px)", zIndex: 1 } : { left: "calc(" + O + "%)", zIndex: 1 },
             onKeyDown: H
           }
         ),
@@ -3131,20 +3138,20 @@ const $s = (a, t) => {
             role: "slider",
             tabIndex: ie(e.endTabIndex, e.disabled, void 0),
             "aria-valuemin": Math.min(d, S.start),
-            "aria-valuemax": p,
+            "aria-valuemax": m,
             "aria-valuenow": S.end,
             "aria-disabled": e.disabled ? "true" : void 0,
             "aria-valuetext": `${S.start} - ${S.end}`,
             className: "k-draghandle",
-            title: _.toLanguageString(ze, $[ze]),
-            style: e.vertical ? { bottom: "calc(" + w + "%)", zIndex: 1 } : m === "rtl" ? { right: "calc(" + w + "% - 13px)", zIndex: 1 } : { left: "calc(" + w + "%)", zIndex: 1 },
+            title: T.toLanguageString(Te, $[Te]),
+            style: e.vertical ? { bottom: "calc(" + I + "%)", zIndex: 1 } : h === "rtl" ? { right: "calc(" + I + "% - 13px)", zIndex: 1 } : { left: "calc(" + I + "%)", zIndex: 1 },
             onKeyDown: q
           }
         )
       )
     )
   );
-}), Ks = {
+}), qs = {
   value: (a, t, e) => {
     if (a.value) {
       const s = a.value.start, l = a.value.end, i = a.min, c = a.max;
@@ -3198,7 +3205,7 @@ const $s = (a, t) => {
   vertical: r.bool,
   disabled: r.bool,
   dir: r.oneOf(["ltr", "rtl"])
-}, dt = {
+}, ut = {
   step: 1,
   defaultValue: {
     start: 0,
@@ -3207,24 +3214,24 @@ const $s = (a, t) => {
   vertical: !1,
   disabled: !1
 };
-ga.displayName = "KendoReactRangeSlider";
-ga.propTypes = Ks;
-ga.defaultProps = dt;
-const ut = class extends n.Component {
+ba.displayName = "KendoReactRangeSlider";
+ba.propTypes = qs;
+ba.defaultProps = ut;
+const ft = class extends n.Component {
   /**
    * @hidden
    */
   constructor(a) {
     super(a), this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || this.defaultValidationMessage.toLanguageString(Zt, $[Zt])
+        this.validity.valid ? "" : this.props.validationMessage || this.defaultValidationMessage.toLanguageString(Jt, $[Jt])
       );
     }, this.limit = (t, e, s) => {
       const l = s.offsetWidth, i = e.offsetWidth;
       return t < 0 ? 0 : t > l - i ? l - i : t;
     }, this.toggle = (t, e) => {
       this.setState({ checked: t }), this.valueDuringOnChange = t, Q(this.props.onChange, e, this, { value: t }), this.valueDuringOnChange = void 0;
-    }, this._element = null, this._wrapper = null, this._input = null, this._id = Le(), this.defaultValidationMessage = Qe(this), this.focus = () => {
+    }, this._element = null, this._wrapper = null, this._input = null, this._id = this.props.id, this.defaultValidationMessage = Je(this), this.focus = () => {
       this.actionElement && this.actionElement.focus();
     }, this.dummyInput = (t) => /* @__PURE__ */ n.createElement(
       "input",
@@ -3238,7 +3245,7 @@ const ut = class extends n.Component {
         "aria-hidden": !0,
         value: t,
         style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" },
-        onChange: Ne,
+        onChange: Me,
         name: this.name || void 0
       }
     ), this.handleClick = (t) => {
@@ -3261,7 +3268,7 @@ const ut = class extends n.Component {
       const { onBlur: e } = this.props;
       e && e.call(void 0, t);
     }, pe(me), this.state = {
-      checked: a.defaultChecked || ut.defaultProps.defaultChecked,
+      checked: a.defaultChecked || ft.defaultProps.defaultChecked,
       focused: !1
     };
   }
@@ -3298,13 +3305,13 @@ const ut = class extends n.Component {
    * @hidden
    */
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : ut.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : ft.defaultProps.validityStyles;
   }
   /**
    * @hidden
    */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : ut.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : ft.defaultProps.required;
   }
   /**
    * @hidden
@@ -3322,9 +3329,9 @@ const ut = class extends n.Component {
    * @hidden
    */
   render() {
-    const { focused: a } = this.state, { dir: t, disabled: e, trackRounded: s, thumbRounded: l, size: i, offLabel: c, onLabel: o, tabIndex: h } = this.props;
+    const { focused: a } = this.state, { dir: t, disabled: e, trackRounded: s, thumbRounded: l, size: i, offLabel: c, onLabel: o, tabIndex: f } = this.props;
     this.dir = t || this.element && getComputedStyle(this.element).direction || void 0;
-    const d = !this.validityStyles || this.validity.valid, p = G(
+    const d = !this.validityStyles || this.validity.valid, m = G(
       "k-switch",
       {
         [`k-switch-${ne.sizeMap[i] || i}`]: i,
@@ -3336,7 +3343,7 @@ const ut = class extends n.Component {
         "k-invalid": !d
       },
       this.props.className
-    ), f = {
+    ), u = {
       "aria-checked": this.value,
       "aria-disabled": e || void 0,
       "aria-labelledby": this.props.ariaLabelledBy,
@@ -3346,18 +3353,18 @@ const ut = class extends n.Component {
     return /* @__PURE__ */ n.createElement(
       "span",
       {
-        ref: (m) => {
-          this._wrapper = m;
+        ref: (h) => {
+          this._wrapper = h;
         },
         role: "switch",
-        ...f,
-        className: p,
+        ...u,
+        className: m,
         dir: this.dir,
         onKeyDown: this.handleKeyDown,
         onClick: this.handleClick,
         onBlur: this.handleWrapperBlur,
         onFocus: this.handleWrapperFocus,
-        tabIndex: ie(h, e, void 0),
+        tabIndex: ie(f, e, void 0),
         accessKey: this.props.accessKey,
         id: this.props.id || this._id
       },
@@ -3368,8 +3375,8 @@ const ut = class extends n.Component {
             "k-switch-track",
             { [`k-rounded-${ne.roundedMap[s] || s}`]: s }
           ),
-          ref: (m) => {
-            this._element = m;
+          ref: (h) => {
+            this._element = h;
           }
         },
         this.dummyInput(this.value),
@@ -3380,9 +3387,9 @@ const ut = class extends n.Component {
     );
   }
 };
-let yt = ut;
-yt.displayName = "Switch";
-yt.propTypes = {
+let Ct = ft;
+Ct.displayName = "Switch";
+Ct.propTypes = {
   accessKey: r.string,
   checked: r.bool,
   className: r.string,
@@ -3406,136 +3413,136 @@ yt.propTypes = {
   onFocus: r.any,
   onLabel: r.string
 };
-yt.defaultProps = {
+Ct.defaultProps = {
   disabled: !1,
   defaultChecked: !1,
   size: "medium",
   trackRounded: "full",
   thumbRounded: "full",
   offLabel: "OFF",
-  onBlur: Ne,
-  onFocus: Ne,
+  onBlur: Me,
+  onFocus: Me,
   onLabel: "ON",
   required: !1,
   validityStyles: !0
 };
-const qs = he(), Us = je(qs, yt);
-Us.displayName = "KendoReactSwitch";
-const js = he(), ba = n.forwardRef((a, t) => {
+const Us = he(), js = et(Ue(Us, Ct));
+js.displayName = "KendoReactSwitch";
+const Ws = he(), va = n.forwardRef((a, t) => {
   pe(me);
-  const e = Ve(js, a), {
+  const e = Re(Ws, a), {
     ariaDescribedBy: s,
     ariaLabelledBy: l,
     checked: i,
     className: c,
     labelClassName: o,
-    children: h,
+    children: f,
     defaultChecked: d,
-    disabled: p,
-    defaultValue: f,
-    id: m,
-    size: v,
-    rounded: N,
+    disabled: m,
+    defaultValue: u,
+    id: h,
+    size: y,
+    rounded: M,
     label: D,
-    labelPlacement: L,
-    name: I,
+    labelPlacement: N,
+    name: L,
     labelOptional: S,
-    onChange: R,
-    onFocus: P,
+    onChange: w,
+    onFocus: B,
     onBlur: O,
-    tabIndex: w,
+    tabIndex: I,
     value: F,
-    required: T,
-    valid: _,
+    required: _,
+    valid: T,
     validationMessage: E,
-    validityStyles: M,
+    validityStyles: V,
     // Removed to support direct use in Form Field component
     visited: H,
     touched: q,
     modified: Z,
-    ...u
-  } = e, k = n.useRef(null), g = n.useCallback(
+    ...p
+  } = e, v = n.useRef(null), g = n.useCallback(
     () => {
-      k.current && k.current.focus();
+      v.current && v.current.focus();
     },
     []
-  ), y = n.useCallback(
+  ), k = n.useCallback(
     () => ({
-      element: k.current,
+      element: v.current,
       focus: g,
       get name() {
-        return k.current && k.current.name;
+        return v.current && v.current.name;
       }
     }),
     [g]
   );
-  n.useImperativeHandle(t, y);
-  const [C, B] = n.useState(d), [j, J] = n.useState(f), V = typeof F == "boolean" || F === null, b = i !== void 0, W = V, K = W ? F : j, ee = b ? i : W ? void 0 : C, le = ee === void 0 && K, Ee = le ? K : ee, oe = le || W ? F === null ? F : void 0 : F || K, ce = Ee === null || oe === null, be = n.useMemo(() => Le(), []), Ge = Ae(), A = (te) => Ge.toLanguageString(te, $[te]), xe = A(cn), ve = A(dn), We = _ !== void 0 ? _ : T ? !!ee : !0;
+  n.useImperativeHandle(t, k);
+  const [C, P] = n.useState(d), [j, J] = n.useState(u), R = typeof F == "boolean" || F === null, b = i !== void 0, W = R, K = W ? F : j, ee = b ? i : W ? void 0 : C, le = ee === void 0 && K, Ee = le ? K : ee, oe = le || W ? F === null ? F : void 0 : F || K, ce = Ee === null || oe === null, be = Qe(), He = _e(), A = (te) => He.toLanguageString(te, $[te]), xe = A(dn), ve = A(un), je = T !== void 0 ? T : _ ? !!ee : !0;
   n.useEffect(
     () => {
-      k.current && k.current.setCustomValidity && k.current.setCustomValidity(
-        We ? "" : E || xe
+      v.current && v.current.setCustomValidity && v.current.setCustomValidity(
+        je ? "" : E || xe
       );
     },
-    [We, E, xe]
+    [je, E, xe]
   );
-  const Be = n.useCallback(
+  const De = n.useCallback(
     (te, we) => {
-      !W && !p && (J(we), !b && !p && B(we)), R && !p && Q(
-        R,
+      !W && !m && (J(we), !b && !m && P(we)), w && !m && Q(
+        w,
         te,
         {
-          ...y(),
+          ...k(),
           value: we
         },
         { value: we }
       );
     },
-    [b, p, R, W, y]
-  ), St = n.useCallback(
+    [b, m, w, W, k]
+  ), wt = n.useCallback(
     (te) => {
       let we = te.target.checked;
-      Be(te, we);
+      De(te, we);
     },
-    [Be, F]
-  ), et = n.useCallback(
+    [De, F]
+  ), tt = n.useCallback(
     (te) => {
-      if (p)
+      if (m)
         return;
       const { keyCode: we } = te;
-      let Rn = te.currentTarget.checked;
-      we === z.space && (te.preventDefault(), te.stopPropagation(), Be(te, !Rn));
+      let Vn = te.currentTarget.checked;
+      we === z.space && (te.preventDefault(), te.stopPropagation(), De(te, !Vn));
     },
-    [p, Be]
-  ), tt = n.useCallback(
+    [m, De]
+  ), at = n.useCallback(
     (te) => {
-      if (p)
+      if (m)
         return;
       const { keyCode: we } = te;
       we === z.space && te.preventDefault();
     },
-    [p]
-  ), wt = n.useCallback(
+    [m]
+  ), It = n.useCallback(
     (te) => {
-      P && !p && Q(
-        P,
+      B && !m && Q(
+        B,
         te,
-        y(),
+        k(),
         void 0
       );
     },
-    [P, p, y]
+    [B, m, k]
   ), x = n.useCallback(
     (te) => {
-      O && !p && Q(
+      O && !m && Q(
         O,
         te,
-        y(),
+        k(),
         void 0
       );
     },
-    [O, p, y]
-  ), U = $e(k, e.dir), re = G(
+    [O, m, k]
+  ), U = Ae(v, e.dir), re = G(
     "k-checkbox-wrap",
     c
   ), Se = {
@@ -3543,50 +3550,50 @@ const js = he(), ba = n.forwardRef((a, t) => {
     className: G(
       "k-checkbox",
       {
-        [`k-checkbox-${ne.sizeMap[v] || v}`]: v,
-        [`k-rounded-${ne.roundedMap[N] || N}`]: N,
+        [`k-checkbox-${ne.sizeMap[y] || y}`]: y,
+        [`k-rounded-${ne.roundedMap[M] || M}`]: M,
         "k-indeterminate": ce,
-        "k-disabled": p,
-        "k-invalid k-invalid": !(We || M !== void 0 || M === !0)
+        "k-disabled": m,
+        "k-invalid k-invalid": !(je || V !== void 0 || V === !0)
       }
     ),
-    ref: k,
-    name: I,
-    id: m || be,
+    ref: v,
+    name: L,
+    id: h || be,
     "aria-labelledby": l,
     "aria-describedby": s,
     checked: !!Ee,
-    disabled: p,
-    tabIndex: ie(w, p),
+    disabled: m,
+    tabIndex: ie(I, m),
     role: "checkbox",
-    required: T !== void 0 ? T : !1,
+    required: _ !== void 0 ? _ : !1,
     "aria-checked": ee || Ee ? !0 : ce ? "mixed" : !1,
-    "aria-disabled": p || void 0,
-    ...u,
-    onChange: St,
-    onKeyDown: et,
-    onKeyUp: tt,
-    onFocus: wt,
+    "aria-disabled": m || void 0,
+    ...p,
+    onChange: wt,
+    onKeyDown: tt,
+    onKeyUp: at,
+    onFocus: It,
     onBlur: x
-  }, xa = /* @__PURE__ */ n.createElement(
+  }, Ea = /* @__PURE__ */ n.createElement(
     n.Fragment,
     null,
     // removing value prop is required due to bug in react where
     // value set to undefined override default submit value
-    oe === void 0 ? /* @__PURE__ */ n.createElement("input", { ...Se }) : /* @__PURE__ */ n.createElement("input", { ...Se, value: V ? void 0 : oe === null ? "" : oe })
-  ), Ea = /* @__PURE__ */ n.createElement(n.Fragment, null, D !== void 0 ? /* @__PURE__ */ n.createElement(
+    oe === void 0 ? /* @__PURE__ */ n.createElement("input", { ...Se }) : /* @__PURE__ */ n.createElement("input", { ...Se, value: R ? void 0 : oe === null ? "" : oe })
+  ), Sa = /* @__PURE__ */ n.createElement(n.Fragment, null, D !== void 0 ? /* @__PURE__ */ n.createElement(
     "label",
     {
       className: G("k-checkbox-label", o),
-      htmlFor: m || be,
+      htmlFor: h || be,
       style: { userSelect: "none" }
     },
     D,
     S && /* @__PURE__ */ n.createElement("span", { className: "k-label-optional" }, ve)
   ) : null);
-  return /* @__PURE__ */ n.createElement(n.Fragment, null, L === "before" ? /* @__PURE__ */ n.createElement("span", { className: re, dir: "rtl" }, xa, Ea, h) : /* @__PURE__ */ n.createElement("span", { className: re, dir: U }, xa, Ea, h));
+  return /* @__PURE__ */ n.createElement(n.Fragment, null, N === "before" ? /* @__PURE__ */ n.createElement("span", { className: re, dir: "rtl" }, Ea, Sa, f) : /* @__PURE__ */ n.createElement("span", { className: re, dir: U }, Ea, Sa, f));
 });
-ba.propTypes = {
+va.propTypes = {
   checked: r.bool,
   className: r.string,
   defaultChecked: r.bool,
@@ -3612,34 +3619,34 @@ ba.propTypes = {
   onFocus: r.func,
   onBlur: r.func
 };
-const Ws = {
+const Xs = {
   size: "medium",
   rounded: "medium"
 };
-ba.defaultProps = Ws;
-ba.displayName = "KendoCheckbox";
-const Xs = he(), Ct = n.forwardRef((a, t) => {
+va.defaultProps = Xs;
+va.displayName = "KendoCheckbox";
+const Ys = he(), xt = n.forwardRef((a, t) => {
   pe(me);
-  const e = Ve(Xs, a), {
+  const e = Re(Ys, a), {
     ariaDescribedBy: s,
     checked: l,
     children: i,
     className: c,
     disabled: o,
-    id: h,
+    id: f,
     size: d,
-    label: p,
-    labelPlacement: f,
-    name: m,
-    style: v,
-    tabIndex: N,
+    label: m,
+    labelPlacement: u,
+    name: h,
+    style: y,
+    tabIndex: M,
     value: D,
-    valid: L,
-    onChange: I,
+    valid: N,
+    onChange: L,
     onFocus: S,
-    onBlur: R,
-    ...P
-  } = e, O = n.useRef(null), w = n.useCallback(
+    onBlur: w,
+    ...B
+  } = e, O = n.useRef(null), I = n.useCallback(
     () => {
       O.current && O.current.focus();
     },
@@ -3647,77 +3654,77 @@ const Xs = he(), Ct = n.forwardRef((a, t) => {
   ), F = n.useCallback(
     () => ({
       element: O.current,
-      focus: w
+      focus: I
     }),
-    [w]
+    [I]
   );
   n.useImperativeHandle(t, F);
-  const T = n.useMemo(() => Le(), []), _ = n.useCallback(
-    (u) => {
+  const _ = Qe(), T = n.useCallback(
+    (p) => {
       Q(
-        I,
-        u,
+        L,
+        p,
         F(),
         { value: D }
       );
     },
-    [I, D, o]
+    [L, D, o]
   ), E = n.useCallback(
-    (u) => {
+    (p) => {
       S && !o && Q(
         S,
-        u,
+        p,
         F(),
         void 0
       );
     },
     [S, o]
-  ), M = n.useCallback(
-    (u) => {
-      R && !o && Q(
-        R,
-        u,
+  ), V = n.useCallback(
+    (p) => {
+      w && !o && Q(
+        w,
+        p,
         F(),
         void 0
       );
     },
-    [R, o]
+    [w, o]
   ), H = {
     type: "radio",
-    id: h || T,
-    name: m,
+    id: f || _,
+    name: h,
     className: G(
       "k-radio",
       {
         [`k-radio-${ne.sizeMap[d] || d}`]: d,
-        "k-invalid": L === !1
+        "k-invalid": N === !1
       },
       c
     ),
     ref: O,
     disabled: o,
-    tabIndex: ie(N, o),
+    tabIndex: ie(M, o),
     checked: l,
-    style: v,
+    style: y,
     "aria-describedby": s,
     value: D,
-    onChange: _,
+    onChange: T,
     onFocus: E,
-    onBlur: M,
-    ...P
-  }, q = /* @__PURE__ */ n.createElement(n.Fragment, null, p !== void 0 ? /* @__PURE__ */ n.createElement(
+    onBlur: V,
+    ...B
+  }, q = /* @__PURE__ */ n.createElement(n.Fragment, null, m !== void 0 ? /* @__PURE__ */ n.createElement(
     "label",
     {
       className: "k-radio-label",
-      htmlFor: h || T,
+      htmlFor: f || _,
       style: { userSelect: "none" },
-      "aria-label": p
+      "aria-label": m
     },
-    p
+    m
   ) : null), Z = /* @__PURE__ */ n.createElement("input", { ...H });
-  return f === "before" ? /* @__PURE__ */ n.createElement(n.Fragment, null, q, Z, i) : /* @__PURE__ */ n.createElement(n.Fragment, null, Z, q, i);
+  return u === "before" ? /* @__PURE__ */ n.createElement(n.Fragment, null, q, Z, i) : /* @__PURE__ */ n.createElement(n.Fragment, null, Z, q, i);
 });
-Ct.propTypes = {
+xt.propTypes = {
   ariaDescribedBy: r.string,
   checked: r.bool,
   className: r.string,
@@ -3735,110 +3742,112 @@ Ct.propTypes = {
   onFocus: r.func,
   onBlur: r.func
 };
-const Ys = {
+const Zs = {
   size: "medium"
 };
-Ct.displayName = "KendoRadioButton";
-Ct.defaultProps = Ys;
-const Zs = he(), va = n.forwardRef((a, t) => {
+xt.displayName = "KendoRadioButton";
+xt.defaultProps = Zs;
+const Js = he(), ka = n.forwardRef((a, t) => {
   pe(me);
-  const e = Ve(Zs, a), {
-    ariaLabelledBy: s,
-    ariaDescribedBy: l,
-    className: i,
-    data: c,
-    defaultValue: o,
-    disabled: h,
-    name: d,
-    labelPlacement: p,
-    layout: f,
-    style: m,
-    value: v,
-    valid: N,
-    item: D = wn.item,
+  const e = Re(Js, a), {
+    id: s,
+    ariaLabelledBy: l,
+    ariaDescribedBy: i,
+    className: c,
+    data: o,
+    defaultValue: f,
+    disabled: d,
+    name: m,
+    labelPlacement: u,
+    layout: h,
+    style: y,
+    value: M,
+    valid: D,
+    item: N = In.item,
     onChange: L,
-    onFocus: I
-  } = e, S = n.useRef(null), R = n.useCallback(
+    onFocus: S
+  } = e, w = n.useRef(null), B = n.useCallback(
     () => {
-      S.current && en(S.current);
+      w.current && tn(w.current);
     },
     []
-  ), P = n.useCallback(
+  ), O = n.useCallback(
     () => ({
-      element: S.current,
-      focus: R
+      element: w.current,
+      focus: B
     }),
-    [R]
+    [B]
   );
-  n.useImperativeHandle(t, P);
-  const [O, w] = n.useState(o), F = v !== void 0, T = F ? v : O, _ = n.useCallback(
-    (u) => {
-      let k = u.value;
-      !F && !h && w(k), L && !h && Q(
+  n.useImperativeHandle(t, O);
+  const [I, F] = n.useState(f), _ = M !== void 0, T = _ ? M : I, E = n.useCallback(
+    (v) => {
+      let g = v.value;
+      !_ && !d && F(g), L && !d && Q(
         L,
-        u.syntheticEvent,
-        P(),
-        { value: k }
+        v.syntheticEvent,
+        O(),
+        { value: g }
       );
     },
-    [w, L, h]
-  ), E = n.useCallback(
-    (u) => {
-      I && !h && Q(
-        I,
-        u.syntheticEvent,
-        P(),
+    [F, L, d]
+  ), V = n.useCallback(
+    (v) => {
+      S && !d && Q(
+        S,
+        v.syntheticEvent,
+        O(),
         void 0
       );
     },
-    [I, h]
-  ), M = n.useMemo(() => Le(), []), H = G(
+    [S, d]
+  ), H = Qe(), q = G(
     "k-radio-list",
     {
-      "k-list-horizontal": f === "horizontal",
-      "k-list-vertical": f === "vertical" || f === void 0
+      "k-list-horizontal": h === "horizontal",
+      "k-list-vertical": h === "vertical" || h === void 0
     },
-    i
-  ), q = Pn(S, e.dir), Z = c && c.map((u, k) => {
-    const g = T === u.value, y = T == null, C = {
-      ...u,
-      valid: N,
-      checked: g,
-      disabled: !!(u.disabled || h),
-      labelPlacement: u.labelPlacement ? u.labelPlacement : p,
-      tabIndex: u.tabIndex ? u.tabIndex : y && k === 0 || g ? 0 : -1,
-      index: k,
-      name: d || M,
-      onChange: _,
-      onFocus: E
+    c
+  ), Z = Dn(w, e.dir), p = o && o.map((v, g) => {
+    const k = T === v.value, C = T == null, P = {
+      ...v,
+      valid: D,
+      checked: k,
+      disabled: !!(v.disabled || d),
+      labelPlacement: v.labelPlacement ? v.labelPlacement : u,
+      tabIndex: v.tabIndex ? v.tabIndex : C && g === 0 || k ? 0 : -1,
+      index: g,
+      name: m || H,
+      onChange: E,
+      onFocus: V
     };
     return /* @__PURE__ */ n.createElement(
-      D,
+      N,
       {
-        className: G("k-radio-item", { "k-disabled": C.disabled || h }),
-        key: k,
+        className: G("k-radio-item", { "k-disabled": P.disabled || d }),
+        key: g,
         role: "none"
       },
-      /* @__PURE__ */ n.createElement(Ct, { ...C })
+      /* @__PURE__ */ n.createElement(xt, { ...P })
     );
   });
   return /* @__PURE__ */ n.createElement(
     "ul",
     {
+      id: s,
       role: "radiogroup",
-      className: H,
-      ref: S,
-      dir: q,
-      style: m,
-      "aria-labelledby": s,
-      "aria-describedby": l
+      className: q,
+      ref: w,
+      dir: Z,
+      style: y,
+      "aria-labelledby": l,
+      "aria-describedby": i
     },
-    Z
+    p
   );
-}), wn = {
+}), In = {
   item: (a) => /* @__PURE__ */ n.createElement("li", { ...a })
 };
-va.propTypes = {
+ka.propTypes = {
   ariaLabelledBy: r.string,
   ariaDescribedBy: r.string,
   className: r.string,
@@ -3854,77 +3863,77 @@ va.propTypes = {
   onChange: r.func,
   onFocus: r.func
 };
-va.defaultProps = wn;
-va.displayName = "KendoRadioGroup";
-const Js = he(), ka = n.forwardRef((a, t) => {
-  const e = Ve(Js, a), {
+ka.defaultProps = In;
+ka.displayName = "KendoRadioGroup";
+const Qs = he(), ya = n.forwardRef((a, t) => {
+  const e = Re(Qs, a), {
     size: s,
     rounded: l,
     fillMode: i,
     ariaDescribedBy: c,
     ariaLabelledBy: o,
-    autoSize: h,
+    autoSize: f,
     className: d,
-    defaultValue: p,
-    disabled: f,
-    readOnly: m,
-    required: v,
-    rows: N,
+    defaultValue: m,
+    disabled: u,
+    readOnly: h,
+    required: y,
+    rows: M,
     id: D,
-    name: L,
-    placeholder: I,
+    name: N,
+    placeholder: L,
     style: S,
-    tabIndex: R,
-    value: P,
+    tabIndex: w,
+    value: B,
     valid: O,
-    validationMessage: w,
+    validationMessage: I,
     validityStyles: F,
-    onChange: T,
-    onFocus: _,
+    onChange: _,
+    onFocus: T,
     onBlur: E,
     // Removed to support direct use in Form Field component
-    visited: M,
+    visited: V,
     touched: H,
     modified: q,
     ...Z
-  } = e, u = n.useRef(null), k = n.useCallback(
+  } = e, p = n.useRef(null), v = n.useCallback(
     () => {
-      u.current && u.current.focus();
+      p.current && p.current.focus();
     },
     []
-  ), [g, y] = n.useState(p), C = P !== void 0, B = C ? P : g, j = n.useCallback(
+  ), [g, k] = n.useState(m), C = B !== void 0, P = C ? B : g, j = n.useCallback(
     () => ({
-      element: u,
-      focus: k,
+      element: p,
+      focus: v,
       get value() {
-        return B;
+        return P;
       },
       get name() {
-        return u.current && u.current.name;
+        return p.current && p.current.name;
       }
     }),
-    [k, B]
+    [v, P]
   );
   n.useImperativeHandle(t, j);
-  const [J, V] = n.useState("auto"), b = n.useMemo(() => Le(), []), W = $e(u, e.dir), K = O !== void 0 ? O : v ? !!B : !0;
+  const [J, R] = n.useState("auto"), b = Qe(), W = Ae(p, e.dir), K = O !== void 0 ? O : y ? !!P : !0;
   n.useEffect(
     () => {
-      u.current && u.current.setCustomValidity && u.current.setCustomValidity(
-        K ? "" : w || ""
+      p.current && p.current.setCustomValidity && p.current.setCustomValidity(
+        K ? "" : I || ""
       );
     },
-    [K, w]
+    [K, I]
   ), n.useLayoutEffect(
     () => {
-      u.current && V(`${u.current.scrollHeight}px`);
+      p.current && R(`${p.current.scrollHeight}px`);
     },
-    [B]
+    [P]
   );
   const ee = n.useCallback(
     (ce) => {
       const be = ce.target.value;
-      V("auto"), !C && !f && y(be), T && !f && Q(
-        T,
+      R("auto"), !C && !u && k(be), _ && !u && Q(
+        _,
         ce,
         {
           ...j(),
@@ -3933,45 +3942,45 @@ const Js = he(), ka = n.forwardRef((a, t) => {
         { value: be }
       );
     },
-    [y, T, f, C]
+    [k, _, u, C]
   ), le = n.useCallback(
     (ce) => {
-      _ && !f && Q(
-        _,
+      T && !u && Q(
+        T,
         ce,
         j(),
         void 0
       );
     },
-    [_, f]
+    [T, u]
   ), Ee = n.useCallback(
     (ce) => {
-      E && !f && Q(
+      E && !u && Q(
         E,
         ce,
         j(),
         void 0
       );
     },
-    [E, f]
+    [E, u]
   ), oe = {
     id: D || b,
     role: "textbox",
-    name: L,
+    name: N,
     className: "k-input-inner !k-overflow-auto",
-    ref: u,
-    disabled: f,
-    rows: N,
-    placeholder: I,
-    readOnly: m,
-    required: v,
-    tabIndex: ie(R, f),
-    style: h ? { resize: "none", overflow: "hidden", height: J } : {},
+    ref: p,
+    disabled: u,
+    rows: M,
+    placeholder: L,
+    readOnly: h,
+    required: y,
+    tabIndex: ie(w, u),
+    style: f ? { resize: "none", overflow: "hidden", height: J } : {},
     "aria-labelledby": o,
     "aria-describedby": c,
     "aria-multiline": !0,
-    "aria-disabled": f || void 0,
-    value: C ? P : g,
+    "aria-disabled": u || void 0,
+    value: C ? B : g,
     ...Z,
     onChange: ee,
     onFocus: le,
@@ -3988,8 +3997,8 @@ const Js = he(), ka = n.forwardRef((a, t) => {
           [`k-input-${i}`]: i,
           [`k-rounded-${ne.roundedMap[l] || l}`]: l,
           "k-invalid": !(K || F !== void 0 || F === !0),
-          "k-required": v,
-          "k-disabled": f
+          "k-required": y,
+          "k-disabled": u
         },
         d
       ),
@@ -3999,7 +4008,7 @@ const Js = he(), ka = n.forwardRef((a, t) => {
     /* @__PURE__ */ n.createElement("textarea", { ...oe })
   );
 });
-ka.propTypes = {
+ya.propTypes = {
   ariaDescribedBy: r.string,
   ariaLabelledBy: r.string,
   autoSize: r.bool,
@@ -4026,94 +4035,94 @@ ka.propTypes = {
   rounded: r.oneOf([null, "small", "medium", "large", "full"]),
   fillMode: r.oneOf([null, "solid", "flat", "outline"])
 };
-const Qs = {
+const er = {
   size: "medium",
   rounded: "medium",
   fillMode: "solid"
 };
-ka.displayName = "KendoTextArea";
-ka.defaultProps = Qs;
-const xt = n.forwardRef((a, t) => {
-  const e = n.useRef(null), s = n.useRef(null), l = $e(s, a.dir);
+ya.displayName = "KendoTextArea";
+ya.defaultProps = er;
+const Et = n.forwardRef((a, t) => {
+  const e = n.useRef(null), s = n.useRef(null), l = Ae(s, a.dir);
   n.useImperativeHandle(e, () => ({
     element: s.current,
     props: a,
     value: a.value
   })), n.useImperativeHandle(t, () => e.current);
   const i = n.useCallback(
-    (m) => {
+    (h) => {
       a.onClick && a.onClick.call(
         void 0,
         {
           value: a.value,
           target: e.current,
-          syntheticEvent: m
+          syntheticEvent: h
         }
       );
     },
     [a.onClick, a.value]
   ), c = n.useCallback(
-    (m) => {
+    (h) => {
       a.onKeyDown && a.onKeyDown.call(
         void 0,
         {
           target: e.current,
-          syntheticEvent: m
+          syntheticEvent: h
         }
       );
     },
     [a.onKeyDown]
   ), o = n.useCallback(
-    (m) => {
+    (h) => {
       a.onFocus && a.onFocus.call(
         void 0,
         {
           target: e.current,
-          syntheticEvent: m
+          syntheticEvent: h
         }
       );
     },
     [a.onFocus]
-  ), h = n.useCallback(
-    (m) => {
+  ), f = n.useCallback(
+    (h) => {
       a.onBlur && a.onBlur.call(
         void 0,
         {
           target: e.current,
-          syntheticEvent: m
+          syntheticEvent: h
         }
       );
     },
     [a.onBlur]
   ), d = n.useCallback(
-    (m) => {
+    (h) => {
       a.onMouseMove && a.onMouseMove.call(
         void 0,
         {
           target: e.current,
-          syntheticEvent: m
+          syntheticEvent: h
         }
       );
     },
     [a.onMouseMove]
-  ), p = n.useCallback(
-    (m) => {
+  ), m = n.useCallback(
+    (h) => {
       a.onMouseEnter && a.onMouseEnter.call(
         void 0,
         {
           target: e.current,
-          syntheticEvent: m
+          syntheticEvent: h
         }
       );
     },
     [a.onMouseEnter]
-  ), f = n.useCallback(
-    (m) => {
+  ), u = n.useCallback(
+    (h) => {
       a.onMouseLeave && a.onMouseLeave.call(
         void 0,
         {
           target: e.current,
-          syntheticEvent: m
+          syntheticEvent: h
         }
       );
     },
@@ -4141,14 +4150,14 @@ const xt = n.forwardRef((a, t) => {
       onClick: i,
       onKeyDown: c,
       onFocus: o,
-      onBlur: h,
-      onMouseEnter: p,
-      onMouseLeave: f,
+      onBlur: f,
+      onMouseEnter: m,
+      onMouseLeave: u,
       onMouseMove: d
     },
     a.children
   );
-}), er = {
+}), tr = {
   id: r.string,
   icon: r.any,
   dir: r.oneOf(["ltr", "rtl"]),
@@ -4157,26 +4166,26 @@ const xt = n.forwardRef((a, t) => {
   half: r.bool,
   selected: r.bool,
   hovered: r.bool
-}, tr = {
+}, ar = {
   dir: "ltr"
 };
-xt.displayName = "KendoReactRatingItem";
-xt.propTypes = er;
-xt.defaultProps = tr;
+Et.displayName = "KendoReactRatingItem";
+Et.propTypes = tr;
+Et.defaultProps = ar;
 const ye = (a, t) => {
   if (a % 1) {
     const e = Math.pow(10, (t.toString().split(".")[1] || t.toString().split(".")[0]).length);
     return Math.round(a * e) / e;
   }
   return a;
-}, ar = (a, t) => a - t * Math.floor(a / t), la = (a, t, e) => ye(a - e, e) < t && t < a, Bt = (a, t, e, s) => t === null ? !1 : s === "continues" ? la(a, t, e) ? ye(a - e / 2, e / 2) <= t : a <= t : s === "single" ? la(a, t, e) ? ye(a - e / 2, e / 2) === t : a === t : !1, Xa = (a, t, e) => a === "ltr" ? e < t.x + t.width / 2 : e > t.x + t.width / 2, Ya = (a, t, e, s) => {
+}, nr = (a, t) => a - t * Math.floor(a / t), oa = (a, t, e) => ye(a - e, e) < t && t < a, Ot = (a, t, e, s) => t === null ? !1 : s === "continues" ? oa(a, t, e) ? ye(a - e / 2, e / 2) <= t : a <= t : s === "single" ? oa(a, t, e) ? ye(a - e / 2, e / 2) === t : a === t : !1, Ya = (a, t, e) => a === "ltr" ? e < t.x + t.width / 2 : e > t.x + t.width / 2, Za = (a, t, e, s) => {
   for (let l = a; l <= t; l += e)
     if (s === l)
       return !0;
   return !1;
 };
 var de = /* @__PURE__ */ ((a) => (a.select = "select", a.deselect = "deselect", a.increase = "increase", a.decrease = "decrease", a.min = "min", a.max = "max", a.reset = "reset", a))(de || {});
-const nr = (a, t) => {
+const sr = (a, t) => {
   switch (t.type) {
     case "select":
       return t.payload === void 0 || t.step === void 0 ? a : t.payload === a ? null : t.payload >= t.min ? t.payload < t.max ? ye(t.payload, t.step) : t.max : t.min;
@@ -4195,210 +4204,210 @@ const nr = (a, t) => {
     default:
       return a;
   }
-}, Za = (a, t, e) => {
+}, Ja = (a, t, e) => {
   const [s, l] = n.useState(a);
   return [s, (c) => {
-    const o = nr(t.state || s, { ...c, ...t });
+    const o = sr(t.state || s, { ...c, ...t });
     e && e(o, c.event), l(o);
   }];
-}, sr = he(), ya = n.forwardRef((a, t) => {
-  const e = Ve(sr, a), s = Ae(), l = n.useRef(null), i = n.useRef(null), c = $e(i, e.dir);
+}, rr = he(), Ca = n.forwardRef((a, t) => {
+  const e = Re(rr, a), s = _e(), l = n.useRef(null), i = n.useRef(null), c = Ae(i, e.dir);
   n.useImperativeHandle(l, () => ({
     element: i.current,
     props: e
   })), n.useImperativeHandle(t, () => l.current);
   const o = n.useCallback(
-    (u, k) => {
+    (p, v) => {
       e.onChange && l.current && e.onChange.call(void 0, {
-        value: u,
+        value: p,
         target: l.current,
-        syntheticEvent: k
+        syntheticEvent: v
       });
     },
     [e.onChange]
-  ), h = n.useMemo(
+  ), f = n.useMemo(
     () => e.min !== void 0 ? e.min : Ie.min,
     [e.min]
   ), d = n.useMemo(
     () => e.max !== void 0 ? e.max : Ie.max,
     [e.max]
-  ), p = n.useMemo(
+  ), m = n.useMemo(
     () => e.precision || Ie.precision,
     [e.precision]
-  ), f = n.useMemo(
+  ), u = n.useMemo(
     () => e.step !== void 0 ? e.step : Ie.step,
     [e.step]
-  ), m = n.useMemo(
+  ), h = n.useMemo(
     () => e.readonly || Ie.readonly,
     [e.readonly]
-  ), v = n.useMemo(
+  ), y = n.useMemo(
     () => e.disabled || Ie.disabled,
     [e.disabled]
-  ), N = n.useMemo(
+  ), M = n.useMemo(
     () => e.item || Ie.item,
     [e.item]
-  ), [D, L] = Za(
+  ), [D, N] = Ja(
     e.defaultValue !== void 0 ? e.defaultValue : Ie.defaultValue,
     {
       state: e.value,
-      min: h,
+      min: f,
       max: d,
-      step: p === "half" ? f / 2 : f
+      step: m === "half" ? u / 2 : u
     },
     o
-  ), [I, S] = Za(
+  ), [L, S] = Ja(
     null,
     {
       state: e.value,
-      min: h,
+      min: f,
       max: d,
-      step: p === "half" ? f / 2 : f,
-      precision: p
+      step: m === "half" ? u / 2 : u,
+      precision: m
     }
-  ), R = n.useMemo(
+  ), w = n.useMemo(
     () => e.value !== void 0 ? e.value : D,
     [e.value, D]
-  ), P = n.useMemo(
-    () => I,
-    [I]
+  ), B = n.useMemo(
+    () => L,
+    [L]
   ), O = n.useMemo(
     () => e.selection || Ie.selection,
     [e.selection]
-  ), w = n.useMemo(
-    () => f / (p === "half" ? 2 : 1),
-    [f, p]
+  ), I = n.useMemo(
+    () => u / (m === "half" ? 2 : 1),
+    [u, m]
   ), F = n.useCallback(
-    (u) => {
-      if (!(!u.target || !u.target.element || m || v)) {
-        if (p === "half") {
-          const k = u.target.element.getBoundingClientRect(), y = Xa(c || "ltr", k, u.syntheticEvent.clientX) ? ye(u.target.value - f / 2, w) : u.target.value;
-          L({ type: de.select, payload: y, event: u.syntheticEvent });
+    (p) => {
+      if (!(!p.target || !p.target.element || h || y)) {
+        if (m === "half") {
+          const v = p.target.element.getBoundingClientRect(), k = Ya(c || "ltr", v, p.syntheticEvent.clientX) ? ye(p.target.value - u / 2, I) : p.target.value;
+          N({ type: de.select, payload: k, event: p.syntheticEvent });
         } else
-          L({ type: de.select, payload: u.target.value, event: u.syntheticEvent });
+          N({ type: de.select, payload: p.target.value, event: p.syntheticEvent });
         if (e.onClick) {
-          const k = {
-            value: R,
+          const v = {
+            value: w,
             target: l.current,
-            syntheticEvent: u.syntheticEvent
+            syntheticEvent: p.syntheticEvent
           };
-          e.onClick.call(void 0, k);
+          e.onClick.call(void 0, v);
         }
       }
     },
-    [e.onClick, L, R]
-  ), T = n.useCallback(
-    (u) => {
-      if (!(m || v)) {
-        switch (u.keyCode) {
+    [e.onClick, N, w]
+  ), _ = n.useCallback(
+    (p) => {
+      if (!(h || y)) {
+        switch (p.keyCode) {
           case z.right:
-            u.preventDefault(), L({
+            p.preventDefault(), N({
               type: c === "rtl" ? de.decrease : de.increase,
-              event: u
+              event: p
             });
             break;
           case z.left:
-            u.preventDefault(), L({
+            p.preventDefault(), N({
               type: c === "rtl" ? de.increase : de.decrease,
-              event: u
+              event: p
             });
             break;
           case z.home:
-            u.preventDefault(), L({
+            p.preventDefault(), N({
               type: c === "rtl" ? de.min : de.max,
-              event: u
+              event: p
             });
             break;
           case z.end:
-            u.preventDefault(), L({
+            p.preventDefault(), N({
               type: c === "rtl" ? de.max : de.min,
-              event: u
+              event: p
             });
             break;
           case z.esc:
-            u.preventDefault(), L({
+            p.preventDefault(), N({
               type: de.deselect,
-              event: u
+              event: p
             });
             break;
         }
         e.onKeyDown && e.onKeyDown.call(
           void 0,
           {
-            value: R,
+            value: w,
             target: l.current,
-            syntheticEvent: u
+            syntheticEvent: p
           }
         );
       }
     },
-    [e.onKeyDown, L, R]
-  ), _ = n.useCallback(
-    (u) => {
+    [e.onKeyDown, N, w]
+  ), T = n.useCallback(
+    (p) => {
       if (e.onFocus) {
-        const k = {
+        const v = {
           target: l.current,
-          syntheticEvent: u
+          syntheticEvent: p
         };
         e.onFocus.call(
           void 0,
-          k
+          v
         );
       }
     },
     [e.onFocus]
   ), E = n.useCallback(
-    (u) => {
+    (p) => {
       if (e.onBlur) {
-        const k = {
+        const v = {
           target: l.current,
-          syntheticEvent: u
+          syntheticEvent: p
         };
         e.onBlur.call(
           void 0,
-          k
+          v
         );
       }
     },
     [e.onBlur]
-  ), M = n.useCallback(
-    (u) => {
-      if (!(!u.target || !u.target.element))
-        if (p === "half") {
-          const k = u.target.element.getBoundingClientRect(), y = Xa(c || "ltr", k, u.syntheticEvent.clientX) ? u.target.value - f / 2 : u.target.value;
-          S({ type: de.select, payload: y, event: u.syntheticEvent });
+  ), V = n.useCallback(
+    (p) => {
+      if (!(!p.target || !p.target.element))
+        if (m === "half") {
+          const v = p.target.element.getBoundingClientRect(), k = Ya(c || "ltr", v, p.syntheticEvent.clientX) ? p.target.value - u / 2 : p.target.value;
+          S({ type: de.select, payload: k, event: p.syntheticEvent });
         } else
-          S({ type: de.select, payload: u.target.value, event: u.syntheticEvent });
+          S({ type: de.select, payload: p.target.value, event: p.syntheticEvent });
     },
-    [p, f, c]
+    [m, u, c]
   ), H = n.useCallback(
-    (u) => {
-      S({ type: de.reset, event: u.syntheticEvent });
+    (p) => {
+      S({ type: de.reset, event: p.syntheticEvent });
     },
     []
-  ), q = [], Z = ar(ye(d - h, w), f);
-  for (let u = h; u <= d; u = ye(u + f, w)) {
-    const k = ye(u + Z, w), g = p === "half" ? la(k, P !== null ? P : R !== null ? R : 0, f) : !1, y = Bt(k, R, f, O), C = Bt(k, P !== null ? P : R, f, O), B = Bt(k, P, f, O);
+  ), q = [], Z = nr(ye(d - f, I), u);
+  for (let p = f; p <= d; p = ye(p + u, I)) {
+    const v = ye(p + Z, I), g = m === "half" ? oa(v, B !== null ? B : w !== null ? w : 0, u) : !1, k = Ot(v, w, u, O), C = Ot(v, B !== null ? B : w, u, O), P = Ot(v, B, u, O);
     q.push(
       /* @__PURE__ */ n.createElement(
-        N,
+        M,
         {
-          key: k,
-          value: k,
+          key: v,
+          value: v,
           dir: c,
-          title: String(g ? ye(k - f / 2, w) : k),
+          title: String(g ? ye(v - u / 2, I) : v),
           icon: e.icon,
           svgIcon: e.svgIcon,
           half: g,
-          selected: y || C,
-          hovered: B,
+          selected: k || C,
+          hovered: P,
           onClick: F,
-          onMouseMove: M,
+          onMouseMove: V,
           onMouseLeave: H
         },
-        g && /* @__PURE__ */ n.createElement("span", { className: "k-rating-precision-complement" }, !(e.icon || e.svgIconOutline) && /* @__PURE__ */ n.createElement(fe, { name: "star-outline", icon: La, style: { clipPath: `${c === "rtl" ? "inset(0 50% 0 0)" : "inset(0 0 0 50%)"}` }, size: "xlarge" }), (e.icon || e.svgIconOutline) && /* @__PURE__ */ n.createElement(fe, { name: It(`${e.icon}-outline`), icon: e.svgIconOutline, size: "xlarge" })),
-        g && /* @__PURE__ */ n.createElement("span", { className: "k-rating-precision-part" }, !(e.icon || e.svgIcon) && /* @__PURE__ */ n.createElement(fe, { name: "star", icon: Ra, style: { clipPath: `${c === "rtl" ? "inset(0 0 0 50%)" : "inset(0 50% 0 0)"}` }, size: "xlarge" }), (e.icon || e.svgIcon) && /* @__PURE__ */ n.createElement(fe, { name: e.icon ? It(e.icon) : void 0, icon: e.svgIcon, size: "xlarge" })),
+        g && /* @__PURE__ */ n.createElement("span", { className: "k-rating-precision-complement" }, !(e.icon || e.svgIconOutline) && /* @__PURE__ */ n.createElement(fe, { name: "star-outline", icon: Ra, style: { clipPath: `${c === "rtl" ? "inset(0 50% 0 0)" : "inset(0 0 0 50%)"}` }, size: "xlarge" }), (e.icon || e.svgIconOutline) && /* @__PURE__ */ n.createElement(fe, { name: Lt(`${e.icon}-outline`), icon: e.svgIconOutline, size: "xlarge" })),
+        g && /* @__PURE__ */ n.createElement("span", { className: "k-rating-precision-part" }, !(e.icon || e.svgIcon) && /* @__PURE__ */ n.createElement(fe, { name: "star", icon: Va, style: { clipPath: `${c === "rtl" ? "inset(0 0 0 50%)" : "inset(0 50% 0 0)"}` }, size: "xlarge" }), (e.icon || e.svgIcon) && /* @__PURE__ */ n.createElement(fe, { name: e.icon ? Lt(e.icon) : void 0, icon: e.svgIcon, size: "xlarge" })),
         g && /* @__PURE__ */ n.createElement("span", { style: { width: "24px", height: "24px", display: "block" } }),
-        !g && !(e.icon || e.svgIcon) && (B || C && !B) && /* @__PURE__ */ n.createElement(fe, { name: "star", icon: Ra, size: "xlarge" }) || !(e.icon || e.svgIcon) && !B && !C && /* @__PURE__ */ n.createElement(fe, { name: "star-outline", icon: La, size: "xlarge" }) || (e.icon || e.svgIcon) && (B || C && !B) && /* @__PURE__ */ n.createElement(fe, { name: e.icon, icon: e.svgIcon, size: "xlarge" }) || (e.icon || e.svgIcon) && !B && /* @__PURE__ */ n.createElement(fe, { name: It(`${e.icon}-outline`), icon: e.svgIconOutline, size: "xlarge" })
+        !g && !(e.icon || e.svgIcon) && (P || C && !P) && /* @__PURE__ */ n.createElement(fe, { name: "star", icon: Va, size: "xlarge" }) || !(e.icon || e.svgIcon) && !P && !C && /* @__PURE__ */ n.createElement(fe, { name: "star-outline", icon: Ra, size: "xlarge" }) || (e.icon || e.svgIcon) && (P || C && !P) && /* @__PURE__ */ n.createElement(fe, { name: e.icon, icon: e.svgIcon, size: "xlarge" }) || (e.icon || e.svgIcon) && !P && /* @__PURE__ */ n.createElement(fe, { name: Lt(`${e.icon}-outline`), icon: e.svgIconOutline, size: "xlarge" })
       )
     );
   }
@@ -4415,19 +4424,19 @@ const nr = (a, t) => {
         "k-rating",
         {
           "k-rtl": c === "rtl",
-          "k-readonly": m,
-          "k-disabled": v
+          "k-readonly": h,
+          "k-disabled": y
         },
         e.className
       ),
-      onKeyDown: T,
-      onFocus: _,
+      onKeyDown: _,
+      onFocus: T,
       onBlur: E,
-      "aria-valuemin": h,
+      "aria-valuemin": f,
       "aria-valuemax": d,
-      "aria-valuenow": R !== null ? R : void 0,
-      "aria-disabled": v ? "true" : void 0,
-      "aria-label": s.toLanguageString(Qt, $[Qt]),
+      "aria-valuenow": w !== null ? w : void 0,
+      "aria-disabled": y ? "true" : void 0,
+      "aria-label": s.toLanguageString(ea, $[ea]),
       "aria-labelledby": e.ariaLabelledBy,
       "aria-describedby": e.ariaDescribedBy
     },
@@ -4436,8 +4445,8 @@ const nr = (a, t) => {
       {
         id: "rating",
         className: "k-hidden",
-        readOnly: m,
-        disabled: v
+        readOnly: h,
+        disabled: y
       }
     ),
     /* @__PURE__ */ n.createElement(
@@ -4455,12 +4464,12 @@ const nr = (a, t) => {
       e.label
     )
   );
-}), rr = {
+}), ir = {
   id: r.string,
   dir: r.oneOf(["ltr", "rtl"]),
   selection: r.oneOf(["continues", "single"]),
   precision: r.oneOf(["item", "half"]),
-  value: (a, t, e) => a.value && a.min && a.max && a.step && !(a.precision === "half" ? Ya(a.min, a.max, a.step / 2, a.value) : Ya(a.min, a.max, a.step, a.value)) && a.precision === "half" ? new Error(
+  value: (a, t, e) => a.value && a.min && a.max && a.step && !(a.precision === "half" ? Za(a.min, a.max, a.step / 2, a.value) : Za(a.min, a.max, a.step, a.value)) && a.precision === "half" ? new Error(
     `Invalid prop + ${t} supplied to ${e}.
                     The value of the { value } property is not correct, please check your values.
                     `
@@ -4479,59 +4488,59 @@ const nr = (a, t) => {
   disabled: r.bool,
   half: r.bool,
   icon: r.string,
-  svgIcon: Ot,
-  svgIconOutline: Ot,
+  svgIcon: Ft,
+  svgIconOutline: Ft,
   ariaDescribedBy: r.string
 }, Ie = {
   dir: "ltr",
   min: 1,
   max: 5,
   step: 1,
-  item: xt,
+  item: Et,
   defaultValue: null,
   readonly: !1,
   disabled: !1,
   selection: "continues",
   precision: "item"
 };
-ya.displayName = "KendoReactRating";
-ya.propTypes = rr;
-ya.defaultProps = Ie;
-function ir(a, t) {
+Ca.displayName = "KendoReactRating";
+Ca.propTypes = ir;
+Ca.defaultProps = Ie;
+function lr(a, t) {
   let e = a;
   for (; e && e !== t; )
     e = e.parentNode;
   return !!e;
 }
-const lr = 250, or = 84, In = 3, Ln = 2, cr = "#000000", dr = "#ffffff", Ja = (a) => a !== void 0, ur = he(), Et = n.forwardRef((a, t) => {
+const or = 250, cr = 84, Ln = 3, Rn = 2, dr = "#000000", ur = "#ffffff", Qa = (a) => a !== void 0, fr = he(), St = n.forwardRef((a, t) => {
   pe(me);
-  const e = Ve(ur, a), s = Ae(), l = n.useRef(null), i = n.useRef(null), c = n.useRef(null), o = n.useRef(null), h = n.useRef(null), [d, p] = n.useState(), [f, m] = n.useState(!1), [v, N] = n.useState(!1), [D, L] = n.useState(), [I, S] = n.useState(), P = Ja(e.value) ? e.value : D, [O, w] = n.useState(!1), F = Ja(e.open), T = F ? e.open : O, _ = !(e.maximized || v || !e.maximizable || e.disabled), E = e.maximized && !v, H = !(!(e.value || D) || v || e.readOnly || e.disabled), q = s.toLanguageString(ta, $[ta]), Z = s.toLanguageString(aa, $[aa]), u = s.toLanguageString(ea, $[ea]), k = e.popupScale || In, g = e.exportScale || Ln, y = (x) => {
-    L(x), e.onChange && e.onChange({ value: x });
+  const e = Re(fr, a), s = _e(), l = n.useRef(null), i = n.useRef(null), c = n.useRef(null), o = n.useRef(null), f = n.useRef(null), [d, m] = n.useState(), [u, h] = n.useState(!1), [y, M] = n.useState(!1), [D, N] = n.useState(), [L, S] = n.useState(), B = Qa(e.value) ? e.value : D, [O, I] = n.useState(!1), F = Qa(e.open), _ = F ? e.open : O, T = !(e.maximized || y || !e.maximizable || e.disabled), E = e.maximized && !y, H = !(!(e.value || D) || y || e.readOnly || e.disabled), q = s.toLanguageString(aa, $[aa]), Z = s.toLanguageString(na, $[na]), p = s.toLanguageString(ta, $[ta]), v = e.popupScale || Ln, g = e.exportScale || Rn, k = (x) => {
+    N(x), e.onChange && e.onChange({ value: x });
   }, C = (x) => {
-    d == null || d.loadImage(x.value), y(x.value);
+    d == null || d.loadImage(x.value), k(x.value);
   };
   n.useEffect(() => {
-    e.value !== D && (L(e.value), d == null || d.loadImage(e.value));
+    e.value !== D && (N(e.value), d == null || d.loadImage(e.value));
   }, [e.value]);
-  const B = () => {
-    d == null || d.clear(), y();
+  const P = () => {
+    d == null || d.clear(), k();
   }, j = n.useCallback(
     (x) => {
-      F || w(x);
+      F || I(x);
     },
     [F]
   ), J = (x) => {
     var U, re;
-    Be(x), (re = ((U = h.current) == null ? void 0 : U.element) || i.current) == null || re.focus();
-  }, V = n.useCallback(() => {
-    let x = cr;
+    De(x), (re = ((U = f.current) == null ? void 0 : U.element) || i.current) == null || re.focus();
+  }, R = n.useCallback(() => {
+    let x = dr;
     return !e.color && typeof document < "u" && l.current && (x = getComputedStyle(l.current).color), e.color || x;
   }, [e.color]), b = n.useCallback(() => {
-    let x = dr;
+    let x = ur;
     return !e.backgroundColor && typeof document < "u" && l.current && (x = getComputedStyle(l.current).backgroundColor), e.backgroundColor || x;
   }, [e.backgroundColor]), W = () => ({
     scale: e.maximized ? e.popupScale : 1,
-    color: V(),
+    color: R(),
     backgroundColor: b(),
     strokeWidth: e.strokeWidth,
     smooth: e.smooth,
@@ -4544,13 +4553,13 @@ const lr = 250, or = 84, In = 3, Ln = 2, cr = "#000000", dr = "#ffffff", Ja = (a
     }));
   };
   n.useEffect(() => {
-    const x = i.current, U = new An(x, W());
-    return P && U.loadImage(P), p(U), () => U.destroy();
+    const x = i.current, U = new $n(x, W());
+    return B && U.loadImage(B), m(U), () => U.destroy();
   }, []), n.useEffect(() => {
     d == null || d.setOptions({
-      onChange: async () => y(await K(et())),
-      onDraw: () => N(!0),
-      onDrawEnd: () => N(!1)
+      onChange: async () => k(await K(tt())),
+      onDraw: () => M(!0),
+      onDrawEnd: () => M(!1)
     });
   }, [d]), n.useLayoutEffect(
     () => d == null ? void 0 : d.setOptions(W()),
@@ -4562,14 +4571,14 @@ const lr = 250, or = 84, In = 3, Ln = 2, cr = "#000000", dr = "#ffffff", Ja = (a
       return;
     const U = () => j(!1);
     return x.addEventListener("click", U), () => x.removeEventListener("click", U);
-  }, [T]), n.useEffect(() => {
-    if (!T || typeof document > "u")
+  }, [_]), n.useEffect(() => {
+    if (!_ || typeof document > "u")
       return;
     const x = (U) => {
       U.keyCode === z.esc && j(!1);
     };
     return document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x);
-  }, [T]), n.useEffect(() => {
+  }, [_]), n.useEffect(() => {
     var x, U;
     e.maximized && ((U = (x = o.current) == null ? void 0 : x.element) == null || U.focus());
   }, []);
@@ -4601,7 +4610,7 @@ const lr = 250, or = 84, In = 3, Ln = 2, cr = "#000000", dr = "#ffffff", Ja = (a
   ), be = n.useCallback(
     () => e.validityStyles,
     [e.validityStyles]
-  ), Ge = n.useCallback(
+  ), He = n.useCallback(
     () => e,
     [e]
   ), A = n.useCallback(
@@ -4610,42 +4619,42 @@ const lr = 250, or = 84, In = 3, Ln = 2, cr = "#000000", dr = "#ffffff", Ja = (a
         element: l.current,
         focus: ee
       };
-      return Object.defineProperty(x, "name", { get: Ee }), Object.defineProperty(x, "value", { get: le }), Object.defineProperty(x, "validity", { get: ce }), Object.defineProperty(x, "validityStyles", { get: be }), Object.defineProperty(x, "required", { get: oe }), Object.defineProperty(x, "props", { get: Ge }), Object.defineProperty(x, "color", { get: V }), Object.defineProperty(x, "backgroundColor", { get: b }), x;
+      return Object.defineProperty(x, "name", { get: Ee }), Object.defineProperty(x, "value", { get: le }), Object.defineProperty(x, "validity", { get: ce }), Object.defineProperty(x, "validityStyles", { get: be }), Object.defineProperty(x, "required", { get: oe }), Object.defineProperty(x, "props", { get: He }), Object.defineProperty(x, "color", { get: R }), Object.defineProperty(x, "backgroundColor", { get: b }), x;
     },
-    [Ee, le, ce, be, oe, ee, Ge, V, b]
+    [Ee, le, ce, be, oe, ee, He, R, b]
   );
   n.useImperativeHandle(t, A);
   const xe = n.useCallback(
     (x) => {
-      f || e.maximized || (m(!0), Q(
+      u || e.maximized || (h(!0), Q(
         e.onFocus,
         x,
         A(),
         {}
       ));
     },
-    [f, e.onFocus, A]
+    [u, e.onFocus, A]
   ), ve = n.useCallback(
     (x) => {
-      ir(x.relatedTarget, l.current) || (m(!1), Q(
+      lr(x.relatedTarget, l.current) || (h(!1), Q(
         e.onBlur,
         x,
         A(),
         {}
       ));
     },
-    [f, e.onBlur, A]
-  ), We = n.useCallback(
+    [u, e.onBlur, A]
+  ), je = n.useCallback(
     async (x) => {
-      S(await K(tt())), j(!0), Q(
+      S(await K(at())), j(!0), Q(
         e.onOpen,
         x,
         A(),
         {}
       );
     },
-    [T, F, e.onOpen, e.value, D, A]
-  ), Be = n.useCallback(
+    [_, F, e.onOpen, e.value, D, A]
+  ), De = n.useCallback(
     (x) => {
       j(!1), Q(
         e.onClose,
@@ -4654,23 +4663,23 @@ const lr = 250, or = 84, In = 3, Ln = 2, cr = "#000000", dr = "#ffffff", Ja = (a
         {}
       );
     },
-    [T, F, e.onClose, A]
-  ), St = () => {
-    B(), ee();
-  }, et = () => {
+    [_, F, e.onClose, A]
+  ), wt = () => {
+    P(), ee();
+  }, tt = () => {
     var re, Se;
-    const x = e.width || ((re = l.current) == null ? void 0 : re.offsetWidth) || lr, U = e.height || ((Se = l.current) == null ? void 0 : Se.offsetHeight) || or;
+    const x = e.width || ((re = l.current) == null ? void 0 : re.offsetWidth) || or, U = e.height || ((Se = l.current) == null ? void 0 : Se.offsetHeight) || cr;
     return {
       width: x,
       height: U
     };
-  }, tt = () => {
-    const { width: x, height: U } = et();
+  }, at = () => {
+    const { width: x, height: U } = tt();
     return {
-      width: x * k,
-      height: U * k
+      width: x * v,
+      height: U * v
     };
-  }, wt = !be() || ce().valid;
+  }, It = !be() || ce().valid;
   return /* @__PURE__ */ n.createElement(
     "div",
     {
@@ -4685,10 +4694,10 @@ const lr = 250, or = 84, In = 3, Ln = 2, cr = "#000000", dr = "#ffffff", Ja = (a
           [`k-signature-${ne.sizeMap[e.size] || e.size}`]: e.size,
           [`k-input-${e.fillMode}`]: e.fillMode,
           [`k-rounded-${ne.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
-          "k-invalid": !wt,
+          "k-invalid": !It,
           "k-required": e.required,
           "k-disabled": e.disabled,
-          "k-focus": f
+          "k-focus": u
         },
         e.className
       ),
@@ -4709,16 +4718,16 @@ const lr = 250, or = 84, In = 3, Ln = 2, cr = "#000000", dr = "#ffffff", Ja = (a
         "aria-disabled": e.disabled ? "true" : void 0
       }
     ),
-    /* @__PURE__ */ n.createElement("div", { className: "k-signature-actions k-signature-actions-top" }, _ && /* @__PURE__ */ n.createElement(
+    /* @__PURE__ */ n.createElement("div", { className: "k-signature-actions k-signature-actions-top" }, T && /* @__PURE__ */ n.createElement(
       ge,
       {
         className: "k-signature-action k-signature-maximize",
-        ref: h,
+        ref: f,
         icon: "hyperlink-open",
-        svgIcon: Va,
+        svgIcon: Ma,
         fillMode: "flat",
         size: e.size,
-        onClick: We,
+        onClick: je,
         "aria-label": q,
         title: q
       }
@@ -4728,10 +4737,10 @@ const lr = 250, or = 84, In = 3, Ln = 2, cr = "#000000", dr = "#ffffff", Ja = (a
         className: "k-signature-action k-signature-minimize k-rotate-180",
         ref: o,
         icon: "hyperlink-open",
-        svgIcon: Va,
+        svgIcon: Ma,
         fillMode: "flat",
         size: e.size,
-        onClick: Be,
+        onClick: De,
         "aria-label": Z,
         title: Z
       }
@@ -4748,22 +4757,22 @@ const lr = 250, or = 84, In = 3, Ln = 2, cr = "#000000", dr = "#ffffff", Ja = (a
       {
         className: "k-signature-action k-signature-clear",
         icon: "x",
-        svgIcon: Tt,
+        svgIcon: zt,
         fillMode: "flat",
         size: e.size,
-        onClick: St,
-        "aria-label": u,
-        title: u
+        onClick: wt,
+        "aria-label": p,
+        title: p
       }
     )),
-    T && /* @__PURE__ */ n.createElement($n, { ref: c }, /* @__PURE__ */ n.createElement(
-      Et,
+    _ && /* @__PURE__ */ n.createElement(Hn, { ref: c }, /* @__PURE__ */ n.createElement(
+      St,
       {
         ...e,
-        ...tt(),
-        value: I,
+        ...at(),
+        value: L,
         maximized: !0,
-        exportScale: 1 / k * g,
+        exportScale: 1 / v * g,
         open: !1,
         onChange: C,
         onClose: J
@@ -4771,7 +4780,7 @@ const lr = 250, or = 84, In = 3, Ln = 2, cr = "#000000", dr = "#ffffff", Ja = (a
     ))
   );
 });
-Et.propTypes = {
+St.propTypes = {
   value: r.string,
   width: r.number,
   height: r.number,
@@ -4793,26 +4802,26 @@ Et.propTypes = {
   rounded: r.oneOf([null, "small", "medium", "large"]),
   fillMode: r.oneOf([null, "solid", "flat", "outline"])
 };
-Et.displayName = "KendoSignature";
-Et.defaultProps = {
+St.displayName = "KendoSignature";
+St.defaultProps = {
   strokeWidth: 1,
   smooth: !1,
-  popupScale: In,
-  exportScale: Ln,
+  popupScale: Ln,
+  exportScale: Rn,
   maximizable: !0,
   disabled: !1,
   required: !1,
   validityStyles: !0,
-  onChange: (a) => Ne,
-  onFocus: (a) => Ne,
-  onBlur: (a) => Ne,
-  onOpen: (a) => Ne,
-  onClose: (a) => Ne,
+  onChange: (a) => Me,
+  onFocus: (a) => Me,
+  onBlur: (a) => Me,
+  onOpen: (a) => Me,
+  onClose: (a) => Me,
   size: "medium",
   rounded: "medium",
   fillMode: "solid"
 };
-const Ca = n.forwardRef((a, t) => {
+const xa = n.forwardRef((a, t) => {
   pe(me);
   const e = n.useRef(null), s = n.useRef(null), l = n.useRef(), i = n.useCallback(
     () => {
@@ -4841,23 +4850,23 @@ const Ca = n.forwardRef((a, t) => {
   const {
     size: c,
     fillMode: o,
-    rounded: h,
+    rounded: f,
     className: d,
-    dir: p,
-    style: f,
-    prefix: m = oa.prefix,
-    suffix: v = oa.suffix,
-    valid: N,
+    dir: m,
+    style: u,
+    prefix: h = ca.prefix,
+    suffix: y = ca.suffix,
+    valid: M,
     // Destruct to avoid warning when used inside a form field
     modified: D,
-    touched: L,
-    visited: I,
+    touched: N,
+    visited: L,
     ...S
-  } = a, [R] = Ue(m), [P] = Ue(v), [O, w] = n.useState(!1), F = (H) => {
-    w(!0);
-  }, T = (H) => {
-    w(!1);
-  }, _ = n.useCallback(
+  } = a, [w] = qe(h), [B] = qe(y), [O, I] = n.useState(!1), F = (H) => {
+    I(!0);
+  }, _ = (H) => {
+    I(!1);
+  }, T = n.useCallback(
     (H) => {
       l.current = H.target.value, a.onChange && a.onChange.call(void 0, {
         syntheticEvent: H,
@@ -4867,23 +4876,23 @@ const Ca = n.forwardRef((a, t) => {
       }), l.current = void 0;
     },
     [a.onChange]
-  ), { onFocus: E, onBlur: M } = Dn({
+  ), { onFocus: E, onBlur: V } = Bn({
     onFocus: F,
-    onBlur: T,
+    onBlur: _,
     onSyncFocus: a.onFocus,
     onSyncBlur: a.onBlur
   });
   return /* @__PURE__ */ n.createElement(
     "span",
     {
-      style: f,
-      dir: p,
+      style: u,
+      dir: m,
       className: G(
         "k-textbox k-input",
         {
           [`k-input-${ne.sizeMap[c] || c}`]: c,
           [`k-input-${o}`]: o,
-          [`k-rounded-${ne.roundedMap[h] || h}`]: h
+          [`k-rounded-${ne.roundedMap[f] || f}`]: f
         },
         {
           "k-focus": O,
@@ -4894,35 +4903,35 @@ const Ca = n.forwardRef((a, t) => {
         d
       ),
       onFocus: E,
-      onBlur: M
+      onBlur: V
     },
-    /* @__PURE__ */ n.createElement(R, null),
+    /* @__PURE__ */ n.createElement(w, null),
     /* @__PURE__ */ n.createElement(
       "input",
       {
         ref: e,
         className: "k-input-inner",
         ...S,
-        onChange: _
+        onChange: T
       }
     ),
-    /* @__PURE__ */ n.createElement(P, null)
+    /* @__PURE__ */ n.createElement(B, null)
   );
-}), oa = {
+}), ca = {
   prefix: (a) => null,
   suffix: (a) => null,
   size: "medium",
   rounded: "medium",
   fillMode: "solid"
 };
-Ca.propTypes = {
+xa.propTypes = {
   size: r.oneOf([null, "small", "medium", "large"]),
   rounded: r.oneOf([null, "small", "medium", "large", "full"]),
   fillMode: r.oneOf([null, "solid", "flat", "outline"])
 };
-Ca.displayName = "KendoReactTextBoxComponent";
-Ca.defaultProps = oa;
-const fr = n.forwardRef((a, t) => {
+xa.displayName = "KendoReactTextBoxComponent";
+xa.defaultProps = ca;
+const hr = n.forwardRef((a, t) => {
   const e = n.useRef(null), s = n.useRef(null);
   return n.useImperativeHandle(
     e,
@@ -4932,8 +4941,8 @@ const fr = n.forwardRef((a, t) => {
     () => e.current
   ), /* @__PURE__ */ n.createElement("span", { ...a, className: G("k-clear-value", a.className) });
 });
-fr.displayName = "KendoReactInputClearValue";
-const hr = n.forwardRef((a, t) => {
+hr.displayName = "KendoReactInputClearValue";
+const pr = n.forwardRef((a, t) => {
   const e = n.useRef(null), s = n.useRef(null);
   return n.useImperativeHandle(
     e,
@@ -4943,8 +4952,8 @@ const hr = n.forwardRef((a, t) => {
     () => e.current
   ), /* @__PURE__ */ n.createElement("span", { ...a, className: G("k-input-prefix", a.className) });
 });
-hr.displayName = "KendoReactInputPrefix";
-const pr = n.forwardRef((a, t) => {
+pr.displayName = "KendoReactInputPrefix";
+const mr = n.forwardRef((a, t) => {
   const e = n.useRef(null), s = n.useRef(null);
   return n.useImperativeHandle(
     e,
@@ -4954,8 +4963,8 @@ const pr = n.forwardRef((a, t) => {
     () => e.current
   ), /* @__PURE__ */ n.createElement("span", { ...a, className: G("k-input-separator", a.className) });
 });
-pr.displayName = "KendoReactInputSeparator";
-const mr = n.forwardRef((a, t) => {
+mr.displayName = "KendoReactInputSeparator";
+const gr = n.forwardRef((a, t) => {
   const e = n.useRef(null), s = n.useRef(null);
   return n.useImperativeHandle(
     e,
@@ -4965,66 +4974,66 @@ const mr = n.forwardRef((a, t) => {
     () => e.current
   ), /* @__PURE__ */ n.createElement("span", { ...a, className: G("k-input-suffix", a.className) });
 });
-mr.displayName = "KendoReactInputSuffix";
-const gr = n.forwardRef((a, t) => /* @__PURE__ */ n.createElement(fe, { ref: t, ...a, className: G("k-input-validation-icon", a.className) }));
-gr.displayName = "KendoReactInputValidationIcon";
+gr.displayName = "KendoReactInputSuffix";
+const br = n.forwardRef((a, t) => /* @__PURE__ */ n.createElement(fe, { ref: t, ...a, className: G("k-input-validation-icon", a.className) }));
+br.displayName = "KendoReactInputValidationIcon";
 export {
-  ba as Checkbox,
-  js as CheckboxPropsContext,
-  ha as ColorGradient,
-  ks as ColorGradientPropsContext,
-  bt as ColorGradientWithoutContext,
-  fa as ColorInput,
-  pa as ColorPalette,
-  xs as ColorPalettePropsContext,
-  vt as ColorPaletteWithoutContext,
-  ma as ColorPicker,
-  Ls as ColorPickerPropsContext,
-  En as FlatColorPicker,
-  bn as Input,
-  fr as InputClearValue,
-  hr as InputPrefix,
-  ss as InputPropsContext,
-  pr as InputSeparator,
-  mr as InputSuffix,
-  gr as InputValidationIcon,
-  mt as InputWithoutContext,
-  As as MaskedTextBox,
-  kt as MaskedTextBoxWithoutContext,
-  _e as NumericTextBox,
-  ts as NumericTextBoxPropsContext,
-  Cs as PALETTEPRESETS,
+  va as Checkbox,
+  Ws as CheckboxPropsContext,
+  pa as ColorGradient,
+  ys as ColorGradientPropsContext,
+  vt as ColorGradientWithoutContext,
+  ha as ColorInput,
+  ma as ColorPalette,
+  Es as ColorPalettePropsContext,
+  kt as ColorPaletteWithoutContext,
+  ga as ColorPicker,
+  Rs as ColorPickerPropsContext,
+  Sn as FlatColorPicker,
+  vn as Input,
+  hr as InputClearValue,
+  pr as InputPrefix,
+  rs as InputPropsContext,
+  mr as InputSeparator,
+  gr as InputSuffix,
+  br as InputValidationIcon,
+  gt as InputWithoutContext,
+  $s as MaskedTextBox,
+  yt as MaskedTextBoxWithoutContext,
+  ze as NumericTextBox,
+  as as NumericTextBoxPropsContext,
+  xs as PALETTEPRESETS,
   X as RANGE_ACTION,
   de as RATING_ACTION,
-  Ct as RadioButton,
-  Xs as RadioButtonPropsContext,
-  va as RadioGroup,
-  Zs as RadioGroupPropsContext,
-  ga as RangeSlider,
-  Gs as RangeSliderPropsContext,
-  ya as Rating,
-  xt as RatingItem,
-  sr as RatingPropsContext,
-  vn as SLIDER_LABEL_ATTRIBUTE,
-  Et as Signature,
-  ur as SignaturePropsContext,
-  ra as Slider,
-  Ir as SliderLabel,
-  gt as SliderWithoutContext,
-  Us as Switch,
-  yt as SwitchWithoutContext,
-  ka as TextArea,
-  Js as TextAreaPropsContext,
-  Ca as TextBox,
+  xt as RadioButton,
+  Ys as RadioButtonPropsContext,
+  ka as RadioGroup,
+  Js as RadioGroupPropsContext,
+  ba as RangeSlider,
+  Ks as RangeSliderPropsContext,
+  Ca as Rating,
+  Et as RatingItem,
+  rr as RatingPropsContext,
+  kn as SLIDER_LABEL_ATTRIBUTE,
+  St as Signature,
+  fr as SignaturePropsContext,
+  ia as Slider,
+  Lr as SliderLabel,
+  bt as SliderWithoutContext,
+  js as Switch,
+  Ct as SwitchWithoutContext,
+  ya as TextArea,
+  Qs as TextAreaPropsContext,
+  xa as TextBox,
   $ as inputsMessages,
-  Ya as isCorrectValue,
-  la as isHalf,
-  Bt as isSelected,
-  Ts as maskingChanged,
-  Ze as numericDecreaseValue,
-  Ye as numericIncreaseValue,
-  $s as rangeReducer,
-  nr as ratingReducer,
-  Fa as sanitizeNumber,
+  Za as isCorrectValue,
+  oa as isHalf,
+  Ot as isSelected,
+  zs as maskingChanged,
+  Ye as numericDecreaseValue,
+  Xe as numericIncreaseValue,
+  Hs as rangeReducer,
+  sr as ratingReducer,
+  Ta as sanitizeNumber,
   ye as toRound
 };