@loopr-ai/craft 0.7.0 → 0.7.1

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

@@ -1,8 +1,8 @@
 import { jsx as h, jsxs as G } from "react/jsx-runtime";
-import { g as I, a as l, _ as k, P as a } from "../../../createTheme-54078d82.js";
+import { g as I, a as l, _ as k, P as a } from "../../../createTheme-ca1567c6.js";
 import * as g from "react";
-import { g as D, s as M, a as E, c as R, b as U, f as F } from "../../../styled-2bc0b59e.js";
-import { c as q } from "../../../createSvgIcon-5180e4db.js";
+import { g as D, a as M, b as E, c as R, e as U, h as F } from "../../../styled-80b57810.js";
+import { c as q } from "../../../createSvgIcon-bb3d4825.js";
 import { c as V } from "../../../chainPropTypes-004bf492.js";
 const B = q(/* @__PURE__ */ h("path", {
   d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"

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

@@ -1,9 +1,9 @@
 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-54078d82.js";
+import { g as U, b as e, a as t, f as b, _ as D, P as a } from "../../../createTheme-ca1567c6.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-2bc0b59e.js";
-import { B as Q } from "../../../ButtonBase-c303b1df.js";
+import { g as H, a as y, r as A, f as q, b as J, c as R, e as K } from "../../../styled-80b57810.js";
+import { B as Q } from "../../../ButtonBase-fc1e48eb.js";
 function X(o) {
   return U("MuiButton", o);
 }

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

@@ -1,11 +1,11 @@
 import { jsx as m, jsxs as Q } from "react/jsx-runtime";
 import * as v from "react";
 import { useMemo as L } from "react";
-import { g as X, c as r, a as f, e as b, _ as Y, P as l } from "../../../createTheme-54078d82.js";
-import { g as Z, s as U, a as w, c as k, b as oo } from "../../../styled-2bc0b59e.js";
-import { c as ao } from "../../../createSvgIcon-5180e4db.js";
-import { u as lo } from "../../../TransitionGroupContext-7cd3ef83.js";
-import { B as M } from "../../../ButtonBase-c303b1df.js";
+import { g as X, b as r, a as f, f as b, _ as Y, P as l } from "../../../createTheme-ca1567c6.js";
+import { g as Z, a as U, b as w, c as k, e as oo } from "../../../styled-80b57810.js";
+import { c as ao } from "../../../createSvgIcon-bb3d4825.js";
+import { u as lo } from "../../../TransitionGroupContext-ba502e63.js";
+import { B as M } from "../../../ButtonBase-fc1e48eb.js";
 import { u as eo } from "../../../unsupportedProp-3dbf01f6.js";
 const ro = ao(/* @__PURE__ */ m("path", {
   d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"

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

@@ -1,9 +1,9 @@
 import { jsxs as j, jsx as v } from "react/jsx-runtime";
 import { getColorToHex as $ } from "../../../global/colors.js";
-import { g as D, c as n, a as l, _ as q, P as o, l as E, b as U } from "../../../createTheme-54078d82.js";
+import { g as D, b as n, a as l, _ as q, P as o, l as E, e as U } from "../../../createTheme-ca1567c6.js";
 import * as z from "react";
-import { g as w, s as h, a as A, c as F, b as K } from "../../../styled-2bc0b59e.js";
-import { u as V } from "../../../useTheme-e2efed29.js";
+import { g as w, a as h, b as A, c as F, e as K } from "../../../styled-80b57810.js";
+import { u as V } from "../../../useTheme-16446f25.js";
 import { k as P, c as x } from "../../../emotion-react.browser.esm-ff33c213.js";
 function S(r) {
   return D("MuiLinearProgress", r);

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

@@ -1,6 +1,6 @@
 import f, { jsx as r } from "react/jsx-runtime";
-import { r as c, i as p } from "../../../createSvgIcon-78477fc1.js";
-import { T as m } from "../../../TextField-b13f5aff.js";
+import { r as c, i as p } from "../../../createSvgIcon-8e5d9dc7.js";
+import { T as m } from "../../../TextField-a534df29.js";
 var e = {}, v = p;
 Object.defineProperty(e, "__esModule", {
   value: !0

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

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import { getColorToHex as e } from "../../../global/colors.js";
 import { fontCustomizations as i } from "../../../global/theme.js";
-import { M as f } from "../../../Typography-c0106ed0.js";
+import { M as f } from "../../../Typography-65e5f8a8.js";
 const c = ({
   type: o = "bodyText",
   textColor: r = "black",

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

@@ -1,13 +1,13 @@
 import { jsx as c, jsxs as W, Fragment as q } from "react/jsx-runtime";
 import * as x from "react";
 import { useState as H, useCallback as J, useEffect as K } from "react";
-import { u as Q, F as X, L, T as Y } from "../../../TextField-b13f5aff.js";
-import { g as S, a as v, _ as B, P as t, c as N, e as M } from "../../../createTheme-54078d82.js";
-import { g as T, s as U, a as z, c as P, b as _, r as Z } from "../../../styled-2bc0b59e.js";
-import { M as ee } from "../../../Typography-c0106ed0.js";
-import { B as te } from "../../../ButtonBase-c303b1df.js";
-import { d as A } from "../../../dividerClasses-68f129df.js";
-import { a as oe, u as se } from "../../../TransitionGroupContext-7cd3ef83.js";
+import { u as Q, F as X, L, T as Y } from "../../../TextField-a534df29.js";
+import { g as S, a as v, _ as B, P as t, b as N, f as M } from "../../../createTheme-ca1567c6.js";
+import { g as T, a as U, b as z, c as P, e as _, r as Z } from "../../../styled-80b57810.js";
+import { M as ee } from "../../../Typography-65e5f8a8.js";
+import { B as te } from "../../../ButtonBase-fc1e48eb.js";
+import { d as A } from "../../../dividerClasses-0233db5a.js";
+import { a as oe, u as se } from "../../../TransitionGroupContext-ba502e63.js";
 function ne(e) {
   return S("MuiInputAdornment", e);
 }

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const formStyles: {
+declare const styles: {
     [key: string]: React.CSSProperties;
 };
-export default formStyles;
+export default styles;

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

@@ -1,5 +1,5 @@
 const e = {
-  form: {
+  alignVertical: {
     display: "flex",
     flexDirection: "column",
     gap: "1rem"

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

@@ -1,3 +1,4 @@
+import { SxProps } from "@mui/material";
 import React from "react";
 import { CraftFC } from "../../../global/interfaces";
 import { ConfigField, CustomFields, InvalidData } from "./Form.interfaces";
@@ -10,7 +11,8 @@ interface FormProps {
     handleCancel: () => void;
     onChange?: (key: string, value: string) => void;
     customFields?: CustomFields;
-    style?: React.CSSProperties;
+    formStyles?: React.CSSProperties;
+    buttonWrapperStyles?: SxProps;
 }
 /**
  * Form component

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

@@ -1,130 +1,137 @@
-import { jsxs as N, jsx as l } from "react/jsx-runtime";
-import { useState as x, useCallback as q, useEffect as w } from "react";
-import j from "../../cell/Button/index.js";
-import A from "./FieldInput.js";
-import K from "./Form.styles.js";
-import { createNestedObject as P, deepMergeObjects as R } from "./Form.utils.js";
-const J = ({
-  config: u,
-  submitText: _ = "Submit",
+import { jsxs as j, jsx as u } from "react/jsx-runtime";
+import { useState as y, useCallback as K, useEffect as P } from "react";
+import V from "../../cell/Button/index.js";
+import R from "./FieldInput.js";
+import _ from "./Form.styles.js";
+import { createNestedObject as T, deepMergeObjects as W } from "./Form.utils.js";
+import { B as $ } from "../../../Box-8cd400c2.js";
+const U = ({
+  config: r,
+  submitText: g = "Submit",
   handleSubmit: v,
-  handleInvalidData: c,
-  cancelText: y = "Cancel",
-  handleCancel: F,
-  onChange: f,
-  style: S = {},
-  customFields: O = {}
+  handleInvalidData: p,
+  cancelText: F = "Cancel",
+  handleCancel: S,
+  onChange: c,
+  formStyles: O = {},
+  buttonWrapperStyles: C = {},
+  customFields: B = {}
 }) => {
-  const [o, b] = x({}), [V, h] = x([]);
-  function C(e, s) {
-    b((m) => ({
+  const [o, d] = y({}), [E, f] = y([]);
+  function M(e, s) {
+    d((m) => ({
       ...m,
       [e]: s
-    })), f == null || f(e, s);
+    })), c == null || c(e, s);
   }
-  function d() {
+  function x() {
     const e = {};
-    u.forEach((s) => {
+    r == null || r.forEach((s) => {
       e[s.name] = s.defaultValue || "";
-    }), b(e), h([]);
+    }), d(e), f([]);
   }
-  function E() {
+  function k() {
     const e = [];
-    return u.forEach((s) => {
-      const { name: m, label: a, type: r, validation: t, required: p } = s, n = o[m], i = m;
+    return r == null || r.forEach((s) => {
+      const { name: m, label: n, type: l, validation: t, required: b } = s, a = o[m], i = m;
       if (t)
-        if (r === "number") {
-          const g = parseInt(n);
-          t.min && g < t.min && e.push({
+        if (l === "number") {
+          const h = parseInt(a);
+          t.min && h < t.min && e.push({
             field: i,
-            value: n,
+            value: a,
             message: t.invalid_message
-          }), t.max && g > t.max && e.push({
+          }), t.max && h > t.max && e.push({
             field: i,
-            value: n,
+            value: a,
             message: t.invalid_message
-          }), isNaN(g) && e.push({
+          }), isNaN(h) && e.push({
             field: i,
-            value: n,
+            value: a,
             message: "Invalid number"
           });
         } else
-          r === "text" && (t.min_length && n.length < t.min_length && e.push({
+          l === "text" && (t.min_length && a.length < t.min_length && e.push({
             field: i,
-            value: n,
+            value: a,
             message: t.invalid_message
-          }), t.max_length && n.length > t.max_length && e.push({
+          }), t.max_length && a.length > t.max_length && e.push({
             field: i,
-            value: n,
+            value: a,
             message: t.invalid_message
-          }), t.pattern && !new RegExp(t.pattern).test(n) && e.push({
+          }), t.pattern && !new RegExp(t.pattern).test(a) && e.push({
             field: i,
-            value: n,
+            value: a,
             message: t.invalid_message
           }));
-      p && !n && e.push({
+      b && !a && e.push({
         field: i,
-        value: n,
-        message: `${a} is required`
+        value: a,
+        message: `${n} is required`
       });
-    }), h(e), e.length && (c == null || c(e)), !e.length;
+    }), f(e), e.length && (p == null || p(e)), !e.length;
   }
-  const M = q(
+  const D = K(
     (e) => {
       let s = {};
-      return e.forEach((m) => {
-        const { name: a, type: r, submitDataKey: t } = m;
+      return e == null || e.forEach((m) => {
+        const { name: n, type: l, submitDataKey: t } = m;
         if (t) {
-          const p = P(
+          const b = T(
             t,
-            r,
-            o[a]
+            l,
+            o[n]
           );
-          s = R(s, p);
+          s = W(s, b);
         } else
-          s[a] = r === "number" ? parseInt(o[a]) : o[a];
+          s[n] = l === "number" ? parseInt(o[n]) : o[n];
       }), s;
     },
     [o]
   );
-  function k(e) {
-    if (e.preventDefault(), E()) {
-      const m = M(u);
+  function N(e) {
+    if (e.preventDefault(), k()) {
+      const m = D(r);
       v(m);
     }
   }
-  function B() {
-    d(), F();
+  function q() {
+    x(), S();
   }
-  w(() => {
-    d();
+  P(() => {
+    x();
   }, []);
-  const D = {
-    ...K.form,
-    ...S
+  const w = {
+    ..._.alignVertical,
+    ...O
+  }, A = {
+    ..._.alignVertical,
+    ...C
   };
-  return /* @__PURE__ */ N("form", { style: D, children: [
-    Object.keys(o).length && u.map((e) => {
-      const s = V.find(
-        (a) => a.field === e.name
+  return /* @__PURE__ */ j("form", { style: w, children: [
+    Object.keys(o).length && (r == null ? void 0 : r.map((e) => {
+      const s = E.find(
+        (n) => n.field === e.name
       ), m = {
         ...e,
         value: o[e.name],
-        handleChange: C,
+        handleChange: M,
         error: !!s,
         helperText: s == null ? void 0 : s.message
       };
       if (e.type === "custom" && e.customComponent) {
-        const a = O[e.customComponent];
-        if (a)
-          return /* @__PURE__ */ l(a, { ...m }, e.name);
+        const n = B[e.customComponent];
+        if (n)
+          return /* @__PURE__ */ u(n, { ...m }, e.name);
       } else
-        return /* @__PURE__ */ l(A, { ...m }, e.name);
-    }),
-    /* @__PURE__ */ l(j, { type: "submit", onClick: k, children: _ }),
-    /* @__PURE__ */ l(j, { onClick: B, children: y })
+        return /* @__PURE__ */ u(R, { ...m }, e.name);
+    })),
+    /* @__PURE__ */ j($, { sx: A, children: [
+      /* @__PURE__ */ u(V, { type: "submit", onClick: N, children: g }),
+      /* @__PURE__ */ u(V, { onClick: q, children: F })
+    ] })
   ] });
 };
 export {
-  J as default
+  U as default
 };

package/dist/components/organ/ZoomControlWithDrag/ZoomControllers.js

@@ -1,5 +1,6 @@
 import "react/jsx-runtime";
-import { Z as a } from "../../../ZoomControllers-2e737c18.js";
+import { Z as p } from "../../../ZoomControllers-8a147df0.js";
+import "../../../Box-8cd400c2.js";
 export {
-  a as default
+  p as default
 };

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

@@ -1,14 +1,15 @@
 import { jsx as t, jsxs as y } from "react/jsx-runtime";
 import { useState as x, useEffect as n, useMemo as w } from "react";
-import { B as m, T as C, Z as S, a as W } from "../../../ZoomControllers-2e737c18.js";
+import { T as C, Z as S, a as W } from "../../../ZoomControllers-8a147df0.js";
+import { B as m } from "../../../Box-8cd400c2.js";
 const D = {
   position: "relative",
   borderRadius: "1rem",
   overflow: "hidden"
-}, v = ({
+}, B = ({
   children: c,
-  parentContainerProps: l,
-  zoomControllerProps: f,
+  parentContainerProps: f,
+  zoomControllerProps: l,
   defaultRotationAngle: p,
   onRotate: o,
   height: s,
@@ -16,38 +17,38 @@ const D = {
   rotatedImageScale: i = 0.55,
   ...d
 }) => {
-  const [r, h] = x(p ?? "0");
+  const [e, h] = x(p ?? "0");
   function u() {
-    h((e) => ((parseInt(e) + 90) % 360).toString());
+    h((r) => ((parseInt(r) + 90) % 360).toString());
   }
   n(() => {
-    const e = document.querySelector(".react-transform-wrapper");
-    e && (e.style.width = "100%", e.style.height = "100%");
+    const r = document.querySelector(".react-transform-wrapper");
+    r && (r.style.width = "100%", r.style.height = "100%");
   }, []), n(() => {
-    const e = document.querySelector(".react-transform-component");
-    e && (e.style.transformOrigin = "center center", e.style.height = s ?? "100%", e.style.width = a ?? "100%");
+    const r = document.querySelector(".react-transform-component");
+    r && (r.style.transformOrigin = "center center", r.style.height = s ?? "100%", r.style.width = a ?? "100%");
   }, [a, s]), n(() => {
-    o == null || o(r);
-  }, [r]);
+    o == null || o(e);
+  }, [e]);
   const g = w(() => ({
-    transform: `rotate(${r}deg) scale(${parseInt(r) === 0 || parseInt(r) === 180 ? 1 : i})`,
+    transform: `rotate(${e}deg) scale(${parseInt(e) === 0 || parseInt(e) === 180 ? 1 : i})`,
     width: "100%",
     height: "100%",
     "& img": {
       height: "100%"
     }
-  }), [r, i]);
+  }), [e, i]);
   return /* @__PURE__ */ t(
     m,
     {
       sx: D,
-      ...l,
+      ...f,
       children: /* @__PURE__ */ y(C, { ...d, children: [
         /* @__PURE__ */ t(
           S,
           {
             handleRotate: u,
-            ...f
+            ...l
           }
         ),
         /* @__PURE__ */ t(W, { children: /* @__PURE__ */ t(m, { sx: g, children: c }) })
@@ -56,5 +57,5 @@ const D = {
   );
 };
 export {
-  v as default
+  B as default
 };

package/dist/{createSvgIcon-78477fc1.js → createSvgIcon-8e5d9dc7.js}

@@ -1,7 +1,7 @@
-import { a as _, C as g, c as E, h as b } from "./createTheme-54078d82.js";
-import { c as y } from "./createSvgIcon-5180e4db.js";
-import { c as C, d as N, i as S, o as I, a as $, u as x, b as T } from "./Grow-d188a215.js";
-import { s as q, a as P, b as w, u as D, c as O } from "./TransitionGroupContext-7cd3ef83.js";
+import { a as _, C as g, b, h as E } from "./createTheme-ca1567c6.js";
+import { c as y } from "./createSvgIcon-bb3d4825.js";
+import { c as C, d as N, i as S, o as I, a as $, u as x, b as T } from "./Grow-a906cda2.js";
+import { s as q, a as P, b as w, u as D, c as O } from "./TransitionGroupContext-ba502e63.js";
 import { u as R } from "./unsupportedProp-3dbf01f6.js";
 function M(e, r) {
   return process.env.NODE_ENV === "production" ? () => null : (t, u, s, n, o) => {
@@ -30,7 +30,7 @@ const k = {
   }
 }, G = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  capitalize: E,
+  capitalize: b,
   createChainedFunction: C,
   createSvgIcon: y,
   debounce: N,
@@ -59,7 +59,7 @@ var h = { exports: {} };
   e.exports = r, e.exports.__esModule = !0, e.exports.default = e.exports;
 })(h);
 var Y = h.exports, c = {};
-const V = /* @__PURE__ */ b(G);
+const V = /* @__PURE__ */ E(G);
 var m;
 function B() {
   return m || (m = 1, function(e) {

package/dist/{createSvgIcon-5180e4db.js → createSvgIcon-bb3d4825.js}

@@ -1,9 +1,9 @@
-import { g as b, c as h, _ as w, a as y, P as o } from "./createTheme-54078d82.js";
+import { g as I, b as h, _ as w, a as y, P as o } from "./createTheme-ca1567c6.js";
 import * as v from "react";
 import { jsxs as C, jsx as z } from "react/jsx-runtime";
-import { g as T, s as N, a as R, c as O, b as B } from "./styled-2bc0b59e.js";
+import { g as T, a as N, b as R, c as O, e as B } from "./styled-80b57810.js";
 function j(e) {
-  return b("MuiSvgIcon", e);
+  return I("MuiSvgIcon", e);
 }
 T("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
 const A = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"], E = (e) => {
@@ -78,10 +78,10 @@ const A = ["children", "className", "color", "component", "fontSize", "htmlColor
     hasSvgAsChild: l
   }), x = {};
   m || (x.viewBox = a);
-  const I = E($);
+  const b = E($);
   return /* @__PURE__ */ C(V, y({
     as: c,
-    className: O(I.root, d),
+    className: O(b.root, d),
     focusable: "false",
     color: u,
     "aria-hidden": s ? void 0 : !0,

package/dist/{createTheme-54078d82.js → createTheme-ca1567c6.js}

@@ -2204,11 +2204,11 @@ export {
   ue as P,
   se as _,
   U as a,
-  qr as b,
-  bt as c,
+  bt as b,
+  En as c,
   Ge as d,
-  On as e,
-  En as f,
+  qr as e,
+  On as f,
   Ft as g,
   vn as h,
   oe as i,

package/dist/{dividerClasses-68f129df.js → dividerClasses-0233db5a.js}

@@ -1,5 +1,5 @@
-import { g as t } from "./styled-2bc0b59e.js";
-import { g as e } from "./createTheme-54078d82.js";
+import { g as t } from "./styled-80b57810.js";
+import { g as e } from "./createTheme-ca1567c6.js";
 function a(i) {
   return e("MuiDivider", i);
 }

package/dist/{exactProp-893ad662.js → exactProp-3d9df1ae.js}

@@ -1,4 +1,4 @@
-import { a as n } from "./createTheme-54078d82.js";
+import { a as n } from "./createTheme-ca1567c6.js";
 const s = "exact-prop: ​";
 function u(e) {
   return process.env.NODE_ENV === "production" ? e : n({}, e, {

package/dist/{extendSxProp-8c660b3a.js → extendSxProp-fc2654e5.js}

@@ -1,4 +1,4 @@
-import { _ as a, a as i, d as c, i as f } from "./createTheme-54078d82.js";
+import { _ as a, a as i, d as c, i as f } from "./createTheme-ca1567c6.js";
 const x = ["sx"], P = (t) => {
   var s, o;
   const n = {

package/dist/global/theme.js

@@ -1,5 +1,5 @@
 import "../assets/theme.css";
-import { f as e } from "../createTheme-54078d82.js";
+import { c as e } from "../createTheme-ca1567c6.js";
 const f = {
   50: "#fffde7",
   100: "#fff9c4",

package/dist/providers/CraftThemeProvider.js

@@ -2,9 +2,9 @@ import { jsx as u } from "react/jsx-runtime";
 import * as p from "react";
 import { useMemo as O } from "react";
 import { defaultTheme as P } from "../global/theme.js";
-import { P as n, a as c, _ as D, f as j, n as V } from "../createTheme-54078d82.js";
+import { P as n, a as c, _ as D, c as j, n as V } from "../createTheme-ca1567c6.js";
 import { c as b, a as g, T as f } from "../useThemeWithoutDefault-188598a8.js";
-import { e as v } from "../exactProp-893ad662.js";
+import { e as v } from "../exactProp-3d9df1ae.js";
 const l = /* @__PURE__ */ p.createContext(null);
 process.env.NODE_ENV !== "production" && (l.displayName = "ThemeContext");
 const E = l;