@progress/kendo-react-inputs 13.4.0-develop.2 → 13.4.0-develop.3

package/index.d.mts

@@ -44,7 +44,7 @@ export { sanitizeNumber } from './numerictextbox/utils/index.js';
 export { rangeReducer, RANGE_ACTION } from './range-slider/range-raducer.js';
 export * from './range-slider/RangeSlider.js';
 export * from './interfaces/ToggleBaseProps.js';
-export { Switch, SwitchWithoutContext, type SwitchHandle, type SwitchProps, type SwitchPropsContext, type SwitchState, type SwitchChangeEvent } from './switch/Switch.js';
+export { Switch, SwitchWithoutContext, type SwitchHandle, type SwitchProps, type SwitchPropsContext, type SwitchChangeEvent } from './switch/Switch.js';
 export * from './checkbox/interfaces/CheckboxProps.js';
 export * from './checkbox/interfaces/CheckboxChangeEvent.js';
 export * from './checkbox/interfaces/CheckboxFocusEvent.js';

package/index.d.ts

@@ -44,7 +44,7 @@ export { sanitizeNumber } from './numerictextbox/utils/index.js';
 export { rangeReducer, RANGE_ACTION } from './range-slider/range-raducer.js';
 export * from './range-slider/RangeSlider.js';
 export * from './interfaces/ToggleBaseProps.js';
-export { Switch, SwitchWithoutContext, type SwitchHandle, type SwitchProps, type SwitchPropsContext, type SwitchState, type SwitchChangeEvent } from './switch/Switch.js';
+export { Switch, SwitchWithoutContext, type SwitchHandle, type SwitchProps, type SwitchPropsContext, type SwitchChangeEvent } from './switch/Switch.js';
 export * from './checkbox/interfaces/CheckboxProps.js';
 export * from './checkbox/interfaces/CheckboxChangeEvent.js';
 export * from './checkbox/interfaces/CheckboxFocusEvent.js';

package/input/Input.mjs

@@ -7,10 +7,10 @@
  */
 import * as r from "react";
 import a from "prop-types";
-import { createPropsContext as z, applyDefaultProps as J, useUnstyled as Q, useId as W, classNames as X } from "@progress/kendo-react-common";
-import { FloatingLabel as Y } from "@progress/kendo-react-labels";
+import { createPropsContext as j, applyDefaultProps as z, useUnstyled as J, useId as Q, classNames as W } from "@progress/kendo-react-common";
+import { FloatingLabel as X } from "@progress/kendo-react-labels";
 const C = r.forwardRef((I, L) => {
-  const M = r.useContext(Z).call(void 0, I), [, P] = r.useReducer((t) => t, !0), n = J(M, _), {
+  const M = r.useContext(Y).call(void 0, I), [, P] = r.useReducer((t) => t, !0), n = z(M, Z), {
     className: k,
     label: o,
     labelClassName: x,
@@ -30,9 +30,9 @@ const C = r.forwardRef((I, L) => {
     style: m,
     ariaLabel: U,
     ...B
-  } = n, D = Q(), u = R || D;
+  } = n, D = J(), u = R || D;
   u && u.uInput;
-  const O = W(), [S, T] = r.useState({
+  const O = Q(), [S, T] = r.useState({
     value: N
   }), g = E || O, e = r.useRef(null), l = r.useRef(void 0), d = r.useRef(null), q = () => {
     e.current && e.current.focus();
@@ -70,7 +70,7 @@ const C = r.forwardRef((I, L) => {
     for (const h in t)
       t.hasOwnProperty(h) && (i = i || !!t[h]);
     return i;
-  }, v = !y || s().valid, G = X(
+  }, v = !y || s().valid, G = W(
     "k-input",
     {
       "k-invalid": !v,
@@ -79,7 +79,7 @@ const C = r.forwardRef((I, L) => {
     k
   ), H = () => {
     e.current && e.current.setCustomValidity && (s().valid || !y ? e.current.classList.remove("k-invalid") : e.current.classList.add("k-invalid"), e.current.setCustomValidity(s().valid ? "" : p || ""));
-  }, K = (t) => {
+  }, _ = (t) => {
     T({
       value: t.target.value
     }), l.current = t.target.value, n.onChange && n.onChange.call(void 0, {
@@ -88,7 +88,7 @@ const C = r.forwardRef((I, L) => {
       value: t.target.value,
       target: d.current
     }), l.current = void 0;
-  }, j = (t) => {
+  }, K = (t) => {
     if (t.animationName === "autoFillStart") {
       const i = t.target.parentNode;
       i && i.classList.contains("k-empty") && i.classList.remove("k-empty");
@@ -113,13 +113,13 @@ const C = r.forwardRef((I, L) => {
       id: g,
       autoFocus: V,
       className: G,
-      onChange: K,
-      onAnimationStart: j,
+      onChange: _,
+      onAnimationStart: K,
       ref: e
     }
   );
   return o ? /* @__PURE__ */ r.createElement(
-    Y,
+    X,
     {
       label: o,
       labelClassName: x,
@@ -134,7 +134,7 @@ const C = r.forwardRef((I, L) => {
       unstyled: u
     }
   ) : b;
-}), Z = z(), _ = {
+}), Y = j(), Z = {
   defaultValue: "",
   required: !1,
   validityStyles: !0,
@@ -156,5 +156,5 @@ C.propTypes = {
 };
 export {
   C as Input,
-  Z as InputPropsContext
+  Y as InputPropsContext
 };

package/maskedtextbox/MaskedTextBox.mjs

@@ -5,13 +5,13 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as p from "react";
+import * as d from "react";
 import e from "prop-types";
 import { MaskingService as E } from "./masking.service.mjs";
 import { defaultRules as g, maskingChanged as O, returnFalse as y } from "./utils.mjs";
-import { withIdHOC as V, withPropsContext as M, createPropsContext as I, withUnstyledHOC as w, useCustomComponent as b, classNames as k, kendoThemeMaps as x, getTabIndex as D, uMaskedTextBox as H } from "@progress/kendo-react-common";
+import { withIdHOC as V, withPropsContext as M, createPropsContext as I, withUnstyledHOC as w, useCustomComponent as b, classNames as _, kendoThemeMaps as k, getTabIndex as D, uMaskedTextBox as H } from "@progress/kendo-react-common";
 import { FloatingLabel as q } from "@progress/kendo-react-labels";
-const l = class l extends p.Component {
+const l = class l extends d.Component {
   constructor() {
     super(...arguments), this.state = {}, this._inputId = `k_${this.props.id}`, this._service = new E(), this._isPasted = !1, this._selection = [null, null], this._input = null, this.focus = () => {
       this._input && this._input.focus();
@@ -28,7 +28,7 @@ const l = class l extends p.Component {
       let n;
       if (this._isPasted) {
         this._isPasted = !1;
-        const d = r.length - o, u = s.length - d;
+        const p = r.length - o, u = s.length - p;
         n = this._service.maskInRange(s.slice(a, u), r, a, o);
       } else
         n = this._service.maskInput(s, r, i.selectionStart || 0);
@@ -144,19 +144,19 @@ const l = class l extends p.Component {
       prefix: o = l.defaultProps.prefix,
       suffix: r = l.defaultProps.suffix,
       inputAttributes: n,
-      unstyled: d,
+      unstyled: p,
       className: u
-    } = this.props, c = this.props.id || this._inputId, f = !this.validityStyles || this.validity.valid, v = this.props.style || {}, _ = d && d.uMaskedTextBox, [C] = b(o), [P] = b(r), m = /* @__PURE__ */ p.createElement(
+    } = this.props, c = this.props.id || this._inputId, f = !this.validityStyles || this.validity.valid, v = this.props.style || {}, x = p && p.uMaskedTextBox, [C] = b(o), [P] = b(r), m = /* @__PURE__ */ d.createElement(
       "span",
       {
         dir: this.props.dir,
-        className: k(
+        className: _(
           "k-input",
           "k-maskedtextbox",
           {
-            [`k-input-${x.sizeMap[t] || t}`]: t,
+            [`k-input-${k.sizeMap[t] || t}`]: t,
             [`k-input-${i}`]: i,
-            [`k-rounded-${x.roundedMap[s] || s}`]: s,
+            [`k-rounded-${k.roundedMap[s] || s}`]: s,
             "k-invalid": !f,
             "k-disabled": this.props.disabled
           },
@@ -164,8 +164,8 @@ const l = class l extends p.Component {
         ),
         style: this.props.label ? v : { width: this.props.width, ...v }
       },
-      /* @__PURE__ */ p.createElement(C, null),
-      /* @__PURE__ */ p.createElement(
+      /* @__PURE__ */ d.createElement(C, null),
+      /* @__PURE__ */ d.createElement(
         "input",
         {
           type: "text",
@@ -174,7 +174,7 @@ const l = class l extends p.Component {
           autoCapitalize: "off",
           autoFocus: a,
           spellCheck: !1,
-          className: k(H.inputInner({ c: _ })),
+          className: _(H.inputInner({ c: x })),
           value: this.value,
           id: c,
           "aria-labelledby": this.props.ariaLabelledBy,
@@ -200,9 +200,9 @@ const l = class l extends p.Component {
           ...n
         }
       ),
-      /* @__PURE__ */ p.createElement(P, null)
+      /* @__PURE__ */ d.createElement(P, null)
     );
-    return this.props.label ? /* @__PURE__ */ p.createElement(
+    return this.props.label ? /* @__PURE__ */ d.createElement(
       q,
       {
         label: this.props.label,

package/numerictextbox/NumericTextBox.mjs

@@ -16,7 +16,7 @@ import { getInitialState as ve, formatValue as A, getStateOrPropsValue as X, ran
 import { Button as Ce } from "@progress/kendo-react-buttons";
 const it = "Please enter a valid value!", ct = et(), Ee = r.forwardRef(
   (C, Se) => {
-    const j = tt(
+    const _ = tt(
       ct,
       C
     ), {
@@ -32,7 +32,7 @@ const it = "Please enter a valid value!", ct = et(), Ee = r.forwardRef(
       min: c,
       max: d,
       dir: te,
-      name: _,
+      name: j,
       label: O,
       id: Pe,
       ariaDescribedBy: Ne,
@@ -66,7 +66,7 @@ const it = "Please enter a valid value!", ct = et(), Ee = r.forwardRef(
       autoFocus: Ae = u.autoFocus,
       inputAttributes: Ge,
       ...le
-    } = j, je = rt(), ue = Pe || je, o = Xe(), N = Ze(), a = r.useRef(null), D = r.useRef(void 0), [_e, S] = r.useState(!1), i = r.useRef(ve()), R = r.useRef(!1), U = r.useRef(void 0), h = r.useRef(he), I = A(
+    } = _, _e = rt(), ue = Pe || _e, o = Xe(), N = Ze(), a = r.useRef(null), D = r.useRef(void 0), [je, S] = r.useState(!1), i = r.useRef(ve()), R = r.useRef(!1), U = r.useRef(void 0), h = r.useRef(he), I = A(
       i.current.focused && !l ? i.current.currentLooseValue : X(g, h.current),
       s,
       o
@@ -80,14 +80,14 @@ const it = "Please enter a valid value!", ct = et(), Ee = r.forwardRef(
     });
     const ie = r.useCallback(() => {
       a.current && a.current.focus();
-    }, []), F = r.useCallback(() => D.current !== void 0 ? D.current : X(g, h.current), [g]), ce = r.useCallback(() => _, [_]), B = r.useCallback(() => L, [L]), M = r.useCallback(() => {
+    }, []), F = r.useCallback(() => D.current !== void 0 ? D.current : X(g, h.current), [g]), ce = r.useCallback(() => j, [j]), B = r.useCallback(() => L, [L]), M = r.useCallback(() => {
       const n = H !== void 0, e = F(), V = K !== void 0 ? K : !i.current.valueIsOutOfRange && (!B() || e != null);
       return {
         customError: n,
         valid: V,
         valueMissing: e == null
       };
-    }, [H, K, F, B]), $ = r.useCallback(() => ne, [ne]), de = r.useCallback(() => j, [j]), y = r.useCallback(() => {
+    }, [H, K, F, B]), $ = r.useCallback(() => ne, [ne]), de = r.useCallback(() => _, [_]), y = r.useCallback(() => {
       const n = {
         element: a.current,
         focus: ie
@@ -217,7 +217,7 @@ const it = "Please enter a valid value!", ct = et(), Ee = r.forwardRef(
     }, []);
     nt(() => {
       a.current && a.current.type !== "number" && i.current.selectionStart !== void 0 && i.current.selectionEnd !== void 0 && (a.current.selectionStart = i.current.selectionStart, a.current.selectionEnd = i.current.selectionEnd, i.current.selectionStart = void 0, i.current.selectionEnd = void 0);
-    }, [_e]);
+    }, [je]);
     const me = !$() || M().valid, fe = /* @__PURE__ */ r.createElement(
       "span",
       {
@@ -264,7 +264,7 @@ const it = "Please enter a valid value!", ct = et(), Ee = r.forwardRef(
           type: Fe || "tel",
           className: "k-input-inner",
           id: ue,
-          name: _,
+          name: j,
           readOnly: f,
           style: Me,
           onChange: we,

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-inputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1770287905,version:"13.4.0-develop.2",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-inputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1770312080,version:"13.4.0-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;

package/package-metadata.mjs

@@ -8,6 +8,6 @@ export const packageMetadata = Object.freeze({
     productCode: 'KENDOUIREACT',
     productCodes: ['KENDOUIREACT'],
     publishDate: 0,
-    version: '13.4.0-develop.2',
+    version: '13.4.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-inputs",
-  "version": "13.4.0-develop.2",
+  "version": "13.4.0-develop.3",
   "description": "React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -28,14 +28,14 @@
     "@progress/kendo-drawing": "^1.21.2",
     "@progress/kendo-inputs-common": "^3.1.0",
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-react-animation": "13.4.0-develop.2",
-    "@progress/kendo-react-buttons": "13.4.0-develop.2",
-    "@progress/kendo-react-common": "13.4.0-develop.2",
-    "@progress/kendo-react-dialogs": "13.4.0-develop.2",
-    "@progress/kendo-react-layout": "13.4.0-develop.2",
-    "@progress/kendo-react-intl": "13.4.0-develop.2",
-    "@progress/kendo-react-labels": "13.4.0-develop.2",
-    "@progress/kendo-react-popup": "13.4.0-develop.2",
+    "@progress/kendo-react-animation": "13.4.0-develop.3",
+    "@progress/kendo-react-buttons": "13.4.0-develop.3",
+    "@progress/kendo-react-common": "13.4.0-develop.3",
+    "@progress/kendo-react-dialogs": "13.4.0-develop.3",
+    "@progress/kendo-react-layout": "13.4.0-develop.3",
+    "@progress/kendo-react-intl": "13.4.0-develop.3",
+    "@progress/kendo-react-labels": "13.4.0-develop.3",
+    "@progress/kendo-react-popup": "13.4.0-develop.3",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
@@ -82,7 +82,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1770287905,
+      "publishDate": 1770312080,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },

package/radiobutton/RadioButton.mjs

@@ -7,16 +7,16 @@
  */
 import * as e from "react";
 import a from "prop-types";
-import { createPropsContext as U, usePropsContext as A, useUnstyled as G, useId as J, dispatchEvent as d, getTabIndex as M, classNames as m, uRadioButton as b } from "@progress/kendo-react-common";
-const Q = U(), x = e.forwardRef((E, F) => {
-  const I = A(Q, E), {
+import { createPropsContext as S, usePropsContext as U, useUnstyled as A, useId as G, dispatchEvent as d, getTabIndex as J, classNames as m, uRadioButton as b } from "@progress/kendo-react-common";
+const M = S(), x = e.forwardRef((E, F) => {
+  const I = U(M, E), {
     ariaDescribedBy: P,
     checked: p,
     children: f,
     className: k,
     disabled: n,
     id: g,
-    size: N = V.size,
+    size: N = Q.size,
     label: o,
     labelPlacement: z,
     name: T,
@@ -28,8 +28,8 @@ const Q = U(), x = e.forwardRef((E, F) => {
     onFocus: c,
     onBlur: i,
     required: H,
-    ...j
-  } = I, y = G(), u = y && y.uRadioButton, l = e.useRef(null), C = e.useCallback(() => {
+    ..._
+  } = I, y = A(), u = y && y.uRadioButton, l = e.useRef(null), C = e.useCallback(() => {
     l.current && l.current.focus();
   }, []), s = e.useCallback(
     () => ({
@@ -39,14 +39,14 @@ const Q = U(), x = e.forwardRef((E, F) => {
     [C]
   );
   e.useImperativeHandle(F, s);
-  const v = J(), K = e.useCallback(
+  const v = G(), j = e.useCallback(
     (t) => {
       d(h, t, s(), {
         value: r
       });
     },
     [h, r, n]
-  ), L = e.useCallback(
+  ), K = e.useCallback(
     (t) => {
       c && !n && d(
         c,
@@ -56,12 +56,12 @@ const Q = U(), x = e.forwardRef((E, F) => {
       );
     },
     [c, n]
-  ), O = e.useCallback(
+  ), L = e.useCallback(
     (t) => {
       i && !n && d(i, t, s(), void 0);
     },
     [i, n]
-  ), S = {
+  ), O = {
     type: "radio",
     id: g || v,
     name: T,
@@ -76,16 +76,16 @@ const Q = U(), x = e.forwardRef((E, F) => {
     ),
     ref: l,
     disabled: n,
-    tabIndex: M(w, n),
+    tabIndex: J(w, n),
     checked: p,
     style: q,
     "aria-describedby": P,
     "aria-required": H,
     value: r,
-    onChange: K,
-    onFocus: L,
-    onBlur: O,
-    ...j
+    onChange: j,
+    onFocus: K,
+    onBlur: L,
+    ..._
   }, B = /* @__PURE__ */ e.createElement(e.Fragment, null, o !== void 0 ? /* @__PURE__ */ e.createElement(
     "label",
     {
@@ -95,7 +95,7 @@ const Q = U(), x = e.forwardRef((E, F) => {
       "aria-label": o
     },
     o
-  ) : null), R = /* @__PURE__ */ e.createElement("span", { className: m(b.wrap({ c: u })) }, /* @__PURE__ */ e.createElement("input", { ...S }));
+  ) : null), R = /* @__PURE__ */ e.createElement("span", { className: m(b.wrap({ c: u })) }, /* @__PURE__ */ e.createElement("input", { ...O }));
   return z === "before" ? /* @__PURE__ */ e.createElement(e.Fragment, null, B, R, f) : /* @__PURE__ */ e.createElement(e.Fragment, null, R, B, f);
 });
 x.propTypes = {
@@ -116,11 +116,11 @@ x.propTypes = {
   onFocus: a.func,
   onBlur: a.func
 };
-const V = {
+const Q = {
   size: void 0
 };
 x.displayName = "KendoRadioButton";
 export {
   x as RadioButton,
-  Q as RadioButtonPropsContext
+  M as RadioButtonPropsContext
 };

package/radiobutton/RadioGroup.mjs

@@ -7,10 +7,10 @@
  */
 import * as t from "react";
 import e from "prop-types";
-import { RadioButton as J } from "./RadioButton.mjs";
-import { createPropsContext as M, usePropsContext as Q, useUnstyled as W, focusFirstFocusableChild as X, dispatchEvent as k, useId as Y, classNames as P, uRadioGroup as E, useRtl as Z } from "@progress/kendo-react-common";
-const _ = M(), G = t.forwardRef((r, I) => {
-  const m = Q(_, r), {
+import { RadioButton as A } from "./RadioButton.mjs";
+import { createPropsContext as J, usePropsContext as M, useUnstyled as Q, focusFirstFocusableChild as W, dispatchEvent as k, useId as X, classNames as P, uRadioGroup as E, useRtl as Y } from "@progress/kendo-react-common";
+const Z = J(), G = t.forwardRef((r, I) => {
+  const m = M(Z, r), {
     id: N,
     ariaLabelledBy: B,
     ariaDescribedBy: F,
@@ -27,8 +27,8 @@ const _ = M(), G = t.forwardRef((r, I) => {
     item: D = $.item,
     onChange: c,
     onFocus: d
-  } = m, f = W(), y = f && f.uRadioGroup, o = t.useRef(null), C = t.useCallback(() => {
-    o.current && X(o.current);
+  } = m, f = Q(), y = f && f.uRadioGroup, o = t.useRef(null), C = t.useCallback(() => {
+    o.current && W(o.current);
   }, []), i = t.useCallback(
     () => ({
       element: o.current,
@@ -58,21 +58,21 @@ const _ = M(), G = t.forwardRef((r, I) => {
       );
     },
     [d, s]
-  ), T = Y(), w = P(
+  ), T = X(), _ = P(
     E.ul({
       c: y,
       horizontal: n === "horizontal",
       vertical: n === "vertical" || n === void 0
     }),
     x
-  ), K = Z(o, m.dir), U = b && b.map((a, l) => {
-    const g = u === a.value, A = u == null, R = {
+  ), w = Y(o, m.dir), K = b && b.map((a, l) => {
+    const g = u === a.value, U = u == null, R = {
       ...a,
       valid: z,
       checked: g,
       disabled: !!(a.disabled || s),
       labelPlacement: a.labelPlacement ? a.labelPlacement : j,
-      tabIndex: a.tabIndex ? a.tabIndex : A && l === 0 || g ? 0 : -1,
+      tabIndex: a.tabIndex ? a.tabIndex : U && l === 0 || g ? 0 : -1,
       index: l,
       name: O || T,
       required: a.required,
@@ -91,7 +91,7 @@ const _ = M(), G = t.forwardRef((r, I) => {
         key: l,
         role: "none"
       },
-      /* @__PURE__ */ t.createElement(J, { ...R })
+      /* @__PURE__ */ t.createElement(A, { ...R })
     );
   });
   return /* @__PURE__ */ t.createElement(
@@ -99,14 +99,14 @@ const _ = M(), G = t.forwardRef((r, I) => {
     {
       id: N,
       role: "radiogroup",
-      className: w,
+      className: _,
       ref: o,
-      dir: K,
+      dir: w,
       style: q,
       "aria-labelledby": B,
       "aria-describedby": F
     },
-    U
+    K
   );
 }), $ = {
   item: (r) => /* @__PURE__ */ t.createElement("li", { ...r })
@@ -130,5 +130,5 @@ G.propTypes = {
 G.displayName = "KendoRadioGroup";
 export {
   G as RadioGroup,
-  _ as RadioGroupPropsContext
+  Z as RadioGroupPropsContext
 };

package/range-slider/RangeSlider.mjs

@@ -59,18 +59,18 @@ const se = (n, s, p) => {
       state: e.value
     },
     W
-  ), d = a.useMemo(() => e.value || x, [e.value, x]), q = a.useRef(null), R = a.useRef(null), h = a.useMemo(() => (d.start - g) / (k - g) * 100, [d.start, g, k]), D = a.useMemo(() => (d.end - g) / (k - g) * 100, [d.end, g, k]), B = a.useMemo(
+  ), d = a.useMemo(() => e.value || x, [e.value, x]), _ = a.useRef(null), R = a.useRef(null), h = a.useMemo(() => (d.start - g) / (k - g) * 100, [d.start, g, k]), D = a.useMemo(() => (d.end - g) / (k - g) * 100, [d.end, g, k]), q = a.useMemo(
     () => e.vertical ? { paddingTop: 0, height: "100%" } : {},
     [e.vertical]
-  ), G = a.useMemo(
+  ), B = a.useMemo(
     () => e.vertical ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" },
     [e.vertical]
   ), M = ne(), C = a.useCallback(
     (t) => {
       if (!R.current)
         return;
-      const u = R.current.getBoundingClientRect(), v = e.vertical ? u.bottom - t.clientY : o === "rtl" ? u.right - t.clientX : t.clientX - u.left, I = e.vertical ? u.height : u.width, _ = v / I;
-      return g + _ * (k - g);
+      const u = R.current.getBoundingClientRect(), v = e.vertical ? u.bottom - t.clientY : o === "rtl" ? u.right - t.clientX : t.clientX - u.left, I = e.vertical ? u.height : u.width, Y = v / I;
+      return g + Y * (k - g);
     },
     [
       R,
@@ -83,10 +83,10 @@ const se = (n, s, p) => {
       e.value && e.value.start,
       e.value && e.value.end
     ]
-  ), U = a.useCallback(
+  ), G = a.useCallback(
     (t) => t <= d.start ? "start" : t >= d.end ? "end" : 2 * t < d.end + d.start ? "start" : "end",
     [x.start, x.end, e.value && e.value.start, e.value && e.value.end]
-  ), X = a.useCallback(
+  ), U = a.useCallback(
     (t) => {
       switch (t.keyCode) {
         case m.right:
@@ -132,7 +132,7 @@ const se = (n, s, p) => {
       }
     },
     [l]
-  ), F = a.useCallback(
+  ), X = a.useCallback(
     (t) => {
       switch (t.keyCode) {
         case m.right:
@@ -178,9 +178,9 @@ const se = (n, s, p) => {
       }
     },
     [l, o]
-  ), Y = a.useCallback(
+  ), F = a.useCallback(
     (t) => {
-      const u = C(t), v = U(u);
+      const u = C(t), v = G(u);
       L(v), v === "end" ? T.current.focus() : w.current.focus();
       const I = v === "end" ? r.end : r.start;
       l({ type: I, payload: u, event: t });
@@ -190,7 +190,7 @@ const se = (n, s, p) => {
   return te(
     R,
     {
-      onPress: Y,
+      onPress: F,
       onDrag: (t) => {
         const u = C(t), v = E === "end" ? r.end : r.start;
         l({ type: v, payload: u, event: t });
@@ -228,10 +228,10 @@ const se = (n, s, p) => {
           flexGrow: 1,
           position: "relative",
           touchAction: "none",
-          ...G
+          ...B
         }
       },
-      e.children && /* @__PURE__ */ a.createElement("ul", { className: "k-reset k-slider-items", style: { ...B } }, a.Children.map(e.children, (t, u) => t && a.cloneElement(
+      e.children && /* @__PURE__ */ a.createElement("ul", { className: "k-reset k-slider-items", style: { ...q } }, a.Children.map(e.children, (t, u) => t && a.cloneElement(
         t,
         {
           position: 100 * (t.props.position - e.min) / (e.max - e.min),
@@ -244,7 +244,7 @@ const se = (n, s, p) => {
       /* @__PURE__ */ a.createElement(
         "div",
         {
-          ref: q,
+          ref: _,
           className: "k-slider-track",
           style: e.vertical ? { bottom: 0, height: "100%" } : { [o === "rtl" ? "right" : "left"]: 0, width: "100%" }
         },
@@ -275,7 +275,7 @@ const se = (n, s, p) => {
             className: "k-draghandle k-draghandle-start",
             title: M.toLanguageString($, z[$]),
             style: e.vertical ? { bottom: "calc(" + h + "%)", zIndex: 1 } : o === "rtl" ? { right: "calc(" + h + "% - 13px)", zIndex: 1 } : { left: "calc(" + h + "%)", zIndex: 1 },
-            onKeyDown: X
+            onKeyDown: U
           }
         ),
         /* @__PURE__ */ a.createElement(
@@ -292,7 +292,7 @@ const se = (n, s, p) => {
             className: "k-draghandle k-draghandle-end",
             title: M.toLanguageString($, z[$]),
             style: e.vertical ? { bottom: "calc(" + D + "%)", zIndex: 1 } : o === "rtl" ? { right: "calc(" + D + "% - 13px)", zIndex: 1 } : { left: "calc(" + D + "%)", zIndex: 1 },
-            onKeyDown: F
+            onKeyDown: X
           }
         )
       )