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/useThumbNail.ts

@@ -0,0 +1,39 @@
+"use client"
+
+import { useMemo } from "react"
+import { LightboxImage } from ".."
+
+export const THUMBNAIL_WINDOW = 5
+export const THUMBNAIL_OFFSET = Math.ceil(THUMBNAIL_WINDOW / 2)
+
+interface useThumbnailProps {
+  images: LightboxImage[]
+  mainImageIdx: number
+}
+/*
+ * Keep the main image in the center of the thumbnail, unless when it's one of the first or the last pictures.
+ */
+export function useThumbnail({ images, mainImageIdx }: useThumbnailProps) {
+  return useMemo(() => {
+    if (mainImageIdx < THUMBNAIL_OFFSET) {
+      return {
+        images: images.slice(0, THUMBNAIL_WINDOW),
+        next: images[THUMBNAIL_WINDOW + 1],
+      }
+    }
+    if (mainImageIdx >= images.length - THUMBNAIL_OFFSET) {
+      return {
+        previous: images[images.length - THUMBNAIL_WINDOW - 1],
+        images: images.slice(images.length - THUMBNAIL_WINDOW, images.length),
+      }
+    }
+    return {
+      previous: images[mainImageIdx - THUMBNAIL_OFFSET],
+      images: images.slice(
+        mainImageIdx - THUMBNAIL_OFFSET + 1,
+        mainImageIdx + THUMBNAIL_OFFSET
+      ),
+      next: images[mainImageIdx + THUMBNAIL_OFFSET],
+    }
+  }, [images, mainImageIdx])
+}