@progress/kendo-react-inputs 7.1.0-develop.1 → 7.1.0-develop.2

package/index.mjs

@@ -18,7 +18,7 @@ const me = {
   name: "@progress/kendo-react-inputs",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1705312498,
+  publishDate: 1705398448,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 }, 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", $ = {
@@ -67,20 +67,20 @@ const me = {
 }), 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));
-}, Da = (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);
-}, 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);
+}, Da = (a, t, e, s, i, l, c) => {
+  const o = mn(a || 0, e || 0), f = Ge(gn((a || 0) + (e || 0), o), s, i);
+  t.eventValue = f, t.currentLooseValue = ue(f, l, c), t.selectionStart = t.selectionEnd = Ze(t.currentLooseValue, ke);
+}, Ba = (a, t, e, s, i, l, c) => {
+  const o = mn(a || 0, e || 0), f = Ge(gn((a || 0) - (e || 0), o), s, i);
+  t.eventValue = f, t.currentLooseValue = ue(f, l, 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);
+  const e = t.findIndex(([i, l]) => !!l && a.indexOf(l) === a.length - l.length);
   if (e === -1)
     return -1;
   const s = t[e][1];
   return a.length - s.length;
 }, Wn = (a, t) => {
-  const e = t.findIndex(([l, i]) => !!l && a.indexOf(l) === 0);
+  const e = t.findIndex(([i, l]) => !!i && a.indexOf(i) === 0);
   return e === -1 ? -1 : t[e][0].length;
 }, Xn = (a, t, e) => {
   const s = jn(a, t);
@@ -89,8 +89,8 @@ const me = {
     return;
   }
   e.selectionStart > a.length && (e.selectionStart = e.selectionEnd = a.length);
-  const l = Wn(a, t);
-  l !== -1 && e.selectionStart < l && (e.selectionStart = e.selectionEnd = l), e.selectionStart === -1 && (e.selectionStart = e.selectionEnd = 0);
+  const i = Wn(a, t);
+  i !== -1 && e.selectionStart < i && (e.selectionStart = e.selectionEnd = i), e.selectionStart === -1 && (e.selectionStart = e.selectionEnd = 0);
 }, Le = (a, t, e, s) => {
   a.selectionStart = a.selectionEnd = t, Xn(e, s, a);
 }, Mt = (a, t, e, s) => {
@@ -102,7 +102,7 @@ const me = {
   const e = String(a.currentLooseValue), s = String(a.prevLooseValue);
   return e.indexOf(t.minusSign) === -1 && s.indexOf(t.minusSign) !== -1;
 }, 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);
+  const e = t.formatNumber(pt, a), s = t.formatNumber(-pt, a), i = t.formatNumber(hn, a), l = t.formatNumber(fn, a), c = nt(e), o = nt(s), f = nt(i), d = nt(l), m = st(e), u = st(s), h = st(i), y = st(l);
   return {
     positiveInfo: [c, m],
     negativeInfo: [o, u],
@@ -110,8 +110,8 @@ const me = {
     oneInfo: [d, y]
   };
 }, 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("");
+  const e = t.formatNumber(pt, a), s = t.formatNumber(-pt, a), i = t.formatNumber(hn, a), l = t.formatNumber(fn, a), c = t.numberSymbols(), o = new RegExp(`[\\d\\${c.decimal}${c.group}]`, "g");
+  return [e, s, i, l].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 : Ze(a, ke);
@@ -121,9 +121,9 @@ const me = {
 }, Pt = (a, t) => a.search(t), Oa = (a, t) => {
   const e = a.indexOf(t);
   return e > -1 ? a.length - e - 1 : 0;
-}, Fa = (a, t, e, s, l) => {
-  const i = a.replace(l, "")[0] === "0", c = t.replace(l, "")[0] === "0";
-  if (i && !c)
+}, Fa = (a, t, e, s, i) => {
+  const l = a.replace(i, "")[0] === "0", c = t.replace(i, "")[0] === "0";
+  if (l && !c)
     return e - 1;
   if (c && s)
     return e + 1;
@@ -135,39 +135,39 @@ const me = {
     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, {
+  const s = { ...a }, { prevLooseValue: i } = s, l = e.numberSymbols(), c = es(t, e), o = String(s.currentLooseValue), f = String(i), d = new RegExp(`[^\\d\\${l.decimal}]`, "g"), m = new RegExp(`[^\\d\\${l.decimal}\\${l.group}]`, "g"), u = new RegExp(`[\\d\\${l.decimal}\\${l.group}]`), h = o.replace(d, ""), y = Pt(o, ke), M = y === -1 ? -1 : Ze(o, ke), D = o.indexOf(l.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(l.decimal), w = S > -1 ? L.length - S - 1 : 0, B = e.formatNumber(qn, t).replace(d, ""), O = B.indexOf(l.decimal), I = O > -1 ? B.length - O - 1 : 0, {
     positiveInfo: F,
     negativeInfo: _,
     zeroInfo: T,
     oneInfo: E
-  } = 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;
+  } = 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(l.percentSign) === -1;
   if (!s.isPaste) {
     if (o === "")
       return s.eventValue = null, s.currentLooseValue = "", s;
-    if (s.currentLooseValue === i.minusSign && e.formatNumber(-0, t) !== f)
+    if (s.currentLooseValue === l.minusSign && e.formatNumber(-0, t) !== f)
       return s.eventValue = -0, s.currentLooseValue = ue(s.eventValue, t, e), Le(
         s,
-        Nt(s.currentLooseValue, i),
+        Nt(s.currentLooseValue, l),
         s.currentLooseValue,
         V
       ), s;
-    if (s.currentLooseValue === i.decimal) {
+    if (s.currentLooseValue === l.decimal) {
       s.eventValue = 0;
       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);
+        s.currentLooseValue = k.substring(0, C) + l.decimal + k.substring(C);
       } else
         s.currentLooseValue = k;
       return Le(
         s,
-        Nt(s.currentLooseValue, i) + 1,
+        Nt(s.currentLooseValue, l) + 1,
         s.currentLooseValue,
         V
       ), s;
     }
-    if (Yn(s, i)) {
-      const k = e.parseNumber(l, t);
+    if (Yn(s, l)) {
+      const k = e.parseNumber(i, 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(
@@ -177,27 +177,27 @@ const me = {
         V
       ), s;
     }
-    if (Zn(s, i))
+    if (Zn(s, l))
       return s.eventValue = e.parseNumber(s.currentLooseValue, t), Le(
         s,
         s.selectionStart,
         s.currentLooseValue,
         V
       ), s;
-    if (Jn(s, i))
+    if (Jn(s, l))
       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 > 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;
+      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] !== l.decimal, K = J !== M && M !== -1 && o[J - 1] !== l.decimal;
       return C && P ? W || K ? !1 : R && b : C ? W ? !1 : R : P ? K ? !1 : b : !1;
     }) === -1)
       return Mt(s, t, V, e), s;
-    if (h[h.length - 1] === i.decimal && w > 0)
+    if (h[h.length - 1] === l.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)
+    if (s.currentLooseValue && i && (c + l.decimal + l.group).split("").findIndex((C) => o.split("").filter((P) => P === C).length < f.split("").filter((P) => P === C).length && o.length + 1 === f.length ? !(C === l.decimal && Oa(f.replace(d, ""), l.decimal) === 0) : !1) > -1)
       return s.eventValue = e.parseNumber(a.prevLooseValue, t), s.currentLooseValue = a.prevLooseValue, s;
-    const v = Oa(h, i.decimal), g = h[h.length - 1] === "0";
+    const v = Oa(h, l.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 (v > 0) {
@@ -213,7 +213,7 @@ const me = {
         ), s.currentLooseValue = C, 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);
+        const C = o.indexOf(l.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 (I !== w && v <= w && g)
@@ -224,7 +224,7 @@ const me = {
   }
   if (s.eventValue = e.parseNumber(s.currentLooseValue, t), Z && (s.eventValue = s.eventValue / 100), typeof s.eventValue == "number") {
     const p = ue(s.eventValue, t, e);
-    o.length === 1 ? Le(s, Nt(p, i), p, V) : Le(
+    o.length === 1 ? Le(s, Nt(p, l), p, V) : Le(
       s,
       Fa(o, p, s.selectionEnd, q, d),
       p,
@@ -235,10 +235,10 @@ const me = {
   return s;
 }, ts = "Please enter a valid value!", as = he(), ze = n.forwardRef((a, t) => {
   pe(me);
-  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(
+  const e = Re(as, a), s = Qe(), i = e.id || s, l = 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
+    l
   );
   y.current = D;
   const [N] = qe(e.prefix), [L] = qe(e.suffix);
@@ -309,7 +309,7 @@ const me = {
       if (e.disabled)
         return;
       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);
+      const W = ue(Ge(b.eventValue, e.min, e.max), e.format, l), K = Ge(l.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,
         R,
@@ -321,15 +321,15 @@ const me = {
   ), H = n.useCallback(
     (R) => {
       const b = E();
-      h.current = !1, V(R, Ta(b, e.format, i));
+      h.current = !1, V(R, Ta(b, e.format, l));
     },
-    [e.format, e.onChange, i, V, E]
+    [e.format, e.onChange, l, V, E]
   ), q = n.useCallback(
     (R) => {
       let b = E();
-      const W = i.parseNumber(String(b.currentLooseValue), e.format);
+      const W = l.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 && R.key === K.minusSign, le = K && R.key === K.decimal;
+        const K = l.numberSymbols(), ee = K && R.key === K.minusSign, le = K && R.key === K.decimal;
         h.current = !ee && !le;
         return;
       }
@@ -342,7 +342,7 @@ const me = {
             e.min,
             e.max,
             e.format,
-            i
+            l
           );
           break;
         case 40:
@@ -353,19 +353,19 @@ const me = {
             e.min,
             e.max,
             e.format,
-            i
+            l
           );
           break;
         case 13: {
           if (e.rangeOnEnter === !1)
             return;
-          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;
+          const K = ue(Ge(W, e.min, e.max), e.format, l), ee = Ge(l.parseNumber(K, e.format), e.min, e.max);
+          b.eventValue = ee, b.currentLooseValue = ue(ee, e.format, l), 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 = Ta(b, e.format, i));
+          const K = o.current, ee = l.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 = Ta(b, e.format, l));
           break;
         }
         default:
@@ -385,13 +385,13 @@ const me = {
         return;
       const b = E();
       Da(
-        i.parseNumber(String(b.currentLooseValue), e.format),
+        l.parseNumber(String(b.currentLooseValue), e.format),
         b,
         e.step,
         e.min,
         e.max,
         e.format,
-        i
+        l
       ), V(R, b);
     },
     [e.format, e.min, e.max, e.step, e.onChange, e.readOnly, e.disabled, V, E]
@@ -401,13 +401,13 @@ const me = {
         return;
       const b = E();
       Ba(
-        i.parseNumber(String(b.currentLooseValue), e.format),
+        l.parseNumber(String(b.currentLooseValue), e.format),
         b,
         e.step,
         e.min,
         e.max,
         e.format,
-        i
+        l
       ), V(R, b);
     },
     [e.format, e.min, e.max, e.step, e.onChange, e.readOnly, e.disabled, V, E]
@@ -494,7 +494,7 @@ const me = {
         autoCorrect: "off",
         type: e.inputType || "tel",
         className: "k-input-inner",
-        id: l,
+        id: i,
         name: e.name,
         readOnly: e.readOnly,
         style: e.inputStyle,
@@ -549,7 +549,7 @@ const me = {
     ua,
     {
       label: e.label,
-      editorId: l,
+      editorId: i,
       editorValue: D === null ? "" : D,
       editorValid: j,
       editorDisabled: e.disabled,
@@ -631,9 +631,9 @@ const ae = (a) => a != null, se = (a, t, e) => !ae(a) || isNaN(a) || a <= t ? t
     throw new Error(`Unsupported color output format '${t}'. The available options are 'hex' or 'rgba'.`);
   if (!ae(a))
     return;
-  const l = mt(a.trim(), e);
-  if (ae(l))
-    return t === "hex" ? l.toCss() : l.toCssRgba();
+  const i = mt(a.trim(), e);
+  if (ae(i))
+    return t === "hex" ? i.toCss() : i.toCssRgba();
 }, Dt = (a, t = !0) => {
   const e = mt(a, t);
   return ae(e) ? e.toHSV() : {};
@@ -641,17 +641,17 @@ const ae = (a) => a != null, se = (a, t, e) => !ae(a) || isNaN(a) || a <= t ? t
   const e = mt(a, t);
   return ae(e) ? e.toBytes() : {};
 }, 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 an.fromHSV(t, e, s, l).toCssRgba();
+  const t = se(a.h, 0, 359.9), e = se(a.s, 0, 1), s = se(a.v, 0, 1), i = se(a.a, 0, 1);
+  return an.fromHSV(t, e, s, i).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 an.fromBytes(t, e, s, l).toCssRgba();
+  const t = se(a.r, 0, 255), e = se(a.g, 0, 255), s = se(a.b, 0, 255), i = se(a.a, 0, 1);
+  return an.fromBytes(t, e, s, i).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);
+  const e = se(a.r, 0, 255), s = se(a.g, 0, 255), i = se(a.b, 0, 255), l = 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) * f + i * l)
+    r: Math.round((1 - l) * c + l * e),
+    g: Math.round((1 - l) * o + l * s),
+    b: Math.round((1 - l) * f + l * i)
   };
 }, _a = (a) => {
   let t = [a.r || 0, a.g || 0, a.b || 0].map(function(e) {
@@ -763,8 +763,8 @@ const ae = (a) => a != null, se = (a, t, e) => !ae(a) || isNaN(a) || a <= t ? t
       label: t,
       labelClassName: e,
       id: s,
-      validationMessage: l,
-      defaultValue: i,
+      validationMessage: i,
+      defaultValue: l,
       valid: c,
       // Removed to support direct use in Form Field component
       visited: o,
@@ -836,8 +836,8 @@ vn.displayName = "KendoReactInput";
 class is extends n.Component {
   constructor(t) {
     super(t), this.onChange = (e) => {
-      const s = e.target.value, l = Ne(s, "rgba");
-      this.setState({ hex: s }), ae(l) && this.props.onHexChange(s, l, e);
+      const s = e.target.value, i = Ne(s, "rgba");
+      this.setState({ hex: s }), ae(i) && this.props.onHexChange(s, i, e);
     }, this.onBlur = () => {
       ae(Ne(this.state.hex, "rgba")) || this.setState({ hex: this.state.originalHex });
     }, this.state = { hex: this.props.hex, originalHex: this.props.hex };
@@ -871,7 +871,7 @@ class ha extends n.Component {
     }, this.state = { inputMode: t.defaultInputMode || Be[1] };
   }
   render() {
-    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]);
+    const t = Je(this), e = t.toLanguageString(Fe, $[ln]), s = t.toLanguageString(Fe, $[Fe]), i = t.toLanguageString(Fe, $[nn]), l = 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,
       {
@@ -915,7 +915,7 @@ class ha extends n.Component {
         onChange: this.onRgbaGChange,
         disabled: this.props.disabled
       }
-    ), /* @__PURE__ */ n.createElement(We, { className: "k-colorgradient-input-label" }, l)), /* @__PURE__ */ n.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ n.createElement(
+    ), /* @__PURE__ */ n.createElement(We, { className: "k-colorgradient-input-label" }, i)), /* @__PURE__ */ n.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ n.createElement(
       ze,
       {
         inputType: "number",
@@ -928,7 +928,7 @@ class ha extends n.Component {
         onChange: this.onRgbaBChange,
         disabled: this.props.disabled
       }
-    ), /* @__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(
+    ), /* @__PURE__ */ n.createElement(We, { className: "k-colorgradient-input-label" }, l))), this.state.inputMode === "rgba" && /* @__PURE__ */ n.createElement("div", { className: "k-vstack" }, this.props.opacity && /* @__PURE__ */ n.createElement(
       ze,
       {
         inputType: "number",
@@ -961,12 +961,12 @@ class ha extends n.Component {
 Nn(ha);
 da(ha);
 const kn = "data-slider-label", Rr = (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";
+  const t = n.useRef(null), e = Ae(t), s = a.vertical ? { bottom: `${a.position}%` } : { [e === "rtl" ? "right" : "left"]: `${a.position}%` }, i = a.vertical ? "k-tick-vertical" : "k-tick-horizontal";
   return /* @__PURE__ */ n.createElement(
     "li",
     {
       ref: t,
-      className: `k-tick k-tick-large ${l}`,
+      className: `k-tick k-tick-large ${i}`,
       title: a.title,
       style: {
         zIndex: 1,
@@ -994,14 +994,14 @@ class bt 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 ? 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";
+      const s = this.state.dir === "rtl" ? this.props.vertical ? Tt : Ia : this.props.vertical ? Tt : La, i = this.state.dir === "rtl" ? this.props.vertical ? ht : La : this.props.vertical ? ht : Ia, l = 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,
         {
           className: "k-button-decrease",
           rounded: "full",
           icon: c,
-          svgIcon: l,
+          svgIcon: i,
           title: e.decrementTitle,
           onClick: e.decrement
         }
@@ -1010,7 +1010,7 @@ class bt extends n.Component {
         {
           className: "k-button-increase",
           rounded: "full",
-          icon: i,
+          icon: l,
           svgIcon: s,
           title: e.incrementTitle,
           onClick: e.increment
@@ -1042,7 +1042,7 @@ class bt extends n.Component {
     }, this.dragOver = (e) => {
       e.event.originalEvent.preventDefault(), this.drag(e);
     }, this.drag = (e) => {
-      const s = e.element.getBoundingClientRect(), l = this.props.vertical ? s.bottom - e.event.clientY : this.state.dir === "rtl" ? s.right - e.event.clientX : e.event.clientX - s.left, i = this.props.vertical ? s.height : s.width, c = l / i;
+      const s = e.element.getBoundingClientRect(), i = this.props.vertical ? s.bottom - e.event.clientY : this.state.dir === "rtl" ? s.right - e.event.clientX : e.event.clientX - s.left, l = this.props.vertical ? s.height : s.width, c = i / l;
       this.change(e, this.props.min + c * (this.props.max - this.props.min));
     }, pe(me);
   }
@@ -1050,8 +1050,8 @@ class bt extends n.Component {
    * @hidden
    */
   static getDerivedStateFromProps(t, e) {
-    const s = t.value !== void 0 ? t.value : e.value, { min: l, max: i } = t;
-    return s === void 0 ? null : { value: Math.min(Math.max(s, l), i) };
+    const s = t.value !== void 0 ? t.value : e.value, { min: i, max: l } = t;
+    return s === void 0 ? null : { value: Math.min(Math.max(s, i), l) };
   }
   /**
    * @hidden
@@ -1066,11 +1066,11 @@ class bt extends n.Component {
    * @hidden
    */
   render() {
-    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%" } : {};
+    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" }, i = this.props.vertical ? { paddingTop: 0, height: "100%" } : {};
     return /* @__PURE__ */ n.createElement(
       "div",
       {
-        ref: (i) => this._element = i,
+        ref: (l) => this._element = l,
         dir: this.state.dir,
         id: this.props.id,
         style: { gap: 0, ...this.props.style },
@@ -1112,15 +1112,15 @@ class bt extends n.Component {
             "ul",
             {
               className: "k-reset k-slider-items",
-              style: { margin: 0, ...l }
+              style: { margin: 0, ...i }
             },
-            n.Children.map(this.props.children, (i) => i && n.cloneElement(
-              i,
+            n.Children.map(this.props.children, (l) => l && n.cloneElement(
+              l,
               {
-                position: 100 * (i.props.position - this.props.min) / (this.props.max - this.props.min),
+                position: 100 * (l.props.position - this.props.min) / (this.props.max - this.props.min),
                 vertical: this.props.vertical
               },
-              i.props.children
+              l.props.children
             ))
           ),
           /* @__PURE__ */ n.createElement(
@@ -1128,7 +1128,7 @@ class bt extends n.Component {
             {
               className: "k-slider-track",
               style: this.props.vertical ? { bottom: 0, height: "100%" } : { [this.state.dir === "rtl" ? "right" : "left"]: 0, width: "100%" },
-              ref: (i) => this._sliderTrack = i
+              ref: (l) => this._sliderTrack = l
             },
             /* @__PURE__ */ n.createElement(
               "div",
@@ -1222,18 +1222,18 @@ function ps(a, t) {
 }
 class yn extends n.Component {
   render() {
-    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 }));
+    const t = Je(this), e = t.toLanguageString($t, $[$t]), s = t.toLanguageString(Ht, $[Ht]), i = t.toLanguageString(Gt, $[Gt]), l = 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 = `${i}: ${d}`, y = /* @__PURE__ */ n.createElement("span", { className: "k-contrast-validation k-text-success" }, l, " ", /* @__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));
   }
 }
 da(yn);
 const it = (a, t) => a.length === 0 ? "" : `<path d="${a.reduce(
-  (s, l, i, c) => i === 0 ? (
+  (s, i, l, c) => l === 0 ? (
     // if first point
-    `M ${l[0]},${l[1]}`
+    `M ${i[0]},${i[1]}`
   ) : (
     // else
-    `${s} ${t(l, i, c)}`
+    `${s} ${t(i, l, c)}`
   ),
   ""
 )}" fill="none" stroke="white" stroke-width="1"/>`, ms = (a, t) => {
@@ -1242,27 +1242,27 @@ const it = (a, t) => a.length === 0 ? "" : `<path d="${a.reduce(
     length: Math.sqrt(Math.pow(e, 2) + Math.pow(s, 2)),
     angle: Math.atan2(s, e)
   };
-}, 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;
+}, gs = (a) => (t, e, s, i) => {
+  const l = e || t, c = s || t, o = 0.1, f = a(l, c), d = f.angle + (i ? 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]}`;
+  const [i, l] = a(s[e - 1], s[e - 2], t), [c, o] = a(t, s[e - 1], s[e + 1], !0);
+  return `C ${i},${l} ${c},${o} ${t[0]},${t[1]}`;
 }, Aa = 4.5, $a = 7, lt = 16;
 class vs extends n.Component {
   renderSvgCurveLine() {
-    const t = this.props.metrics, e = (i, c, o, f, d) => {
+    const t = this.props.metrics, e = (l, 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) => {
+      return o + 0.5 > f ? h < l + 1 && h > l - 1 ? m : null : d(h, l) ? e(l, c, o, f - (f - o) / 2, d) : e(l, c, o + (f - o) / 2, f, d);
+    }, s = (l, c, o = !1) => {
       const f = [];
       for (let d = 0; d <= t.width; d += t.width / c) {
-        const m = e(i, d, 0, t.height, o ? (u, h) => u < h : (u, h) => u > h);
+        const m = e(l, d, 0, t.height, o ? (u, h) => u < h : (u, h) => u > h);
         m !== null && f.push([d, m]);
       }
       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);
+    }, i = bs(gs(ms));
+    return it(s(Aa, lt), i) + it(s(Aa, lt, !0), i) + it(s($a, lt), i) + it(s($a, lt, !0), i);
   }
   shouldComponentUpdate(t) {
     return !(t.hsva.h === this.props.hsva.h && t.hsva.a === this.props.hsva.a && this.props.backgroundColor === t.backgroundColor);
@@ -1288,21 +1288,21 @@ class vs 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) => {
+    super(a), this.wrapper = null, this.onHexChange = (e, s, i) => {
       if (this.isUncontrolled) {
-        const i = Dt(s);
-        this.setState({ hsva: i, backgroundColor: rt(i.h), rgba: Ke(s), hex: e });
+        const l = Dt(s);
+        this.setState({ hsva: l, backgroundColor: rt(l.h), rgba: Ke(s), hex: e });
       } else
         ds(this.state.guid, s, e);
-      this.dispatchChangeEvent(s, l, l.nativeEvent);
+      this.dispatchChangeEvent(s, i, i.nativeEvent);
     }, this.onRgbaChange = (e, s) => {
-      const l = ns(e);
+      const i = ns(e);
       if (this.isUncontrolled) {
-        const i = Dt(l), c = Ne(l, "hex");
-        this.setState({ hsva: i, backgroundColor: rt(i.h), rgba: e, hex: c });
+        const l = Dt(i), c = Ne(i, "hex");
+        this.setState({ hsva: l, backgroundColor: rt(l.h), rgba: e, hex: c });
       } else
-        cs(this.state.guid, l, e);
-      this.dispatchChangeEvent(l, s.syntheticEvent, s.nativeEvent);
+        cs(this.state.guid, i, e);
+      this.dispatchChangeEvent(i, s.syntheticEvent, s.nativeEvent);
     }, this.onAlphaSliderChange = (e) => {
       this.handleHsvaChange(
         Object.assign({}, this.state.hsva, { a: e.value / 100 }),
@@ -1322,7 +1322,7 @@ const ks = "rgba", Ha = "rgba(255, 255, 255, 1)", la = 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), f = Object.assign(
+      const s = this.getGradientRectMetrics(), i = e.clientX - s.left, l = e.clientY - s.top, c = se(i, 0, s.width), o = se(l, 0, s.height), f = Object.assign(
         {},
         this.state.hsva,
         { s: c / s.width, v: 1 - o / s.height }
@@ -1393,8 +1393,8 @@ const ks = "rgba", Ha = "rgba(255, 255, 255, 1)", la = class extends n.Component
   handleHsvaChange(a, t, e) {
     const s = fa(a);
     if (this.isUncontrolled) {
-      const l = Ne(s, "hex");
-      this.setState({ hsva: a, backgroundColor: rt(a.h), rgba: Ke(s), hex: l });
+      const i = Ne(s, "hex");
+      this.setState({ hsva: a, backgroundColor: rt(a.h), rgba: Ke(s), hex: i });
     } else
       os(this.state.guid, s, a);
     this.dispatchChangeEvent(s, t, e);
@@ -1413,8 +1413,8 @@ const ks = "rgba", Ha = "rgba(255, 255, 255, 1)", la = class extends n.Component
    */
   static getStateFromValue(a, t) {
     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 };
+    const e = hs(t, a) || Dt(a), s = ps(t, a) || Ke(a), i = fs(t, a) || Ne(a, "hex"), l = rt(e.h);
+    return { hsva: e, backgroundColor: l, rgba: s, hex: i };
   }
   /**
    * @hidden
@@ -1563,8 +1563,8 @@ class Cs {
     if (this.colorRows = [], !!(ae(t) && t.length)) {
       e = e || t.length;
       for (let s = 0; s < t.length; s += e) {
-        const l = t.slice(s, e + s);
-        this.colorRows.push(l);
+        const i = t.slice(s, e + s);
+        this.colorRows.push(i);
       }
     }
   }
@@ -1573,10 +1573,10 @@ class Cs {
       return;
     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++)
-        if (s.some((c) => c === this.colorRows[l][i]))
-          return { row: l, col: i };
+    for (let i = 0; i < this.colorRows.length; i++)
+      for (let l = 0; l < this.colorRows[i].length; l++)
+        if (s.some((c) => c === this.colorRows[i][l]))
+          return { row: i, col: l };
   }
   getColorAt(t) {
     if (ae(t) && ae(this.colorRows[t.row]))
@@ -1585,8 +1585,8 @@ class Cs {
   getNextCell(t, e, s) {
     if (!(ae(t) && ae(t.row) && ae(t.col)))
       return { row: 0, col: 0 };
-    const l = this.clampIndex(t.row + s, this.colorRows.length - 1), i = this.clampIndex(t.col + e, this.colorRows[l].length - 1);
-    return { row: l, col: i };
+    const i = this.clampIndex(t.row + s, this.colorRows.length - 1), l = this.clampIndex(t.col + e, this.colorRows[i].length - 1);
+    return { row: i, col: l };
   }
   clampIndex(t, e) {
     return t < 0 ? 0 : t > e ? e : t;
@@ -1690,13 +1690,13 @@ class kt extends n.Component {
   render() {
     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);
+    const s = e.getCellCoordsFor(this.state.selectedColor), i = e.getCellCoordsFor(this.state.focusedColor), l = G("k-colorpalette", { "k-disabled": this.props.disabled }, this.props.className);
     return t.colors.length ? /* @__PURE__ */ n.createElement(
       "div",
       {
         id: this.props.id,
         role: "grid",
-        className: i,
+        className: l,
         onFocus: this.onFocus,
         onBlur: this.onBlur,
         onKeyDown: this.onKeyDown,
@@ -1706,7 +1706,7 @@ class kt extends n.Component {
         tabIndex: ie(this.props.tabIndex, this.props.disabled),
         ref: (c) => this.wrapper = c
       },
-      /* @__PURE__ */ n.createElement("table", { className: "k-colorpalette-table", role: "presentation" }, /* @__PURE__ */ n.createElement("tbody", { role: "rowgroup" }, this.renderRows(e.colorRows, s, l)))
+      /* @__PURE__ */ n.createElement("table", { className: "k-colorpalette-table", role: "presentation" }, /* @__PURE__ */ n.createElement("tbody", { role: "rowgroup" }, this.renderRows(e.colorRows, s, i)))
     ) : "";
   }
   /**
@@ -1757,12 +1757,12 @@ class kt extends n.Component {
       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)));
+    return t.map((i, l) => /* @__PURE__ */ n.createElement("tr", { role: "row", key: l }, this.renderColumns(i, l, 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, 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";
+  renderColumns(t, e, s, i) {
+    const l = s !== void 0 && s.row === e, c = s && s.col, o = i !== void 0 && i.row === e, f = i && i.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(
+      const M = l && c === y, D = G(
         "k-colorpalette-tile",
         {
           "k-selected": M,
@@ -1814,7 +1814,7 @@ const Ss = "bottom", ws = "top", En = (a) => {
   const t = a.popupSettings || {}, e = a.dir === "rtl" ? "right" : "left", s = n.useMemo(
     () => ({ horizontal: e, vertical: Ss }),
     [e]
-  ), l = n.useMemo(
+  ), i = n.useMemo(
     () => ({ horizontal: e, vertical: ws }),
     [e]
   );
@@ -1828,7 +1828,7 @@ const Ss = "bottom", ws = "top", En = (a) => {
       ...t,
       anchor: a.popupAnchor,
       anchorAlign: s,
-      popupAlign: l,
+      popupAlign: i,
       show: a.open,
       onOpen: a.onOpen,
       onClose: a.onClose,
@@ -1846,8 +1846,8 @@ const Is = {
 }, Bt = (a) => a !== void 0, Rs = he(), ga = n.forwardRef((a, t) => {
   pe(me);
   const e = Re(Rs, a), s = _e(), {
-    size: l = dt.size,
-    rounded: i = dt.rounded,
+    size: i = dt.size,
+    rounded: l = dt.rounded,
     fillMode: c = dt.fillMode,
     popupSettings: o,
     gradientSettings: f,
@@ -1966,9 +1966,9 @@ const Is = {
         "k-picker",
         "k-icon-picker",
         {
-          [`k-picker-${ne.sizeMap[l] || l}`]: l,
+          [`k-picker-${ne.sizeMap[i] || i}`]: i,
           [`k-picker-${c}`]: c,
-          [`k-rounded-${ne.roundedMap[i] || i}`]: i,
+          [`k-rounded-${ne.roundedMap[l] || l}`]: l,
           "k-invalid": !He,
           "k-disabled": u,
           "k-focus": V,
@@ -2070,10 +2070,10 @@ 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 = 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;
+  const e = n.useRef(null), s = n.useRef(null), i = n.useRef(null), { defaultValue: l = 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 || l), [y, M] = n.useState(a.value || l), D = a.value !== void 0 ? a.value : y;
   n.useEffect(() => {
-    h(a.value || i);
-  }, [a.value, i]);
+    h(a.value || l);
+  }, [a.value, l]);
   const N = _e(), L = n.useCallback(
     () => {
       e.current && e.current.focus();
@@ -2093,16 +2093,16 @@ const Ka = "rgba(255, 255, 255, 1)", Sn = n.forwardRef((a, t) => {
     [d]
   ), w = n.useCallback(
     (E) => {
-      if (h(i), a.onPreviewChange) {
+      if (h(l), a.onPreviewChange) {
         const V = {
-          value: i,
+          value: l,
           nativeEvent: E.nativeEvent,
           syntheticEvent: E
         };
         a.onPreviewChange.call(void 0, V);
       }
     },
-    [i, a.onPreviewChange]
+    [l, a.onPreviewChange]
   ), B = n.useCallback(
     (E) => {
       if (h(E.value), a.onPreviewChange) {
@@ -2229,7 +2229,7 @@ const Ka = "rgba(255, 255, 255, 1)", Sn = n.forwardRef((a, t) => {
     ), 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,
+        ref: i,
         role: "none",
         tabIndex: -1,
         ariaLabel: void 0,
@@ -2280,7 +2280,7 @@ class Y {
     return t(this.value, this.rest);
   }
   concat(t) {
-    return this.map((e, s) => t.chain((l, i) => e.concat([l])));
+    return this.map((e, s) => t.chain((i, l) => e.concat([i])));
   }
   toString() {
     return `Result({ value: '${this.value}', rest: ${this.rest} })`;
@@ -2330,29 +2330,29 @@ class Ce {
   }
   // chain :: Chain m => m a ~> (a -> m b) -> m b
   chain(t) {
-    return new Ce((e) => this.parse(e).chain((s, l) => t(s).run(l)));
+    return new Ce((e) => this.parse(e).chain((s, i) => t(s).run(i)));
   }
   isLiteral(t) {
     return this.run(t).type === Pe.Literal;
   }
 }
 const Ns = (a) => (t) => new Ce((e) => {
-  const { prompt: s, promptPlaceholder: l } = a;
+  const { prompt: s, promptPlaceholder: i } = a;
   for (; !e.eof(); ) {
-    const { char: i, control: c } = e.peek();
-    if (i === c && c === s)
+    const { char: l, control: c } = e.peek();
+    if (l === c && c === s)
       return e.eat(), new Y(s, e, Pe.Mask);
-    if (t.test(i))
-      return e.eat(), new Y(i, e, Pe.Mask);
-    if (i === l)
+    if (t.test(l))
+      return e.eat(), new Y(l, e, Pe.Mask);
+    if (l === i)
       return e.eat(), new Y(s, e, Pe.Mask);
     e.eat_input();
   }
   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)
+    const { char: s, control: i } = e.peek();
+    if (s === a && i === a)
       return e.eat(), new Y(s, e);
     if (t.test(s))
       return e.eat(), new Y(s, e);
@@ -2366,12 +2366,12 @@ const Ns = (a) => (t) => new Ce((e) => {
   return e === a && t.eat(), new Y(a, t);
 }), ot = (a, t) => new Ce((e) => {
   let { char: s } = e.next();
-  const l = a[s];
-  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);
+  const i = a[s];
+  return s === Ms ? (s = e.next().char, new Y(t.literal(s), e)) : i ? new Y(t.mask(i), 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);
+  let { char: i } = t.next();
+  return i === e ? new Y(s, t) : new Y(i, t);
 }), Wa = (a) => new Ce((t) => {
   let { char: e } = t.next();
   return a ? new Y(e, t) : new Y("", t);
@@ -2385,8 +2385,8 @@ class Ts {
   constructor() {
     this.rules = {}, this.prompt = "_", this.mask = "", this.promptPlaceholder = " ", this.includeLiterals = !1, this.maskTokens = [], this.unmaskTokens = [], this.rawTokens = [], this.validationTokens = [];
   }
-  update({ mask: t = "", prompt: e = "", promptPlaceholder: s = " ", rules: l = {}, includeLiterals: i = !1 }) {
-    this.mask = t, this.prompt = e, this.promptPlaceholder = s, this.rules = l, this.includeLiterals = i, this.tokenize();
+  update({ mask: t = "", prompt: e = "", promptPlaceholder: s = " ", rules: i = {}, includeLiterals: l = !1 }) {
+    this.mask = t, this.prompt = e, this.promptPlaceholder = s, this.rules = i, this.includeLiterals = l, this.tokenize();
   }
   validationValue(t = "") {
     let e = t;
@@ -2412,24 +2412,24 @@ class Ts {
   maskInput(t, e, s) {
     return t.length < e.length ? this.maskRemoved(t, e, s) : this.maskInserted(t, e, s);
   }
-  maskInRange(t, e, s, l) {
-    let i = "", c = l;
-    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("");
+  maskInRange(t, e, s, i) {
+    let l = "", c = i;
+    const o = e.split("").slice(0, s), f = e.split("").slice(i);
+    return Oe(this.maskTokens.slice(s, i)).run(t).fold((d) => {
+      l = o.concat(d).concat(f).join("");
     }), {
       selection: c,
-      value: i
+      value: l
     };
   }
   maskRemoved(t, e, s) {
-    let l = "", i = s;
+    let i = "", l = s;
     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("");
+      l = this.adjustPosition(d, l), i = d.concat(c).join("");
     }), {
-      selection: i,
-      value: l
+      selection: l,
+      value: i
     };
   }
   adjustPosition(t, e) {
@@ -2437,17 +2437,17 @@ class Ts {
     return !this.maskTokens[e].isLiteral(s) && s !== this.prompt ? e + 1 : e;
   }
   maskInserted(t, e, s) {
-    let l = "", i = s;
+    let i = "", l = s;
     const c = t.slice(0, s);
     return Oe(this.unmaskTokens).run(c, e).chain((o) => {
-      i = o.join("").length;
-      const f = e.slice(i);
+      l = o.join("").length;
+      const f = e.slice(l);
       return Oe(this.maskTokens).run(o.join("") + f, e);
     }).fold((o) => {
-      l = o.join("");
+      i = o.join("");
     }), {
-      selection: i,
-      value: l
+      selection: l,
+      value: i
     };
   }
   get maskTokenCreator() {
@@ -2466,8 +2466,8 @@ class Ts {
   get rawTokenCreator() {
     const { prompt: t, promptPlaceholder: e, includeLiterals: s } = this;
     return {
-      literal: (l) => Wa(s),
-      mask: (l) => ja({ prompt: t, promptPlaceholder: e })
+      literal: (i) => Wa(s),
+      mask: (i) => ja({ prompt: t, promptPlaceholder: e })
     };
   }
   get validationTokenCreator() {
@@ -2526,7 +2526,7 @@ const wn = {
       const { selectionStart: e, selectionEnd: s } = t.target;
       s !== e && (this._isPasted = !0, this._selection = [e || 0, s || 0]);
     }, this.onChangeHandler = (t) => {
-      const e = t.currentTarget, s = e.value, l = this._selection[0] || 0, i = this._selection[1] || 0;
+      const e = t.currentTarget, s = e.value, i = this._selection[0] || 0, l = this._selection[1] || 0;
       if (!this.props.mask) {
         this._isPasted = !1, this._selection = [null, null], this.triggerOnChange(s, t);
         return;
@@ -2535,8 +2535,8 @@ const wn = {
       let o;
       if (this._isPasted) {
         this._isPasted = !1;
-        const f = c.length - i, d = s.length - f;
-        o = this._service.maskInRange(s.slice(l, d), c, l, i);
+        const f = c.length - l, d = s.length - f;
+        o = this._service.maskInRange(s.slice(i, d), c, i, l);
       } else
         o = this._service.maskInput(s, c, e.selectionStart || 0);
       this._selection = [o.selection, o.selection], this.triggerOnChange(o.value, t);
@@ -2639,8 +2639,8 @@ const wn = {
   componentDidUpdate(a, t) {
     if (this.element && this.state.focused && t.focused) {
       let [e, s] = this._selection;
-      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);
+      const i = a.selection, l = this.props.selection;
+      (!i && l || i && l && (i.start !== l.start || i.end !== l.end)) && (e = l.start, s = l.end), e !== null && s !== null && this.element.setSelectionRange(e, s);
     }
     zs(a, this.props) && this.updateService(), this.setValidity();
   }
@@ -2658,7 +2658,7 @@ const wn = {
       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 || {}, {
+    } = this.props, s = this.props.id || this._inputId, i = !this.validityStyles || this.validity.valid, l = this.props.style || {}, {
       prefix: c = Ve.defaultProps.prefix,
       suffix: o = Ve.defaultProps.suffix
     } = this.props, [f] = qe(c), [d] = qe(o), m = /* @__PURE__ */ n.createElement(
@@ -2671,13 +2671,13 @@ const wn = {
             [`k-input-${ne.sizeMap[a] || a}`]: a,
             [`k-input-${t}`]: t,
             [`k-rounded-${ne.roundedMap[e] || e}`]: e,
-            "k-invalid": !l,
+            "k-invalid": !i,
             "k-required": this.required,
             "k-disabled": this.props.disabled
           },
           this.props.className
         ),
-        style: this.props.label ? i : { width: this.props.width, ...i }
+        style: this.props.label ? l : { width: this.props.width, ...l }
       },
       /* @__PURE__ */ n.createElement(f, null),
       /* @__PURE__ */ n.createElement(
@@ -2718,7 +2718,7 @@ const wn = {
         label: this.props.label,
         editorId: s,
         editorValue: this.value,
-        editorValid: l,
+        editorValid: i,
         editorDisabled: this.props.disabled,
         editorPlaceholder: this.props.placeholder,
         children: m,
@@ -2787,7 +2787,7 @@ yt.propTypes = {
   mask: r.string,
   rules: function(a, t, e) {
     const s = a.rules;
-    return s !== void 0 && !Object.entries(s).some((i) => typeof i != "string" || !(s[i] instanceof RegExp)) ? new Error(
+    return s !== void 0 && !Object.entries(s).some((l) => typeof l != "string" || !(s[l] instanceof RegExp)) ? new Error(
       "Invalid prop `" + t + "` supplied to `" + e + "`. Validation failed."
     ) : null;
   },
@@ -2900,24 +2900,24 @@ const Hs = (a, t) => {
   }
   return e;
 }, Gs = (a, t, e) => {
-  const [s, l] = n.useState(a), i = n.useCallback(
+  const [s, i] = n.useState(a), l = n.useCallback(
     (c) => {
       const o = Hs(t.state || s, { ...c, ...t });
-      e && e(o, c.event), l(o);
+      e && e(o, c.event), i(o);
     },
     [t, e]
   );
-  return [s, i];
+  return [s, l];
 }, Ks = he(), ba = n.forwardRef((a, t) => {
   pe(me);
-  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(
+  const e = Re(Ks, a), s = n.useRef(null), i = n.useRef(null), l = n.useRef(null), c = n.useRef(null), o = n.useRef(null), f = n.useCallback(
     () => {
       c.current && c.current.focus();
     },
     [c]
   );
   n.useImperativeHandle(s, () => ({
-    element: l.current,
+    element: i.current,
     focus: f,
     props: e
   })), n.useImperativeHandle(t, () => s.current);
@@ -2930,7 +2930,7 @@ const Hs = (a, t) => {
   ), u = n.useMemo(
     () => e.step !== void 0 ? e.step : ut.step,
     [e.step, ut.step]
-  ), h = Ae(l, e.dir), y = (g, k) => {
+  ), h = Ae(i, e.dir), y = (g, k) => {
     e.onChange && s.current && e.onChange.call(void 0, {
       value: g,
       target: s.current,
@@ -3054,7 +3054,7 @@ const Hs = (a, t) => {
     {
       id: e.id,
       style: e.style,
-      ref: l,
+      ref: i,
       dir: h,
       className: G(
         "k-slider",
@@ -3105,7 +3105,7 @@ const Hs = (a, t) => {
           "div",
           {
             "data-selection": !0,
-            ref: i,
+            ref: l,
             title: `${S.start} - ${S.end}`,
             className: "k-slider-selection",
             style: e.vertical ? { height: I - O + "%", bottom: O + "%" } : {
@@ -3154,8 +3154,8 @@ const Hs = (a, t) => {
 }), qs = {
   value: (a, t, e) => {
     if (a.value) {
-      const s = a.value.start, l = a.value.end, i = a.min, c = a.max;
-      if (s > l || s > c || s < i || l > c || l < i || l < s)
+      const s = a.value.start, i = a.value.end, l = a.min, c = a.max;
+      if (s > i || s > c || s < l || i > c || i < l || i < s)
         return new Error(
           `Invalid prop + ${t} supplied to ${e}.
                     The { start, end } value must be between the min & max value and { start, end } must be start < end.
@@ -3166,8 +3166,8 @@ const Hs = (a, t) => {
   },
   defaultValue: (a, t, e) => {
     if (a.defaultValue) {
-      const s = a.defaultValue.start, l = a.defaultValue.end, i = a.min, c = a.max;
-      if (s > l || s > c || s < i || l > c || l < i || l < s)
+      const s = a.defaultValue.start, i = a.defaultValue.end, l = a.min, c = a.max;
+      if (s > i || s > c || s < l || i > c || i < l || i < s)
         return new Error(
           `Invalid prop + ${t} supplied to ${e}.
                     The { start, end } value must be between the min & max value and { start, end } must be start < end.
@@ -3179,24 +3179,24 @@ const Hs = (a, t) => {
   onChange: r.func,
   step: r.number,
   min: (a, t, e) => {
-    const s = a[t], l = a.min, i = a.max;
-    return l === void 0 ? new Error(
+    const s = a[t], i = a.min, l = a.max;
+    return i === void 0 ? new Error(
       `Invalid prop + ${t} supplied to ${e}.
                 ${t} value can not be undefined.
                 `
-    ) : s && l >= i ? new Error(
+    ) : s && i >= l ? new Error(
       `Invalid prop + ${t} supplied to ${e}.
                 ${t} value can not be equal to or bigger than the max value.
                 `
     ) : null;
   },
   max: (a, t, e) => {
-    const s = a[t], l = a.min, i = a.max;
-    return i === void 0 ? new Error(
+    const s = a[t], i = a.min, l = a.max;
+    return l === void 0 ? new Error(
       `Invalid prop + ${t} supplied to ${e}.
                 ${t} value can not be undefined.
                 `
-    ) : s && i <= l ? new Error(
+    ) : s && l <= i ? new Error(
       `Invalid prop + ${t} supplied to ${e}.
                 ${t} value can not be equal to or smaller than the min value.
                 `
@@ -3227,8 +3227,8 @@ const ft = class extends n.Component {
         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;
+      const i = s.offsetWidth, l = e.offsetWidth;
+      return t < 0 ? 0 : t > i - l ? i - l : 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 = this.props.id, this.defaultValidationMessage = Je(this), this.focus = () => {
@@ -3329,12 +3329,12 @@ const ft = 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: f } = this.props;
+    const { focused: a } = this.state, { dir: t, disabled: e, trackRounded: s, thumbRounded: i, size: l, 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, m = G(
       "k-switch",
       {
-        [`k-switch-${ne.sizeMap[i] || i}`]: i,
+        [`k-switch-${ne.sizeMap[l] || l}`]: l,
         [`k-rounded-${ne.roundedMap[s] || s}`]: s,
         "k-switch-on": this.value,
         "k-switch-off": !this.value,
@@ -3383,7 +3383,7 @@ const ft = class extends n.Component {
         /* @__PURE__ */ n.createElement("span", { className: "k-switch-label-on" }, o),
         /* @__PURE__ */ n.createElement("span", { className: "k-switch-label-off" }, c)
       ),
-      /* @__PURE__ */ n.createElement("span", { className: "k-switch-thumb-wrap" }, /* @__PURE__ */ n.createElement("span", { className: G("k-switch-thumb", { [`k-rounded-${l}`]: l }) }))
+      /* @__PURE__ */ n.createElement("span", { className: "k-switch-thumb-wrap" }, /* @__PURE__ */ n.createElement("span", { className: G("k-switch-thumb", { [`k-rounded-${i}`]: i }) }))
     );
   }
 };
@@ -3432,8 +3432,8 @@ const Ws = he(), va = n.forwardRef((a, t) => {
   pe(me);
   const e = Re(Ws, a), {
     ariaDescribedBy: s,
-    ariaLabelledBy: l,
-    checked: i,
+    ariaLabelledBy: i,
+    checked: l,
     className: c,
     labelClassName: o,
     children: f,
@@ -3477,7 +3477,7 @@ const Ws = he(), va = n.forwardRef((a, t) => {
     [g]
   );
   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;
+  const [C, P] = n.useState(d), [j, J] = n.useState(u), R = typeof F == "boolean" || F === null, b = l !== void 0, W = R, K = W ? F : j, ee = b ? l : 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(
     () => {
       v.current && v.current.setCustomValidity && v.current.setCustomValidity(
@@ -3560,7 +3560,7 @@ const Ws = he(), va = n.forwardRef((a, t) => {
     ref: v,
     name: L,
     id: h || be,
-    "aria-labelledby": l,
+    "aria-labelledby": i,
     "aria-describedby": s,
     checked: !!Ee,
     disabled: m,
@@ -3629,8 +3629,8 @@ const Ys = he(), xt = n.forwardRef((a, t) => {
   pe(me);
   const e = Re(Ys, a), {
     ariaDescribedBy: s,
-    checked: l,
-    children: i,
+    checked: i,
+    children: l,
     className: c,
     disabled: o,
     id: f,
@@ -3704,7 +3704,7 @@ const Ys = he(), xt = n.forwardRef((a, t) => {
     ref: O,
     disabled: o,
     tabIndex: ie(M, o),
-    checked: l,
+    checked: i,
     style: y,
     "aria-describedby": s,
     value: D,
@@ -3722,7 +3722,7 @@ const Ys = he(), xt = n.forwardRef((a, t) => {
     },
     m
   ) : null), Z = /* @__PURE__ */ n.createElement("input", { ...H });
-  return u === "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, l) : /* @__PURE__ */ n.createElement(n.Fragment, null, Z, q, l);
 });
 xt.propTypes = {
   ariaDescribedBy: r.string,
@@ -3751,8 +3751,8 @@ const Js = he(), ka = n.forwardRef((a, t) => {
   pe(me);
   const e = Re(Js, a), {
     id: s,
-    ariaLabelledBy: l,
-    ariaDescribedBy: i,
+    ariaLabelledBy: i,
+    ariaDescribedBy: l,
     className: c,
     data: o,
     defaultValue: f,
@@ -3839,8 +3839,8 @@ const Js = he(), ka = n.forwardRef((a, t) => {
       ref: w,
       dir: Z,
       style: y,
-      "aria-labelledby": l,
-      "aria-describedby": i
+      "aria-labelledby": i,
+      "aria-describedby": l
     },
     p
   );
@@ -3868,8 +3868,8 @@ ka.displayName = "KendoRadioGroup";
 const Qs = he(), ya = n.forwardRef((a, t) => {
   const e = Re(Qs, a), {
     size: s,
-    rounded: l,
-    fillMode: i,
+    rounded: i,
+    fillMode: l,
     ariaDescribedBy: c,
     ariaLabelledBy: o,
     autoSize: f,
@@ -3994,8 +3994,8 @@ const Qs = he(), ya = n.forwardRef((a, t) => {
         "k-textarea",
         {
           [`k-input-${ne.sizeMap[s] || s}`]: s,
-          [`k-input-${i}`]: i,
-          [`k-rounded-${ne.roundedMap[l] || l}`]: l,
+          [`k-input-${l}`]: l,
+          [`k-rounded-${ne.roundedMap[i] || i}`]: i,
           "k-invalid": !(K || F !== void 0 || F === !0),
           "k-required": y,
           "k-disabled": u
@@ -4043,13 +4043,13 @@ const er = {
 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);
+  const e = n.useRef(null), s = n.useRef(null), i = Ae(s, a.dir);
   n.useImperativeHandle(e, () => ({
     element: s.current,
     props: a,
     value: a.value
   })), n.useImperativeHandle(t, () => e.current);
-  const i = n.useCallback(
+  const l = n.useCallback(
     (h) => {
       a.onClick && a.onClick.call(
         void 0,
@@ -4133,7 +4133,7 @@ const Et = n.forwardRef((a, t) => {
     {
       id: a.id,
       ref: s,
-      dir: l,
+      dir: i,
       "data-half": a.half,
       tabIndex: a.tabIndex,
       title: a.title,
@@ -4141,13 +4141,13 @@ const Et = n.forwardRef((a, t) => {
       className: G(
         "k-rating-item",
         {
-          "k-rtl": l === "rtl",
+          "k-rtl": i === "rtl",
           "k-selected": a.selected,
           "k-hover": a.hovered
         },
         a.className
       ),
-      onClick: i,
+      onClick: l,
       onKeyDown: c,
       onFocus: o,
       onBlur: f,
@@ -4179,8 +4179,8 @@ const ye = (a, t) => {
   }
   return a;
 }, 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)
+  for (let i = a; i <= t; i += e)
+    if (s === i)
       return !0;
   return !1;
 };
@@ -4205,22 +4205,22 @@ const sr = (a, t) => {
       return a;
   }
 }, Ja = (a, t, e) => {
-  const [s, l] = n.useState(a);
+  const [s, i] = n.useState(a);
   return [s, (c) => {
     const o = sr(t.state || s, { ...c, ...t });
-    e && e(o, c.event), l(o);
+    e && e(o, c.event), i(o);
   }];
 }, 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,
+  const e = Re(rr, a), s = _e(), i = n.useRef(null), l = n.useRef(null), c = Ae(l, e.dir);
+  n.useImperativeHandle(i, () => ({
+    element: l.current,
     props: e
-  })), n.useImperativeHandle(t, () => l.current);
+  })), n.useImperativeHandle(t, () => i.current);
   const o = n.useCallback(
     (p, v) => {
-      e.onChange && l.current && e.onChange.call(void 0, {
+      e.onChange && i.current && e.onChange.call(void 0, {
         value: p,
-        target: l.current,
+        target: i.current,
         syntheticEvent: v
       });
     },
@@ -4287,7 +4287,7 @@ const sr = (a, t) => {
         if (e.onClick) {
           const v = {
             value: w,
-            target: l.current,
+            target: i.current,
             syntheticEvent: p.syntheticEvent
           };
           e.onClick.call(void 0, v);
@@ -4334,7 +4334,7 @@ const sr = (a, t) => {
           void 0,
           {
             value: w,
-            target: l.current,
+            target: i.current,
             syntheticEvent: p
           }
         );
@@ -4345,7 +4345,7 @@ const sr = (a, t) => {
     (p) => {
       if (e.onFocus) {
         const v = {
-          target: l.current,
+          target: i.current,
           syntheticEvent: p
         };
         e.onFocus.call(
@@ -4359,7 +4359,7 @@ const sr = (a, t) => {
     (p) => {
       if (e.onBlur) {
         const v = {
-          target: l.current,
+          target: i.current,
           syntheticEvent: p
         };
         e.onBlur.call(
@@ -4416,7 +4416,7 @@ const sr = (a, t) => {
     {
       id: e.id,
       style: e.style,
-      ref: i,
+      ref: l,
       role: "slider",
       dir: c,
       tabIndex: ie(e.tabIndex, e.disabled, void 0),
@@ -4514,7 +4514,7 @@ function lr(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 = 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) => {
+  const e = Re(fr, a), s = _e(), i = n.useRef(null), l = 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), k(x.value);
@@ -4531,13 +4531,13 @@ const or = 250, cr = 84, Ln = 3, Rn = 2, dr = "#000000", ur = "#ffffff", Qa = (a
     [F]
   ), J = (x) => {
     var U, re;
-    De(x), (re = ((U = f.current) == null ? void 0 : U.element) || i.current) == null || re.focus();
+    De(x), (re = ((U = f.current) == null ? void 0 : U.element) || l.current) == null || re.focus();
   }, R = n.useCallback(() => {
     let x = dr;
-    return !e.color && typeof document != "undefined" && l.current && (x = getComputedStyle(l.current).color), e.color || x;
+    return !e.color && typeof document != "undefined" && i.current && (x = getComputedStyle(i.current).color), e.color || x;
   }, [e.color]), b = n.useCallback(() => {
     let x = ur;
-    return !e.backgroundColor && typeof document != "undefined" && l.current && (x = getComputedStyle(l.current).backgroundColor), e.backgroundColor || x;
+    return !e.backgroundColor && typeof document != "undefined" && i.current && (x = getComputedStyle(i.current).backgroundColor), e.backgroundColor || x;
   }, [e.backgroundColor]), W = () => ({
     scale: e.maximized ? e.popupScale : 1,
     color: R(),
@@ -4553,7 +4553,7 @@ const or = 250, cr = 84, Ln = 3, Rn = 2, dr = "#000000", ur = "#ffffff", Qa = (a
     }));
   };
   n.useEffect(() => {
-    const x = i.current, U = new $n(x, W());
+    const x = l.current, U = new $n(x, W());
     return B && U.loadImage(B), m(U), () => U.destroy();
   }, []), n.useEffect(() => {
     d == null || d.setOptions({
@@ -4585,7 +4585,7 @@ const or = 250, cr = 84, Ln = 3, Rn = 2, dr = "#000000", ur = "#ffffff", Qa = (a
   const ee = n.useCallback(
     () => {
       var x;
-      return (x = i.current) == null ? void 0 : x.focus();
+      return (x = l.current) == null ? void 0 : x.focus();
     },
     []
   ), le = n.useCallback(
@@ -4616,7 +4616,7 @@ const or = 250, cr = 84, Ln = 3, Rn = 2, dr = "#000000", ur = "#ffffff", Qa = (a
   ), A = n.useCallback(
     () => {
       const x = {
-        element: l.current,
+        element: i.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: He }), Object.defineProperty(x, "color", { get: R }), Object.defineProperty(x, "backgroundColor", { get: b }), x;
@@ -4636,7 +4636,7 @@ const or = 250, cr = 84, Ln = 3, Rn = 2, dr = "#000000", ur = "#ffffff", Qa = (a
     [u, e.onFocus, A]
   ), ve = n.useCallback(
     (x) => {
-      lr(x.relatedTarget, l.current) || (h(!1), Q(
+      lr(x.relatedTarget, i.current) || (h(!1), Q(
         e.onBlur,
         x,
         A(),
@@ -4668,7 +4668,7 @@ const or = 250, cr = 84, Ln = 3, Rn = 2, dr = "#000000", ur = "#ffffff", Qa = (a
     P(), ee();
   }, tt = () => {
     var re, Se;
-    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;
+    const x = e.width || ((re = i.current) == null ? void 0 : re.offsetWidth) || or, U = e.height || ((Se = i.current) == null ? void 0 : Se.offsetHeight) || cr;
     return {
       width: x,
       height: U
@@ -4683,7 +4683,7 @@ const or = 250, cr = 84, Ln = 3, Rn = 2, dr = "#000000", ur = "#ffffff", Qa = (a
   return /* @__PURE__ */ n.createElement(
     "div",
     {
-      ref: l,
+      ref: i,
       dir: e.dir,
       style: { width: e.width, height: e.height, ...e.style },
       className: G(
@@ -4708,7 +4708,7 @@ const or = 250, cr = 84, Ln = 3, Rn = 2, dr = "#000000", ur = "#ffffff", Qa = (a
       "div",
       {
         className: "k-signature-canvas",
-        ref: i,
+        ref: l,
         tabIndex: ie(e.tabIndex, e.disabled),
         role: "img",
         id: e.id,
@@ -4823,10 +4823,10 @@ St.defaultProps = {
 };
 const xa = n.forwardRef((a, t) => {
   pe(me);
-  const e = n.useRef(null), s = n.useRef(null), l = n.useRef(), i = n.useCallback(
+  const e = n.useRef(null), s = n.useRef(null), i = n.useRef(), l = n.useCallback(
     () => {
       var H;
-      return l.current !== void 0 ? l.current : (H = e.current) == null ? void 0 : H.value;
+      return i.current !== void 0 ? i.current : (H = e.current) == null ? void 0 : H.value;
     },
     []
   );
@@ -4840,7 +4840,7 @@ const xa = n.forwardRef((a, t) => {
         return e.current && e.current.name;
       },
       get value() {
-        return i();
+        return l();
       }
     })
   ), n.useImperativeHandle(
@@ -4868,12 +4868,12 @@ const xa = n.forwardRef((a, t) => {
     I(!1);
   }, T = n.useCallback(
     (H) => {
-      l.current = H.target.value, a.onChange && a.onChange.call(void 0, {
+      i.current = H.target.value, a.onChange && a.onChange.call(void 0, {
         syntheticEvent: H,
         nativeEvent: H.nativeEvent,
         value: H.target.value,
         target: s.current
-      }), l.current = void 0;
+      }), i.current = void 0;
     },
     [a.onChange]
   ), { onFocus: E, onBlur: V } = Bn({
@@ -4942,37 +4942,37 @@ const hr = n.forwardRef((a, t) => {
   ), /* @__PURE__ */ n.createElement("span", { ...a, className: G("k-clear-value", a.className) });
 });
 hr.displayName = "KendoReactInputClearValue";
-const pr = n.forwardRef((a, t) => {
-  const e = n.useRef(null), s = n.useRef(null);
+const pr = n.forwardRef(({ orientation: a = "horizontal", ...t }, e) => {
+  const s = n.useRef(null), i = n.useRef(null);
   return n.useImperativeHandle(
-    e,
-    () => ({ element: s.current })
+    s,
+    () => ({ element: i.current })
   ), n.useImperativeHandle(
-    t,
-    () => e.current
-  ), /* @__PURE__ */ n.createElement("span", { ...a, className: G("k-input-prefix", a.className) });
+    e,
+    () => s.current
+  ), /* @__PURE__ */ n.createElement("span", { ...t, className: G("k-input-prefix", t.className, `k-input-prefix-${a}`) });
 });
 pr.displayName = "KendoReactInputPrefix";
-const mr = n.forwardRef((a, t) => {
-  const e = n.useRef(null), s = n.useRef(null);
+const mr = n.forwardRef(({ orientation: a = "vertical", ...t }, e) => {
+  const s = n.useRef(null), i = n.useRef(null);
   return n.useImperativeHandle(
-    e,
-    () => ({ element: s.current })
+    s,
+    () => ({ element: i.current })
   ), n.useImperativeHandle(
-    t,
-    () => e.current
-  ), /* @__PURE__ */ n.createElement("span", { ...a, className: G("k-input-separator", a.className) });
+    e,
+    () => s.current
+  ), /* @__PURE__ */ n.createElement("span", { ...t, className: G("k-input-separator", t.className, `k-input-separator-${a}`) });
 });
 mr.displayName = "KendoReactInputSeparator";
-const gr = n.forwardRef((a, t) => {
-  const e = n.useRef(null), s = n.useRef(null);
+const gr = n.forwardRef(({ orientation: a = "horizontal", ...t }, e) => {
+  const s = n.useRef(null), i = n.useRef(null);
   return n.useImperativeHandle(
-    e,
-    () => ({ element: s.current })
+    s,
+    () => ({ element: i.current })
   ), n.useImperativeHandle(
-    t,
-    () => e.current
-  ), /* @__PURE__ */ n.createElement("span", { ...a, className: G("k-input-suffix", a.className) });
+    e,
+    () => s.current
+  ), /* @__PURE__ */ n.createElement("span", { ...t, className: G("k-input-suffix", t.className, `k-input-suffix-${a}`) });
 });
 gr.displayName = "KendoReactInputSuffix";
 const br = n.forwardRef((a, t) => /* @__PURE__ */ n.createElement(fe, { ref: t, ...a, className: G("k-input-validation-icon", a.className) }));