perf: make the published package tree-shakeable

eslint.config.js

@@ -94,6 +94,14 @@ module.exports = [
         },
 
         rules: {
+            // The @mui/icons-material barrel re-exports ~10,800 modules that every
+            // consumer's bundler must parse. Import icons by path instead.
+            "no-restricted-imports": ["error", {
+                paths: [{
+                    name: "@mui/icons-material",
+                    message: "Import icons by path, e.g. '@mui/icons-material/ChevronLeft'.",
+                }],
+            }],
             ...js.configs.recommended.rules,
             ...typescript.configs.recommended.rules,
         },

package.json

@@ -7,8 +7,22 @@
     "url": "git+ssh://git@github.com/layer5io/sistent.git"
   },
   "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
   "files": [
     "dist"
   ],

src/custom/Carousel/Carousel.tsx

@@ -1,4 +1,5 @@
-import { ChevronLeft, ChevronRight } from '@mui/icons-material';
+import ChevronLeft from '@mui/icons-material/ChevronLeft';
+import ChevronRight from '@mui/icons-material/ChevronRight';
 import React, { ReactNode, useRef } from 'react';
 import { CarouselButton, CarouselContainer, CarouselWrapper } from './style';
 

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -1,4 +1,5 @@
-import { Lock, Public } from '@mui/icons-material';
+import Lock from '@mui/icons-material/Lock';
+import Public from '@mui/icons-material/Public';
 import { Theme } from '@mui/material';
 import { MUIDataTableColumn, MUIDataTableMeta } from '@sistent/mui-datatables';
 import { Typography } from '../../base';

src/custom/CatalogDetail/helper.ts

@@ -1,4 +1,4 @@
-import jsyaml from 'js-yaml';
+import * as jsyaml from 'js-yaml';
 
 export const downloadYaml = (filteredData: string, itemName: string): void => {
   const yamlData = Array.isArray(filteredData)

src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx

@@ -1,4 +1,4 @@
-import { ExpandMore } from '@mui/icons-material';
+import ExpandMore from '@mui/icons-material/ExpandMore';
 import { alpha } from '@mui/material';
 import { MouseEvent, useState } from 'react';
 import { Avatar, AvatarGroup, Button, Divider, Popover, Typography } from '../../base';

src/custom/CustomCatalog/Helper.ts

@@ -1,4 +1,4 @@
-import jsyaml from 'js-yaml';
+import * as jsyaml from 'js-yaml';
 import { Pattern } from './CustomCard';
 
 const checkImageUrlValidity = async (

src/custom/DashboardWidgets/RecentDesignWidget.tsx

@@ -1,4 +1,4 @@
-import { KeyboardArrowRight } from '@mui/icons-material';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import SwapVertIcon from '@mui/icons-material/SwapVert';
 import { styled } from '@mui/material/styles';
 import { useState } from 'react';

src/custom/SearchBar.tsx

@@ -1,6 +1,6 @@
 import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 import { Theme, ThemeProvider, createTheme } from '@mui/material/styles';
-import debounce from 'lodash/debounce';
+import debounce from 'lodash/debounce.js';
 import React, { useCallback } from 'react';
 import { ClickAwayListener } from '../base/ClickAwayListener';
 import { TextField } from '../base/TextField';

src/custom/Workspaces/WorkspaceTransferButton.tsx

@@ -1,4 +1,4 @@
-import { SyncAlt as SyncAltIcon } from '@mui/icons-material';
+import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import { Grid2, Typography } from '../../base';
 import { useTheme } from '../../theme';
 import { getFullFormattedTime, getRelativeTime } from '../../utils';

src/custom/Workspaces/WorkspaceViewsTable.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Lock, Public } from '@mui/icons-material';
+import Lock from '@mui/icons-material/Lock';
+import Public from '@mui/icons-material/Public';
 import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
 import { MUIDataTableColumn, MUIDataTableMeta } from '@sistent/mui-datatables';
 import React, { useState } from 'react';