Merged in feat/SW-1542-carousel-functionality (pull request #1311)

feat(SW-1542): Carousel component

* feat(SW-1542): add Embla Carousel component and use in CarouselCards

* fix(SW-1542): remove max-width constraint for card on ipad

* fix(SW-1542): Add padding to start page content container

* refactor(SW-1542): Improve Embla Carousel type imports

* refactor(SW-1542): Remove unnecessary carousel wrapper div

* refactor(SW-1542): Modularize Carousel component structure

* refactor(SW-1542): Remove carousel dots display

* feat(SW-1542): Add carousel dots navigation

* refactor(SW-1542): Update Carousel component styling and types

* refactor(SW-1542): Remove uneeded useCallback from Carousel navigation methods

* refactor(SW-1542): Modify CarouselContextProps type to exclude className

* refactor(SW-1542): Optimize React imports in Carousel components

* refactor(SW-1542): Consolidate Carousel component and remove CarouselRoot

* refactor(SW-1542): Update Carousel navigation methods to use function-based scroll checks

* refactor(SW-1542): Add explicit children prop support to CarouselContent component

* refactor(SW-1542): Add children prop support to CarouselItem component


Approved-by: Christian Andolf

components/Carousel/CarouselContent.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { cx } from "class-variance-authority"
+
+import { useCarousel } from "./CarouselContext"
+
+import styles from "./carousel.module.css"
+
+export function CarouselContent({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const { carouselRef } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className={styles.viewport}>
+      <div className={cx(styles.container, className)} {...props}>
+        {children}
+      </div>
+    </div>
+  )
+}