@graphcommerce/image 3.1.6 → 3.1.9

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Change Log
 
+## 3.1.9
+
+### Patch Changes
+
+- Updated dependencies [[`01372b918`](https://github.com/graphcommerce-org/graphcommerce/commit/01372b918a291e01cbf5db40edcb40fb1c2af313)]:
+  - @graphcommerce/framer-utils@3.2.0
+
+## 3.1.8
+
+### Patch Changes
+
+- Updated dependencies [[`707dbc73d`](https://github.com/graphcommerce-org/graphcommerce/commit/707dbc73d181204d88fdbbd2e09340e25b2b5f7b), [`5c5645e6e`](https://github.com/graphcommerce-org/graphcommerce/commit/5c5645e6eaf5314c063f05547707fcd4b34a8717)]:
+  - @graphcommerce/framer-utils@3.1.5
+
+## 3.1.7
+
+### Patch Changes
+
+- [#1490](https://github.com/graphcommerce-org/graphcommerce/pull/1490) [`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb) Thanks [@paales](https://github.com/paales)! - upgraded packages
+
+- Updated dependencies [[`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb)]:
+  - @graphcommerce/framer-utils@3.1.4
+
 ## 3.1.6
 
 ### Patch Changes

package/components/Image.tsx

@@ -260,6 +260,7 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
       blurDataURL,
       dontReportWronglySizedImages,
       pictureProps,
+      sx = [],
       ...imgProps
     },
     forwardedRef,
@@ -494,7 +495,7 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
             width={width}
             height={height}
             data-nimg
-            style={style}
+            sx={[style, ...(Array.isArray(sx) ? sx : [sx])]}
           />
         ) : (
           <Picture {...pictureProps}>
@@ -512,7 +513,7 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
               loading={loading ?? 'lazy'}
               width={width}
               height={height}
-              style={style}
+              sx={[style, ...(Array.isArray(sx) ? sx : [sx])]}
               sizes={sizes}
               data-nimg
               decoding='async'
@@ -530,27 +531,24 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
                   rel='preload'
                   as='image'
                   media='(-webkit-min-device-pixel-ratio: 2.5)'
-                  // @ts-expect-error imagesrcset/imagesizes is not yet in the link element type.
-                  imagesrcset={srcSet3x}
-                  imagesizes={sizes}
+                  imageSrcSet={srcSet3x}
+                  imageSizes={sizes}
                 />
                 <link
                   key={`img-${srcSet2x}${sizes}`}
                   rel='preload'
                   as='image'
                   media='(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49)'
-                  // @ts-expect-error imagesrcset/imagesizes is not yet in the link element type.
-                  imagesrcset={srcSet2x}
-                  imagesizes={sizes}
+                  imageSrcSet={srcSet2x}
+                  imageSizes={sizes}
                 />
                 <link
                   key={`img-${srcSet1x}${sizes}`}
                   rel='preload'
                   as='image'
                   media='(-webkit-max-device-pixel-ratio: 1.49)'
-                  // @ts-expect-error imagesrcset/imagesizes is not yet in the link element type.
-                  imagesrcset={srcSet1x}
-                  imagesizes={sizes}
+                  imageSrcSet={srcSet1x}
+                  imageSizes={sizes}
                 />
               </>
             )}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/image",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.1.6",
+  "version": "3.1.9",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,10 +15,10 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "3.1.3"
+    "@graphcommerce/framer-utils": "3.2.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.5",
+    "@graphcommerce/eslint-config-pwa": "^4.1.10",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
     "@playwright/test": "^1.21.1",
@@ -26,8 +26,8 @@
   },
   "peerDependencies": {
     "@mui/material": "5.5.3",
-    "next": "12.1.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "next": "^12.1.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }