@loopr-ai/craft 0.9.0 → 0.10.0

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

@@ -4,6 +4,7 @@ export interface FormInputProps extends SelectField {
     value: string;
     handleChange: (name: string, value: string) => void;
     error?: boolean;
+    authHeader?: string;
 }
 /**
  * Form input field

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

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
-import j from "./RadioInput/index.js";
-import C from "./TextfieldInput/index.js";
-const v = ({
+import C from "./RadioInput/index.js";
+import F from "./TextfieldInput/index.js";
+const w = ({
   name: t,
   label: u,
   type: o,
@@ -16,13 +16,14 @@ const v = ({
   error: i,
   helperText: m,
   autofocus: x,
-  inputAdornments: a
+  inputAdornments: a,
+  authHeader: h
 }) => {
-  function I(h) {
-    d(t, h.target.value);
+  function I(j) {
+    d(t, j.target.value);
   }
   return o === "custom" ? null : o === "radio" ? /* @__PURE__ */ c(
-    j,
+    C,
     {
       name: t,
       label: u,
@@ -35,7 +36,7 @@ const v = ({
       inputAdornments: a
     }
   ) : /* @__PURE__ */ c(
-    C,
+    F,
     {
       name: t,
       label: u,
@@ -51,10 +52,11 @@ const v = ({
       error: i,
       helperText: m,
       inputAdornments: a,
-      autofocus: x
+      autofocus: x,
+      authHeader: h
     }
   );
 };
 export {
-  v as default
+  w as default
 };

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

@@ -18,6 +18,7 @@ interface TextfieldInputProps {
     helperText?: string;
     inputAdornments?: InputAdornments;
     autofocus?: boolean;
+    authHeader?: string;
 }
 declare const TextfieldInput: CraftFC<TextfieldInputProps>;
 export default TextfieldInput;

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

@@ -1,32 +1,32 @@
-import ee, { jsx as d, jsxs as q } from "react/jsx-runtime";
-import { r as te, i as oe } from "../../../../createSvgIcon-59e7bc15.js";
-import * as $ from "react";
-import { useState as se, useMemo as V, useCallback as ne, useEffect as ae } from "react";
+import te, { jsx as d, jsxs as q } from "react/jsx-runtime";
+import { r as oe, i as se } from "../../../../createSvgIcon-59e7bc15.js";
+import * as M from "react";
+import { useState as ne, useMemo as V, useCallback as ae, useEffect as re } from "react";
 import { customColors as O } from "../../../../global/colors.js";
-import re from "../ErrorMessage/index.js";
-import ie from "../Form.styles.js";
-import le from "../Label/index.js";
-import N from "./TextfieldInput.styles.js";
-import { B as ce } from "../../../../Box-96e795c4.js";
-import { L as B, T as de } from "../../../../TextField-df89b641.js";
-import { g as W, a as I, _ as K, P as t, b as R, f as S } from "../../../../createTheme-d2329909.js";
-import { g as j, s as H, b as J, c as w, e as Q, r as pe } from "../../../../styled-8f7db30d.js";
-import { u as ue, F as me } from "../../../../useFormControl-b25c5813.js";
-import { M as fe } from "../../../../index-ae3eb123.js";
-import { B as be } from "../../../../ButtonBase-46c20f20.js";
+import ie from "../ErrorMessage/index.js";
+import le from "../Form.styles.js";
+import ce from "../Label/index.js";
+import P from "./TextfieldInput.styles.js";
+import { B as de } from "../../../../Box-96e795c4.js";
+import { L as B, T as pe } from "../../../../TextField-df89b641.js";
+import { g as W, a as x, _ as K, P as t, b as R, f as N } from "../../../../createTheme-d2329909.js";
+import { g as j, s as J, b as Q, c as w, e as X, r as ue } from "../../../../styled-8f7db30d.js";
+import { u as me, F as fe } from "../../../../useFormControl-b25c5813.js";
+import { M as be } from "../../../../index-ae3eb123.js";
+import { B as ve } from "../../../../ButtonBase-46c20f20.js";
 import { d as k } from "../../../../dividerClasses-9354a5c9.js";
-import { c as ve, u as ge } from "../../../../TransitionGroupContext-21923db7.js";
-function ye(e) {
+import { c as ge, u as ye } from "../../../../TransitionGroupContext-21923db7.js";
+function Ie(e) {
   return W("MuiInputAdornment", e);
 }
-const Ie = j("MuiInputAdornment", ["root", "filled", "standard", "outlined", "positionStart", "positionEnd", "disablePointerEvents", "hiddenLabel", "sizeSmall"]), D = Ie;
+const xe = j("MuiInputAdornment", ["root", "filled", "standard", "outlined", "positionStart", "positionEnd", "disablePointerEvents", "hiddenLabel", "sizeSmall"]), D = xe;
 var z;
-const xe = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"], Ce = (e, o) => {
+const Ce = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"], $e = (e, o) => {
   const {
     ownerState: s
   } = e;
   return [o.root, o[`position${R(s.position)}`], s.disablePointerEvents === !0 && o.disablePointerEvents, o[s.variant]];
-}, $e = (e) => {
+}, he = (e) => {
   const {
     classes: o,
     disablePointerEvents: s,
@@ -34,18 +34,18 @@ const xe = ["children", "className", "component", "disablePointerEvents", "disab
     position: r,
     size: l,
     variant: c
-  } = e, g = {
+  } = e, y = {
     root: ["root", s && "disablePointerEvents", r && `position${R(r)}`, c, n && "hiddenLabel", l && `size${R(l)}`]
   };
-  return Q(g, ye, o);
-}, he = H("div", {
+  return X(y, Ie, o);
+}, Me = J("div", {
   name: "MuiInputAdornment",
   slot: "Root",
-  overridesResolver: Ce
+  overridesResolver: $e
 })(({
   theme: e,
   ownerState: o
-}) => I({
+}) => x({
   display: "flex",
   height: "0.01em",
   // Fix IE11 flexbox alignment. To remove at some point.
@@ -67,41 +67,41 @@ const xe = ["children", "className", "component", "disablePointerEvents", "disab
 }, o.disablePointerEvents === !0 && {
   // Styles applied to the root element if `disablePointerEvents={true}`.
   pointerEvents: "none"
-})), X = /* @__PURE__ */ $.forwardRef(function(o, s) {
-  const n = J({
+})), Y = /* @__PURE__ */ M.forwardRef(function(o, s) {
+  const n = Q({
     props: o,
     name: "MuiInputAdornment"
   }), {
     children: r,
     className: l,
     component: c = "div",
-    disablePointerEvents: g = !1,
-    disableTypography: m = !1,
-    position: f,
-    variant: v
-  } = n, p = K(n, xe), b = ue() || {};
-  let i = v;
-  v && b.variant && process.env.NODE_ENV !== "production" && v === b.variant && console.error("MUI: The `InputAdornment` variant infers the variant prop you do not have to provide one."), b && !i && (i = b.variant);
-  const x = I({}, n, {
-    hiddenLabel: b.hiddenLabel,
-    size: b.size,
-    disablePointerEvents: g,
-    position: f,
+    disablePointerEvents: y = !1,
+    disableTypography: u = !1,
+    position: m,
+    variant: g
+  } = n, p = K(n, Ce), f = me() || {};
+  let i = g;
+  g && f.variant && process.env.NODE_ENV !== "production" && g === f.variant && console.error("MUI: The `InputAdornment` variant infers the variant prop you do not have to provide one."), f && !i && (i = f.variant);
+  const C = x({}, n, {
+    hiddenLabel: f.hiddenLabel,
+    size: f.size,
+    disablePointerEvents: y,
+    position: m,
     variant: i
-  }), u = $e(x);
-  return /* @__PURE__ */ d(me.Provider, {
+  }), I = he(C);
+  return /* @__PURE__ */ d(fe.Provider, {
     value: null,
-    children: /* @__PURE__ */ d(he, I({
+    children: /* @__PURE__ */ d(Me, x({
       as: c,
-      ownerState: x,
-      className: w(u.root, l),
+      ownerState: C,
+      className: w(I.root, l),
       ref: s
     }, p, {
-      children: typeof r == "string" && !m ? /* @__PURE__ */ d(fe, {
+      children: typeof r == "string" && !u ? /* @__PURE__ */ d(be, {
         color: "text.secondary",
         children: r
-      }) : /* @__PURE__ */ q($.Fragment, {
-        children: [f === "start" ? (
+      }) : /* @__PURE__ */ q(M.Fragment, {
+        children: [m === "start" ? (
           /* notranslate needed while Google Translate will not fix zero-width space issue */
           z || (z = /* @__PURE__ */ d("span", {
             className: "notranslate",
@@ -112,7 +112,7 @@ const xe = ["children", "className", "component", "disablePointerEvents", "disab
     }))
   });
 });
-process.env.NODE_ENV !== "production" && (X.propTypes = {
+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"     |
@@ -160,11 +160,11 @@ process.env.NODE_ENV !== "production" && (X.propTypes = {
    */
   variant: t.oneOf(["filled", "outlined", "standard"])
 });
-const A = X, Me = j("MuiListItemIcon", ["root", "alignItemsFlexStart"]), U = Me, Oe = j("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]), G = Oe;
-function Te(e) {
+const A = Y, Oe = j("MuiListItemIcon", ["root", "alignItemsFlexStart"]), U = Oe, Te = j("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]), G = Te;
+function Ee(e) {
   return W("MuiMenuItem", e);
 }
-const Ee = j("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]), T = Ee, Pe = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"], Ne = (e, o) => {
+const Pe = j("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]), T = Pe, Ne = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"], je = (e, o) => {
   const {
     ownerState: s
   } = e;
@@ -177,19 +177,19 @@ const Ee = j("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divid
     disableGutters: r,
     selected: l,
     classes: c
-  } = e, m = Q({
+  } = e, u = X({
     root: ["root", s && "dense", o && "disabled", !r && "gutters", n && "divider", l && "selected"]
-  }, Te, c);
-  return I({}, c, m);
-}, je = H(be, {
-  shouldForwardProp: (e) => pe(e) || e === "classes",
+  }, Ee, c);
+  return x({}, c, u);
+}, Le = J(ve, {
+  shouldForwardProp: (e) => ue(e) || e === "classes",
   name: "MuiMenuItem",
   slot: "Root",
-  overridesResolver: Ne
+  overridesResolver: je
 })(({
   theme: e,
   ownerState: o
-}) => I({}, e.typography.body1, {
+}) => x({}, e.typography.body1, {
   display: "flex",
   justifyContent: "flex-start",
   alignItems: "center",
@@ -216,16 +216,16 @@ const Ee = j("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divid
     }
   },
   [`&.${T.selected}`]: {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : S(e.palette.primary.main, e.palette.action.selectedOpacity),
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : N(e.palette.primary.main, e.palette.action.selectedOpacity),
     [`&.${T.focusVisible}`]: {
-      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : S(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
+      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)
     }
   },
   [`&.${T.selected}:hover`]: {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : S(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.hoverOpacity),
+    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})` : S(e.palette.primary.main, e.palette.action.selectedOpacity)
+      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : N(e.palette.primary.main, e.palette.action.selectedOpacity)
     }
   },
   [`&.${T.focusVisible}`]: {
@@ -255,7 +255,7 @@ const Ee = j("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divid
   [e.breakpoints.up("sm")]: {
     minHeight: "auto"
   }
-}, o.dense && I({
+}, o.dense && x({
   minHeight: 32,
   // https://m2.material.io/components/menus#specs > Dense
   paddingTop: 4,
@@ -264,49 +264,49 @@ const Ee = j("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divid
   [`& .${U.root} svg`]: {
     fontSize: "1.25rem"
   }
-}))), Y = /* @__PURE__ */ $.forwardRef(function(o, s) {
-  const n = J({
+}))), Z = /* @__PURE__ */ M.forwardRef(function(o, s) {
+  const n = Q({
     props: o,
     name: "MuiMenuItem"
   }), {
     autoFocus: r = !1,
     component: l = "li",
     dense: c = !1,
-    divider: g = !1,
-    disableGutters: m = !1,
-    focusVisibleClassName: f,
-    role: v = "menuitem",
+    divider: y = !1,
+    disableGutters: u = !1,
+    focusVisibleClassName: m,
+    role: g = "menuitem",
     tabIndex: p,
-    className: b
-  } = n, i = K(n, Pe), x = $.useContext(B), u = $.useMemo(() => ({
-    dense: c || x.dense || !1,
-    disableGutters: m
-  }), [x.dense, c, m]), h = $.useRef(null);
-  ve(() => {
-    r && (h.current ? h.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered."));
+    className: f
+  } = n, i = K(n, Ne), C = M.useContext(B), I = M.useMemo(() => ({
+    dense: c || C.dense || !1,
+    disableGutters: u
+  }), [C.dense, c, u]), b = M.useRef(null);
+  ge(() => {
+    r && (b.current ? b.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered."));
   }, [r]);
-  const E = I({}, n, {
-    dense: u.dense,
-    divider: g,
-    disableGutters: m
-  }), M = Se(n), L = ge(h, s);
-  let P;
-  return n.disabled || (P = p !== void 0 ? p : -1), /* @__PURE__ */ d(B.Provider, {
-    value: u,
-    children: /* @__PURE__ */ d(je, I({
+  const S = x({}, n, {
+    dense: I.dense,
+    divider: y,
+    disableGutters: u
+  }), $ = Se(n), L = ye(b, s);
+  let E;
+  return n.disabled || (E = p !== void 0 ? p : -1), /* @__PURE__ */ d(B.Provider, {
+    value: I,
+    children: /* @__PURE__ */ d(Le, x({
       ref: L,
-      role: v,
-      tabIndex: P,
+      role: g,
+      tabIndex: E,
       component: l,
-      focusVisibleClassName: w(M.focusVisible, f),
-      className: w(M.root, b)
+      focusVisibleClassName: w($.focusVisible, m),
+      className: w($.root, f)
     }, i, {
-      ownerState: E,
-      classes: M
+      ownerState: S,
+      classes: $
     }))
   });
 });
-process.env.NODE_ENV !== "production" && (Y.propTypes = {
+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"     |
@@ -381,16 +381,16 @@ process.env.NODE_ENV !== "production" && (Y.propTypes = {
    */
   tabIndex: t.number
 });
-const Le = Y;
-var F = {}, Re = oe;
+const Re = Z;
+var F = {}, we = se;
 Object.defineProperty(F, "__esModule", {
   value: !0
 });
-var Z = F.default = void 0, we = Re(te()), Fe = ee, _e = (0, we.default)(/* @__PURE__ */ (0, Fe.jsx)("path", {
+var H = F.default = void 0, Fe = we(oe()), _e = te, Ve = (0, Fe.default)(/* @__PURE__ */ (0, _e.jsx)("path", {
   d: "M8.12 9.29 12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7a.9959.9959 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0z"
 }), "KeyboardArrowDownRounded");
-Z = F.default = _e;
-const et = ({
+H = F.default = Ve;
+const ot = ({
   name: e,
   label: o,
   type: s,
@@ -398,16 +398,17 @@ const et = ({
   handleInputChange: r,
   placeholder: l,
   required: c,
-  disabled: g,
-  options: m,
-  optionsResponseHandler: f,
-  api_endpoint: v,
+  disabled: y,
+  options: u,
+  optionsResponseHandler: m,
+  api_endpoint: g,
   error: p,
-  helperText: b,
+  helperText: f,
   inputAdornments: i,
-  autofocus: x
+  autofocus: C,
+  authHeader: I
 }) => {
-  const [u, h] = se([]), E = V(
+  const [b, S] = ne([]), $ = V(
     () => ({
       "& .MuiSelect-select > span::before": {
         content: `'${l || ""}'`,
@@ -415,9 +416,9 @@ const et = ({
       }
     }),
     [l]
-  ), M = V(
+  ), L = V(
     () => ({
-      ...N.textfield,
+      ...P.textfield,
       "&.Mui-focused": {
         "& fieldset": {
           borderColor: p ? O.redLight : O.primary
@@ -429,28 +430,38 @@ const et = ({
       "& input::placeholder": {
         color: p ? O.redMedium : "grey"
       },
-      ...s === "select" && E
+      ...s === "select" && $
     }),
-    [p, s, E]
+    [p, s, $]
   );
-  function L(a) {
-    const y = u == null ? void 0 : u.find(
-      (C) => typeof C == "object" ? C.value === a : C === a
+  function E(a) {
+    const v = b == null ? void 0 : b.find(
+      (h) => typeof h == "object" ? h.value === a : h === a
     );
-    return typeof y == "object" ? y.name : y;
+    return typeof v == "object" ? v.name : v;
   }
-  const P = ne(async () => {
+  const ee = ae(async () => {
     var a;
-    return s !== "select" ? [] : m || (v && f ? (a = (await (await fetch(v)).json())[f.key]) == null ? void 0 : a.map((_) => ({
-      name: _[f.name],
-      value: _[f.value]
-    })) : []);
-  }, [s, f, v]);
-  return ae(() => {
-    P().then((a) => h(a));
-  }, []), /* @__PURE__ */ q(ce, { sx: ie.inputWrapper, children: [
+    if (s !== "select")
+      return [];
+    if (u)
+      return u;
+    if (g && m) {
+      const v = {
+        "Content-Type": "application/json"
+      };
+      return I && (v.Authorization = I), (a = (await (await fetch(g, { headers: v })).json())[m.key]) == null ? void 0 : a.map((_) => ({
+        name: _[m.name],
+        value: _[m.value]
+      }));
+    }
+    return [];
+  }, [s, m, g, I]);
+  return re(() => {
+    ee().then((a) => S(a));
+  }, []), /* @__PURE__ */ q(de, { sx: le.inputWrapper, children: [
     /* @__PURE__ */ d(
-      le,
+      ce,
       {
         name: e,
         label: o,
@@ -459,10 +470,10 @@ const et = ({
       }
     ),
     /* @__PURE__ */ d(
-      de,
+      pe,
       {
         id: `form-input-${e}`,
-        autoFocus: x,
+        autoFocus: C,
         name: e,
         type: s,
         select: s === "select",
@@ -470,14 +481,14 @@ const et = ({
         onChange: r,
         placeholder: l,
         required: c,
-        disabled: g,
+        disabled: y,
         error: p,
         InputProps: {
           startAdornment: /* @__PURE__ */ d(
             A,
             {
               position: "start",
-              sx: N.inputAdornment,
+              sx: P.inputAdornment,
               children: i == null ? void 0 : i.beforeInput
             }
           ),
@@ -485,41 +496,41 @@ const et = ({
             A,
             {
               position: "end",
-              sx: N.inputAdornment,
+              sx: P.inputAdornment,
               children: i == null ? void 0 : i.afterInput
             }
           )
         },
         SelectProps: {
-          renderValue: L,
-          IconComponent: Z,
+          renderValue: E,
+          IconComponent: H,
           MenuProps: {
-            sx: N.selectDropdown
+            sx: P.selectDropdown
           }
         },
-        sx: M,
-        children: s === "select" && (u == null ? void 0 : u.map((a) => {
-          const y = typeof a == "object", C = {
+        sx: L,
+        children: s === "select" && (b == null ? void 0 : b.map((a) => {
+          const v = typeof a == "object", h = {
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center",
             gap: "1rem"
           };
           return /* @__PURE__ */ d(
-            Le,
+            Re,
             {
-              value: y ? a.value : a,
-              sx: C,
-              children: y ? a.name : a
+              value: v ? a.value : a,
+              sx: h,
+              children: v ? a.name : a
             },
-            y ? a.name : a
+            v ? a.name : a
           );
         }))
       }
     ),
-    p && /* @__PURE__ */ d(re, { message: b || "" })
+    p && /* @__PURE__ */ d(ie, { message: f || "" })
   ] });
 };
 export {
-  et as default
+  ot as default
 };

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

@@ -5,7 +5,7 @@ import { ConfigField, CustomFields, FormInputAdornments, InvalidData } from "./F
 interface FormProps {
     config: Array<ConfigField>;
     submitText?: string;
-    handleSubmit: (data: any) => void;
+    handleSubmit: (data: any, authHeader?: string) => void;
     handleInvalidData?: (data: Array<InvalidData>) => void;
     cancelText?: string;
     handleCancel?: () => void;
@@ -17,6 +17,7 @@ interface FormProps {
     buttonWrapperStyles?: SxProps;
     preFillValues?: any;
     formAdornments?: FormInputAdornments;
+    authHeader?: string;
 }
 /**
  * Form component
@@ -34,6 +35,7 @@ interface FormProps {
  * @param buttonWrapperStyles - Styles for button wrapper
  * @param preFillValues - Object containing pre-fill values
  * @param formAdornments - Object containing form adornments
+ * @param authHeader - Authentication header string (e.g., "Bearer token123")
  */
 declare const Form: CraftFC<FormProps>;
 export default Form;

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

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

package/package.json

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