@dashadmin/dash-admin 1.3.51 → 1.3.53

package/dist/components/subscription/PlanMetadataSettings.js

@@ -42,7 +42,17 @@ const PlanMetadataView = () => {
   const metadata = (record == null ? void 0 : record.metadata) || {};
   const entries = Object.entries(metadata);
   if (!entries.length) {
-    return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2 }, children: "No metadata configured" });
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "body2",
+        sx: {
+          color: "text.secondary",
+          py: 2
+        },
+        children: "No metadata configured"
+      }
+    );
   }
   return /* @__PURE__ */ jsx(TableContainer, { component: Paper, variant: "outlined", children: /* @__PURE__ */ jsxs(Table, { size: "small", children: [
     /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
@@ -60,7 +70,9 @@ const PlanMetadataList = () => {
   const metadata = (record == null ? void 0 : record.metadata) || {};
   const count = Object.keys(metadata).length;
   if (!count) {
-    return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "\u2014" });
+    return /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: {
+      color: "text.secondary"
+    }, children: "\u2014" });
   }
   return /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
     count,
@@ -126,45 +138,67 @@ const PlanMetadataEdit = () => {
   };
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Plan Metadata" }),
-    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", display: "block", sx: { mb: 2 }, children: "Add key-value pairs for additional plan configuration" }),
-    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { mb: 2 }, alignItems: "flex-start", children: [
-      /* @__PURE__ */ jsx(
-        TextField,
-        {
-          value: newKey,
-          onChange: (e) => {
-            setNewKey(e.target.value);
-            setKeyError("");
-          },
-          onKeyPress: handleKeyPress,
-          placeholder: "Key",
-          size: "small",
-          error: !!keyError,
-          helperText: keyError,
-          sx: { flex: 1 }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        TextField,
-        {
-          value: newValue,
-          onChange: (e) => setNewValue(e.target.value),
-          onKeyPress: handleKeyPress,
-          placeholder: "Value",
-          size: "small",
-          sx: { flex: 2 }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: handleAddPair,
-          color: "primary",
-          disabled: !newKey.trim(),
-          children: /* @__PURE__ */ jsx(AddIcon, {})
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          color: "text.secondary",
+          display: "block",
+          mb: 2
+        },
+        children: "Add key-value pairs for additional plan configuration"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        spacing: 1,
+        sx: {
+          alignItems: "flex-start",
+          mb: 2
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              value: newKey,
+              onChange: (e) => {
+                setNewKey(e.target.value);
+                setKeyError("");
+              },
+              onKeyPress: handleKeyPress,
+              placeholder: "Key",
+              size: "small",
+              error: !!keyError,
+              helperText: keyError,
+              sx: { flex: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              value: newValue,
+              onChange: (e) => setNewValue(e.target.value),
+              onKeyPress: handleKeyPress,
+              placeholder: "Value",
+              size: "small",
+              sx: { flex: 2 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: handleAddPair,
+              color: "primary",
+              disabled: !newKey.trim(),
+              children: /* @__PURE__ */ jsx(AddIcon, {})
+            }
+          )
+        ]
+      }
+    ),
     pairs.length > 0 ? /* @__PURE__ */ jsx(TableContainer, { component: Paper, variant: "outlined", children: /* @__PURE__ */ jsxs(Table, { size: "small", children: [
       /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
         /* @__PURE__ */ jsx(TableCell, { width: "30%", children: /* @__PURE__ */ jsx("strong", { children: "Key" }) }),
@@ -193,7 +227,9 @@ const PlanMetadataEdit = () => {
           }
         ) })
       ] }, key)) })
-    ] }) }) : /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No metadata added yet" })
+    ] }) }) : /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: {
+      color: "text.secondary"
+    }, children: "No metadata added yet" })
   ] });
 };
 const PlanMetadataSettings = ({

package/dist/components/subscription/PlanPricesSettings.js

@@ -56,7 +56,9 @@ const PlanPricesView = () => {
   );
   if (isLoading) return /* @__PURE__ */ jsx(Loading, {});
   if (!prices || Object.keys(prices).length === 0) {
-    return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No prices configured" });
+    return /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: {
+      color: "text.secondary"
+    }, children: "No prices configured" });
   }
   return /* @__PURE__ */ jsx(TableContainer, { component: Paper, variant: "outlined", sx: { maxWidth: 400 }, children: /* @__PURE__ */ jsxs(Table, { size: "small", children: [
     /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
@@ -76,7 +78,9 @@ const PlanPricesView = () => {
               color: (currency == null ? void 0 : currency.is_default) ? "primary" : "default"
             }
           ),
-          (currency == null ? void 0 : currency.is_default) && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "(Default)" })
+          (currency == null ? void 0 : currency.is_default) && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: {
+            color: "text.secondary"
+          }, children: "(Default)" })
         ] }) }),
         /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
           currency == null ? void 0 : currency.symbol,
@@ -90,7 +94,9 @@ const PlanPricesList = () => {
   const plan = useRecordContext();
   const prices = plan == null ? void 0 : plan.prices;
   if (!prices || Object.keys(prices).length === 0) {
-    return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "\u2014" });
+    return /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: {
+      color: "text.secondary"
+    }, children: "\u2014" });
   }
   return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" }, children: [
     Object.entries(prices).slice(0, 3).map(([code, value]) => /* @__PURE__ */ jsx(
@@ -159,10 +165,14 @@ const PlanPricesEdit = ({ method }) => {
     ] });
   }
   if (!currencies || currencies.length === 0) {
-    return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No currencies available. Please configure currencies first." });
+    return /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: {
+      color: "text.secondary"
+    }, children: "No currencies available. Please configure currencies first." });
   }
   return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", color: "text.secondary", children: "Set the price for each available currency (in cents/smallest unit)" }),
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", sx: {
+      color: "text.secondary"
+    }, children: "Set the price for each available currency (in cents/smallest unit)" }),
     currencies.map((currency) => {
       var _a;
       const currentValue = (_a = currentPrices[currency.code]) != null ? _a : "";
@@ -173,9 +183,6 @@ const PlanPricesEdit = ({ method }) => {
           type: "number",
           value: currentValue,
           onChange: (e) => handlePriceChange(currency.code, e.target.value),
-          InputProps: {
-            startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: currency.symbol })
-          },
           helperText: currency.format ? `Format: ${currency.format} \u2022 Example: ${currency.symbol}${numeral(29900).format(currency.format)}` : `Enter price in smallest unit (cents)`,
           fullWidth: true,
           size: "small",
@@ -186,6 +193,11 @@ const PlanPricesEdit = ({ method }) => {
                 borderWidth: 2
               }
             } : {}
+          },
+          slotProps: {
+            input: {
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: currency.symbol })
+            }
           }
         },
         currency.code

package/dist/components/tenant/TenantSelector.js

@@ -141,12 +141,14 @@ const TenantSelector = React.forwardRef((_a, ref) => {
                 handleSearch(ev.target.value);
               }
             },
-            InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
-              autoComplete: "new-password",
-              endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
-                isLoading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 20 }) : null,
-                params.InputProps.endAdornment
-              ] })
+            slotProps: __spreadProps(__spreadValues({}, params.slotProps), {
+              input: __spreadProps(__spreadValues({}, params.slotProps.input), {
+                autoComplete: "new-password",
+                endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  isLoading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 20 }) : null,
+                  params.slotProps.input.endAdornment
+                ] })
+              })
             })
           })
         )

package/dist/components/user/UserPreferences.js

@@ -204,7 +204,9 @@ const UserPreferences = () => {
         return /* @__PURE__ */ jsx(Card, { sx: { mb: 2 }, children: /* @__PURE__ */ jsxs(CardContent, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
           /* @__PURE__ */ jsxs(Box, { children: [
             /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: format.label }),
-            format.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: format.description })
+            format.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: {
+              color: "text.secondary"
+            }, children: format.description })
           ] }),
           /* @__PURE__ */ jsx(
             Switch,
@@ -218,7 +220,18 @@ const UserPreferences = () => {
       case "integer":
         return /* @__PURE__ */ jsx(Card, { sx: { mb: 2 }, children: /* @__PURE__ */ jsxs(CardContent, { children: [
           /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: format.label }),
-          format.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", display: "block", mb: 2, children: format.description }),
+          format.description && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              sx: {
+                color: "text.secondary",
+                display: "block",
+                mb: 2
+              },
+              children: format.description
+            }
+          ),
           /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
             /* @__PURE__ */ jsx(
               Slider,
@@ -239,12 +252,14 @@ const UserPreferences = () => {
                 value: (_d = value != null ? value : format.default_value) != null ? _d : 0,
                 onChange: (e) => handleGenericPreferenceChange(format.id, parseInt(e.target.value, 10)),
                 disabled: saving || !format.editable,
-                inputProps: {
-                  min: (_e = format.min) != null ? _e : 0,
-                  max: (_f = format.max) != null ? _f : 100
-                },
                 sx: { width: 80 },
-                size: "small"
+                size: "small",
+                slotProps: {
+                  htmlInput: {
+                    min: (_e = format.min) != null ? _e : 0,
+                    max: (_f = format.max) != null ? _f : 100
+                  }
+                }
               }
             )
           ] })
@@ -252,7 +267,18 @@ const UserPreferences = () => {
       case "string":
         return /* @__PURE__ */ jsx(Card, { sx: { mb: 2 }, children: /* @__PURE__ */ jsxs(CardContent, { children: [
           /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: format.label }),
-          format.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", display: "block", mb: 2, children: format.description }),
+          format.description && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              sx: {
+                color: "text.secondary",
+                display: "block",
+                mb: 2
+              },
+              children: format.description
+            }
+          ),
           /* @__PURE__ */ jsx(
             TextField,
             {
@@ -260,21 +286,34 @@ const UserPreferences = () => {
               value: value != null ? value : "",
               onChange: (e) => handleGenericPreferenceChange(format.id, e.target.value),
               disabled: saving || !format.editable,
-              inputProps: { maxLength: format.maxLength },
-              InputProps: format.maxLength ? {
-                endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { position: "end", children: [
-                  (value == null ? void 0 : value.length) || 0,
-                  "/",
-                  format.maxLength
-                ] })
-              } : void 0
+              slotProps: {
+                input: format.maxLength ? {
+                  endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { position: "end", children: [
+                    (value == null ? void 0 : value.length) || 0,
+                    "/",
+                    format.maxLength
+                  ] })
+                } : void 0,
+                htmlInput: { maxLength: format.maxLength }
+              }
             }
           )
         ] }) }, format.id);
       case "textarea":
         return /* @__PURE__ */ jsx(Card, { sx: { mb: 2 }, children: /* @__PURE__ */ jsxs(CardContent, { children: [
           /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: format.label }),
-          format.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", display: "block", mb: 2, children: format.description }),
+          format.description && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              sx: {
+                color: "text.secondary",
+                display: "block",
+                mb: 2
+              },
+              children: format.description
+            }
+          ),
           /* @__PURE__ */ jsx(
             TextField,
             {
@@ -284,8 +323,10 @@ const UserPreferences = () => {
               value: value != null ? value : "",
               onChange: (e) => handleGenericPreferenceChange(format.id, e.target.value),
               disabled: saving || !format.editable,
-              inputProps: { maxLength: format.maxLength },
-              helperText: format.maxLength ? `${(value == null ? void 0 : value.length) || 0}/${format.maxLength} characters` : void 0
+              helperText: format.maxLength ? `${(value == null ? void 0 : value.length) || 0}/${format.maxLength} characters` : void 0,
+              slotProps: {
+                htmlInput: { maxLength: format.maxLength }
+              }
             }
           )
         ] }) }, format.id);
@@ -302,7 +343,9 @@ const UserPreferences = () => {
       return /* @__PURE__ */ jsx(Card, { sx: { mb: 2 }, children: /* @__PURE__ */ jsxs(CardContent, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
         /* @__PURE__ */ jsxs(Box, { children: [
           /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: formatNotificationName(pref.name) }),
-          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: pref.name })
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: {
+            color: "text.secondary"
+          }, children: pref.name })
         ] }),
         /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 2 }, children: [
           (config == null ? void 0 : config.hasEmail) && /* @__PURE__ */ jsx(
@@ -335,7 +378,9 @@ const UserPreferences = () => {
               label: "Push"
             }
           ),
-          !(config == null ? void 0 : config.hasEmail) && !(config == null ? void 0 : config.hasPush) && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "(No configurable channels)" })
+          !(config == null ? void 0 : config.hasEmail) && !(config == null ? void 0 : config.hasPush) && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: {
+            color: "text.secondary"
+          }, children: "(No configurable channels)" })
         ] })
       ] }) }, pref.id);
     }) });
@@ -344,7 +389,17 @@ const UserPreferences = () => {
     const groupPreferences = getPreferencesForGroup(groupKey);
     const groupConfig = groups[groupKey];
     return /* @__PURE__ */ jsxs(Box, { sx: { pt: 2 }, children: [
-      (groupConfig == null ? void 0 : groupConfig.description) && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 3 }, children: groupConfig.description }),
+      (groupConfig == null ? void 0 : groupConfig.description) && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "body2",
+          sx: {
+            color: "text.secondary",
+            mb: 3
+          },
+          children: groupConfig.description
+        }
+      ),
       groupPreferences.map((format) => {
         if (format.type === "custom" && format.component === "NotificationPreferences") {
           return /* @__PURE__ */ jsx(Box, { children: renderNotificationPreferences() }, format.id);

package/dist/pages/DASHLightWeightLogin.js

@@ -345,11 +345,13 @@ const DASHLightWeightLogin = (props) => {
         children: /* @__PURE__ */ jsx(Container, { maxWidth: "sm", sx: { p: 1 }, children: /* @__PURE__ */ jsx(
           Box,
           {
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            minHeight: "50vh",
-            textAlign: "center",
+            sx: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              minHeight: "50vh",
+              textAlign: "center"
+            },
             children: /* @__PURE__ */ jsx("div", { children: "Cargando..." })
           }
         ) })

package/dist/pages/Profile.js

@@ -156,9 +156,11 @@ const Profile = (_props) => {
               Grid,
               {
                 size: { xs: 12, md: 4 },
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
+                sx: {
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
                 children: /* @__PURE__ */ jsxs(
                   CardContent,
                   {

package/dist/pages/RecoverPassword.js

@@ -122,18 +122,30 @@ const RecoverPassword = ({}) => {
               ]
             }
           ) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "dash-app-login-form", children: [
-            /* @__PURE__ */ jsxs(Grid, { container: true, sx: { mb: 4, mt: 2 }, spacing: 2, alignItems: "center", children: [
-              /* @__PURE__ */ jsx(Grid, { item: true, xs: 2, children: /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  color: "primary",
-                  size: "large",
-                  onClick: () => redirect("/"),
-                  children: /* @__PURE__ */ jsx(HomeIcon, {})
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Grid, { item: true, xs: 10, children: /* @__PURE__ */ jsx("h1", { className: "dash-app-login-form-title", style: { margin: 0 }, children: "Recuperar Contrase\xF1a" }) })
-            ] }),
+            /* @__PURE__ */ jsxs(
+              Grid,
+              {
+                container: true,
+                spacing: 2,
+                sx: {
+                  alignItems: "center",
+                  mb: 4,
+                  mt: 2
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Grid, { item: true, xs: 2, children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      color: "primary",
+                      size: "large",
+                      onClick: () => redirect("/"),
+                      children: /* @__PURE__ */ jsx(HomeIcon, {})
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Grid, { item: true, xs: 10, children: /* @__PURE__ */ jsx("h1", { className: "dash-app-login-form-title", style: { margin: 0 }, children: "Recuperar Contrase\xF1a" }) })
+                ]
+              }
+            ),
             error && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }),
             /* @__PURE__ */ jsx("div", { className: "dash-app-form-item", children: /* @__PURE__ */ jsx(
               TextField,
@@ -144,13 +156,15 @@ const RecoverPassword = ({}) => {
                 placeholder: "Email",
                 required: true,
                 value: email,
-                inputProps: { type: "email" },
                 onChange: (e) => setEmail(e.target.value),
                 className: "dash-app-form-item-input",
                 autoComplete: "username",
                 name: "email",
                 type: "email",
-                id: "email"
+                id: "email",
+                slotProps: {
+                  htmlInput: { type: "email" }
+                }
               }
             ) }),
             /* @__PURE__ */ jsx("div", { className: "dash-app-form-item mt-1", children: /* @__PURE__ */ jsx(

package/dist/schemas/subscription/components/SubscriptionPaymentHistory.js

@@ -60,7 +60,17 @@ const PaymentHistoryView = () => {
     }
   });
   if (loading) {
-    return /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: 2, children: /* @__PURE__ */ jsx(CircularProgress, {}) });
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          p: 2
+        },
+        children: /* @__PURE__ */ jsx(CircularProgress, {})
+      }
+    );
   }
   if (payments.length === 0) {
     return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "No hay historial de pagos disponible" });
@@ -83,7 +93,9 @@ const PaymentHistoryView = () => {
           children: payment.status === "completed" ? "Completado" : "Fallido"
         }
       ) }),
-      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", fontFamily: "monospace", children: payment.transaction_id }) })
+      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: {
+        fontFamily: "monospace"
+      }, children: payment.transaction_id }) })
     ] }, payment.id)) })
   ] }) });
 };

package/dist/schemas/subscription/components/SubscriptionPlanFeatures.js

@@ -40,30 +40,40 @@ const EditComponent = ({ method, attribute, resourceConfig }) => {
   };
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: "Caracter\xEDsticas del Plan" }),
-    /* @__PURE__ */ jsxs(Box, { display: "flex", gap: 1, mb: 2, children: [
-      /* @__PURE__ */ jsx(
-        TextField,
-        {
-          fullWidth: true,
-          size: "small",
-          label: "Nueva caracter\xEDstica",
-          value: newFeature,
-          onChange: (e) => setNewFeature(e.target.value),
-          onKeyPress: handleKeyPress,
-          placeholder: "Ej: Acceso ilimitado, Soporte 24/7"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "contained",
-          startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
-          onClick: handleAddFeature,
-          disabled: !newFeature.trim(),
-          children: "Agregar"
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          gap: 1,
+          mb: 2
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              fullWidth: true,
+              size: "small",
+              label: "Nueva caracter\xEDstica",
+              value: newFeature,
+              onChange: (e) => setNewFeature(e.target.value),
+              onKeyPress: handleKeyPress,
+              placeholder: "Ej: Acceso ilimitado, Soporte 24/7"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "contained",
+              startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
+              onClick: handleAddFeature,
+              disabled: !newFeature.trim(),
+              children: "Agregar"
+            }
+          )
+        ]
+      }
+    ),
     features.length > 0 ? /* @__PURE__ */ jsx(Paper, { variant: "outlined", children: /* @__PURE__ */ jsx(List, { dense: true, children: features.map((feature, index) => /* @__PURE__ */ jsxs(ListItem, { children: [
       /* @__PURE__ */ jsx(ListItemText, { primary: feature }),
       /* @__PURE__ */ jsx(ListItemSecondaryAction, { children: /* @__PURE__ */ jsx(
@@ -77,7 +87,9 @@ const EditComponent = ({ method, attribute, resourceConfig }) => {
         }
       ) })
     ] }, index)) }) }) : /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", style: { fontStyle: "italic" }, children: "No hay caracter\xEDsticas definidas para este plan" }),
-    /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Las caracter\xEDsticas se mostrar\xE1n a los usuarios al seleccionar este plan de suscripci\xF3n." }) })
+    /* @__PURE__ */ jsx(Box, { sx: {
+      mt: 2
+    }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Las caracter\xEDsticas se mostrar\xE1n a los usuarios al seleccionar este plan de suscripci\xF3n." }) })
   ] });
 };
 const ViewComponent = ({ method, attribute, resourceConfig }) => {