@ck-ui/component-library 0.1.5 → 0.3.0

package/dist/components/TextField/index.js

@@ -0,0 +1,1122 @@
+import { jsx as a, jsxs as $, Fragment as qe } from "react/jsx-runtime";
+import { CKButton as Fe } from "../CKButton/index.js";
+import * as V from "react";
+import { q as ne, r as le, O as D, d as K, g as X, L as M, y as G, P as e, H as $e, X as N } from "../../useSlot-ylt7_lTY.js";
+import { c as J } from "../../clsx-OuTLNxxd.js";
+import { u as Ce, r as Ne } from "../../Grow-D08Iq1uH.js";
+import { u as ae, h as Se, S as ke, O as Re, F as ze, I as Ie, a as Le } from "../../Select-Cw96VEHD.js";
+import { b as Pe } from "../../contains-kLLEGdNH.js";
+import '../../assets/index-DewFIgpp.css';function Me(o) {
+  return ne("MuiFormHelperText", o);
+}
+const ce = le("MuiFormHelperText", ["root", "error", "disabled", "sizeSmall", "sizeMedium", "contained", "focused", "filled", "required"]);
+var de;
+const je = (o) => {
+  const {
+    classes: r,
+    contained: t,
+    size: s,
+    disabled: d,
+    error: n,
+    filled: p,
+    focused: f,
+    required: m
+  } = o, x = {
+    root: ["root", d && "disabled", n && "error", s && `size${K(s)}`, t && "contained", f && "focused", p && "filled", m && "required"]
+  };
+  return X(x, Me, r);
+}, He = M("p", {
+  name: "MuiFormHelperText",
+  slot: "Root",
+  overridesResolver: (o, r) => {
+    const {
+      ownerState: t
+    } = o;
+    return [r.root, t.size && r[`size${K(t.size)}`], t.contained && r.contained, t.filled && r.filled];
+  }
+})(G(({
+  theme: o
+}) => ({
+  color: (o.vars || o).palette.text.secondary,
+  ...o.typography.caption,
+  textAlign: "left",
+  marginTop: 3,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  [`&.${ce.disabled}`]: {
+    color: (o.vars || o).palette.text.disabled
+  },
+  [`&.${ce.error}`]: {
+    color: (o.vars || o).palette.error.main
+  },
+  variants: [{
+    props: {
+      size: "small"
+    },
+    style: {
+      marginTop: 4
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.contained,
+    style: {
+      marginLeft: 14,
+      marginRight: 14
+    }
+  }]
+}))), pe = /* @__PURE__ */ V.forwardRef(function(r, t) {
+  const s = D({
+    props: r,
+    name: "MuiFormHelperText"
+  }), {
+    children: d,
+    className: n,
+    component: p = "p",
+    disabled: f,
+    error: m,
+    filled: x,
+    focused: _,
+    margin: b,
+    required: u,
+    variant: g,
+    ...l
+  } = s, [i] = ae({
+    props: s,
+    states: ["variant", "size", "disabled", "error", "filled", "focused", "required"]
+  }), h = {
+    ...s,
+    component: p,
+    contained: i.variant === "filled" || i.variant === "outlined",
+    variant: i.variant,
+    size: i.size,
+    disabled: i.disabled,
+    error: i.error,
+    filled: i.filled,
+    focused: i.focused,
+    required: i.required
+  };
+  delete h.ownerState;
+  const O = je(h);
+  return /* @__PURE__ */ a(He, {
+    as: p,
+    className: J(O.root, n),
+    ref: t,
+    ...l,
+    ownerState: h,
+    children: d === " " ? (
+      // notranslate needed while Google Translate will not fix zero-width space issue
+      de || (de = /* @__PURE__ */ a("span", {
+        className: "notranslate",
+        "aria-hidden": !0,
+        children: "​"
+      }))
+    ) : d
+  });
+});
+process.env.NODE_ENV !== "production" && (pe.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 Ee(o) {
+  return ne("MuiFormLabel", o);
+}
+const P = le("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]), Ue = (o) => {
+  const {
+    classes: r,
+    color: t,
+    focused: s,
+    disabled: d,
+    error: n,
+    filled: p,
+    required: f
+  } = o, m = {
+    root: ["root", `color${K(t)}`, d && "disabled", n && "error", p && "filled", s && "focused", f && "required"],
+    asterisk: ["asterisk", n && "error"]
+  };
+  return X(m, Ee, r);
+}, We = M("label", {
+  name: "MuiFormLabel",
+  slot: "Root",
+  overridesResolver: (o, r) => {
+    const {
+      ownerState: t
+    } = o;
+    return [r.root, t.color === "secondary" && r.colorSecondary, t.filled && r.filled];
+  }
+})(G(({
+  theme: o
+}) => ({
+  color: (o.vars || o).palette.text.secondary,
+  ...o.typography.body1,
+  lineHeight: "1.4375em",
+  padding: 0,
+  position: "relative",
+  variants: [...Object.entries(o.palette).filter(Pe()).map(([r]) => ({
+    props: {
+      color: r
+    },
+    style: {
+      [`&.${P.focused}`]: {
+        color: (o.vars || o).palette[r].main
+      }
+    }
+  })), {
+    props: {},
+    style: {
+      [`&.${P.disabled}`]: {
+        color: (o.vars || o).palette.text.disabled
+      },
+      [`&.${P.error}`]: {
+        color: (o.vars || o).palette.error.main
+      }
+    }
+  }]
+}))), Ae = M("span", {
+  name: "MuiFormLabel",
+  slot: "Asterisk"
+})(G(({
+  theme: o
+}) => ({
+  [`&.${P.error}`]: {
+    color: (o.vars || o).palette.error.main
+  }
+}))), ue = /* @__PURE__ */ V.forwardRef(function(r, t) {
+  const s = D({
+    props: r,
+    name: "MuiFormLabel"
+  }), {
+    children: d,
+    className: n,
+    color: p,
+    component: f = "label",
+    disabled: m,
+    error: x,
+    filled: _,
+    focused: b,
+    required: u,
+    ...g
+  } = s, [l] = ae({
+    props: s,
+    states: ["color", "required", "focused", "disabled", "error", "filled"]
+  }), i = {
+    ...s,
+    color: l.color || "primary",
+    component: f,
+    disabled: l.disabled,
+    error: l.error,
+    filled: l.filled,
+    focused: l.focused,
+    required: l.required
+  }, h = Ue(i);
+  return /* @__PURE__ */ $(We, {
+    as: f,
+    ownerState: i,
+    className: J(h.root, n),
+    ref: t,
+    ...g,
+    children: [d, l.required && /* @__PURE__ */ $(Ae, {
+      ownerState: i,
+      "aria-hidden": !0,
+      className: h.asterisk,
+      children: [" ", "*"]
+    })]
+  });
+});
+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 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/#custom-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])
+});
+const Be = (o) => {
+  const {
+    classes: r,
+    formControl: t,
+    size: s,
+    shrink: d,
+    disableAnimation: n,
+    variant: p,
+    required: f
+  } = o, m = {
+    root: ["root", t && "formControl", !n && "animated", d && "shrink", s && s !== "medium" && `size${K(s)}`, p],
+    asterisk: [f && "asterisk"]
+  }, x = X(m, Se, r);
+  return {
+    ...r,
+    // forward the focused, disabled, etc. classes to the FormLabel
+    ...x
+  };
+}, Ve = M(ue, {
+  shouldForwardProp: (o) => $e(o) || o === "classes",
+  name: "MuiInputLabel",
+  slot: "Root",
+  overridesResolver: (o, r) => {
+    const {
+      ownerState: t
+    } = o;
+    return [{
+      [`& .${P.asterisk}`]: r.asterisk
+    }, r.root, t.formControl && r.formControl, t.size === "small" && r.sizeSmall, t.shrink && r.shrink, !t.disableAnimation && r.animated, t.focused && r.focused, r[t.variant]];
+  }
+})(G(({
+  theme: o
+}) => ({
+  display: "block",
+  transformOrigin: "top left",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "100%",
+  variants: [{
+    props: ({
+      ownerState: r
+    }) => r.formControl,
+    style: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      // slight alteration to spec spacing to match visual spec result
+      transform: "translate(0, 20px) scale(1)"
+    }
+  }, {
+    props: {
+      size: "small"
+    },
+    style: {
+      // Compensation for the `Input` small size style.
+      transform: "translate(0, 17px) scale(1)"
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.shrink,
+    style: {
+      transform: "translate(0, -1.5px) scale(0.75)",
+      transformOrigin: "top left",
+      maxWidth: "133%"
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => !r.disableAnimation,
+    style: {
+      transition: o.transitions.create(["color", "transform", "max-width"], {
+        duration: o.transitions.duration.shorter,
+        easing: o.transitions.easing.easeOut
+      })
+    }
+  }, {
+    props: {
+      variant: "filled"
+    },
+    style: {
+      // 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)"
+    }
+  }, {
+    props: {
+      variant: "filled",
+      size: "small"
+    },
+    style: {
+      transform: "translate(12px, 13px) scale(1)"
+    }
+  }, {
+    props: ({
+      variant: r,
+      ownerState: t
+    }) => r === "filled" && t.shrink,
+    style: {
+      userSelect: "none",
+      pointerEvents: "auto",
+      transform: "translate(12px, 7px) scale(0.75)",
+      maxWidth: "calc(133% - 24px)"
+    }
+  }, {
+    props: ({
+      variant: r,
+      ownerState: t,
+      size: s
+    }) => r === "filled" && t.shrink && s === "small",
+    style: {
+      transform: "translate(12px, 4px) scale(0.75)"
+    }
+  }, {
+    props: {
+      variant: "outlined"
+    },
+    style: {
+      // see comment above on filled.zIndex
+      zIndex: 1,
+      pointerEvents: "none",
+      transform: "translate(14px, 16px) scale(1)",
+      maxWidth: "calc(100% - 24px)"
+    }
+  }, {
+    props: {
+      variant: "outlined",
+      size: "small"
+    },
+    style: {
+      transform: "translate(14px, 9px) scale(1)"
+    }
+  }, {
+    props: ({
+      variant: r,
+      ownerState: t
+    }) => r === "outlined" && t.shrink,
+    style: {
+      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)"
+    }
+  }]
+}))), fe = /* @__PURE__ */ V.forwardRef(function(r, t) {
+  const s = D({
+    name: "MuiInputLabel",
+    props: r
+  }), {
+    disableAnimation: d = !1,
+    margin: n,
+    shrink: p,
+    variant: f,
+    className: m,
+    ...x
+  } = s, [_, b] = ae({
+    props: s,
+    states: ["size", "variant", "required", "focused"]
+  });
+  let u = p;
+  typeof u > "u" && b && (u = b.filled || b.focused || b.adornedStart);
+  const g = {
+    ...s,
+    disableAnimation: d,
+    formControl: b,
+    shrink: u,
+    size: _.size,
+    variant: _.variant,
+    required: _.required,
+    focused: _.focused
+  }, l = Be(g);
+  return /* @__PURE__ */ a(Ve, {
+    "data-shrink": u,
+    ref: t,
+    className: J(l.root, m),
+    ...x,
+    ownerState: g,
+    classes: l
+  });
+});
+process.env.NODE_ENV !== "production" && (fe.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.
+   */
+  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).
+   */
+  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 '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.
+   */
+  variant: e.oneOf(["filled", "outlined", "standard"])
+});
+function De(o) {
+  return ne("MuiTextField", o);
+}
+le("MuiTextField", ["root"]);
+const Ke = {
+  standard: Ie,
+  filled: ze,
+  outlined: Re
+}, Xe = (o) => {
+  const {
+    classes: r
+  } = o;
+  return X({
+    root: ["root"]
+  }, De, r);
+}, Ge = M(Le, {
+  name: "MuiTextField",
+  slot: "Root"
+})({}), me = /* @__PURE__ */ V.forwardRef(function(r, t) {
+  const s = D({
+    props: r,
+    name: "MuiTextField"
+  }), {
+    autoComplete: d,
+    autoFocus: n = !1,
+    children: p,
+    className: f,
+    color: m = "primary",
+    defaultValue: x,
+    disabled: _ = !1,
+    error: b = !1,
+    fullWidth: u = !1,
+    helperText: g,
+    id: l,
+    inputRef: i,
+    label: h,
+    maxRows: O,
+    minRows: S,
+    multiline: j = !1,
+    name: q,
+    onBlur: H,
+    onChange: Q,
+    onFocus: Y,
+    placeholder: k,
+    required: E = !1,
+    rows: R,
+    select: T = !1,
+    slots: U = {},
+    slotProps: z = {},
+    type: Z,
+    value: W,
+    variant: C = "outlined",
+    ...ee
+  } = s, y = {
+    ...s,
+    autoFocus: n,
+    color: m,
+    disabled: _,
+    error: b,
+    fullWidth: u,
+    multiline: j,
+    required: E,
+    select: T,
+    variant: C
+  }, oe = Xe(y);
+  process.env.NODE_ENV !== "production" && T && !p && console.error("MUI: `children` must be passed when using the `TextField` component with `select`.");
+  const v = Ce(l), I = g && v ? `${v}-helper-text` : void 0, A = h && v ? `${v}-label` : void 0, re = Ke[C], w = {
+    slots: U,
+    slotProps: z
+  }, [te, B] = N("select", {
+    elementType: ke,
+    externalForwardedProps: w,
+    ownerState: y
+  }), L = T && B.native, F = {}, se = w.slotProps.inputLabel;
+  C === "outlined" && (se && typeof se.shrink < "u" && (F.notched = se.shrink), F.label = h), T && (L || (F.id = void 0), F["aria-describedby"] = void 0);
+  const [be, he] = N("root", {
+    elementType: Ge,
+    shouldForwardComponentProp: !0,
+    externalForwardedProps: {
+      ...w,
+      ...ee
+    },
+    ownerState: y,
+    className: J(oe.root, f),
+    ref: t,
+    additionalProps: {
+      disabled: _,
+      error: b,
+      fullWidth: u,
+      required: E,
+      color: m,
+      variant: C
+    }
+  }), [ye, xe] = N("input", {
+    elementType: re,
+    externalForwardedProps: w,
+    additionalProps: F,
+    ownerState: y
+  }), [_e, ge] = N("inputLabel", {
+    elementType: fe,
+    externalForwardedProps: w,
+    ownerState: y
+  }), [Te, ve] = N("htmlInput", {
+    elementType: "input",
+    externalForwardedProps: w,
+    ownerState: y
+  }), [we, Oe] = N("formHelperText", {
+    elementType: pe,
+    externalForwardedProps: w,
+    ownerState: y
+  }), ie = /* @__PURE__ */ a(ye, {
+    "aria-describedby": I,
+    autoComplete: d,
+    autoFocus: n,
+    defaultValue: x,
+    fullWidth: u,
+    multiline: j,
+    name: q,
+    rows: R,
+    maxRows: O,
+    minRows: S,
+    type: Z,
+    value: W,
+    id: v,
+    inputRef: i,
+    onBlur: H,
+    onChange: Q,
+    onFocus: Y,
+    placeholder: k,
+    inputProps: ve,
+    slots: {
+      input: U.htmlInput ? Te : void 0
+    },
+    ...xe
+  });
+  return /* @__PURE__ */ $(be, {
+    ...he,
+    children: [h != null && h !== "" && /* @__PURE__ */ a(_e, {
+      htmlFor: T && !L ? void 0 : v,
+      id: A,
+      ...T && !L && {
+        component: "div"
+      },
+      ...ge,
+      children: h
+    }), T ? /* @__PURE__ */ a(te, {
+      "aria-describedby": I,
+      id: v,
+      labelId: A,
+      value: W,
+      input: ie,
+      ...B,
+      children: p
+    }) : ie, g && /* @__PURE__ */ a(we, {
+      id: I,
+      ...Oe,
+      children: g
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (me.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,
+  /**
+   * 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,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: Ne,
+  /**
+   * 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,
+  /**
+   * 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"])
+});
+const Je = "_label_1cc6q_6", Qe = "_mandatory_1cc6q_18", Ye = "_icon_1cc6q_27", Ze = "_small_1cc6q_86", eo = "_medium_1cc6q_94", oo = "_large_1cc6q_102", ro = "_filled_1cc6q_110", to = "_suffix_1cc6q_167", so = "_disabled_1cc6q_189", c = {
+  "ckds-input-field-container": "_ckds-input-field-container_1cc6q_1",
+  label: Je,
+  mandatory: Qe,
+  icon: Ye,
+  "icon-with-label": "_icon-with-label_1cc6q_42",
+  "text-field": "_text-field_1cc6q_46",
+  "Mui-focused": "_Mui-focused_1cc6q_59",
+  "Mui-disabled": "_Mui-disabled_1cc6q_62",
+  "Mui-error": "_Mui-error_1cc6q_66",
+  small: Ze,
+  medium: eo,
+  large: oo,
+  filled: ro,
+  "show-hide-password": "_show-hide-password_1cc6q_114",
+  "clear-icon": "_clear-icon_1cc6q_115",
+  "end-icon": "_end-icon_1cc6q_116",
+  "show-hide-password-with-label": "_show-hide-password-with-label_1cc6q_153",
+  "clear-icon-with-label": "_clear-icon-with-label_1cc6q_154",
+  "end-icon-with-label": "_end-icon-with-label_1cc6q_155",
+  "action-button": "_action-button_1cc6q_159",
+  suffix: to,
+  "error-text": "_error-text_1cc6q_177",
+  "helper-text": "_helper-text_1cc6q_182",
+  disabled: so
+};
+function fo({
+  type: o = "text",
+  name: r,
+  handleChange: t,
+  value: s = "",
+  label: d = "",
+  error: n,
+  placeHolder: p,
+  toggleIcon: f,
+  toggleActionButton: m,
+  toggleCallback: x,
+  toggleActionBtnCallback: _,
+  selectedVisibilityIcon: b,
+  inputIcon: u,
+  inputClass: g = "",
+  suffix: l,
+  prefixIcon: i,
+  parentClass: h = "",
+  showLabel: O = !0,
+  touched: S,
+  onBlurHandler: j,
+  disabled: q = !1,
+  disabledClass: H = "",
+  filledStyle: Q = "",
+  autoComplete: Y = "on",
+  toolTip: k,
+  maxLength: E = null,
+  prefix: R,
+  showInfoMessage: T = {},
+  actionButtonConfig: U = {},
+  labelDescription: z = "",
+  disableOnWheel: Z = !1,
+  onFocusHandler: W,
+  onKeyDownHandler: C,
+  mandatory: ee = !1,
+  helperText: y,
+  readOnly: oe = !1,
+  clearable: v = !1,
+  onClear: I,
+  size: A = "medium"
+}) {
+  const {
+    isEnabled: re,
+    component: w
+  } = T, {
+    buttonText: te = "",
+    btnVariant: B = "primary",
+    btnsize: L = "small"
+  } = U;
+  return /* @__PURE__ */ $("div", { className: `${c["ckds-input-field-container"]} ${h}`, children: [
+    O && /* @__PURE__ */ $(qe, { children: [
+      /* @__PURE__ */ $(
+        "span",
+        {
+          className: `${c.label} ${ee ? c.mandatory : ""}`,
+          children: [
+            i,
+            d,
+            typeof z == "function" ? z() : z
+          ]
+        }
+      ),
+      R && /* @__PURE__ */ a("span", { className: R.style, children: R.text })
+    ] }),
+    re && w,
+    u && /* @__PURE__ */ a(
+      "div",
+      {
+        className: `${c.icon} ${O ? c["icon-with-label"] : ""}`,
+        children: typeof u == "string" ? /* @__PURE__ */ a(
+          "img",
+          {
+            src: u,
+            alt: `${r}-icon`
+          }
+        ) : u
+      }
+    ),
+    /* @__PURE__ */ a(
+      me,
+      {
+        fullWidth: !0,
+        variant: "outlined",
+        name: r,
+        type: o,
+        value: s,
+        placeholder: H ? "" : p,
+        onChange: t,
+        onBlur: j,
+        onFocus: W,
+        disabled: q,
+        autoComplete: Y,
+        error: !!(S && n),
+        helperText: S && n ? n : "",
+        slotProps: {
+          htmlInput: {
+            maxLength: E || void 0,
+            onKeyDown: C,
+            readOnly: oe
+          }
+        },
+        className: `
+          ${c["text-field"]}
+          ${c[A]}
+          ${g}
+          ${s ? `${Q} ${c.filled}` : ""}
+          ${H}
+        `,
+        onWheel: (F) => {
+          Z && F.target.blur();
+        }
+      }
+    ),
+    l && /* @__PURE__ */ $(
+      "span",
+      {
+        className: `${l.style} ${S && n ? c["error-text"] : ""}`,
+        children: [
+          l.text,
+          l.icon
+        ]
+      }
+    ),
+    k && /* @__PURE__ */ a("div", { className: k.label, children: k.component }),
+    v && s && !q && /* @__PURE__ */ a(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: `${c["clear-icon"]} ${O ? c["clear-icon-with-label"] : ""}`,
+        onClick: () => I?.(o, r),
+        children: "✕"
+      }
+    ),
+    f && /* @__PURE__ */ a(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: `${c["show-hide-password"]} ${O ? c["show-hide-password-with-label"] : ""} ${q || !s ? c.disabled : ""}`,
+        onClick: () => !q && x?.(o, r),
+        children: typeof b == "string" ? /* @__PURE__ */ a(
+          "img",
+          {
+            src: b,
+            alt: "visibility-toggle"
+          }
+        ) : b
+      }
+    ),
+    m && /* @__PURE__ */ a("span", { className: c["action-button"], children: /* @__PURE__ */ a(
+      Fe,
+      {
+        label: te,
+        variant: B,
+        size: L,
+        className: "rounded-[3px] !font-bold ml-[10px]",
+        disabled: q || !s || !!n,
+        onChange: () => _?.(
+          o,
+          r
+        )
+      }
+    ) }),
+    y && (typeof y == "string" ? /* @__PURE__ */ a(
+      "span",
+      {
+        className: `${c["helper-text"]} ${q ? c.disabled : ""}`,
+        children: y
+      }
+    ) : y)
+  ] });
+}
+export {
+  fo as TextField,
+  fo as default
+};