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/ImageGallery/imageGallery.module.css

@@ -9,14 +9,6 @@
   position: absolute;
   bottom: var(--Space-x2);
   right: var(--Space-x2);
-  background-color: var(--Overlay-90);
-  padding: var(--Space-x025) var(--Space-x05);
-  border-radius: var(--Corner-radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--Space-x025);
-  color: var(--Text-Inverted);
 }
 
 .imageCountBottom {

packages/design-system/lib/components/ImageGallery/index.tsx

@@ -11,6 +11,8 @@ import Lightbox from "../Lightbox"
 import { Typography } from "../Typography"
 
 import styles from "./imageGallery.module.css"
+import { ImageCounter } from "../ImageCounter"
+import { cx } from "class-variance-authority"
 
 export interface GalleryImage {
   src: string
@@ -65,18 +67,16 @@ function ImageGallery({
           onError={() => setImageError(true)}
           {...imageProps}
         />
-        <Typography variant="Body/Supporting text (caption)/smRegular">
-          <span
-            className={`${styles.imageCount} ${
-              imageCountPosition === "top"
-                ? styles.imageCountTop
-                : styles.imageCountBottom
-            }`}
-          >
-            <MaterialIcon icon="filter" color="Icon/Inverted" size={16} />
-            <span>{images.length}</span>
-          </span>
-        </Typography>
+        <ImageCounter
+          className={cx(styles.imageCount, {
+            [styles.imageCountTop]: imageCountPosition === "top",
+            [styles.imageCountBottom]: imageCountPosition === "bottom",
+          })}
+          number={images.length}
+          size="Large"
+          leadingIcon
+        />
+
         <ButtonRAC
           className={styles.triggerArea}
           onPress={() => setIsOpen(true)}