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/ImageCounter/index.tsx

@@ -0,0 +1,29 @@
+import { VariantProps } from "class-variance-authority"
+import { Typography } from "../Typography"
+import { variants } from "./variants"
+import { MaterialIcon } from "../Icons/MaterialIcon"
+
+interface ImageCounterProps extends VariantProps<typeof variants> {
+  number: number | string
+  leadingIcon?: boolean
+  className?: string
+}
+
+export function ImageCounter({
+  number,
+  size,
+  leadingIcon = false,
+  className,
+}: ImageCounterProps) {
+  const classNames = variants({ className, size })
+  return (
+    <Typography variant="Tag/sm">
+      <span className={classNames}>
+        {leadingIcon && (
+          <MaterialIcon icon="filter" color="Icon/Inverted" size={16} />
+        )}
+        {number}
+      </span>
+    </Typography>
+  )
+}