@hai-dev/ui-kit 1.0.11 → 1.1.0

package/dist/components/code-input/code-input.js

@@ -0,0 +1,934 @@
+import { jsxs as te, jsx as D } from "react/jsx-runtime";
+import * as h from "react";
+import { useState as Ve, useRef as Pe, useEffect as he } from "react";
+import { c as We } from "../../index-B2JRaoNz.js";
+import { DEFAULT_CODE_LENGTH as je, NOT_CODE_REGEX as Ke, BACKSPACE_KEY as qe, ARROW_LEFT_KEY as Ue, ARROW_RIGHT_KEY as Ge, ENTER_KEY as $e, CODE_REGEX as Q, TAB_KEY as Ye } from "./constants.js";
+import { RU_LOCALE as Xe } from "../../constants.js";
+import { P as e, a as Ze, g as Je, c as ye, b as ne, l as Qe } from "../../createTheme-RRQUOQoF.js";
+import { g as et } from "../../index-BMkXyDFs.js";
+import { m as ve } from "../../memoTheme-5A7c_y33.js";
+import { u as tt, s as Ie, c as nt } from "../../chainPropTypes-C04Ex8aP.js";
+import { u as Te, a as ot, b as oe, r as rt, e as it } from "../../refType-CCKoQjVR.js";
+import { o as ge, i as be } from "../../isHostComponent-Dm_U9uOy.js";
+import { getCodeInputLabel as at } from "./utils/get-code-input-label.js";
+import { slideDownAnimation as ee } from "./utils/slide-down-animate.js";
+import '../../assets/code-input.css';function st(n, r = 166) {
+  let i;
+  function d(...s) {
+    const y = () => {
+      n.apply(this, s);
+    };
+    clearTimeout(i), i = setTimeout(y, r);
+  }
+  return d.clear = () => {
+    clearTimeout(i);
+  }, d;
+}
+function P(n) {
+  return parseInt(n, 10) || 0;
+}
+const lt = {
+  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 ut(n) {
+  for (const r in n)
+    return !1;
+  return !0;
+}
+function we(n) {
+  return ut(n) || n.outerHeightStyle === 0 && !n.overflowing;
+}
+const Oe = /* @__PURE__ */ h.forwardRef(function(r, i) {
+  const {
+    onChange: d,
+    maxRows: s,
+    minRows: y = 1,
+    style: E,
+    value: I,
+    ...z
+  } = r, {
+    current: b
+  } = h.useRef(I != null), g = h.useRef(null), p = Te(i, g), w = h.useRef(null), O = h.useRef(null), S = h.useCallback(() => {
+    const t = g.current, o = O.current;
+    if (!t || !o)
+      return;
+    const c = ge(t).getComputedStyle(t);
+    if (c.width === "0px")
+      return {
+        outerHeightStyle: 0,
+        overflowing: !1
+      };
+    o.style.width = c.width, o.value = t.value || r.placeholder || "x", o.value.slice(-1) === `
+` && (o.value += " ");
+    const C = c.boxSizing, T = P(c.paddingBottom) + P(c.paddingTop), W = P(c.borderBottomWidth) + P(c.borderTopWidth), A = o.scrollHeight;
+    o.value = "x";
+    const M = o.scrollHeight;
+    let R = A;
+    y && (R = Math.max(Number(y) * M, R)), s && (R = Math.min(Number(s) * M, R)), R = Math.max(R, M);
+    const H = R + (C === "border-box" ? T + W : 0), j = Math.abs(R - A) <= 1;
+    return {
+      outerHeightStyle: H,
+      overflowing: j
+    };
+  }, [s, y, r.placeholder]), N = ot(() => {
+    const t = g.current, o = S();
+    if (!t || !o || we(o))
+      return !1;
+    const u = o.outerHeightStyle;
+    return w.current != null && w.current !== u;
+  }), k = h.useCallback(() => {
+    const t = g.current, o = S();
+    if (!t || !o || we(o))
+      return;
+    const u = o.outerHeightStyle;
+    w.current !== u && (w.current = u, t.style.height = `${u}px`), t.style.overflow = o.overflowing ? "hidden" : "";
+  }, [S]), l = h.useRef(-1);
+  oe(() => {
+    const t = st(k), o = g?.current;
+    if (!o)
+      return;
+    const u = ge(o);
+    u.addEventListener("resize", t);
+    let c;
+    return typeof ResizeObserver < "u" && (c = new ResizeObserver(() => {
+      N() && (c.unobserve(o), cancelAnimationFrame(l.current), k(), l.current = requestAnimationFrame(() => {
+        c.observe(o);
+      }));
+    }), c.observe(o)), () => {
+      t.clear(), cancelAnimationFrame(l.current), u.removeEventListener("resize", t), c && c.disconnect();
+    };
+  }, [S, k, N]), oe(() => {
+    k();
+  });
+  const a = (t) => {
+    b || k();
+    const o = t.target, u = o.value.length, c = o.value.endsWith(`
+`), C = o.selectionStart === u;
+    c && C && o.setSelectionRange(u, u), d && d(t);
+  };
+  return /* @__PURE__ */ te(h.Fragment, {
+    children: [/* @__PURE__ */ D("textarea", {
+      value: I,
+      onChange: a,
+      ref: p,
+      rows: y,
+      style: E,
+      ...z
+    }), /* @__PURE__ */ D("textarea", {
+      "aria-hidden": !0,
+      className: r.className,
+      readOnly: !0,
+      ref: O,
+      tabIndex: -1,
+      style: {
+        ...lt.shadow,
+        ...E,
+        paddingTop: 0,
+        paddingBottom: 0
+      }
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (Oe.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm 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 ct({
+  props: n,
+  states: r,
+  muiFormControl: i
+}) {
+  return r.reduce((d, s) => (d[s] = n[s], i && typeof n[s] > "u" && (d[s] = i[s]), d), {});
+}
+const ie = /* @__PURE__ */ h.createContext(void 0);
+process.env.NODE_ENV !== "production" && (ie.displayName = "FormControlContext");
+function dt() {
+  return h.useContext(ie);
+}
+function Ce(n) {
+  return n != null && !(Array.isArray(n) && n.length === 0);
+}
+function pt(n, r = !1) {
+  return n && (Ce(n.value) && n.value !== "" || r && Ce(n.defaultValue) && n.defaultValue !== "");
+}
+function ft(n) {
+  return Je("MuiInputBase", n);
+}
+const re = Ze("MuiInputBase", ["root", "formControl", "focused", "disabled", "adornedStart", "adornedEnd", "error", "sizeSmall", "multiline", "colorSecondary", "fullWidth", "hiddenLabel", "readOnly", "input", "inputSizeSmall", "inputMultiline", "inputTypeSearch", "inputAdornedStart", "inputAdornedEnd", "inputHiddenLabel"]);
+var Ee;
+const mt = (n, r) => {
+  const {
+    ownerState: i
+  } = n;
+  return [r.root, i.formControl && r.formControl, i.startAdornment && r.adornedStart, i.endAdornment && r.adornedEnd, i.error && r.error, i.size === "small" && r.sizeSmall, i.multiline && r.multiline, i.color && r[`color${ne(i.color)}`], i.fullWidth && r.fullWidth, i.hiddenLabel && r.hiddenLabel];
+}, ht = (n, r) => {
+  const {
+    ownerState: i
+  } = n;
+  return [r.input, i.size === "small" && r.inputSizeSmall, i.multiline && r.inputMultiline, i.type === "search" && r.inputTypeSearch, i.startAdornment && r.inputAdornedStart, i.endAdornment && r.inputAdornedEnd, i.hiddenLabel && r.inputHiddenLabel];
+}, yt = (n) => {
+  const {
+    classes: r,
+    color: i,
+    disabled: d,
+    error: s,
+    endAdornment: y,
+    focused: E,
+    formControl: I,
+    fullWidth: z,
+    hiddenLabel: b,
+    multiline: g,
+    readOnly: p,
+    size: w,
+    startAdornment: O,
+    type: S
+  } = n, N = {
+    root: ["root", `color${ne(i)}`, d && "disabled", s && "error", z && "fullWidth", E && "focused", I && "formControl", w && w !== "medium" && `size${ne(w)}`, g && "multiline", O && "adornedStart", y && "adornedEnd", b && "hiddenLabel", p && "readOnly"],
+    input: ["input", d && "disabled", S === "search" && "inputTypeSearch", g && "inputMultiline", w === "small" && "inputSizeSmall", b && "inputHiddenLabel", O && "inputAdornedStart", y && "inputAdornedEnd", p && "readOnly"]
+  };
+  return nt(N, ft, r);
+}, gt = Ie("div", {
+  name: "MuiInputBase",
+  slot: "Root",
+  overridesResolver: mt
+})(ve(({
+  theme: n
+}) => ({
+  ...n.typography.body1,
+  color: (n.vars || n).palette.text.primary,
+  lineHeight: "1.4375em",
+  // 23px
+  boxSizing: "border-box",
+  // Prevent padding issue with fullWidth.
+  position: "relative",
+  cursor: "text",
+  display: "inline-flex",
+  alignItems: "center",
+  [`&.${re.disabled}`]: {
+    color: (n.vars || n).palette.text.disabled,
+    cursor: "default"
+  },
+  variants: [{
+    props: ({
+      ownerState: r
+    }) => r.multiline,
+    style: {
+      padding: "4px 0 5px"
+    }
+  }, {
+    props: ({
+      ownerState: r,
+      size: i
+    }) => r.multiline && i === "small",
+    style: {
+      paddingTop: 1
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.fullWidth,
+    style: {
+      width: "100%"
+    }
+  }]
+}))), bt = Ie("input", {
+  name: "MuiInputBase",
+  slot: "Input",
+  overridesResolver: ht
+})(ve(({
+  theme: n
+}) => {
+  const r = n.palette.mode === "light", i = {
+    color: "currentColor",
+    ...n.vars ? {
+      opacity: n.vars.opacity.inputPlaceholder
+    } : {
+      opacity: r ? 0.42 : 0.5
+    },
+    transition: n.transitions.create("opacity", {
+      duration: n.transitions.duration.shorter
+    })
+  }, d = {
+    opacity: "0 !important"
+  }, s = n.vars ? {
+    opacity: n.vars.opacity.inputPlaceholder
+  } : {
+    opacity: r ? 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": i,
+    "&::-moz-placeholder": i,
+    // Firefox 19+
+    "&::-ms-input-placeholder": i,
+    // 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] + .${re.formControl} &`]: {
+      "&::-webkit-input-placeholder": d,
+      "&::-moz-placeholder": d,
+      // Firefox 19+
+      "&::-ms-input-placeholder": d,
+      // Edge
+      "&:focus::-webkit-input-placeholder": s,
+      "&:focus::-moz-placeholder": s,
+      // Firefox 19+
+      "&:focus::-ms-input-placeholder": s
+      // Edge
+    },
+    [`&.${re.disabled}`]: {
+      opacity: 1,
+      // Reset iOS opacity
+      WebkitTextFillColor: (n.vars || n).palette.text.disabled
+      // Fix opacity Safari bug
+    },
+    variants: [{
+      props: ({
+        ownerState: y
+      }) => !y.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: y
+      }) => y.multiline,
+      style: {
+        height: "auto",
+        resize: "none",
+        padding: 0,
+        paddingTop: 0
+      }
+    }, {
+      props: {
+        type: "search"
+      },
+      style: {
+        MozAppearance: "textfield"
+        // Improve type search style.
+      }
+    }]
+  };
+})), Se = et({
+  "@keyframes mui-auto-fill": {
+    from: {
+      display: "block"
+    }
+  },
+  "@keyframes mui-auto-fill-cancel": {
+    from: {
+      display: "block"
+    }
+  }
+}), ke = /* @__PURE__ */ h.forwardRef(function(r, i) {
+  const d = tt({
+    props: r,
+    name: "MuiInputBase"
+  }), {
+    "aria-describedby": s,
+    autoComplete: y,
+    autoFocus: E,
+    className: I,
+    color: z,
+    components: b = {},
+    componentsProps: g = {},
+    defaultValue: p,
+    disabled: w,
+    disableInjectingGlobalStyles: O,
+    endAdornment: S,
+    error: N,
+    fullWidth: k = !1,
+    id: l,
+    inputComponent: a = "input",
+    inputProps: t = {},
+    inputRef: o,
+    margin: u,
+    maxRows: c,
+    minRows: C,
+    multiline: T = !1,
+    name: W,
+    onBlur: A,
+    onChange: M,
+    onClick: R,
+    onFocus: H,
+    onKeyDown: j,
+    onKeyUp: xe,
+    placeholder: Ae,
+    readOnly: K,
+    renderSuffix: ae,
+    rows: L,
+    size: Et,
+    slotProps: se = {},
+    slots: le = {},
+    startAdornment: _,
+    type: ue = "text",
+    value: Ne,
+    ...De
+  } = d, V = t.value != null ? t.value : Ne, {
+    current: q
+  } = h.useRef(V != null), F = h.useRef(), ze = h.useCallback((f) => {
+    process.env.NODE_ENV !== "production" && f && f.nodeName !== "INPUT" && !f.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(`
+`));
+  }, []), Me = Te(F, o, t.ref, ze), [U, G] = h.useState(!1), m = dt();
+  process.env.NODE_ENV !== "production" && h.useEffect(() => {
+    if (m)
+      return m.registerEffect();
+  }, [m]);
+  const v = ct({
+    props: d,
+    muiFormControl: m,
+    states: ["color", "disabled", "error", "hiddenLabel", "size", "required", "filled"]
+  });
+  v.focused = m ? m.focused : U, h.useEffect(() => {
+    !m && w && U && (G(!1), A && A());
+  }, [m, w, U, A]);
+  const $ = m && m.onFilled, Y = m && m.onEmpty, B = h.useCallback((f) => {
+    pt(f) ? $ && $() : Y && Y();
+  }, [$, Y]);
+  oe(() => {
+    q && B({
+      value: V
+    });
+  }, [V, B, q]);
+  const Fe = (f) => {
+    H && H(f), t.onFocus && t.onFocus(f), m && m.onFocus ? m.onFocus(f) : G(!0);
+  }, _e = (f) => {
+    A && A(f), t.onBlur && t.onBlur(f), m && m.onBlur ? m.onBlur(f) : G(!1);
+  }, Be = (f, ...fe) => {
+    if (!q) {
+      const me = f.target || F.current;
+      if (me == 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." : Qe(1));
+      B({
+        value: me.value
+      });
+    }
+    t.onChange && t.onChange(f, ...fe), M && M(f, ...fe);
+  };
+  h.useEffect(() => {
+    B(F.current);
+  }, []);
+  const He = (f) => {
+    F.current && f.currentTarget === f.target && F.current.focus(), R && R(f);
+  };
+  let X = a, x = t;
+  T && X === "input" && (L ? (process.env.NODE_ENV !== "production" && (C || c) && console.warn("MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set."), x = {
+    type: void 0,
+    minRows: L,
+    maxRows: L,
+    ...x
+  }) : x = {
+    type: void 0,
+    maxRows: c,
+    minRows: C,
+    ...x
+  }, X = Oe);
+  const Le = (f) => {
+    B(f.animationName === "mui-auto-fill-cancel" ? F.current : {
+      value: "x"
+    });
+  };
+  h.useEffect(() => {
+    m && m.setAdornedStart(!!_);
+  }, [m, _]);
+  const Z = {
+    ...d,
+    color: v.color || "primary",
+    disabled: v.disabled,
+    endAdornment: S,
+    error: v.error,
+    focused: v.focused,
+    formControl: m,
+    fullWidth: k,
+    hiddenLabel: v.hiddenLabel,
+    multiline: T,
+    size: v.size,
+    startAdornment: _,
+    type: ue
+  }, ce = yt(Z), de = le.root || b.Root || gt, J = se.root || g.root || {}, pe = le.input || b.Input || bt;
+  return x = {
+    ...x,
+    ...se.input ?? g.input
+  }, /* @__PURE__ */ te(h.Fragment, {
+    children: [!O && typeof Se == "function" && // For Emotion/Styled-components, InputGlobalStyles will be a function
+    // For Pigment CSS, this has no effect because the InputGlobalStyles will be null.
+    (Ee || (Ee = /* @__PURE__ */ D(Se, {}))), /* @__PURE__ */ te(de, {
+      ...J,
+      ref: i,
+      onClick: He,
+      ...De,
+      ...!be(de) && {
+        ownerState: {
+          ...Z,
+          ...J.ownerState
+        }
+      },
+      className: ye(ce.root, J.className, I, K && "MuiInputBase-readOnly"),
+      children: [_, /* @__PURE__ */ D(ie.Provider, {
+        value: null,
+        children: /* @__PURE__ */ D(pe, {
+          "aria-invalid": v.error,
+          "aria-describedby": s,
+          autoComplete: y,
+          autoFocus: E,
+          defaultValue: p,
+          disabled: v.disabled,
+          id: l,
+          onAnimationStart: Le,
+          name: W,
+          placeholder: Ae,
+          readOnly: K,
+          required: v.required,
+          rows: L,
+          value: V,
+          onKeyDown: j,
+          onKeyUp: xe,
+          type: ue,
+          ...x,
+          ...!be(pe) && {
+            as: X,
+            ownerState: {
+              ...Z,
+              ...x.ownerState
+            }
+          },
+          ref: Me,
+          className: ye(ce.input, x.className, K && "MuiInputBase-readOnly"),
+          onBlur: _e,
+          onChange: Be,
+          onFocus: Fe
+        })
+      }), S, ae ? ae({
+        ...v,
+        startAdornment: _
+      }) : null]
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (ke.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.
+   */
+  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", "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.
+   */
+  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: it,
+  /**
+   * [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: rt,
+  /**
+   * 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,
+  /**
+   * 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/Reference/Elements/input#input_types).
+   * @default 'text'
+   */
+  type: e.string,
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: e.any
+});
+const wt = "_codeInput_4y25h_1", Ct = "_codeInputItem_4y25h_5", Re = {
+  codeInput: wt,
+  codeInputItem: Ct
+}, Ft = (n) => {
+  const {
+    className: r,
+    autoFocus: i,
+    value: d = "",
+    length: s = je,
+    disabled: y,
+    onChange: E,
+    onComplete: I,
+    locale: z = Xe
+  } = n, [b, g] = Ve(
+    d.split("").slice(0, s)
+  ), p = Pe([]);
+  he(() => {
+    g((l) => {
+      if (d === l.join("")) return l;
+      const a = d.split("").slice(0, s);
+      for (; a.length < s; )
+        a.push("");
+      return a;
+    });
+  }, [d, s]), he(() => {
+    i && p.current[0] && !y && p.current[0]?.focus();
+  }, [i, y]);
+  const w = (l, a) => {
+    const t = l.target.value;
+    if (t && !Q.test(t))
+      return;
+    const o = t.slice(-1), u = [...b];
+    u[a] = o, g(u), ee(p.current[a]);
+    const c = u.join("");
+    E?.(c), o && a < s - 1 && queueMicrotask(() => p.current[a + 1]?.focus()), c.length === s && !o.includes("") && I?.(c);
+  }, O = (l, a) => {
+    if (l.key === qe) {
+      if (!b[a] && a > 0) {
+        const t = [...b];
+        t[a - 1] = "", g(t), queueMicrotask(() => p.current[a - 1]?.focus()), E?.(t.join(""));
+      } else if (b[a]) {
+        const t = [...b];
+        t[a] = "", g(t), E?.(t.join(""));
+      }
+      l.preventDefault();
+      return;
+    }
+    if (l.key === Ue && a > 0) {
+      queueMicrotask(() => p.current[a - 1]?.focus()), l.preventDefault();
+      return;
+    }
+    if (l.key === Ge && a < s - 1) {
+      queueMicrotask(() => p.current[a + 1]?.focus()), l.preventDefault();
+      return;
+    }
+    if (l.key === $e) {
+      const t = b.findIndex((o) => !o);
+      queueMicrotask(t !== -1 ? () => p.current[t]?.focus() : () => p.current[a - 1]?.focus()), l.preventDefault();
+    }
+    if (Q.test(l.key)) {
+      l.preventDefault();
+      const t = l.key, o = [...b];
+      o[a] = t, g(o), ee(p.current[a]);
+      const u = o.join("");
+      E?.(u), a < s - 1 && queueMicrotask(() => p.current[a + 1]?.focus()), u.length === s && !t.includes("") && I?.(u);
+      return;
+    }
+    !l.ctrlKey && !l.metaKey && l.key !== Ye && !Q.test(l.key) && l.preventDefault();
+  }, S = (l) => {
+    l.preventDefault();
+    const t = l.clipboardData.getData("text").trim().replace(Ke, "").slice(0, s);
+    if (!t)
+      return;
+    const o = [...b];
+    t.split("").forEach((C, T) => {
+      T < s && (o[T] = C, ee(p.current[T]));
+    });
+    for (let C = t.length; C < s; C++)
+      o[C] = "";
+    g(o);
+    const u = o.join("");
+    E?.(u);
+    const c = o.findIndex(
+      (C, T) => T >= t.length && !C
+    );
+    queueMicrotask(c !== -1 ? () => p.current[c]?.focus() : () => p.current[Math.min(t.length, s - 1)]?.focus()), u.length === s && !o.includes("") && I?.(u);
+  }, N = (l) => {
+    y || p.current[l]?.select();
+  }, k = (l) => {
+    y || p.current[l]?.select();
+  };
+  return /* @__PURE__ */ D("div", { className: We(Re.codeInput, r), children: Array.from({ length: s }, (l, a) => /* @__PURE__ */ D(
+    ke,
+    {
+      className: Re.codeInputItem,
+      inputRef: (t) => {
+        p.current[a] = t;
+      },
+      inputProps: {
+        pattern: "[0-9]*",
+        maxLength: 1
+      },
+      type: "text",
+      inputMode: "numeric",
+      value: b[a] || "",
+      disabled: y,
+      onSelect: () => k(a),
+      onFocus: () => N(a),
+      onChange: (t) => w(t, a),
+      onKeyDown: (t) => O(t, a),
+      onPaste: S,
+      "aria-label": at(a, s, z)
+    },
+    a
+  )) });
+};
+export {
+  Ft as CodeInput
+};