finform-react-builder 1.12.6 → 1.12.7

package/dist/index.es.js

@@ -10053,36 +10053,35 @@ const Ym = Et(jl)(({ theme: e }) => {
       ...a
     })
   }
-), Qm = Et(jl)(({ theme: e }) => {
-  const t = e.palette.divider || "#E8E8E8", r = e.palette.primary.main;
-  return {
-    [`&.${mr.vertical}`]: {
-      marginLeft: 11
-      // aligns with 24px icon
-    },
-    [`& .${mr.line}`]: {
-      minHeight: 28,
-      borderLeftWidth: 2,
-      borderColor: t,
-      transition: "border-color 0.3s ease"
-    },
-    [`&.${mr.completed} .${mr.line}`]: {
-      borderColor: r
-    }
-  };
-}), Xy = ({ items: e, activeIndex: t = 1, onStepClick: r, sx: n }) => {
-  const i = Oo(), a = i.palette.primary.main, o = i.palette.text.primary, s = i.palette.action && i.palette.action.disabledBackground || "#E8E8E8", [l, u] = Ot(null), f = (p) => {
-    const { active: c, completed: y, icon: E } = p;
-    return y ? /* @__PURE__ */ d(
+), Qm = Et(jl)(({ theme: e }) => ({
+  [`&.${mr.vertical}`]: {
+    marginLeft: 11
+    // aligns with 24px icon
+  },
+  [`& .${mr.line}`]: {
+    minHeight: 28,
+    borderLeftWidth: 2,
+    height: "70px",
+    borderColor: e.palette.divider,
+    transition: "border-color 0.3s ease",
+    zIndex: -1
+  },
+  [`&.${mr.completed} .${mr.line}`]: {
+    borderColor: e.palette.primary.main
+  }
+})), Xy = ({ items: e, activeIndex: t = 1, onStepClick: r, sx: n }) => {
+  const i = Oo(), a = i.palette.success.main, o = i.palette.primary.main, s = i.palette.text.primary, l = i.palette.mode === "dark" ? i.palette.grey[700] : i.palette.grey[300], [u, f] = Ot(null), p = (c) => {
+    const { active: y, completed: E, icon: m } = c;
+    return E ? /* @__PURE__ */ d(
       K,
       {
         sx: {
           width: 24,
           height: 24,
-          border: `1.2px solid ${a}`,
+          border: `1.2px solid ${o}`,
           borderRadius: "50%",
-          backgroundColor: a,
-          color: "#fff",
+          backgroundColor: o,
+          color: i.palette.primary.contrastText,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -10090,16 +10089,16 @@ const Ym = Et(jl)(({ theme: e }) => {
         },
         children: /* @__PURE__ */ d(Io, { sx: { fontSize: 16, fontWeight: 600 } })
       }
-    ) : c ? /* @__PURE__ */ d(
+    ) : y ? /* @__PURE__ */ d(
       K,
       {
         sx: {
           width: 24,
           height: 24,
           borderRadius: "50%",
-          border: `1.2px solid ${a}`,
-          backgroundColor: gt(a, 0.2),
-          color: a,
+          border: `1.2px solid ${o}`,
+          backgroundColor: gt(o, 0.2),
+          color: o,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -10108,7 +10107,7 @@ const Ym = Et(jl)(({ theme: e }) => {
           zIndex: 1e3,
           overflow: "hidden"
         },
-        children: E
+        children: m
       }
     ) : /* @__PURE__ */ d(
       K,
@@ -10117,8 +10116,8 @@ const Ym = Et(jl)(({ theme: e }) => {
           width: 24,
           height: 24,
           borderRadius: "50%",
-          backgroundColor: s,
-          color: o,
+          backgroundColor: l,
+          color: s,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -10126,7 +10125,7 @@ const Ym = Et(jl)(({ theme: e }) => {
           fontSize: 12,
           zIndex: 1e3
         },
-        children: E
+        children: m
       }
     );
   };
@@ -10142,7 +10141,7 @@ const Ym = Et(jl)(({ theme: e }) => {
         },
         "& .MuiStepLabel-label": {
           fontSize: 14,
-          color: o,
+          color: s,
           fontWeight: 500
         },
         "& .MuiStep-root": {
@@ -10150,13 +10149,13 @@ const Ym = Et(jl)(({ theme: e }) => {
         },
         ...n
       },
-      children: e.map((p, c) => /* @__PURE__ */ ee(
+      children: e.map((c, y) => /* @__PURE__ */ ee(
         Vl,
         {
-          onMouseEnter: () => u(c),
-          onMouseLeave: () => u(null),
-          onClick: () => r == null ? void 0 : r(c),
-          completed: c < t,
+          onMouseEnter: () => f(y),
+          onMouseLeave: () => f(null),
+          onClick: () => r == null ? void 0 : r(y),
+          completed: y < t,
           children: [
             /* @__PURE__ */ ee(
               K,
@@ -10167,7 +10166,7 @@ const Ym = Et(jl)(({ theme: e }) => {
                   alignItems: "flex-start"
                 },
                 children: [
-                  /* @__PURE__ */ ee(Nl, { StepIconComponent: f, children: [
+                  /* @__PURE__ */ ee(Nl, { StepIconComponent: p, children: [
                     /* @__PURE__ */ ee(K, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
                       /* @__PURE__ */ d(
                         fe,
@@ -10175,17 +10174,17 @@ const Ym = Et(jl)(({ theme: e }) => {
                           sx: {
                             fontSize: 14,
                             fontWeight: 500,
-                            color: c === t ? a : o
+                            color: y === t ? o : s
                           },
-                          children: p.label
+                          children: c.label
                         }
                       ),
                       /* @__PURE__ */ d(
                         qc,
                         {
                           size: "small",
-                          colorHex: c < t ? a : c === t ? "#973B00" : o,
-                          label: c < t ? "Completed" : c === t ? "In progress" : "Not started"
+                          colorHex: y < t ? a : y === t ? "#973B00" : s,
+                          label: y < t ? "Completed" : y === t ? "In progress" : "Not started"
                         }
                       )
                     ] }),
@@ -10195,22 +10194,22 @@ const Ym = Et(jl)(({ theme: e }) => {
                         sx: {
                           fontSize: 12,
                           fontWeight: 400,
-                          color: gt(o, 0.38),
+                          color: gt(s, 0.38),
                           mt: 0.5,
                           width: "80%"
                         },
-                        children: p.description
+                        children: c.description
                       }
                     )
                   ] }),
-                  l === c && /* @__PURE__ */ d(Ze, { sx: { display: c > t ? "none" : "block" }, variant: c < t ? "outlined" : "contained", size: "small", color: "primary", children: c < t ? "Edit" : c === t ? "Complete" : "" })
+                  u === y && /* @__PURE__ */ d(Ze, { sx: { display: y > t ? "none" : "block" }, variant: y < t ? "outlined" : "contained", size: "small", color: "primary", children: y < t ? "Edit" : y === t ? "Complete" : "" })
                 ]
               }
             ),
-            c !== e.length - 1 && /* @__PURE__ */ d(uo, { sx: { ml: 4.2, borderColor: i.palette.divider } })
+            y !== e.length - 1 && /* @__PURE__ */ d(uo, { sx: { ml: 4.2, borderColor: i.palette.divider } })
           ]
         },
-        c
+        y
       ))
     }
   );