@hybridcore/ui 1.3.2 → 1.3.4

package/dist/FormControl-aXQs42m6.js

@@ -0,0 +1,1363 @@
+import { a as G, _ as a } from "./extends-Cyw62AD_.js";
+import * as i from "react";
+import { P as e, a as K, f as Ve } from "./createStyled-liRRhQcN.js";
+import { b as Ue, g as ee, u as oe, c as V, a as ne } from "./useThemeProps-BXn-nVhw.js";
+import { u as fe, F as Ee } from "./useFormControl-CatNKXAi.js";
+import { d as Ge, g as re, s as _, r as Ke } from "./styled-Dm8rXzIG.js";
+import { jsxs as U, jsx as N } from "react/jsx-runtime";
+import { u as Ne, b as ke, e as Ye, r as Ze } from "./ButtonBase-DJz-TFGO.js";
+import * as Je from "react-dom";
+import { o as we } from "./ownerWindow-niciwP7I.js";
+import { d as Qe } from "./debounce-46wSf_lW.js";
+import { i as Oe } from "./isHostComponent-kiaBvYVo.js";
+import { Global as Xe } from "@emotion/react";
+import { i as ce } from "./isMuiElement-CxT3_ACP.js";
+const eo = ["onChange", "maxRows", "minRows", "style", "value"];
+function X(o) {
+  return parseInt(o, 10) || 0;
+}
+const oo = {
+  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 Te(o) {
+  return o == null || Object.keys(o).length === 0 || o.outerHeightStyle === 0 && !o.overflow;
+}
+const Fe = /* @__PURE__ */ i.forwardRef(function(n, r) {
+  const {
+    onChange: t,
+    maxRows: s,
+    minRows: u = 1,
+    style: h,
+    value: g
+  } = n, p = G(n, eo), {
+    current: l
+  } = i.useRef(g != null), b = i.useRef(null), C = Ne(r, b), w = i.useRef(null), T = i.useRef(0), [E, k] = i.useState({
+    outerHeightStyle: 0
+  }), F = i.useCallback(() => {
+    const d = b.current, y = we(d).getComputedStyle(d);
+    if (y.width === "0px")
+      return {
+        outerHeightStyle: 0
+      };
+    const f = w.current;
+    f.style.width = y.width, f.value = d.value || n.placeholder || "x", f.value.slice(-1) === `
+` && (f.value += " ");
+    const I = y.boxSizing, L = X(y.paddingBottom) + X(y.paddingTop), A = X(y.borderBottomWidth) + X(y.borderTopWidth), P = f.scrollHeight;
+    f.value = "x";
+    const O = f.scrollHeight;
+    let v = P;
+    u && (v = Math.max(Number(u) * O, v)), s && (v = Math.min(Number(s) * O, v)), v = Math.max(v, O);
+    const M = v + (I === "border-box" ? L + A : 0), Y = Math.abs(v - P) <= 1;
+    return {
+      outerHeightStyle: M,
+      overflow: Y
+    };
+  }, [s, u, n.placeholder]), B = (d, x) => {
+    const {
+      outerHeightStyle: y,
+      overflow: f
+    } = x;
+    return T.current < 20 && (y > 0 && Math.abs((d.outerHeightStyle || 0) - y) > 1 || d.overflow !== f) ? (T.current += 1, {
+      overflow: f,
+      outerHeightStyle: y
+    }) : (process.env.NODE_ENV !== "production" && T.current === 20 && console.error(["MUI: Too many re-renders. The layout is unstable.", "TextareaAutosize limits the number of renders to prevent an infinite loop."].join(`
+`)), d);
+  }, S = i.useCallback(() => {
+    const d = F();
+    Te(d) || k((x) => B(x, d));
+  }, [F]), j = () => {
+    const d = F();
+    Te(d) || Je.flushSync(() => {
+      k((x) => B(x, d));
+    });
+  };
+  i.useEffect(() => {
+    const d = Qe(() => {
+      T.current = 0, b.current && j();
+    });
+    let x;
+    const y = b.current, f = we(y);
+    return f.addEventListener("resize", d), typeof ResizeObserver < "u" && (x = new ResizeObserver(d), x.observe(y)), () => {
+      d.clear(), f.removeEventListener("resize", d), x && x.disconnect();
+    };
+  }), ke(() => {
+    S();
+  }), i.useEffect(() => {
+    T.current = 0;
+  }, [g]);
+  const W = (d) => {
+    T.current = 0, l || S(), t && t(d);
+  };
+  return /* @__PURE__ */ U(i.Fragment, {
+    children: [/* @__PURE__ */ N("textarea", a({
+      value: g,
+      onChange: W,
+      ref: C,
+      rows: u,
+      style: a({
+        height: E.outerHeightStyle,
+        // Need a large enough difference to allow scrolling.
+        // This prevents infinite rendering loop.
+        overflow: E.overflow ? "hidden" : void 0
+      }, h)
+    }, p)), /* @__PURE__ */ N("textarea", {
+      "aria-hidden": !0,
+      className: n.className,
+      readOnly: !0,
+      ref: w,
+      tabIndex: -1,
+      style: a({}, oo.shadow, h, {
+        padding: 0
+      })
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (Fe.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * Maximum number of rows to display.
+   */
+  maxRows: e.oneOfType([e.number, e.string]),
+  /**
+   * Minimum number of rows to display.
+   * @default 1
+   */
+  minRows: e.oneOfType([e.number, e.string]),
+  /**
+   * @ignore
+   */
+  onChange: e.func,
+  /**
+   * @ignore
+   */
+  placeholder: e.string,
+  /**
+   * @ignore
+   */
+  style: e.object,
+  /**
+   * @ignore
+   */
+  value: e.oneOfType([e.arrayOf(e.string), e.number, e.string])
+});
+function no(o) {
+  return o == null || Object.keys(o).length === 0;
+}
+function ze(o) {
+  const {
+    styles: n,
+    defaultTheme: r = {}
+  } = o;
+  return /* @__PURE__ */ N(Xe, {
+    styles: typeof n == "function" ? (s) => n(no(s) ? r : s) : n
+  });
+}
+process.env.NODE_ENV !== "production" && (ze.propTypes = {
+  defaultTheme: e.object,
+  styles: e.oneOfType([e.array, e.string, e.object, e.func])
+});
+function Ie({
+  styles: o,
+  themeId: n,
+  defaultTheme: r = {}
+}) {
+  const t = Ue(r), s = typeof o == "function" ? o(n && t[n] || t) : o;
+  return /* @__PURE__ */ N(ze, {
+    styles: s
+  });
+}
+process.env.NODE_ENV !== "production" && (Ie.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  defaultTheme: e.object,
+  /**
+   * @ignore
+   */
+  styles: e.oneOfType([e.array, e.func, e.number, e.object, e.string, e.bool]),
+  /**
+   * @ignore
+   */
+  themeId: e.string
+});
+function me({
+  props: o,
+  states: n,
+  muiFormControl: r
+}) {
+  return n.reduce((t, s) => (t[s] = o[s], r && typeof o[s] > "u" && (t[s] = r[s]), t), {});
+}
+function Ae(o) {
+  return /* @__PURE__ */ N(Ie, a({}, o, {
+    defaultTheme: Ge
+  }));
+}
+process.env.NODE_ENV !== "production" && (Ae.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The styles you want to apply globally.
+   */
+  styles: e.oneOfType([e.func, e.number, e.object, e.shape({
+    __emotion_styles: e.any.isRequired
+  }), e.string, e.bool])
+});
+function Re(o) {
+  return o != null && !(Array.isArray(o) && o.length === 0);
+}
+function Me(o, n = !1) {
+  return o && (Re(o.value) && o.value !== "" || n && Re(o.defaultValue) && o.defaultValue !== "");
+}
+function ro(o) {
+  return o.startAdornment;
+}
+function to(o) {
+  return re("MuiInputBase", o);
+}
+const pe = ee("MuiInputBase", ["root", "formControl", "focused", "disabled", "adornedStart", "adornedEnd", "error", "sizeSmall", "multiline", "colorSecondary", "fullWidth", "hiddenLabel", "readOnly", "input", "inputSizeSmall", "inputMultiline", "inputTypeSearch", "inputAdornedStart", "inputAdornedEnd", "inputHiddenLabel"]), so = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"], io = (o, n) => {
+  const {
+    ownerState: r
+  } = o;
+  return [n.root, r.formControl && n.formControl, r.startAdornment && n.adornedStart, r.endAdornment && n.adornedEnd, r.error && n.error, r.size === "small" && n.sizeSmall, r.multiline && n.multiline, r.color && n[`color${K(r.color)}`], r.fullWidth && n.fullWidth, r.hiddenLabel && n.hiddenLabel];
+}, ao = (o, n) => {
+  const {
+    ownerState: r
+  } = o;
+  return [n.input, r.size === "small" && n.inputSizeSmall, r.multiline && n.inputMultiline, r.type === "search" && n.inputTypeSearch, r.startAdornment && n.inputAdornedStart, r.endAdornment && n.inputAdornedEnd, r.hiddenLabel && n.inputHiddenLabel];
+}, lo = (o) => {
+  const {
+    classes: n,
+    color: r,
+    disabled: t,
+    error: s,
+    endAdornment: u,
+    focused: h,
+    formControl: g,
+    fullWidth: p,
+    hiddenLabel: l,
+    multiline: b,
+    readOnly: C,
+    size: w,
+    startAdornment: T,
+    type: E
+  } = o, k = {
+    root: ["root", `color${K(r)}`, t && "disabled", s && "error", p && "fullWidth", h && "focused", g && "formControl", w === "small" && "sizeSmall", b && "multiline", T && "adornedStart", u && "adornedEnd", l && "hiddenLabel", C && "readOnly"],
+    input: ["input", t && "disabled", E === "search" && "inputTypeSearch", b && "inputMultiline", w === "small" && "inputSizeSmall", l && "inputHiddenLabel", T && "inputAdornedStart", u && "inputAdornedEnd", C && "readOnly"]
+  };
+  return ne(k, to, n);
+}, uo = _("div", {
+  name: "MuiInputBase",
+  slot: "Root",
+  overridesResolver: io
+})(({
+  theme: o,
+  ownerState: n
+}) => a({}, 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",
+  [`&.${pe.disabled}`]: {
+    color: (o.vars || o).palette.text.disabled,
+    cursor: "default"
+  }
+}, n.multiline && a({
+  padding: "4px 0 5px"
+}, n.size === "small" && {
+  paddingTop: 1
+}), n.fullWidth && {
+  width: "100%"
+})), co = _("input", {
+  name: "MuiInputBase",
+  slot: "Input",
+  overridesResolver: ao
+})(({
+  theme: o,
+  ownerState: n
+}) => {
+  const r = o.palette.mode === "light", t = a({
+    color: "currentColor"
+  }, o.vars ? {
+    opacity: o.vars.opacity.inputPlaceholder
+  } : {
+    opacity: r ? 0.42 : 0.5
+  }, {
+    transition: o.transitions.create("opacity", {
+      duration: o.transitions.duration.shorter
+    })
+  }), s = {
+    opacity: "0 !important"
+  }, u = o.vars ? {
+    opacity: o.vars.opacity.inputPlaceholder
+  } : {
+    opacity: r ? 0.42 : 0.5
+  };
+  return a({
+    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%",
+    // Fix IE11 width issue
+    animationName: "mui-auto-fill-cancel",
+    animationDuration: "10ms",
+    "&::-webkit-input-placeholder": t,
+    "&::-moz-placeholder": t,
+    // Firefox 19+
+    "&:-ms-input-placeholder": t,
+    // IE11
+    "&::-ms-input-placeholder": t,
+    // Edge
+    "&:focus": {
+      outline: 0
+    },
+    // Reset Firefox invalid required input style
+    "&:invalid": {
+      boxShadow: "none"
+    },
+    "&::-webkit-search-decoration": {
+      // Remove the padding when type=search.
+      WebkitAppearance: "none"
+    },
+    // Show and hide the placeholder logic
+    [`label[data-shrink=false] + .${pe.formControl} &`]: {
+      "&::-webkit-input-placeholder": s,
+      "&::-moz-placeholder": s,
+      // Firefox 19+
+      "&:-ms-input-placeholder": s,
+      // IE11
+      "&::-ms-input-placeholder": s,
+      // Edge
+      "&:focus::-webkit-input-placeholder": u,
+      "&:focus::-moz-placeholder": u,
+      // Firefox 19+
+      "&:focus:-ms-input-placeholder": u,
+      // IE11
+      "&:focus::-ms-input-placeholder": u
+      // Edge
+    },
+    [`&.${pe.disabled}`]: {
+      opacity: 1,
+      // Reset iOS opacity
+      WebkitTextFillColor: (o.vars || o).palette.text.disabled
+      // Fix opacity Safari bug
+    },
+    "&:-webkit-autofill": {
+      animationDuration: "5000s",
+      animationName: "mui-auto-fill"
+    }
+  }, n.size === "small" && {
+    paddingTop: 1
+  }, n.multiline && {
+    height: "auto",
+    resize: "none",
+    padding: 0,
+    paddingTop: 0
+  }, n.type === "search" && {
+    // Improve type search style.
+    MozAppearance: "textfield"
+  });
+}), po = /* @__PURE__ */ N(Ae, {
+  styles: {
+    "@keyframes mui-auto-fill": {
+      from: {
+        display: "block"
+      }
+    },
+    "@keyframes mui-auto-fill-cancel": {
+      from: {
+        display: "block"
+      }
+    }
+  }
+}), fo = /* @__PURE__ */ i.forwardRef(function(n, r) {
+  var t;
+  const s = oe({
+    props: n,
+    name: "MuiInputBase"
+  }), {
+    "aria-describedby": u,
+    autoComplete: h,
+    autoFocus: g,
+    className: p,
+    components: l = {},
+    componentsProps: b = {},
+    defaultValue: C,
+    disabled: w,
+    disableInjectingGlobalStyles: T,
+    endAdornment: E,
+    fullWidth: k = !1,
+    id: F,
+    inputComponent: B = "input",
+    inputProps: S = {},
+    inputRef: j,
+    maxRows: W,
+    minRows: d,
+    multiline: x = !1,
+    name: y,
+    onBlur: f,
+    onChange: I,
+    onClick: L,
+    onFocus: A,
+    onKeyDown: P,
+    onKeyUp: O,
+    placeholder: v,
+    readOnly: M,
+    renderSuffix: Y,
+    rows: Z,
+    slotProps: be = {},
+    slots: he = {},
+    startAdornment: $,
+    type: ye = "text",
+    value: Le
+  } = s, Be = G(s, so), J = S.value != null ? S.value : Le, {
+    current: te
+  } = i.useRef(J != null), D = i.useRef(), Pe = i.useCallback((c) => {
+    process.env.NODE_ENV !== "production" && c && c.nodeName !== "INPUT" && !c.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(`
+`));
+  }, []), De = Ne(D, j, S.ref, Pe), [se, ie] = i.useState(!1), m = fe();
+  process.env.NODE_ENV !== "production" && i.useEffect(() => {
+    if (m)
+      return m.registerEffect();
+  }, [m]);
+  const R = me({
+    props: s,
+    muiFormControl: m,
+    states: ["color", "disabled", "error", "hiddenLabel", "size", "required", "filled"]
+  });
+  R.focused = m ? m.focused : se, i.useEffect(() => {
+    !m && w && se && (ie(!1), f && f());
+  }, [m, w, se, f]);
+  const ae = m && m.onFilled, le = m && m.onEmpty, q = i.useCallback((c) => {
+    Me(c) ? ae && ae() : le && le();
+  }, [ae, le]);
+  ke(() => {
+    te && q({
+      value: J
+    });
+  }, [J, q, te]);
+  const _e = (c) => {
+    if (R.disabled) {
+      c.stopPropagation();
+      return;
+    }
+    A && A(c), S.onFocus && S.onFocus(c), m && m.onFocus ? m.onFocus(c) : ie(!0);
+  }, je = (c) => {
+    f && f(c), S.onBlur && S.onBlur(c), m && m.onBlur ? m.onBlur(c) : ie(!1);
+  }, $e = (c, ...Ce) => {
+    if (!te) {
+      const Se = c.target || D.current;
+      if (Se == 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." : Ve(1));
+      q({
+        value: Se.value
+      });
+    }
+    S.onChange && S.onChange(c, ...Ce), I && I(c, ...Ce);
+  };
+  i.useEffect(() => {
+    q(D.current);
+  }, []);
+  const qe = (c) => {
+    D.current && c.currentTarget === c.target && D.current.focus(), L && L(c);
+  };
+  let ue = B, z = S;
+  x && ue === "input" && (Z ? (process.env.NODE_ENV !== "production" && (d || W) && console.warn("MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set."), z = a({
+    type: void 0,
+    minRows: Z,
+    maxRows: Z
+  }, z)) : z = a({
+    type: void 0,
+    maxRows: W,
+    minRows: d
+  }, z), ue = Fe);
+  const He = (c) => {
+    q(c.animationName === "mui-auto-fill-cancel" ? D.current : {
+      value: "x"
+    });
+  };
+  i.useEffect(() => {
+    m && m.setAdornedStart(!!$);
+  }, [m, $]);
+  const Q = a({}, s, {
+    color: R.color || "primary",
+    disabled: R.disabled,
+    endAdornment: E,
+    error: R.error,
+    focused: R.focused,
+    formControl: m,
+    fullWidth: k,
+    hiddenLabel: R.hiddenLabel,
+    multiline: x,
+    size: R.size,
+    startAdornment: $,
+    type: ye
+  }), ge = lo(Q), ve = he.root || l.Root || uo, de = be.root || b.root || {}, xe = he.input || l.Input || co;
+  return z = a({}, z, (t = be.input) != null ? t : b.input), /* @__PURE__ */ U(i.Fragment, {
+    children: [!T && po, /* @__PURE__ */ U(ve, a({}, de, !Oe(ve) && {
+      ownerState: a({}, Q, de.ownerState)
+    }, {
+      ref: r,
+      onClick: qe
+    }, Be, {
+      className: V(ge.root, de.className, p, M && "MuiInputBase-readOnly"),
+      children: [$, /* @__PURE__ */ N(Ee.Provider, {
+        value: null,
+        children: /* @__PURE__ */ N(xe, a({
+          ownerState: Q,
+          "aria-invalid": R.error,
+          "aria-describedby": u,
+          autoComplete: h,
+          autoFocus: g,
+          defaultValue: C,
+          disabled: R.disabled,
+          id: F,
+          onAnimationStart: He,
+          name: y,
+          placeholder: v,
+          readOnly: M,
+          required: R.required,
+          rows: Z,
+          value: J,
+          onKeyDown: P,
+          onKeyUp: O,
+          type: ye
+        }, z, !Oe(xe) && {
+          as: ue,
+          ownerState: a({}, Q, z.ownerState)
+        }, {
+          ref: De,
+          className: V(ge.input, z.className, M && "MuiInputBase-readOnly"),
+          onBlur: je,
+          onChange: $e,
+          onFocus: _e
+        }))
+      }), E, Y ? Y(a({}, R, {
+        startAdornment: $
+      })) : null]
+    }))]
+  });
+});
+process.env.NODE_ENV !== "production" && (fo.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn 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.
+   */
+  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/#adding-new-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.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @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.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
+   * @default {}
+   */
+  componentsProps: 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.
+   */
+  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: Ye,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * @default {}
+   */
+  inputProps: e.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: Ze,
+  /**
+   * 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](/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
+   */
+  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]),
+  /**
+   * The size of the component.
+   */
+  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/Element/input#Form_%3Cinput%3E_types).
+   * @default 'text'
+   */
+  type: e.string,
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: e.any
+});
+function mo(o) {
+  return re("MuiFormLabel", o);
+}
+const H = ee("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]), bo = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"], ho = (o) => {
+  const {
+    classes: n,
+    color: r,
+    focused: t,
+    disabled: s,
+    error: u,
+    filled: h,
+    required: g
+  } = o, p = {
+    root: ["root", `color${K(r)}`, s && "disabled", u && "error", h && "filled", t && "focused", g && "required"],
+    asterisk: ["asterisk", u && "error"]
+  };
+  return ne(p, mo, n);
+}, yo = _("label", {
+  name: "MuiFormLabel",
+  slot: "Root",
+  overridesResolver: ({
+    ownerState: o
+  }, n) => a({}, n.root, o.color === "secondary" && n.colorSecondary, o.filled && n.filled)
+})(({
+  theme: o,
+  ownerState: n
+}) => a({
+  color: (o.vars || o).palette.text.secondary
+}, o.typography.body1, {
+  lineHeight: "1.4375em",
+  padding: 0,
+  position: "relative",
+  [`&.${H.focused}`]: {
+    color: (o.vars || o).palette[n.color].main
+  },
+  [`&.${H.disabled}`]: {
+    color: (o.vars || o).palette.text.disabled
+  },
+  [`&.${H.error}`]: {
+    color: (o.vars || o).palette.error.main
+  }
+})), go = _("span", {
+  name: "MuiFormLabel",
+  slot: "Asterisk",
+  overridesResolver: (o, n) => n.asterisk
+})(({
+  theme: o
+}) => ({
+  [`&.${H.error}`]: {
+    color: (o.vars || o).palette.error.main
+  }
+})), We = /* @__PURE__ */ i.forwardRef(function(n, r) {
+  const t = oe({
+    props: n,
+    name: "MuiFormLabel"
+  }), {
+    children: s,
+    className: u,
+    component: h = "label"
+  } = t, g = G(t, bo), p = fe(), l = me({
+    props: t,
+    muiFormControl: p,
+    states: ["color", "required", "focused", "disabled", "error", "filled"]
+  }), b = a({}, t, {
+    color: l.color || "primary",
+    component: h,
+    disabled: l.disabled,
+    error: l.error,
+    filled: l.filled,
+    focused: l.focused,
+    required: l.required
+  }), C = ho(b);
+  return /* @__PURE__ */ U(yo, a({
+    as: h,
+    ownerState: b,
+    className: V(C.root, u),
+    ref: r
+  }, g, {
+    children: [s, l.required && /* @__PURE__ */ U(go, {
+      ownerState: b,
+      "aria-hidden": !0,
+      className: C.asterisk,
+      children: [" ", "*"]
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" && (We.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * 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/#adding-new-colors).
+   */
+  color: e.oneOfType([e.oneOf(["error", "info", "primary", "secondary", "success", "warning"]), e.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * If `true`, the label should be displayed in a disabled state.
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error: e.bool,
+  /**
+   * If `true`, the label should use filled classes key.
+   */
+  filled: e.bool,
+  /**
+   * If `true`, the input of this label is focused (used by `FormGroup` components).
+   */
+  focused: e.bool,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required: e.bool,
+  /**
+   * 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])
+});
+function vo(o) {
+  return re("MuiInputLabel", o);
+}
+ee("MuiInputLabel", ["root", "focused", "disabled", "error", "required", "asterisk", "formControl", "sizeSmall", "shrink", "animated", "standard", "filled", "outlined"]);
+const xo = ["disableAnimation", "margin", "shrink", "variant", "className"], Co = (o) => {
+  const {
+    classes: n,
+    formControl: r,
+    size: t,
+    shrink: s,
+    disableAnimation: u,
+    variant: h,
+    required: g
+  } = o, l = ne({
+    root: ["root", r && "formControl", !u && "animated", s && "shrink", t === "small" && "sizeSmall", h],
+    asterisk: [g && "asterisk"]
+  }, vo, n);
+  return a({}, n, l);
+}, So = _(We, {
+  shouldForwardProp: (o) => Ke(o) || o === "classes",
+  name: "MuiInputLabel",
+  slot: "Root",
+  overridesResolver: (o, n) => {
+    const {
+      ownerState: r
+    } = o;
+    return [{
+      [`& .${H.asterisk}`]: n.asterisk
+    }, n.root, r.formControl && n.formControl, r.size === "small" && n.sizeSmall, r.shrink && n.shrink, !r.disableAnimation && n.animated, n[r.variant]];
+  }
+})(({
+  theme: o,
+  ownerState: n
+}) => a({
+  display: "block",
+  transformOrigin: "top left",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "100%"
+}, n.formControl && {
+  position: "absolute",
+  left: 0,
+  top: 0,
+  // slight alteration to spec spacing to match visual spec result
+  transform: "translate(0, 20px) scale(1)"
+}, n.size === "small" && {
+  // Compensation for the `Input.inputSizeSmall` style.
+  transform: "translate(0, 17px) scale(1)"
+}, n.shrink && {
+  transform: "translate(0, -1.5px) scale(0.75)",
+  transformOrigin: "top left",
+  maxWidth: "133%"
+}, !n.disableAnimation && {
+  transition: o.transitions.create(["color", "transform", "max-width"], {
+    duration: o.transitions.duration.shorter,
+    easing: o.transitions.easing.easeOut
+  })
+}, n.variant === "filled" && a({
+  // Chrome's autofill feature gives the input field a yellow background.
+  // Since the input field is behind the label in the HTML tree,
+  // the input field is drawn last and hides the label with an opaque background color.
+  // zIndex: 1 will raise the label above opaque background-colors of input.
+  zIndex: 1,
+  pointerEvents: "none",
+  transform: "translate(12px, 16px) scale(1)",
+  maxWidth: "calc(100% - 24px)"
+}, n.size === "small" && {
+  transform: "translate(12px, 13px) scale(1)"
+}, n.shrink && a({
+  userSelect: "none",
+  pointerEvents: "auto",
+  transform: "translate(12px, 7px) scale(0.75)",
+  maxWidth: "calc(133% - 24px)"
+}, n.size === "small" && {
+  transform: "translate(12px, 4px) scale(0.75)"
+})), n.variant === "outlined" && a({
+  // see comment above on filled.zIndex
+  zIndex: 1,
+  pointerEvents: "none",
+  transform: "translate(14px, 16px) scale(1)",
+  maxWidth: "calc(100% - 24px)"
+}, n.size === "small" && {
+  transform: "translate(14px, 9px) scale(1)"
+}, n.shrink && {
+  userSelect: "none",
+  pointerEvents: "auto",
+  // Theoretically, we should have (8+5)*2/0.75 = 34px
+  // but it feels a better when it bleeds a bit on the left, so 32px.
+  maxWidth: "calc(133% - 32px)",
+  transform: "translate(14px, -9px) scale(0.75)"
+}))), wo = /* @__PURE__ */ i.forwardRef(function(n, r) {
+  const t = oe({
+    name: "MuiInputLabel",
+    props: n
+  }), {
+    disableAnimation: s = !1,
+    shrink: u,
+    className: h
+  } = t, g = G(t, xo), p = fe();
+  let l = u;
+  typeof l > "u" && p && (l = p.filled || p.focused || p.adornedStart);
+  const b = me({
+    props: t,
+    muiFormControl: p,
+    states: ["size", "variant", "required"]
+  }), C = a({}, t, {
+    disableAnimation: s,
+    formControl: p,
+    shrink: l,
+    size: b.size,
+    variant: b.variant,
+    required: b.required
+  }), w = Co(C);
+  return /* @__PURE__ */ N(So, a({
+    "data-shrink": l,
+    ownerState: C,
+    ref: r,
+    className: V(w.root, h)
+  }, g, {
+    classes: w
+  }));
+});
+process.env.NODE_ENV !== "production" && (wo.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * 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/#adding-new-colors).
+   */
+  color: e.oneOfType([e.oneOf(["error", "info", "primary", "secondary", "success", "warning"]), e.string]),
+  /**
+   * If `true`, the transition animation is disabled.
+   * @default false
+   */
+  disableAnimation: e.bool,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error: e.bool,
+  /**
+   * If `true`, the `input` of this label is focused.
+   */
+  focused: e.bool,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin: e.oneOf(["dense"]),
+  /**
+   * if `true`, the label will indicate that the `input` is required.
+   */
+  required: e.bool,
+  /**
+   * If `true`, the label is shrunk.
+   */
+  shrink: e.bool,
+  /**
+   * The size of the component.
+   * @default 'normal'
+   */
+  size: e.oneOfType([e.oneOf(["normal", "small"]), 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]),
+  /**
+   * The variant to use.
+   */
+  variant: e.oneOf(["filled", "outlined", "standard"])
+});
+function Oo(o) {
+  return re("MuiFormControl", o);
+}
+ee("MuiFormControl", ["root", "marginNone", "marginNormal", "marginDense", "fullWidth", "disabled"]);
+const To = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"], Ro = (o) => {
+  const {
+    classes: n,
+    margin: r,
+    fullWidth: t
+  } = o, s = {
+    root: ["root", r !== "none" && `margin${K(r)}`, t && "fullWidth"]
+  };
+  return ne(s, Oo, n);
+}, Eo = _("div", {
+  name: "MuiFormControl",
+  slot: "Root",
+  overridesResolver: ({
+    ownerState: o
+  }, n) => a({}, n.root, n[`margin${K(o.margin)}`], o.fullWidth && n.fullWidth)
+})(({
+  ownerState: o
+}) => a({
+  display: "inline-flex",
+  flexDirection: "column",
+  position: "relative",
+  // Reset fieldset default style.
+  minWidth: 0,
+  padding: 0,
+  margin: 0,
+  border: 0,
+  verticalAlign: "top"
+}, o.margin === "normal" && {
+  marginTop: 16,
+  marginBottom: 8
+}, o.margin === "dense" && {
+  marginTop: 8,
+  marginBottom: 4
+}, o.fullWidth && {
+  width: "100%"
+})), No = /* @__PURE__ */ i.forwardRef(function(n, r) {
+  const t = oe({
+    props: n,
+    name: "MuiFormControl"
+  }), {
+    children: s,
+    className: u,
+    color: h = "primary",
+    component: g = "div",
+    disabled: p = !1,
+    error: l = !1,
+    focused: b,
+    fullWidth: C = !1,
+    hiddenLabel: w = !1,
+    margin: T = "none",
+    required: E = !1,
+    size: k = "medium",
+    variant: F = "outlined"
+  } = t, B = G(t, To), S = a({}, t, {
+    color: h,
+    component: g,
+    disabled: p,
+    error: l,
+    fullWidth: C,
+    hiddenLabel: w,
+    margin: T,
+    required: E,
+    size: k,
+    variant: F
+  }), j = Ro(S), [W, d] = i.useState(() => {
+    let O = !1;
+    return s && i.Children.forEach(s, (v) => {
+      if (!ce(v, ["Input", "Select"]))
+        return;
+      const M = ce(v, ["Select"]) ? v.props.input : v;
+      M && ro(M.props) && (O = !0);
+    }), O;
+  }), [x, y] = i.useState(() => {
+    let O = !1;
+    return s && i.Children.forEach(s, (v) => {
+      ce(v, ["Input", "Select"]) && Me(v.props, !0) && (O = !0);
+    }), O;
+  }), [f, I] = i.useState(!1);
+  p && f && I(!1);
+  const L = b !== void 0 && !p ? b : f;
+  let A;
+  if (process.env.NODE_ENV !== "production") {
+    const O = i.useRef(!1);
+    A = () => (O.current && console.error(["MUI: There are multiple `InputBase` components inside a FormControl.", "This creates visual inconsistencies, only use one `InputBase`."].join(`
+`)), O.current = !0, () => {
+      O.current = !1;
+    });
+  }
+  const P = i.useMemo(() => ({
+    adornedStart: W,
+    setAdornedStart: d,
+    color: h,
+    disabled: p,
+    error: l,
+    filled: x,
+    focused: L,
+    fullWidth: C,
+    hiddenLabel: w,
+    size: k,
+    onBlur: () => {
+      I(!1);
+    },
+    onEmpty: () => {
+      y(!1);
+    },
+    onFilled: () => {
+      y(!0);
+    },
+    onFocus: () => {
+      I(!0);
+    },
+    registerEffect: A,
+    required: E,
+    variant: F
+  }), [W, h, p, l, x, L, C, w, A, E, k, F]);
+  return /* @__PURE__ */ N(Ee.Provider, {
+    value: P,
+    children: /* @__PURE__ */ N(Eo, a({
+      as: g,
+      ownerState: S,
+      className: V(j.root, u),
+      ref: r
+    }, B, {
+      children: s
+    }))
+  });
+});
+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 "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * 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/#adding-new-colors).
+   * @default 'primary'
+   */
+  color: e.oneOfType([e.oneOf(["primary", "secondary", "error", "info", "success", "warning"]), e.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   * @default false
+   */
+  error: e.bool,
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused: e.bool,
+  /**
+   * If `true`, the component will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: e.bool,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: e.bool,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: e.oneOf(["dense", "none", "normal"]),
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  required: e.bool,
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: e.oneOfType([e.oneOf(["medium", "small"]), 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]),
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: e.oneOf(["filled", "outlined", "standard"])
+});
+export {
+  No as F,
+  wo as I,
+  uo as a,
+  co as b,
+  ao as c,
+  fo as d,
+  Me as e,
+  me as f,
+  pe as i,
+  io as r
+};