@notmrabhi/flowforge 0.1.24 → 0.1.25

package/dist/{index-clDu4NYb.js → index-CDhW7gZx.js}

@@ -3,7 +3,7 @@ import * as K from "react";
 import Ue, { createContext as Rt, useContext as Et, useState as L, useRef as Y, useCallback as H, useEffect as q, useMemo as se, useLayoutEffect as lo, Component as Ar, Fragment as Ut, forwardRef as dn, Suspense as Sr } from "react";
 import { Formik as uo, Form as co, useFormikContext as Rr } from "formik";
 import { MdInfoOutline as fo, MdDataObject as Ot, MdClose as Be, MdSearch as fn, MdKeyboardArrowRight as pn, MdContentCopy as po, MdCheckCircle as go, MdAdd as Qe, MdDeleteOutline as gn, MdUploadFile as bo, MdInsertDriveFile as ho, MdKeyboardArrowDown as mo } from "react-icons/md";
-import { Tooltip as Se, IconButton as Er, Box as N, Typography as ue, InputBase as vo, Divider as bn, Collapse as Or, Snackbar as Io, Alert as xo, Select as Fr, MenuItem as pt, TextField as wr, FormControlLabel as Tr, Switch as yo, RadioGroup as Co, Radio as Ao, Slider as So, Chip as Ro, Button as Dn } from "@mui/material";
+import { Tooltip as Se, IconButton as Er, Box as N, Typography as ce, InputBase as vo, Divider as bn, Collapse as Or, Snackbar as Io, Alert as xo, Select as Fr, MenuItem as pt, TextField as wr, FormControlLabel as Tr, Switch as yo, RadioGroup as Co, Radio as Ao, Slider as So, Chip as Ro, Button as Dn } from "@mui/material";
 import Eo, { createPortal as Oo } from "react-dom";
 import hn, { components as mn } from "react-select";
 import { jsx as _, css as Gr, keyframes as Fo } from "@emotion/react";
@@ -106,7 +106,7 @@ const de = {
   fontSize: A.FONT_SIZE_HELPER,
   marginTop: A.HELPER_MT,
   lineHeight: 1.4
-}, ce = {
+}, ue = {
   color: A.COLOR_HELPER,
   fontSize: A.FONT_SIZE_HELPER,
   marginTop: A.HELPER_MT,
@@ -459,14 +459,14 @@ function ko({ item: t }) {
           alignItems: "center"
         }, children: /* @__PURE__ */ d(Ot, { size: 14 }) }),
         /* @__PURE__ */ O(N, { sx: { minWidth: 0 }, children: [
-          /* @__PURE__ */ d(ue, { sx: {
+          /* @__PURE__ */ d(ce, { sx: {
             fontSize: 13,
             fontWeight: 500,
             color: "#0f172a",
             lineHeight: 1.35,
             overflowWrap: "anywhere"
           }, children: t.label }),
-          t.description && /* @__PURE__ */ d(ue, { sx: {
+          t.description && /* @__PURE__ */ d(ce, { sx: {
             fontSize: 11,
             color: "#64748b",
             lineHeight: 1.4,
@@ -508,7 +508,7 @@ function Hr({
             display: "flex"
           }, children: /* @__PURE__ */ d(pn, { size: 14 }) }),
           t.icon && /* @__PURE__ */ d(N, { sx: { color: "#64748b", display: "flex", mr: 0.25 }, children: t.icon }),
-          /* @__PURE__ */ d(ue, { sx: {
+          /* @__PURE__ */ d(ce, { sx: {
             fontSize: 11,
             fontWeight: 700,
             color: "#64748b",
@@ -586,7 +586,7 @@ function pd({
           flexShrink: 0
         }, children: [
           /* @__PURE__ */ d(Ot, { size: 16, color: "#6366f1" }),
-          /* @__PURE__ */ d(ue, { sx: { fontSize: 13, fontWeight: 700, flex: 1, color: "#e2e8f0" }, children: e }),
+          /* @__PURE__ */ d(ce, { sx: { fontSize: 13, fontWeight: 700, flex: 1, color: "#e2e8f0" }, children: e }),
           n === "popover" && /* @__PURE__ */ d(
             N,
             {
@@ -663,7 +663,7 @@ function pd({
           "&::-webkit-scrollbar-thumb": { background: "rgba(255,255,255,0.12)", borderRadius: 4 }
         }, children: /* @__PURE__ */ d(N, { sx: {
           "& .MuiTypography-root": { color: "#cbd5e1" }
-        }, children: l ? i.groups.map((f, g) => /* @__PURE__ */ d(Hr, { group: f, searchQuery: r }, g)) : /* @__PURE__ */ d(N, { sx: { px: 2, py: 3, textAlign: "center" }, children: /* @__PURE__ */ O(ue, { sx: { fontSize: 12, color: "#475569" }, children: [
+        }, children: l ? i.groups.map((f, g) => /* @__PURE__ */ d(Hr, { group: f, searchQuery: r }, g)) : /* @__PURE__ */ d(N, { sx: { px: 2, py: 3, textAlign: "center" }, children: /* @__PURE__ */ O(ce, { sx: { fontSize: 12, color: "#475569" }, children: [
           'No variables match "',
           r,
           '"'
@@ -673,7 +673,7 @@ function pd({
           py: 1,
           borderTop: "1px solid rgba(255,255,255,0.06)",
           flexShrink: 0
-        }, children: /* @__PURE__ */ d(ue, { sx: { fontSize: 10, color: "#475569", lineHeight: 1.4 }, children: "Click to insert · Drag onto any field" }) })
+        }, children: /* @__PURE__ */ d(ce, { sx: { fontSize: 10, color: "#475569", lineHeight: 1.4 }, children: "Click to insert · Drag onto any field" }) })
       ]
     }
   );
@@ -871,7 +871,7 @@ function Zr({
         },
         children: [
           h && i && /* @__PURE__ */ d(
-            ue,
+            ce,
             {
               component: "span",
               sx: {
@@ -1077,7 +1077,7 @@ function _r({
     }
   );
   if (f) {
-    const R = l.helperText && !s ? /* @__PURE__ */ d("small", { style: ce, children: l.helperText }) : null, P = /* @__PURE__ */ O(He, { children: [
+    const R = l.helperText && !s ? /* @__PURE__ */ d("small", { style: ue, children: l.helperText }) : null, P = /* @__PURE__ */ O(He, { children: [
       R,
       /* @__PURE__ */ d(
         Zr,
@@ -1282,7 +1282,7 @@ function _r({
       }
     }
   ), ie = /* @__PURE__ */ O(He, { children: [
-    l.helperText && !S && !s && /* @__PURE__ */ d("small", { style: ce, children: l.helperText }),
+    l.helperText && !S && !s && /* @__PURE__ */ d("small", { style: ue, children: l.helperText }),
     re,
     S && /* @__PURE__ */ d("small", { "data-testid": `${c}-error`, style: de, children: r })
   ] });
@@ -4562,7 +4562,7 @@ function Ei({
         }
       )
     ] }),
-    o && /* @__PURE__ */ d("small", { style: ce, children: o }),
+    o && /* @__PURE__ */ d("small", { style: ue, children: o }),
     p ? /* @__PURE__ */ d(
       Zr,
       {
@@ -4588,7 +4588,7 @@ function Ei({
         dataTestId: t.dataTestId
       }
     ),
-    o && /* @__PURE__ */ d("small", { style: ce, children: o }),
+    o && /* @__PURE__ */ d("small", { style: ue, children: o }),
     l()
   ] });
 }
@@ -4995,7 +4995,7 @@ function Fi({
   return /* @__PURE__ */ d(N, { sx: { display: "flex", gap: 1, flexWrap: "wrap" }, children: t.map((a) => {
     const o = a.id ?? a.name ?? "", u = a.colSpan ?? Math.max(2, Math.floor(12 / t.length)), s = `${Math.round(u / 12 * 100)}%`;
     return /* @__PURE__ */ O(N, { sx: { flex: `0 0 calc(${s} - 8px)`, minWidth: 100 }, children: [
-      a.label && /* @__PURE__ */ O(ue, { sx: { fontSize: 11, color: "#64748b", mb: 0.25, fontWeight: 500 }, children: [
+      a.label && /* @__PURE__ */ O(ce, { sx: { fontSize: 11, color: "#64748b", mb: 0.25, fontWeight: 500 }, children: [
         a.label,
         a.required && /* @__PURE__ */ d("span", { style: { color: "#ef4444" }, children: " *" })
       ] }),
@@ -5066,25 +5066,48 @@ function wi({
 }) {
   return /* @__PURE__ */ O(N, { sx: {
     position: "relative",
-    px: 1,
-    pt: 0.75,
-    pb: 0.5,
+    // Match the breathing room of the host's "Conditional / Fallback" blocks:
+    // generous interior padding, comfortable inter-block gap.
+    px: 2,
+    pt: 1.75,
+    pb: 1.5,
     bgcolor: "#fff",
     border: "1px solid #e2e8f0",
-    borderRadius: "6px",
-    mb: 0.5,
+    borderRadius: "8px",
+    mb: 1.5,
     // Children render with normal 32px bottom margin (ff-form-mb-4) so siblings
     // are well-separated. Kill the LAST child's trailing margin so the row hugs
     // its content with no extra gap below.
     "& .ff-form-mb-4:last-of-type": { marginBottom: "0 !important" }
   }, children: [
-    e && /* @__PURE__ */ O(ue, { sx: { fontSize: 11, fontWeight: 600, color: "#94a3b8", mb: 0.5, textTransform: "uppercase", letterSpacing: 0.5 }, children: [
-      e,
-      " ",
-      t + 1
-    ] }),
+    e && // Pill chip — visually consistent with the host's "Conditional" /
+    // "Fallback" tags. Sits above the first field with a 12px gap.
+    /* @__PURE__ */ O(
+      N,
+      {
+        component: "span",
+        sx: {
+          display: "inline-block",
+          fontSize: 11,
+          fontWeight: 600,
+          color: "#475569",
+          bgcolor: "#e2e8f0",
+          px: 1,
+          py: "2px",
+          borderRadius: "6px",
+          mb: 1.5,
+          textTransform: "uppercase",
+          letterSpacing: 0.5
+        },
+        children: [
+          e,
+          " ",
+          t + 1
+        ]
+      }
+    ),
     r,
-    /* @__PURE__ */ d(Se, { title: "Remove", children: /* @__PURE__ */ d("span", { style: { position: "absolute", top: 6, right: 6 }, children: /* @__PURE__ */ d(
+    /* @__PURE__ */ d(Se, { title: "Remove", children: /* @__PURE__ */ d("span", { style: { position: "absolute", top: 10, right: 10 }, children: /* @__PURE__ */ d(
       Er,
       {
         size: "small",
@@ -5141,7 +5164,7 @@ function su({
         htmlFor: t.id
       }
     ),
-    t.helperText && /* @__PURE__ */ d(ue, { sx: { fontSize: 12, color: "#6c757d", mb: 0.75 }, children: t.helperText }),
+    t.helperText && /* @__PURE__ */ d(ce, { sx: { fontSize: 12, color: "#6c757d", mb: 0.75 }, children: t.helperText }),
     i.length === 0 && /* @__PURE__ */ d(N, { sx: {
       py: 2.5,
       textAlign: "center",
@@ -5278,7 +5301,7 @@ function Gt(t) {
         htmlFor: e.id
       }
     ),
-    e.helperText && /* @__PURE__ */ d(ue, { sx: { fontSize: 12, color: "#6c757d", mb: 0.75 }, children: e.helperText }),
+    e.helperText && /* @__PURE__ */ d(ce, { sx: { fontSize: 12, color: "#6c757d", mb: 0.75 }, children: e.helperText }),
     I.length === 0 && /* @__PURE__ */ d(N, { sx: {
       py: 2.5,
       textAlign: "center",
@@ -5437,7 +5460,7 @@ function cu({ field: t, value: e, onChange: n, onBlur: i }) {
         info: t.info
       }
     ),
-    t.helperText && /* @__PURE__ */ d(ue, { sx: { fontSize: 12, color: "#6c757d", mb: 0.75 }, children: t.helperText }),
+    t.helperText && /* @__PURE__ */ d(ce, { sx: { fontSize: 12, color: "#6c757d", mb: 0.75 }, children: t.helperText }),
     r.length === 0 ? /* @__PURE__ */ d(N, { sx: {
       py: 2.5,
       textAlign: "center",
@@ -5530,7 +5553,7 @@ function du({
         dataTestId: o.dataTestId
       }
     ),
-    o.helperText && !s && /* @__PURE__ */ d("small", { style: ce, children: o.helperText }),
+    o.helperText && !s && /* @__PURE__ */ d("small", { style: ue, children: o.helperText }),
     /* @__PURE__ */ O(
       "div",
       {
@@ -5616,7 +5639,7 @@ function fu({
   );
   return /* @__PURE__ */ O("div", { children: [
     f,
-    o.helperText && !s && /* @__PURE__ */ d("small", { style: ce, children: o.helperText }),
+    o.helperText && !s && /* @__PURE__ */ d("small", { style: ue, children: o.helperText }),
     s && /* @__PURE__ */ d("small", { "data-testid": `${u}-error`, style: de, children: r })
   ] });
 }
@@ -5641,7 +5664,7 @@ function pu({
         dataTestId: o.dataTestId
       }
     ),
-    o.helperText && !s && /* @__PURE__ */ d("small", { style: ce, children: o.helperText }),
+    o.helperText && !s && /* @__PURE__ */ d("small", { style: ue, children: o.helperText }),
     /* @__PURE__ */ d(
       Co,
       {
@@ -5714,7 +5737,7 @@ function wn({
         dataTestId: o.dataTestId
       }
     ),
-    o.helperText && !s && /* @__PURE__ */ d("small", { style: ce, children: o.helperText }),
+    o.helperText && !s && /* @__PURE__ */ d("small", { style: ue, children: o.helperText }),
     /* @__PURE__ */ d(
       "input",
       {
@@ -5769,7 +5792,7 @@ function gu({
         dataTestId: o.dataTestId
       }
     ),
-    o.helperText && !s && /* @__PURE__ */ d("small", { style: ce, children: o.helperText }),
+    o.helperText && !s && /* @__PURE__ */ d("small", { style: ue, children: o.helperText }),
     /* @__PURE__ */ O(
       "div",
       {
@@ -5887,7 +5910,7 @@ function bu({
         dataTestId: o.dataTestId
       }
     ),
-    o.helperText && !s && /* @__PURE__ */ d("small", { style: ce, children: o.helperText }),
+    o.helperText && !s && /* @__PURE__ */ d("small", { style: ue, children: o.helperText }),
     /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center", gap: 12, px: 1 }, children: [
       /* @__PURE__ */ d(
         So,
@@ -5949,7 +5972,7 @@ function hu({
         dataTestId: o.dataTestId
       }
     ),
-    o.helperText && !s && /* @__PURE__ */ d("small", { style: ce, children: o.helperText }),
+    o.helperText && !s && /* @__PURE__ */ d("small", { style: ue, children: o.helperText }),
     /* @__PURE__ */ O("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
       /* @__PURE__ */ O(
         "div",
@@ -6062,7 +6085,7 @@ function vu({
         dataTestId: o.dataTestId
       }
     ),
-    o.helperText && !s && /* @__PURE__ */ d("small", { style: ce, children: o.helperText }),
+    o.helperText && !s && /* @__PURE__ */ d("small", { style: ue, children: o.helperText }),
     /* @__PURE__ */ O(
       "div",
       {
@@ -6125,7 +6148,7 @@ function vu({
     (s || p) && /* @__PURE__ */ d("small", { "data-testid": `${u}-error`, style: de, children: p ?? r })
   ] });
 }
-const Iu = Ue.lazy(async () => ({ default: (await import("./index-BtDjZ-I6.js")).default }));
+const Iu = Ue.lazy(async () => ({ default: (await import("./index-aY0_Mo-L.js")).default }));
 async function xu(t) {
   switch (t) {
     case "python":
@@ -6226,7 +6249,7 @@ function yu({
         }
       )
     ] }),
-    o.helperText && !s && /* @__PURE__ */ d("small", { style: ce, children: o.helperText }),
+    o.helperText && !s && /* @__PURE__ */ d("small", { style: ue, children: o.helperText }),
     /* @__PURE__ */ d(
       "div",
       {
@@ -6303,7 +6326,7 @@ function Au({
         marginBottom: 4
       }, children: v })
     ] }),
-    o.helperText && !s && /* @__PURE__ */ d("small", { style: ce, children: o.helperText }),
+    o.helperText && !s && /* @__PURE__ */ d("small", { style: ue, children: o.helperText }),
     /* @__PURE__ */ d(
       "div",
       {
@@ -6334,7 +6357,7 @@ function Au({
   ] });
 }
 const Su = Ue.lazy(
-  () => import("./index-C0P8B5d0.js").then((t) => t.i).then((t) => (Promise.resolve({               }), { default: t.default }))
+  () => import("./index-CSWLKuPF.js").then((t) => t.i).then((t) => (Promise.resolve({               }), { default: t.default }))
 ), Ru = [
   [{ header: [1, 2, 3, !1] }],
   ["bold", "italic", "underline", "strike"],
@@ -6369,7 +6392,7 @@ function Eu({
         dataTestId: o.dataTestId
       }
     ),
-    o.helperText && !s && /* @__PURE__ */ d("small", { style: ce, children: o.helperText }),
+    o.helperText && !s && /* @__PURE__ */ d("small", { style: ue, children: o.helperText }),
     /* @__PURE__ */ d(
       "div",
       {
@@ -6600,7 +6623,7 @@ function Gu({
         htmlFor: s
       }
     ),
-    o.helperText && !l && /* @__PURE__ */ d("small", { style: ce, children: o.helperText }),
+    o.helperText && !l && /* @__PURE__ */ d("small", { style: ue, children: o.helperText }),
     /* @__PURE__ */ d(
       hn,
       {
@@ -9017,7 +9040,7 @@ function Fc({ field: t, value: e, onChange: n, onBlur: i, error: r, touched: a }
         ] })
       ] })
     ] }),
-    o.helperText && !u && /* @__PURE__ */ d("small", { style: ce, children: o.helperText }),
+    o.helperText && !u && /* @__PURE__ */ d("small", { style: ue, children: o.helperText }),
     u && /* @__PURE__ */ d("small", { "data-testid": `${c}-error`, style: de, children: r }),
     S && /* @__PURE__ */ d(
       Oc,
@@ -9283,7 +9306,7 @@ function Dc({
       /* @__PURE__ */ O(N, { sx: { flex: 1, minWidth: 0 }, children: [
         /* @__PURE__ */ O(N, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
           /* @__PURE__ */ d(
-            ue,
+            ce,
             {
               sx: {
                 fontSize: n >= 2 ? 13 : 14,
@@ -9312,7 +9335,7 @@ function Dc({
           )
         ] }),
         h && /* @__PURE__ */ d(
-          ue,
+          ce,
           {
             sx: {
               mt: 0.35,
@@ -9687,8 +9710,8 @@ function Hc({ node: t, conditionDef: e, depth: n, fieldPath: i, onUpdate: r, onR
         onClick: () => u((l) => !l),
         children: [
           /* @__PURE__ */ d(N, { sx: { color: "#94a3b8", display: "flex", alignItems: "center" }, children: o ? /* @__PURE__ */ d(pn, { size: 15 }) : /* @__PURE__ */ d(mo, { size: 15 }) }),
-          /* @__PURE__ */ d(ue, { sx: { fontSize: 11, fontWeight: 700, color: "#94a3b8", fontFamily: "monospace", letterSpacing: -1 }, children: "( )" }),
-          /* @__PURE__ */ O(ue, { sx: { fontSize: 11, color: "#64748b" }, children: [
+          /* @__PURE__ */ d(ce, { sx: { fontSize: 11, fontWeight: 700, color: "#94a3b8", fontFamily: "monospace", letterSpacing: -1 }, children: "( )" }),
+          /* @__PURE__ */ O(ce, { sx: { fontSize: 11, color: "#64748b" }, children: [
             "Group",
             o && /* @__PURE__ */ O(N, { component: "span", sx: { ml: 0.5, color: "#94a3b8" }, children: [
               "· ",
@@ -9730,9 +9753,9 @@ function no({ conditionDef: t, entries: e, onUpdate: n, depth: i = 0, fieldPath:
   }]), s = (g) => n(e.filter((p, m) => m !== g)), l = (g, p) => n(e.map((m, h) => h === g ? { ...m, connector: p } : m)), c = (g, p) => n(e.map((m, h) => h === g ? { ...m, ...p } : m)), f = (g, p) => n(e.map(
     (m, h) => h === g ? { ...m, entries: p } : m
   ));
-  return /* @__PURE__ */ O(N, { sx: { mt: i === 0 ? 0.75 : 0.25 }, children: [
+  return /* @__PURE__ */ O(N, { sx: { mt: i === 0 ? 1.25 : 0.25 }, children: [
     e.map((g, p) => /* @__PURE__ */ O(N, { children: [
-      p > 0 && /* @__PURE__ */ d(N, { sx: { display: "flex", alignItems: "center", my: "8px" }, children: /* @__PURE__ */ d(
+      p > 0 && /* @__PURE__ */ d(N, { sx: { display: "flex", alignItems: "center", my: "10px" }, children: /* @__PURE__ */ d(
         Xc,
         {
           connector: g.connector ?? "and",
@@ -9750,7 +9773,7 @@ function no({ conditionDef: t, entries: e, onUpdate: n, depth: i = 0, fieldPath:
           onRemove: () => s(p)
         }
       ) : /* @__PURE__ */ O(N, { children: [
-        p === 0 && /* @__PURE__ */ d(ue, { sx: { fontSize: 11, fontWeight: 700, color: "#64748b", mb: 0.5 }, children: "When" }),
+        p === 0 && /* @__PURE__ */ d(ce, { sx: { fontSize: 12, fontWeight: 600, color: "#475569", mb: 0.75 }, children: "When" }),
         /* @__PURE__ */ O(N, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
           /* @__PURE__ */ d(N, { sx: { display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 0.75, flex: 1 }, children: t.fields.map((m) => /* @__PURE__ */ d(N, { sx: { gridColumn: `span ${m.colSpan ?? 4}` }, children: /* @__PURE__ */ d(
             zc,
@@ -9775,7 +9798,7 @@ function no({ conditionDef: t, entries: e, onUpdate: n, depth: i = 0, fieldPath:
         ] })
       ] })
     ] }, p)),
-    /* @__PURE__ */ O(N, { sx: { display: "flex", alignItems: "center", gap: 1, mt: e.length > 0 ? 1 : 0 }, children: [
+    /* @__PURE__ */ O(N, { sx: { display: "flex", alignItems: "center", gap: 1, mt: e.length > 0 ? 1.5 : 0 }, children: [
       /* @__PURE__ */ d(
         Dn,
         {
@@ -10160,7 +10183,7 @@ export {
   Go as m,
   te as n,
   sd as o,
-  ce as p,
+  ue as p,
   rd as q,
   ud as r,
   we as s,

package/dist/{index-C0P8B5d0.js → index-CSWLKuPF.js}

@@ -1,4 +1,4 @@
-import { H as ct, J as Fe } from "./index-clDu4NYb.js";
+import { H as ct, J as Fe } from "./index-CDhW7gZx.js";
 import Ue from "react";
 import He from "react-dom";
 function $e(S, R) {