@dashadmin/dash-admin 1.3.51 → 1.3.53

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

@@ -24,31 +24,46 @@ const SubscriptionPlanPreview = ({ method, attribute, resourceConfig }) => {
   const getBillingCycleText = (cycle) => {
     return cycle === "monthly" ? "mes" : "a\xF1o";
   };
-  return /* @__PURE__ */ jsx(Box, { maxWidth: 400, children: /* @__PURE__ */ jsx(Card, { elevation: 3, children: /* @__PURE__ */ jsxs(CardContent, { children: [
-    /* @__PURE__ */ jsxs(Box, { textAlign: "center", mb: 2, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", gutterBottom: true, children: record.name }),
-      record.has_trial && /* @__PURE__ */ jsx(
-        Chip,
-        {
-          icon: /* @__PURE__ */ jsx(StarIcon, {}),
-          label: `${record.trial_days} d\xEDas gratis`,
-          color: "primary",
-          size: "small",
-          sx: { mb: 1 }
-        }
-      ),
-      /* @__PURE__ */ jsx(Typography, { variant: "h3", component: "div", color: "primary", children: formatPrice(record.price) }),
-      /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", children: [
-        "por ",
-        getBillingCycleText(record.billing_cycle)
-      ] }),
-      record.billing_cycle === "yearly" && /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "success.main", children: [
-        formatPrice(record.price_per_month),
-        " por mes"
-      ] })
-    ] }),
+  return /* @__PURE__ */ jsx(Box, { sx: {
+    maxWidth: 400
+  }, children: /* @__PURE__ */ jsx(Card, { elevation: 3, children: /* @__PURE__ */ jsxs(CardContent, { children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          textAlign: "center",
+          mb: 2
+        },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", gutterBottom: true, children: record.name }),
+          record.has_trial && /* @__PURE__ */ jsx(
+            Chip,
+            {
+              icon: /* @__PURE__ */ jsx(StarIcon, {}),
+              label: `${record.trial_days} d\xEDas gratis`,
+              color: "primary",
+              size: "small",
+              sx: { mb: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "h3", component: "div", color: "primary", children: formatPrice(record.price) }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", children: [
+            "por ",
+            getBillingCycleText(record.billing_cycle)
+          ] }),
+          record.billing_cycle === "yearly" && /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: {
+            color: "success.main"
+          }, children: [
+            formatPrice(record.price_per_month),
+            " por mes"
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(Divider, { sx: { my: 2 } }),
-    record.description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", paragraph: true, children: record.description }),
+    record.description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", sx: {
+      marginBottom: "16px"
+    }, children: record.description }),
     record.features && record.features.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
       /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: "Caracter\xEDsticas incluidas:" }),
       /* @__PURE__ */ jsx(List, { dense: true, children: record.features.map((feature, index) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, children: [
@@ -57,7 +72,9 @@ const SubscriptionPlanPreview = ({ method, attribute, resourceConfig }) => {
           ListItemText,
           {
             primary: feature,
-            primaryTypographyProps: { variant: "body2" }
+            slotProps: {
+              primary: { variant: "body2" }
+            }
           }
         )
       ] }, index)) })
@@ -78,9 +95,11 @@ const SubscriptionPlanPreview = ({ method, attribute, resourceConfig }) => {
       {
         variant: "caption",
         color: "error",
-        display: "block",
-        textAlign: "center",
-        mt: 1,
+        sx: {
+          display: "block",
+          textAlign: "center",
+          mt: 1
+        },
         children: "Plan no disponible"
       }
     )

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

@@ -71,7 +71,17 @@ const StatsView = ({ method, attribute, resourceConfig }) => {
     return priceFormatter(amount, "CLP");
   };
   if (loading) {
-    return /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: 4, children: /* @__PURE__ */ jsx(CircularProgress, {}) });
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          p: 4
+        },
+        children: /* @__PURE__ */ jsx(CircularProgress, {})
+      }
+    );
   }
   if (!stats) {
     return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "error", children: "Error al cargar las estad\xEDsticas" });
@@ -80,60 +90,140 @@ const StatsView = ({ method, attribute, resourceConfig }) => {
     /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: "Estad\xEDsticas del Plan" }),
     /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
       /* @__PURE__ */ jsx(Grid, { component: "div", item: true, size: { xs: 12, sm: 6, md: 3 }, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
-        /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mb: 1, children: [
-          /* @__PURE__ */ jsx(PeopleIcon, { color: "primary", sx: { mr: 1 } }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "primary", children: stats.total_subscriptions })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              mb: 1
+            },
+            children: [
+              /* @__PURE__ */ jsx(PeopleIcon, { color: "primary", sx: { mr: 1 } }),
+              /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "primary", children: stats.total_subscriptions })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Total Suscripciones" })
       ] }) }) }),
       /* @__PURE__ */ jsx(Grid, { component: "div", item: true, size: { xs: 12, sm: 6, md: 3 }, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
-        /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mb: 1, children: [
-          /* @__PURE__ */ jsx(TrendingUpIcon, { color: "success", sx: { mr: 1 } }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "success.main", children: stats.active_subscriptions })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              mb: 1
+            },
+            children: [
+              /* @__PURE__ */ jsx(TrendingUpIcon, { color: "success", sx: { mr: 1 } }),
+              /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: {
+                color: "success.main"
+              }, children: stats.active_subscriptions })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Suscripciones Activas" })
       ] }) }) }),
       /* @__PURE__ */ jsx(Grid, { component: "div", item: true, size: { xs: 12, sm: 6, md: 3 }, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
-        /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mb: 1, children: [
-          /* @__PURE__ */ jsx(TimelineIcon, { color: "info", sx: { mr: 1 } }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "info.main", children: stats.trial_subscriptions })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              mb: 1
+            },
+            children: [
+              /* @__PURE__ */ jsx(TimelineIcon, { color: "info", sx: { mr: 1 } }),
+              /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: {
+                color: "info.main"
+              }, children: stats.trial_subscriptions })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "En Per\xEDodo de Prueba" })
       ] }) }) }),
       /* @__PURE__ */ jsx(Grid, { component: "div", item: true, size: { xs: 12, sm: 6, md: 3 }, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
-        /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", mb: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "error.main", children: stats.cancelled_subscriptions }) }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              mb: 1
+            },
+            children: /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: {
+              color: "error.main"
+            }, children: stats.cancelled_subscriptions })
+          }
+        ),
         /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Canceladas" })
       ] }) }) }),
       /* @__PURE__ */ jsx(Grid, { component: "div", item: true, size: { xs: 12, sm: 6 }, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
-        /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mb: 1, children: [
-          /* @__PURE__ */ jsx(MoneyIcon, { color: "success", sx: { mr: 1 } }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "success.main", children: formatCurrency(stats.total_revenue) })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              mb: 1
+            },
+            children: [
+              /* @__PURE__ */ jsx(MoneyIcon, { color: "success", sx: { mr: 1 } }),
+              /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: {
+                color: "success.main"
+              }, children: formatCurrency(stats.total_revenue) })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Ingresos Totales" })
       ] }) }) }),
       /* @__PURE__ */ jsx(Grid, { component: "div", item: true, size: { xs: 12, sm: 6 }, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
-        /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mb: 1, children: [
-          /* @__PURE__ */ jsx(MoneyIcon, { color: "primary", sx: { mr: 1 } }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "primary", children: formatCurrency(stats.monthly_revenue) })
-        ] }),
-        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Ingresos Mensuales" })
-      ] }) }) }),
-      /* @__PURE__ */ jsx(Grid, { component: "div", item: true, size: 12, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Tasa de Conversi\xF3n" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "De prueba a suscripci\xF3n pagada" })
-        ] }),
-        /* @__PURE__ */ jsx(
-          Chip,
+        /* @__PURE__ */ jsxs(
+          Box,
           {
-            label: `${stats.conversion_rate.toFixed(1)}%`,
-            color: stats.conversion_rate > 50 ? "success" : stats.conversion_rate > 25 ? "warning" : "error",
-            size: "medium"
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              mb: 1
+            },
+            children: [
+              /* @__PURE__ */ jsx(MoneyIcon, { color: "primary", sx: { mr: 1 } }),
+              /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "primary", children: formatCurrency(stats.monthly_revenue) })
+            ]
           }
-        )
-      ] }) }) }) })
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Ingresos Mensuales" })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Grid, { component: "div", item: true, size: 12, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Tasa de Conversi\xF3n" }),
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "De prueba a suscripci\xF3n pagada" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Chip,
+              {
+                label: `${stats.conversion_rate.toFixed(1)}%`,
+                color: stats.conversion_rate > 50 ? "success" : stats.conversion_rate > 25 ? "warning" : "error",
+                size: "medium"
+              }
+            )
+          ]
+        }
+      ) }) }) })
     ] }),
-    /* @__PURE__ */ jsxs(Box, { mt: 3, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: {
+      mt: 3
+    }, children: [
       /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: "Informaci\xF3n Adicional" }),
       /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
         /* @__PURE__ */ jsx(Grid, { component: "div", item: true, size: { xs: 12, sm: 6 }, children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dashadmin/dash-admin",
-	"version": "1.3.51",
+	"version": "1.3.53",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -32,7 +32,7 @@
 		"@tanstack/react-query-persist-client": "latest",
 		"@emotion/react": "latest",
 		"@emotion/styled": "latest",
-		"@mui/material": "^7.3.10",
+		"@mui/material": "^9.3.0",
 		"@rollup/plugin-alias": "latest",
 		"@rollup/plugin-commonjs": "latest",
 		"@rollup/plugin-node-resolve": "latest",
@@ -47,8 +47,8 @@
 		"prop-types": "latest",
 		"query-string": "latest",
 		"ra-input-rich-text": "5.14.6",
-		"react": "latest",
-		"react-admin": "5.14.6",
+		"react": "19.2.8",
+		"react-admin": "5.15.1",
 		"react-custom-scrollbars-2": "latest",
 		"react-hook-form": "^7.54.0",
 		"react-loading-overlay-ts": "latest",
@@ -96,7 +96,7 @@
 		"eslint-plugin-react-hooks": "latest",
 		"@dashadmin/dash-prettier": "workspace:*",
 		"query-string": "latest",
-		"react-dom": "latest",
+		"react-dom": "19.2.8",
 		"rollup": "latest",
 		"rollup-plugin-copy-assets": "latest",
 		"rollup-plugin-external-globals": "latest",

package/src/components/avatar/Avatar.tsx

@@ -47,10 +47,14 @@ export const AvatarDisplay: React.FC<AvatarComponent> = (props) => {
 	const imageUrl = record?.[_attributeName];
    
 	return (
-		<Box display="flex" alignItems="center">
-			<AvatarMui src={imageUrl} alt="avatar" />
-		</Box>
-	);
+        <Box
+            sx={{
+                display: "flex",
+                alignItems: "center"
+            }}>
+            <AvatarMui src={imageUrl} alt="avatar" />
+        </Box>
+    );
 };
 
 const Avatar = ({ method, attribute,resourceConfig }: IDashAutoAdminCustomFieldComponent) => {

package/src/components/currency/Format.tsx

@@ -45,19 +45,21 @@ const ComponentEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({
 	}, [format, symbol]);
 
 	return (
-		<>
-			<TextField
+        <>
+            <TextField
 				label='Probar formateo'
 				value={rawText}
 				onChange={({ target: { value } }) => formatNumber(value)}
 			/>
-			<TextField
+            <TextField
 				label='Valor formateado'
 				value={formattedNumber}
-				inputProps={{ readOnly: true }}
+				slotProps={{
+                    htmlInput: { readOnly: true }
+                }}
 			/>
-		</>
-	);
+        </>
+    );
 };
 
 const FormatCurrency = ({

package/src/components/i18n/BridgedLocalesMenuButton.tsx

@@ -137,8 +137,10 @@ const BridgedLocalesMenuButton: React.FC<BridgedLocalesMenuButtonProps> = ({
                 anchorEl={anchorEl}
                 open={open}
                 onClose={handleClose}
-                MenuListProps={{
-                    'aria-labelledby': 'locale-button',
+                slotProps={{
+                    list: {
+                        'aria-labelledby': 'locale-button',
+                    }
                 }}
             >
                 {locales.map((localeOption) => (

package/src/components/misc/DASHGlobalErrorHandler.tsx

@@ -80,7 +80,7 @@ const _checkError = (errorData: any): IDashGlobalError => {
     }
     
     // Handle legacy error format
-    let e: IDashGlobalError = { ...errorData?.error ? errorData.error : {} };
+    let e: IDashGlobalError = { ...(errorData?.error ? errorData.error : {}) };
     
     let _extra = "";
     if (e.status >= 400 && e.status < 499) {

package/src/components/misc/NoResults.tsx

@@ -12,14 +12,17 @@ export const NoResults: React.FC<INoResults> = (props) => {
     const { title, description, children } = props;
 
 	return (
-		<Card sx={{ p: 0 }}>
-			<CardContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'left', gap: 2 }}>
+        <Card sx={{ p: 0 }}>
+            <CardContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'left', gap: 2 }}>
 				<div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
 					<InfoIcon sx={{ fontSize: 32 }} />
 				{title ? <Typography variant="h5">{title}</Typography> : "No hay registros"}
 				</div>
-				{description && <Typography variant="body1" color="text.secondary">{description}</Typography>}
+				{description && <Typography variant="body1" sx={{
+                    color: "text.secondary"
+                }}>{description}</Typography>}
 				{children ? children : <></>}
 			</CardContent>
-		</Card>	);
+        </Card>
+    );
 };

package/src/components/permission/AvailablePermissionsContext.tsx

@@ -71,7 +71,7 @@ export const AvailablePermissionsContext: React.FC<{children: React.ReactNode}>
     if (!LAST_FETCH_TIME) {
       try {
         // Try to get last fetch time from IndexedDB
-        LAST_FETCH_TIME = await idbGet("system_available_permissions_cache") || 0;
+        LAST_FETCH_TIME = (await idbGet("system_available_permissions_cache")) || 0;
       } catch (error) {
         console.error("Error reading from IndexedDB:", error);
       }

package/src/components/permission/PermissionsSelector.tsx

@@ -94,7 +94,9 @@ const PermissionsSelectorView: React.FC<IDashAutoAdminCustomFieldComponent> = ({
     if (!record?.permissions || record.permissions.length === 0) {
         return (
             <Box sx={{ p: 2, textAlign: 'center' }}>
-                <Typography variant="body2" color="text.secondary">
+                <Typography variant="body2" sx={{
+                    color: "text.secondary"
+                }}>
                     No permissions assigned
                 </Typography>
             </Box>
@@ -109,7 +111,7 @@ const PermissionsSelectorView: React.FC<IDashAutoAdminCustomFieldComponent> = ({
             <Grid container spacing={3}>
                 {permissions?.map((tab, index) => (
                     /* @ts-ignore */
-                    <Grid item xs={12} sm={6} md={4} lg={3} key={index}>
+                    (<Grid item xs={12} sm={6} md={4} lg={3} key={index}>
                         <Card 
                             variant="outlined" 
                             sx={{ 
@@ -138,7 +140,7 @@ const PermissionsSelectorView: React.FC<IDashAutoAdminCustomFieldComponent> = ({
                                 </Stack>
                             </CardContent>
                         </Card>
-                    </Grid>
+                    </Grid>)
                 ))}
             </Grid>
         </Box>
@@ -533,19 +535,21 @@ const PermissionsSelectorBase: React.FC<IDashAutoAdminCustomFieldComponent & { r
                             placeholder="e.g., user, admin, system..."
                             value={groupSearchTerm}
                             onChange={e => setGroupSearchTerm(e.target.value)}
-                            InputProps={{
-                                startAdornment: (
-                                    <InputAdornment position="start">
-                                        <SearchIcon color="action" />
-                                    </InputAdornment>
-                                ),
-                                endAdornment: groupSearchTerm && (
-                                    <InputAdornment position="end">
-                                        <IconButton size="small" onClick={handleClearGroupSearch}>
-                                            <ClearIcon fontSize="small" />
-                                        </IconButton>
-                                    </InputAdornment>
-                                )
+                            slotProps={{
+                                input: {
+                                    startAdornment: (
+                                        <InputAdornment position="start">
+                                            <SearchIcon color="action" />
+                                        </InputAdornment>
+                                    ),
+                                    endAdornment: groupSearchTerm && (
+                                        <InputAdornment position="end">
+                                            <IconButton size="small" onClick={handleClearGroupSearch}>
+                                                <ClearIcon fontSize="small" />
+                                            </IconButton>
+                                        </InputAdornment>
+                                    )
+                                }
                             }}
                         />
                     </Grid>
@@ -558,26 +562,30 @@ const PermissionsSelectorBase: React.FC<IDashAutoAdminCustomFieldComponent & { r
                             placeholder="e.g., create, edit, delete, view..."
                             value={itemSearchTerm}
                             onChange={e => setItemSearchTerm(e.target.value)}
-                            InputProps={{
-                                startAdornment: (
-                                    <InputAdornment position="start">
-                                        <SearchIcon color="action" />
-                                    </InputAdornment>
-                                ),
-                                endAdornment: itemSearchTerm && (
-                                    <InputAdornment position="end">
-                                        <IconButton size="small" onClick={handleClearItemSearch}>
-                                            <ClearIcon fontSize="small" />
-                                        </IconButton>
-                                    </InputAdornment>
-                                )
+                            slotProps={{
+                                input: {
+                                    startAdornment: (
+                                        <InputAdornment position="start">
+                                            <SearchIcon color="action" />
+                                        </InputAdornment>
+                                    ),
+                                    endAdornment: itemSearchTerm && (
+                                        <InputAdornment position="end">
+                                            <IconButton size="small" onClick={handleClearItemSearch}>
+                                                <ClearIcon fontSize="small" />
+                                            </IconButton>
+                                        </InputAdornment>
+                                    )
+                                }
                             }}
                         />
                     </Grid>
                 </Grid>
                 {hasActiveSearch && (
                     <Box sx={{ mt: 2, p: 2, bgcolor: 'action.hover', borderRadius: 1 }}>
-                        <Typography variant="body2" color="text.secondary">
+                        <Typography variant="body2" sx={{
+                            color: "text.secondary"
+                        }}>
                             <strong>Search Results:</strong> {filteredGroupsCount} group{filteredGroupsCount !== 1 ? 's' : ''} 
                             {' '}({totalFilteredItems} permission{totalFilteredItems !== 1 ? 's' : ''}) 
                             {' '}of {permissionsData.length} total groups ({totalPermissions} total permissions)
@@ -606,10 +614,17 @@ const PermissionsSelectorBase: React.FC<IDashAutoAdminCustomFieldComponent & { r
                     borderColor: 'divider'
                 }}>
                     <SearchIcon sx={{ fontSize: 48, color: 'text.disabled', mb: 2 }} />
-                    <Typography variant="h6" color="text.secondary" gutterBottom>
+                    <Typography variant="h6" gutterBottom sx={{
+                        color: "text.secondary"
+                    }}>
                         No permissions found
                     </Typography>
-                    <Typography variant="body2" color="text.disabled" sx={{ mb: 2 }}>
+                    <Typography
+                        variant="body2"
+                        sx={{
+                            color: "text.disabled",
+                            mb: 2
+                        }}>
                         No permissions match your search criteria
                         {debouncedGroupSearch && ` for group "${debouncedGroupSearch}"`}
                         {debouncedItemSearch && ` for permission "${debouncedItemSearch}"`}
@@ -638,7 +653,7 @@ const PermissionsSelectorBase: React.FC<IDashAutoAdminCustomFieldComponent & { r
                         const visibleItems = isExpanded ? group : group.slice(0, INITIAL_ITEMS_COUNT);
                         const remainingCount = group.length - INITIAL_ITEMS_COUNT;
                         return (
-                            /* @ts-ignore */ 
+                            /* @ts-ignore */
                             <Grid item xs={12} md={4} key={groupIndex}>
                                 <Card variant="outlined" sx={{
                                     height: '100%',

package/src/components/permission/PermissionsSelectorList.tsx

@@ -305,7 +305,7 @@ const PermissionsSelectorListBase: React.FC<IDashAutoAdminCustomFieldComponent &
 
     return (
         <Box sx={{ p: 2 }}>
-         
+
             {/* Global Toolbar */}
             <Paper elevation={1} sx={{ mb: 3, p: 2 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
@@ -418,7 +418,12 @@ const PermissionsSelectorListBase: React.FC<IDashAutoAdminCustomFieldComponent &
                         ) : (
                             <TableRow>
                                 <TableCell colSpan={4} align="center">
-                                    <Typography variant="body2" color="text.secondary" sx={{ py: 3 }}>
+                                    <Typography
+                                        variant="body2"
+                                        sx={{
+                                            color: "text.secondary",
+                                            py: 3
+                                        }}>
                                         No permissions found
                                     </Typography>
                                 </TableCell>