@loopr-ai/craft 0.7.4 → 0.7.6

package/dist/components/organ/Form/Form.interfaces.d.ts

@@ -38,7 +38,7 @@ interface Validation {
 export interface ConfigField extends SelectField {
     validation?: Validation;
     customComponent?: string;
-    submitDataKey?: string;
+    submitDataKey: Array<string> | string;
     preFillWithDateTime?: boolean;
     groupName?: string;
     hidden?: boolean;

package/dist/components/organ/Form/Form.styles.d.ts

@@ -27,6 +27,7 @@ declare const styles: {
         };
         "& > div": {
             flex: number;
+            overflow: string;
         };
         "&:has(.Mui-focused)": {
             outlineColor: string;
@@ -35,7 +36,8 @@ declare const styles: {
     heading: {
         textAlign: string;
         fontWeight: number;
-        margin: string;
+        marginTop: string;
+        marginBottom: string;
     };
     label: {
         color: string;
@@ -73,6 +75,7 @@ declare const styles: {
         "& .MuiSelect-select": {
             padding: string;
             position: string;
+            textAlign: string;
             "& > span::before": {
                 position: string;
                 right: string;

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

@@ -27,7 +27,8 @@ const r = {
       flex: 1
     },
     "& > div": {
-      flex: 2
+      flex: 2,
+      overflow: "hidden"
     },
     "&:has(.Mui-focused)": {
       outlineColor: "black"
@@ -36,7 +37,8 @@ const r = {
   heading: {
     textAlign: "left",
     fontWeight: 500,
-    margin: "0.75rem 0"
+    marginTop: "2rem",
+    marginBottom: "0.75rem"
   },
   label: {
     color: e.darkGrey,
@@ -74,6 +76,7 @@ const r = {
     "& .MuiSelect-select": {
       padding: "0.75rem",
       position: "relative",
+      textAlign: "right",
       "& > span::before": {
         position: "absolute",
         right: "2rem"

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

@@ -1,28 +1,27 @@
-import oe, { jsx as r, jsxs as S, Fragment as se } from "react/jsx-runtime";
+import oe, { jsx as r, jsxs as z, Fragment as se } from "react/jsx-runtime";
 import { r as ne, i as ae } from "../../../createSvgIcon-f773ce57.js";
-import * as P from "react";
+import * as h 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);
+import { customColors as P } from "../../../global/colors.js";
+import { M as ce, T as k } from "../../../index-03287c17.js";
+import y from "./Form.styles.js";
+import { d as F, B as R, T as de } from "../../../Tooltip-b926c320.js";
+import { u as ue, F as pe, L as _, T as me } from "../../../TextField-fded06e5.js";
+import { g as W, a as I, _ as Y, P as t, c as S, e as $ } from "../../../createTheme-a4db2989.js";
+import { g as E, s as q, a as H, c as w, b as K, r as fe } from "../../../styled-126c6a62.js";
+import { B as ge } from "../../../ButtonBase-85c9347b.js";
+import { c as be, u as ve } from "../../../TransitionGroupContext-fe9a562f.js";
+function Me(e) {
+  return W("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 ye = E("MuiInputAdornment", ["root", "filled", "standard", "outlined", "positionStart", "positionEnd", "disablePointerEvents", "hiddenLabel", "sizeSmall"]), V = ye;
+var B;
+const Ie = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"], xe = (e, o) => {
   const {
     ownerState: s
   } = e;
-  return [o.root, o[`position${_(s.position)}`], s.disablePointerEvents === !0 && o.disablePointerEvents, o[s.variant]];
-}, $e = (e) => {
+  return [o.root, o[`position${S(s.position)}`], s.disablePointerEvents === !0 && o.disablePointerEvents, o[s.variant]];
+}, Ne = (e) => {
   const {
     classes: o,
     disablePointerEvents: s,
@@ -30,14 +29,14 @@ const Ce = ["children", "className", "component", "disablePointerEvents", "disab
     position: i,
     size: d,
     variant: l
-  } = e, v = {
-    root: ["root", s && "disablePointerEvents", i && `position${_(i)}`, l, a && "hiddenLabel", d && `size${_(d)}`]
+  } = e, b = {
+    root: ["root", s && "disablePointerEvents", i && `position${S(i)}`, l, a && "hiddenLabel", d && `size${S(d)}`]
   };
-  return X(v, xe, o);
-}, Me = K("div", {
+  return K(b, Me, o);
+}, Ce = q("div", {
   name: "MuiInputAdornment",
   slot: "Root",
-  overridesResolver: he
+  overridesResolver: xe
 })(({
   theme: e,
   ownerState: o
@@ -51,7 +50,7 @@ const Ce = ["children", "className", "component", "disablePointerEvents", "disab
   color: (e.vars || e).palette.action.active
 }, o.variant === "filled" && {
   // Styles applied to the root element if `variant="filled"`.
-  [`&.${D.positionStart}&:not(.${D.hiddenLabel})`]: {
+  [`&.${V.positionStart}&:not(.${V.hiddenLabel})`]: {
     marginTop: 16
   }
 }, o.position === "start" && {
@@ -63,43 +62,43 @@ const Ce = ["children", "className", "component", "disablePointerEvents", "disab
 }, o.disablePointerEvents === !0 && {
   // Styles applied to the root element if `disablePointerEvents={true}`.
   pointerEvents: "none"
-})), Y = /* @__PURE__ */ P.forwardRef(function(o, s) {
-  const a = Q({
+})), J = /* @__PURE__ */ h.forwardRef(function(o, s) {
+  const a = H({
     props: o,
     name: "MuiInputAdornment"
   }), {
     children: i,
     className: d,
     component: l = "div",
-    disablePointerEvents: v = !1,
+    disablePointerEvents: b = !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, {
+    position: N,
+    variant: v
+  } = a, u = Y(a, Ie), c = ue() || {};
+  let p = v;
+  v && c.variant && process.env.NODE_ENV !== "production" && v === c.variant && console.error("MUI: The `InputAdornment` variant infers the variant prop you do not have to provide one."), c && !p && (p = c.variant);
+  const M = I({}, a, {
     hiddenLabel: c.hiddenLabel,
     size: c.size,
-    disablePointerEvents: v,
-    position: h,
-    variant: u
-  }), $ = $e(y);
-  return /* @__PURE__ */ r(me.Provider, {
+    disablePointerEvents: b,
+    position: N,
+    variant: p
+  }), C = Ne(M);
+  return /* @__PURE__ */ r(pe.Provider, {
     value: null,
-    children: /* @__PURE__ */ r(Me, I({
+    children: /* @__PURE__ */ r(Ce, I({
       as: l,
-      ownerState: y,
-      className: k($.root, d),
+      ownerState: M,
+      className: w(C.root, d),
       ref: s
-    }, p, {
-      children: typeof i == "string" && !f ? /* @__PURE__ */ r(de, {
+    }, u, {
+      children: typeof i == "string" && !f ? /* @__PURE__ */ r(ce, {
         color: "text.secondary",
         children: i
-      }) : /* @__PURE__ */ S(P.Fragment, {
-        children: [h === "start" ? (
+      }) : /* @__PURE__ */ z(h.Fragment, {
+        children: [N === "start" ? (
           /* notranslate needed while Google Translate will not fix zero-width space issue */
-          U || (U = /* @__PURE__ */ r("span", {
+          B || (B = /* @__PURE__ */ r("span", {
             className: "notranslate",
             children: "​"
           }))
@@ -108,7 +107,7 @@ const Ce = ["children", "className", "component", "disablePointerEvents", "disab
     }))
   });
 });
-process.env.NODE_ENV !== "production" && (Y.propTypes = {
+process.env.NODE_ENV !== "production" && (J.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -156,16 +155,16 @@ process.env.NODE_ENV !== "production" && (Y.propTypes = {
    */
   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 Q = J, Te = E("MuiListItemIcon", ["root", "alignItemsFlexStart"]), G = Te, he = E("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]), Z = he;
+function je(e) {
+  return W("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 De = E("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]), D = De, Oe = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"], $e = (e, o) => {
   const {
     ownerState: s
   } = e;
   return [o.root, s.dense && o.dense, s.divider && o.divider, !s.disableGutters && o.gutters];
-}, je = (e) => {
+}, ze = (e) => {
   const {
     disabled: o,
     dense: s,
@@ -173,15 +172,15 @@ const Ee = j("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divid
     disableGutters: i,
     selected: d,
     classes: l
-  } = e, f = X({
+  } = e, f = K({
     root: ["root", s && "dense", o && "disabled", !i && "gutters", a && "divider", d && "selected"]
-  }, Oe, l);
+  }, je, l);
   return I({}, l, f);
-}, Fe = K(ve, {
-  shouldForwardProp: (e) => be(e) || e === "classes",
+}, Ee = q(ge, {
+  shouldForwardProp: (e) => fe(e) || e === "classes",
   name: "MuiMenuItem",
   slot: "Root",
-  overridesResolver: Se
+  overridesResolver: $e
 })(({
   theme: e,
   ownerState: o
@@ -211,40 +210,40 @@ const Ee = j("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divid
       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)
+  [`&.${D.selected}`]: {
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : $(e.palette.primary.main, e.palette.action.selectedOpacity),
+    [`&.${D.focusVisible}`]: {
+      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : $(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),
+  [`&.${D.selected}:hover`]: {
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : $(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)
+      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : $(e.palette.primary.main, e.palette.action.selectedOpacity)
     }
   },
-  [`&.${O.focusVisible}`]: {
+  [`&.${D.focusVisible}`]: {
     backgroundColor: (e.vars || e).palette.action.focus
   },
-  [`&.${O.disabled}`]: {
+  [`&.${D.disabled}`]: {
     opacity: (e.vars || e).palette.action.disabledOpacity
   },
-  [`& + .${V.root}`]: {
+  [`& + .${F.root}`]: {
     marginTop: e.spacing(1),
     marginBottom: e.spacing(1)
   },
-  [`& + .${V.inset}`]: {
+  [`& + .${F.inset}`]: {
     marginLeft: 52
   },
-  [`& .${W.root}`]: {
+  [`& .${Z.root}`]: {
     marginTop: 0,
     marginBottom: 0
   },
-  [`& .${W.inset}`]: {
+  [`& .${Z.inset}`]: {
     paddingLeft: 36
   },
-  [`& .${q.root}`]: {
+  [`& .${G.root}`]: {
     minWidth: 36
   }
 }, !o.dense && {
@@ -257,52 +256,52 @@ const Ee = j("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divid
   paddingTop: 4,
   paddingBottom: 4
 }, e.typography.body2, {
-  [`& .${q.root} svg`]: {
+  [`& .${G.root} svg`]: {
     fontSize: "1.25rem"
   }
-}))), Z = /* @__PURE__ */ P.forwardRef(function(o, s) {
-  const a = Q({
+}))), X = /* @__PURE__ */ h.forwardRef(function(o, s) {
+  const a = H({
     props: o,
     name: "MuiMenuItem"
   }), {
     autoFocus: i = !1,
     component: d = "li",
     dense: l = !1,
-    divider: v = !1,
+    divider: b = !1,
     disableGutters: f = !1,
-    focusVisibleClassName: h,
-    role: g = "menuitem",
-    tabIndex: p,
+    focusVisibleClassName: N,
+    role: v = "menuitem",
+    tabIndex: u,
     className: c
-  } = a, u = J(a, Ne), y = P.useContext(B), $ = P.useMemo(() => ({
-    dense: l || y.dense || !1,
+  } = a, p = Y(a, Oe), M = h.useContext(_), C = h.useMemo(() => ({
+    dense: l || M.dense || !1,
     disableGutters: f
-  }), [y.dense, l, f]), m = P.useRef(null);
-  ge(() => {
+  }), [M.dense, l, f]), m = h.useRef(null);
+  be(() => {
     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,
+  const L = I({}, a, {
+    dense: C.dense,
+    divider: b,
     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,
+  }), j = ze(a), A = ve(m, s);
+  let T;
+  return a.disabled || (T = u !== void 0 ? u : -1), /* @__PURE__ */ r(_.Provider, {
+    value: C,
+    children: /* @__PURE__ */ r(Ee, I({
+      ref: A,
+      role: v,
+      tabIndex: T,
       component: d,
-      focusVisibleClassName: k(T.focusVisible, h),
-      className: k(T.root, c)
-    }, u, {
-      ownerState: F,
-      classes: T
+      focusVisibleClassName: w(j.focusVisible, N),
+      className: w(j.root, c)
+    }, p, {
+      ownerState: L,
+      classes: j
     }))
   });
 });
-process.env.NODE_ENV !== "production" && (Z.propTypes = {
+process.env.NODE_ENV !== "production" && (X.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -377,16 +376,16 @@ process.env.NODE_ENV !== "production" && (Z.propTypes = {
    */
   tabIndex: t.number
 });
-const Le = Z;
-var w = {}, Re = ae;
-Object.defineProperty(w, "__esModule", {
+const Le = X;
+var U = {}, Ae = ae;
+Object.defineProperty(U, "__esModule", {
   value: !0
 });
-var ee = w.default = void 0, _e = Re(ne()), ke = oe, we = (0, _e.default)(/* @__PURE__ */ (0, ke.jsx)("path", {
+var ee = U.default = void 0, Pe = Ae(ne()), Se = oe, we = (0, Pe.default)(/* @__PURE__ */ (0, Se.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 = ({
+ee = U.default = we;
+const Ue = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNiAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjg3NzggMy4yNTUzOUMxNC4yODc1IDIuODM3MzkgMTQuOTYwNiAyLjgzNzM5IDE1LjM3MDMgMy4yNTUzOUMxNS43NzggMy42NjczOSAxNS43ODM3IDQuMzMzMDkgMTUuMzg0NSA0Ljc1MjE5TDYuOTU1NjMgMTQuNzE2M0M2LjU1MTYzIDE1LjE2IDUuODU3OTIgMTUuMTczIDUuNDM3NTIgMTQuNzQ0OEwwLjMwODYyNSA5LjU0NzQ5Qy0wLjEwMjg3NSA5LjEyNzg5IC0wLjEwMjg3NSA4LjQ1NjA5IDAuMzA4NjI1IDguMDM2NDlDMC43MTgzMjUgNy42MTg0OSAxLjM5MTQyIDcuNjE4NDkgMS44MDExMiA4LjAzNjQ5TDYuMTUxNzIgMTIuNDQ1NUwxMy44NDkzIDMuMjg2NzlMMTMuODc3OCAzLjI1NTM5WiIgZmlsbD0iIzE2MjMyNCIvPgo8L3N2Zz4K", He = ({
   name: e,
   label: o,
   type: s,
@@ -394,116 +393,116 @@ const Xe = ({
   handleChange: i,
   placeholder: d,
   required: l,
-  disabled: v,
+  disabled: b,
   beforeField: f,
-  afterField: h,
-  options: g,
-  optionsResponseHandler: p,
+  afterField: N,
+  options: v,
+  optionsResponseHandler: u,
   api_endpoint: c,
-  error: u,
-  helperText: y,
-  autofocus: $
+  error: p,
+  helperText: M,
+  autofocus: C
 }) => {
-  const [m, F] = re([]);
-  function T(n) {
+  const [m, L] = re([]);
+  function j(n) {
     i(e, n.target.value);
   }
-  const L = ie(async () => {
+  const A = 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]
+    return s !== "select" ? [] : v || (c && u ? (n = (await (await fetch(c)).json())[u.key]) == null ? void 0 : n.map((O) => ({
+      name: O[u.name],
+      value: O[u.value]
     })) : []);
-  }, [s, p, c]);
+  }, [s, u, c]);
   le(() => {
-    L().then((n) => F(n));
+    A().then((n) => L(n));
   }, []);
-  let M = {
-    ...x.textfield,
-    backgroundColor: u ? R.redLight : "transparent",
+  let T = {
+    ...y.textfield,
+    backgroundColor: p ? P.redLight : "transparent",
     "& input::placeholder": {
-      color: u ? R.redMedium : "grey"
+      color: p ? P.redMedium : "grey"
     }
   };
   const te = {
     "& .MuiSelect-select > span::before": {
       content: `'${d || ""}'`,
-      color: u ? "rgba(254, 64, 76, 0.4)" : "rgba(153, 153, 153, 0.6)"
+      color: p ? "rgba(254, 64, 76, 0.4)" : "rgba(153, 153, 153, 0.6)"
     }
   };
-  return s === "select" && (M = {
-    ...M,
+  return s === "select" && (T = {
+    ...T,
     ...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,
+  }), s !== "custom" ? /* @__PURE__ */ z(R, { sx: y.formInputWrapper, children: [
+    /* @__PURE__ */ r("label", { htmlFor: `form-input-${e}`, children: /* @__PURE__ */ r(k, { sx: y.label, children: `${o} ${l ? "*" : ""}` }) }),
+    /* @__PURE__ */ r(R, { sx: y.textfieldWrapper, children: /* @__PURE__ */ r(
+      de,
       {
-        title: y && /* @__PURE__ */ S(A, { type: "subtitleSmall", textColor: "white", children: [
-          /* @__PURE__ */ r(ee, { sx: x.errorIcon }),
-          y
+        title: M && /* @__PURE__ */ z(k, { type: "subtitleSmall", textColor: "white", children: [
+          /* @__PURE__ */ r(ee, { sx: y.errorIcon }),
+          M
         ] }),
         placement: "bottom",
         arrow: !0,
         componentsProps: {
           tooltip: {
-            sx: x.tooltip
+            sx: y.tooltip
           },
           popper: {
-            sx: x.tooltipPopper
+            sx: y.tooltipPopper
           }
         },
         children: /* @__PURE__ */ r(
-          fe,
+          me,
           {
             id: `form-input-${e}`,
-            autoFocus: $,
+            autoFocus: C,
             name: e,
             type: s,
             select: s === "select",
             value: a,
-            onChange: T,
+            onChange: j,
             placeholder: d,
             required: l,
-            disabled: v,
-            error: u,
+            disabled: b,
+            error: p,
             InputProps: {
-              startAdornment: /* @__PURE__ */ r(G, { position: "start", children: f }),
-              endAdornment: /* @__PURE__ */ r(G, { position: "end", children: h })
+              startAdornment: /* @__PURE__ */ r(Q, { position: "start", children: f }),
+              endAdornment: /* @__PURE__ */ r(Q, { position: "end", children: N })
             },
             SelectProps: {
               renderValue: (n) => {
-                const b = m == null ? void 0 : m.find(
-                  (C) => typeof C == "object" ? C.value === n : C === n
+                const g = m == null ? void 0 : m.find(
+                  (x) => typeof x == "object" ? x.value === n : x === n
                 );
-                return typeof b == "object" ? b.name : b;
+                return typeof g == "object" ? g.name : g;
               },
               MenuProps: {
                 PaperProps: {
-                  sx: x.selectDropdown
+                  sx: y.selectDropdown
                 }
               }
             },
-            sx: M,
+            sx: T,
             children: s === "select" && (m == null ? void 0 : m.map((n) => {
-              const b = typeof n == "object", C = b ? n.value === a : n === a, E = {
+              const g = typeof n == "object", x = g ? n.value === a : n === a, O = {
                 display: "flex",
                 justifyContent: "space-between",
                 alignItems: "center",
-                color: C ? "black" : R.darkGrey,
+                color: x ? "black" : P.darkGrey,
                 gap: "1rem"
               };
-              return /* @__PURE__ */ S(
+              return /* @__PURE__ */ z(
                 Le,
                 {
-                  value: b ? n.value : n,
-                  sx: E,
+                  value: g ? n.value : n,
+                  sx: O,
                   children: [
-                    b ? n.name : n,
-                    C && /* @__PURE__ */ r("img", { src: ce.success, alt: "selected-option" })
+                    g ? n.name : n,
+                    x && /* @__PURE__ */ r("img", { src: Ue, alt: "selected-option" })
                   ]
                 },
-                b ? n.name : n
+                g ? n.name : n
               );
             }))
           }
@@ -513,5 +512,5 @@ const Xe = ({
   ] }) : /* @__PURE__ */ r(se, {});
 };
 export {
-  Xe as default
+  He as default
 };

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

@@ -1,192 +1,197 @@
-import { jsx as u, jsxs as j } from "react/jsx-runtime";
-import { useState as v, useCallback as H, useEffect as K } from "react";
-import S from "../../cell/Button/index.js";
-import { T as L } from "../../../index-03287c17.js";
-import f from "./Form.styles.js";
-import { createNestedObject as R, deepMergeObjects as z, getLocalDateTime as G } from "./Form.utils.js";
-import J from "./FormInput.js";
-import { s as Q } from "../../../styled-126c6a62.js";
-import { B as b } from "../../../Tooltip-b926c320.js";
-const U = Q("div")({
+import { jsx as u, jsxs as v } from "react/jsx-runtime";
+import { useState as S, useCallback as H, useEffect as L } from "react";
+import j from "../../cell/Button/index.js";
+import { T as R } from "../../../index-03287c17.js";
+import d from "./Form.styles.js";
+import { getLocalDateTime as z, createNestedObject as G, deepMergeObjects as J } from "./Form.utils.js";
+import Q from "./FormInput.js";
+import { s as U } from "../../../styled-126c6a62.js";
+import { B as x } from "../../../Tooltip-b926c320.js";
+const X = U("div")({
   marginTop: "0.75rem"
-}), oe = ({
-  config: o,
+}), me = ({
+  config: i,
   submitText: V = "Submit",
   handleSubmit: _,
-  handleInvalidData: c,
-  cancelText: C = "Cancel",
-  handleCancel: E,
-  onChange: h,
-  formStyles: O = {},
+  handleInvalidData: h,
+  cancelText: E = "Cancel",
+  handleCancel: O,
+  onChange: f,
+  formStyles: C = {},
   formWrapperStyles: T = {},
   formFieldsWrapperStyles: A = {},
-  buttonWrapperStyles: D = {},
-  customFields: x = {}
+  buttonWrapperStyles: B = {},
+  customFields: y = {}
 }) => {
-  const [p, y] = v({}), [B, g] = v([]);
-  function M(e, t) {
-    y((n) => ({
+  const [l, b] = S({}), [M, g] = S([]);
+  function N(t, e) {
+    b((n) => ({
       ...n,
-      [e]: t
-    })), h == null || h(e, t), g([]);
+      [t]: e
+    })), f == null || f(t, e), g([]);
   }
   function F() {
-    const e = {};
-    o == null || o.forEach((t) => {
-      if (t.preFillWithDateTime && t.type === "text") {
-        const n = G();
-        e[t.name] = n;
+    const t = {};
+    i == null || i.forEach((e) => {
+      if (e.preFillWithDateTime && e.type === "text") {
+        const n = z();
+        t[e.name] = n;
       } else
-        e[t.name] = t.defaultValue || "";
-    }), y(e), g([]);
+        t[e.name] = e.defaultValue || "";
+    }), b(t), g([]);
   }
-  function N() {
-    const e = [];
-    return o == null || o.forEach((t) => {
-      const { name: n, label: r, type: a, validation: s, required: i } = t, m = p[n], l = n;
+  function k() {
+    const t = [];
+    return i == null || i.forEach((e) => {
+      const { name: n, label: r, type: p, validation: s, required: a } = e, o = l[n], m = n;
       if (s)
-        if (a === "number") {
-          const d = parseInt(m);
-          s.min && d < s.min && e.push({
-            field: l,
-            value: m,
+        if (p === "number") {
+          const c = parseInt(o);
+          s.min && c < s.min && t.push({
+            field: m,
+            value: o,
             message: s.invalid_message
-          }), s.max && d > s.max && e.push({
-            field: l,
-            value: m,
+          }), s.max && c > s.max && t.push({
+            field: m,
+            value: o,
             message: s.invalid_message
-          }), isNaN(d) && e.push({
-            field: l,
-            value: m,
+          }), isNaN(c) && t.push({
+            field: m,
+            value: o,
             message: "Invalid number"
           });
         } else
-          a === "text" && (s.min_length && m.length < s.min_length && e.push({
-            field: l,
-            value: m,
+          p === "text" && (s.min_length && o.length < s.min_length && t.push({
+            field: m,
+            value: o,
             message: s.invalid_message
-          }), s.max_length && m.length > s.max_length && e.push({
-            field: l,
-            value: m,
+          }), s.max_length && o.length > s.max_length && t.push({
+            field: m,
+            value: o,
             message: s.invalid_message
-          }), s.pattern && !new RegExp(s.pattern).test(m) && e.push({
-            field: l,
-            value: m,
+          }), s.pattern && !new RegExp(s.pattern).test(o) && t.push({
+            field: m,
+            value: o,
             message: s.invalid_message
           }));
-      i && !m && e.push({
-        field: l,
-        value: m,
+      a && !o && t.push({
+        field: m,
+        value: o,
         message: `${r} is required`
       });
-    }), g(e), e.length && (c == null || c(e)), !e.length;
+    }), g(t), t.length && (h == null || h(t)), !t.length;
   }
-  const k = H(
-    (e) => {
-      let t = {};
-      return e == null || e.forEach((n) => {
-        const { name: r, type: a, submitDataKey: s } = n;
-        if (s) {
-          const i = R(
-            s,
-            a,
-            p[r]
-          );
-          t = z(t, i);
-        } else
-          t[r] = a === "number" ? parseInt(p[r]) : p[r];
-      }), t;
+  const D = H(
+    (t) => {
+      let e = {};
+      return t == null || t.forEach((n) => {
+        const { name: r, type: p, submitDataKey: s } = n, a = p === "number" ? parseInt(l[r]) : l[r];
+        function o(m) {
+          if (m.indexOf(".") !== -1) {
+            const c = G(
+              m,
+              p,
+              l[r]
+            );
+            e = J(e, c);
+          } else
+            e[m] = a;
+        }
+        typeof s != "string" && (s != null && s.length) ? s.forEach((m) => {
+          o(m);
+        }) : typeof s == "string" && s ? o(s) : e[r] = a;
+      }), e;
     },
-    [p]
+    [l]
   );
-  function I(e) {
-    if (e.preventDefault(), N()) {
-      const n = k(o);
+  function I(t) {
+    if (t.preventDefault(), k()) {
+      const n = D(i);
       _(n);
     }
   }
   function W() {
-    F(), E();
+    F(), O();
   }
-  function q(e) {
-    const t = B.find(
-      (r) => r.field === e.name
+  function q(t) {
+    const e = M.find(
+      (r) => r.field === t.name
     ), n = {
-      ...e,
-      value: p[e.name],
-      handleChange: M,
-      error: !!t,
-      helperText: t == null ? void 0 : t.message
+      ...t,
+      value: l[t.name],
+      handleChange: N,
+      error: !!e,
+      helperText: e == null ? void 0 : e.message
     };
-    if (e.hidden)
+    if (t.hidden)
       return null;
-    if (e.type === "custom" && e.customComponent && x[e.customComponent]) {
-      const { component: r, props: a } = x[e.customComponent], s = r, i = {
+    if (t.type === "custom" && t.customComponent && y[t.customComponent]) {
+      const { component: r, props: p } = y[t.customComponent], s = r, a = {
         ...n,
-        ...a
+        ...p
       };
-      if (s && i)
-        return /* @__PURE__ */ u(s, { ...i }, e.name);
+      if (s && a)
+        return /* @__PURE__ */ u(s, { ...a }, t.name);
     } else
-      return /* @__PURE__ */ u(J, { ...n }, e.name);
+      return /* @__PURE__ */ u(Q, { ...n }, t.name);
   }
   function P() {
-    return o.reduce(
-      (t, n) => {
+    return i.reduce(
+      (e, n) => {
         const { groupName: r } = n;
-        if (!t.length)
-          t.push(r ? [r, n] : [n]);
+        if (!e.length)
+          e.push(r ? [r, n] : [n]);
         else if (r) {
-          const s = t.findIndex((i) => i[0] === r);
-          s === -1 ? t.push([r, n]) : t[s].push(n);
+          const s = e.findIndex((a) => a[0] === r);
+          s === -1 ? e.push([r, n]) : e[s].push(n);
         } else {
-          const s = t[t.length - 1];
-          typeof s[0] == "string" ? t.push([n]) : s.push(n);
+          const s = e[e.length - 1];
+          typeof s[0] == "string" ? e.push([n]) : s.push(n);
         }
-        return t;
+        return e;
       },
       []
     ).map(
-      (t) => {
-        const n = typeof t[0] == "string";
+      (e) => {
+        const n = typeof e[0] == "string";
         return /* @__PURE__ */ u(
-          U,
+          X,
           {
-            children: t.map((r) => typeof r == "string" ? /* @__PURE__ */ u(
-              L,
+            children: e.map((r) => typeof r == "string" ? /* @__PURE__ */ u(
+              R,
               {
                 type: "headingSmall",
-                sx: f.heading,
+                sx: d.heading,
                 children: r
               },
               r
             ) : q(r))
           },
-          `group-${n ? t[0] : t[0].name}`
+          `group-${n ? e[0] : e[0].name}`
         );
       }
     );
   }
-  K(() => {
+  L(() => {
     F();
   }, []);
   const $ = {
-    ...f.alignVertical,
-    ...O
+    ...d.alignVertical,
+    ...C
   }, w = {
-    ...f.alignVertical,
+    ...d.alignVertical,
     marginTop: "1rem",
     gap: "0.5rem",
-    ...D
+    ...B
   };
-  return /* @__PURE__ */ u(b, { sx: T, children: /* @__PURE__ */ j("form", { style: $, children: [
-    /* @__PURE__ */ u(b, { sx: A, children: Object.keys(p).length && P() }),
-    /* @__PURE__ */ j(b, { sx: w, children: [
-      /* @__PURE__ */ u(S, { type: "submit", onClick: I, children: V }),
-      /* @__PURE__ */ u(S, { onClick: W, children: C })
+  return /* @__PURE__ */ u(x, { sx: T, children: /* @__PURE__ */ v("form", { style: $, children: [
+    /* @__PURE__ */ u(x, { sx: A, children: Object.keys(l).length && P() }),
+    /* @__PURE__ */ v(x, { sx: w, children: [
+      /* @__PURE__ */ u(j, { type: "submit", onClick: I, children: V }),
+      /* @__PURE__ */ u(j, { onClick: W, children: E })
     ] })
   ] }) });
 };
 export {
-  oe as default
+  me as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loopr-ai/craft",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "description": "Component library based out of Material UI customized to support Loopr AI products",
   "homepage": "https://loopr.ai",
   "author": {

package/dist/global/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const images: {
-    success: string;
-};