finform-react-builder 1.5.11 → 1.5.12

package/dist/components/FinForm/types.d.ts

@@ -28,7 +28,7 @@ export interface BaseField {
     title?: string;
     name: string;
     label: string;
-    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'select' | 'checkbox' | 'toggle' | 'radio' | 'switch' | 'autocomplete' | 'date' | 'textarea' | 'image' | 'title' | 'section';
+    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'select' | 'checkbox' | 'toggle' | 'radio' | 'switch' | 'autocomplete' | 'date' | 'textarea' | 'image' | 'title' | 'section' | 'component';
     placeholder?: string;
     required?: boolean;
     disabled?: boolean;
@@ -128,6 +128,11 @@ export interface ImageField extends BaseField {
     onClick?: () => void;
     defaultValue?: string;
 }
+export interface ComponentField extends BaseField {
+    type: 'component';
+    content?: React.ReactNode;
+    render?: () => React.ReactNode;
+}
 export interface TitleField extends BaseField {
     type: 'title';
     variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -142,7 +147,7 @@ export interface SectionField extends BaseField {
     align?: 'left' | 'center' | 'right';
     sx?: any;
 }
-export type FieldConfig = TextField | NumberField | SelectField | CheckboxField | ToggleField | RadioField | SwitchField | AutocompleteField | DateField | ImageField | TitleField | SectionField;
+export type FieldConfig = TextField | NumberField | SelectField | CheckboxField | ToggleField | RadioField | SwitchField | AutocompleteField | DateField | ImageField | TitleField | SectionField | ComponentField;
 export interface FormButton {
     text: string;
     color?: string;

package/dist/index.es.js

@@ -14,7 +14,7 @@ var bn = (e, t, r, n) => ({
 import { jsx as D, jsxs as ke, Fragment as Tl } from "react/jsx-runtime";
 import * as Fe from "react";
 import ye, { useMemo as Ie, useState as Xt, useRef as xt, useCallback as je, useEffect as wt, createElement as io, useReducer as _l, forwardRef as Cl, useImperativeHandle as Al, Fragment as Fl } from "react";
-import { Box as xe, TextField as wn, Autocomplete as $l, CircularProgress as _r, Chip as zn, Checkbox as _a, FormControlLabel as Sn, Switch as Dl, FormHelperText as Hr, FormControl as mi, Typography as Ve, RadioGroup as Ca, Radio as Aa, InputLabel as Rl, Select as Pl, MenuItem as En, Card as ao, LinearProgress as jl, Button as Bt, ButtonGroup as Il, createTheme as Ml, ThemeProvider as zl, Paper as so, Tooltip as Vl, IconButton as Nl, Alert as Ll } from "@mui/material";
+import { Box as ve, TextField as wn, Autocomplete as $l, CircularProgress as _r, Chip as zn, Checkbox as _a, FormControlLabel as Sn, Switch as Dl, FormHelperText as Hr, FormControl as mi, Typography as Ve, RadioGroup as Ca, Radio as Aa, InputLabel as Rl, Select as Pl, MenuItem as En, Card as ao, LinearProgress as jl, Button as Bt, ButtonGroup as Il, createTheme as Ml, ThemeProvider as zl, Paper as so, Tooltip as Vl, IconButton as Nl, Alert as Ll } from "@mui/material";
 import ql from "@emotion/styled";
 import "@emotion/react";
 var pn = (e) => e.type === "checkbox", tr = (e) => e instanceof Date, We = (e) => e == null;
@@ -2534,10 +2534,10 @@ var Ae, Mt, zt, Rr, Pr, Vt, jr, Ir, ro, Cc = (ro = class {
   clear() {
     v(this, Ae).clear(), v(this, Mt).clear();
   }
-}, Ae = new WeakMap(), Mt = new WeakMap(), zt = new WeakMap(), Rr = new WeakMap(), Pr = new WeakMap(), Vt = new WeakMap(), jr = new WeakMap(), Ir = new WeakMap(), ro), Ke, fe, un, Ue, lr, Mr, Nt, Lt, dn, zr, Vr, cr, ur, qt, Nr, ve, Yr, Vi, Ni, Li, qi, Bi, Ui, Wi, Ao, no, Ac = (no = class extends fn {
+}, Ae = new WeakMap(), Mt = new WeakMap(), zt = new WeakMap(), Rr = new WeakMap(), Pr = new WeakMap(), Vt = new WeakMap(), jr = new WeakMap(), Ir = new WeakMap(), ro), Ke, fe, un, Ue, lr, Mr, Nt, Lt, dn, zr, Vr, cr, ur, qt, Nr, xe, Yr, Vi, Ni, Li, qi, Bi, Ui, Wi, Ao, no, Ac = (no = class extends fn {
   constructor(t, r) {
     super();
-    ae(this, ve);
+    ae(this, xe);
     ae(this, Ke);
     ae(this, fe);
     ae(this, un);
@@ -2563,7 +2563,7 @@ var Ae, Mt, zt, Rr, Pr, Vt, jr, Ir, ro, Cc = (ro = class {
     this.refetch = this.refetch.bind(this);
   }
   onSubscribe() {
-    this.listeners.size === 1 && (v(this, fe).addObserver(this), Ga(v(this, fe), this.options) ? pe(this, ve, Yr).call(this) : this.updateResult(), pe(this, ve, qi).call(this));
+    this.listeners.size === 1 && (v(this, fe).addObserver(this), Ga(v(this, fe), this.options) ? pe(this, xe, Yr).call(this) : this.updateResult(), pe(this, xe, qi).call(this));
   }
   onUnsubscribe() {
     this.hasListeners() || this.destroy();
@@ -2583,7 +2583,7 @@ var Ae, Mt, zt, Rr, Pr, Vt, jr, Ir, ro, Cc = (ro = class {
     );
   }
   destroy() {
-    this.listeners = /* @__PURE__ */ new Set(), pe(this, ve, Bi).call(this), pe(this, ve, Ui).call(this), v(this, fe).removeObserver(this);
+    this.listeners = /* @__PURE__ */ new Set(), pe(this, xe, Bi).call(this), pe(this, xe, Ui).call(this), v(this, fe).removeObserver(this);
   }
   setOptions(t) {
     const r = this.options, n = v(this, fe);
@@ -2591,7 +2591,7 @@ var Ae, Mt, zt, Rr, Pr, Vt, jr, Ir, ro, Cc = (ro = class {
       throw new Error(
         "Expected enabled to be a boolean or a callback that returns a boolean"
       );
-    pe(this, ve, Wi).call(this), v(this, fe).setOptions(this.options), r._defaulted && !ji(this.options, r) && v(this, Ke).getQueryCache().notify({
+    pe(this, xe, Wi).call(this), v(this, fe).setOptions(this.options), r._defaulted && !ji(this.options, r) && v(this, Ke).getQueryCache().notify({
       type: "observerOptionsUpdated",
       query: v(this, fe),
       observer: this
@@ -2602,9 +2602,9 @@ var Ae, Mt, zt, Rr, Pr, Vt, jr, Ir, ro, Cc = (ro = class {
       n,
       this.options,
       r
-    ) && pe(this, ve, Yr).call(this), this.updateResult(), i && (v(this, fe) !== n || nt(this.options.enabled, v(this, fe)) !== nt(r.enabled, v(this, fe)) || Wt(this.options.staleTime, v(this, fe)) !== Wt(r.staleTime, v(this, fe))) && pe(this, ve, Vi).call(this);
-    const a = pe(this, ve, Ni).call(this);
-    i && (v(this, fe) !== n || nt(this.options.enabled, v(this, fe)) !== nt(r.enabled, v(this, fe)) || a !== v(this, qt)) && pe(this, ve, Li).call(this, a);
+    ) && pe(this, xe, Yr).call(this), this.updateResult(), i && (v(this, fe) !== n || nt(this.options.enabled, v(this, fe)) !== nt(r.enabled, v(this, fe)) || Wt(this.options.staleTime, v(this, fe)) !== Wt(r.staleTime, v(this, fe))) && pe(this, xe, Vi).call(this);
+    const a = pe(this, xe, Ni).call(this);
+    i && (v(this, fe) !== n || nt(this.options.enabled, v(this, fe)) !== nt(r.enabled, v(this, fe)) || a !== v(this, qt)) && pe(this, xe, Li).call(this, a);
   }
   getOptimisticResult(t) {
     const r = v(this, Ke).getQueryCache().build(v(this, Ke), t), n = this.createResult(r, t);
@@ -2634,7 +2634,7 @@ var Ae, Mt, zt, Rr, Pr, Vt, jr, Ir, ro, Cc = (ro = class {
     return n.fetch().then(() => this.createResult(n, r));
   }
   fetch(t) {
-    return pe(this, ve, Yr).call(this, {
+    return pe(this, xe, Yr).call(this, {
       ...t,
       cancelRefetch: t.cancelRefetch ?? !0
     }).then(() => (this.updateResult(), v(this, Ue)));
@@ -2742,20 +2742,20 @@ var Ae, Mt, zt, Rr, Pr, Vt, jr, Ir, ro, Cc = (ro = class {
         return v(this, Ue)[l] !== t[l] && s.has(l);
       });
     };
-    pe(this, ve, Ao).call(this, { listeners: n() });
+    pe(this, xe, Ao).call(this, { listeners: n() });
   }
   onQueryUpdate() {
-    this.updateResult(), this.hasListeners() && pe(this, ve, qi).call(this);
+    this.updateResult(), this.hasListeners() && pe(this, xe, qi).call(this);
   }
-}, Ke = new WeakMap(), fe = new WeakMap(), un = new WeakMap(), Ue = new WeakMap(), lr = new WeakMap(), Mr = new WeakMap(), Nt = new WeakMap(), Lt = new WeakMap(), dn = new WeakMap(), zr = new WeakMap(), Vr = new WeakMap(), cr = new WeakMap(), ur = new WeakMap(), qt = new WeakMap(), Nr = new WeakMap(), ve = new WeakSet(), Yr = function(t) {
-  pe(this, ve, Wi).call(this);
+}, Ke = new WeakMap(), fe = new WeakMap(), un = new WeakMap(), Ue = new WeakMap(), lr = new WeakMap(), Mr = new WeakMap(), Nt = new WeakMap(), Lt = new WeakMap(), dn = new WeakMap(), zr = new WeakMap(), Vr = new WeakMap(), cr = new WeakMap(), ur = new WeakMap(), qt = new WeakMap(), Nr = new WeakMap(), xe = new WeakSet(), Yr = function(t) {
+  pe(this, xe, Wi).call(this);
   let r = v(this, fe).fetch(
     this.options,
     t
   );
   return t != null && t.throwOnError || (r = r.catch(Ge)), r;
 }, Vi = function() {
-  pe(this, ve, Bi).call(this);
+  pe(this, xe, Bi).call(this);
   const t = Wt(
     this.options.staleTime,
     v(this, fe)
@@ -2769,11 +2769,11 @@ var Ae, Mt, zt, Rr, Pr, Vt, jr, Ir, ro, Cc = (ro = class {
 }, Ni = function() {
   return (typeof this.options.refetchInterval == "function" ? this.options.refetchInterval(v(this, fe)) : this.options.refetchInterval) ?? !1;
 }, Li = function(t) {
-  pe(this, ve, Ui).call(this), Z(this, qt, t), !(pr || nt(this.options.enabled, v(this, fe)) === !1 || !Ri(v(this, qt)) || v(this, qt) === 0) && Z(this, ur, setInterval(() => {
-    (this.options.refetchIntervalInBackground || pa.isFocused()) && pe(this, ve, Yr).call(this);
+  pe(this, xe, Ui).call(this), Z(this, qt, t), !(pr || nt(this.options.enabled, v(this, fe)) === !1 || !Ri(v(this, qt)) || v(this, qt) === 0) && Z(this, ur, setInterval(() => {
+    (this.options.refetchIntervalInBackground || pa.isFocused()) && pe(this, xe, Yr).call(this);
   }, v(this, qt)));
 }, qi = function() {
-  pe(this, ve, Vi).call(this), pe(this, ve, Li).call(this, pe(this, ve, Ni).call(this));
+  pe(this, xe, Vi).call(this), pe(this, xe, Li).call(this, pe(this, xe, Ni).call(this));
 }, Bi = function() {
   v(this, cr) && (clearTimeout(v(this, cr)), Z(this, cr, void 0));
 }, Ui = function() {
@@ -2932,7 +2932,7 @@ const Hc = ({
   style: i,
   className: a,
   onClick: s
-}) => /* @__PURE__ */ D(xe, { sx: { textAlign: "center" }, children: /* @__PURE__ */ D(
+}) => /* @__PURE__ */ D(ve, { sx: { textAlign: "center" }, children: /* @__PURE__ */ D(
   "img",
   {
     src: e || "/placeholder-image.png",
@@ -3100,7 +3100,7 @@ const Gc = ({ field: e, control: t, errors: r, baseUrl: n, apiHeaders: i, formDa
     xr(e) && (g != null && g.dependsOn) && y && d.current && (d.current = !1, p(!1));
   }, [y, g == null ? void 0 : g.dependsOn]);
   const u = je(() => xr(e) ? w : e.type === "select" || e.type === "toggle" || e.type === "radio" || e.type === "autocomplete" ? e.options || [] : [], [e, w]);
-  return O ? /* @__PURE__ */ D(xe, { children: (() => {
+  return O ? /* @__PURE__ */ D(ve, { children: (() => {
     switch (e.type) {
       case "title":
         return /* @__PURE__ */ D(
@@ -3198,7 +3198,7 @@ const Gc = ({ field: e, control: t, errors: r, baseUrl: n, apiHeaders: i, formDa
                   disabled: e.disabled || z,
                   endAdornment: z ? /* @__PURE__ */ D(_r, { size: 20 }) : void 0,
                   onOpen: te,
-                  children: z ? /* @__PURE__ */ D(En, { disabled: !0, children: /* @__PURE__ */ ke(xe, { sx: { display: "flex", alignItems: "center", gap: 1, width: "100%" }, children: [
+                  children: z ? /* @__PURE__ */ D(En, { disabled: !0, children: /* @__PURE__ */ ke(ve, { sx: { display: "flex", alignItems: "center", gap: 1, width: "100%" }, children: [
                     /* @__PURE__ */ D(_r, { size: 16 }),
                     /* @__PURE__ */ D(Ve, { variant: "body2", children: "Fetching data..." })
                   ] }) }) : k.length > 0 ? k.map((W) => /* @__PURE__ */ D(En, { value: W.value, children: W.label }, W.value)) : l && !z ? /* @__PURE__ */ D(En, { disabled: !0, children: /* @__PURE__ */ D(Ve, { variant: "body2", color: "text.secondary", children: "No options available" }) }) : /* @__PURE__ */ D(En, { disabled: !0, children: /* @__PURE__ */ D(Ve, { variant: "body2", color: "text.secondary", children: "Click to load options" }) })
@@ -3215,7 +3215,7 @@ const Gc = ({ field: e, control: t, errors: r, baseUrl: n, apiHeaders: i, formDa
             name: e.name,
             control: t,
             defaultValue: x(),
-            render: ({ field: V }) => /* @__PURE__ */ ke(xe, { sx: { mt: 1, mb: 0 }, children: [
+            render: ({ field: V }) => /* @__PURE__ */ ke(ve, { sx: { mt: 1, mb: 0 }, children: [
               /* @__PURE__ */ D(
                 Sn,
                 {
@@ -3299,7 +3299,7 @@ const Gc = ({ field: e, control: t, errors: r, baseUrl: n, apiHeaders: i, formDa
             name: e.name,
             control: t,
             defaultValue: x(),
-            render: ({ field: V }) => /* @__PURE__ */ ke(xe, { sx: { mt: 1, mb: 0 }, children: [
+            render: ({ field: V }) => /* @__PURE__ */ ke(ve, { sx: { mt: 1, mb: 0 }, children: [
               /* @__PURE__ */ D(
                 Sn,
                 {
@@ -3487,6 +3487,8 @@ const Gc = ({ field: e, control: t, errors: r, baseUrl: n, apiHeaders: i, formDa
             )
           }
         );
+      case "component":
+        return /* @__PURE__ */ D(ve, { children: e.render ? e.render() : e.content });
       default:
         return null;
     }
@@ -8679,7 +8681,7 @@ const nf = (e) => rf(e) && e !== "classes", af = np({
       },
       children: [
         /* @__PURE__ */ ke(
-          xe,
+          ve,
           {
             sx: {
               display: "flex",
@@ -8689,7 +8691,7 @@ const nf = (e) => rf(e) && e !== "classes", af = np({
             },
             children: [
               /* @__PURE__ */ D(
-                xe,
+                ve,
                 {
                   sx: {
                     display: "flex",
@@ -8699,9 +8701,9 @@ const nf = (e) => rf(e) && e !== "classes", af = np({
                   },
                   children: s.map((d, f) => {
                     const m = d === e, x = d < e || a.includes(d), g = m || x ? "primary.main" : "#8F97A4";
-                    return /* @__PURE__ */ ke(xe, { sx: { display: "flex", alignItems: "center" }, children: [
+                    return /* @__PURE__ */ ke(ve, { sx: { display: "flex", alignItems: "center" }, children: [
                       /* @__PURE__ */ ke(
-                        xe,
+                        ve,
                         {
                           onClick: () => p(d) && r(d),
                           sx: {
@@ -8711,7 +8713,7 @@ const nf = (e) => rf(e) && e !== "classes", af = np({
                           },
                           children: [
                             /* @__PURE__ */ D(
-                              xe,
+                              ve,
                               {
                                 sx: {
                                   width: 24,
@@ -8742,7 +8744,7 @@ const nf = (e) => rf(e) && e !== "classes", af = np({
                         }
                       ),
                       f < s.length - 1 && /* @__PURE__ */ D(
-                        xe,
+                        ve,
                         {
                           sx: {
                             width: 40,
@@ -8806,10 +8808,10 @@ const nf = (e) => rf(e) && e !== "classes", af = np({
       `${o.text}-${l}`
     );
   };
-  return /* @__PURE__ */ ke(xe, { sx: { mt: 3, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-    /* @__PURE__ */ D(xe, { sx: { display: "flex", gap: 2 }, children: n.map((o, l) => s(o, l)) }),
-    /* @__PURE__ */ D(xe, { sx: { display: "flex", gap: 2 }, children: i.map((o, l) => s(o, l)) }),
-    /* @__PURE__ */ D(xe, { sx: { display: "flex", gap: 2 }, children: a.map((o, l) => s(o, l)) })
+  return /* @__PURE__ */ ke(ve, { sx: { mt: 3, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+    /* @__PURE__ */ D(ve, { sx: { display: "flex", gap: 2 }, children: n.map((o, l) => s(o, l)) }),
+    /* @__PURE__ */ D(ve, { sx: { display: "flex", gap: 2 }, children: i.map((o, l) => s(o, l)) }),
+    /* @__PURE__ */ D(ve, { sx: { display: "flex", gap: 2 }, children: a.map((o, l) => s(o, l)) })
   ] });
 }, lf = ({
   config: e,
@@ -8861,7 +8863,7 @@ const nf = (e) => rf(e) && e !== "classes", af = np({
         return { ...y, justifyContent: "flex-end" };
     }
   };
-  return p === "vertical" ? /* @__PURE__ */ D(xe, { sx: b(), children: o.map((y, O) => /* @__PURE__ */ D(xe, { sx: { width: "100%" }, children: c(y, O) }, O)) }) : /* @__PURE__ */ D(xe, { sx: b(), children: /* @__PURE__ */ D(Il, { variant: "outlined", size: "medium", children: o.map((y, O) => c(y, O)) }) });
+  return p === "vertical" ? /* @__PURE__ */ D(ve, { sx: b(), children: o.map((y, O) => /* @__PURE__ */ D(ve, { sx: { width: "100%" }, children: c(y, O) }, O)) }) : /* @__PURE__ */ D(ve, { sx: b(), children: /* @__PURE__ */ D(Il, { variant: "outlined", size: "medium", children: o.map((y, O) => c(y, O)) }) });
 }, cf = new Cc({
   defaultOptions: {
     queries: {
@@ -9018,7 +9020,7 @@ const nf = (e) => rf(e) && e !== "classes", af = np({
           return c ? (R || ue) && (Me = !se) : R && (Me = !de), { ...U, disabled: U.disabled || Me };
         })
       };
-      return /* @__PURE__ */ D(xe, { sx: { mt: 3 }, children: /* @__PURE__ */ D(
+      return /* @__PURE__ */ D(ve, { sx: { mt: 3 }, children: /* @__PURE__ */ D(
         lf,
         {
           config: P,
@@ -9047,7 +9049,7 @@ const nf = (e) => rf(e) && e !== "classes", af = np({
         }
       );
     }
-    return l ? /* @__PURE__ */ D(xe, { sx: { mt: 3, display: "flex", justifyContent: "flex-end", flexDirection: "column", alignItems: "flex-end" }, children: /* @__PURE__ */ ke(xe, { sx: { display: "flex", gap: 2 }, children: [
+    return l ? /* @__PURE__ */ D(ve, { sx: { mt: 3, display: "flex", justifyContent: "flex-end", flexDirection: "column", alignItems: "flex-end" }, children: /* @__PURE__ */ ke(ve, { sx: { display: "flex", gap: 2 }, children: [
       c && y > 1 && /* @__PURE__ */ D(
         Bt,
         {
@@ -9097,7 +9099,7 @@ const nf = (e) => rf(e) && e !== "classes", af = np({
       )
     ] }) }) : null;
   }, re = /* @__PURE__ */ ke(
-    xe,
+    ve,
     {
       component: "form",
       onSubmit: (P) => {
@@ -9137,7 +9139,7 @@ const nf = (e) => rf(e) && e !== "classes", af = np({
             children: A.map((P) => {
               const U = Q(P);
               return /* @__PURE__ */ D(
-                xe,
+                ve,
                 {
                   sx: {
                     gridColumn: `span ${U}`
@@ -11599,11 +11601,11 @@ const mm = ({
         border: "1px solid #e0e0e0"
       },
       children: [
-        /* @__PURE__ */ ke(xe, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+        /* @__PURE__ */ ke(ve, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
           r(),
           n()
         ] }),
-        /* @__PURE__ */ ke(xe, { sx: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ ke(ve, { sx: { flex: 1, minWidth: 0 }, children: [
           /* @__PURE__ */ D(Ve, { variant: "body2", noWrap: !0, children: e.file.name }),
           /* @__PURE__ */ ke(Ve, { variant: "caption", color: "textSecondary", children: [
             i(e.file.size),
@@ -11718,7 +11720,7 @@ const mm = ({
         return "flex-end";
     }
   };
-  return /* @__PURE__ */ ke(xe, { className: a, style: s, children: [
+  return /* @__PURE__ */ ke(ve, { className: a, style: s, children: [
     /* @__PURE__ */ ke(Ve, { variant: "h6", gutterBottom: !0, children: [
       e.title,
       e.required && /* @__PURE__ */ D("span", { style: { color: "red" }, children: " *" })
@@ -11761,7 +11763,7 @@ const mm = ({
           }
         )
       ] }),
-      /* @__PURE__ */ ke(xe, { sx: { mt: 2 }, children: [
+      /* @__PURE__ */ ke(ve, { sx: { mt: 2 }, children: [
         /* @__PURE__ */ D(
           zn,
           {
@@ -11783,7 +11785,7 @@ const mm = ({
       ] })
     ),
     p.length > 0 && /* @__PURE__ */ D(Ll, { severity: "error", sx: { mt: 2 }, children: p.map((k, j) => /* @__PURE__ */ D(Ve, { variant: "body2", children: k }, j)) }),
-    o.length > 0 && /* @__PURE__ */ ke(xe, { sx: { mt: 2 }, children: [
+    o.length > 0 && /* @__PURE__ */ ke(ve, { sx: { mt: 2 }, children: [
       /* @__PURE__ */ ke(Ve, { variant: "subtitle1", gutterBottom: !0, children: [
         "Selected Files (",
         o.length,
@@ -11799,7 +11801,7 @@ const mm = ({
       ))
     ] }),
     e.helperText && /* @__PURE__ */ D(Ve, { variant: "caption", color: "textSecondary", sx: { mt: 1, display: "block" }, children: e.helperText }),
-    e.submitButton && /* @__PURE__ */ D(xe, { sx: {
+    e.submitButton && /* @__PURE__ */ D(ve, { sx: {
       mt: 3,
       display: "flex",
       justifyContent: F()