kdpa-components 1.35.2 → 1.35.3

package/dist/Slider/index.js

@@ -0,0 +1,1322 @@
+import { j as C } from "../jsx-runtime-944c88e2.js";
+import { _ as c, a as Nt } from "../extends-393586f3.js";
+import * as T from "react";
+import { g as Rt, P as t, h as U, l as Et, m as _t, a as rt } from "../identifier-9dfe30d8.js";
+import { g as Vt, c as ce, s as ee, h as ct, u as wt, a as At } from "../useThemeProps-7d04a175.js";
+import { u as It } from "../useTheme-014a54ad.js";
+import { i as Ee, u as B } from "../useSlotProps-f238319f.js";
+import { u as jt } from "../useControlled-cc2d41cb.js";
+import { u as Mt } from "../useIsFocusVisible-4693b580.js";
+import { u as at } from "../useForkRef-0781dda0.js";
+import { a as zt, u as We } from "../useEventCallback-fe4fd69c.js";
+import { o as _e } from "../ownerDocument-5430cd5b.js";
+import { c as nt } from "../chainPropTypes-004bf492.js";
+import "../emotion-memoize.esm-021d0d4e.js";
+import "../_commonjsHelpers-92157f1b.js";
+import "../emotion-is-prop-valid.esm-b7f48706.js";
+const Ft = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  margin: -1,
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: "1px"
+}, Dt = Ft;
+function Ht(e, o, a = (s, d) => s === d) {
+  return e.length === o.length && e.every((s, d) => a(s, o[d]));
+}
+const Yt = 2;
+function ut(e, o) {
+  return e - o;
+}
+function he(e, o, a) {
+  return e == null ? o : Math.min(Math.max(o, e), a);
+}
+function lt(e, o) {
+  var a;
+  const {
+    index: s
+  } = (a = e.reduce((d, L, N) => {
+    const f = Math.abs(o - L);
+    return d === null || f < d.distance || f === d.distance ? {
+      distance: f,
+      index: N
+    } : d;
+  }, null)) != null ? a : {};
+  return s;
+}
+function Ce(e, o) {
+  if (o.current !== void 0 && e.changedTouches) {
+    const a = e;
+    for (let s = 0; s < a.changedTouches.length; s += 1) {
+      const d = a.changedTouches[s];
+      if (d.identifier === o.current)
+        return {
+          x: d.clientX,
+          y: d.clientY
+        };
+    }
+    return !1;
+  }
+  return {
+    x: e.clientX,
+    y: e.clientY
+  };
+}
+function Ve(e, o, a) {
+  return (e - o) * 100 / (a - o);
+}
+function Bt(e, o, a) {
+  return (a - o) * e + o;
+}
+function Ut(e) {
+  if (Math.abs(e) < 1) {
+    const a = e.toExponential().split("e-"), s = a[0].split(".")[1];
+    return (s ? s.length : 0) + parseInt(a[1], 10);
+  }
+  const o = e.toString().split(".")[1];
+  return o ? o.length : 0;
+}
+function qt(e, o, a) {
+  const s = Math.round((e - a) / o) * o + a;
+  return Number(s.toFixed(Ut(o)));
+}
+function st({
+  values: e,
+  newValue: o,
+  index: a
+}) {
+  const s = e.slice();
+  return s[a] = o, s.sort(ut);
+}
+function $e({
+  sliderRef: e,
+  activeIndex: o,
+  setActive: a
+}) {
+  var s, d;
+  const L = _e(e.current);
+  if (!((s = e.current) != null && s.contains(L.activeElement)) || Number(L == null || (d = L.activeElement) == null ? void 0 : d.getAttribute("data-index")) !== o) {
+    var N;
+    (N = e.current) == null || N.querySelector(`[type="range"][data-index="${o}"]`).focus();
+  }
+  a && a(o);
+}
+function Ne(e, o) {
+  return typeof e == "number" && typeof o == "number" ? e === o : typeof e == "object" && typeof o == "object" ? Ht(e, o) : !1;
+}
+const Xt = {
+  horizontal: {
+    offset: (e) => ({
+      left: `${e}%`
+    }),
+    leap: (e) => ({
+      width: `${e}%`
+    })
+  },
+  "horizontal-reverse": {
+    offset: (e) => ({
+      right: `${e}%`
+    }),
+    leap: (e) => ({
+      width: `${e}%`
+    })
+  },
+  vertical: {
+    offset: (e) => ({
+      bottom: `${e}%`
+    }),
+    leap: (e) => ({
+      height: `${e}%`
+    })
+  }
+}, Wt = (e) => e;
+let Re;
+function Ge() {
+  return Re === void 0 && (typeof CSS < "u" && typeof CSS.supports == "function" ? Re = CSS.supports("touch-action", "none") : Re = !0), Re;
+}
+function Gt(e) {
+  const {
+    "aria-labelledby": o,
+    defaultValue: a,
+    disabled: s = !1,
+    disableSwap: d = !1,
+    isRtl: L = !1,
+    marks: N = !1,
+    max: f = 100,
+    min: b = 0,
+    name: q,
+    onChange: ue,
+    onChangeCommitted: X,
+    orientation: te = "horizontal",
+    rootRef: ge,
+    scale: de = Wt,
+    step: _ = 1,
+    tabIndex: ye,
+    value: ke
+  } = e, M = T.useRef(), [pe, D] = T.useState(-1), [xe, H] = T.useState(-1), [me, fe] = T.useState(!1), W = T.useRef(0), [V, Y] = jt({
+    controlled: ke,
+    default: a ?? b,
+    name: "Slider"
+  }), z = ue && ((r, n, l) => {
+    const i = r.nativeEvent || r, y = new i.constructor(i.type, i);
+    Object.defineProperty(y, "target", {
+      writable: !0,
+      value: {
+        value: n,
+        name: q
+      }
+    }), ue(y, n, l);
+  }), G = Array.isArray(V);
+  let g = G ? V.slice().sort(ut) : [V];
+  g = g.map((r) => he(r, b, f));
+  const oe = N === !0 && _ !== null ? [...Array(Math.floor((f - b) / _) + 1)].map((r, n) => ({
+    value: b + _ * n
+  })) : N || [], w = oe.map((r) => r.value), {
+    isFocusVisibleRef: Te,
+    onBlur: A,
+    onFocus: I,
+    ref: we
+  } = Mt(), [Le, re] = T.useState(-1), S = T.useRef(), Se = at(we, S), be = at(ge, Se), Pe = (r) => (n) => {
+    var l;
+    const i = Number(n.currentTarget.getAttribute("data-index"));
+    I(n), Te.current === !0 && re(i), H(i), r == null || (l = r.onFocus) == null || l.call(r, n);
+  }, Ae = (r) => (n) => {
+    var l;
+    A(n), Te.current === !1 && re(-1), H(-1), r == null || (l = r.onBlur) == null || l.call(r, n);
+  };
+  zt(() => {
+    if (s && S.current.contains(document.activeElement)) {
+      var r;
+      (r = document.activeElement) == null || r.blur();
+    }
+  }, [s]), s && pe !== -1 && D(-1), s && Le !== -1 && re(-1);
+  const ae = (r) => (n) => {
+    var l;
+    (l = r.onChange) == null || l.call(r, n);
+    const i = Number(n.currentTarget.getAttribute("data-index")), y = g[i], P = w.indexOf(y);
+    let p = n.target.valueAsNumber;
+    if (oe && _ == null && (p = p < y ? w[P - 1] : w[P + 1]), p = he(p, b, f), oe && _ == null) {
+      const O = w.indexOf(g[i]);
+      p = p < g[i] ? w[O - 1] : w[O + 1];
+    }
+    if (G) {
+      d && (p = he(p, g[i - 1] || -1 / 0, g[i + 1] || 1 / 0));
+      const O = p;
+      p = st({
+        values: g,
+        newValue: p,
+        index: i
+      });
+      let u = i;
+      d || (u = p.indexOf(O)), $e({
+        sliderRef: S,
+        activeIndex: u
+      });
+    }
+    Y(p), re(i), z && !Ne(p, V) && z(n, p, i), X && X(n, p);
+  }, K = T.useRef();
+  let ne = te;
+  L && te === "horizontal" && (ne += "-reverse");
+  const le = ({
+    finger: r,
+    move: n = !1
+  }) => {
+    const {
+      current: l
+    } = S, {
+      width: i,
+      height: y,
+      bottom: P,
+      left: p
+    } = l.getBoundingClientRect();
+    let O;
+    ne.indexOf("vertical") === 0 ? O = (P - r.y) / y : O = (r.x - p) / i, ne.indexOf("-reverse") !== -1 && (O = 1 - O);
+    let u;
+    if (u = Bt(O, b, f), _)
+      u = qt(u, _, b);
+    else {
+      const ve = lt(w, u);
+      u = w[ve];
+    }
+    u = he(u, b, f);
+    let j = 0;
+    if (G) {
+      n ? j = K.current : j = lt(g, u), d && (u = he(u, g[j - 1] || -1 / 0, g[j + 1] || 1 / 0));
+      const ve = u;
+      u = st({
+        values: g,
+        newValue: u,
+        index: j
+      }), d && n || (j = u.indexOf(ve), K.current = j);
+    }
+    return {
+      newValue: u,
+      activeIndex: j
+    };
+  }, J = We((r) => {
+    const n = Ce(r, M);
+    if (!n)
+      return;
+    if (W.current += 1, r.type === "mousemove" && r.buttons === 0) {
+      R(r);
+      return;
+    }
+    const {
+      newValue: l,
+      activeIndex: i
+    } = le({
+      finger: n,
+      move: !0
+    });
+    $e({
+      sliderRef: S,
+      activeIndex: i,
+      setActive: D
+    }), Y(l), !me && W.current > Yt && fe(!0), z && !Ne(l, V) && z(r, l, i);
+  }), R = We((r) => {
+    const n = Ce(r, M);
+    if (fe(!1), !n)
+      return;
+    const {
+      newValue: l
+    } = le({
+      finger: n,
+      move: !0
+    });
+    D(-1), r.type === "touchend" && H(-1), X && X(r, l), M.current = void 0, m();
+  }), v = We((r) => {
+    if (s)
+      return;
+    Ge() || r.preventDefault();
+    const n = r.changedTouches[0];
+    n != null && (M.current = n.identifier);
+    const l = Ce(r, M);
+    if (l !== !1) {
+      const {
+        newValue: y,
+        activeIndex: P
+      } = le({
+        finger: l
+      });
+      $e({
+        sliderRef: S,
+        activeIndex: P,
+        setActive: D
+      }), Y(y), z && !Ne(y, V) && z(r, y, P);
+    }
+    W.current = 0;
+    const i = _e(S.current);
+    i.addEventListener("touchmove", J), i.addEventListener("touchend", R);
+  }), m = T.useCallback(() => {
+    const r = _e(S.current);
+    r.removeEventListener("mousemove", J), r.removeEventListener("mouseup", R), r.removeEventListener("touchmove", J), r.removeEventListener("touchend", R);
+  }, [R, J]);
+  T.useEffect(() => {
+    const {
+      current: r
+    } = S;
+    return r.addEventListener("touchstart", v, {
+      passive: Ge()
+    }), () => {
+      r.removeEventListener("touchstart", v, {
+        passive: Ge()
+      }), m();
+    };
+  }, [m, v]), T.useEffect(() => {
+    s && m();
+  }, [s, m]);
+  const se = (r) => (n) => {
+    var l;
+    if ((l = r.onMouseDown) == null || l.call(r, n), s || n.defaultPrevented || n.button !== 0)
+      return;
+    n.preventDefault();
+    const i = Ce(n, M);
+    if (i !== !1) {
+      const {
+        newValue: P,
+        activeIndex: p
+      } = le({
+        finger: i
+      });
+      $e({
+        sliderRef: S,
+        activeIndex: p,
+        setActive: D
+      }), Y(P), z && !Ne(P, V) && z(n, P, p);
+    }
+    W.current = 0;
+    const y = _e(S.current);
+    y.addEventListener("mousemove", J), y.addEventListener("mouseup", R);
+  }, Q = Ve(G ? g[0] : b, b, f), Z = Ve(g[g.length - 1], b, f) - Q, Ie = (r = {}) => {
+    const n = {
+      onMouseDown: se(r || {})
+    }, l = c({}, r, n);
+    return c({
+      ref: be
+    }, l);
+  }, x = (r) => (n) => {
+    var l;
+    (l = r.onMouseOver) == null || l.call(r, n);
+    const i = Number(n.currentTarget.getAttribute("data-index"));
+    H(i);
+  }, ie = (r) => (n) => {
+    var l;
+    (l = r.onMouseLeave) == null || l.call(r, n), H(-1);
+  };
+  return {
+    active: pe,
+    axis: ne,
+    axisProps: Xt,
+    dragging: me,
+    focusedThumbIndex: Le,
+    getHiddenInputProps: (r = {}) => {
+      var n;
+      const l = {
+        onChange: ae(r || {}),
+        onFocus: Pe(r || {}),
+        onBlur: Ae(r || {})
+      }, i = c({}, r, l);
+      return c({
+        tabIndex: ye,
+        "aria-labelledby": o,
+        "aria-orientation": te,
+        "aria-valuemax": de(f),
+        "aria-valuemin": de(b),
+        name: q,
+        type: "range",
+        min: e.min,
+        max: e.max,
+        step: (n = e.step) != null ? n : void 0,
+        disabled: s
+      }, i, {
+        style: c({}, Dt, {
+          direction: L ? "rtl" : "ltr",
+          // So that VoiceOver's focus indicator matches the thumb's dimensions
+          width: "100%",
+          height: "100%"
+        })
+      });
+    },
+    getRootProps: Ie,
+    getThumbProps: (r = {}) => {
+      const n = {
+        onMouseOver: x(r || {}),
+        onMouseLeave: ie(r || {})
+      };
+      return c({}, r, n);
+    },
+    marks: oe,
+    open: xe,
+    range: G,
+    rootRef: be,
+    trackLeap: Z,
+    trackOffset: Q,
+    values: g
+  };
+}
+const Kt = (e) => !e || !Ee(e), Jt = Kt;
+function Qt(e) {
+  return Rt("MuiSlider", e);
+}
+const Zt = Vt("MuiSlider", ["root", "active", "colorPrimary", "colorSecondary", "disabled", "dragging", "focusVisible", "mark", "markActive", "marked", "markLabel", "markLabelActive", "rail", "sizeSmall", "thumb", "thumbColorPrimary", "thumbColorSecondary", "track", "trackInverted", "trackFalse", "thumbSizeSmall", "valueLabel", "valueLabelOpen", "valueLabelCircle", "valueLabelLabel", "vertical"]), E = Zt, eo = (e) => {
+  const {
+    open: o
+  } = e;
+  return {
+    offset: ce(o && E.valueLabelOpen),
+    circle: E.valueLabelCircle,
+    label: E.valueLabelLabel
+  };
+};
+function dt(e) {
+  const {
+    children: o,
+    className: a,
+    value: s
+  } = e, d = eo(e);
+  return o ? /* @__PURE__ */ T.cloneElement(o, {
+    className: ce(o.props.className)
+  }, /* @__PURE__ */ C.jsxs(T.Fragment, {
+    children: [o.props.children, /* @__PURE__ */ C.jsx("span", {
+      className: ce(d.offset, a),
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ C.jsx("span", {
+        className: d.circle,
+        children: /* @__PURE__ */ C.jsx("span", {
+          className: d.label,
+          children: s
+        })
+      })
+    })]
+  })) : null;
+}
+process.env.NODE_ENV !== "production" && (dt.propTypes = {
+  children: t.element.isRequired,
+  className: t.string,
+  value: t.node
+});
+const to = ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"];
+function it(e) {
+  return e;
+}
+const pt = ee("span", {
+  name: "MuiSlider",
+  slot: "Root",
+  overridesResolver: (e, o) => {
+    const {
+      ownerState: a
+    } = e;
+    return [o.root, o[`color${U(a.color)}`], a.size !== "medium" && o[`size${U(a.size)}`], a.marked && o.marked, a.orientation === "vertical" && o.vertical, a.track === "inverted" && o.trackInverted, a.track === !1 && o.trackFalse];
+  }
+})(({
+  theme: e,
+  ownerState: o
+}) => c({
+  borderRadius: 12,
+  boxSizing: "content-box",
+  display: "inline-block",
+  position: "relative",
+  cursor: "pointer",
+  touchAction: "none",
+  color: (e.vars || e).palette[o.color].main,
+  WebkitTapHighlightColor: "transparent"
+}, o.orientation === "horizontal" && c({
+  height: 4,
+  width: "100%",
+  padding: "13px 0",
+  // The primary input mechanism of the device includes a pointing device of limited accuracy.
+  "@media (pointer: coarse)": {
+    // Reach 42px touch target, about ~8mm on screen.
+    padding: "20px 0"
+  }
+}, o.size === "small" && {
+  height: 2
+}, o.marked && {
+  marginBottom: 20
+}), o.orientation === "vertical" && c({
+  height: "100%",
+  width: 4,
+  padding: "0 13px",
+  // The primary input mechanism of the device includes a pointing device of limited accuracy.
+  "@media (pointer: coarse)": {
+    // Reach 42px touch target, about ~8mm on screen.
+    padding: "0 20px"
+  }
+}, o.size === "small" && {
+  width: 2
+}, o.marked && {
+  marginRight: 44
+}), {
+  "@media print": {
+    colorAdjust: "exact"
+  },
+  [`&.${E.disabled}`]: {
+    pointerEvents: "none",
+    cursor: "default",
+    color: (e.vars || e).palette.grey[400]
+  },
+  [`&.${E.dragging}`]: {
+    [`& .${E.thumb}, & .${E.track}`]: {
+      transition: "none"
+    }
+  }
+}));
+process.env.NODE_ENV !== "production" && (pt.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: t.node
+});
+const mt = ee("span", {
+  name: "MuiSlider",
+  slot: "Rail",
+  overridesResolver: (e, o) => o.rail
+})(({
+  ownerState: e
+}) => c({
+  display: "block",
+  position: "absolute",
+  borderRadius: "inherit",
+  backgroundColor: "currentColor",
+  opacity: 0.38
+}, e.orientation === "horizontal" && {
+  width: "100%",
+  height: "inherit",
+  top: "50%",
+  transform: "translateY(-50%)"
+}, e.orientation === "vertical" && {
+  height: "100%",
+  width: "inherit",
+  left: "50%",
+  transform: "translateX(-50%)"
+}, e.track === "inverted" && {
+  opacity: 1
+}));
+process.env.NODE_ENV !== "production" && (mt.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: t.node
+});
+const ft = ee("span", {
+  name: "MuiSlider",
+  slot: "Track",
+  overridesResolver: (e, o) => o.track
+})(({
+  theme: e,
+  ownerState: o
+}) => {
+  const a = (
+    // Same logic as the LinearProgress track color
+    e.palette.mode === "light" ? Et(e.palette[o.color].main, 0.62) : _t(e.palette[o.color].main, 0.5)
+  );
+  return c({
+    display: "block",
+    position: "absolute",
+    borderRadius: "inherit",
+    border: "1px solid currentColor",
+    backgroundColor: "currentColor",
+    transition: e.transitions.create(["left", "width", "bottom", "height"], {
+      duration: e.transitions.duration.shortest
+    })
+  }, o.size === "small" && {
+    border: "none"
+  }, o.orientation === "horizontal" && {
+    height: "inherit",
+    top: "50%",
+    transform: "translateY(-50%)"
+  }, o.orientation === "vertical" && {
+    width: "inherit",
+    left: "50%",
+    transform: "translateX(-50%)"
+  }, o.track === !1 && {
+    display: "none"
+  }, o.track === "inverted" && {
+    backgroundColor: e.vars ? e.vars.palette.Slider[`${o.color}Track`] : a,
+    borderColor: e.vars ? e.vars.palette.Slider[`${o.color}Track`] : a
+  });
+});
+process.env.NODE_ENV !== "production" && (ft.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: t.node
+});
+const bt = ee("span", {
+  name: "MuiSlider",
+  slot: "Thumb",
+  overridesResolver: (e, o) => {
+    const {
+      ownerState: a
+    } = e;
+    return [o.thumb, o[`thumbColor${U(a.color)}`], a.size !== "medium" && o[`thumbSize${U(a.size)}`]];
+  }
+})(({
+  theme: e,
+  ownerState: o
+}) => c({
+  position: "absolute",
+  width: 20,
+  height: 20,
+  boxSizing: "border-box",
+  borderRadius: "50%",
+  outline: 0,
+  backgroundColor: "currentColor",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: e.transitions.create(["box-shadow", "left", "bottom"], {
+    duration: e.transitions.duration.shortest
+  })
+}, o.size === "small" && {
+  width: 12,
+  height: 12
+}, o.orientation === "horizontal" && {
+  top: "50%",
+  transform: "translate(-50%, -50%)"
+}, o.orientation === "vertical" && {
+  left: "50%",
+  transform: "translate(-50%, 50%)"
+}, {
+  "&:before": c({
+    position: "absolute",
+    content: '""',
+    borderRadius: "inherit",
+    width: "100%",
+    height: "100%",
+    boxShadow: (e.vars || e).shadows[2]
+  }, o.size === "small" && {
+    boxShadow: "none"
+  }),
+  "&::after": {
+    position: "absolute",
+    content: '""',
+    borderRadius: "50%",
+    // 42px is the hit target
+    width: 42,
+    height: 42,
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)"
+  },
+  [`&:hover, &.${E.focusVisible}`]: {
+    boxShadow: `0px 0px 0px 8px ${e.vars ? `rgba(${e.vars.palette[o.color].mainChannel} / 0.16)` : rt(e.palette[o.color].main, 0.16)}`,
+    "@media (hover: none)": {
+      boxShadow: "none"
+    }
+  },
+  [`&.${E.active}`]: {
+    boxShadow: `0px 0px 0px 14px ${e.vars ? `rgba(${e.vars.palette[o.color].mainChannel} / 0.16)` : rt(e.palette[o.color].main, 0.16)}`
+  },
+  [`&.${E.disabled}`]: {
+    "&:hover": {
+      boxShadow: "none"
+    }
+  }
+}));
+process.env.NODE_ENV !== "production" && (bt.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: t.node
+});
+const vt = ee(dt, {
+  name: "MuiSlider",
+  slot: "ValueLabel",
+  overridesResolver: (e, o) => o.valueLabel
+})(({
+  theme: e,
+  ownerState: o
+}) => c({
+  [`&.${E.valueLabelOpen}`]: {
+    transform: `${o.orientation === "vertical" ? "translateY(-50%)" : "translateY(-100%)"} scale(1)`
+  },
+  zIndex: 1,
+  whiteSpace: "nowrap"
+}, e.typography.body2, {
+  fontWeight: 500,
+  transition: e.transitions.create(["transform"], {
+    duration: e.transitions.duration.shortest
+  }),
+  transform: `${o.orientation === "vertical" ? "translateY(-50%)" : "translateY(-100%)"} scale(0)`,
+  position: "absolute",
+  backgroundColor: (e.vars || e).palette.grey[600],
+  borderRadius: 2,
+  color: (e.vars || e).palette.common.white,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "0.25rem 0.75rem"
+}, o.orientation === "horizontal" && {
+  top: "-10px",
+  transformOrigin: "bottom center",
+  "&:before": {
+    position: "absolute",
+    content: '""',
+    width: 8,
+    height: 8,
+    transform: "translate(-50%, 50%) rotate(45deg)",
+    backgroundColor: "inherit",
+    bottom: 0,
+    left: "50%"
+  }
+}, o.orientation === "vertical" && {
+  right: o.size === "small" ? "20px" : "30px",
+  top: "50%",
+  transformOrigin: "right center",
+  "&:before": {
+    position: "absolute",
+    content: '""',
+    width: 8,
+    height: 8,
+    transform: "translate(-50%, -50%) rotate(45deg)",
+    backgroundColor: "inherit",
+    right: "-20%",
+    top: "50%"
+  }
+}, o.size === "small" && {
+  fontSize: e.typography.pxToRem(12),
+  padding: "0.25rem 0.5rem"
+}));
+process.env.NODE_ENV !== "production" && (vt.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: t.node
+});
+const ht = ee("span", {
+  name: "MuiSlider",
+  slot: "Mark",
+  shouldForwardProp: (e) => ct(e) && e !== "markActive",
+  overridesResolver: (e, o) => {
+    const {
+      markActive: a
+    } = e;
+    return [o.mark, a && o.markActive];
+  }
+})(({
+  theme: e,
+  ownerState: o,
+  markActive: a
+}) => c({
+  position: "absolute",
+  width: 2,
+  height: 2,
+  borderRadius: 1,
+  backgroundColor: "currentColor"
+}, o.orientation === "horizontal" && {
+  top: "50%",
+  transform: "translate(-1px, -50%)"
+}, o.orientation === "vertical" && {
+  left: "50%",
+  transform: "translate(-50%, 1px)"
+}, a && {
+  backgroundColor: (e.vars || e).palette.background.paper,
+  opacity: 0.8
+}));
+process.env.NODE_ENV !== "production" && (ht.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: t.node
+});
+const gt = ee("span", {
+  name: "MuiSlider",
+  slot: "MarkLabel",
+  shouldForwardProp: (e) => ct(e) && e !== "markLabelActive",
+  overridesResolver: (e, o) => o.markLabel
+})(({
+  theme: e,
+  ownerState: o,
+  markLabelActive: a
+}) => c({}, e.typography.body2, {
+  color: (e.vars || e).palette.text.secondary,
+  position: "absolute",
+  whiteSpace: "nowrap"
+}, o.orientation === "horizontal" && {
+  top: 30,
+  transform: "translateX(-50%)",
+  "@media (pointer: coarse)": {
+    top: 40
+  }
+}, o.orientation === "vertical" && {
+  left: 36,
+  transform: "translateY(50%)",
+  "@media (pointer: coarse)": {
+    left: 44
+  }
+}, a && {
+  color: (e.vars || e).palette.text.primary
+}));
+process.env.NODE_ENV !== "production" && (gt.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: t.node
+});
+const oo = (e) => {
+  const {
+    disabled: o,
+    dragging: a,
+    marked: s,
+    orientation: d,
+    track: L,
+    classes: N,
+    color: f,
+    size: b
+  } = e, q = {
+    root: ["root", o && "disabled", a && "dragging", s && "marked", d === "vertical" && "vertical", L === "inverted" && "trackInverted", L === !1 && "trackFalse", f && `color${U(f)}`, b && `size${U(b)}`],
+    rail: ["rail"],
+    track: ["track"],
+    mark: ["mark"],
+    markActive: ["markActive"],
+    markLabel: ["markLabel"],
+    markLabelActive: ["markLabelActive"],
+    valueLabel: ["valueLabel"],
+    thumb: ["thumb", o && "disabled", b && `thumbSize${U(b)}`, f && `thumbColor${U(f)}`],
+    active: ["active"],
+    disabled: ["disabled"],
+    focusVisible: ["focusVisible"]
+  };
+  return At(q, Qt, N);
+}, ro = ({
+  children: e
+}) => e, yt = /* @__PURE__ */ T.forwardRef(function(o, a) {
+  var s, d, L, N, f, b, q, ue, X, te, ge, de, _, ye, ke, M, pe, D, xe, H, me, fe, W, V;
+  const Y = wt({
+    props: o,
+    name: "MuiSlider"
+  }), G = It().direction === "rtl", {
+    "aria-label": g,
+    "aria-valuetext": oe,
+    "aria-labelledby": w,
+    // eslint-disable-next-line react/prop-types
+    component: Te = "span",
+    components: A = {},
+    componentsProps: I = {},
+    color: we = "primary",
+    classes: Le,
+    className: re,
+    disableSwap: S = !1,
+    disabled: Se = !1,
+    getAriaLabel: be,
+    getAriaValueText: Pe,
+    marks: Ae = !1,
+    max: ae = 100,
+    min: K = 0,
+    orientation: ne = "horizontal",
+    size: le = "medium",
+    step: J = 1,
+    scale: R = it,
+    slotProps: v,
+    slots: m,
+    track: se = "normal",
+    valueLabelDisplay: Q = "off",
+    valueLabelFormat: Z = it
+  } = Y, Ie = Nt(Y, to), x = c({}, Y, {
+    isRtl: G,
+    max: ae,
+    min: K,
+    classes: Le,
+    disabled: Se,
+    disableSwap: S,
+    orientation: ne,
+    marks: Ae,
+    color: we,
+    size: le,
+    step: J,
+    scale: R,
+    track: se,
+    valueLabelDisplay: Q,
+    valueLabelFormat: Z
+  }), {
+    axisProps: ie,
+    getRootProps: Ke,
+    getHiddenInputProps: Je,
+    getThumbProps: r,
+    open: n,
+    active: l,
+    axis: i,
+    focusedThumbIndex: y,
+    range: P,
+    dragging: p,
+    marks: O,
+    values: u,
+    trackOffset: j,
+    trackLeap: ve
+  } = Gt(c({}, x, {
+    rootRef: a
+  }));
+  x.marked = O.length > 0 && O.some((h) => h.label), x.dragging = p, x.focusedThumbIndex = y;
+  const $ = oo(x), je = (s = (d = m == null ? void 0 : m.root) != null ? d : A.Root) != null ? s : pt, Qe = (L = (N = m == null ? void 0 : m.rail) != null ? N : A.Rail) != null ? L : mt, Ze = (f = (b = m == null ? void 0 : m.track) != null ? b : A.Track) != null ? f : ft, et = (q = (ue = m == null ? void 0 : m.thumb) != null ? ue : A.Thumb) != null ? q : bt, tt = (X = (te = m == null ? void 0 : m.valueLabel) != null ? te : A.ValueLabel) != null ? X : vt, Me = (ge = (de = m == null ? void 0 : m.mark) != null ? de : A.Mark) != null ? ge : ht, ze = (_ = (ye = m == null ? void 0 : m.markLabel) != null ? ye : A.MarkLabel) != null ? _ : gt, ot = (ke = (M = m == null ? void 0 : m.input) != null ? M : A.Input) != null ? ke : "input", Fe = (pe = v == null ? void 0 : v.root) != null ? pe : I.root, kt = (D = v == null ? void 0 : v.rail) != null ? D : I.rail, De = (xe = v == null ? void 0 : v.track) != null ? xe : I.track, He = (H = v == null ? void 0 : v.thumb) != null ? H : I.thumb, Ye = (me = v == null ? void 0 : v.valueLabel) != null ? me : I.valueLabel, xt = (fe = v == null ? void 0 : v.mark) != null ? fe : I.mark, Tt = (W = v == null ? void 0 : v.markLabel) != null ? W : I.markLabel, Lt = (V = v == null ? void 0 : v.input) != null ? V : I.input, St = B({
+    elementType: je,
+    getSlotProps: Ke,
+    externalSlotProps: Fe,
+    externalForwardedProps: Ie,
+    additionalProps: c({}, Jt(je) && {
+      as: Te
+    }),
+    ownerState: c({}, x, Fe == null ? void 0 : Fe.ownerState),
+    className: [$.root, re]
+  }), Pt = B({
+    elementType: Qe,
+    externalSlotProps: kt,
+    ownerState: x,
+    className: $.rail
+  }), Ot = B({
+    elementType: Ze,
+    externalSlotProps: De,
+    additionalProps: {
+      style: c({}, ie[i].offset(j), ie[i].leap(ve))
+    },
+    ownerState: c({}, x, De == null ? void 0 : De.ownerState),
+    className: $.track
+  }), Be = B({
+    elementType: et,
+    getSlotProps: r,
+    externalSlotProps: He,
+    ownerState: c({}, x, He == null ? void 0 : He.ownerState),
+    className: $.thumb
+  }), Ct = B({
+    elementType: tt,
+    externalSlotProps: Ye,
+    ownerState: c({}, x, Ye == null ? void 0 : Ye.ownerState),
+    className: $.valueLabel
+  }), Ue = B({
+    elementType: Me,
+    externalSlotProps: xt,
+    ownerState: x,
+    className: $.mark
+  }), qe = B({
+    elementType: ze,
+    externalSlotProps: Tt,
+    ownerState: x,
+    className: $.markLabel
+  }), $t = B({
+    elementType: ot,
+    getSlotProps: Je,
+    externalSlotProps: Lt,
+    ownerState: x
+  });
+  return /* @__PURE__ */ C.jsxs(je, c({}, St, {
+    children: [/* @__PURE__ */ C.jsx(Qe, c({}, Pt)), /* @__PURE__ */ C.jsx(Ze, c({}, Ot)), O.filter((h) => h.value >= K && h.value <= ae).map((h, k) => {
+      const Xe = Ve(h.value, K, ae), Oe = ie[i].offset(Xe);
+      let F;
+      return se === !1 ? F = u.indexOf(h.value) !== -1 : F = se === "normal" && (P ? h.value >= u[0] && h.value <= u[u.length - 1] : h.value <= u[0]) || se === "inverted" && (P ? h.value <= u[0] || h.value >= u[u.length - 1] : h.value >= u[0]), /* @__PURE__ */ C.jsxs(T.Fragment, {
+        children: [/* @__PURE__ */ C.jsx(Me, c({
+          "data-index": k
+        }, Ue, !Ee(Me) && {
+          markActive: F
+        }, {
+          style: c({}, Oe, Ue.style),
+          className: ce(Ue.className, F && $.markActive)
+        })), h.label != null ? /* @__PURE__ */ C.jsx(ze, c({
+          "aria-hidden": !0,
+          "data-index": k
+        }, qe, !Ee(ze) && {
+          markLabelActive: F
+        }, {
+          style: c({}, Oe, qe.style),
+          className: ce($.markLabel, qe.className, F && $.markLabelActive),
+          children: h.label
+        })) : null]
+      }, k);
+    }), u.map((h, k) => {
+      const Xe = Ve(h, K, ae), Oe = ie[i].offset(Xe), F = Q === "off" ? ro : tt;
+      return (
+        /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
+        /* @__PURE__ */ C.jsx(F, c({}, !Ee(F) && {
+          valueLabelFormat: Z,
+          valueLabelDisplay: Q,
+          value: typeof Z == "function" ? Z(R(h), k) : Z,
+          index: k,
+          open: n === k || l === k || Q === "on",
+          disabled: Se
+        }, Ct, {
+          children: /* @__PURE__ */ C.jsx(et, c({
+            "data-index": k
+          }, Be, {
+            className: ce($.thumb, Be.className, l === k && $.active, y === k && $.focusVisible),
+            style: c({}, Oe, {
+              pointerEvents: S && l !== k ? "none" : void 0
+            }, Be.style),
+            children: /* @__PURE__ */ C.jsx(ot, c({
+              "data-index": k,
+              "aria-label": be ? be(k) : g,
+              "aria-valuenow": R(h),
+              "aria-labelledby": w,
+              "aria-valuetext": Pe ? Pe(R(h), k) : oe,
+              value: u[k]
+            }, $t))
+          }))
+        }), k)
+      );
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" && (yt.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The label of the slider.
+   */
+  "aria-label": nt(t.string, (e) => Array.isArray(e.value || e.defaultValue) && e["aria-label"] != null ? new Error("MUI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.") : null),
+  /**
+   * The id of the element containing a label for the slider.
+   */
+  "aria-labelledby": t.string,
+  /**
+   * A string value that provides a user-friendly name for the current value of the slider.
+   */
+  "aria-valuetext": nt(t.string, (e) => Array.isArray(e.value || e.defaultValue) && e["aria-valuetext"] != null ? new Error("MUI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.") : null),
+  /**
+   * @ignore
+   */
+  children: t.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @ignore
+   */
+  className: t.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color: t.oneOfType([t.oneOf(["primary", "secondary"]), t.string]),
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   */
+  components: t.shape({
+    Input: t.elementType,
+    Mark: t.elementType,
+    MarkLabel: t.elementType,
+    Rail: t.elementType,
+    Root: t.elementType,
+    Thumb: t.elementType,
+    Track: t.elementType,
+    ValueLabel: t.elementType
+  }),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
+   * @default {}
+   */
+  componentsProps: t.shape({
+    input: t.oneOfType([t.func, t.object]),
+    mark: t.oneOfType([t.func, t.object]),
+    markLabel: t.oneOfType([t.func, t.object]),
+    rail: t.oneOfType([t.func, t.object]),
+    root: t.oneOfType([t.func, t.object]),
+    thumb: t.oneOfType([t.func, t.object]),
+    track: t.oneOfType([t.func, t.object]),
+    valueLabel: t.oneOfType([t.func, t.shape({
+      children: t.element,
+      className: t.string,
+      open: t.bool,
+      style: t.object,
+      value: t.number,
+      valueLabelDisplay: t.oneOf(["auto", "off", "on"])
+    })])
+  }),
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: t.oneOfType([t.arrayOf(t.number), t.number]),
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: t.bool,
+  /**
+   * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
+   * @default false
+   */
+  disableSwap: t.bool,
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
+   * This is important for screen reader users.
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaLabel: t.func,
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
+   * This is important for screen reader users.
+   * @param {number} value The thumb label's value to format.
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaValueText: t.func,
+  /**
+   * Marks indicate predetermined values to which the user can move the slider.
+   * If `true` the marks are spaced according the value of the `step` prop.
+   * If an array, it should contain objects with `value` and an optional `label` keys.
+   * @default false
+   */
+  marks: t.oneOfType([t.arrayOf(t.shape({
+    label: t.node,
+    value: t.number.isRequired
+  })), t.bool]),
+  /**
+   * The maximum allowed value of the slider.
+   * Should not be equal to min.
+   * @default 100
+   */
+  max: t.number,
+  /**
+   * The minimum allowed value of the slider.
+   * Should not be equal to max.
+   * @default 0
+   */
+  min: t.number,
+  /**
+   * Name attribute of the hidden `input` element.
+   */
+  name: t.string,
+  /**
+   * Callback function that is fired when the slider's value changed.
+   *
+   * @param {Event} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (any).
+   * **Warning**: This is a generic event not a change event.
+   * @param {number | number[]} value The new value.
+   * @param {number} activeThumb Index of the currently moved thumb.
+   */
+  onChange: t.func,
+  /**
+   * Callback function that is fired when the `mouseup` is triggered.
+   *
+   * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {number | number[]} value The new value.
+   */
+  onChangeCommitted: t.func,
+  /**
+   * The component orientation.
+   * @default 'horizontal'
+   */
+  orientation: t.oneOf(["horizontal", "vertical"]),
+  /**
+   * A transformation function, to change the scale of the slider.
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
+   */
+  scale: t.func,
+  /**
+   * The size of the slider.
+   * @default 'medium'
+   */
+  size: t.oneOfType([t.oneOf(["small", "medium"]), t.string]),
+  /**
+   * The props used for each slot inside the Slider.
+   * @default {}
+   */
+  slotProps: t.shape({
+    input: t.oneOfType([t.func, t.object]),
+    mark: t.oneOfType([t.func, t.object]),
+    markLabel: t.oneOfType([t.func, t.object]),
+    rail: t.oneOfType([t.func, t.object]),
+    root: t.oneOfType([t.func, t.object]),
+    thumb: t.oneOfType([t.func, t.object]),
+    track: t.oneOfType([t.func, t.object]),
+    valueLabel: t.oneOfType([t.func, t.shape({
+      children: t.element,
+      className: t.string,
+      open: t.bool,
+      style: t.object,
+      value: t.number,
+      valueLabelDisplay: t.oneOf(["auto", "off", "on"])
+    })])
+  }),
+  /**
+   * The components used for each slot inside the Slider.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: t.shape({
+    input: t.elementType,
+    mark: t.elementType,
+    markLabel: t.elementType,
+    rail: t.elementType,
+    root: t.elementType,
+    thumb: t.elementType,
+    track: t.elementType,
+    valueLabel: t.elementType
+  }),
+  /**
+   * The granularity with which the slider can step through values. (A "discrete" slider.)
+   * The `min` prop serves as the origin for the valid values.
+   * We recommend (max - min) to be evenly divisible by the step.
+   *
+   * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
+   * @default 1
+   */
+  step: t.number,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
+  /**
+   * Tab index attribute of the hidden `input` element.
+   */
+  tabIndex: t.number,
+  /**
+   * The track presentation:
+   *
+   * - `normal` the track will render a bar representing the slider value.
+   * - `inverted` the track will render a bar representing the remaining slider value.
+   * - `false` the track will render without a bar.
+   * @default 'normal'
+   */
+  track: t.oneOf(["inverted", "normal", !1]),
+  /**
+   * The value of the slider.
+   * For ranged sliders, provide an array with two values.
+   */
+  value: t.oneOfType([t.arrayOf(t.number), t.number]),
+  /**
+   * Controls when the value label is displayed:
+   *
+   * - `auto` the value label will display when the thumb is hovered or focused.
+   * - `on` will display persistently.
+   * - `off` will never display.
+   * @default 'off'
+   */
+  valueLabelDisplay: t.oneOf(["auto", "off", "on"]),
+  /**
+   * The format function the value label's value.
+   *
+   * When a function is provided, it should have the following signature:
+   *
+   * - {number} value The value label's value to format
+   * - {number} index The value label's index to format
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
+   */
+  valueLabelFormat: t.oneOfType([t.func, t.string])
+});
+const ao = yt;
+const xo = ({ ...e }) => /* @__PURE__ */ C.jsx(
+  ao,
+  {
+    className: "kdpa-slider",
+    "aria-labelledby": "discrete-slider",
+    ...e
+  }
+);
+export {
+  xo as KdpaSlider
+};