[utils][docs] Replace deprecated clip CSS property with clip-path (#48966)

Author: ZeeshanTamboli

docs/data/material/components/avatars/UploadAvatars.js

@@ -37,7 +37,7 @@ export default function UploadAvatars() {
         accept="image/*"
         style={{
           border: 0,
-          clip: 'rect(0 0 0 0)',
+          clipPath: 'inset(50%)',
           height: '1px',
           margin: '-1px',
           overflow: 'hidden',

docs/data/material/components/avatars/UploadAvatars.tsx

@@ -37,7 +37,7 @@ export default function UploadAvatars() {
         accept="image/*"
         style={{
           border: 0,
-          clip: 'rect(0 0 0 0)',
+          clipPath: 'inset(50%)',
           height: '1px',
           margin: '-1px',
           overflow: 'hidden',

docs/data/material/components/buttons/InputFileUpload.js

@@ -3,7 +3,6 @@ import Button from '@mui/material/Button';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 
 const VisuallyHiddenInput = styled('input')({
-  clip: 'rect(0 0 0 0)',
   clipPath: 'inset(50%)',
   height: 1,
   overflow: 'hidden',

docs/data/material/components/buttons/InputFileUpload.tsx

@@ -3,7 +3,6 @@ import Button from '@mui/material/Button';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 
 const VisuallyHiddenInput = styled('input')({
-  clip: 'rect(0 0 0 0)',
   clipPath: 'inset(50%)',
   height: 1,
   overflow: 'hidden',

packages/mui-utils/src/visuallyHidden/visuallyHidden.ts

@@ -2,7 +2,7 @@ import type * as React from 'react';
 
 const visuallyHidden: React.CSSProperties = {
   border: 0,
-  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
   height: '1px',
   margin: '-1px',
   overflow: 'hidden',