Split package into modules

package.json

@@ -14,6 +14,28 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.esm.js"
+    },
+    "./navigation": {
+      "types": "./dist/navigation.d.ts",
+      "require": "./dist/navigation.cjs.js",
+      "import": "./dist/navigation.esm.js"
+    },
+    "./themes": {
+      "types": "./dist/themes.d.ts",
+      "require": "./dist/themes.cjs.js",
+      "import": "./dist/themes.esm.js"
+    },
+    "./controls": {
+      "types": "./dist/controls.d.ts",
+      "require": "./dist/controls.cjs.js",
+      "import": "./dist/controls.esm.js"
+    }
+  },
   "scripts": {
     "build": "tsc -b && rollup --config rollup.config.mjs",
     "docs:build": "typedoc src",
@@ -29,16 +51,16 @@
   "dependencies": {
     "keycloak-js": "^26.2.1",
     "react-icons": "^5.3.0",
-    "utif": "^3.1.0"
+    "utif": "^3.1.0",
+    "@mui/icons-material": "^7.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@jsonforms/core": "^3.6.0",
-    "@jsonforms/material-renderers": "^3.6.0",
-    "@jsonforms/react": "^3.6.0",
-    "@mui/icons-material": "^6.1.7",
-    "@mui/material": "^6.1.7",
+    "@jsonforms/core": "^3.7.0",
+    "@jsonforms/material-renderers": "^3.7.0",
+    "@jsonforms/react": "^3.7.0",
+    "@mui/material": "^7.0.0",
     "react": "^18.3.1"
   },
   "devDependencies": {

rollup.config.mjs

@@ -10,35 +10,20 @@ import packageJson from "./package.json" with { type: "json" };
 
 export default [
   {
-    input: "src/index.ts",
-    output: {
-      format: "cjs",
-      file: packageJson.main,
-    },
-    plugins: [
-      peerDepsExternal({
-        includeDependencies: true,
-      }),
-      image(),
-      resolve(),
-      commonjs(),
-      terser(),
-      typescript({
-        tsconfig: "./tsconfig.json",
-        exclude: ["**/*.stories.*", "**/*.test.*"],
-      }),
-      postcss({
-        extensions: [".css"],
-      }),
+    input: ["src/index.ts", "src/navigation.ts", "src/themes.ts", "src/controls.ts"],
+    output: [
+      {
+        format: "cjs",
+        dir: "dist",
+        entryFileNames: "[name].cjs.js",
+      },
+      {
+        format: "esm",
+        sourcemap: true,
+        dir: "dist",
+        entryFileNames: "[name].esm.js",
+      },
     ],
-  },
-  {
-    input: "src/index.ts",
-    output: {
-      format: "esm",
-      sourcemap: true,
-      file: packageJson.module,
-    },
     plugins: [
       peerDepsExternal({
         includeDependencies: true,

src/__test-utils__/helpers.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 
-import { ThemeProvider } from "@mui/material/styles";
+import { ThemeProvider, ThemeProviderProps } from "@mui/material/styles";
 import { DiamondTheme } from "../themes/DiamondTheme";
 import { render, RenderResult } from "@testing-library/react";
-import { ThemeProviderProps } from "@mui/material/styles/ThemeProvider";
 
 type ThemeProviderPropsWithOptionalTheme = Omit<ThemeProviderProps, "theme"> &
   Partial<Pick<ThemeProviderProps, "theme">>;

src/components/controls/ColourSchemeButton.tsx

@@ -1,10 +1,8 @@
 import { useColorScheme, useTheme } from "@mui/material";
 import { IconButton, IconButtonProps } from "@mui/material";
 
-import {
-  LightMode as LightModeIcon,
-  Bedtime as BedtimeIcon,
-} from "@mui/icons-material";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import BedtimeIcon from "@mui/icons-material/Bedtime";
 
 import { ColourSchemes } from "../../utils/globals";
 

src/components/controls/ScrollableImages.tsx

@@ -1,11 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Box, Button, IconButton, Slider, Stack } from "@mui/material";
-import {
-  ArrowBack as ArrowBackIcon,
-  ArrowForward as ArrowForwardIcon,
-  ArrowBackIosNew as ArrowBackIosNewIcon,
-  ArrowForwardIos as ArrowForwardIosIcon,
-} from "@mui/icons-material";
+
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 
 import { extractFramesFromTiff, isTiff } from "../../utils/TiffUtils";
 

src/components/navigation/Breadcrumbs.tsx

@@ -6,10 +6,8 @@ import {
   styled,
   Typography,
 } from "@mui/material";
-import {
-  Home as HomeIcon,
-  NavigateNext as NavigateNextIcon,
-} from "@mui/icons-material";
+import HomeIcon from "@mui/icons-material/Home";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import { CustomLink } from "types/links";
 
 import { Bar, BarProps } from "../controls/Bar";

src/components/navigation/NavMenu.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { NavMenu, NavMenuLink } from "./NavMenu";
 import { Button, Divider, Typography } from "@mui/material";
-import { Autorenew } from "@mui/icons-material";
+import Autorenew from "@mui/icons-material/Autorenew";
 import { MockLink } from "../../utils/MockLink";
 
 const meta: Meta<typeof NavMenu> = {

src/components/navigation/NavMenu.tsx

@@ -8,7 +8,7 @@ import {
   type MenuItemProps,
 } from "@mui/material";
 import React, { useState, forwardRef, useId } from "react";
-import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
+import ExpandMoreIcon from "@mui/icons-material/Expand";
 import { NavLink, NavLinkProps } from "./Navbar";
 
 type NavMenuLinkProps = MenuItemProps & NavLinkProps;

src/controls.ts

@@ -0,0 +1,10 @@
+export * from "./components/controls/AppTitlebar";
+export * from "./components/controls/Bar";
+export * from "./components/controls/ColourSchemeButton";
+export * from "./components/controls/ImageColourSchemeSwitch";
+export * from "./components/controls/Logo";
+export * from "./components/controls/Progress";
+export * from "./components/controls/ProgressDelayed";
+export * from "./components/controls/User";
+export * from "./components/controls/ScrollableImages";
+export * from "./components/controls/VisitInput";

src/navigation.ts

@@ -0,0 +1,4 @@
+export * from "./components/navigation/Breadcrumbs";
+export * from "./components/navigation/Footer";
+export * from "./components/navigation/Navbar";
+export * from "./components/navigation/NavMenu";

src/themes.ts

@@ -0,0 +1,6 @@
+export * from "./themes/BaseTheme";
+export * from "./themes/DiamondTheme";
+export * from "./themes/DiamondOldTheme";
+export * from "./themes/GenericTheme";
+export * from "./themes/ThemeProvider";
+export * from "./themes/ThemeManager";

src/themes/DiamondTheme.ts

@@ -65,6 +65,22 @@ const DiamondThemeOptions = mergeThemeOptions({
     },
   },
   components: {
+    MuiTypography: {
+      defaultProps: {
+        variantMapping: {
+          h1: "h2",
+          h2: "h2",
+          h3: "h2",
+          h4: "h2",
+          h5: "h2",
+          h6: "h2",
+          subtitle1: "h2",
+          subtitle2: "h2",
+          body1: "span",
+          body2: "span",
+        },
+      },
+    },
     MuiButton: {
       styleOverrides: {
         root: ({ theme }: { theme: Theme }) => ({

src/themes/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 import { ThemeProvider as Mui_ThemeProvider } from "@mui/material/styles";
 import { CssBaseline } from "@mui/material";
 import { GenericTheme } from "./GenericTheme";
-import { ThemeProviderProps as Mui_ThemeProviderProps } from "@mui/material/styles/ThemeProvider";
+import { ThemeProviderProps as Mui_ThemeProviderProps } from "@mui/material/styles";
 
 interface ThemeProviderProps extends Partial<Mui_ThemeProviderProps> {
   baseline?: boolean;