Don't pull unused @mui modules by using path imports

rollup.config.ts

@@ -28,6 +28,7 @@ const external = [
   '@emotion/react/jsx-dev-runtime',
   '@mui/material',
   '@mui/material/styles',
+  /@mui\/material\/.*/,
   'copy-to-clipboard',
   'zustand',
   'zustand/context',
@@ -47,7 +48,9 @@ const outputMatrix = (
     format,
     banner: `/// <reference types="./${baseName}.d.ts" />`,
     globals: external.reduce((object, module) => {
-      object[module] = module
+      if (typeof module === 'string') {
+        object[module] = module
+      }
       return object
     }, {} as Record<string, string>)
   }))
@@ -124,7 +127,7 @@ const dtsMatrix = (): RollupOptions[] => {
 
 const build: RollupOptions[] = [
   buildMatrix('./src/index.tsx', 'index', {
-    format: ['es', 'umd'],
+    format: ['es', 'cjs'],
     browser: false,
     dts: true
   }),

src/components/DataKeyPair.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material'
+import Box from '@mui/material/Box'
 import type { ComponentProps } from 'react'
 import React, { useCallback, useMemo, useState } from 'react'
 

src/components/DataTypes/Function.tsx

@@ -2,7 +2,8 @@
  * Use NoSsr on function value.
  *  Because in Next.js SSR, the function will be translated to other type
  */
-import { Box, NoSsr } from '@mui/material'
+import Box from '@mui/material/Box'
+import NoSsr from '@mui/material/NoSsr'
 import React from 'react'
 
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'

src/components/DataTypes/Object.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material'
+import Box from '@mui/material/Box'
 import React, { useMemo, useState } from 'react'
 
 import { useTextColor } from '../../hooks/useColor'

src/components/DataTypes/createEasyType.tsx

@@ -1,4 +1,4 @@
-import { InputBase } from '@mui/material'
+import InputBase from '@mui/material/InputBase'
 import React, { useCallback } from 'react'
 
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'

src/components/Icons.tsx

@@ -1,5 +1,5 @@
 import type { SvgIconProps } from '@mui/material'
-import { SvgIcon } from '@mui/material'
+import SvgIcon from '@mui/material/SvgIcon'
 import React from 'react'
 
 const BaseIcon: React.FC<SvgIconProps> = ({ d, ...props }) => {

src/components/mui/DataBox.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material'
+import Box from '@mui/material/Box'
 import type { ComponentProps } from 'react'
 import React from 'react'
 

src/index.tsx

@@ -1,7 +1,6 @@
-import {
-  createTheme, Paper,
-  ThemeProvider
-} from '@mui/material'
+import Paper from '@mui/material/Paper'
+import createTheme from '@mui/material/styles/createTheme'
+import ThemeProvider from '@mui/material/styles/ThemeProvider'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 
 import { DataKeyPair } from './components/DataKeyPair'

src/stores/typeRegistry.tsx

@@ -1,6 +1,6 @@
-import { Box } from '@mui/material'
+import Box from '@mui/material/Box'
 import type { SetStateAction } from 'react'
-import React, { memo, useMemo, useState } from 'react'
+import { memo, useMemo, useState } from 'react'
 import create from 'zustand'
 import createStore from 'zustand/context'
 import { combine } from 'zustand/middleware'