feat(SW-365): Added focal point to imagevault typings and to image component

components/Image.tsx

@@ -2,7 +2,10 @@
 
 import NextImage from "next/image"
 
-import type { ImageLoaderProps, ImageProps } from "next/image"
+import type { ImageLoaderProps } from "next/image"
+import type { CSSProperties } from "react"
+
+import type { ImageProps } from "@/types/components/image"
 
 function imageLoader({ quality, src, width }: ImageLoaderProps) {
   const hasQS = src.indexOf("?") !== -1
@@ -10,6 +13,14 @@ function imageLoader({ quality, src, width }: ImageLoaderProps) {
 }
 
 // Next/Image adds & instead of ? before the params
-export default function Image(props: ImageProps) {
-  return <NextImage {...props} loader={imageLoader} />
+export default function Image({ focalPoint, style, ...props }: ImageProps) {
+  const styles: CSSProperties = focalPoint
+    ? {
+        objectFit: "cover",
+        objectPosition: `${focalPoint.x}% ${focalPoint.y}%`,
+        ...style,
+      }
+    : { ...style }
+
+  return <NextImage {...props} style={styles} loader={imageLoader} />
 }

components/TempDesignSystem/Card/index.tsx

@@ -34,7 +34,7 @@ export default function Card({
 
   imageWidth =
     imageWidth ||
-    (backgroundImage && "dimensions" in backgroundImage
+    (backgroundImage?.dimensions
       ? backgroundImage.dimensions.aspectRatio * imageHeight
       : 420)