@solostylist/ui-kit 1.0.200 → 1.0.202

package/dist/{Select-80JhW337.js → Select-D2l9rDWL.js}

@@ -1,12 +1,12 @@
 import * as s from "react";
-import { c as F, P as e, o as wo, g as eo, k as Do } from "./createTheme-DgoJyWM-.js";
+import { P as e, c as F, o as wo, g as eo, k as Do } from "./createTheme-DgoJyWM-.js";
 import { c as ie } from "./clsx-OuTLNxxd.js";
-import { u as ae, c as Q, m as U } from "./DefaultPropsProvider-DPuuPIbS.js";
+import { m as U, u as ae, c as Q } from "./DefaultPropsProvider-DPuuPIbS.js";
 import { c as be } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
 import { g as Lo, i as uo } from "./iconButtonClasses-BMfIhNTh.js";
 import { j as m } from "./jsx-runtime-tc70JA_2.js";
 import { s as N, r as ue, a as Uo } from "./styled-8Y5KoVix.js";
-import { c as Io, B as Vo, u as We, d as Ho, i as po, r as ge, e as _o, b as qo } from "./ButtonBase-D73M0QY5.js";
+import { u as We, d as Vo, i as po, r as ge, e as Ho, b as _o, c as Io, B as qo } from "./ButtonBase-D73M0QY5.js";
 import { g as ye } from "./generateUtilityClass-BhfUaMgk.js";
 import { g as he } from "./generateUtilityClasses-E9gROIFd.js";
 import { css as Ro, keyframes as To } from "@emotion/react";
@@ -42,481 +42,723 @@ function Ye(o, t) {
     o.type.muiName ?? o.type?._payload?.value?.muiName
   ) !== -1;
 }
-function nt(o) {
-  return ye("MuiCircularProgress", o);
-}
-he("MuiCircularProgress", ["root", "determinate", "indeterminate", "colorPrimary", "colorSecondary", "svg", "track", "circle", "circleDeterminate", "circleIndeterminate", "circleDisableShrink"]);
-const G = 44, Je = To`
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-`, Qe = To`
-  0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0;
-  }
-
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px;
-  }
-
-  100% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: -126px;
-  }
-`, rt = typeof Je != "string" ? Ro`
-        animation: ${Je} 1.4s linear infinite;
-      ` : null, st = typeof Qe != "string" ? Ro`
-        animation: ${Qe} 1.4s ease-in-out infinite;
-      ` : null, it = (o) => {
-  const {
-    classes: t,
-    variant: n,
-    color: r,
-    disableShrink: a
-  } = o, d = {
-    root: ["root", n, `color${F(r)}`],
-    svg: ["svg"],
-    track: ["track"],
-    circle: ["circle", `circle${F(n)}`, a && "circleDisableShrink"]
-  };
-  return Q(d, nt, t);
-}, at = N("span", {
-  name: "MuiCircularProgress",
-  slot: "Root",
-  overridesResolver: (o, t) => {
-    const {
-      ownerState: n
-    } = o;
-    return [t.root, t[n.variant], t[`color${F(n.color)}`]];
-  }
-})(U(({
-  theme: o
-}) => ({
-  display: "inline-block",
-  variants: [{
-    props: {
-      variant: "determinate"
-    },
-    style: {
-      transition: o.transitions.create("transform")
-    }
-  }, {
-    props: {
-      variant: "indeterminate"
-    },
-    style: rt || {
-      animation: `${Je} 1.4s linear infinite`
-    }
-  }, ...Object.entries(o.palette).filter(be()).map(([t]) => ({
-    props: {
-      color: t
-    },
-    style: {
-      color: (o.vars || o).palette[t].main
-    }
-  }))]
-}))), lt = N("svg", {
-  name: "MuiCircularProgress",
-  slot: "Svg"
+var yo;
+const nt = N("fieldset", {
+  name: "MuiNotchedOutlined",
+  shouldForwardProp: ue
 })({
-  display: "block"
-  // Keeps the progress centered
-}), dt = N("circle", {
-  name: "MuiCircularProgress",
-  slot: "Circle",
-  overridesResolver: (o, t) => {
-    const {
-      ownerState: n
-    } = o;
-    return [t.circle, t[`circle${F(n.variant)}`], n.disableShrink && t.circleDisableShrink];
-  }
+  textAlign: "left",
+  position: "absolute",
+  bottom: 0,
+  right: 0,
+  top: -5,
+  left: 0,
+  margin: 0,
+  padding: "0 8px",
+  pointerEvents: "none",
+  borderRadius: "inherit",
+  borderStyle: "solid",
+  borderWidth: 1,
+  overflow: "hidden",
+  minWidth: "0%"
+}), rt = N("legend", {
+  name: "MuiNotchedOutlined",
+  shouldForwardProp: ue
 })(U(({
   theme: o
 }) => ({
-  stroke: "currentColor",
+  float: "unset",
+  // Fix conflict with bootstrap
+  width: "auto",
+  // Fix conflict with bootstrap
+  overflow: "hidden",
+  // Fix Horizontal scroll when label too long
   variants: [{
-    props: {
-      variant: "determinate"
-    },
+    props: ({
+      ownerState: t
+    }) => !t.withLabel,
     style: {
-      transition: o.transitions.create("stroke-dashoffset")
+      padding: 0,
+      lineHeight: "11px",
+      // sync with `height` in `legend` styles
+      transition: o.transitions.create("width", {
+        duration: 150,
+        easing: o.transitions.easing.easeOut
+      })
     }
   }, {
-    props: {
-      variant: "indeterminate"
-    },
+    props: ({
+      ownerState: t
+    }) => t.withLabel,
     style: {
-      // Some default value that looks fine waiting for the animation to kicks in.
-      strokeDasharray: "80px, 200px",
-      strokeDashoffset: 0
-      // Add the unit to fix a Edge 16 and below bug.
+      display: "block",
+      // Fix conflict with normalize.css and sanitize.css
+      padding: 0,
+      height: 11,
+      // sync with `lineHeight` in `legend` styles
+      fontSize: "0.75em",
+      visibility: "hidden",
+      maxWidth: 0.01,
+      transition: o.transitions.create("max-width", {
+        duration: 50,
+        easing: o.transitions.easing.easeOut
+      }),
+      whiteSpace: "nowrap",
+      "& > span": {
+        paddingLeft: 5,
+        paddingRight: 5,
+        display: "inline-block",
+        opacity: 0,
+        visibility: "visible"
+      }
     }
   }, {
     props: ({
       ownerState: t
-    }) => t.variant === "indeterminate" && !t.disableShrink,
-    style: st || {
-      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
-      animation: `${Qe} 1.4s ease-in-out infinite`
+    }) => t.withLabel && t.notched,
+    style: {
+      maxWidth: "100%",
+      transition: o.transitions.create("max-width", {
+        duration: 100,
+        easing: o.transitions.easing.easeOut,
+        delay: 50
+      })
     }
   }]
-}))), ct = N("circle", {
-  name: "MuiCircularProgress",
-  slot: "Track"
-})(U(({
-  theme: o
-}) => ({
-  stroke: "currentColor",
-  opacity: (o.vars || o).palette.action.activatedOpacity
-}))), Po = /* @__PURE__ */ s.forwardRef(function(t, n) {
-  const r = ae({
-    props: t,
-    name: "MuiCircularProgress"
-  }), {
-    className: a,
-    color: d = "primary",
-    disableShrink: i = !1,
-    enableTrackSlot: u = !1,
-    size: v = 40,
-    style: S,
-    thickness: f = 3.6,
-    value: y = 0,
-    variant: b = "indeterminate",
-    ...R
-  } = r, C = {
-    ...r,
-    color: d,
-    disableShrink: i,
-    size: v,
-    thickness: f,
-    value: y,
-    variant: b,
-    enableTrackSlot: u
-  }, T = it(C), g = {}, h = {}, O = {};
-  if (b === "determinate") {
-    const c = 2 * Math.PI * ((G - f) / 2);
-    g.strokeDasharray = c.toFixed(3), O["aria-valuenow"] = Math.round(y), g.strokeDashoffset = `${((100 - y) / 100 * c).toFixed(3)}px`, h.transform = "rotate(-90deg)";
-  }
-  return /* @__PURE__ */ m.jsx(at, {
-    className: ie(T.root, a),
-    style: {
-      width: v,
-      height: v,
-      ...h,
-      ...S
-    },
-    ownerState: C,
-    ref: n,
-    role: "progressbar",
-    ...O,
-    ...R,
-    children: /* @__PURE__ */ m.jsxs(lt, {
-      className: T.svg,
-      ownerState: C,
-      viewBox: `${G / 2} ${G / 2} ${G} ${G}`,
-      children: [u ? /* @__PURE__ */ m.jsx(ct, {
-        className: T.track,
-        ownerState: C,
-        cx: G,
-        cy: G,
-        r: (G - f) / 2,
-        fill: "none",
-        strokeWidth: f,
-        "aria-hidden": "true"
-      }) : null, /* @__PURE__ */ m.jsx(dt, {
-        className: T.circle,
-        style: g,
-        ownerState: C,
-        cx: G,
-        cy: G,
-        r: (G - f) / 2,
-        fill: "none",
-        strokeWidth: f
-      })]
-    })
-  });
-});
-process.env.NODE_ENV !== "production" && (Po.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: e.object,
-  /**
-   * @ignore
-   */
-  className: e.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/#custom-colors).
-   * @default 'primary'
-   */
-  color: e.oneOfType([e.oneOf(["inherit", "primary", "secondary", "error", "info", "success", "warning"]), e.string]),
-  /**
-   * If `true`, the shrink animation is disabled.
-   * This only works if variant is `indeterminate`.
-   * @default false
+})));
+function Po(o) {
+  const {
+    children: t,
+    classes: n,
+    className: r,
+    label: a,
+    notched: d,
+    ...i
+  } = o, u = a != null && a !== "", v = {
+    ...o,
+    notched: d,
+    withLabel: u
+  };
+  return /* @__PURE__ */ m.jsx(nt, {
+    "aria-hidden": !0,
+    className: r,
+    ownerState: v,
+    ...i,
+    children: /* @__PURE__ */ m.jsx(rt, {
+      ownerState: v,
+      children: u ? /* @__PURE__ */ m.jsx("span", {
+        children: a
+      }) : (
+        // notranslate needed while Google Translate will not fix zero-width space issue
+        yo || (yo = /* @__PURE__ */ m.jsx("span", {
+          className: "notranslate",
+          "aria-hidden": !0,
+          children: "​"
+        }))
+      )
+    })
+  });
+}
+process.env.NODE_ENV !== "production" && (Po.propTypes = {
+  /**
+   * The content of the component.
    */
-  disableShrink: Io(e.bool, (o) => o.disableShrink && o.variant && o.variant !== "indeterminate" ? new Error("MUI: You have provided the `disableShrink` prop with a variant other than `indeterminate`. This will have no effect.") : null),
+  children: e.node,
   /**
-   * If `true`, a track circle slot is mounted to show a subtle background for the progress.
-   * The `size` and `thickness` apply to the track slot to be consistent with the progress circle.
-   * @default false
+   * Override or extend the styles applied to the component.
    */
-  enableTrackSlot: e.bool,
+  classes: e.object,
   /**
-   * The size of the component.
-   * If using a number, the pixel unit is assumed.
-   * If using a string, you need to provide the CSS unit, for example '3rem'.
-   * @default 40
+   * @ignore
    */
-  size: e.oneOfType([e.number, e.string]),
+  className: e.string,
+  /**
+   * The label.
+   */
+  label: e.node,
+  /**
+   * If `true`, the outline is notched to accommodate the label.
+   */
+  notched: e.bool.isRequired,
   /**
    * @ignore
    */
-  style: e.object,
+  style: e.object
+});
+function to({
+  props: o,
+  states: t,
+  muiFormControl: n
+}) {
+  return t.reduce((r, a) => (r[a] = o[a], n && typeof o[a] > "u" && (r[a] = n[a]), r), {});
+}
+function Me(o) {
+  return parseInt(o, 10) || 0;
+}
+const st = {
+  shadow: {
+    // Visibility needed to hide the extra text area on iPads
+    visibility: "hidden",
+    // Remove from the content flow
+    position: "absolute",
+    // Ignore the scrollbar width
+    overflow: "hidden",
+    height: 0,
+    top: 0,
+    left: 0,
+    // Create a new layer, increase the isolation of the computed values
+    transform: "translateZ(0)"
+  }
+};
+function it(o) {
+  for (const t in o)
+    return !1;
+  return !0;
+}
+function ho(o) {
+  return it(o) || o.outerHeightStyle === 0 && !o.overflowing;
+}
+const jo = /* @__PURE__ */ s.forwardRef(function(t, n) {
+  const {
+    onChange: r,
+    maxRows: a,
+    minRows: d = 1,
+    style: i,
+    value: u,
+    ...v
+  } = t, {
+    current: S
+  } = s.useRef(u != null), f = s.useRef(null), y = We(n, f), b = s.useRef(null), R = s.useRef(null), C = s.useCallback(() => {
+    const c = f.current, p = R.current;
+    if (!c || !p)
+      return;
+    const w = fo(c).getComputedStyle(c);
+    if (w.width === "0px")
+      return {
+        outerHeightStyle: 0,
+        overflowing: !1
+      };
+    p.style.width = w.width, p.value = c.value || t.placeholder || "x", p.value.slice(-1) === `
+` && (p.value += " ");
+    const V = w.boxSizing, H = Me(w.paddingBottom) + Me(w.paddingTop), _ = Me(w.borderBottomWidth) + Me(w.borderTopWidth), B = p.scrollHeight;
+    p.value = "x";
+    const D = p.scrollHeight;
+    let E = B;
+    d && (E = Math.max(Number(d) * D, E)), a && (E = Math.min(Number(a) * D, E)), E = Math.max(E, D);
+    const W = E + (V === "border-box" ? H + _ : 0), L = Math.abs(E - B) <= 1;
+    return {
+      outerHeightStyle: W,
+      overflowing: L
+    };
+  }, [a, d, t.placeholder]), T = Vo(() => {
+    const c = f.current, p = C();
+    if (!c || !p || ho(p))
+      return !1;
+    const P = p.outerHeightStyle;
+    return b.current != null && b.current !== P;
+  }), g = s.useCallback(() => {
+    const c = f.current, p = C();
+    if (!c || !p || ho(p))
+      return;
+    const P = p.outerHeightStyle;
+    b.current !== P && (b.current = P, c.style.height = `${P}px`), c.style.overflow = p.overflowing ? "hidden" : "";
+  }, [C]), h = s.useRef(-1);
+  Ze(() => {
+    const c = Ko(g), p = f?.current;
+    if (!p)
+      return;
+    const P = fo(p);
+    P.addEventListener("resize", c);
+    let w;
+    return typeof ResizeObserver < "u" && (w = new ResizeObserver(() => {
+      T() && (w.unobserve(p), cancelAnimationFrame(h.current), g(), h.current = requestAnimationFrame(() => {
+        w.observe(p);
+      }));
+    }), w.observe(p)), () => {
+      c.clear(), cancelAnimationFrame(h.current), P.removeEventListener("resize", c), w && w.disconnect();
+    };
+  }, [C, g, T]), Ze(() => {
+    g();
+  });
+  const O = (c) => {
+    S || g();
+    const p = c.target, P = p.value.length, w = p.value.endsWith(`
+`), V = p.selectionStart === P;
+    w && V && p.setSelectionRange(P, P), r && r(c);
+  };
+  return /* @__PURE__ */ m.jsxs(s.Fragment, {
+    children: [/* @__PURE__ */ m.jsx("textarea", {
+      value: u,
+      onChange: O,
+      ref: y,
+      rows: d,
+      style: i,
+      ...v
+    }), /* @__PURE__ */ m.jsx("textarea", {
+      "aria-hidden": !0,
+      className: t.className,
+      readOnly: !0,
+      ref: R,
+      tabIndex: -1,
+      style: {
+        ...st.shadow,
+        ...i,
+        paddingTop: 0,
+        paddingBottom: 0
+      }
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (jo.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
+   * @ignore
    */
-  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  className: e.string,
   /**
-   * The thickness of the circle.
-   * @default 3.6
+   * Maximum number of rows to display.
    */
-  thickness: e.number,
+  maxRows: e.oneOfType([e.number, e.string]),
   /**
-   * The value of the progress indicator for the determinate variant.
-   * Value between 0 and 100.
-   * @default 0
+   * Minimum number of rows to display.
+   * @default 1
    */
-  value: e.number,
+  minRows: e.oneOfType([e.number, e.string]),
   /**
-   * The variant to use.
-   * Use indeterminate when there is no progress value.
-   * @default 'indeterminate'
+   * @ignore
    */
-  variant: e.oneOf(["determinate", "indeterminate"])
+  onChange: e.func,
+  /**
+   * @ignore
+   */
+  placeholder: e.string,
+  /**
+   * @ignore
+   */
+  style: e.object,
+  /**
+   * @ignore
+   */
+  value: e.oneOfType([e.arrayOf(e.string), e.number, e.string])
 });
-const ut = (o) => {
+function vo(o) {
+  return o != null && !(Array.isArray(o) && o.length === 0);
+}
+function Be(o, t = !1) {
+  return o && (vo(o.value) && o.value !== "" || t && vo(o.defaultValue) && o.defaultValue !== "");
+}
+function at(o) {
+  return o.startAdornment;
+}
+var So;
+const Ae = (o, t) => {
+  const {
+    ownerState: n
+  } = o;
+  return [t.root, n.formControl && t.formControl, n.startAdornment && t.adornedStart, n.endAdornment && t.adornedEnd, n.error && t.error, n.size === "small" && t.sizeSmall, n.multiline && t.multiline, n.color && t[`color${F(n.color)}`], n.fullWidth && t.fullWidth, n.hiddenLabel && t.hiddenLabel];
+}, ze = (o, t) => {
+  const {
+    ownerState: n
+  } = o;
+  return [t.input, n.size === "small" && t.inputSizeSmall, n.multiline && t.inputMultiline, n.type === "search" && t.inputTypeSearch, n.startAdornment && t.inputAdornedStart, n.endAdornment && t.inputAdornedEnd, n.hiddenLabel && t.inputHiddenLabel];
+}, lt = (o) => {
   const {
     classes: t,
-    disabled: n,
-    color: r,
-    edge: a,
-    size: d,
-    loading: i
-  } = o, u = {
-    root: ["root", i && "loading", n && "disabled", r !== "default" && `color${F(r)}`, a && `edge${F(a)}`, `size${F(d)}`],
-    loadingIndicator: ["loadingIndicator"],
-    loadingWrapper: ["loadingWrapper"]
-  };
-  return Q(u, Lo, t);
-}, pt = N(Vo, {
-  name: "MuiIconButton",
-  slot: "Root",
-  overridesResolver: (o, t) => {
-    const {
-      ownerState: n
-    } = o;
-    return [t.root, n.loading && t.loading, n.color !== "default" && t[`color${F(n.color)}`], n.edge && t[`edge${F(n.edge)}`], t[`size${F(n.size)}`]];
-  }
+    color: n,
+    disabled: r,
+    error: a,
+    endAdornment: d,
+    focused: i,
+    formControl: u,
+    fullWidth: v,
+    hiddenLabel: S,
+    multiline: f,
+    readOnly: y,
+    size: b,
+    startAdornment: R,
+    type: C
+  } = o, T = {
+    root: ["root", `color${F(n)}`, r && "disabled", a && "error", v && "fullWidth", i && "focused", u && "formControl", b && b !== "medium" && `size${F(b)}`, f && "multiline", R && "adornedStart", d && "adornedEnd", S && "hiddenLabel", y && "readOnly"],
+    input: ["input", r && "disabled", C === "search" && "inputTypeSearch", f && "inputMultiline", b === "small" && "inputSizeSmall", S && "inputHiddenLabel", R && "inputAdornedStart", d && "inputAdornedEnd", y && "readOnly"]
+  };
+  return Q(T, Jo, t);
+}, De = N("div", {
+  name: "MuiInputBase",
+  slot: "Root",
+  overridesResolver: Ae
 })(U(({
   theme: o
 }) => ({
-  textAlign: "center",
-  flex: "0 0 auto",
-  fontSize: o.typography.pxToRem(24),
-  padding: 8,
-  borderRadius: "50%",
-  color: (o.vars || o).palette.action.active,
-  transition: o.transitions.create("background-color", {
-    duration: o.transitions.duration.shortest
-  }),
+  ...o.typography.body1,
+  color: (o.vars || o).palette.text.primary,
+  lineHeight: "1.4375em",
+  // 23px
+  boxSizing: "border-box",
+  // Prevent padding issue with fullWidth.
+  position: "relative",
+  cursor: "text",
+  display: "inline-flex",
+  alignItems: "center",
+  [`&.${je.disabled}`]: {
+    color: (o.vars || o).palette.text.disabled,
+    cursor: "default"
+  },
   variants: [{
-    props: (t) => !t.disableRipple,
-    style: {
-      "--IconButton-hoverBg": o.alpha((o.vars || o).palette.action.active, (o.vars || o).palette.action.hoverOpacity),
-      "&:hover": {
-        backgroundColor: "var(--IconButton-hoverBg)",
-        // Reset on touch devices, it doesn't add specificity
-        "@media (hover: none)": {
-          backgroundColor: "transparent"
-        }
-      }
-    }
-  }, {
-    props: {
-      edge: "start"
-    },
-    style: {
-      marginLeft: -12
-    }
-  }, {
-    props: {
-      edge: "start",
-      size: "small"
-    },
+    props: ({
+      ownerState: t
+    }) => t.multiline,
     style: {
-      marginLeft: -3
+      padding: "4px 0 5px"
     }
   }, {
-    props: {
-      edge: "end"
-    },
+    props: ({
+      ownerState: t,
+      size: n
+    }) => t.multiline && n === "small",
     style: {
-      marginRight: -12
+      paddingTop: 1
     }
   }, {
-    props: {
-      edge: "end",
-      size: "small"
-    },
+    props: ({
+      ownerState: t
+    }) => t.fullWidth,
     style: {
-      marginRight: -3
+      width: "100%"
     }
   }]
-})), U(({
+}))), Le = N("input", {
+  name: "MuiInputBase",
+  slot: "Input",
+  overridesResolver: ze
+})(U(({
   theme: o
-}) => ({
-  variants: [{
-    props: {
-      color: "inherit"
+}) => {
+  const t = o.palette.mode === "light", n = {
+    color: "currentColor",
+    ...o.vars ? {
+      opacity: o.vars.opacity.inputPlaceholder
+    } : {
+      opacity: t ? 0.42 : 0.5
     },
-    style: {
-      color: "inherit"
-    }
-  }, ...Object.entries(o.palette).filter(be()).map(([t]) => ({
-    props: {
-      color: t
+    transition: o.transitions.create("opacity", {
+      duration: o.transitions.duration.shorter
+    })
+  }, r = {
+    opacity: "0 !important"
+  }, a = o.vars ? {
+    opacity: o.vars.opacity.inputPlaceholder
+  } : {
+    opacity: t ? 0.42 : 0.5
+  };
+  return {
+    font: "inherit",
+    letterSpacing: "inherit",
+    color: "currentColor",
+    padding: "4px 0 5px",
+    border: 0,
+    boxSizing: "content-box",
+    background: "none",
+    height: "1.4375em",
+    // Reset 23pxthe native input line-height
+    margin: 0,
+    // Reset for Safari
+    WebkitTapHighlightColor: "transparent",
+    display: "block",
+    // Make the flex item shrink with Firefox
+    minWidth: 0,
+    width: "100%",
+    "&::-webkit-input-placeholder": n,
+    "&::-moz-placeholder": n,
+    // Firefox 19+
+    "&::-ms-input-placeholder": n,
+    // Edge
+    "&:focus": {
+      outline: 0
     },
-    style: {
-      color: (o.vars || o).palette[t].main
-    }
-  })), ...Object.entries(o.palette).filter(be()).map(([t]) => ({
-    props: {
-      color: t
+    // Reset Firefox invalid required input style
+    "&:invalid": {
+      boxShadow: "none"
     },
-    style: {
-      "--IconButton-hoverBg": o.alpha((o.vars || o).palette[t].main, (o.vars || o).palette.action.hoverOpacity)
-    }
-  })), {
-    props: {
-      size: "small"
+    "&::-webkit-search-decoration": {
+      // Remove the padding when type=search.
+      WebkitAppearance: "none"
     },
-    style: {
-      padding: 5,
-      fontSize: o.typography.pxToRem(18)
-    }
-  }, {
-    props: {
-      size: "large"
+    // Show and hide the placeholder logic
+    [`label[data-shrink=false] + .${je.formControl} &`]: {
+      "&::-webkit-input-placeholder": r,
+      "&::-moz-placeholder": r,
+      // Firefox 19+
+      "&::-ms-input-placeholder": r,
+      // Edge
+      "&:focus::-webkit-input-placeholder": a,
+      "&:focus::-moz-placeholder": a,
+      // Firefox 19+
+      "&:focus::-ms-input-placeholder": a
+      // Edge
     },
-    style: {
-      padding: 12,
-      fontSize: o.typography.pxToRem(28)
+    [`&.${je.disabled}`]: {
+      opacity: 1,
+      // Reset iOS opacity
+      WebkitTextFillColor: (o.vars || o).palette.text.disabled
+      // Fix opacity Safari bug
+    },
+    variants: [{
+      props: ({
+        ownerState: d
+      }) => !d.disableInjectingGlobalStyles,
+      style: {
+        animationName: "mui-auto-fill-cancel",
+        animationDuration: "10ms",
+        "&:-webkit-autofill": {
+          animationDuration: "5000s",
+          animationName: "mui-auto-fill"
+        }
+      }
+    }, {
+      props: {
+        size: "small"
+      },
+      style: {
+        paddingTop: 1
+      }
+    }, {
+      props: ({
+        ownerState: d
+      }) => d.multiline,
+      style: {
+        height: "auto",
+        resize: "none",
+        padding: 0,
+        paddingTop: 0
+      }
+    }, {
+      props: {
+        type: "search"
+      },
+      style: {
+        MozAppearance: "textfield"
+        // Improve type search style.
+      }
+    }]
+  };
+})), Co = et({
+  "@keyframes mui-auto-fill": {
+    from: {
+      display: "block"
     }
-  }],
-  [`&.${uo.disabled}`]: {
-    backgroundColor: "transparent",
-    color: (o.vars || o).palette.action.disabled
   },
-  [`&.${uo.loading}`]: {
-    color: "transparent"
+  "@keyframes mui-auto-fill-cancel": {
+    from: {
+      display: "block"
+    }
   }
-}))), ft = N("span", {
-  name: "MuiIconButton",
-  slot: "LoadingIndicator"
-})(({
-  theme: o
-}) => ({
-  display: "none",
-  position: "absolute",
-  visibility: "visible",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  color: (o.vars || o).palette.action.disabled,
-  variants: [{
-    props: {
-      loading: !0
-    },
-    style: {
-      display: "flex"
-    }
-  }]
-})), mt = /* @__PURE__ */ s.forwardRef(function(t, n) {
+}), Ue = /* @__PURE__ */ s.forwardRef(function(t, n) {
   const r = ae({
     props: t,
-    name: "MuiIconButton"
+    name: "MuiInputBase"
   }), {
-    edge: a = !1,
-    children: d,
-    className: i,
-    color: u = "default",
-    disabled: v = !1,
-    disableFocusRipple: S = !1,
-    size: f = "medium",
-    id: y,
-    loading: b = null,
-    loadingIndicator: R,
-    ...C
-  } = r, T = ko(y), g = R ?? /* @__PURE__ */ m.jsx(Po, {
-    "aria-labelledby": T,
-    color: "inherit",
-    size: 16
-  }), h = {
+    "aria-describedby": a,
+    autoComplete: d,
+    autoFocus: i,
+    className: u,
+    color: v,
+    components: S = {},
+    componentsProps: f = {},
+    defaultValue: y,
+    disabled: b,
+    disableInjectingGlobalStyles: R,
+    endAdornment: C,
+    error: T,
+    fullWidth: g = !1,
+    id: h,
+    inputComponent: O = "input",
+    inputProps: c = {},
+    inputRef: p,
+    margin: P,
+    maxRows: w,
+    minRows: V,
+    multiline: H = !1,
+    name: _,
+    onBlur: B,
+    onChange: D,
+    onClick: E,
+    onFocus: W,
+    onKeyDown: L,
+    onKeyUp: X,
+    placeholder: q,
+    readOnly: A,
+    renderSuffix: K,
+    rows: te,
+    size: Ve,
+    slotProps: j = {},
+    slots: ve = {},
+    startAdornment: ne,
+    type: Ee = "text",
+    value: Fe,
+    ...ee
+  } = r, Y = c.value != null ? c.value : Fe, {
+    current: Se
+  } = s.useRef(Y != null), Z = s.useRef(), He = s.useCallback((k) => {
+    process.env.NODE_ENV !== "production" && k && k.nodeName !== "INPUT" && !k.focus && console.error(["MUI: You have provided a `inputComponent` to the input component", "that does not correctly handle the `ref` prop.", "Make sure the `ref` prop is called with a HTMLInputElement."].join(`
+`));
+  }, []), Ce = We(Z, p, c.ref, He), [xe, Oe] = s.useState(!1), I = oo();
+  process.env.NODE_ENV !== "production" && s.useEffect(() => {
+    if (I)
+      return I.registerEffect();
+  }, [I]);
+  const $ = to({
+    props: r,
+    muiFormControl: I,
+    states: ["color", "disabled", "error", "hiddenLabel", "size", "required", "filled"]
+  });
+  $.focused = I ? I.focused : xe, s.useEffect(() => {
+    !I && b && xe && (Oe(!1), B && B());
+  }, [I, b, xe, B]);
+  const re = I && I.onFilled, we = I && I.onEmpty, le = s.useCallback((k) => {
+    Be(k) ? re && re() : we && we();
+  }, [re, we]);
+  Ze(() => {
+    Se && le({
+      value: Y
+    });
+  }, [Y, le, Se]);
+  const pe = (k) => {
+    W && W(k), c.onFocus && c.onFocus(k), I && I.onFocus ? I.onFocus(k) : Oe(!0);
+  }, _e = (k) => {
+    B && B(k), c.onBlur && c.onBlur(k), I && I.onBlur ? I.onBlur(k) : Oe(!1);
+  }, qe = (k, ...Ne) => {
+    if (!Se) {
+      const oe = k.target || Z.current;
+      if (oe == null)
+        throw new Error(process.env.NODE_ENV !== "production" ? "MUI: Expected valid input target. Did you use a custom `inputComponent` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info." : wo(1));
+      le({
+        value: oe.value
+      });
+    }
+    c.onChange && c.onChange(k, ...Ne), D && D(k, ...Ne);
+  };
+  s.useEffect(() => {
+    le(Z.current);
+  }, []);
+  const Ke = (k) => {
+    Z.current && k.currentTarget === k.target && Z.current.focus(), E && E(k);
+  };
+  let Ie = O, z = c;
+  H && Ie === "input" && (te ? (process.env.NODE_ENV !== "production" && (V || w) && console.warn("MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set."), z = {
+    type: void 0,
+    minRows: te,
+    maxRows: te,
+    ...z
+  }) : z = {
+    type: void 0,
+    maxRows: w,
+    minRows: V,
+    ...z
+  }, Ie = jo);
+  const $e = (k) => {
+    le(k.animationName === "mui-auto-fill-cancel" ? Z.current : {
+      value: "x"
+    });
+  };
+  s.useEffect(() => {
+    I && I.setAdornedStart(!!ne);
+  }, [I, ne]);
+  const se = {
     ...r,
-    edge: a,
-    color: u,
-    disabled: v,
-    disableFocusRipple: S,
-    loading: b,
-    loadingIndicator: g,
-    size: f
-  }, O = ut(h);
-  return /* @__PURE__ */ m.jsxs(pt, {
-    id: b ? T : y,
-    className: ie(O.root, i),
-    centerRipple: !0,
-    focusRipple: !S,
-    disabled: v || b,
-    ref: n,
-    ...C,
-    ownerState: h,
-    children: [typeof b == "boolean" && // use plain HTML span to minimize the runtime overhead
-    /* @__PURE__ */ m.jsx("span", {
-      className: O.loadingWrapper,
-      style: {
-        display: "contents"
+    color: $.color || "primary",
+    disabled: $.disabled,
+    endAdornment: C,
+    error: $.error,
+    focused: $.focused,
+    formControl: I,
+    fullWidth: g,
+    hiddenLabel: $.hiddenLabel,
+    multiline: H,
+    size: $.size,
+    startAdornment: ne,
+    type: Ee
+  }, de = lt(se), fe = ve.root || S.Root || De, Re = j.root || f.root || {}, Te = ve.input || S.Input || Le;
+  return z = {
+    ...z,
+    ...j.input ?? f.input
+  }, /* @__PURE__ */ m.jsxs(s.Fragment, {
+    children: [!R && typeof Co == "function" && // For Emotion/Styled-components, InputGlobalStyles will be a function
+    // For Pigment CSS, this has no effect because the InputGlobalStyles will be null.
+    (So || (So = /* @__PURE__ */ m.jsx(Co, {}))), /* @__PURE__ */ m.jsxs(fe, {
+      ...Re,
+      ref: n,
+      onClick: Ke,
+      ...ee,
+      ...!po(fe) && {
+        ownerState: {
+          ...se,
+          ...Re.ownerState
+        }
       },
-      children: /* @__PURE__ */ m.jsx(ft, {
-        className: O.loadingIndicator,
-        ownerState: h,
-        children: b && g
-      })
-    }), d]
+      className: ie(de.root, Re.className, u, A && "MuiInputBase-readOnly"),
+      children: [ne, /* @__PURE__ */ m.jsx(No.Provider, {
+        value: null,
+        children: /* @__PURE__ */ m.jsx(Te, {
+          "aria-invalid": $.error,
+          "aria-describedby": a,
+          autoComplete: d,
+          autoFocus: i,
+          defaultValue: y,
+          disabled: $.disabled,
+          id: h,
+          onAnimationStart: $e,
+          name: _,
+          placeholder: q,
+          readOnly: A,
+          required: $.required,
+          rows: te,
+          value: Y,
+          onKeyDown: L,
+          onKeyUp: X,
+          type: Ee,
+          ...z,
+          ...!po(Te) && {
+            as: Ie,
+            ownerState: {
+              ...se,
+              ...z.ownerState
+            }
+          },
+          ref: Ce,
+          className: ie(de.input, z.className, A && "MuiInputBase-readOnly"),
+          onBlur: _e,
+          onChange: qe,
+          onFocus: pe
+        })
+      }), C, K ? K({
+        ...$,
+        startAdornment: ne
+      }) : null]
+    })]
   });
 });
-process.env.NODE_ENV !== "production" && (mt.propTypes = {
+process.env.NODE_ENV !== "production" && (Ue.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * The icon to display.
+   * @ignore
    */
-  children: Io(e.node, (o) => s.Children.toArray(o.children).some((n) => /* @__PURE__ */ s.isValidElement(n) && n.props.onClick) ? new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join(`
-`)) : null),
+  "aria-describedby": e.string,
+  /**
+   * 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: e.string,
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   */
+  autoFocus: e.bool,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -529,780 +771,804 @@ process.env.NODE_ENV !== "production" && (mt.propTypes = {
    * 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).
-   * @default 'default'
+   * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
-  color: e.oneOfType([e.oneOf(["inherit", "default", "primary", "secondary", "error", "info", "success", "warning"]), e.string]),
+  color: e.oneOfType([e.oneOf(["primary", "secondary", "error", "info", "success", "warning"]), e.string]),
   /**
-   * If `true`, the component is disabled.
-   * @default false
+   * 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: e.shape({
+    Input: e.elementType,
+    Root: e.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: e.shape({
+    input: e.object,
+    root: e.object
+  }),
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: e.any,
+  /**
+   * If `true`, the component is disabled.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
   disabled: e.bool,
   /**
-   * If `true`, the  keyboard focus ripple is disabled.
+   * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application.
+   * This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.
    * @default false
    */
-  disableFocusRipple: e.bool,
+  disableInjectingGlobalStyles: e.bool,
   /**
-   * If `true`, the ripple effect is disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
+   * End `InputAdornment` for this component.
    */
-  disableRipple: e.bool,
+  endAdornment: e.node,
   /**
-   * If given, uses a negative margin to counteract the padding on one
-   * side (this is often helpful for aligning the left or right
-   * side of the icon with content above or below, without ruining the border
-   * size and shape).
+   * If `true`, the `input` will indicate an error.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  error: e.bool,
+  /**
+   * If `true`, the `input` will take up the full width of its container.
    * @default false
    */
-  edge: e.oneOf(["end", "start", !1]),
+  fullWidth: e.bool,
   /**
-   * @ignore
+   * The id of the `input` element.
    */
   id: e.string,
   /**
-   * If `true`, the loading indicator is visible and the button is disabled.
-   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
-   * @default null
+   * The component used for the `input` element.
+   * Either a string to use a HTML element or a component.
+   * @default 'input'
    */
-  loading: e.bool,
+  inputComponent: Ho,
   /**
-   * Element placed before the children if the button is in loading state.
-   * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default, it renders a `CircularProgress` that is labeled by the button itself.
-   * @default <CircularProgress color="inherit" size={16} />
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
+   * @default {}
    */
-  loadingIndicator: e.node,
+  inputProps: e.object,
   /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   * @default 'medium'
+   * Pass a ref to the `input` element.
    */
-  size: e.oneOfType([e.oneOf(["small", "medium", "large"]), e.string]),
+  inputRef: ge,
   /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
+   * 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.
    */
-  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
-});
-var yo;
-const bt = N("fieldset", {
-  name: "MuiNotchedOutlined",
-  shouldForwardProp: ue
-})({
-  textAlign: "left",
-  position: "absolute",
-  bottom: 0,
-  right: 0,
-  top: -5,
-  left: 0,
-  margin: 0,
-  padding: "0 8px",
-  pointerEvents: "none",
-  borderRadius: "inherit",
-  borderStyle: "solid",
-  borderWidth: 1,
-  overflow: "hidden",
-  minWidth: "0%"
-}), gt = N("legend", {
-  name: "MuiNotchedOutlined",
-  shouldForwardProp: ue
-})(U(({
-  theme: o
-}) => ({
-  float: "unset",
-  // Fix conflict with bootstrap
-  width: "auto",
-  // Fix conflict with bootstrap
-  overflow: "hidden",
-  // Fix Horizontal scroll when label too long
-  variants: [{
-    props: ({
-      ownerState: t
-    }) => !t.withLabel,
-    style: {
-      padding: 0,
-      lineHeight: "11px",
-      // sync with `height` in `legend` styles
-      transition: o.transitions.create("width", {
-        duration: 150,
-        easing: o.transitions.easing.easeOut
-      })
-    }
-  }, {
-    props: ({
-      ownerState: t
-    }) => t.withLabel,
-    style: {
-      display: "block",
-      // Fix conflict with normalize.css and sanitize.css
-      padding: 0,
-      height: 11,
-      // sync with `lineHeight` in `legend` styles
-      fontSize: "0.75em",
-      visibility: "hidden",
-      maxWidth: 0.01,
-      transition: o.transitions.create("max-width", {
-        duration: 50,
-        easing: o.transitions.easing.easeOut
-      }),
-      whiteSpace: "nowrap",
-      "& > span": {
-        paddingLeft: 5,
-        paddingRight: 5,
-        display: "inline-block",
-        opacity: 0,
-        visibility: "visible"
-      }
-    }
-  }, {
-    props: ({
-      ownerState: t
-    }) => t.withLabel && t.notched,
-    style: {
-      maxWidth: "100%",
-      transition: o.transitions.create("max-width", {
-        duration: 100,
-        easing: o.transitions.easing.easeOut,
-        delay: 50
-      })
-    }
-  }]
-})));
-function jo(o) {
-  const {
-    children: t,
-    classes: n,
-    className: r,
-    label: a,
-    notched: d,
-    ...i
-  } = o, u = a != null && a !== "", v = {
-    ...o,
-    notched: d,
-    withLabel: u
-  };
-  return /* @__PURE__ */ m.jsx(bt, {
-    "aria-hidden": !0,
-    className: r,
-    ownerState: v,
-    ...i,
-    children: /* @__PURE__ */ m.jsx(gt, {
-      ownerState: v,
-      children: u ? /* @__PURE__ */ m.jsx("span", {
-        children: a
-      }) : (
-        // notranslate needed while Google Translate will not fix zero-width space issue
-        yo || (yo = /* @__PURE__ */ m.jsx("span", {
-          className: "notranslate",
-          "aria-hidden": !0,
-          children: "​"
-        }))
-      )
-    })
-  });
-}
-process.env.NODE_ENV !== "production" && (jo.propTypes = {
+  margin: e.oneOf(["dense", "none"]),
   /**
-   * The content of the component.
+   * Maximum number of rows to display when multiline option is set to true.
    */
-  children: e.node,
+  maxRows: e.oneOfType([e.number, e.string]),
   /**
-   * Override or extend the styles applied to the component.
+   * Minimum number of rows to display when multiline option is set to true.
    */
-  classes: e.object,
+  minRows: e.oneOfType([e.number, e.string]),
+  /**
+   * If `true`, a [TextareaAutosize](https://mui.com/material-ui/react-textarea-autosize/) element is rendered.
+   * @default false
+   */
+  multiline: e.bool,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: e.string,
+  /**
+   * Callback fired when the `input` is blurred.
+   *
+   * Notice that the first argument (event) might be undefined.
+   */
+  onBlur: e.func,
+  /**
+   * 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: e.func,
   /**
    * @ignore
    */
-  className: e.string,
+  onClick: e.func,
   /**
-   * The label.
+   * @ignore
    */
-  label: e.node,
+  onFocus: e.func,
   /**
-   * If `true`, the outline is notched to accommodate the label.
+   * Callback fired when the `input` doesn't satisfy its constraints.
    */
-  notched: e.bool.isRequired,
+  onInvalid: e.func,
   /**
    * @ignore
    */
-  style: e.object
-});
-function to({
-  props: o,
-  states: t,
-  muiFormControl: n
-}) {
-  return t.reduce((r, a) => (r[a] = o[a], n && typeof o[a] > "u" && (r[a] = n[a]), r), {});
-}
-function Me(o) {
-  return parseInt(o, 10) || 0;
-}
-const yt = {
-  shadow: {
-    // Visibility needed to hide the extra text area on iPads
-    visibility: "hidden",
-    // Remove from the content flow
-    position: "absolute",
-    // Ignore the scrollbar width
-    overflow: "hidden",
-    height: 0,
-    top: 0,
-    left: 0,
-    // Create a new layer, increase the isolation of the computed values
-    transform: "translateZ(0)"
-  }
-};
-function ht(o) {
-  for (const t in o)
-    return !1;
-  return !0;
-}
-function ho(o) {
-  return ht(o) || o.outerHeightStyle === 0 && !o.overflowing;
-}
-const Eo = /* @__PURE__ */ s.forwardRef(function(t, n) {
-  const {
-    onChange: r,
-    maxRows: a,
-    minRows: d = 1,
-    style: i,
-    value: u,
-    ...v
-  } = t, {
-    current: S
-  } = s.useRef(u != null), f = s.useRef(null), y = We(n, f), b = s.useRef(null), R = s.useRef(null), C = s.useCallback(() => {
-    const c = f.current, p = R.current;
-    if (!c || !p)
-      return;
-    const w = fo(c).getComputedStyle(c);
-    if (w.width === "0px")
-      return {
-        outerHeightStyle: 0,
-        overflowing: !1
-      };
-    p.style.width = w.width, p.value = c.value || t.placeholder || "x", p.value.slice(-1) === `
-` && (p.value += " ");
-    const V = w.boxSizing, H = Me(w.paddingBottom) + Me(w.paddingTop), _ = Me(w.borderBottomWidth) + Me(w.borderTopWidth), B = p.scrollHeight;
-    p.value = "x";
-    const D = p.scrollHeight;
-    let E = B;
-    d && (E = Math.max(Number(d) * D, E)), a && (E = Math.min(Number(a) * D, E)), E = Math.max(E, D);
-    const W = E + (V === "border-box" ? H + _ : 0), L = Math.abs(E - B) <= 1;
-    return {
-      outerHeightStyle: W,
-      overflowing: L
-    };
-  }, [a, d, t.placeholder]), T = Ho(() => {
-    const c = f.current, p = C();
-    if (!c || !p || ho(p))
-      return !1;
-    const P = p.outerHeightStyle;
-    return b.current != null && b.current !== P;
-  }), g = s.useCallback(() => {
-    const c = f.current, p = C();
-    if (!c || !p || ho(p))
-      return;
-    const P = p.outerHeightStyle;
-    b.current !== P && (b.current = P, c.style.height = `${P}px`), c.style.overflow = p.overflowing ? "hidden" : "";
-  }, [C]), h = s.useRef(-1);
-  Ze(() => {
-    const c = Ko(g), p = f?.current;
-    if (!p)
-      return;
-    const P = fo(p);
-    P.addEventListener("resize", c);
-    let w;
-    return typeof ResizeObserver < "u" && (w = new ResizeObserver(() => {
-      T() && (w.unobserve(p), cancelAnimationFrame(h.current), g(), h.current = requestAnimationFrame(() => {
-        w.observe(p);
-      }));
-    }), w.observe(p)), () => {
-      c.clear(), cancelAnimationFrame(h.current), P.removeEventListener("resize", c), w && w.disconnect();
-    };
-  }, [C, g, T]), Ze(() => {
-    g();
-  });
-  const O = (c) => {
-    S || g();
-    const p = c.target, P = p.value.length, w = p.value.endsWith(`
-`), V = p.selectionStart === P;
-    w && V && p.setSelectionRange(P, P), r && r(c);
-  };
-  return /* @__PURE__ */ m.jsxs(s.Fragment, {
-    children: [/* @__PURE__ */ m.jsx("textarea", {
-      value: u,
-      onChange: O,
-      ref: y,
-      rows: d,
-      style: i,
-      ...v
-    }), /* @__PURE__ */ m.jsx("textarea", {
-      "aria-hidden": !0,
-      className: t.className,
-      readOnly: !0,
-      ref: R,
-      tabIndex: -1,
-      style: {
-        ...yt.shadow,
-        ...i,
-        paddingTop: 0,
-        paddingBottom: 0
-      }
-    })]
-  });
-});
-process.env.NODE_ENV !== "production" && (Eo.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
+  onKeyDown: e.func,
   /**
    * @ignore
    */
-  className: e.string,
+  onKeyUp: e.func,
   /**
-   * Maximum number of rows to display.
+   * The short hint displayed in the `input` before the user enters a value.
    */
-  maxRows: e.oneOfType([e.number, e.string]),
+  placeholder: e.string,
   /**
-   * Minimum number of rows to display.
-   * @default 1
+   * It prevents the user from changing the value of the field
+   * (not from interacting with the field).
    */
-  minRows: e.oneOfType([e.number, e.string]),
+  readOnly: e.bool,
   /**
    * @ignore
    */
-  onChange: e.func,
+  renderSuffix: e.func,
   /**
-   * @ignore
+   * If `true`, the `input` element is required.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
-  placeholder: e.string,
+  required: e.bool,
   /**
-   * @ignore
+   * Number of rows to display when multiline option is set to true.
    */
-  style: e.object,
+  rows: e.oneOfType([e.number, e.string]),
   /**
-   * @ignore
+   * The size of the component.
    */
-  value: e.oneOfType([e.arrayOf(e.string), e.number, e.string])
+  size: e.oneOfType([e.oneOf(["medium", "small"]), e.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: e.shape({
+    input: e.object,
+    root: e.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: e.shape({
+    input: e.elementType,
+    root: e.elementType
+  }),
+  /**
+   * Start `InputAdornment` for this component.
+   */
+  startAdornment: e.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.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: e.string,
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: e.any
 });
-function vo(o) {
-  return o != null && !(Array.isArray(o) && o.length === 0);
-}
-function Be(o, t = !1) {
-  return o && (vo(o.value) && o.value !== "" || t && vo(o.defaultValue) && o.defaultValue !== "");
-}
-function vt(o) {
-  return o.startAdornment;
-}
-var So;
-const Ae = (o, t) => {
-  const {
-    ownerState: n
-  } = o;
-  return [t.root, n.formControl && t.formControl, n.startAdornment && t.adornedStart, n.endAdornment && t.adornedEnd, n.error && t.error, n.size === "small" && t.sizeSmall, n.multiline && t.multiline, n.color && t[`color${F(n.color)}`], n.fullWidth && t.fullWidth, n.hiddenLabel && t.hiddenLabel];
-}, ze = (o, t) => {
+const dt = (o) => {
   const {
-    ownerState: n
-  } = o;
-  return [t.input, n.size === "small" && t.inputSizeSmall, n.multiline && t.inputMultiline, n.type === "search" && t.inputTypeSearch, n.startAdornment && t.inputAdornedStart, n.endAdornment && t.inputAdornedEnd, n.hiddenLabel && t.inputHiddenLabel];
-}, St = (o) => {
-  const {
-    classes: t,
-    color: n,
-    disabled: r,
-    error: a,
-    endAdornment: d,
-    focused: i,
-    formControl: u,
-    fullWidth: v,
-    hiddenLabel: S,
-    multiline: f,
-    readOnly: y,
-    size: b,
-    startAdornment: R,
-    type: C
-  } = o, T = {
-    root: ["root", `color${F(n)}`, r && "disabled", a && "error", v && "fullWidth", i && "focused", u && "formControl", b && b !== "medium" && `size${F(b)}`, f && "multiline", R && "adornedStart", d && "adornedEnd", S && "hiddenLabel", y && "readOnly"],
-    input: ["input", r && "disabled", C === "search" && "inputTypeSearch", f && "inputMultiline", b === "small" && "inputSizeSmall", S && "inputHiddenLabel", R && "inputAdornedStart", d && "inputAdornedEnd", y && "readOnly"]
+    classes: t
+  } = o, r = Q({
+    root: ["root"],
+    notchedOutline: ["notchedOutline"],
+    input: ["input"]
+  }, Qo, t);
+  return {
+    ...t,
+    // forward classes to the InputBase
+    ...r
   };
-  return Q(T, Jo, t);
-}, De = N("div", {
-  name: "MuiInputBase",
+}, ct = N(De, {
+  shouldForwardProp: (o) => ue(o) || o === "classes",
+  name: "MuiOutlinedInput",
   slot: "Root",
   overridesResolver: Ae
 })(U(({
   theme: o
-}) => ({
-  ...o.typography.body1,
-  color: (o.vars || o).palette.text.primary,
-  lineHeight: "1.4375em",
-  // 23px
-  boxSizing: "border-box",
-  // Prevent padding issue with fullWidth.
-  position: "relative",
-  cursor: "text",
-  display: "inline-flex",
-  alignItems: "center",
-  [`&.${je.disabled}`]: {
-    color: (o.vars || o).palette.text.disabled,
-    cursor: "default"
-  },
-  variants: [{
-    props: ({
-      ownerState: t
-    }) => t.multiline,
-    style: {
-      padding: "4px 0 5px"
-    }
-  }, {
-    props: ({
-      ownerState: t,
-      size: n
-    }) => t.multiline && n === "small",
-    style: {
-      paddingTop: 1
-    }
-  }, {
-    props: ({
-      ownerState: t
-    }) => t.fullWidth,
-    style: {
-      width: "100%"
-    }
-  }]
-}))), Le = N("input", {
-  name: "MuiInputBase",
-  slot: "Input",
-  overridesResolver: ze
-})(U(({
-  theme: o
 }) => {
-  const t = o.palette.mode === "light", n = {
-    color: "currentColor",
-    ...o.vars ? {
-      opacity: o.vars.opacity.inputPlaceholder
-    } : {
-      opacity: t ? 0.42 : 0.5
-    },
-    transition: o.transitions.create("opacity", {
-      duration: o.transitions.duration.shorter
-    })
-  }, r = {
-    opacity: "0 !important"
-  }, a = o.vars ? {
-    opacity: o.vars.opacity.inputPlaceholder
-  } : {
-    opacity: t ? 0.42 : 0.5
-  };
+  const t = o.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)";
   return {
-    font: "inherit",
-    letterSpacing: "inherit",
-    color: "currentColor",
-    padding: "4px 0 5px",
-    border: 0,
-    boxSizing: "content-box",
-    background: "none",
-    height: "1.4375em",
-    // Reset 23pxthe native input line-height
-    margin: 0,
-    // Reset for Safari
-    WebkitTapHighlightColor: "transparent",
-    display: "block",
-    // Make the flex item shrink with Firefox
-    minWidth: 0,
-    width: "100%",
-    "&::-webkit-input-placeholder": n,
-    "&::-moz-placeholder": n,
-    // Firefox 19+
-    "&::-ms-input-placeholder": n,
-    // Edge
-    "&:focus": {
-      outline: 0
-    },
-    // Reset Firefox invalid required input style
-    "&:invalid": {
-      boxShadow: "none"
-    },
-    "&::-webkit-search-decoration": {
-      // Remove the padding when type=search.
-      WebkitAppearance: "none"
+    position: "relative",
+    borderRadius: (o.vars || o).shape.borderRadius,
+    [`&:hover .${J.notchedOutline}`]: {
+      borderColor: (o.vars || o).palette.text.primary
     },
-    // Show and hide the placeholder logic
-    [`label[data-shrink=false] + .${je.formControl} &`]: {
-      "&::-webkit-input-placeholder": r,
-      "&::-moz-placeholder": r,
-      // Firefox 19+
-      "&::-ms-input-placeholder": r,
-      // Edge
-      "&:focus::-webkit-input-placeholder": a,
-      "&:focus::-moz-placeholder": a,
-      // Firefox 19+
-      "&:focus::-ms-input-placeholder": a
-      // Edge
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      [`&:hover .${J.notchedOutline}`]: {
+        borderColor: o.vars ? o.alpha(o.vars.palette.common.onBackground, 0.23) : t
+      }
     },
-    [`&.${je.disabled}`]: {
-      opacity: 1,
-      // Reset iOS opacity
-      WebkitTextFillColor: (o.vars || o).palette.text.disabled
-      // Fix opacity Safari bug
+    [`&.${J.focused} .${J.notchedOutline}`]: {
+      borderWidth: 2
     },
-    variants: [{
-      props: ({
-        ownerState: d
-      }) => !d.disableInjectingGlobalStyles,
+    variants: [...Object.entries(o.palette).filter(be()).map(([n]) => ({
+      props: {
+        color: n
+      },
       style: {
-        animationName: "mui-auto-fill-cancel",
-        animationDuration: "10ms",
-        "&:-webkit-autofill": {
-          animationDuration: "5000s",
-          animationName: "mui-auto-fill"
+        [`&.${J.focused} .${J.notchedOutline}`]: {
+          borderColor: (o.vars || o).palette[n].main
+        }
+      }
+    })), {
+      props: {},
+      // to override the above style
+      style: {
+        [`&.${J.error} .${J.notchedOutline}`]: {
+          borderColor: (o.vars || o).palette.error.main
+        },
+        [`&.${J.disabled} .${J.notchedOutline}`]: {
+          borderColor: (o.vars || o).palette.action.disabled
         }
       }
     }, {
-      props: {
-        size: "small"
-      },
+      props: ({
+        ownerState: n
+      }) => n.startAdornment,
       style: {
-        paddingTop: 1
+        paddingLeft: 14
       }
     }, {
       props: ({
-        ownerState: d
-      }) => d.multiline,
+        ownerState: n
+      }) => n.endAdornment,
       style: {
-        height: "auto",
-        resize: "none",
-        padding: 0,
-        paddingTop: 0
+        paddingRight: 14
       }
     }, {
-      props: {
-        type: "search"
-      },
+      props: ({
+        ownerState: n
+      }) => n.multiline,
       style: {
-        MozAppearance: "textfield"
-        // Improve type search style.
+        padding: "16.5px 14px"
+      }
+    }, {
+      props: ({
+        ownerState: n,
+        size: r
+      }) => n.multiline && r === "small",
+      style: {
+        padding: "8.5px 14px"
       }
     }]
   };
-})), Co = et({
-  "@keyframes mui-auto-fill": {
-    from: {
-      display: "block"
+})), ut = N(Po, {
+  name: "MuiOutlinedInput",
+  slot: "NotchedOutline"
+})(U(({
+  theme: o
+}) => {
+  const t = o.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)";
+  return {
+    borderColor: o.vars ? o.alpha(o.vars.palette.common.onBackground, 0.23) : t
+  };
+})), pt = N(Le, {
+  name: "MuiOutlinedInput",
+  slot: "Input",
+  overridesResolver: ze
+})(U(({
+  theme: o
+}) => ({
+  padding: "16.5px 14px",
+  ...!o.vars && {
+    "&:-webkit-autofill": {
+      WebkitBoxShadow: o.palette.mode === "light" ? null : "0 0 0 100px #266798 inset",
+      WebkitTextFillColor: o.palette.mode === "light" ? null : "#fff",
+      caretColor: o.palette.mode === "light" ? null : "#fff",
+      borderRadius: "inherit"
     }
   },
-  "@keyframes mui-auto-fill-cancel": {
-    from: {
-      display: "block"
+  ...o.vars && {
+    "&:-webkit-autofill": {
+      borderRadius: "inherit"
+    },
+    [o.getColorSchemeSelector("dark")]: {
+      "&:-webkit-autofill": {
+        WebkitBoxShadow: "0 0 0 100px #266798 inset",
+        WebkitTextFillColor: "#fff",
+        caretColor: "#fff"
+      }
     }
-  }
-}), Ue = /* @__PURE__ */ s.forwardRef(function(t, n) {
+  },
+  variants: [{
+    props: {
+      size: "small"
+    },
+    style: {
+      padding: "8.5px 14px"
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.multiline,
+    style: {
+      padding: 0
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.startAdornment,
+    style: {
+      paddingLeft: 0
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.endAdornment,
+    style: {
+      paddingRight: 0
+    }
+  }]
+}))), no = /* @__PURE__ */ s.forwardRef(function(t, n) {
   const r = ae({
     props: t,
-    name: "MuiInputBase"
+    name: "MuiOutlinedInput"
   }), {
-    "aria-describedby": a,
-    autoComplete: d,
-    autoFocus: i,
-    className: u,
-    color: v,
-    components: S = {},
-    componentsProps: f = {},
-    defaultValue: y,
-    disabled: b,
-    disableInjectingGlobalStyles: R,
-    endAdornment: C,
-    error: T,
-    fullWidth: g = !1,
-    id: h,
-    inputComponent: O = "input",
-    inputProps: c = {},
-    inputRef: p,
-    margin: P,
-    maxRows: w,
-    minRows: V,
-    multiline: H = !1,
-    name: _,
-    onBlur: B,
-    onChange: D,
-    onClick: E,
-    onFocus: W,
-    onKeyDown: L,
-    onKeyUp: X,
-    placeholder: q,
-    readOnly: A,
-    renderSuffix: K,
-    rows: te,
-    size: Ve,
-    slotProps: j = {},
-    slots: ve = {},
-    startAdornment: ne,
-    type: Ee = "text",
-    value: Fe,
-    ...ee
-  } = r, Y = c.value != null ? c.value : Fe, {
-    current: Se
-  } = s.useRef(Y != null), Z = s.useRef(), He = s.useCallback((k) => {
-    process.env.NODE_ENV !== "production" && k && k.nodeName !== "INPUT" && !k.focus && console.error(["MUI: You have provided a `inputComponent` to the input component", "that does not correctly handle the `ref` prop.", "Make sure the `ref` prop is called with a HTMLInputElement."].join(`
-`));
-  }, []), Ce = We(Z, p, c.ref, He), [xe, Oe] = s.useState(!1), I = oo();
-  process.env.NODE_ENV !== "production" && s.useEffect(() => {
-    if (I)
-      return I.registerEffect();
-  }, [I]);
-  const $ = to({
+    components: a = {},
+    fullWidth: d = !1,
+    inputComponent: i = "input",
+    label: u,
+    multiline: v = !1,
+    notched: S,
+    slots: f = {},
+    slotProps: y = {},
+    type: b = "text",
+    ...R
+  } = r, C = dt(r), T = oo(), g = to({
     props: r,
-    muiFormControl: I,
-    states: ["color", "disabled", "error", "hiddenLabel", "size", "required", "filled"]
+    muiFormControl: T,
+    states: ["color", "disabled", "error", "focused", "hiddenLabel", "size", "required"]
+  }), h = {
+    ...r,
+    color: g.color || "primary",
+    disabled: g.disabled,
+    error: g.error,
+    focused: g.focused,
+    formControl: T,
+    fullWidth: d,
+    hiddenLabel: g.hiddenLabel,
+    multiline: v,
+    size: g.size,
+    type: b
+  }, O = f.root ?? a.Root ?? ct, c = f.input ?? a.Input ?? pt, [p, P] = _o("notchedOutline", {
+    elementType: ut,
+    className: C.notchedOutline,
+    shouldForwardComponentProp: !0,
+    ownerState: h,
+    externalForwardedProps: {
+      slots: f,
+      slotProps: y
+    },
+    additionalProps: {
+      label: u != null && u !== "" && g.required ? /* @__PURE__ */ m.jsxs(s.Fragment, {
+        children: [u, " ", "*"]
+      }) : u
+    }
   });
-  $.focused = I ? I.focused : xe, s.useEffect(() => {
-    !I && b && xe && (Oe(!1), B && B());
-  }, [I, b, xe, B]);
-  const re = I && I.onFilled, we = I && I.onEmpty, le = s.useCallback((k) => {
-    Be(k) ? re && re() : we && we();
-  }, [re, we]);
-  Ze(() => {
-    Se && le({
-      value: Y
-    });
-  }, [Y, le, Se]);
-  const pe = (k) => {
-    W && W(k), c.onFocus && c.onFocus(k), I && I.onFocus ? I.onFocus(k) : Oe(!0);
-  }, _e = (k) => {
-    B && B(k), c.onBlur && c.onBlur(k), I && I.onBlur ? I.onBlur(k) : Oe(!1);
-  }, qe = (k, ...Ne) => {
-    if (!Se) {
-      const oe = k.target || Z.current;
-      if (oe == null)
-        throw new Error(process.env.NODE_ENV !== "production" ? "MUI: Expected valid input target. Did you use a custom `inputComponent` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info." : wo(1));
-      le({
-        value: oe.value
-      });
+  return /* @__PURE__ */ m.jsx(Ue, {
+    slots: {
+      root: O,
+      input: c
+    },
+    slotProps: y,
+    renderSuffix: (w) => /* @__PURE__ */ m.jsx(p, {
+      ...P,
+      notched: typeof S < "u" ? S : !!(w.startAdornment || w.filled || w.focused)
+    }),
+    fullWidth: d,
+    inputComponent: i,
+    multiline: v,
+    ref: n,
+    type: b,
+    ...R,
+    classes: {
+      ...C,
+      notchedOutline: null
     }
-    c.onChange && c.onChange(k, ...Ne), D && D(k, ...Ne);
-  };
-  s.useEffect(() => {
-    le(Z.current);
-  }, []);
-  const Ke = (k) => {
-    Z.current && k.currentTarget === k.target && Z.current.focus(), E && E(k);
-  };
-  let Ie = O, z = c;
-  H && Ie === "input" && (te ? (process.env.NODE_ENV !== "production" && (V || w) && console.warn("MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set."), z = {
-    type: void 0,
-    minRows: te,
-    maxRows: te,
-    ...z
-  }) : z = {
-    type: void 0,
-    maxRows: w,
-    minRows: V,
-    ...z
-  }, Ie = Eo);
-  const $e = (k) => {
-    le(k.animationName === "mui-auto-fill-cancel" ? Z.current : {
-      value: "x"
-    });
-  };
-  s.useEffect(() => {
-    I && I.setAdornedStart(!!ne);
-  }, [I, ne]);
-  const se = {
-    ...r,
-    color: $.color || "primary",
-    disabled: $.disabled,
-    endAdornment: C,
-    error: $.error,
-    focused: $.focused,
-    formControl: I,
-    fullWidth: g,
-    hiddenLabel: $.hiddenLabel,
-    multiline: H,
-    size: $.size,
-    startAdornment: ne,
-    type: Ee
-  }, de = St(se), fe = ve.root || S.Root || De, Re = j.root || f.root || {}, Te = ve.input || S.Input || Le;
-  return z = {
-    ...z,
-    ...j.input ?? f.input
-  }, /* @__PURE__ */ m.jsxs(s.Fragment, {
-    children: [!R && typeof Co == "function" && // For Emotion/Styled-components, InputGlobalStyles will be a function
-    // For Pigment CSS, this has no effect because the InputGlobalStyles will be null.
-    (So || (So = /* @__PURE__ */ m.jsx(Co, {}))), /* @__PURE__ */ m.jsxs(fe, {
-      ...Re,
-      ref: n,
-      onClick: Ke,
-      ...ee,
-      ...!po(fe) && {
-        ownerState: {
-          ...se,
-          ...Re.ownerState
-        }
-      },
-      className: ie(de.root, Re.className, u, A && "MuiInputBase-readOnly"),
-      children: [ne, /* @__PURE__ */ m.jsx(No.Provider, {
-        value: null,
-        children: /* @__PURE__ */ m.jsx(Te, {
-          "aria-invalid": $.error,
-          "aria-describedby": a,
-          autoComplete: d,
-          autoFocus: i,
-          defaultValue: y,
-          disabled: $.disabled,
-          id: h,
-          onAnimationStart: $e,
-          name: _,
-          placeholder: q,
-          readOnly: A,
-          required: $.required,
-          rows: te,
-          value: Y,
-          onKeyDown: L,
-          onKeyUp: X,
-          type: Ee,
-          ...z,
-          ...!po(Te) && {
-            as: Ie,
-            ownerState: {
-              ...se,
-              ...z.ownerState
-            }
-          },
-          ref: Ce,
-          className: ie(de.input, z.className, A && "MuiInputBase-readOnly"),
-          onBlur: _e,
-          onChange: qe,
-          onFocus: pe
-        })
-      }), C, K ? K({
-        ...$,
-        startAdornment: ne
-      }) : null]
-    })]
   });
 });
-process.env.NODE_ENV !== "production" && (Ue.propTypes = {
+process.env.NODE_ENV !== "production" && (no.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: e.string,
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   */
+  autoFocus: e.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.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: e.oneOfType([e.oneOf(["primary", "secondary"]), e.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: e.shape({
+    Input: e.elementType,
+    Root: e.elementType
+  }),
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: e.any,
+  /**
+   * If `true`, the component is disabled.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  disabled: e.bool,
+  /**
+   * End `InputAdornment` for this component.
+   */
+  endAdornment: e.node,
+  /**
+   * If `true`, the `input` will indicate an error.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  error: e.bool,
+  /**
+   * If `true`, the `input` will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: e.bool,
+  /**
+   * The id of the `input` element.
+   */
+  id: e.string,
+  /**
+   * The component used for the `input` element.
+   * Either a string to use a HTML element or a component.
+   * @default 'input'
+   */
+  inputComponent: e.elementType,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
+   * @default {}
+   */
+  inputProps: e.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: ge,
+  /**
+   * The label of the `input`. It is only used for layout. The actual labelling
+   * is handled by `InputLabel`.
+   */
+  label: e.node,
+  /**
+   * 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: e.oneOf(["dense", "none"]),
+  /**
+   * Maximum number of rows to display when multiline option is set to true.
+   */
+  maxRows: e.oneOfType([e.number, e.string]),
+  /**
+   * Minimum number of rows to display when multiline option is set to true.
+   */
+  minRows: e.oneOfType([e.number, e.string]),
+  /**
+   * If `true`, a [TextareaAutosize](https://mui.com/material-ui/react-textarea-autosize/) element is rendered.
+   * @default false
+   */
+  multiline: e.bool,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: e.string,
+  /**
+   * If `true`, the outline is notched to accommodate the label.
+   */
+  notched: e.bool,
+  /**
+   * 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: e.func,
+  /**
+   * The short hint displayed in the `input` before the user enters a value.
+   */
+  placeholder: e.string,
+  /**
+   * It prevents the user from changing the value of the field
+   * (not from interacting with the field).
+   */
+  readOnly: e.bool,
+  /**
+   * If `true`, the `input` element is required.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  required: e.bool,
+  /**
+   * Number of rows to display when multiline option is set to true.
+   */
+  rows: e.oneOfType([e.number, e.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: e.shape({
+    input: e.object,
+    notchedOutline: e.oneOfType([e.func, e.object]),
+    root: e.object
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: e.shape({
+    input: e.elementType,
+    notchedOutline: e.elementType,
+    root: e.elementType
+  }),
+  /**
+   * Start `InputAdornment` for this component.
+   */
+  startAdornment: e.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.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: e.string,
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: e.any
+});
+no.muiName = "Input";
+function ft(o) {
+  return ye("MuiCircularProgress", o);
+}
+he("MuiCircularProgress", ["root", "determinate", "indeterminate", "colorPrimary", "colorSecondary", "svg", "track", "circle", "circleDeterminate", "circleIndeterminate", "circleDisableShrink"]);
+const G = 44, Je = To`
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+`, Qe = To`
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -126px;
+  }
+`, mt = typeof Je != "string" ? Ro`
+        animation: ${Je} 1.4s linear infinite;
+      ` : null, bt = typeof Qe != "string" ? Ro`
+        animation: ${Qe} 1.4s ease-in-out infinite;
+      ` : null, gt = (o) => {
+  const {
+    classes: t,
+    variant: n,
+    color: r,
+    disableShrink: a
+  } = o, d = {
+    root: ["root", n, `color${F(r)}`],
+    svg: ["svg"],
+    track: ["track"],
+    circle: ["circle", `circle${F(n)}`, a && "circleDisableShrink"]
+  };
+  return Q(d, ft, t);
+}, yt = N("span", {
+  name: "MuiCircularProgress",
+  slot: "Root",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: n
+    } = o;
+    return [t.root, t[n.variant], t[`color${F(n.color)}`]];
+  }
+})(U(({
+  theme: o
+}) => ({
+  display: "inline-block",
+  variants: [{
+    props: {
+      variant: "determinate"
+    },
+    style: {
+      transition: o.transitions.create("transform")
+    }
+  }, {
+    props: {
+      variant: "indeterminate"
+    },
+    style: mt || {
+      animation: `${Je} 1.4s linear infinite`
+    }
+  }, ...Object.entries(o.palette).filter(be()).map(([t]) => ({
+    props: {
+      color: t
+    },
+    style: {
+      color: (o.vars || o).palette[t].main
+    }
+  }))]
+}))), ht = N("svg", {
+  name: "MuiCircularProgress",
+  slot: "Svg"
+})({
+  display: "block"
+  // Keeps the progress centered
+}), vt = N("circle", {
+  name: "MuiCircularProgress",
+  slot: "Circle",
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: n
+    } = o;
+    return [t.circle, t[`circle${F(n.variant)}`], n.disableShrink && t.circleDisableShrink];
+  }
+})(U(({
+  theme: o
+}) => ({
+  stroke: "currentColor",
+  variants: [{
+    props: {
+      variant: "determinate"
+    },
+    style: {
+      transition: o.transitions.create("stroke-dashoffset")
+    }
+  }, {
+    props: {
+      variant: "indeterminate"
+    },
+    style: {
+      // Some default value that looks fine waiting for the animation to kicks in.
+      strokeDasharray: "80px, 200px",
+      strokeDashoffset: 0
+      // Add the unit to fix a Edge 16 and below bug.
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.variant === "indeterminate" && !t.disableShrink,
+    style: bt || {
+      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+      animation: `${Qe} 1.4s ease-in-out infinite`
+    }
+  }]
+}))), St = N("circle", {
+  name: "MuiCircularProgress",
+  slot: "Track"
+})(U(({
+  theme: o
+}) => ({
+  stroke: "currentColor",
+  opacity: (o.vars || o).palette.action.activatedOpacity
+}))), Eo = /* @__PURE__ */ s.forwardRef(function(t, n) {
+  const r = ae({
+    props: t,
+    name: "MuiCircularProgress"
+  }), {
+    className: a,
+    color: d = "primary",
+    disableShrink: i = !1,
+    enableTrackSlot: u = !1,
+    size: v = 40,
+    style: S,
+    thickness: f = 3.6,
+    value: y = 0,
+    variant: b = "indeterminate",
+    ...R
+  } = r, C = {
+    ...r,
+    color: d,
+    disableShrink: i,
+    size: v,
+    thickness: f,
+    value: y,
+    variant: b,
+    enableTrackSlot: u
+  }, T = gt(C), g = {}, h = {}, O = {};
+  if (b === "determinate") {
+    const c = 2 * Math.PI * ((G - f) / 2);
+    g.strokeDasharray = c.toFixed(3), O["aria-valuenow"] = Math.round(y), g.strokeDashoffset = `${((100 - y) / 100 * c).toFixed(3)}px`, h.transform = "rotate(-90deg)";
+  }
+  return /* @__PURE__ */ m.jsx(yt, {
+    className: ie(T.root, a),
+    style: {
+      width: v,
+      height: v,
+      ...h,
+      ...S
+    },
+    ownerState: C,
+    ref: n,
+    role: "progressbar",
+    ...O,
+    ...R,
+    children: /* @__PURE__ */ m.jsxs(ht, {
+      className: T.svg,
+      ownerState: C,
+      viewBox: `${G / 2} ${G / 2} ${G} ${G}`,
+      children: [u ? /* @__PURE__ */ m.jsx(St, {
+        className: T.track,
+        ownerState: C,
+        cx: G,
+        cy: G,
+        r: (G - f) / 2,
+        fill: "none",
+        strokeWidth: f,
+        "aria-hidden": "true"
+      }) : null, /* @__PURE__ */ m.jsx(vt, {
+        className: T.circle,
+        style: g,
+        ownerState: C,
+        cx: G,
+        cy: G,
+        r: (G - f) / 2,
+        fill: "none",
+        strokeWidth: f
+      })]
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (Eo.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * @ignore
-   */
-  "aria-describedby": e.string,
-  /**
-   * 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: e.string,
-  /**
-   * If `true`, the `input` element is focused during the first mount.
-   */
-  autoFocus: e.bool,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -1315,599 +1581,333 @@ process.env.NODE_ENV !== "production" && (Ue.propTypes = {
    * 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: e.oneOfType([e.oneOf(["primary", "secondary", "error", "info", "success", "warning"]), e.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: e.shape({
-    Input: e.elementType,
-    Root: e.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: e.shape({
-    input: e.object,
-    root: e.object
-  }),
-  /**
-   * The default value. Use when the component is not controlled.
-   */
-  defaultValue: e.any,
-  /**
-   * If `true`, the component is disabled.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
-   */
-  disabled: e.bool,
-  /**
-   * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application.
-   * This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.
-   * @default false
-   */
-  disableInjectingGlobalStyles: e.bool,
-  /**
-   * End `InputAdornment` for this component.
-   */
-  endAdornment: e.node,
-  /**
-   * If `true`, the `input` will indicate an error.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   * @default 'primary'
    */
-  error: e.bool,
+  color: e.oneOfType([e.oneOf(["inherit", "primary", "secondary", "error", "info", "success", "warning"]), e.string]),
   /**
-   * If `true`, the `input` will take up the full width of its container.
+   * If `true`, the shrink animation is disabled.
+   * This only works if variant is `indeterminate`.
    * @default false
    */
-  fullWidth: e.bool,
-  /**
-   * The id of the `input` element.
-   */
-  id: e.string,
-  /**
-   * The component used for the `input` element.
-   * Either a string to use a HTML element or a component.
-   * @default 'input'
-   */
-  inputComponent: _o,
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
-   * @default {}
-   */
-  inputProps: e.object,
-  /**
-   * Pass a ref to the `input` element.
-   */
-  inputRef: ge,
-  /**
-   * 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: e.oneOf(["dense", "none"]),
-  /**
-   * Maximum number of rows to display when multiline option is set to true.
-   */
-  maxRows: e.oneOfType([e.number, e.string]),
-  /**
-   * Minimum number of rows to display when multiline option is set to true.
-   */
-  minRows: e.oneOfType([e.number, e.string]),
+  disableShrink: Io(e.bool, (o) => o.disableShrink && o.variant && o.variant !== "indeterminate" ? new Error("MUI: You have provided the `disableShrink` prop with a variant other than `indeterminate`. This will have no effect.") : null),
   /**
-   * If `true`, a [TextareaAutosize](https://mui.com/material-ui/react-textarea-autosize/) element is rendered.
+   * If `true`, a track circle slot is mounted to show a subtle background for the progress.
+   * The `size` and `thickness` apply to the track slot to be consistent with the progress circle.
    * @default false
    */
-  multiline: e.bool,
-  /**
-   * Name attribute of the `input` element.
-   */
-  name: e.string,
-  /**
-   * Callback fired when the `input` is blurred.
-   *
-   * Notice that the first argument (event) might be undefined.
-   */
-  onBlur: e.func,
-  /**
-   * 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: e.func,
-  /**
-   * @ignore
-   */
-  onClick: e.func,
-  /**
-   * @ignore
-   */
-  onFocus: e.func,
-  /**
-   * Callback fired when the `input` doesn't satisfy its constraints.
-   */
-  onInvalid: e.func,
-  /**
-   * @ignore
-   */
-  onKeyDown: e.func,
-  /**
-   * @ignore
-   */
-  onKeyUp: e.func,
-  /**
-   * The short hint displayed in the `input` before the user enters a value.
-   */
-  placeholder: e.string,
-  /**
-   * It prevents the user from changing the value of the field
-   * (not from interacting with the field).
-   */
-  readOnly: e.bool,
-  /**
-   * @ignore
-   */
-  renderSuffix: e.func,
-  /**
-   * If `true`, the `input` element is required.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
-   */
-  required: e.bool,
-  /**
-   * Number of rows to display when multiline option is set to true.
-   */
-  rows: e.oneOfType([e.number, e.string]),
+  enableTrackSlot: e.bool,
   /**
    * The size of the component.
+   * If using a number, the pixel unit is assumed.
+   * If using a string, you need to provide the CSS unit, for example '3rem'.
+   * @default 40
    */
-  size: e.oneOfType([e.oneOf(["medium", "small"]), e.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: e.shape({
-    input: e.object,
-    root: e.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: e.shape({
-    input: e.elementType,
-    root: e.elementType
-  }),
+  size: e.oneOfType([e.number, e.string]),
   /**
-   * Start `InputAdornment` for this component.
+   * @ignore
    */
-  startAdornment: e.node,
+  style: e.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.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'
+   * The thickness of the circle.
+   * @default 3.6
    */
-  type: e.string,
+  thickness: e.number,
   /**
-   * The value of the `input` element, required for a controlled component.
+   * The value of the progress indicator for the determinate variant.
+   * Value between 0 and 100.
+   * @default 0
    */
-  value: e.any
+  value: e.number,
+  /**
+   * The variant to use.
+   * Use indeterminate when there is no progress value.
+   * @default 'indeterminate'
+   */
+  variant: e.oneOf(["determinate", "indeterminate"])
 });
 const Ct = (o) => {
   const {
-    classes: t
-  } = o, r = Q({
-    root: ["root"],
-    notchedOutline: ["notchedOutline"],
-    input: ["input"]
-  }, Qo, t);
-  return {
-    ...t,
-    // forward classes to the InputBase
-    ...r
+    classes: t,
+    disabled: n,
+    color: r,
+    edge: a,
+    size: d,
+    loading: i
+  } = o, u = {
+    root: ["root", i && "loading", n && "disabled", r !== "default" && `color${F(r)}`, a && `edge${F(a)}`, `size${F(d)}`],
+    loadingIndicator: ["loadingIndicator"],
+    loadingWrapper: ["loadingWrapper"]
   };
-}, xt = N(De, {
-  shouldForwardProp: (o) => ue(o) || o === "classes",
-  name: "MuiOutlinedInput",
+  return Q(u, Lo, t);
+}, xt = N(qo, {
+  name: "MuiIconButton",
   slot: "Root",
-  overridesResolver: Ae
+  overridesResolver: (o, t) => {
+    const {
+      ownerState: n
+    } = o;
+    return [t.root, n.loading && t.loading, n.color !== "default" && t[`color${F(n.color)}`], n.edge && t[`edge${F(n.edge)}`], t[`size${F(n.size)}`]];
+  }
 })(U(({
   theme: o
-}) => {
-  const t = o.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)";
-  return {
-    position: "relative",
-    borderRadius: (o.vars || o).shape.borderRadius,
-    [`&:hover .${J.notchedOutline}`]: {
-      borderColor: (o.vars || o).palette.text.primary
-    },
-    // Reset on touch devices, it doesn't add specificity
-    "@media (hover: none)": {
-      [`&:hover .${J.notchedOutline}`]: {
-        borderColor: o.vars ? o.alpha(o.vars.palette.common.onBackground, 0.23) : t
-      }
-    },
-    [`&.${J.focused} .${J.notchedOutline}`]: {
-      borderWidth: 2
-    },
-    variants: [...Object.entries(o.palette).filter(be()).map(([n]) => ({
-      props: {
-        color: n
-      },
-      style: {
-        [`&.${J.focused} .${J.notchedOutline}`]: {
-          borderColor: (o.vars || o).palette[n].main
-        }
-      }
-    })), {
-      props: {},
-      // to override the above style
-      style: {
-        [`&.${J.error} .${J.notchedOutline}`]: {
-          borderColor: (o.vars || o).palette.error.main
-        },
-        [`&.${J.disabled} .${J.notchedOutline}`]: {
-          borderColor: (o.vars || o).palette.action.disabled
+}) => ({
+  textAlign: "center",
+  flex: "0 0 auto",
+  fontSize: o.typography.pxToRem(24),
+  padding: 8,
+  borderRadius: "50%",
+  color: (o.vars || o).palette.action.active,
+  transition: o.transitions.create("background-color", {
+    duration: o.transitions.duration.shortest
+  }),
+  variants: [{
+    props: (t) => !t.disableRipple,
+    style: {
+      "--IconButton-hoverBg": o.alpha((o.vars || o).palette.action.active, (o.vars || o).palette.action.hoverOpacity),
+      "&:hover": {
+        backgroundColor: "var(--IconButton-hoverBg)",
+        // Reset on touch devices, it doesn't add specificity
+        "@media (hover: none)": {
+          backgroundColor: "transparent"
         }
       }
-    }, {
-      props: ({
-        ownerState: n
-      }) => n.startAdornment,
-      style: {
-        paddingLeft: 14
-      }
-    }, {
-      props: ({
-        ownerState: n
-      }) => n.endAdornment,
-      style: {
-        paddingRight: 14
-      }
-    }, {
-      props: ({
-        ownerState: n
-      }) => n.multiline,
-      style: {
-        padding: "16.5px 14px"
-      }
-    }, {
-      props: ({
-        ownerState: n,
-        size: r
-      }) => n.multiline && r === "small",
-      style: {
-        padding: "8.5px 14px"
-      }
-    }]
-  };
-})), Ot = N(jo, {
-  name: "MuiOutlinedInput",
-  slot: "NotchedOutline"
-})(U(({
-  theme: o
-}) => {
-  const t = o.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)";
-  return {
-    borderColor: o.vars ? o.alpha(o.vars.palette.common.onBackground, 0.23) : t
-  };
-})), wt = N(Le, {
-  name: "MuiOutlinedInput",
-  slot: "Input",
-  overridesResolver: ze
-})(U(({
-  theme: o
-}) => ({
-  padding: "16.5px 14px",
-  ...!o.vars && {
-    "&:-webkit-autofill": {
-      WebkitBoxShadow: o.palette.mode === "light" ? null : "0 0 0 100px #266798 inset",
-      WebkitTextFillColor: o.palette.mode === "light" ? null : "#fff",
-      caretColor: o.palette.mode === "light" ? null : "#fff",
-      borderRadius: "inherit"
     }
-  },
-  ...o.vars && {
-    "&:-webkit-autofill": {
-      borderRadius: "inherit"
+  }, {
+    props: {
+      edge: "start"
     },
-    [o.getColorSchemeSelector("dark")]: {
-      "&:-webkit-autofill": {
-        WebkitBoxShadow: "0 0 0 100px #266798 inset",
-        WebkitTextFillColor: "#fff",
-        caretColor: "#fff"
-      }
+    style: {
+      marginLeft: -12
     }
-  },
-  variants: [{
+  }, {
     props: {
+      edge: "start",
       size: "small"
     },
     style: {
-      padding: "8.5px 14px"
+      marginLeft: -3
     }
   }, {
-    props: ({
-      ownerState: t
-    }) => t.multiline,
+    props: {
+      edge: "end"
+    },
     style: {
-      padding: 0
+      marginRight: -12
     }
   }, {
-    props: ({
-      ownerState: t
-    }) => t.startAdornment,
+    props: {
+      edge: "end",
+      size: "small"
+    },
     style: {
-      paddingLeft: 0
+      marginRight: -3
+    }
+  }]
+})), U(({
+  theme: o
+}) => ({
+  variants: [{
+    props: {
+      color: "inherit"
+    },
+    style: {
+      color: "inherit"
+    }
+  }, ...Object.entries(o.palette).filter(be()).map(([t]) => ({
+    props: {
+      color: t
+    },
+    style: {
+      color: (o.vars || o).palette[t].main
+    }
+  })), ...Object.entries(o.palette).filter(be()).map(([t]) => ({
+    props: {
+      color: t
+    },
+    style: {
+      "--IconButton-hoverBg": o.alpha((o.vars || o).palette[t].main, (o.vars || o).palette.action.hoverOpacity)
+    }
+  })), {
+    props: {
+      size: "small"
+    },
+    style: {
+      padding: 5,
+      fontSize: o.typography.pxToRem(18)
     }
   }, {
-    props: ({
-      ownerState: t
-    }) => t.endAdornment,
+    props: {
+      size: "large"
+    },
     style: {
-      paddingRight: 0
+      padding: 12,
+      fontSize: o.typography.pxToRem(28)
     }
-  }]
-}))), no = /* @__PURE__ */ s.forwardRef(function(t, n) {
-  const r = ae({
-    props: t,
-    name: "MuiOutlinedInput"
-  }), {
-    components: a = {},
-    fullWidth: d = !1,
-    inputComponent: i = "input",
-    label: u,
-    multiline: v = !1,
-    notched: S,
-    slots: f = {},
-    slotProps: y = {},
-    type: b = "text",
-    ...R
-  } = r, C = Ct(r), T = oo(), g = to({
-    props: r,
-    muiFormControl: T,
-    states: ["color", "disabled", "error", "focused", "hiddenLabel", "size", "required"]
-  }), h = {
-    ...r,
-    color: g.color || "primary",
-    disabled: g.disabled,
-    error: g.error,
-    focused: g.focused,
-    formControl: T,
-    fullWidth: d,
-    hiddenLabel: g.hiddenLabel,
-    multiline: v,
-    size: g.size,
-    type: b
-  }, O = f.root ?? a.Root ?? xt, c = f.input ?? a.Input ?? wt, [p, P] = qo("notchedOutline", {
-    elementType: Ot,
-    className: C.notchedOutline,
-    shouldForwardComponentProp: !0,
-    ownerState: h,
-    externalForwardedProps: {
-      slots: f,
-      slotProps: y
+  }],
+  [`&.${uo.disabled}`]: {
+    backgroundColor: "transparent",
+    color: (o.vars || o).palette.action.disabled
+  },
+  [`&.${uo.loading}`]: {
+    color: "transparent"
+  }
+}))), Ot = N("span", {
+  name: "MuiIconButton",
+  slot: "LoadingIndicator"
+})(({
+  theme: o
+}) => ({
+  display: "none",
+  position: "absolute",
+  visibility: "visible",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  color: (o.vars || o).palette.action.disabled,
+  variants: [{
+    props: {
+      loading: !0
     },
-    additionalProps: {
-      label: u != null && u !== "" && g.required ? /* @__PURE__ */ m.jsxs(s.Fragment, {
-        children: [u, " ", "*"]
-      }) : u
+    style: {
+      display: "flex"
     }
-  });
-  return /* @__PURE__ */ m.jsx(Ue, {
-    slots: {
-      root: O,
-      input: c
-    },
-    slotProps: y,
-    renderSuffix: (w) => /* @__PURE__ */ m.jsx(p, {
-      ...P,
-      notched: typeof S < "u" ? S : !!(w.startAdornment || w.filled || w.focused)
-    }),
-    fullWidth: d,
-    inputComponent: i,
-    multiline: v,
+  }]
+})), wt = /* @__PURE__ */ s.forwardRef(function(t, n) {
+  const r = ae({
+    props: t,
+    name: "MuiIconButton"
+  }), {
+    edge: a = !1,
+    children: d,
+    className: i,
+    color: u = "default",
+    disabled: v = !1,
+    disableFocusRipple: S = !1,
+    size: f = "medium",
+    id: y,
+    loading: b = null,
+    loadingIndicator: R,
+    ...C
+  } = r, T = ko(y), g = R ?? /* @__PURE__ */ m.jsx(Eo, {
+    "aria-labelledby": T,
+    color: "inherit",
+    size: 16
+  }), h = {
+    ...r,
+    edge: a,
+    color: u,
+    disabled: v,
+    disableFocusRipple: S,
+    loading: b,
+    loadingIndicator: g,
+    size: f
+  }, O = Ct(h);
+  return /* @__PURE__ */ m.jsxs(xt, {
+    id: b ? T : y,
+    className: ie(O.root, i),
+    centerRipple: !0,
+    focusRipple: !S,
+    disabled: v || b,
     ref: n,
-    type: b,
-    ...R,
-    classes: {
-      ...C,
-      notchedOutline: null
-    }
+    ...C,
+    ownerState: h,
+    children: [typeof b == "boolean" && // use plain HTML span to minimize the runtime overhead
+    /* @__PURE__ */ m.jsx("span", {
+      className: O.loadingWrapper,
+      style: {
+        display: "contents"
+      },
+      children: /* @__PURE__ */ m.jsx(Ot, {
+        className: O.loadingIndicator,
+        ownerState: h,
+        children: b && g
+      })
+    }), d]
   });
 });
-process.env.NODE_ENV !== "production" && (no.propTypes = {
+process.env.NODE_ENV !== "production" && (wt.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: e.string,
-  /**
-   * If `true`, the `input` element is focused during the first mount.
+   * The icon to display.
    */
-  autoFocus: e.bool,
+  children: Io(e.node, (o) => s.Children.toArray(o.children).some((n) => /* @__PURE__ */ s.isValidElement(n) && n.props.onClick) ? new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join(`
+`)) : null),
   /**
    * Override or extend the styles applied to the component.
    */
   classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.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/#custom-colors).
-   * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
-   */
-  color: e.oneOfType([e.oneOf(["primary", "secondary"]), e.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: e.shape({
-    Input: e.elementType,
-    Root: e.elementType
-  }),
-  /**
-   * The default value. Use when the component is not controlled.
+   * @default 'default'
    */
-  defaultValue: e.any,
+  color: e.oneOfType([e.oneOf(["inherit", "default", "primary", "secondary", "error", "info", "success", "warning"]), e.string]),
   /**
    * If `true`, the component is disabled.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
-   */
-  disabled: e.bool,
-  /**
-   * End `InputAdornment` for this component.
-   */
-  endAdornment: e.node,
-  /**
-   * If `true`, the `input` will indicate an error.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
-   */
-  error: e.bool,
-  /**
-   * If `true`, the `input` will take up the full width of its container.
    * @default false
    */
-  fullWidth: e.bool,
-  /**
-   * The id of the `input` element.
-   */
-  id: e.string,
-  /**
-   * The component used for the `input` element.
-   * Either a string to use a HTML element or a component.
-   * @default 'input'
-   */
-  inputComponent: e.elementType,
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
-   * @default {}
-   */
-  inputProps: e.object,
-  /**
-   * Pass a ref to the `input` element.
-   */
-  inputRef: ge,
-  /**
-   * The label of the `input`. It is only used for layout. The actual labelling
-   * is handled by `InputLabel`.
-   */
-  label: e.node,
-  /**
-   * 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: e.oneOf(["dense", "none"]),
-  /**
-   * Maximum number of rows to display when multiline option is set to true.
-   */
-  maxRows: e.oneOfType([e.number, e.string]),
-  /**
-   * Minimum number of rows to display when multiline option is set to true.
-   */
-  minRows: e.oneOfType([e.number, e.string]),
+  disabled: e.bool,
   /**
-   * If `true`, a [TextareaAutosize](https://mui.com/material-ui/react-textarea-autosize/) element is rendered.
+   * If `true`, the  keyboard focus ripple is disabled.
    * @default false
    */
-  multiline: e.bool,
-  /**
-   * Name attribute of the `input` element.
-   */
-  name: e.string,
-  /**
-   * If `true`, the outline is notched to accommodate the label.
-   */
-  notched: e.bool,
+  disableFocusRipple: e.bool,
   /**
-   * Callback fired when the value is changed.
+   * If `true`, the ripple effect is disabled.
    *
-   * @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: e.func,
-  /**
-   * The short hint displayed in the `input` before the user enters a value.
-   */
-  placeholder: e.string,
-  /**
-   * It prevents the user from changing the value of the field
-   * (not from interacting with the field).
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
    */
-  readOnly: e.bool,
+  disableRipple: e.bool,
   /**
-   * If `true`, the `input` element is required.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
+   * @default false
    */
-  required: e.bool,
+  edge: e.oneOf(["end", "start", !1]),
   /**
-   * Number of rows to display when multiline option is set to true.
+   * @ignore
    */
-  rows: e.oneOfType([e.number, e.string]),
+  id: e.string,
   /**
-   * The props used for each slot inside.
-   * @default {}
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
    */
-  slotProps: e.shape({
-    input: e.object,
-    notchedOutline: e.oneOfType([e.func, e.object]),
-    root: e.object
-  }),
+  loading: e.bool,
   /**
-   * The components used for each slot inside.
-   * @default {}
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
    */
-  slots: e.shape({
-    input: e.elementType,
-    notchedOutline: e.elementType,
-    root: e.elementType
-  }),
+  loadingIndicator: e.node,
   /**
-   * Start `InputAdornment` for this component.
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
    */
-  startAdornment: e.node,
+  size: e.oneOfType([e.oneOf(["small", "medium", "large"]), e.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.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: e.string,
-  /**
-   * The value of the `input` element, required for a controlled component.
-   */
-  value: e.any
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
 });
-no.muiName = "Input";
 function It(o) {
   return ye("MuiInput", o);
 }
@@ -2827,7 +2827,7 @@ const $t = (o) => {
       if (!Ye(A, ["Input", "Select"]))
         return;
       const K = Ye(A, ["Select"]) ? A.props.input : A;
-      K && vt(K.props) && (q = !0);
+      K && at(K.props) && (q = !0);
     }), q;
   }), [w, V] = s.useState(() => {
     let q = !1;
@@ -3953,9 +3953,9 @@ process.env.NODE_ENV !== "production" && (Ao.propTypes = {
 });
 Ao.muiName = "Select";
 export {
-  Po as C,
+  Eo as C,
   Bt as F,
-  mt as I,
+  wt as I,
   no as O,
   Ao as S,
   so as a,