@weng-lab/ui-components 3.1.0 → 3.1.1

package/dist/ui-components.es98.js

@@ -1,453 +1,501 @@
-import * as g from "react";
-import Re from "./ui-components.es227.js";
-import Pe from "./ui-components.es187.js";
-import P from "./ui-components.es228.js";
-import Ve from "./ui-components.es168.js";
-import Ne from "./ui-components.es131.js";
-import Z from "./ui-components.es188.js";
-import X from "./ui-components.es176.js";
-import ee from "./ui-components.es229.js";
-import Oe from "./ui-components.es230.js";
-import de from "./ui-components.es192.js";
-const Fe = 2;
-function S(n, o, u, i, h) {
-  return u === 1 ? Math.min(n + o, h) : Math.max(n - o, i);
-}
-function be(n, o) {
-  return n - o;
-}
-function me(n, o) {
+import * as k from "react";
+import o from "./ui-components.es91.js";
+import L from "./ui-components.es146.js";
+import v from "./ui-components.es110.js";
+import O from "./ui-components.es113.js";
+import l, { getFilledInputUtilityClass as h } from "./ui-components.es285.js";
+import P, { InputBaseRoot as j, rootOverridesResolver as $, InputBaseInput as w, inputOverridesResolver as U } from "./ui-components.es57.js";
+import { j as A } from "./ui-components.es16.js";
+import { useDefaultProps as S } from "./ui-components.es95.js";
+import W from "./ui-components.es196.js";
+import z from "./ui-components.es118.js";
+import E from "./ui-components.es103.js";
+import R from "./ui-components.es56.js";
+import M from "./ui-components.es105.js";
+const N = (t) => {
   const {
-    index: u
-  } = n.reduce((i, h, y) => {
-    const H = Math.abs(o - h);
-    return i === null || H < i.distance || H === i.distance ? {
-      distance: H,
-      index: y
-    } : i;
-  }, null) ?? {};
-  return u;
-}
-function _(n, o) {
-  if (o.current !== void 0 && n.changedTouches) {
-    const u = n;
-    for (let i = 0; i < u.changedTouches.length; i += 1) {
-      const h = u.changedTouches[i];
-      if (h.identifier === o.current)
-        return {
-          x: h.clientX,
-          y: h.clientY
-        };
-    }
-    return !1;
-  }
+    classes: r,
+    disableUnderline: s,
+    startAdornment: n,
+    endAdornment: p,
+    size: i,
+    hiddenLabel: e,
+    multiline: a
+  } = t, u = {
+    root: ["root", !s && "underline", n && "adornedStart", p && "adornedEnd", i === "small" && `size${z(i)}`, e && "hiddenLabel", a && "multiline"],
+    input: ["input"]
+  }, d = E(u, h, r);
   return {
-    x: n.clientX,
-    y: n.clientY
+    ...r,
+    // forward classes to the InputBase
+    ...d
   };
-}
-function pe(n, o, u) {
-  return (n - o) * 100 / (u - o);
-}
-function Ue(n, o, u) {
-  return (u - o) * n + o;
-}
-function $e(n) {
-  if (Math.abs(n) < 1) {
-    const u = n.toExponential().split("e-"), i = u[0].split(".")[1];
-    return (i ? i.length : 0) + parseInt(u[1], 10);
+}, V = R(j, {
+  shouldForwardProp: (t) => L(t) || t === "classes",
+  name: "MuiFilledInput",
+  slot: "Root",
+  overridesResolver: (t, r) => {
+    const {
+      ownerState: s
+    } = t;
+    return [...$(t, r), !s.disableUnderline && r.underline];
   }
-  const o = n.toString().split(".")[1];
-  return o ? o.length : 0;
-}
-function Ke(n, o, u) {
-  const i = Math.round((n - u) / o) * o + u;
-  return Number(i.toFixed($e(o)));
-}
-function he({
-  values: n,
-  newValue: o,
-  index: u
-}) {
-  const i = n.slice();
-  return i[u] = o, i.sort(be);
-}
-function j({
-  sliderRef: n,
-  activeIndex: o,
-  setActive: u
-}) {
-  const i = X(n.current);
-  (!n.current?.contains(i.activeElement) || Number(i?.activeElement?.getAttribute("data-index")) !== o) && n.current?.querySelector(`[type="range"][data-index="${o}"]`).focus(), u && u(o);
-}
-function q(n, o) {
-  return typeof n == "number" && typeof o == "number" ? n === o : typeof n == "object" && typeof o == "object" ? Re(n, o) : !1;
-}
-const ze = {
-  horizontal: {
-    offset: (n) => ({
-      left: `${n}%`
-    }),
-    leap: (n) => ({
-      width: `${n}%`
-    })
-  },
-  "horizontal-reverse": {
-    offset: (n) => ({
-      right: `${n}%`
+})(v(({
+  theme: t
+}) => {
+  const r = t.palette.mode === "light", s = r ? "rgba(0, 0, 0, 0.42)" : "rgba(255, 255, 255, 0.7)", n = r ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.09)", p = r ? "rgba(0, 0, 0, 0.09)" : "rgba(255, 255, 255, 0.13)", i = r ? "rgba(0, 0, 0, 0.12)" : "rgba(255, 255, 255, 0.12)";
+  return {
+    position: "relative",
+    backgroundColor: t.vars ? t.vars.palette.FilledInput.bg : n,
+    borderTopLeftRadius: (t.vars || t).shape.borderRadius,
+    borderTopRightRadius: (t.vars || t).shape.borderRadius,
+    transition: t.transitions.create("background-color", {
+      duration: t.transitions.duration.shorter,
+      easing: t.transitions.easing.easeOut
     }),
-    leap: (n) => ({
-      width: `${n}%`
-    })
+    "&:hover": {
+      backgroundColor: t.vars ? t.vars.palette.FilledInput.hoverBg : p,
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: t.vars ? t.vars.palette.FilledInput.bg : n
+      }
+    },
+    [`&.${l.focused}`]: {
+      backgroundColor: t.vars ? t.vars.palette.FilledInput.bg : n
+    },
+    [`&.${l.disabled}`]: {
+      backgroundColor: t.vars ? t.vars.palette.FilledInput.disabledBg : i
+    },
+    variants: [{
+      props: ({
+        ownerState: e
+      }) => !e.disableUnderline,
+      style: {
+        "&::after": {
+          left: 0,
+          bottom: 0,
+          content: '""',
+          position: "absolute",
+          right: 0,
+          transform: "scaleX(0)",
+          transition: t.transitions.create("transform", {
+            duration: t.transitions.duration.shorter,
+            easing: t.transitions.easing.easeOut
+          }),
+          pointerEvents: "none"
+          // Transparent to the hover style.
+        },
+        [`&.${l.focused}:after`]: {
+          // translateX(0) is a workaround for Safari transform scale bug
+          // See https://github.com/mui/material-ui/issues/31766
+          transform: "scaleX(1) translateX(0)"
+        },
+        [`&.${l.error}`]: {
+          "&::before, &::after": {
+            borderBottomColor: (t.vars || t).palette.error.main
+          }
+        },
+        "&::before": {
+          borderBottom: `1px solid ${t.vars ? t.alpha(t.vars.palette.common.onBackground, t.vars.opacity.inputUnderline) : s}`,
+          left: 0,
+          bottom: 0,
+          content: '"\\00a0"',
+          position: "absolute",
+          right: 0,
+          transition: t.transitions.create("border-bottom-color", {
+            duration: t.transitions.duration.shorter
+          }),
+          pointerEvents: "none"
+          // Transparent to the hover style.
+        },
+        [`&:hover:not(.${l.disabled}, .${l.error}):before`]: {
+          borderBottom: `1px solid ${(t.vars || t).palette.text.primary}`
+        },
+        [`&.${l.disabled}:before`]: {
+          borderBottomStyle: "dotted"
+        }
+      }
+    }, ...Object.entries(t.palette).filter(O()).map(([e]) => ({
+      props: {
+        disableUnderline: !1,
+        color: e
+      },
+      style: {
+        "&::after": {
+          borderBottom: `2px solid ${(t.vars || t).palette[e]?.main}`
+        }
+      }
+    })), {
+      props: ({
+        ownerState: e
+      }) => e.startAdornment,
+      style: {
+        paddingLeft: 12
+      }
+    }, {
+      props: ({
+        ownerState: e
+      }) => e.endAdornment,
+      style: {
+        paddingRight: 12
+      }
+    }, {
+      props: ({
+        ownerState: e
+      }) => e.multiline,
+      style: {
+        padding: "25px 12px 8px"
+      }
+    }, {
+      props: ({
+        ownerState: e,
+        size: a
+      }) => e.multiline && a === "small",
+      style: {
+        paddingTop: 21,
+        paddingBottom: 4
+      }
+    }, {
+      props: ({
+        ownerState: e
+      }) => e.multiline && e.hiddenLabel,
+      style: {
+        paddingTop: 16,
+        paddingBottom: 17
+      }
+    }, {
+      props: ({
+        ownerState: e
+      }) => e.multiline && e.hiddenLabel && e.size === "small",
+      style: {
+        paddingTop: 8,
+        paddingBottom: 9
+      }
+    }]
+  };
+})), X = R(w, {
+  name: "MuiFilledInput",
+  slot: "Input",
+  overridesResolver: U
+})(v(({
+  theme: t
+}) => ({
+  paddingTop: 25,
+  paddingRight: 12,
+  paddingBottom: 8,
+  paddingLeft: 12,
+  ...!t.vars && {
+    "&:-webkit-autofill": {
+      WebkitBoxShadow: t.palette.mode === "light" ? null : "0 0 0 100px #266798 inset",
+      WebkitTextFillColor: t.palette.mode === "light" ? null : "#fff",
+      caretColor: t.palette.mode === "light" ? null : "#fff",
+      borderTopLeftRadius: "inherit",
+      borderTopRightRadius: "inherit"
+    }
   },
-  vertical: {
-    offset: (n) => ({
-      bottom: `${n}%`
-    }),
-    leap: (n) => ({
-      height: `${n}%`
-    })
-  }
-}, Be = (n) => n;
-let W;
-function ge() {
-  return W === void 0 && (typeof CSS < "u" && typeof CSS.supports == "function" ? W = CSS.supports("touch-action", "none") : W = !0), W;
-}
-function tt(n) {
-  const {
-    "aria-labelledby": o,
-    defaultValue: u,
-    disabled: i = !1,
-    disableSwap: h = !1,
-    isRtl: y = !1,
-    marks: H = !1,
-    max: m = 100,
-    min: l = 0,
-    name: te,
-    onChange: ne,
-    onChangeCommitted: V,
-    orientation: N = "horizontal",
-    rootRef: we,
-    scale: re = Be,
-    step: v = 1,
-    shiftStep: Y = 10,
-    tabIndex: xe,
-    value: ye
-  } = n, I = g.useRef(void 0), [O, D] = g.useState(-1), [ve, L] = g.useState(-1), [oe, se] = g.useState(!1), F = g.useRef(0), G = g.useRef(null), [A, U] = Pe({
-    controlled: ye,
-    default: u ?? l,
-    name: "Slider"
-  }), E = ne && ((t, e, r) => {
-    const c = t.nativeEvent || t, a = new c.constructor(c.type, c);
-    Object.defineProperty(a, "target", {
-      writable: !0,
-      value: {
-        value: e,
-        name: te
+  ...t.vars && {
+    "&:-webkit-autofill": {
+      borderTopLeftRadius: "inherit",
+      borderTopRightRadius: "inherit"
+    },
+    [t.getColorSchemeSelector("dark")]: {
+      "&:-webkit-autofill": {
+        WebkitBoxShadow: "0 0 0 100px #266798 inset",
+        WebkitTextFillColor: "#fff",
+        caretColor: "#fff"
       }
-    }), G.current = e, ne(a, e, r);
-  }), M = Array.isArray(A);
-  let p = M ? A.slice().sort(be) : [A];
-  p = p.map((t) => t == null ? l : P(t, l, m));
-  const $ = H === !0 && v !== null ? [...Array(Math.floor((m - l) / v) + 1)].map((t, e) => ({
-    value: l + v * e
-  })) : H || [], d = $.map((t) => t.value), [ie, K] = g.useState(-1), b = g.useRef(null), ae = Ve(we, b), Ee = (t) => (e) => {
-    const r = Number(e.currentTarget.getAttribute("data-index"));
-    de(e.target) && K(r), L(r), t?.onFocus?.(e);
-  }, ke = (t) => (e) => {
-    de(e.target) || K(-1), L(-1), t?.onBlur?.(e);
-  }, ce = (t, e) => {
-    const r = Number(t.currentTarget.getAttribute("data-index")), c = p[r], a = d.indexOf(c);
-    let s = e;
-    if ($ && v == null) {
-      const w = d[d.length - 1];
-      s >= w ? s = w : s <= d[0] ? s = d[0] : s = s < c ? d[a - 1] : d[a + 1];
     }
-    if (s = P(s, l, m), M) {
-      h && (s = P(s, p[r - 1] || -1 / 0, p[r + 1] || 1 / 0));
-      const w = s;
-      s = he({
-        values: p,
-        newValue: s,
-        index: r
-      });
-      let x = r;
-      h || (x = s.indexOf(w)), j({
-        sliderRef: b,
-        activeIndex: x
-      });
+  },
+  variants: [{
+    props: {
+      size: "small"
+    },
+    style: {
+      paddingTop: 21,
+      paddingBottom: 4
     }
-    U(s), K(r), E && !q(s, A) && E(t, s, r), V && V(t, G.current ?? s);
-  }, Ae = (t) => (e) => {
-    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(e.key)) {
-      e.preventDefault();
-      const r = Number(e.currentTarget.getAttribute("data-index")), c = p[r];
-      let a = null;
-      if (v != null) {
-        const s = e.shiftKey ? Y : v;
-        switch (e.key) {
-          case "ArrowUp":
-            a = S(c, s, 1, l, m);
-            break;
-          case "ArrowRight":
-            a = S(c, s, y ? -1 : 1, l, m);
-            break;
-          case "ArrowDown":
-            a = S(c, s, -1, l, m);
-            break;
-          case "ArrowLeft":
-            a = S(c, s, y ? 1 : -1, l, m);
-            break;
-          case "PageUp":
-            a = S(c, Y, 1, l, m);
-            break;
-          case "PageDown":
-            a = S(c, Y, -1, l, m);
-            break;
-          case "Home":
-            a = l;
-            break;
-          case "End":
-            a = m;
-            break;
-        }
-      } else if ($) {
-        const s = d[d.length - 1], w = d.indexOf(c), x = [y ? "ArrowRight" : "ArrowLeft", "ArrowDown", "PageDown", "Home"], f = [y ? "ArrowLeft" : "ArrowRight", "ArrowUp", "PageUp", "End"];
-        x.includes(e.key) ? w === 0 ? a = d[0] : a = d[w - 1] : f.includes(e.key) && (w === d.length - 1 ? a = s : a = d[w + 1]);
-      }
-      a != null && ce(e, a);
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.hiddenLabel,
+    style: {
+      paddingTop: 16,
+      paddingBottom: 17
     }
-    t?.onKeyDown?.(e);
-  };
-  Ne(() => {
-    i && b.current.contains(document.activeElement) && document.activeElement?.blur();
-  }, [i]), i && O !== -1 && D(-1), i && ie !== -1 && K(-1);
-  const He = (t) => (e) => {
-    t.onChange?.(e), ce(e, e.target.valueAsNumber);
-  }, ue = g.useRef(void 0);
-  let z = N;
-  y && N === "horizontal" && (z += "-reverse");
-  const B = ({
-    finger: t,
-    move: e = !1
-  }) => {
-    const {
-      current: r
-    } = b, {
-      width: c,
-      height: a,
-      bottom: s,
-      left: w
-    } = r.getBoundingClientRect();
-    let x;
-    z.startsWith("vertical") ? x = (s - t.y) / a : x = (t.x - w) / c, z.includes("-reverse") && (x = 1 - x);
-    let f;
-    if (f = Ue(x, l, m), v)
-      f = Ke(f, v, l);
-    else {
-      const Q = me(d, f);
-      f = d[Q];
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.startAdornment,
+    style: {
+      paddingLeft: 0
     }
-    f = P(f, l, m);
-    let k = 0;
-    if (M) {
-      e ? k = ue.current : k = me(p, f), h && (f = P(f, p[k - 1] || -1 / 0, p[k + 1] || 1 / 0));
-      const Q = f;
-      f = he({
-        values: p,
-        newValue: f,
-        index: k
-      }), h && e || (k = f.indexOf(Q), ue.current = k);
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.endAdornment,
+    style: {
+      paddingRight: 0
     }
-    return {
-      newValue: f,
-      activeIndex: k
-    };
-  }, C = Z((t) => {
-    const e = _(t, I);
-    if (!e)
-      return;
-    if (F.current += 1, t.type === "mousemove" && t.buttons === 0) {
-      T(t);
-      return;
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.hiddenLabel && r.size === "small",
+    style: {
+      paddingTop: 8,
+      paddingBottom: 9
     }
-    const {
-      newValue: r,
-      activeIndex: c
-    } = B({
-      finger: e,
-      move: !0
-    });
-    j({
-      sliderRef: b,
-      activeIndex: c,
-      setActive: D
-    }), U(r), !oe && F.current > Fe && se(!0), E && !q(r, A) && E(t, r, c);
-  }), T = Z((t) => {
-    const e = _(t, I);
-    if (se(!1), !e)
-      return;
-    const {
-      newValue: r
-    } = B({
-      finger: e,
-      move: !0
-    });
-    D(-1), t.type === "touchend" && L(-1), V && V(t, G.current ?? r), I.current = void 0, R();
-  }), J = Z((t) => {
-    if (i)
-      return;
-    ge() || t.preventDefault();
-    const e = t.changedTouches[0];
-    e != null && (I.current = e.identifier);
-    const r = _(t, I);
-    if (r !== !1) {
-      const {
-        newValue: a,
-        activeIndex: s
-      } = B({
-        finger: r
-      });
-      j({
-        sliderRef: b,
-        activeIndex: s,
-        setActive: D
-      }), U(a), E && !q(a, A) && E(t, a, s);
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.multiline,
+    style: {
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0
     }
-    F.current = 0;
-    const c = X(b.current);
-    c.addEventListener("touchmove", C, {
-      passive: !0
-    }), c.addEventListener("touchend", T, {
-      passive: !0
-    });
-  }), R = g.useCallback(() => {
-    const t = X(b.current);
-    t.removeEventListener("mousemove", C), t.removeEventListener("mouseup", T), t.removeEventListener("touchmove", C), t.removeEventListener("touchend", T);
-  }, [T, C]);
-  g.useEffect(() => {
-    const {
-      current: t
-    } = b;
-    return t.addEventListener("touchstart", J, {
-      passive: ge()
-    }), () => {
-      t.removeEventListener("touchstart", J), R();
-    };
-  }, [R, J]), g.useEffect(() => {
-    i && R();
-  }, [i, R]);
-  const Ie = (t) => (e) => {
-    if (t.onMouseDown?.(e), i || e.defaultPrevented || e.button !== 0)
-      return;
-    e.preventDefault();
-    const r = _(e, I);
-    if (r !== !1) {
-      const {
-        newValue: a,
-        activeIndex: s
-      } = B({
-        finger: r
-      });
-      j({
-        sliderRef: b,
-        activeIndex: s,
-        setActive: D
-      }), U(a), E && !q(a, A) && E(e, a, s);
+  }]
+}))), T = /* @__PURE__ */ k.forwardRef(function(r, s) {
+  const n = S({
+    props: r,
+    name: "MuiFilledInput"
+  }), {
+    disableUnderline: p = !1,
+    components: i = {},
+    componentsProps: e,
+    fullWidth: a = !1,
+    hiddenLabel: u,
+    // declare here to prevent spreading to DOM
+    inputComponent: d = "input",
+    multiline: b = !1,
+    slotProps: c,
+    slots: f = {},
+    type: m = "text",
+    ...I
+  } = n, g = {
+    ...n,
+    disableUnderline: p,
+    fullWidth: a,
+    inputComponent: d,
+    multiline: b,
+    type: m
+  }, C = N(n), y = {
+    root: {
+      ownerState: g
+    },
+    input: {
+      ownerState: g
     }
-    F.current = 0;
-    const c = X(b.current);
-    c.addEventListener("mousemove", C, {
-      passive: !0
-    }), c.addEventListener("mouseup", T);
-  }, le = pe(M ? p[0] : l, l, m), Te = pe(p[p.length - 1], l, m) - le, Se = (t = {}) => {
-    const e = ee(t), r = {
-      onMouseDown: Ie(e || {})
-    }, c = {
-      ...e,
-      ...r
-    };
-    return {
-      ...t,
-      ref: ae,
-      ...c
-    };
-  }, De = (t) => (e) => {
-    t.onMouseOver?.(e);
-    const r = Number(e.currentTarget.getAttribute("data-index"));
-    L(r);
-  }, Le = (t) => (e) => {
-    t.onMouseLeave?.(e), L(-1);
-  }, Me = (t = {}) => {
-    const e = ee(t), r = {
-      onMouseOver: De(e || {}),
-      onMouseLeave: Le(e || {})
-    };
-    return {
-      ...t,
-      ...e,
-      ...r
-    };
-  }, Ce = (t) => ({
-    // So the non active thumb doesn't show its label on hover.
-    pointerEvents: O !== -1 && O !== t ? "none" : void 0
-  });
-  let fe;
-  return N === "vertical" && (fe = y ? "vertical-rl" : "vertical-lr"), {
-    active: O,
-    axis: z,
-    axisProps: ze,
-    dragging: oe,
-    focusedThumbIndex: ie,
-    getHiddenInputProps: (t = {}) => {
-      const e = ee(t), r = {
-        onChange: He(e || {}),
-        onFocus: Ee(e || {}),
-        onBlur: ke(e || {}),
-        onKeyDown: Ae(e || {})
-      }, c = {
-        ...e,
-        ...r
-      };
-      return {
-        tabIndex: xe,
-        "aria-labelledby": o,
-        "aria-orientation": N,
-        "aria-valuemax": re(m),
-        "aria-valuemin": re(l),
-        name: te,
-        type: "range",
-        min: n.min,
-        max: n.max,
-        step: n.step === null && n.marks ? "any" : n.step ?? void 0,
-        disabled: i,
-        ...t,
-        ...c,
-        style: {
-          ...Oe,
-          direction: y ? "rtl" : "ltr",
-          // So that VoiceOver's focus indicator matches the thumb's dimensions
-          width: "100%",
-          height: "100%",
-          writingMode: fe
-        }
-      };
+  }, B = c ?? e ? W(y, c ?? e) : y, x = f.root ?? i.Root ?? V, F = f.input ?? i.Input ?? X;
+  return /* @__PURE__ */ A.jsx(P, {
+    slots: {
+      root: x,
+      input: F
     },
-    getRootProps: Se,
-    getThumbProps: Me,
-    marks: $,
-    open: ve,
-    range: M,
-    rootRef: ae,
-    trackLeap: Te,
-    trackOffset: le,
-    values: p,
-    getThumbStyle: Ce
-  };
-}
+    slotProps: B,
+    fullWidth: a,
+    inputComponent: d,
+    multiline: b,
+    ref: s,
+    type: m,
+    ...I,
+    classes: C
+  });
+});
+process.env.NODE_ENV !== "production" && (T.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   */
+  autoComplete: o.string,
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   */
+  autoFocus: o.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * 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/#custom-colors).
+   * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
+   */
+  color: o.oneOfType([o.oneOf(["primary", "secondary"]), o.string]),
+  /**
+   * The components used for each slot inside.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  components: o.shape({
+    Input: o.elementType,
+    Root: o.elementType
+  }),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  componentsProps: o.shape({
+    input: o.object,
+    root: o.object
+  }),
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: o.any,
+  /**
+   * If `true`, the component is disabled.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the input will not have an underline.
+   * @default false
+   */
+  disableUnderline: o.bool,
+  /**
+   * End `InputAdornment` for this component.
+   */
+  endAdornment: o.node,
+  /**
+   * If `true`, the `input` will indicate an error.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  error: o.bool,
+  /**
+   * If `true`, the `input` will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: o.bool,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: o.bool,
+  /**
+   * The id of the `input` element.
+   */
+  id: o.string,
+  /**
+   * The component used for the `input` element.
+   * Either a string to use a HTML element or a component.
+   * @default 'input'
+   */
+  inputComponent: o.elementType,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
+   * @default {}
+   */
+  inputProps: o.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: M,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   * The prop defaults to the value (`'none'`) inherited from the parent FormControl component.
+   */
+  margin: o.oneOf(["dense", "none"]),
+  /**
+   * Maximum number of rows to display when multiline option is set to true.
+   */
+  maxRows: o.oneOfType([o.number, o.string]),
+  /**
+   * Minimum number of rows to display when multiline option is set to true.
+   */
+  minRows: o.oneOfType([o.number, o.string]),
+  /**
+   * If `true`, a [TextareaAutosize](https://mui.com/material-ui/react-textarea-autosize/) element is rendered.
+   * @default false
+   */
+  multiline: o.bool,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: o.string,
+  /**
+   * Callback fired when the value is changed.
+   *
+   * @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   */
+  onChange: o.func,
+  /**
+   * The short hint displayed in the `input` before the user enters a value.
+   */
+  placeholder: o.string,
+  /**
+   * It prevents the user from changing the value of the field
+   * (not from interacting with the field).
+   */
+  readOnly: o.bool,
+  /**
+   * If `true`, the `input` element is required.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  required: o.bool,
+  /**
+   * Number of rows to display when multiline option is set to true.
+   */
+  rows: o.oneOfType([o.number, o.string]),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: o.shape({
+    input: o.object,
+    root: o.object
+  }),
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: o.shape({
+    input: o.elementType,
+    root: o.elementType
+  }),
+  /**
+   * Start `InputAdornment` for this component.
+   */
+  startAdornment: o.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
+   * @default 'text'
+   */
+  type: o.string,
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: o.any
+});
+T.muiName = "Input";
 export {
-  Be as Identity,
-  tt as useSlider,
-  pe as valueToPercent
+  T as default
 };
 //# sourceMappingURL=ui-components.es98.js.map