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/util.tsx

@@ -0,0 +1,30 @@
+import { useCallback, useEffect } from 'react'
+
+const ANIMATION_OFFSET = 300
+
+export const animationVariants = {
+  initial: (animateLeft: boolean) => ({
+    opacity: 0,
+    x: animateLeft ? ANIMATION_OFFSET : -ANIMATION_OFFSET,
+  }),
+  animate: { opacity: 1, x: 0 },
+  exit: (animateLeft: boolean) => ({
+    opacity: 0,
+    x: animateLeft ? -ANIMATION_OFFSET : ANIMATION_OFFSET,
+  }),
+} as const
+
+export function useKeyboardNavigation(onPrev: () => void, onNext: () => void) {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'ArrowLeft') onPrev()
+      if (e.key === 'ArrowRight') onNext()
+    },
+    [onPrev, onNext]
+  )
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [handleKeyDown])
+}