Merged in SW-2064-lightbox-updates (pull request #3347)

feat(SW-2064): Lightbox updates

* chore(SW-2064): add opacity to not selected images

* chore(SW-2064): set main image as the first image in thumbnail

* chore(SW-2064): disable navigation buttons on first and last image

* fix(SW-2064): use cx

* Revert "chore(SW-2064): disable navigation buttons on first and last image"

This reverts commit 9c5acd8a02b83740f35d1cfa88bfba6b006ba947.

* refactor(SW-2064): create ImageCounter component

* refactor(SW-2064)

* chore(SW-2064): add enter keu down on main image


Approved-by: Erik Tiekstra

packages/design-system/lib/components/Lightbox/Gallery/ThumnailImage.tsx

@@ -0,0 +1,57 @@
+"use client"
+import { motion } from "motion/react"
+
+import Image from "../../Image"
+import { LightboxImage } from ".."
+import styles from "./gallery.module.css"
+import { useIntl } from "react-intl"
+import { cx } from "class-variance-authority"
+import { Button as ButtonRAC } from "react-aria-components"
+import { memo } from "react"
+
+interface ThumbnailImage {
+  image: LightboxImage
+  index: number
+  onSelect: (image: LightboxImage) => void
+  isMainImage?: boolean
+  className?: string
+}
+export const ThumbnailImage = memo(function ThumbnailImage({
+  image,
+  index,
+  onSelect,
+  isMainImage = false,
+  className,
+}: ThumbnailImage) {
+  const intl = useIntl()
+  return (
+    <motion.div
+      key={image.src}
+      className={styles.thumbnailContainer}
+      initial={{ opacity: 0, x: 50 }}
+      animate={{ opacity: 1, x: 0 }}
+      exit={{ opacity: 0, x: -50 }}
+      transition={{ duration: 0.2, delay: index * 0.05 }}
+    >
+      <ButtonRAC
+        className={styles.imageButton}
+        onPress={() => onSelect(image)}
+        aria-label={intl.formatMessage({
+          id: "lightbox.openImage",
+          defaultMessage: "Open image",
+        })}
+      >
+        <Image
+          src={image.src}
+          alt={image.alt}
+          fill
+          sizes="200px"
+          className={cx(styles.image, className, {
+            [styles.notActiveImage]: !isMainImage,
+            [styles.activeImage]: isMainImage,
+          })}
+        />
+      </ButtonRAC>
+    </motion.div>
+  )
+})