Repository: mui/material-ui
File: docs/src/modules/components/AnalyticsProvider.tsx (TypeScript)

Code before:
      });
      return () => cancelAnimationFrame(frame);
    }
    setShow(false);
    return undefined;
  }, [needsConsent]);

  return (
    <Portal>
      <TrapFocus open={needsConsent} disableAutoFocus disableEnforceFocus>
        <Fade in={show} unmountOnExit>
          <Paper
            role="dialog"
            aria-modal="false"
            aria-labelledby="cookie-consent-dialog-title"
            aria-describedby="cookie-consent-dialog-description"
            variant="outlined"
            tabIndex={-1}
            sx={(theme) => ({
              position: 'fixed',
              bottom: 0,
              right: 0,
              p: 2,
              m: 2,
              maxWidth: 340,
              pointerEvents: 'auto',
              zIndex: theme.zIndex.snackbar,
              ...theme.applyDarkStyles({
                bgcolor: 'primaryDark.800',
              }),
            })}
          >
            <Stack direction="column" spacing={3} sx={{ justifyContent: 'flex-start' }}>
              <Stack
                spacing={1}
                sx={{ flexShrink: 1, alignSelf: { xs: 'flex-start', sm: 'center' } }}
              >
                <Box
                  sx={(theme) => ({
                    borderRadius: '50%',
                    bgcolor: alpha(theme.palette.primary.main, 0.1),
                    p: 1,
                    display: 'inline-block',
                    width: 40,
                    height: 40,
                    mb: -1,
                    alignSelf: { xs: 'center', sm: 'flex-start' },
                  })}
                >
                  <CookieOutlinedIcon color="primary" strokeWidth={1.5} />
                </Box>

Review comment (suggestion):
We could potentially use some elevation here 



<img width="490" height="361" alt="Image" src="https://github.com/user-attachments/assets/cae7113b-de07-42f7-b78e-7de50680002d" />


```suggestion
              pointerEvents: 'auto',
              boxShadow: theme.shadows[2],
```

Code after:
      });
      return () => cancelAnimationFrame(frame);
    }
    setShow(false);
    return undefined;
  }, [needsConsent]);

  return (
    <Portal>
      <TrapFocus open={needsConsent} disableAutoFocus disableEnforceFocus>
        <Fade in={show} unmountOnExit>
          <Paper
            role="dialog"
            aria-modal="false"
            aria-labelledby="cookie-consent-dialog-title"
            aria-describedby="cookie-consent-dialog-description"
            variant="outlined"
            tabIndex={-1}
            sx={(theme) => ({
              position: 'fixed',
              bottom: 0,
              right: 0,
              p: 2,
              m: 2,
              maxWidth: 340,
              pointerEvents: 'auto',
              boxShadow: theme.shadows[2],
              zIndex: theme.zIndex.snackbar,
              ...theme.applyDarkStyles({
                bgcolor: 'primaryDark.900',
              }),
            })}
          >
            <Stack direction="column" spacing={3} sx={{ justifyContent: 'flex-start' }}>
              <Stack
                spacing={1}
                sx={{ flexShrink: 1, alignSelf: { xs: 'flex-start', sm: 'center' } }}
              >
                <Box
                  sx={(theme) => ({
                    borderRadius: '50%',
                    bgcolor: alpha(theme.palette.primary.main, 0.1),
                    p: 1,
                    display: 'inline-block',
                    width: 40,
                    height: 40,
                    mb: -1,
                    alignSelf: { xs: 'center', sm: 'flex-start' },
                  })}
                >
                  <CookieOutlinedIcon color="primary" strokeWidth={1.5} />