Improve package output for tree shaking

lib/composite/footer/essayons.jsx

@@ -1,6 +1,26 @@
-import essayons from "../../img/essayonscrest.png";
+import { useEffect, useState } from "react";
 
 function Essayons() {
+  const [essayons, setEssayons] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    import("../../img/essayonscrest.png").then((module) => {
+      if (!cancelled) {
+        setEssayons(module.default);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (!essayons) {
+    return null;
+  }
+
   return (
     <img
       aria-label="USACE Castle"

lib/composite/footer/logo-banner.jsx

@@ -1,17 +1,45 @@
-import armyLogo from "../../img/armystar-logo-rb.svg";
-import army250Logo from "../../img/Army-250-year-logo.png";
-import usaceLogo from "../../img/usace-logo-color.svg";
-import usace250Logo from "../../img/USACE-250-year-logo.png";
-import rsgisLogo from "../../img/rsgis-logo.png";
-import cwbiLogo from "../../img/cwbi-logo.png";
+import { useEffect, useState } from "react";
+
+const logoLoaders = {
+  army: () => import("../../img/armystar-logo-rb.svg"),
+  army250: () => import("../../img/Army-250-year-logo.png"),
+  usace: () => import("../../img/usace-logo-color.svg"),
+  usace250: () => import("../../img/USACE-250-year-logo.png"),
+  rsgis: () => import("../../img/rsgis-logo.png"),
+  cwbi: () => import("../../img/cwbi-logo.png"),
+};
+
+function LazyLogo({ loader, ...props }) {
+  const [src, setSrc] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    loader().then((module) => {
+      if (!cancelled) {
+        setSrc(module.default);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [loader]);
+
+  if (!src) {
+    return null;
+  }
+
+  return <img src={src} {...props} />;
+}
 
 function LogoBanner({ army, army250, usace, usace250, rsgis, cwbi }) {
   return (
     <div className="gw-flex gw-flex-row gw-justify-center gw-align-middle gw-gap-6 gw-mb-4 gw-mt-4">
       {army && (
         <a href="https://www.army.mil" target="_blank" rel="noopener">
-          <img
-            src={armyLogo}
+          <LazyLogo
+            loader={logoLoaders.army}
             aria-label="U.S. Army Logo"
             alt="U.S. Army"
             className="gw-max-h-[75px]"
@@ -20,8 +48,8 @@ function LogoBanner({ army, army250, usace, usace250, rsgis, cwbi }) {
       )}
       {army250 && (
         <a href="https://www.army.mil" target="_blank" rel="noopener">
-          <img
-            src={army250Logo}
+          <LazyLogo
+            loader={logoLoaders.army250}
             aria-label="U.S. Army 250 Year Anniversary Logo"
             alt="U.S. Army"
             className="gw-max-h-[75px]"
@@ -30,8 +58,8 @@ function LogoBanner({ army, army250, usace, usace250, rsgis, cwbi }) {
       )}
       {usace && (
         <a href="https://www.usace.army.mil" target="_blank" rel="noopener">
-          <img
-            src={usaceLogo}
+          <LazyLogo
+            loader={logoLoaders.usace}
             aria-label="U.S. Army Corps of Engineers"
             alt="U.S. Army Corps of Engineers"
             className="gw-max-h-[75px] gw-h-[75px] gw-w-auto"
@@ -40,8 +68,8 @@ function LogoBanner({ army, army250, usace, usace250, rsgis, cwbi }) {
       )}
       {usace250 && (
         <a href="https://www.usace.army.mil" target="_blank" rel="noopener">
-          <img
-            src={usace250Logo}
+          <LazyLogo
+            loader={logoLoaders.usace250}
             aria-label="U.S. Army Corps of Engineers"
             alt="U.S. Army Corps of Engineers"
             className="gw-max-h-[75px] gw-h-[75px] gw-w-auto"
@@ -54,8 +82,8 @@ function LogoBanner({ army, army250, usace, usace250, rsgis, cwbi }) {
           target="_blank"
           rel="noopener"
         >
-          <img
-            src={rsgisLogo}
+          <LazyLogo
+            loader={logoLoaders.rsgis}
             aria-label="Remote Sensing - GIS Center of Expertise Logo"
             alt="Remote Sensing - GIS Center of Expertise"
             className="gw-max-h-[75px]"
@@ -68,8 +96,8 @@ function LogoBanner({ army, army250, usace, usace250, rsgis, cwbi }) {
           target="_blank"
           rel="noopener"
         >
-          <img
-            src={cwbiLogo}
+          <LazyLogo
+            loader={logoLoaders.cwbi}
             aria-label="Civil Works Business Intelligence Logo"
             alt="Civil Works Business Intelligence"
             className="gw-max-h-[75px]"

lib/index.jsx

@@ -1,6 +1,3 @@
-// bundle tailwind
-import "./styles.css";
-
 // utilities
 export { gwMerge } from "./gw-merge";
 

lib/style-entry.js

@@ -0,0 +1 @@
+import "./styles.css";

package.json

@@ -9,15 +9,54 @@
     "url": "git+https://github.com/USACE/groundwork.git"
   },
   "main": "./dist/groundwork.umd.cjs",
-  "module": "./dist/groundwork.es.js",
+  "module": "./dist/es/index.js",
   "files": [
     "dist"
   ],
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
-      "import": "./dist/groundwork.es.js",
+      "import": "./dist/es/index.js",
       "require": "./dist/groundwork.umd.cjs"
     },
+    "./components/*": {
+      "import": "./dist/es/components/*.js"
+    },
+    "./components/buttons/*": {
+      "import": "./dist/es/components/buttons/*.js"
+    },
+    "./components/display/*": {
+      "import": "./dist/es/components/display/*.js"
+    },
+    "./components/form/*": {
+      "import": "./dist/es/components/form/*.js"
+    },
+    "./components/layout/*": {
+      "import": "./dist/es/components/layout/*.js"
+    },
+    "./components/navigation/*": {
+      "import": "./dist/es/components/navigation/*.js"
+    },
+    "./composite/*": {
+      "import": "./dist/es/composite/*.js"
+    },
+    "./composite/footer/*": {
+      "import": "./dist/es/composite/footer/*.js"
+    },
+    "./composite/header/*": {
+      "import": "./dist/es/composite/header/*.js"
+    },
+    "./composite/site-wrapper/*": {
+      "import": "./dist/es/composite/site-wrapper/*.js"
+    },
+    "./hooks/*": {
+      "import": "./dist/es/hooks/*.js"
+    },
+    "./utils/*": {
+      "import": "./dist/es/utils/*.js"
+    },
     "./groundwork.css": {
       "import": "./dist/groundwork.css",
       "require": "./dist/groundwork.css"
@@ -38,7 +77,7 @@
   "scripts": {
     "dev": "vite",
     "build": "npm run build-lib && npm run build-docs",
-    "build-lib": "vite build -m lib",
+    "build-lib": "vite build -m lib && vite build -m css",
     "build-docs": "vite build",
     "lhci:prep": "node scripts/extract-routes.js",
     "lhci:run": "rmdir /s /q .lighthouseci 2>nul & npx @lhci/cli autorun --config=.lighthouserc.gen.json --verbose & node scripts/lhci-index.js",
@@ -60,7 +99,8 @@
     "react-icons": "^5.0.1",
     "redux-bundler": "^28.1.0",
     "redux-bundler-hook": "^1.0.3",
-    "redux-bundler-react": "^1.2.0"
+    "redux-bundler-react": "^1.2.0",
+    "tailwind-merge": "^2.5.2"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
@@ -80,7 +120,6 @@
     "lint-staged": "^16.1.4",
     "postcss": "^8.4.33",
     "prettier": "^3.6.2",
-    "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.1",
     "typescript": "^6.0.3",
     "vite": "^8.1.3",