@cgi-learning-hub/ui/dist/TextField-BenBw4oE.js

@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features

import * as V from "react";
import { P as e } from "./index-Sy88PpwE.js";
import { F as B, G as D, H as _, K as W } from "./identifier-PWESmBq6.js";
import { u as c } from "./useSlot-BzdKwDQ5.js";
import { jsx as m, jsxs as Fe } from "react/jsx-runtime";
import { u as k, s as A, c as G } from "./DefaultPropsProvider-DqazQPtr.js";
import { u as ge } from "./useId-CK6Kn3Tn.js";
import { O as Oe, F as ve, I as Ie, a as we, S as Ce } from "./Select-CpNF3a57.js";
import { f as Se } from "./formControlState-vgaj2ksH.js";
import { u as He } from "./useFormControl-CatNKXAi.js";
import { m as Re } from "./memoTheme-DAFDflPY.js";
import { F as je } from "./FormLabel-B3WAnPGP.js";
import { r as Le } from "./refType-Dp7CJc86.js";
function ze(o) {
  return D("MuiFormHelperText", o);
}
const U = B("MuiFormHelperText", ["root", "error", "disabled", "sizeSmall", "sizeMedium", "contained", "focused", "filled", "required"]);
var $;
const Ne = (o) => {
  const {
    classes: t,
    contained: r,
    size: s,
    disabled: d,
    error: u,
    filled: l,
    focused: h,
    required: f
  } = o, P = {
    root: ["root", d && "disabled", u && "error", s && `size${W(s)}`, r && "contained", h && "focused", l && "filled", f && "required"]
  };
  return G(P, ze, t);
}, qe = A("p", {
  name: "MuiFormHelperText",
  slot: "Root",
  overridesResolver: (o, t) => {
    const {
      ownerState: r
    } = o;
    return [t.root, r.size && t[`size${W(r.size)}`], r.contained && t.contained, r.filled && t.filled];
  }
})(Re(({
  theme: o
}) => ({
  color: (o.vars || o).palette.text.secondary,
  ...o.typography.caption,
  textAlign: "left",
  marginTop: 3,
  marginRight: 0,
  marginBottom: 0,
  marginLeft: 0,
  [`&.${U.disabled}`]: {
    color: (o.vars || o).palette.text.disabled
  },
  [`&.${U.error}`]: {
    color: (o.vars || o).palette.error.main
  },
  variants: [{
    props: {
      size: "small"
    },
    style: {
      marginTop: 4
    }
  }, {
    props: ({
      ownerState: t
    }) => t.contained,
    style: {
      marginLeft: 14,
      marginRight: 14
    }
  }]
}))), K = /* @__PURE__ */ V.forwardRef(function(t, r) {
  const s = k({
    props: t,
    name: "MuiFormHelperText"
  }), {
    children: d,
    className: u,
    component: l = "p",
    disabled: h,
    error: f,
    filled: P,
    focused: v,
    margin: I,
    required: j,
    variant: F,
    ...b
  } = s, w = He(), n = Se({
    props: s,
    muiFormControl: w,
    states: ["variant", "size", "disabled", "error", "filled", "focused", "required"]
  }), T = {
    ...s,
    component: l,
    contained: n.variant === "filled" || n.variant === "outlined",
    variant: n.variant,
    size: n.size,
    disabled: n.disabled,
    error: n.error,
    filled: n.filled,
    focused: n.focused,
    required: n.required
  };
  delete T.ownerState;
  const C = Ne(T);
  return /* @__PURE__ */ m(qe, {
    as: l,
    className: _(C.root, u),
    ref: r,
    ...b,
    ownerState: T,
    children: d === " " ? (
      // notranslate needed while Google Translate will not fix zero-width space issue
      $ || ($ = /* @__PURE__ */ m("span", {
        className: "notranslate",
        "aria-hidden": !0,
        children: "​"
      }))
    ) : d
  });
});
process.env.NODE_ENV !== "production" && (K.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The content of the component.
   *
   * If `' '` is provided, the component reserves one line height for displaying a future message.
   */
  children: e.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: 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 helper text should be displayed in a disabled state.
   */
  disabled: e.bool,
  /**
   * If `true`, helper text should be displayed in an error state.
   */
  error: e.bool,
  /**
   * If `true`, the helper text should use filled classes key.
   */
  filled: e.bool,
  /**
   * If `true`, the helper text should use focused classes key.
   */
  focused: e.bool,
  /**
   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
   * FormControl.
   */
  margin: e.oneOf(["dense"]),
  /**
   * If `true`, the helper text should use required classes key.
   */
  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]),
  /**
   * The variant to use.
   */
  variant: e.oneOfType([e.oneOf(["filled", "outlined", "standard"]), e.string])
});
function Me(o) {
  return D("MuiTextField", o);
}
const Ze = B("MuiTextField", ["root"]), Ee = {
  standard: Ie,
  filled: ve,
  outlined: Oe
}, Ue = (o) => {
  const {
    classes: t
  } = o;
  return G({
    root: ["root"]
  }, Me, t);
}, $e = A(je, {
  name: "MuiTextField",
  slot: "Root"
})({}), Ve = /* @__PURE__ */ V.forwardRef(function(t, r) {
  const s = k({
    props: t,
    name: "MuiTextField"
  }), {
    autoComplete: d,
    autoFocus: u = !1,
    children: l,
    className: h,
    color: f = "primary",
    defaultValue: P,
    disabled: v = !1,
    error: I = !1,
    FormHelperTextProps: j,
    fullWidth: F = !1,
    helperText: b,
    id: w,
    InputLabelProps: n,
    inputProps: T,
    InputProps: C,
    inputRef: J,
    label: y,
    maxRows: Q,
    minRows: X,
    multiline: L = !1,
    name: Y,
    onBlur: Z,
    onChange: ee,
    onFocus: oe,
    placeholder: te,
    required: z = !1,
    rows: re,
    select: g = !1,
    SelectProps: S,
    slots: N = {},
    slotProps: ne = {},
    type: se,
    value: q,
    variant: O = "outlined",
    ...le
  } = s, i = {
    ...s,
    autoFocus: u,
    color: f,
    disabled: v,
    error: I,
    fullWidth: F,
    multiline: L,
    required: z,
    select: g,
    variant: O
  }, ie = Ue(i);
  process.env.NODE_ENV !== "production" && g && !l && console.error("MUI: `children` must be passed when using the `TextField` component with `select`.");
  const a = ge(w), H = b && a ? `${a}-helper-text` : void 0, M = y && a ? `${a}-label` : void 0, ae = Ee[O], p = {
    slots: N,
    slotProps: {
      input: C,
      inputLabel: n,
      htmlInput: T,
      formHelperText: j,
      select: S,
      ...ne
    }
  }, x = {}, R = p.slotProps.inputLabel;
  O === "outlined" && (R && typeof R.shrink < "u" && (x.notched = R.shrink), x.label = y), g && ((!S || !S.native) && (x.id = void 0), x["aria-describedby"] = void 0);
  const [pe, de] = c("root", {
    elementType: $e,
    shouldForwardComponentProp: !0,
    externalForwardedProps: {
      ...p,
      ...le
    },
    ownerState: i,
    className: _(ie.root, h),
    ref: r,
    additionalProps: {
      disabled: v,
      error: I,
      fullWidth: F,
      required: z,
      color: f,
      variant: O
    }
  }), [ue, ce] = c("input", {
    elementType: ae,
    externalForwardedProps: p,
    additionalProps: x,
    ownerState: i
  }), [me, fe] = c("inputLabel", {
    elementType: we,
    externalForwardedProps: p,
    ownerState: i
  }), [be, Te] = c("htmlInput", {
    elementType: "input",
    externalForwardedProps: p,
    ownerState: i
  }), [ye, xe] = c("formHelperText", {
    elementType: K,
    externalForwardedProps: p,
    ownerState: i
  }), [he, Pe] = c("select", {
    elementType: Ce,
    externalForwardedProps: p,
    ownerState: i
  }), E = /* @__PURE__ */ m(ue, {
    "aria-describedby": H,
    autoComplete: d,
    autoFocus: u,
    defaultValue: P,
    fullWidth: F,
    multiline: L,
    name: Y,
    rows: re,
    maxRows: Q,
    minRows: X,
    type: se,
    value: q,
    id: a,
    inputRef: J,
    onBlur: Z,
    onChange: ee,
    onFocus: oe,
    placeholder: te,
    inputProps: Te,
    slots: {
      input: N.htmlInput ? be : void 0
    },
    ...ce
  });
  return /* @__PURE__ */ Fe(pe, {
    ...de,
    children: [y != null && y !== "" && /* @__PURE__ */ m(me, {
      htmlFor: a,
      id: M,
      ...fe,
      children: y
    }), g ? /* @__PURE__ */ m(he, {
      "aria-describedby": H,
      id: a,
      labelId: M,
      value: q,
      input: E,
      ...Pe,
      children: l
    }) : E, b && /* @__PURE__ */ m(ye, {
      id: H,
      ...xe,
      children: b
    })]
  });
});
process.env.NODE_ENV !== "production" && (Ve.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.
   * @default false
   */
  autoFocus: e.bool,
  /**
   * @ignore
   */
  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/#custom-colors).
   * @default 'primary'
   */
  color: e.oneOfType([e.oneOf(["primary", "secondary", "error", "info", "success", "warning"]), e.string]),
  /**
   * The default value. Use when the component is not controlled.
   */
  defaultValue: e.any,
  /**
   * If `true`, the component is disabled.
   * @default false
   */
  disabled: e.bool,
  /**
   * If `true`, the label is displayed in an error state.
   * @default false
   */
  error: e.bool,
  /**
   * Props applied to the [`FormHelperText`](https://mui.com/material-ui/api/form-helper-text/) element.
   * @deprecated Use `slotProps.formHelperText` 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.
   */
  FormHelperTextProps: e.object,
  /**
   * If `true`, the input will take up the full width of its container.
   * @default false
   */
  fullWidth: e.bool,
  /**
   * The helper text content.
   */
  helperText: e.node,
  /**
   * The id of the `input` element.
   * Use this prop to make `label` and `helperText` accessible for screen readers.
   */
  id: e.string,
  /**
   * Props applied to the [`InputLabel`](https://mui.com/material-ui/api/input-label/) element.
   * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
   * @deprecated Use `slotProps.inputLabel` 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.
   */
  InputLabelProps: e.object,
  /**
   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
   * @deprecated Use `slotProps.htmlInput` 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.
   */
  inputProps: e.object,
  /**
   * Props applied to the Input element.
   * It will be a [`FilledInput`](https://mui.com/material-ui/api/filled-input/),
   * [`OutlinedInput`](https://mui.com/material-ui/api/outlined-input/) or [`Input`](https://mui.com/material-ui/api/input/)
   * component depending on the `variant` prop value.
   * @deprecated Use `slotProps.input` 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.
   */
  InputProps: e.object,
  /**
   * Pass a ref to the `input` element.
   */
  inputRef: Le,
  /**
   * The label content.
   */
  label: e.node,
  /**
   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
   * @default 'none'
   */
  margin: e.oneOf(["dense", "none", "normal"]),
  /**
   * 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 `textarea` element is rendered instead of an input.
   * @default false
   */
  multiline: e.bool,
  /**
   * Name attribute of the `input` element.
   */
  name: e.string,
  /**
   * @ignore
   */
  onBlur: e.func,
  /**
   * Callback fired when the value is changed.
   *
   * @param {object} event The event source of the callback.
   * You can pull out the new value by accessing `event.target.value` (string).
   */
  onChange: e.func,
  /**
   * @ignore
   */
  onFocus: e.func,
  /**
   * The short hint displayed in the `input` before the user enters a value.
   */
  placeholder: e.string,
  /**
   * If `true`, the label is displayed as required and the `input` element is required.
   * @default false
   */
  required: e.bool,
  /**
   * Number of rows to display when multiline option is set to true.
   */
  rows: e.oneOfType([e.number, e.string]),
  /**
   * Render a [`Select`](https://mui.com/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
   * If this option is set you must pass the options of the select as children.
   * @default false
   */
  select: e.bool,
  /**
   * Props applied to the [`Select`](https://mui.com/material-ui/api/select/) element.
   * @deprecated Use `slotProps.select` 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.
   */
  SelectProps: e.object,
  /**
   * The size of the component.
   * @default 'medium'
   */
  size: e.oneOfType([e.oneOf(["medium", "small"]), e.string]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: e.shape({
    formHelperText: e.oneOfType([e.func, e.object]),
    htmlInput: e.oneOfType([e.func, e.object]),
    input: e.oneOfType([e.func, e.object]),
    inputLabel: e.oneOfType([e.func, e.object]),
    select: e.oneOfType([e.func, e.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: e.shape({
    formHelperText: e.elementType,
    htmlInput: e.elementType,
    input: e.elementType,
    inputLabel: e.elementType,
    root: e.elementType,
    select: e.elementType
  }),
  /**
   * 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).
   */
  type: e.string,
  /**
   * The value of the `input` element, required for a controlled component.
   */
  value: e.any,
  /**
   * The variant to use.
   * @default 'outlined'
   */
  variant: e.oneOf(["filled", "outlined", "standard"])
});
export {
  K as F,
  Ve as T,
  Me as a,
  U as f,
  ze as g,
  Ze as t
};