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

package/build/src/sections/Header/styles.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { Theme } from '../../Theme';
 export declare const InnerNavBar: import("@emotion/styled").StyledComponent<any, {}, {}>;
 export declare const Greetings: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -8,13 +9,13 @@ export declare const MobileNavBar: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    theme?: import("@mui/material").Theme | undefined;
+    theme?: Theme | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const InnerMobileNavBar: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    theme?: import("@mui/material").Theme | undefined;
+    theme?: Theme | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconSearchButton: import("@emotion/styled").StyledComponent<any, {}, {}>;
 export declare const InfoButton: import("@emotion/styled").StyledComponent<any, {}, {}>;

package/build/store/api.js

@@ -17,14 +17,14 @@ class CustomError extends Error {}
 function handleResponseType(response) {
   if (response.headers) {
     const contentType = response.headers.get('Content-Type');
-    if (contentType !== null && contentType !== void 0 && contentType.includes('application/pdf')) {
+    if (contentType?.includes('application/pdf')) {
       return Promise.all([response.ok, response.blob()]);
     }
-    if (contentType !== null && contentType !== void 0 && contentType.includes('application/json')) {
+    if (contentType?.includes('application/json')) {
       return Promise.all([response.ok, response.json()]);
     }
     // it includes all text types
-    if (contentType !== null && contentType !== void 0 && contentType.includes('text/')) {
+    if (contentType?.includes('text/')) {
       return Promise.all([response.ok, response.text()]);
     }
 
@@ -60,9 +60,8 @@ class API {
         if (ok === true) {
           resolve(data);
         } else {
-          var _data$statusText, _data$status;
-          const error = new CustomError((_data$statusText = data === null || data === void 0 ? void 0 : data.statusText) !== null && _data$statusText !== void 0 ? _data$statusText : 'Unknown error');
-          error.code = (_data$status = data === null || data === void 0 ? void 0 : data.status) !== null && _data$status !== void 0 ? _data$status : 500;
+          const error = new CustomError(data?.statusText ?? 'Unknown error');
+          error.code = data?.status ?? 500;
           reject(error);
         }
       }).catch(error => {

package/build/store/models/configuration.js

@@ -23,8 +23,7 @@ const defaultValues = {
   title: 'Verdaccio'
 };
 function getConfiguration() {
-  var _window$__VERDACCIO_B, _window;
-  const uiConfiguration = (_window$__VERDACCIO_B = (_window = window) === null || _window === void 0 ? void 0 : _window.__VERDACCIO_BASENAME_UI_OPTIONS) !== null && _window$__VERDACCIO_B !== void 0 ? _window$__VERDACCIO_B : defaultValues;
+  const uiConfiguration = window?.__VERDACCIO_BASENAME_UI_OPTIONS ?? defaultValues;
   if ((0, _isNil.default)(uiConfiguration.primaryColor) || (0, _isEmpty.default)(uiConfiguration.primaryColor)) {
     uiConfiguration.primaryColor = _Theme.colors.PRIMARY_COLOR;
   }

package/build/store/models/search.js

@@ -23,7 +23,7 @@ const search = exports.search = (0, _core.createModel)()({
     clearRequestQueue(state) {
       const controllers = state.controller;
       controllers.forEach(request => {
-        request === null || request === void 0 || request.abort();
+        request?.abort();
       });
       return {
         ...state,

package/build/utils/utils.js

@@ -33,7 +33,7 @@ function formatLicense(license) {
   if ((0, _isString.default)(license)) {
     return license;
   }
-  if (license !== null && license !== void 0 && license.type) {
+  if (license?.type) {
     return license.type;
   }
   return;
@@ -49,7 +49,7 @@ function formatRepository(repository) {
   if ((0, _isString.default)(repository)) {
     return repository;
   }
-  if (repository !== null && repository !== void 0 && repository.url) {
+  if (repository?.url) {
     return repository.url;
   }
   return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-components",
-  "version": "4.0.0-next-8.0",
+  "version": "4.0.0-next-8.2",
   "description": "theme ui component",
   "author": "Juan Picado <juanpicado19@gmail.com>",
   "license": "MIT",
@@ -12,6 +12,7 @@
     "@emotion/styled": "11.10.6",
     "@fontsource/material-icons": "^4.5.4",
     "@fontsource/roboto": "^4.5.8",
+    "@microlink/react-json-view": "^1.23.3",
     "@mui/icons-material": "5.16.5",
     "@mui/material": "5.16.5",
     "@mui/styles": "5.16.5",
@@ -35,7 +36,6 @@
     "react-dom": "18.2.0",
     "react-hook-form": "7.52.1",
     "react-i18next": "15.0.0",
-    "react-json-view": "1.21.3",
     "react-markdown": "9.0.1",
     "react-redux": "8.1.3",
     "react-router": "5.3.4",
@@ -63,7 +63,7 @@
     "@types/hast": "^2.0.0",
     "@types/react-router": "^5.1.20",
     "@types/unist": "^2.0.0",
-    "@verdaccio/types": "13.0.0-next-8.0",
+    "@verdaccio/types": "13.0.0-next-8.1",
     "babel-loader": "9.1.3",
     "mockdate": "3.0.5",
     "msw": "0.49.3",

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;