@loopr-ai/craft 0.7.1 → 0.7.3

package/dist/components/organ/Form/FormInput.js

@@ -0,0 +1,517 @@
+import oe, { jsx as r, jsxs as S, Fragment as se } from "react/jsx-runtime";
+import { r as ne, i as ae } from "../../../createSvgIcon-f773ce57.js";
+import * as P from "react";
+import { useState as re, useCallback as ie, useEffect as le } from "react";
+import { customColors as R } from "../../../global/colors.js";
+import { images as ce } from "../../../global/constants.js";
+import { M as de, T as A } from "../../../index-03287c17.js";
+import x from "./Form.styles.js";
+import { d as V, B as z, T as pe } from "../../../Tooltip-b926c320.js";
+import { u as ue, F as me, L as B, T as fe } from "../../../TextField-fded06e5.js";
+import { g as H, a as I, _ as J, P as t, c as _, e as N } from "../../../createTheme-a4db2989.js";
+import { g as j, s as K, a as Q, c as k, b as X, r as be } from "../../../styled-126c6a62.js";
+import { B as ve } from "../../../ButtonBase-85c9347b.js";
+import { c as ge, u as ye } from "../../../TransitionGroupContext-fe9a562f.js";
+function xe(e) {
+  return H("MuiInputAdornment", e);
+}
+const Ie = j("MuiInputAdornment", ["root", "filled", "standard", "outlined", "positionStart", "positionEnd", "disablePointerEvents", "hiddenLabel", "sizeSmall"]), D = Ie;
+var U;
+const Ce = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"], he = (e, o) => {
+  const {
+    ownerState: s
+  } = e;
+  return [o.root, o[`position${_(s.position)}`], s.disablePointerEvents === !0 && o.disablePointerEvents, o[s.variant]];
+}, $e = (e) => {
+  const {
+    classes: o,
+    disablePointerEvents: s,
+    hiddenLabel: a,
+    position: i,
+    size: d,
+    variant: l
+  } = e, v = {
+    root: ["root", s && "disablePointerEvents", i && `position${_(i)}`, l, a && "hiddenLabel", d && `size${_(d)}`]
+  };
+  return X(v, xe, o);
+}, Me = K("div", {
+  name: "MuiInputAdornment",
+  slot: "Root",
+  overridesResolver: he
+})(({
+  theme: e,
+  ownerState: o
+}) => I({
+  display: "flex",
+  height: "0.01em",
+  // Fix IE11 flexbox alignment. To remove at some point.
+  maxHeight: "2em",
+  alignItems: "center",
+  whiteSpace: "nowrap",
+  color: (e.vars || e).palette.action.active
+}, o.variant === "filled" && {
+  // Styles applied to the root element if `variant="filled"`.
+  [`&.${D.positionStart}&:not(.${D.hiddenLabel})`]: {
+    marginTop: 16
+  }
+}, o.position === "start" && {
+  // Styles applied to the root element if `position="start"`.
+  marginRight: 8
+}, o.position === "end" && {
+  // Styles applied to the root element if `position="end"`.
+  marginLeft: 8
+}, o.disablePointerEvents === !0 && {
+  // Styles applied to the root element if `disablePointerEvents={true}`.
+  pointerEvents: "none"
+})), Y = /* @__PURE__ */ P.forwardRef(function(o, s) {
+  const a = Q({
+    props: o,
+    name: "MuiInputAdornment"
+  }), {
+    children: i,
+    className: d,
+    component: l = "div",
+    disablePointerEvents: v = !1,
+    disableTypography: f = !1,
+    position: h,
+    variant: g
+  } = a, p = J(a, Ce), c = ue() || {};
+  let u = g;
+  g && c.variant && process.env.NODE_ENV !== "production" && g === c.variant && console.error("MUI: The `InputAdornment` variant infers the variant prop you do not have to provide one."), c && !u && (u = c.variant);
+  const y = I({}, a, {
+    hiddenLabel: c.hiddenLabel,
+    size: c.size,
+    disablePointerEvents: v,
+    position: h,
+    variant: u
+  }), $ = $e(y);
+  return /* @__PURE__ */ r(me.Provider, {
+    value: null,
+    children: /* @__PURE__ */ r(Me, I({
+      as: l,
+      ownerState: y,
+      className: k($.root, d),
+      ref: s
+    }, p, {
+      children: typeof i == "string" && !f ? /* @__PURE__ */ r(de, {
+        color: "text.secondary",
+        children: i
+      }) : /* @__PURE__ */ S(P.Fragment, {
+        children: [h === "start" ? (
+          /* notranslate needed while Google Translate will not fix zero-width space issue */
+          U || (U = /* @__PURE__ */ r("span", {
+            className: "notranslate",
+            children: "​"
+          }))
+        ) : null, i]
+      })
+    }))
+  });
+});
+process.env.NODE_ENV !== "production" && (Y.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, normally an `IconButton` or string.
+   */
+  children: t.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @ignore
+   */
+  className: t.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: t.elementType,
+  /**
+   * Disable pointer events on the root.
+   * This allows for the content of the adornment to focus the `input` on click.
+   * @default false
+   */
+  disablePointerEvents: t.bool,
+  /**
+   * If children is a string then disable wrapping in a Typography component.
+   * @default false
+   */
+  disableTypography: t.bool,
+  /**
+   * The position this adornment should appear relative to the `Input`.
+   */
+  position: t.oneOf(["end", "start"]).isRequired,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
+  /**
+   * The variant to use.
+   * Note: If you are using the `TextField` component or the `FormControl` component
+   * you do not have to set this manually.
+   */
+  variant: t.oneOf(["filled", "outlined", "standard"])
+});
+const G = Y, Pe = j("MuiListItemIcon", ["root", "alignItemsFlexStart"]), q = Pe, Te = j("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]), W = Te;
+function Oe(e) {
+  return H("MuiMenuItem", e);
+}
+const Ee = j("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]), O = Ee, Ne = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"], Se = (e, o) => {
+  const {
+    ownerState: s
+  } = e;
+  return [o.root, s.dense && o.dense, s.divider && o.divider, !s.disableGutters && o.gutters];
+}, je = (e) => {
+  const {
+    disabled: o,
+    dense: s,
+    divider: a,
+    disableGutters: i,
+    selected: d,
+    classes: l
+  } = e, f = X({
+    root: ["root", s && "dense", o && "disabled", !i && "gutters", a && "divider", d && "selected"]
+  }, Oe, l);
+  return I({}, l, f);
+}, Fe = K(ve, {
+  shouldForwardProp: (e) => be(e) || e === "classes",
+  name: "MuiMenuItem",
+  slot: "Root",
+  overridesResolver: Se
+})(({
+  theme: e,
+  ownerState: o
+}) => I({}, e.typography.body1, {
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  position: "relative",
+  textDecoration: "none",
+  minHeight: 48,
+  paddingTop: 6,
+  paddingBottom: 6,
+  boxSizing: "border-box",
+  whiteSpace: "nowrap"
+}, !o.disableGutters && {
+  paddingLeft: 16,
+  paddingRight: 16
+}, o.divider && {
+  borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
+  backgroundClip: "padding-box"
+}, {
+  "&:hover": {
+    textDecoration: "none",
+    backgroundColor: (e.vars || e).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      backgroundColor: "transparent"
+    }
+  },
+  [`&.${O.selected}`]: {
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : N(e.palette.primary.main, e.palette.action.selectedOpacity),
+    [`&.${O.focusVisible}`]: {
+      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : N(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
+    }
+  },
+  [`&.${O.selected}:hover`]: {
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : N(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.hoverOpacity),
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : N(e.palette.primary.main, e.palette.action.selectedOpacity)
+    }
+  },
+  [`&.${O.focusVisible}`]: {
+    backgroundColor: (e.vars || e).palette.action.focus
+  },
+  [`&.${O.disabled}`]: {
+    opacity: (e.vars || e).palette.action.disabledOpacity
+  },
+  [`& + .${V.root}`]: {
+    marginTop: e.spacing(1),
+    marginBottom: e.spacing(1)
+  },
+  [`& + .${V.inset}`]: {
+    marginLeft: 52
+  },
+  [`& .${W.root}`]: {
+    marginTop: 0,
+    marginBottom: 0
+  },
+  [`& .${W.inset}`]: {
+    paddingLeft: 36
+  },
+  [`& .${q.root}`]: {
+    minWidth: 36
+  }
+}, !o.dense && {
+  [e.breakpoints.up("sm")]: {
+    minHeight: "auto"
+  }
+}, o.dense && I({
+  minHeight: 32,
+  // https://m2.material.io/components/menus#specs > Dense
+  paddingTop: 4,
+  paddingBottom: 4
+}, e.typography.body2, {
+  [`& .${q.root} svg`]: {
+    fontSize: "1.25rem"
+  }
+}))), Z = /* @__PURE__ */ P.forwardRef(function(o, s) {
+  const a = Q({
+    props: o,
+    name: "MuiMenuItem"
+  }), {
+    autoFocus: i = !1,
+    component: d = "li",
+    dense: l = !1,
+    divider: v = !1,
+    disableGutters: f = !1,
+    focusVisibleClassName: h,
+    role: g = "menuitem",
+    tabIndex: p,
+    className: c
+  } = a, u = J(a, Ne), y = P.useContext(B), $ = P.useMemo(() => ({
+    dense: l || y.dense || !1,
+    disableGutters: f
+  }), [y.dense, l, f]), m = P.useRef(null);
+  ge(() => {
+    i && (m.current ? m.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered."));
+  }, [i]);
+  const F = I({}, a, {
+    dense: $.dense,
+    divider: v,
+    disableGutters: f
+  }), T = je(a), L = ye(m, s);
+  let M;
+  return a.disabled || (M = p !== void 0 ? p : -1), /* @__PURE__ */ r(B.Provider, {
+    value: $,
+    children: /* @__PURE__ */ r(Fe, I({
+      ref: L,
+      role: g,
+      tabIndex: M,
+      component: d,
+      focusVisibleClassName: k(T.focusVisible, h),
+      className: k(T.root, c)
+    }, u, {
+      ownerState: F,
+      classes: T
+    }))
+  });
+});
+process.env.NODE_ENV !== "production" && (Z.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * If `true`, the list item is focused during the first mount.
+   * Focus will also be triggered if the value changes from false to true.
+   * @default false
+   */
+  autoFocus: t.bool,
+  /**
+   * The content of the component.
+   */
+  children: t.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @ignore
+   */
+  className: t.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: t.elementType,
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
+   * The prop defaults to the value inherited from the parent Menu component.
+   * @default false
+   */
+  dense: t.bool,
+  /**
+   * @ignore
+   */
+  disabled: t.bool,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: t.bool,
+  /**
+   * If `true`, a 1px light border is added to the bottom of the menu item.
+   * @default false
+   */
+  divider: t.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: t.string,
+  /**
+   * @ignore
+   */
+  role: t.string,
+  /**
+   * If `true`, the component is selected.
+   * @default false
+   */
+  selected: t.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
+  /**
+   * @default 0
+   */
+  tabIndex: t.number
+});
+const Le = Z;
+var w = {}, Re = ae;
+Object.defineProperty(w, "__esModule", {
+  value: !0
+});
+var ee = w.default = void 0, _e = Re(ne()), ke = oe, we = (0, _e.default)(/* @__PURE__ */ (0, ke.jsx)("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+}), "Error");
+ee = w.default = we;
+const Xe = ({
+  name: e,
+  label: o,
+  type: s,
+  value: a,
+  handleChange: i,
+  placeholder: d,
+  required: l,
+  disabled: v,
+  beforeField: f,
+  afterField: h,
+  options: g,
+  optionsResponseHandler: p,
+  api_endpoint: c,
+  error: u,
+  helperText: y,
+  autofocus: $
+}) => {
+  const [m, F] = re([]);
+  function T(n) {
+    i(e, n.target.value);
+  }
+  const L = ie(async () => {
+    var n;
+    return s !== "select" ? [] : g || (c && p ? (n = (await (await fetch(c)).json())[p.key]) == null ? void 0 : n.map((E) => ({
+      name: E[p.name],
+      value: E[p.value]
+    })) : []);
+  }, [s, p, c]);
+  le(() => {
+    L().then((n) => F(n));
+  }, []);
+  let M = {
+    ...x.textfield,
+    backgroundColor: u ? R.redLight : "transparent",
+    "& input::placeholder": {
+      color: u ? R.redMedium : "grey"
+    }
+  };
+  const te = {
+    "& .MuiSelect-select > span::before": {
+      content: `'${d}'`,
+      color: u ? "rgba(254, 64, 76, 0.4)" : "rgba(153, 153, 153, 0.6)"
+    }
+  };
+  return s === "select" && (M = {
+    ...M,
+    ...te
+  }), s !== "custom" ? /* @__PURE__ */ S(z, { sx: x.formInputWrapper, children: [
+    /* @__PURE__ */ r("label", { htmlFor: `form-input-${e}`, children: /* @__PURE__ */ r(A, { sx: x.label, children: `${o} ${l ? "*" : ""}` }) }),
+    /* @__PURE__ */ r(z, { sx: x.textfieldWrapper, children: /* @__PURE__ */ r(
+      pe,
+      {
+        title: y && /* @__PURE__ */ S(A, { type: "subtitleSmall", textColor: "white", children: [
+          /* @__PURE__ */ r(ee, { sx: x.errorIcon }),
+          y
+        ] }),
+        placement: "bottom",
+        arrow: !0,
+        componentsProps: {
+          tooltip: {
+            sx: x.tooltip
+          },
+          popper: {
+            sx: x.tooltipPopper
+          }
+        },
+        children: /* @__PURE__ */ r(
+          fe,
+          {
+            id: `form-input-${e}`,
+            autoFocus: $,
+            name: e,
+            type: s,
+            select: s === "select",
+            value: a,
+            onChange: T,
+            placeholder: d,
+            required: l,
+            disabled: v,
+            error: u,
+            InputProps: {
+              startAdornment: /* @__PURE__ */ r(G, { position: "start", children: f }),
+              endAdornment: /* @__PURE__ */ r(G, { position: "end", children: h })
+            },
+            SelectProps: {
+              renderValue: (n) => {
+                const b = m == null ? void 0 : m.find(
+                  (C) => typeof C == "object" ? C.value === n : C === n
+                );
+                return typeof b == "object" ? b.name : b;
+              },
+              MenuProps: {
+                PaperProps: {
+                  sx: x.selectDropdown
+                }
+              }
+            },
+            sx: M,
+            children: s === "select" && (m == null ? void 0 : m.map((n) => {
+              const b = typeof n == "object", C = b ? n.value === a : n === a, E = {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                color: C ? "black" : R.darkGrey,
+                gap: "1rem"
+              };
+              return /* @__PURE__ */ S(
+                Le,
+                {
+                  value: b ? n.value : n,
+                  sx: E,
+                  children: [
+                    b ? n.name : n,
+                    C && /* @__PURE__ */ r("img", { src: ce.success, alt: "selected-option" })
+                  ]
+                },
+                b ? n.name : n
+              );
+            }))
+          }
+        )
+      }
+    ) })
+  ] }) : /* @__PURE__ */ r(se, {});
+};
+export {
+  Xe as default
+};