@loopr-ai/craft 0.8.1 → 0.8.2

package/dist/components/cell/Button/index.js

@@ -1,31 +1,32 @@
 import { jsx as C, jsxs as F } from "react/jsx-runtime";
-import { getColorToHex as v } from "../../../global/colors.js";
-import { g as U, c as e, a as t, e as b, _ as D, P as a } from "../../../createTheme-759a022d.js";
-import * as p from "react";
-import { g as H, s as y, r as A, e as q, a as J, c as R, b as K } from "../../../styled-78608e1f.js";
-import { B as Q } from "../../../ButtonBase-08b16b61.js";
-function X(o) {
-  return U("MuiButton", o);
+import * as u from "react";
+import { forwardRef as U } from "react";
+import { getColorToHex as b } from "../../../global/colors.js";
+import { g as D, c as s, a as t, e as g, _ as H, P as a } from "../../../createTheme-759a022d.js";
+import { g as A, s as y, r as q, e as J, a as K, c as R, b as Q } from "../../../styled-78608e1f.js";
+import { B as X } from "../../../ButtonBase-08b16b61.js";
+function Y(o) {
+  return D("MuiButton", o);
 }
-const Y = H("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), g = Y, k = /* @__PURE__ */ p.createContext({});
+const Z = A("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), x = Z, k = /* @__PURE__ */ u.createContext({});
 process.env.NODE_ENV !== "production" && (k.displayName = "ButtonGroupContext");
-const Z = k, N = /* @__PURE__ */ p.createContext(void 0);
+const w = k, N = /* @__PURE__ */ u.createContext(void 0);
 process.env.NODE_ENV !== "production" && (N.displayName = "ButtonGroupButtonContext");
-const w = N, oo = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"], no = (o) => {
+const oo = N, no = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"], ao = (o) => {
   const {
     color: n,
     disableElevation: i,
-    fullWidth: l,
+    fullWidth: e,
     size: r,
-    variant: c,
-    classes: s
-  } = o, x = {
-    root: ["root", c, `${c}${e(n)}`, `size${e(r)}`, `${c}Size${e(r)}`, n === "inherit" && "colorInherit", i && "disableElevation", l && "fullWidth"],
+    variant: l,
+    classes: c
+  } = o, d = {
+    root: ["root", l, `${l}${s(n)}`, `size${s(r)}`, `${l}Size${s(r)}`, n === "inherit" && "colorInherit", i && "disableElevation", e && "fullWidth"],
     label: ["label"],
-    startIcon: ["startIcon", `iconSize${e(r)}`],
-    endIcon: ["endIcon", `iconSize${e(r)}`]
-  }, f = K(x, X, s);
-  return t({}, s, f);
+    startIcon: ["startIcon", `iconSize${s(r)}`],
+    endIcon: ["endIcon", `iconSize${s(r)}`]
+  }, f = Q(d, Y, c);
+  return t({}, c, f);
 }, E = (o) => t({}, o.size === "small" && {
   "& > *:nth-of-type(1)": {
     fontSize: 18
@@ -38,22 +39,22 @@ const w = N, oo = ["children", "color", "component", "className", "disabled", "d
   "& > *:nth-of-type(1)": {
     fontSize: 22
   }
-}), ao = y(Q, {
-  shouldForwardProp: (o) => A(o) || o === "classes",
+}), io = y(X, {
+  shouldForwardProp: (o) => q(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
   overridesResolver: (o, n) => {
     const {
       ownerState: i
     } = o;
-    return [n.root, n[i.variant], n[`${i.variant}${e(i.color)}`], n[`size${e(i.size)}`], n[`${i.variant}Size${e(i.size)}`], i.color === "inherit" && n.colorInherit, i.disableElevation && n.disableElevation, i.fullWidth && n.fullWidth];
+    return [n.root, n[i.variant], n[`${i.variant}${s(i.color)}`], n[`size${s(i.size)}`], n[`${i.variant}Size${s(i.size)}`], i.color === "inherit" && n.colorInherit, i.disableElevation && n.disableElevation, i.fullWidth && n.fullWidth];
   }
 })(({
   theme: o,
   ownerState: n
 }) => {
-  var i, l;
-  const r = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], c = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
+  var i, e;
+  const r = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], l = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
   return t({}, o.typography.button, {
     minWidth: 64,
     padding: "6px 16px",
@@ -63,26 +64,26 @@ const w = N, oo = ["children", "color", "component", "className", "disabled", "d
     }),
     "&:hover": t({
       textDecoration: "none",
-      backgroundColor: o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette.text.primary, o.palette.action.hoverOpacity),
+      backgroundColor: o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette.text.primary, o.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
         backgroundColor: "transparent"
       }
     }, n.variant === "text" && n.color !== "inherit" && {
-      backgroundColor: o.vars ? `rgba(${o.vars.palette[n.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[n.color].main, o.palette.action.hoverOpacity),
+      backgroundColor: o.vars ? `rgba(${o.vars.palette[n.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette[n.color].main, o.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
         backgroundColor: "transparent"
       }
     }, n.variant === "outlined" && n.color !== "inherit" && {
       border: `1px solid ${(o.vars || o).palette[n.color].main}`,
-      backgroundColor: o.vars ? `rgba(${o.vars.palette[n.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[n.color].main, o.palette.action.hoverOpacity),
+      backgroundColor: o.vars ? `rgba(${o.vars.palette[n.color].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette[n.color].main, o.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
         backgroundColor: "transparent"
       }
     }, n.variant === "contained" && {
-      backgroundColor: o.vars ? o.vars.palette.Button.inheritContainedHoverBg : c,
+      backgroundColor: o.vars ? o.vars.palette.Button.inheritContainedHoverBg : l,
       boxShadow: (o.vars || o).shadows[4],
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
@@ -99,10 +100,10 @@ const w = N, oo = ["children", "color", "component", "className", "disabled", "d
     "&:active": t({}, n.variant === "contained" && {
       boxShadow: (o.vars || o).shadows[8]
     }),
-    [`&.${g.focusVisible}`]: t({}, n.variant === "contained" && {
+    [`&.${x.focusVisible}`]: t({}, n.variant === "contained" && {
       boxShadow: (o.vars || o).shadows[6]
     }),
-    [`&.${g.disabled}`]: t({
+    [`&.${x.disabled}`]: t({
       color: (o.vars || o).palette.action.disabled
     }, n.variant === "outlined" && {
       border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
@@ -120,12 +121,12 @@ const w = N, oo = ["children", "color", "component", "className", "disabled", "d
     border: "1px solid currentColor"
   }, n.variant === "outlined" && n.color !== "inherit" && {
     color: (o.vars || o).palette[n.color].main,
-    border: o.vars ? `1px solid rgba(${o.vars.palette[n.color].mainChannel} / 0.5)` : `1px solid ${b(o.palette[n.color].main, 0.5)}`
+    border: o.vars ? `1px solid rgba(${o.vars.palette[n.color].mainChannel} / 0.5)` : `1px solid ${g(o.palette[n.color].main, 0.5)}`
   }, n.variant === "contained" && {
     color: o.vars ? (
       // this is safe because grey does not change between default light/dark mode
       o.vars.palette.text.primary
-    ) : (i = (l = o.palette).getContrastText) == null ? void 0 : i.call(l, o.palette.grey[300]),
+    ) : (i = (e = o.palette).getContrastText) == null ? void 0 : i.call(e, o.palette.grey[300]),
     backgroundColor: o.vars ? o.vars.palette.Button.inheritContainedBg : r,
     boxShadow: (o.vars || o).shadows[2]
   }, n.variant === "contained" && n.color !== "inherit" && {
@@ -162,23 +163,23 @@ const w = N, oo = ["children", "color", "component", "className", "disabled", "d
   "&:hover": {
     boxShadow: "none"
   },
-  [`&.${g.focusVisible}`]: {
+  [`&.${x.focusVisible}`]: {
     boxShadow: "none"
   },
   "&:active": {
     boxShadow: "none"
   },
-  [`&.${g.disabled}`]: {
+  [`&.${x.disabled}`]: {
     boxShadow: "none"
   }
-}), io = y("span", {
+}), ro = y("span", {
   name: "MuiButton",
   slot: "StartIcon",
   overridesResolver: (o, n) => {
     const {
       ownerState: i
     } = o;
-    return [n.startIcon, n[`iconSize${e(i.size)}`]];
+    return [n.startIcon, n[`iconSize${s(i.size)}`]];
   }
 })(({
   ownerState: o
@@ -188,14 +189,14 @@ const w = N, oo = ["children", "color", "component", "className", "disabled", "d
   marginLeft: -4
 }, o.size === "small" && {
   marginLeft: -2
-}, E(o))), ro = y("span", {
+}, E(o))), to = y("span", {
   name: "MuiButton",
   slot: "EndIcon",
   overridesResolver: (o, n) => {
     const {
       ownerState: i
     } = o;
-    return [n.endIcon, n[`iconSize${e(i.size)}`]];
+    return [n.endIcon, n[`iconSize${s(i.size)}`]];
   }
 })(({
   ownerState: o
@@ -205,12 +206,12 @@ const w = N, oo = ["children", "color", "component", "className", "disabled", "d
   marginLeft: 8
 }, o.size === "small" && {
   marginRight: -2
-}, E(o))), O = /* @__PURE__ */ p.forwardRef(function(n, i) {
-  const l = p.useContext(Z), r = p.useContext(w), c = q(l, n), s = J({
-    props: c,
+}, E(o))), O = /* @__PURE__ */ u.forwardRef(function(n, i) {
+  const e = u.useContext(w), r = u.useContext(oo), l = J(e, n), c = K({
+    props: l,
     name: "MuiButton"
   }), {
-    children: x,
+    children: d,
     color: f = "primary",
     component: z = "button",
     className: T,
@@ -224,7 +225,7 @@ const w = N, oo = ["children", "color", "component", "className", "disabled", "d
     startIcon: $,
     type: h,
     variant: V = "text"
-  } = s, L = D(s, oo), u = t({}, s, {
+  } = c, L = H(c, no), v = t({}, c, {
     color: f,
     component: z,
     disabled: m,
@@ -234,27 +235,27 @@ const w = N, oo = ["children", "color", "component", "className", "disabled", "d
     size: S,
     type: h,
     variant: V
-  }), d = no(u), _ = $ && /* @__PURE__ */ C(io, {
-    className: d.startIcon,
-    ownerState: u,
+  }), p = ao(v), _ = $ && /* @__PURE__ */ C(ro, {
+    className: p.startIcon,
+    ownerState: v,
     children: $
-  }), G = I && /* @__PURE__ */ C(ro, {
-    className: d.endIcon,
-    ownerState: u,
+  }), G = I && /* @__PURE__ */ C(to, {
+    className: p.endIcon,
+    ownerState: v,
     children: I
   }), j = r || "";
-  return /* @__PURE__ */ F(ao, t({
-    ownerState: u,
-    className: R(l.className, d.root, T, j),
+  return /* @__PURE__ */ F(io, t({
+    ownerState: v,
+    className: R(e.className, p.root, T, j),
     component: z,
     disabled: m,
     focusRipple: !B,
-    focusVisibleClassName: R(d.focusVisible, W),
+    focusVisibleClassName: R(p.focusVisible, W),
     ref: i,
     type: h
   }, L, {
-    classes: d,
-    children: [_, x, G]
+    classes: p,
+    children: [_, d, G]
   }));
 });
 process.env.NODE_ENV !== "production" && (O.propTypes = {
@@ -351,35 +352,47 @@ process.env.NODE_ENV !== "production" && (O.propTypes = {
    */
   variant: a.oneOfType([a.oneOf(["contained", "outlined", "text"]), a.string])
 });
-const to = O, uo = ({
-  variant: o = "contained",
-  disabled: n = !1,
-  look: i = "normal",
-  children: l,
-  sx: r,
-  ...c
-}) => {
-  let s = {};
-  return i === "modified" ? (n === !1 && (s = {
-    border: "0rem",
-    backgroundColor: v("modify"),
-    color: v("primary"),
-    "&:hover": {
-      border: "0.0625rem solid",
-      borderColor: v("primary"),
-      backgroundColor: v("modify")
-    }
-  }), o = "outlined") : o === "contained" && n === !0 && (s = {
-    "&.Mui-disabled": {
-      backgroundColor: "#C4C4C4",
-      color: "#000000",
-      boxShadow: "none"
-    }
-  }), r = {
-    ...s,
-    ...r
-  }, /* @__PURE__ */ C(to, { variant: o, disabled: n, sx: r, ...c, children: l });
-};
+const so = O, bo = U(
+  ({
+    variant: o = "contained",
+    disabled: n = !1,
+    look: i = "normal",
+    children: e,
+    sx: r,
+    ...l
+  }, c) => {
+    let d = {};
+    return i === "modified" ? (n === !1 && (d = {
+      border: "0rem",
+      backgroundColor: b("modify"),
+      color: b("primary"),
+      "&:hover": {
+        border: "0.0625rem solid",
+        borderColor: b("primary"),
+        backgroundColor: b("modify")
+      }
+    }), o = "outlined") : o === "contained" && n === !0 && (d = {
+      "&.Mui-disabled": {
+        backgroundColor: "#C4C4C4",
+        color: "#000000",
+        boxShadow: "none"
+      }
+    }), r = {
+      ...d,
+      ...r
+    }, /* @__PURE__ */ C(
+      so,
+      {
+        ref: c,
+        variant: o,
+        disabled: n,
+        sx: r,
+        ...l,
+        children: e
+      }
+    );
+  }
+);
 export {
-  uo as default
+  bo as default
 };

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

@@ -62,4 +62,8 @@ export interface InvalidData {
     field: string;
     value: string;
 }
+export interface FormRefs {
+    submitButtonRef: React.RefObject<HTMLButtonElement>;
+    cancelButtonRef: React.RefObject<HTMLButtonElement>;
+}
 export {};

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

@@ -20,15 +20,20 @@ interface FormProps {
 }
 /**
  * Form component
- * @param config - Array of ConfigField objects
+ * @param config - Array of form fields
  * @param submitText - Text for submit button
  * @param handleSubmit - Function to handle form submission
- * @param handleInvalidData - Function to handle invalid form data
+ * @param handleInvalidData - Function to handle invalid data
  * @param cancelText - Text for cancel button
  * @param handleCancel - Function to handle form cancel
  * @param onChange - Function to handle form field change
- * @param customFields - Custom form fields
- * @param style - Form style
+ * @param customFields - Object containing custom fields
+ * @param formWrapperStyles - Styles for form wrapper
+ * @param formFieldsWrapperStyles - Styles for form fields wrapper
+ * @param formStyles - Styles for form
+ * @param buttonWrapperStyles - Styles for button wrapper
+ * @param preFillValues - Object containing pre-fill values
+ * @param formAdornments - Object containing form adornments
  */
 declare const Form: CraftFC<FormProps>;
 export default Form;

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

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

package/package.json

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