@mgonza02/goal-image-gallery 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -5,6 +5,43 @@ All notable changes to the GoalImageGallery project will be documented in this f
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.0] - 2026-04-29
+
+### ⬆️ Dependency Upgrades
+- **MUI v9**: Upgraded `@mui/material` and `@mui/icons-material` from `^5.18` to `^9.0.0`
+- **Emotion**: Updated `@emotion/react` and `@emotion/styled` to `^11.14.0`
+- **Node engine**: Minimum Node.js version raised to `>=18.0.0`
+
+### 🔧 Migration — MUI v9 Breaking Changes
+- **System props removed**: Migrated deprecated shorthand props (`color`, `alignItems`, `textAlign`, `display`) on Typography and Stack to the `sx` prop using the official `@mui/codemod v9.0.0/system-props` codemod
+- **Stack alignItems**: Restored `alignItems` as a direct prop on `Stack` components where the codemod incorrectly moved it into `sx`, fixing a React DOM prop warning (`React does not recognize the alignItems prop on a DOM element`)
+- **Grid v2**: Confirmed Grid already uses the v2 `size` prop API required by MUI v9
+
+### 📦 Package Manager — Migrated to pnpm
+- **pnpm@10.33.2**: Replaced npm with pnpm as the official package manager
+- Added `"packageManager": "pnpm@10.33.2"` to `package.json`
+- Added `.npmrc` with `engine-strict=true`, `auto-install-peers=true`, `shamefully-hoist=false`
+- All `npm run X` script calls replaced with `pnpm X`
+- `package-lock.json` replaced by `pnpm-lock.yaml`
+- Updated `.gitignore` and `.npmignore` with pnpm log/lockfile entries
+
+### 🐳 Docker
+- **Dockerfile**: Replaced `npm install` with `corepack enable && corepack prepare pnpm@10.33.2 --activate` + `pnpm install --frozen-lockfile`; `CMD` updated to `pnpm start`
+- **docker-compose.yml**: Updated `command` from `node start.js` to `pnpm build`
+
+### 📐 Architecture
+- Added `SOLID_PRINCIPLES.md`: documents how SRP, OCP, LSP, ISP, and DIP are applied and enforced in this codebase, including allowed import direction graph and PR checklist
+
+
+## [1.1.1] - 2025-07-14
+### 🐛 Bug Fixes
+- **Fixed Image Gallery Modal**: Resolved issues with the image gallery modal not displaying correctly
+- **Improved Image Handling**: Enhanced image error handling and loading states
+- **Modal Responsiveness**: Ensured the modal is fully responsive and adapts to different screen sizes
+- **Accessibility Improvements**: Enhanced keyboard navigation and ARIA attributes for better accessibility
+- **Code Cleanup**: Removed unused imports and optimized component structure
+- **Remove styled-components**: Replaced styled-components with MUI's Box component for better consistency
+
 ## [1.1.0] - 2025-07-14
 
 ### 🐛 Bug Fixes

package/README.md

@@ -53,10 +53,10 @@ import { GoalImageGallery } from '@mgonza02/goal-image-gallery';
 
 ## Installation & Setup
 
-### NPM Installation
+### Installation
 
 ```bash
-npm install @mgonza02/goal-image-gallery
+pnpm add @mgonza02/goal-image-gallery
 ```
 
 ### Peer Dependencies
@@ -64,7 +64,7 @@ npm install @mgonza02/goal-image-gallery
 Make sure you have the required peer dependencies installed:
 
 ```bash
-npm install @mui/material @mui/icons-material @emotion/react @emotion/styled react react-dom
+pnpm add @mui/material @mui/icons-material @emotion/react @emotion/styled react react-dom
 ```
 
 ### Import
@@ -1106,13 +1106,13 @@ When contributing to this component:
 For detailed information about changes, new features, and updates across versions, see [CHANGELOG.md](CHANGELOG.md).
 
 ### Recent Updates
+- **v1.2.0**: Upgraded to MUI v9, migrated to pnpm, Docker build pipeline, SOLID principles documentation
+- **v1.1.1**: Modal responsiveness, accessibility improvements, styled-components replaced with MUI Box
+- **v1.1.0**: Fixed handleAfterUpload array structure for bulk uploads
 - **v1.0.6**: Major package cleanup and optimization
 - **v1.0.5**: Initial package review and dependency analysis
 - **v1.0.4**: Comprehensive documentation overhaul
 - **v1.0.3**: NPM publication and scoped package setup
-- **v1.0.2**: Slot system implementation and UI enhancements
-- **v1.0.1**: Bug fixes and stability improvements
-- **v1.0.0**: Initial release with core features
 
 ## License
 

package/lib/GoalImageGallery.js

@@ -14,7 +14,7 @@ import { downloadImage } from "./utils/image-utils";
  * Provides advanced upload capabilities, responsive design, accessibility features, and extensive customization options.
  * 
  * @component
- * @version 1.0.3
+ * @version 1.2.0
  * @author Goal Team
  * @since 2023
  * 
@@ -236,7 +236,6 @@ const GoalImageGallery = _ref => {
     slotProps = {}
   } = _ref;
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
   const [updatable, setUpdatable] = useState(false);
   const {
     selector: ImageSelector
@@ -257,7 +256,6 @@ const GoalImageGallery = _ref => {
     selectedImageIndex,
     selectingImage,
     imageList,
-    selectedImage,
     zoomLevel,
     loading,
     removable,
@@ -282,8 +280,6 @@ const GoalImageGallery = _ref => {
 
   // Zoom and navigation handlers
   const {
-    handleZoomIn,
-    handleZoomOut,
     handlePreviousImage,
     handleNextImage
   } = useImageZoom(getImageUrl, imageList);

package/lib/components/ImageGalleryEmptyState.js

@@ -26,7 +26,9 @@ const ImageGalleryEmptyState = _ref => {
         }
       }), /*#__PURE__*/_jsx(Typography, {
         variant: "h6",
-        color: "text.secondary",
+        sx: {
+          color: 'text.secondary'
+        },
         children: emptyMessage
       }), updatable && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Button, {
@@ -65,8 +67,10 @@ const ImageGalleryEmptyState = _ref => {
           })]
         }), /*#__PURE__*/_jsx(Typography, {
           variant: "caption",
-          color: "text.secondary",
-          textAlign: "center",
+          sx: {
+            color: 'text.secondary',
+            textAlign: 'center'
+          },
           children: "Soporta m\xFAltiples m\xE9todos de carga: archivos, portapapeles y URLs"
         })]
       })]

package/lib/components/ImageGalleryGrid.js

@@ -1,11 +1,9 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, Card, CardContent, useMediaQuery } from '@mui/material';
+import { Grid, Card, CardContent } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import ImageGalleryItem from './ImageGalleryItem';
 import ImageGalleryEmptyState from './ImageGalleryEmptyState';
 import { StyledImageGridContainer } from '../styles/styled-components';
-import { getGridColumns } from '../utils/image-utils';
 
 /**
  * Image grid component for displaying gallery images
@@ -30,8 +28,6 @@ const ImageGalleryGrid = _ref => {
     onDownloadImage
   } = _ref;
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-  const isTablet = useMediaQuery(theme.breakpoints.down('lg'));
   if (imageList.length === 0) {
     return /*#__PURE__*/_jsx(Card, {
       elevation: 2,
@@ -53,8 +49,11 @@ const ImageGalleryGrid = _ref => {
           container: true,
           spacing: 2,
           children: imageList.map((image, index) => /*#__PURE__*/_jsx(Grid, {
-            item: true,
-            xs: getGridColumns(isMobile, isTablet, multiple),
+            size: {
+              xs: 6,
+              sm: multiple ? 4 : 6,
+              md: multiple ? 3 : 4
+            },
             sx: {
               position: 'relative'
             },

package/lib/components/ImageGalleryItem.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Box, IconButton, Skeleton, Tooltip, Typography, Button } from '@mui/material';
 import { alpha, useTheme } from '@mui/material/styles';
 import { ChangeCircle as ChangeIcon, Download as DownloadIcon, Visibility as ViewIcon, Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
-import { StyledImageContainer, ImageOverlay } from '../styles/styled-components';
+import { getImageContainerStyles, getImageOverlayStyles } from '../styles/styled-components';
 import { handleImageError } from '../utils/image-utils';
 
 /**
@@ -30,8 +30,9 @@ const ImageGalleryItem = _ref => {
 
   // Handle add button (+) image
   if (image.image_code === '+') {
-    return /*#__PURE__*/_jsx(StyledImageContainer, {
+    return /*#__PURE__*/_jsx(Box, {
       sx: {
+        ...getImageContainerStyles(theme),
         height: 200,
         display: 'flex',
         alignItems: 'center',
@@ -62,7 +63,8 @@ const ImageGalleryItem = _ref => {
       })
     });
   }
-  return /*#__PURE__*/_jsxs(StyledImageContainer, {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: getImageContainerStyles(theme),
     children: [loading && /*#__PURE__*/_jsx(Skeleton, {
       variant: "rectangular",
       width: "100%",
@@ -84,8 +86,9 @@ const ImageGalleryItem = _ref => {
         objectFit: 'cover',
         display: loading ? 'none' : 'block'
       }
-    }, image.image_code), /*#__PURE__*/_jsxs(ImageOverlay, {
+    }, image.image_code), /*#__PURE__*/_jsxs(Box, {
       className: "image-overlay",
+      sx: getImageOverlayStyles(theme),
       children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "Ver imagen",
         children: /*#__PURE__*/_jsx(IconButton, {

package/lib/components/ImageGalleryModal.js

@@ -1,8 +1,7 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, Zoom, Backdrop, Typography, IconButton, Stack, Chip, Tooltip, Box, useMediaQuery, useTheme } from '@mui/material';
 import { Close as CloseIcon, ZoomIn as ZoomInIcon, ZoomOut as ZoomOutIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon } from '@mui/icons-material';
-import { StyledModalContainer, StyledModalHeader, StyledModalBody, StyledModalFooter } from '../styles/styled-components';
+import { getModalContainerStyles, getModalHeaderStyles, getModalBodyStyles, getModalFooterStyles } from '../styles/styled-components';
 import { handleImageError } from '../utils/image-utils';
 
 /**
@@ -42,9 +41,10 @@ const ImageGalleryModal = _ref => {
     },
     children: /*#__PURE__*/_jsx(Zoom, {
       in: open,
-      children: /*#__PURE__*/_jsxs(StyledModalContainer, {
-        isMobile: isMobile,
-        children: [/*#__PURE__*/_jsxs(StyledModalHeader, {
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: getModalContainerStyles(theme, isMobile),
+        children: [/*#__PURE__*/_jsxs(Box, {
+          sx: getModalHeaderStyles(theme),
           children: [/*#__PURE__*/_jsxs(Typography, {
             variant: "h6",
             children: ["Imagen ", selectedImageIndex + 1, " de ", imageList.length]
@@ -77,7 +77,8 @@ const ImageGalleryModal = _ref => {
               })
             })]
           })]
-        }), /*#__PURE__*/_jsx(StyledModalBody, {
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: getModalBodyStyles(theme),
           children: /*#__PURE__*/_jsx(Box, {
             sx: {
               width: '100%',
@@ -105,7 +106,8 @@ const ImageGalleryModal = _ref => {
               onError: e => handleImageError(e, noImageUrl)
             })
           })
-        }), imageList.length > 1 && /*#__PURE__*/_jsxs(StyledModalFooter, {
+        }), imageList.length > 1 && /*#__PURE__*/_jsxs(Box, {
+          sx: getModalFooterStyles(theme),
           children: [/*#__PURE__*/_jsx(Tooltip, {
             title: "Imagen anterior",
             children: /*#__PURE__*/_jsx(IconButton, {
@@ -115,7 +117,9 @@ const ImageGalleryModal = _ref => {
             })
           }), /*#__PURE__*/_jsx(Typography, {
             variant: "body2",
-            color: "text.secondary",
+            sx: {
+              color: 'text.secondary'
+            },
             children: "Use las flechas del teclado para navegar"
           }), /*#__PURE__*/_jsx(Tooltip, {
             title: "Imagen siguiente",

package/lib/examples.js

@@ -285,8 +285,10 @@ export const AdvancedUploadExample = () => {
       children: "Advanced Upload Methods Demo"
     }), /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
-      color: "text.secondary",
       paragraph: true,
+      sx: {
+        color: 'text.secondary'
+      },
       children: "This gallery supports multiple upload methods:"
     }), /*#__PURE__*/_jsxs("ul", {
       children: [/*#__PURE__*/_jsx("li", {
@@ -358,8 +360,10 @@ export const MobileGalleryExample = () => {
       children: "Mobile-Optimized Gallery"
     }), /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
-      color: "text.secondary",
       paragraph: true,
+      sx: {
+        color: 'text.secondary'
+      },
       children: "Optimized for mobile devices with touch-friendly interface"
     }), /*#__PURE__*/_jsx(GoalImageGallery, {
       imageCodes: mobileImages,
@@ -542,14 +546,16 @@ export const CustomSelectorExample = () => {
         children: title
       }), /*#__PURE__*/_jsx(Typography, {
         variant: "body1",
-        color: "text.secondary",
         paragraph: true,
+        sx: {
+          color: 'text.secondary'
+        },
         children: uploadMessage
       }), /*#__PURE__*/_jsxs(Typography, {
         variant: "caption",
-        display: "block",
-        color: "text.secondary",
         sx: {
+          display: 'block',
+          color: 'text.secondary',
           mb: 2
         },
         children: ["Maximum file size: ", maxFileSize / 1024 / 1024, "MB | Theme: ", theme]
@@ -612,8 +618,10 @@ export const CustomSelectorExample = () => {
       children: "Custom Image Selector with Slots"
     }), /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
-      color: "text.secondary",
       paragraph: true,
+      sx: {
+        color: 'text.secondary'
+      },
       children: "This example demonstrates how to use the slot system to provide a custom image selector with enhanced UI and functionality."
     }), /*#__PURE__*/_jsx(GoalImageGallery, {
       imageCodes: images,
@@ -768,12 +776,16 @@ export const BulkUploadExample = () => {
         children: "Bulk Upload Images"
       }), /*#__PURE__*/_jsx(Typography, {
         variant: "body2",
-        color: "text.secondary",
         paragraph: true,
+        sx: {
+          color: 'text.secondary'
+        },
         children: "Drop multiple images here or click to select"
       }), selectedFiles.length > 0 && /*#__PURE__*/_jsxs(Typography, {
         variant: "body2",
-        color: "success.main",
+        sx: {
+          color: 'success.main'
+        },
         children: [selectedFiles.length, " file", selectedFiles.length !== 1 ? 's' : '', " selected"]
       }), /*#__PURE__*/_jsx(Button, {
         variant: "contained",
@@ -800,8 +812,10 @@ export const BulkUploadExample = () => {
       children: "Bulk Upload Gallery"
     }), /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
-      color: "text.secondary",
       paragraph: true,
+      sx: {
+        color: 'text.secondary'
+      },
       children: "This example demonstrates bulk upload functionality where multiple images can be uploaded at once. The handleAfterUpload method now accepts arrays of image objects."
     }), /*#__PURE__*/_jsx(GoalImageGallery, {
       imageCodes: galleryImages,

package/lib/styles/styled-components.js

@@ -1,173 +1,142 @@
 import { Box } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
 
 /**
- * Styled component for image containers with enhanced hover effects
+ * Styles for image containers with enhanced hover effects
  */
-export const StyledImageContainer = styled(Box)(_ref => {
-  let {
-    theme
-  } = _ref;
-  return {
-    position: 'relative',
-    borderRadius: theme.spacing(1.5),
-    overflow: 'hidden',
-    backgroundColor: theme.palette.background.paper,
-    border: `1px solid ${theme.palette.divider}`,
-    cursor: 'pointer',
-    transition: theme.transitions.create(['border-color', 'box-shadow', 'transform'], {
-      duration: theme.transitions.duration.short
-    }),
-    '&:hover': {
-      borderColor: theme.palette.primary.main,
-      boxShadow: theme.shadows[4],
-      transform: 'translateY(-2px)',
-      '& .image-overlay': {
-        opacity: 1
-      }
+export const getImageContainerStyles = theme => ({
+  position: 'relative',
+  borderRadius: theme.spacing(1.5),
+  overflow: 'hidden',
+  backgroundColor: theme.palette.background.paper,
+  border: `1px solid ${theme.palette.divider}`,
+  cursor: 'pointer',
+  transition: theme.transitions.create(['border-color', 'box-shadow', 'transform'], {
+    duration: theme.transitions.duration.short
+  }),
+  '&:hover': {
+    borderColor: theme.palette.primary.main,
+    boxShadow: theme.shadows[4],
+    transform: 'translateY(-2px)',
+    '& .image-overlay': {
+      opacity: 1
     }
-  };
+  }
 });
 
 /**
- * Styled component for image overlay with action buttons
+ * Styles for image overlay with action buttons
  */
-export const ImageOverlay = styled(Box)(_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    background: alpha(theme.palette.common.black, 0.5),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    opacity: 0,
-    transition: theme.transitions.create('opacity', {
-      duration: theme.transitions.duration.short
-    }),
-    '& .MuiIconButton-root': {
-      color: theme.palette.common.white,
-      backgroundColor: alpha(theme.palette.common.black, 0.7),
-      margin: theme.spacing(0.5),
-      '&:hover': {
-        backgroundColor: alpha(theme.palette.common.black, 0.9)
-      }
+export const getImageOverlayStyles = theme => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  background: alpha(theme.palette.common.black, 0.5),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  opacity: 0,
+  transition: theme.transitions.create('opacity', {
+    duration: theme.transitions.duration.short
+  }),
+  '& .MuiIconButton-root': {
+    color: theme.palette.common.white,
+    backgroundColor: alpha(theme.palette.common.black, 0.7),
+    margin: theme.spacing(0.5),
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.common.black, 0.9)
     }
-  };
+  }
 });
 
 /**
- * Styled component for modal container
+ * Styles for modal container
  */
-export const StyledModalContainer = styled(Box)(_ref3 => {
-  let {
-    theme,
-    isMobile
-  } = _ref3;
-  return {
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%) !important',
-    position: 'absolute',
-    width: isMobile ? '95vw' : '90vw',
-    maxWidth: 1200,
-    height: isMobile ? '95vh' : '90vh',
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: theme.spacing(2),
-    overflow: 'hidden',
-    display: 'flex',
-    flexDirection: 'column',
-    boxShadow: 24
-  };
+export const getModalContainerStyles = (theme, isMobile) => ({
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%) !important',
+  position: 'absolute',
+  width: isMobile ? '95vw' : '90vw',
+  maxWidth: 1200,
+  height: isMobile ? '95vh' : '90vh',
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: theme.spacing(2),
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  boxShadow: 24
 });
 
 /**
- * Styled component for modal header
+ * Styles for modal header
  */
-export const StyledModalHeader = styled(Box)(_ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: theme.spacing(2),
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    backgroundColor: alpha(theme.palette.background.paper, 0.95)
-  };
+export const getModalHeaderStyles = theme => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  backgroundColor: alpha(theme.palette.background.paper, 0.95)
 });
 
 /**
- * Styled component for modal body
+ * Styles for modal body
  */
-export const StyledModalBody = styled(Box)(_ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return {
-    flex: 1,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    position: 'relative',
-    backgroundColor: theme.palette.grey[50]
-  };
+export const getModalBodyStyles = theme => ({
+  flex: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  position: 'relative',
+  backgroundColor: theme.palette.grey[50]
 });
 
 /**
- * Styled component for modal footer
+ * Styles for modal footer
  */
-export const StyledModalFooter = styled(Box)(_ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: theme.spacing(2),
-    borderTop: `1px solid ${theme.palette.divider}`,
-    backgroundColor: alpha(theme.palette.background.paper, 0.95)
-  };
+export const getModalFooterStyles = theme => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+  borderTop: `1px solid ${theme.palette.divider}`,
+  backgroundColor: alpha(theme.palette.background.paper, 0.95)
 });
 
 /**
- * Styled component for empty state container
+ * Styles for empty state container
  */
-export const StyledEmptyStateContainer = styled(Box)(_ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: theme.spacing(2),
-    minHeight: 300
-  };
+export const getEmptyStateContainerStyles = theme => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+  minHeight: 300
 });
 
 /**
- * Styled component for image grid container
+ * Styles for image grid container
  */
-export const StyledImageGridContainer = styled(Box)(_ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: theme.spacing(2),
-    minHeight: 200
-  };
-});
+export const getImageGridContainerStyles = theme => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: theme.spacing(2),
+  minHeight: 200
+});
+
+// Legacy styled components exports for backward compatibility
+export const StyledImageContainer = Box;
+export const ImageOverlay = Box;
+export const StyledModalContainer = Box;
+export const StyledModalHeader = Box;
+export const StyledModalBody = Box;
+export const StyledModalFooter = Box;
+export const StyledEmptyStateContainer = Box;
+export const StyledImageGridContainer = Box;

package/package.json

@@ -1,90 +1,89 @@
 {
-    "name": "@mgonza02/goal-image-gallery",
-    "version": "1.1.0",
-    "description": "Advanced, accessible, and highly customizable React image gallery component with multi-method upload, responsive design, and extensive TypeScript support",
-    "main": "lib/index.js",
-    "module": "lib/index.js",
-    "types": "lib/index.d.ts",
-    "keywords": [
-        "react",
-        "image-gallery",
-        "material-ui",
-        "component",
-        "upload",
-        "drag-drop",
-        "clipboard",
-        "modal",
-        "zoom",
-        "responsive"
+  "name": "@mgonza02/goal-image-gallery",
+  "version": "1.2.0",
+  "description": "Advanced, accessible, and highly customizable React image gallery component with multi-method upload, responsive design, and extensive TypeScript support",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "keywords": [
+    "react",
+    "image-gallery",
+    "material-ui",
+    "component",
+    "upload",
+    "drag-drop",
+    "clipboard",
+    "modal",
+    "zoom",
+    "responsive"
+  ],
+  "author": "Goal Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mgonza02/goal-image-gallery.git"
+  },
+  "homepage": "https://github.com/mgonza02/goal-image-gallery#readme",
+  "bugs": {
+    "url": "https://github.com/mgonza02/goal-image-gallery/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib/",
+    "README.md",
+    "CHANGELOG.md",
+    "QUICK_REFERENCE.md",
+    "MIGRATION.md",
+    "IMPLEMENTATION_GUIDE.md",
+    "IMPLEMENTATION_SUMMARY.md",
+    "DOCUMENTATION_UPDATE_SUMMARY.md",
+    "PACKAGE_CLEANUP_SUMMARY.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "prop-types": "^15.8.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.20.0",
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/preset-react": "^7.18.0",
+    "prettier": "^3.4.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
     ],
-    "author": "Goal Team",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/mgonza02/goal-image-gallery.git"
-    },
-    "homepage": "https://github.com/mgonza02/goal-image-gallery#readme",
-    "bugs": {
-        "url": "https://github.com/mgonza02/goal-image-gallery/issues"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "files": [
-        "lib/",
-        "README.md",
-        "CHANGELOG.md",
-        "QUICK_REFERENCE.md",
-        "MIGRATION.md",
-        "IMPLEMENTATION_GUIDE.md",
-        "IMPLEMENTATION_SUMMARY.md",
-        "DOCUMENTATION_UPDATE_SUMMARY.md",
-        "PACKAGE_CLEANUP_SUMMARY.md",
-        "LICENSE"
-    ],
-    "peerDependencies": {
-        "@emotion/react": "^11.0.0",
-        "@emotion/styled": "^11.0.0",
-        "@mui/icons-material": "^5.18.0",
-        "@mui/material": "^5.18.0",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
-    },
-    "dependencies": {
-        "prop-types": "^15.8.0"
-    },
-    "scripts": {
-        "build": "npm run clean && npm run build:js && npm run build:types",
-        "build:js": "babel src --out-dir lib --copy-files --ignore '**/*.test.js'",
-        "build:types": "cp src/index.d.ts lib/index.d.ts",
-        "prepublishOnly": "npm run build",
-        "format": "prettier --write src/**/*.js",
-        "format:check": "prettier --check src/**/*.js",
-        "clean": "rm -rf lib",
-        "validate": "npm run format:check",
-        "dev": "npm run build -- --watch",
-        "prepack": "npm run validate && npm run build"
-    },
-    "devDependencies": {
-        "@babel/cli": "^7.20.0",
-        "@babel/core": "^7.20.0",
-        "@babel/preset-env": "^7.20.0",
-        "@babel/preset-react": "^7.18.0",
-        "prettier": "^3.4.2"
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    },
-    "engines": {
-        "node": ">=16.0.0"
-    }
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=9.0.0"
+  },
+  "scripts": {
+    "build": "pnpm clean && pnpm build:js && pnpm build:types",
+    "build:js": "babel src --out-dir lib --copy-files --ignore '**/*.test.js'",
+    "build:types": "cp src/index.d.ts lib/index.d.ts",
+    "format": "prettier --write src/**/*.js",
+    "format:check": "prettier --check src/**/*.js",
+    "clean": "rm -rf lib",
+    "validate": "pnpm format:check",
+    "dev": "pnpm build -- --watch"
+  }
 }