@canmingir/link 1.2.27 → 1.2.30

package/src/theme/overrides/default-props.jsx

@@ -105,11 +105,14 @@ export function defaultProps(theme) {
     },
     MuiCardHeader: {
       defaultProps: {
-        titleTypographyProps: { variant: "h6" },
-        subheaderTypographyProps: {
-          variant: "body2",
-          marginTop: theme.spacing(0.5),
-        },
+        slotProps: {
+          title: { variant: "h6" },
+
+          subheader: {
+            variant: "body2",
+            marginTop: theme.spacing(0.5),
+          }
+        }
       },
     },
     MuiChip: {
@@ -134,12 +137,15 @@ export function defaultProps(theme) {
     },
     MuiListItemText: {
       defaultProps: {
-        primaryTypographyProps: {
-          typography: "subtitle2",
-        },
-        secondaryTypographyProps: {
-          component: "span",
-        },
+        slotProps: {
+          primary: {
+            typography: "subtitle2",
+          },
+
+          secondary: {
+            component: "span",
+          }
+        }
       },
     },
     MuiPaper: {

package/src/widgets/Login/CognitoLogin.jsx

@@ -180,28 +180,33 @@ export default function CognitoLogin() {
           )}
         </Box>
 
-        <Typography variant="h4" fontWeight={700} gutterBottom>
+        <Typography variant="h4" gutterBottom sx={{
+          fontWeight: 700
+        }}>
           {titles[mode].heading}
         </Typography>
-        <Typography variant="body2" color="text.secondary">
+        <Typography variant="body2" sx={{
+          color: "text.secondary"
+        }}>
           {titles[mode].sub}
         </Typography>
       </Box>
-
       <Stack spacing={2}>
         <TextField
           label="Email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           fullWidth
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <EmailOutlined sx={{ color: "text.secondary", fontSize: 22 }} />
-              </InputAdornment>
-            ),
-          }}
           sx={inputSx}
+          slotProps={{
+            input: {
+              startAdornment: (
+                <InputAdornment position="start">
+                  <EmailOutlined sx={{ color: "text.secondary", fontSize: 22 }} />
+                </InputAdornment>
+              ),
+            }
+          }}
         />
 
         {mode !== "confirm" && (
@@ -211,17 +216,19 @@ export default function CognitoLogin() {
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             fullWidth
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <LockOutlined
-                    sx={{ color: "text.secondary", fontSize: 22 }}
-                  />
-                </InputAdornment>
-              ),
-              endAdornment: passwordAdornment,
-            }}
             sx={inputSx}
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <LockOutlined
+                      sx={{ color: "text.secondary", fontSize: 22 }}
+                    />
+                  </InputAdornment>
+                ),
+                endAdornment: passwordAdornment,
+              }
+            }}
           />
         )}
 
@@ -232,28 +239,30 @@ export default function CognitoLogin() {
             value={confirmPassword}
             onChange={(e) => setConfirmPassword(e.target.value)}
             fullWidth
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <LockOutlined
-                    sx={{ color: "text.secondary", fontSize: 22 }}
-                  />
-                </InputAdornment>
-              ),
-              endAdornment: (
-                <InputAdornment position="end">
-                  <IconButton
-                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                    edge="end"
-                    size="small"
-                    tabIndex={-1}
-                  >
-                    {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
-                  </IconButton>
-                </InputAdornment>
-              ),
-            }}
             sx={inputSx}
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <LockOutlined
+                      sx={{ color: "text.secondary", fontSize: 22 }}
+                    />
+                  </InputAdornment>
+                ),
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                      edge="end"
+                      size="small"
+                      tabIndex={-1}
+                    >
+                      {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }
+            }}
           />
         )}
 
@@ -263,20 +272,21 @@ export default function CognitoLogin() {
             value={code}
             onChange={(e) => setCode(e.target.value)}
             fullWidth
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <CheckOutlined
-                    sx={{ color: "text.secondary", fontSize: 22 }}
-                  />
-                </InputAdornment>
-              ),
-            }}
             sx={inputSx}
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <CheckOutlined
+                      sx={{ color: "text.secondary", fontSize: 22 }}
+                    />
+                  </InputAdornment>
+                ),
+              }
+            }}
           />
         )}
       </Stack>
-
       {mode === "login" && (
         <Stack spacing={1.5}>
           <Button
@@ -297,7 +307,6 @@ export default function CognitoLogin() {
           </Button>
         </Stack>
       )}
-
       {mode === "signup" && (
         <Stack spacing={1.5}>
           <Button
@@ -318,7 +327,6 @@ export default function CognitoLogin() {
           </Button>
         </Stack>
       )}
-
       {mode === "confirm" && (
         <Button
           variant="contained"

package/src/widgets/Login/DemoLogin.jsx

@@ -62,13 +62,6 @@ export default function DemoLogin() {
           value={username}
           onChange={(e) => setUsername(e.target.value)}
           fullWidth
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <PersonOutline sx={{ color: "text.secondary", fontSize: 22 }} />
-              </InputAdornment>
-            ),
-          }}
           sx={{
             "& .MuiOutlinedInput-root": {
               fontSize: "1rem",
@@ -80,6 +73,15 @@ export default function DemoLogin() {
               },
             },
           }}
+          slotProps={{
+            input: {
+              startAdornment: (
+                <InputAdornment position="start">
+                  <PersonOutline sx={{ color: "text.secondary", fontSize: 22 }} />
+                </InputAdornment>
+              ),
+            }
+          }}
         />
 
         <TextField
@@ -88,25 +90,6 @@ export default function DemoLogin() {
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           fullWidth
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <LockOutlined sx={{ color: "text.secondary", fontSize: 22 }} />
-              </InputAdornment>
-            ),
-            endAdornment: (
-              <InputAdornment position="end">
-                <IconButton
-                  onClick={() => setShowPassword(!showPassword)}
-                  edge="end"
-                  size="small"
-                  tabIndex={-1}
-                >
-                  {showPassword ? <VisibilityOff /> : <Visibility />}
-                </IconButton>
-              </InputAdornment>
-            ),
-          }}
           sx={{
             "& .MuiOutlinedInput-root": {
               fontSize: "1rem",
@@ -123,9 +106,29 @@ export default function DemoLogin() {
               handleLogin();
             }
           }}
+          slotProps={{
+            input: {
+              startAdornment: (
+                <InputAdornment position="start">
+                  <LockOutlined sx={{ color: "text.secondary", fontSize: 22 }} />
+                </InputAdornment>
+              ),
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    onClick={() => setShowPassword(!showPassword)}
+                    edge="end"
+                    size="small"
+                    tabIndex={-1}
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }
+          }}
         />
       </Stack>
-
       <Button
         variant="contained"
         onClick={handleLogin}
@@ -153,7 +156,6 @@ export default function DemoLogin() {
       >
         Sign in
       </Button>
-
       <Box
         sx={{
           mt: 1,
@@ -167,9 +169,10 @@ export default function DemoLogin() {
       >
         <Typography
           variant="caption"
-          color="text.secondary"
-          sx={{ fontSize: "0.8125rem" }}
-        >
+          sx={{
+            color: "text.secondary",
+            fontSize: "0.8125rem"
+          }}>
           Demo credentials:{" "}
           <Box component="strong" sx={{ color: "text.primary" }}>
             admin / admin

package/src/widgets/SettingsDialog.jsx

@@ -167,11 +167,13 @@ function SettingsDialog({ handleClose, open }) {
       maxWidth={"md"}
       onClose={() => handleClose()}
       sx={{ bgcolor: "custom.darkDialogBg", zIndex: 2147483647 }}
-      PaperProps={{
-        style: {
-          color: "white",
-          minHeight: 600,
-        },
+      slotProps={{
+        paper: {
+          style: {
+            color: "white",
+            minHeight: 600,
+          },
+        }
       }}
     >
       <DialogContent>
@@ -212,9 +214,13 @@ const Permission = () => {
   }, [event, event2]);
 
   return (
-    <Stack direction="column" spacing={2} p={2}>
+    <Stack direction="column" spacing={2} sx={{
+      p: 2
+    }}>
       <Typography variant="h6">Users</Typography>
-      <Typography variant="subtitle2" color="text.secondary">
+      <Typography variant="subtitle2" sx={{
+        color: "text.secondary"
+      }}>
         Users with access to the project.
       </Typography>
       <List>
@@ -300,9 +306,13 @@ const Settings = () => {
   };
 
   return (
-    <Stack direction="column" spacing={2} p={2}>
+    <Stack direction="column" spacing={2} sx={{
+      p: 2
+    }}>
       <Typography variant="h6">Settings</Typography>
-      <Typography variant="subtitle2" color="text.secondary">
+      <Typography variant="subtitle2" sx={{
+        color: "text.secondary"
+      }}>
         Configure your application settings.
       </Typography>
       <List>
@@ -363,7 +373,9 @@ const About = () => {
   const description = pkg.description;
 
   return (
-    <Stack direction="column" spacing={2} p={2}>
+    <Stack direction="column" spacing={2} sx={{
+      p: 2
+    }}>
       <Box
         sx={{
           p: 3,
@@ -374,7 +386,9 @@ const About = () => {
             "linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01))",
         }}
       >
-        <Stack direction="row" spacing={2.5} alignItems="center">
+        <Stack direction="row" spacing={2.5} sx={{
+          alignItems: "center"
+        }}>
           <Avatar
             src={iconSrc}
             variant="rounded"
@@ -390,16 +404,20 @@ const About = () => {
           </Avatar>
 
           <Box sx={{ flex: 1, minWidth: 0 }}>
-            <Typography variant="h5" fontWeight={600}>
+            <Typography variant="h5" sx={{
+              fontWeight: 600
+            }}>
               {appName.toUpperCase()}
             </Typography>
 
             {description && (
               <Typography
                 variant="body2"
-                color="text.secondary"
-                sx={{ mt: 0.5, maxWidth: 520 }}
-              >
+                sx={{
+                  color: "text.secondary",
+                  mt: 0.5,
+                  maxWidth: 520
+                }}>
                 {description}
               </Typography>
             )}
@@ -442,7 +460,9 @@ const About = () => {
             textAlign: "center",
           }}
         >
-          <Typography variant="caption" color="text.secondary">
+          <Typography variant="caption" sx={{
+            color: "text.secondary"
+          }}>
             © 2026 greycollar.ai. All rights reserved.
           </Typography>
         </Box>
@@ -453,11 +473,17 @@ const About = () => {
 
 const InfoRow = ({ label, value, link }) => {
   return (
-    <Stack direction="row" spacing={1.5} alignItems="center">
-      <Typography variant="body2" color="text.secondary" sx={{ minWidth: 110 }}>
+    <Stack direction="row" spacing={1.5} sx={{
+      alignItems: "center"
+    }}>
+      <Typography
+        variant="body2"
+        sx={{
+          color: "text.secondary",
+          minWidth: 110
+        }}>
         {label}
       </Typography>
-
       {link ? (
         <Link href={link} target="_blank" rel="noreferrer" underline="hover">
           {value}