@verdaccio/ui-components 4.0.0-next-8.1 → 4.0.0-next-8.2

package/src/Theme/ResetStyles.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Theme } from './theme';
 
-const resetStyles = makeStyles(({ theme }: { theme?: Theme }) => ({
+const resetStyles = makeStyles((theme: Theme) => ({
   '@global': {
     // eslint-disable-next-line max-len
     'html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video':
@@ -11,7 +11,7 @@ const resetStyles = makeStyles(({ theme }: { theme?: Theme }) => ({
         fontFamily: '"Roboto", Helvetica Neue, Arial, sans-serif',
       },
     strong: {
-      fontWeight: theme?.fontWeight.semiBold,
+      fontWeight: theme.fontWeight.semiBold,
     },
     'html, body, #root': {
       height: '100%',
@@ -26,8 +26,8 @@ const resetStyles = makeStyles(({ theme }: { theme?: Theme }) => ({
       flex: 1,
       height: '100%',
 
-      [`@media screen and (min-width: ${theme?.breakPoints.container}px)`]: {
-        maxWidth: theme?.breakPoints.container,
+      [`@media screen and (min-width: ${theme.breakPoints.container}px)`]: {
+        maxWidth: theme.breakPoints.container,
         width: '100%',
         marginLeft: 'auto',
         marginRight: 'auto',

package/src/Theme/theme.ts

@@ -1,4 +1,4 @@
-import { createTheme } from '@mui/material/styles';
+import { Theme as MuiTheme, createTheme } from '@mui/material/styles';
 
 import { PRIMARY_COLOR } from './colors';
 
@@ -92,7 +92,15 @@ const customizedTheme = {
 
 type CustomizedTheme = typeof customizedTheme;
 
-export const getTheme = (themeMode: ThemeMode, primaryColor: string) => {
+export interface CustomTheme {
+  fontSize: typeof fontSize;
+  fontWeight: typeof fontWeight;
+  breakPoints: typeof breakPoints;
+}
+
+export type Theme = MuiTheme & CustomTheme;
+
+export const getTheme = (themeMode: ThemeMode, primaryColor: string): Theme => {
   const palette = applyPrimaryColor(themeMode, primaryColor);
   return createTheme({
     typography: {
@@ -122,10 +130,13 @@ export const getTheme = (themeMode: ThemeMode, primaryColor: string) => {
       },
     },
     ...customizedTheme,
-  });
+  }) as Theme;
 };
 
-export type Theme = ReturnType<typeof getTheme>;
+declare module '@mui/material/styles' {
+  interface Theme extends CustomTheme {}
+  interface ThemeOptions extends CustomTheme {}
+}
 
 declare module '@mui/material/styles/createTheme' {
   /* eslint-disable-next-line @typescript-eslint/no-empty-interface */

package/src/components/ActionBar/ActionBarAction.tsx

@@ -16,11 +16,11 @@ import LinkExternal from '../LinkExternal';
 
 export const Fab = styled(FabMUI)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor:
-    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.cyanBlue,
   '&:hover': {
-    color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    color: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.cyanBlue,
   },
-  color: theme?.palette.white,
+  color: theme.palette.white,
 }));
 
 type ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL' | 'RAW_DATA';

package/src/components/Author/styles.ts

@@ -5,7 +5,7 @@ import ListItem from '@mui/material/ListItem';
 import { Theme } from '../../Theme';
 
 export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme?.fontWeight.bold,
+  fontWeight: props.theme.fontWeight.bold,
 }));
 
 export const AuthorListItem = styled(ListItem)({

package/src/components/CopyClipboard/CopyToClipBoard.tsx

@@ -26,7 +26,7 @@ const Content = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   textOverflow: 'ellipsis',
   height: 'auto',
   whiteSpace: 'break-spaces',
-  fontSize: theme?.fontSize.sm,
+  fontSize: theme.fontSize.sm,
 }));
 
 function CopyToClipBoard({ text, children, dataTestId, title, ...props }: Props) {

package/src/components/Dependencies/DependencyBlock.tsx

@@ -17,7 +17,7 @@ interface DependencyBlockProps {
 }
 
 export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme && props.theme.fontWeight.bold,
+  fontWeight: props.theme.fontWeight.bold,
   textTransform: 'capitalize',
 }));
 
@@ -38,7 +38,7 @@ export const Tag = styled(Chip)<{ theme?: Theme }>((props) => ({
 export const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
   const history = useHistory();
   const { t } = useTranslation();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   const deps = Object.entries(dependencies);
 
   function handleClick(name: string): void {

package/src/components/Deprecated/Deprecated.tsx

@@ -2,12 +2,14 @@ import Alert from '@mui/material/Alert';
 import { useTheme } from '@mui/styles';
 import React from 'react';
 
+import { Theme } from '../../Theme';
+
 export type Props = {
   message: string;
 };
 
 const Deprecated: React.FC<Props> = ({ message }) => {
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   return (
     <Alert severity="warning" sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}>
       {message}

package/src/components/Developers/Developers.tsx

@@ -11,8 +11,8 @@ import Title from './Title';
 import getUniqueDeveloperValues from './get-unique-developer-values';
 
 export const Fab = styled(FabMUI)<{ theme?: Theme }>((props) => ({
-  backgroundColor: props.theme?.palette.primary.main,
-  color: props.theme?.palette.white,
+  backgroundColor: props.theme.palette.primary.main,
+  color: props.theme.palette.white,
 }));
 
 interface Props {

package/src/components/Developers/Title.tsx

@@ -23,6 +23,6 @@ const Title: React.FC<Props> = ({ type }) => {
 export default Title;
 
 const StyledText = styled(Typography)<{ theme?: Theme }>(({ theme }) => ({
-  fontWeight: theme?.fontWeight.bold,
+  fontWeight: theme.fontWeight.bold,
   marginBottom: '10px',
 }));

package/src/components/Distribution/styles.ts

@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import { Theme } from '../../Theme';
 
 export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme?.fontWeight.bold,
+  fontWeight: props.theme.fontWeight.bold,
   textTransform: 'capitalize',
 }));
 

package/src/components/Engines/styles.ts

@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography';
 import { Theme } from '../../Theme';
 
 export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme?.fontWeight.bold,
+  fontWeight: props.theme.fontWeight.bold,
   textTransform: 'capitalize',
 }));
 

package/src/components/Forbidden/Forbidden.tsx

@@ -51,6 +51,6 @@ const Container = styled('div')({
 });
 
 const StyledHeading = styled(Heading)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  color: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.white,
   marginBottom: 16,
 }));

package/src/components/FundButton/FundButton.tsx

@@ -9,14 +9,14 @@ import { url } from '../../utils';
 import LinkExternal from '../LinkExternal';
 
 const StyledLink = styled(LinkExternal)<{ theme?: Theme }>(({ theme }) => ({
-  marginTop: theme?.spacing(2),
-  marginBottom: theme?.spacing(2),
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
   textDecoration: 'none',
   display: 'block',
 }));
 
 const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.orange,
+  color: theme.palette.orange,
 }));
 
 const StyledFundStrong = styled('strong')({

package/src/components/Install/Install.tsx

@@ -12,7 +12,7 @@ import { SettingsMenu } from '../SettingsMenu';
 import InstallListItem, { DependencyManager } from './InstallListItem';
 
 const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme?.fontWeight.bold,
+  fontWeight: props.theme.fontWeight.bold,
   textTransform: 'capitalize',
 }));
 

package/src/components/Install/InstallListItem.tsx

@@ -5,6 +5,7 @@ import ListItemText from '@mui/material/ListItemText';
 import { useTheme } from '@mui/styles';
 import React from 'react';
 
+import { Theme } from '../../Theme';
 import { useSettings } from '../../providers/PersistenceSettingProvider';
 import CopyToClipBoard from '../CopyClipboard';
 import { Npm, Pnpm, Yarn } from '../Icons';
@@ -55,7 +56,7 @@ const InstallListItem: React.FC<Interface> = ({
   packageVersion,
 }) => {
   const { localSettings } = useSettings();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   const isLatest = localSettings[packageName]?.latest ?? false;
   const isGlobal = localSettings[packageName]?.global ?? false;
   switch (dependencyManager) {

package/src/components/Keywords/Keywords.tsx

@@ -4,12 +4,13 @@ import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Theme } from '../../Theme';
 import { PackageMetaInterface } from '../../types/packageMeta';
 import KeywordListItems from './KeywordListItems';
 
 const Keywords: React.FC<{ packageMeta: PackageMetaInterface }> = ({ packageMeta }) => {
   const { t } = useTranslation();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
 
   if (!packageMeta?.latest?.keywords) {
     return null;

package/src/components/Label/Label.tsx

@@ -16,7 +16,7 @@ interface WrapperProps {
 }
 
 const Wrapper = styled('div')<WrapperProps & { theme?: Theme }>((props) => ({
-  fontWeight: props.theme?.fontWeight[props.weight],
+  fontWeight: props.theme.fontWeight[props.weight],
   textTransform: props.capitalize ? 'capitalize' : 'none',
 }));
 

package/src/components/Loading/Spinner/Spinner.tsx

@@ -30,5 +30,5 @@ const Wrapper = styled('div')<Pick<Props, 'centered'>>(({ centered }) => ({
 }));
 
 const Circular = styled(CircularProgress)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.mode === 'dark' ? theme?.palette.white : theme?.palette.primary.main,
+  color: theme.palette.mode === 'dark' ? theme.palette.white : theme.palette.primary.main,
 }));

package/src/components/Loading/styles.ts

@@ -14,5 +14,5 @@ export const Badge = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   padding: 5,
   borderRadius: 25,
   boxShadow: '0 10px 20px 0 rgba(69, 58, 100, 0.2)',
-  background: theme?.palette.mode === 'dark' ? theme?.palette.black : '#f7f8f6',
+  background: theme.palette.mode === 'dark' ? theme.palette.black : '#f7f8f6',
 }));

package/src/components/LoginDialog/LoginDialogFormError.tsx

@@ -7,14 +7,14 @@ import React, { memo } from 'react';
 import { LoginError, Theme } from '../../';
 
 const StyledSnackbarContent = styled(SnackbarContent)<{ theme?: Theme }>(({ theme }) => ({
-  backgroundColor: theme?.palette.error.dark,
-  color: theme?.palette.white,
+  backgroundColor: theme.palette.error.dark,
+  color: theme.palette.white,
 }));
 
 const StyledErrorIcon = styled(Error)<{ theme?: Theme }>(({ theme }) => ({
   fontSize: 20,
   opacity: 0.9,
-  marginRight: theme?.spacing(1),
+  marginRight: theme.spacing(1),
 }));
 
 export interface FormValues {

package/src/components/LoginDialog/LoginDialogHeader.tsx

@@ -34,15 +34,15 @@ const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
 export default LoginDialogHeader;
 
 const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
-  margin: theme?.spacing(1),
+  margin: theme.spacing(1),
   backgroundColor:
-    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
-  color: theme?.palette.white,
+    theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.cyanBlue,
+  color: theme.palette.white,
 }));
 
 const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
   position: 'absolute',
-  right: theme?.spacing() / 2,
-  top: theme?.spacing() / 2,
-  color: theme?.palette.grey[500],
+  right: theme.spacing() / 2,
+  top: theme.spacing() / 2,
+  color: theme.palette.grey[500],
 }));

package/src/components/Logo/Logo.tsx

@@ -28,10 +28,10 @@ interface Props {
 
 const Logo: React.FC<Props> = ({ size, onClick, className, isDefault = false, title = '' }) => {
   const { configOptions } = useConfig();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   if (!isDefault && configOptions?.logo) {
     const logoSrc =
-      theme?.palette.mode === 'dark' && configOptions.logoDark
+      theme.palette.mode === 'dark' && configOptions.logoDark
         ? configOptions.logoDark
         : configOptions.logo;
     return (
@@ -64,7 +64,7 @@ const StyledLogo = styled('div')<Props & { theme?: Theme }>(({ size = 'small', t
   boxSizing: 'border-box',
   backgroundPosition: 'center',
   backgroundSize: 'contain',
-  backgroundImage: `url(${logos[theme?.palette.mode]})`,
+  backgroundImage: `url(${logos[theme.palette.mode]})`,
   backgroundRepeat: ' no-repeat',
   width: sizes[size],
   height: sizes[size],

package/src/components/NotFound/NotFound.tsx

@@ -48,6 +48,6 @@ const Container = styled('div')({
 });
 
 const StyledHeading = styled(Heading)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  color: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.white,
   marginBottom: 16,
 }));

package/src/components/Package/Package.tsx

@@ -246,7 +246,7 @@ export default Package;
 
 const iconStyle = ({ theme }: { theme: Theme }) => css`
   margin: 0 10px 0 0;
-  fill: ${theme?.palette.mode === 'light' ? theme?.palette.greyDark : theme?.palette.white};
+  fill: ${theme.palette.mode === 'light' ? theme.palette.greyDark : theme.palette.white};
 `;
 
 const StyledVersion = styled(Version)`

package/src/components/Package/styles.ts

@@ -12,14 +12,14 @@ export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   margin: '0 20px 0 0',
-  color: theme?.palette.mode === 'light' ? theme?.palette.greyDark2 : theme?.palette.white,
+  color: theme.palette.mode === 'light' ? theme.palette.greyDark2 : theme.palette.white,
   fontSize: 12,
-  [`@media (max-width: ${theme?.breakPoints.medium}px)`]: {
+  [`@media (max-width: ${theme.breakPoints.medium}px)`]: {
     ':nth-of-type(3)': {
       display: 'none',
     },
   },
-  [`@media (max-width: ${theme?.breakPoints.small}px)`]: {
+  [`@media (max-width: ${theme.breakPoints.small}px)`]: {
     ':nth-of-type(4)': {
       display: 'none',
     },
@@ -52,14 +52,14 @@ export const WrapperLink = styled(Link)({
 });
 
 export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  fontWeight: theme?.fontWeight.bold,
+  fontWeight: theme.fontWeight.bold,
   fontSize: 20,
   display: 'block',
   marginBottom: 12,
-  color: theme?.palette.mode == 'dark' ? theme?.palette.dodgerBlue : theme?.palette.eclipse,
+  color: theme.palette.mode == 'dark' ? theme.palette.dodgerBlue : theme.palette.eclipse,
   cursor: 'pointer',
   textDecoration: 'none',
-  [`@media (max-width: ${theme?.breakPoints.small}px)`]: {
+  [`@media (max-width: ${theme.breakPoints.small}px)`]: {
     fontSize: 14,
     marginBottom: 8,
   },
@@ -72,7 +72,7 @@ export const GridRightAligned = styled(Grid)({
 export const Wrapper = styled(List)<{ theme?: Theme }>(({ theme }) => ({
   '&:hover': {
     backgroundColor:
-      theme?.palette?.type == 'dark' ? theme?.palette?.secondary.main : theme?.palette?.greyLight2,
+      theme.palette.mode == 'dark' ? theme.palette.secondary.main : theme.palette.greyLight2,
   },
 }));
 
@@ -88,7 +88,7 @@ export const PackageListItemText = styled(ListItemText)({
 });
 
 export const Description = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.mode === 'light' ? theme?.palette.greyDark2 : theme?.palette.white,
+  color: theme.palette.mode === 'light' ? theme.palette.greyDark2 : theme.palette.white,
   fontSize: '14px',
   paddingRight: 0,
 }));

package/src/components/RawViewer/RawViewer.tsx

@@ -1,3 +1,4 @@
+import ReactJson from '@microlink/react-json-view';
 import CloseIcon from '@mui/icons-material/Close';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
@@ -6,7 +7,8 @@ import IconButton from '@mui/material/IconButton';
 import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import ReactJson from 'react-json-view';
+
+import { Theme } from '../../Theme';
 
 export interface ViewerTitleProps {
   id: string;
@@ -48,7 +50,7 @@ type Props = {
 /* eslint-disable verdaccio/jsx-spread */
 const RawViewer: React.FC<Props> = ({ isOpen = false, onClose, packageMeta }) => {
   const { t } = useTranslation();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   return (
     <Dialog data-testid={'rawViewer--dialog'} fullScreen={true} open={isOpen}>
       <ViewerTitle id="viewer-title" onClose={onClose}>
@@ -61,7 +63,7 @@ const RawViewer: React.FC<Props> = ({ isOpen = false, onClose, packageMeta }) =>
           enableClipboard={true}
           groupArraysAfterLength={10}
           src={packageMeta as any}
-          theme={theme?.palette.mode == 'light' ? 'bright:inverted' : 'bright'}
+          theme={theme.palette.mode == 'light' ? 'bright:inverted' : 'bright'}
         />
       </DialogContent>
     </Dialog>

package/src/components/RegistryInfoDialog/styles.ts

@@ -6,17 +6,17 @@ import { Theme } from '../../';
 
 export const Title = styled(DialogTitle)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor:
-    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
-  color: theme?.palette.white,
-  fontSize: theme?.fontSize.lg,
+    theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.cyanBlue,
+  color: theme.palette.white,
+  fontSize: theme.fontSize.lg,
 }));
 
 export const Content = styled(DialogContent)<{ theme?: Theme }>(({ theme }) => ({
   padding: '0 24px',
-  backgroundColor: theme?.palette.background.default,
+  backgroundColor: theme.palette.background.default,
 }));
 
 export const TextContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   padding: '10px 24px',
-  backgroundColor: theme?.palette.background.default,
+  backgroundColor: theme.palette.background.default,
 }));

package/src/components/Repository/Repository.tsx

@@ -15,7 +15,7 @@ import { Git } from '../Icons';
 import LinkExternal from '../LinkExternal';
 
 const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme?.fontWeight.bold,
+  fontWeight: props.theme.fontWeight.bold,
   textTransform: 'capitalize',
 }));
 
@@ -39,7 +39,7 @@ const RepositoryAvatar = styled(Avatar)({
 
 const Repository: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { t } = useTranslation();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   const url = packageMeta?.latest?.repository?.url;
   if (!url || !urlUtils.isURL(url)) {
     return null;

package/src/components/Search/SearchItem.tsx

@@ -28,19 +28,19 @@ const Wrapper = styled.div({
 
 export const Description = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   display: 'none',
-  color: theme?.palette?.greyLight2,
+  color: theme.palette.greyLight2,
   lineHeight: '1.5rem',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   alignItems: 'center',
   overflow: 'hidden',
   paddingLeft: theme.spacing(),
-  fontSize: theme?.fontSize.ssm,
-  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
+  fontSize: theme.fontSize.ssm,
+  [`@media (min-width: ${theme.breakPoints.medium}px)`]: {
     display: 'block',
     width: '300px',
   },
-  [`@media (min-width: ${theme?.breakPoints.large}px)`]: {
+  [`@media (min-width: ${theme.breakPoints.large}px)`]: {
     display: 'block',
     width: '500px',
   },
@@ -57,11 +57,11 @@ const NameGroup = styled.span({
 
 const Name = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   fontWeight: '700',
-  fontSize: theme?.fontSize.sm,
+  fontSize: theme.fontSize.sm,
 }));
 
 const Version = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  fontSize: theme?.fontSize.ssm,
+  fontSize: theme.fontSize.ssm,
 }));
 
 const SearchItem: React.FC<SearchItemProps> = ({

package/src/components/Search/styles.ts

@@ -14,7 +14,7 @@ export const StyledTextField = styled(TextField)<{ theme?: Theme }>((props) => (
       border: 'none',
     },
     ':after': {
-      borderColor: props.theme?.palette.white,
+      borderColor: props.theme.palette.white,
     },
     ':hover:before': {
       content: 'none',
@@ -23,19 +23,19 @@ export const StyledTextField = styled(TextField)<{ theme?: Theme }>((props) => (
       content: 'none',
       transform: 'scaleX(1)',
     },
-    [`@media screen and (min-width: ${props.theme?.breakPoints.medium}px)`]: {
+    [`@media screen and (min-width: ${props.theme.breakPoints.medium}px)`]: {
       ':hover:after': {
         content: "''",
       },
     },
   },
   '& .MuiInputBase-input': {
-    [`@media screen and (min-width: ${props.theme?.breakPoints.medium}px)`]: {
-      color: props.theme?.palette.white,
+    [`@media screen and (min-width: ${props.theme.breakPoints.medium}px)`]: {
+      color: props.theme.palette.white,
     },
   },
 }));
 
 export const StyledInputAdornment = styled(InputAdornment)<{ theme?: Theme }>((props) => ({
-  color: props.theme?.palette.white,
+  color: props.theme.palette.white,
 }));

package/src/components/SideBarTitle/SideBarTitle.tsx

@@ -21,7 +21,7 @@ interface Props {
 }
 
 const Icon = styled.div<{ theme?: Theme }>(({ theme }) => ({
-  marginLeft: theme?.spacing(1),
+  marginLeft: theme.spacing(1),
 }));
 
 const ModuleJS: React.FC<{ module: ModuleType | void }> = ({ module }) => {
@@ -93,6 +93,6 @@ const StyledHeading = styled(Heading)({
 });
 
 const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.text.secondary,
-  fontSize: theme?.fontSize.sm,
+  color: theme.palette.text.secondary,
+  fontSize: theme.fontSize.sm,
 }));

package/src/components/UpLinks/styles.ts

@@ -5,13 +5,13 @@ import Typography from '@mui/material/Typography';
 import { Theme } from '../../Theme';
 
 export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme?.fontWeight.bold,
+  fontWeight: props.theme.fontWeight.bold,
 }));
 
 export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   flex: '1 1 auto',
   borderBottom: `1px dotted ${
-    theme?.palette.mode == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'
+    theme.palette.mode == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'
   } `,
   whiteSpace: 'nowrap',
   height: '0.5em',
@@ -20,6 +20,6 @@ export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
 
 export const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({
   flex: 'none',
-  color: theme?.palette.mode == 'light' ? theme?.palette.black : theme?.palette.white,
+  color: theme.palette.mode == 'light' ? theme.palette.black : theme.palette.white,
   opacity: 0.6,
 }));

package/src/components/Versions/HistoryList.tsx

@@ -5,6 +5,7 @@ import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Theme } from '../../Theme';
 import { useConfig } from '../../providers';
 import { Time, Versions } from '../../types/packageMeta';
 import { Route, utils } from '../../utils';
@@ -31,7 +32,7 @@ export function filterDeprecated(versions: Versions) {
 const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {
   const { t } = useTranslation();
   const { configOptions } = useConfig();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;
   const listVersions = hideDeprecatedVersions ? filterDeprecated(versions) : versions;
 

package/src/components/Versions/Versions.tsx

@@ -26,7 +26,7 @@ export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
 const Versions: React.FC<Props> = ({ packageMeta, packageName }) => {
   const { t } = useTranslation();
   const { configOptions } = useConfig();
-  const theme = useTheme();
+  const theme: Theme = useTheme();
   const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta;
 
   const [packageVersions, setPackageVersions] = useState(versions);