@evolve.ui/core-components 1.0.0

package/ImageSlider-CDrg_TbL.mjs

@@ -0,0 +1,838 @@
+import { ArrowLeft, ArrowRight, CaretLeft, CaretRight } from "./Icons.mjs";
+import { l as useWindowIsMobile } from "./windowSizeProvider-sYwAqaOy.mjs";
+import { IconButton } from "./IconButton.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { debounce } from "es-toolkit";
+import { spacing } from "@evolve.ui/theme-system/themes/common";
+//#region src/ImageSlider/components/IndexIndicator/IndexIndicator.tsx
+/**
+* Displays a numeric index indicator (e.g., "1 of 11") for image gallery position.
+* Used when thumbnailDisplay is 'index' instead of image thumbnails.
+*/
+const IndexIndicator = ({ currentPage, numberOfPages }) => /* @__PURE__ */ jsxs("div", {
+	"aria-label": `Image ${currentPage} of ${numberOfPages}`,
+	"aria-live": "polite",
+	className: "hui-text-caption flex justify-center text-text-secondary",
+	role: "status",
+	children: [
+		currentPage,
+		" of ",
+		numberOfPages
+	]
+});
+//#endregion
+//#region src/ImageSlider/components/NavigationButtons/NavigationButtons.tsx
+const NavigationButtons = ({ goToNextPage, goToPreviousPage, iconShape = "circle", iconSize = "sm", iconType = "caret", iconVariant = "outlined", isNextPageDisabled = false, isPreviousPageDisabled = false, position, showNextPageButton, showPreviousPageButton }) => {
+	const LeftIcon = iconType === "arrow" ? ArrowLeft : CaretLeft;
+	const RightIcon = iconType === "arrow" ? ArrowRight : CaretRight;
+	if (position) {
+		if (position === "left") return showPreviousPageButton ? /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": "Previous Page",
+			className: "xsMax:hidden",
+			disabled: isPreviousPageDisabled,
+			hideTooltip: true,
+			icon: LeftIcon,
+			onClick: goToPreviousPage,
+			shape: iconShape,
+			size: iconSize,
+			variant: iconVariant
+		}) : null;
+		return showNextPageButton ? /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": "Next Page",
+			className: "xsMax:hidden",
+			disabled: isNextPageDisabled,
+			hideTooltip: true,
+			icon: RightIcon,
+			onClick: goToNextPage,
+			shape: iconShape,
+			size: iconSize,
+			variant: iconVariant
+		}) : null;
+	}
+	const positionStyles = cn("absolute top-[calc(50%-21px)] w-full");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "z-10",
+		children: [showPreviousPageButton && /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": "Previous Page",
+			className: cn(positionStyles, "left-sm", "xsMax:hidden"),
+			disabled: isPreviousPageDisabled,
+			hideTooltip: true,
+			icon: LeftIcon,
+			onClick: goToPreviousPage,
+			shape: iconShape,
+			size: iconSize,
+			variant: iconVariant
+		}), showNextPageButton && /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": "Next Page",
+			className: cn(positionStyles, "right-sm", "xsMax:hidden"),
+			disabled: isNextPageDisabled,
+			hideTooltip: true,
+			icon: RightIcon,
+			onClick: goToNextPage,
+			shape: iconShape,
+			size: iconSize,
+			variant: iconVariant
+		})]
+	});
+};
+//#endregion
+//#region src/ImageSlider/assets/placeholder.svg
+var placeholder_default = "data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 400 400\" role=\"img\" aria-label=\"Image unavailable\">%0A    <rect width=\"400\" height=\"400\" fill=\"%23ececec\"/>%0A    <rect x=\"10\" y=\"10\" width=\"380\" height=\"380\" fill=\"none\" stroke=\"%23c4c4c4\" stroke-width=\"4\"/>%0A    <circle cx=\"148\" cy=\"148\" r=\"32\" fill=\"%23c4c4c4\"/>%0A    <path d=\"M56 322 L162 204 L232 280 L282 228 L344 322 Z\" fill=\"%23c4c4c4\"/>%0A</svg>%0A";
+const SPACING = {
+	GAP_2XS: spacing.xxsValue,
+	GAP_MD: spacing.mdValue,
+	MARGIN_SM: spacing.smValue
+};
+const THUMBNAIL = {
+	QUALITY: 50,
+	SIZE: 111,
+	WIDTH_PARAM: 107
+};
+const MOBILE_CARD = {
+	MAX_WIDTH: 651,
+	WIDTH_REDUCTION: 64
+};
+const ANIMATION = {
+	DEBOUNCE_DELAY: 100,
+	SCROLL_TIMEOUT: 300
+};
+const PLACEHOLDER_IMAGE_URL = placeholder_default;
+const PLACEHOLDER_EMPTY_CARDS = [{
+	imageData: {
+		alt: "Placeholder empty card",
+		baseUrl: PLACEHOLDER_IMAGE_URL,
+		title: "Placeholder empty card"
+	},
+	key: "placeholder-empty-card-1"
+}];
+//#endregion
+//#region src/ImageSlider/utils/imageOptimization.ts
+/**
+* Generates a srcSet string for main images with responsive breakpoints
+* @param baseUrl - The base URL of the image
+* @param config - Responsive image configuration
+* @param useHighQuality - Whether to use high quality mode (no width constraints)
+* @returns The srcSet string for the image
+*/
+const generateMainImageSrcSet = (baseUrl, config, useHighQuality = false) => {
+	if (useHighQuality) return "";
+	const { desktopSize, mobileSize } = config;
+	return [mobileSize, desktopSize].map((width) => {
+		return `${baseUrl}&width=${width} ${width}w`;
+	}).join(", ");
+};
+/**
+* Generates a srcSet string for thumbnail images
+* @param baseUrl - The base URL of the image
+* @returns The srcSet string for the thumbnail
+*/
+const generateThumbnailSrcSet = (baseUrl) => {
+	return `${baseUrl}&width=${THUMBNAIL.WIDTH_PARAM} ${THUMBNAIL.WIDTH_PARAM}w`;
+};
+/**
+* Generates the sizes attribute for responsive images
+* @param config - Responsive image configuration
+* @param useHighQuality - Whether to use high quality mode
+* @returns The sizes attribute string
+*/
+const generateSizesAttribute = (config, useHighQuality = false) => {
+	if (useHighQuality) return "";
+	const { breakpoint, desktopSize, mobileSize } = config;
+	return `(max-width: ${breakpoint}px) ${Math.floor(mobileSize / 3)}px, ${desktopSize}px`;
+};
+const THUMBNAIL_SIZES_ATTRIBUTE = `${THUMBNAIL.WIDTH_PARAM}px`;
+/**
+* Generates the sizes attribute for thumbnail images
+* @returns The sizes attribute string for thumbnails
+*/
+const generateThumbnailSizesAttribute = () => {
+	return THUMBNAIL_SIZES_ATTRIBUTE;
+};
+/**
+* Gets the appropriate image source URL based on quality mode
+* @param baseUrl - The base URL of the image
+* @param config - Responsive image configuration
+* @param useHighQuality - Whether to use high quality mode
+* @returns The appropriate source URL
+*/
+const getImageSrc = (baseUrl, config, useHighQuality = false) => {
+	if (useHighQuality) return baseUrl;
+	return `${baseUrl}&width=${config.mobileSize}`;
+};
+/**
+* Gets the thumbnail image source URL
+* @param baseUrl - The base URL of the image
+* @returns The thumbnail source URL
+*/
+const getThumbnailSrc = (baseUrl) => {
+	return `${baseUrl}&width=${THUMBNAIL.WIDTH_PARAM}`;
+};
+//#endregion
+//#region src/ImageSlider/components/ResponsiveImage/ResponsiveImage.tsx
+/**
+* Renders a responsive image with optimized loading priorities and srcSet
+*/
+const ResponsiveImage = ({ className, hasHoveredGallery = false, imageData, isActiveImage = false, isMainImage = true, responsiveImageConfig }) => {
+	const { alt, baseUrl, title } = imageData;
+	if (!responsiveImageConfig) return /* @__PURE__ */ jsx("img", {
+		alt,
+		className,
+		onError: (e) => {
+			const target = e.target;
+			if (target.src !== PLACEHOLDER_IMAGE_URL) target.src = PLACEHOLDER_IMAGE_URL;
+		},
+		src: baseUrl,
+		title
+	});
+	if (isMainImage) {
+		const shouldLoadHighQuality = hasHoveredGallery;
+		return /* @__PURE__ */ jsx("img", {
+			alt,
+			className: "h-full w-full bg-background-primary object-contain",
+			fetchPriority: isActiveImage || shouldLoadHighQuality ? "high" : "low",
+			loading: isActiveImage || shouldLoadHighQuality ? "eager" : "lazy",
+			onError: (e) => {
+				const target = e.target;
+				if (target.src !== PLACEHOLDER_IMAGE_URL) {
+					target.src = PLACEHOLDER_IMAGE_URL;
+					target.srcset = "";
+				}
+			},
+			sizes: generateSizesAttribute(responsiveImageConfig, shouldLoadHighQuality),
+			src: getImageSrc(baseUrl, responsiveImageConfig, shouldLoadHighQuality),
+			srcSet: generateMainImageSrcSet(baseUrl, responsiveImageConfig, shouldLoadHighQuality),
+			title
+		}, shouldLoadHighQuality && !isActiveImage ? "high-quality" : "standard-quality");
+	}
+	return /* @__PURE__ */ jsx("img", {
+		alt,
+		className: "h-full max-h-[111px] w-full max-w-[111px] object-cover",
+		loading: "lazy",
+		onError: (e) => {
+			const target = e.target;
+			if (target.src !== PLACEHOLDER_IMAGE_URL) {
+				target.src = PLACEHOLDER_IMAGE_URL;
+				target.srcset = "";
+			}
+		},
+		sizes: generateThumbnailSizesAttribute(),
+		src: getThumbnailSrc(baseUrl),
+		srcSet: generateThumbnailSrcSet(baseUrl),
+		title
+	});
+};
+//#endregion
+//#region src/ImageSlider/components/Thumbnails/Thumbnails.tsx
+/**
+* Thumbnails component displays clickable thumbnail previews for image navigation.
+* Supports both vertical and horizontal orientations with consistent 111px sizing across all viewports.
+*/
+const Thumbnails = ({ cards, currentPage, generateThumbnailSizesAttribute, generateThumbnailSrcSet, onThumbnailClick, orientation }) => {
+	const containerRef = useRef(null);
+	const thumbnailRefs = useRef([]);
+	const previousPageRef = useRef(currentPage);
+	useEffect(() => {
+		if (thumbnailRefs.current.length !== cards.length) thumbnailRefs.current.length = cards.length;
+	}, [cards.length]);
+	const enhanceBaseUrl = useCallback((baseUrl) => {
+		return `${baseUrl}${baseUrl.includes("?") ? "&" : "?"}quality=${THUMBNAIL.QUALITY}&sharpen=false`;
+	}, []);
+	const renderThumbnailImage = useCallback((imageData, index, thumbnailSize) => {
+		const { alt, baseUrl, title } = imageData;
+		const enhancedBaseUrl = enhanceBaseUrl(baseUrl);
+		return /* @__PURE__ */ jsx("img", {
+			alt,
+			className: `h-full max-h-[${thumbnailSize}px] w-full max-w-[${thumbnailSize}px] bg-background-primary object-contain`,
+			fetchPriority: index <= 5 ? "high" : "low",
+			loading: index <= 5 ? "eager" : "lazy",
+			onError: (e) => {
+				const target = e.target;
+				if (target.src !== PLACEHOLDER_IMAGE_URL) {
+					target.src = PLACEHOLDER_IMAGE_URL;
+					target.srcset = "";
+				}
+			},
+			sizes: generateThumbnailSizesAttribute(),
+			src: `${enhancedBaseUrl}&width=${thumbnailSize}`,
+			srcSet: generateThumbnailSrcSet(enhancedBaseUrl),
+			title
+		});
+	}, [
+		generateThumbnailSrcSet,
+		generateThumbnailSizesAttribute,
+		enhanceBaseUrl
+	]);
+	useEffect(() => {
+		const pageChanged = previousPageRef.current !== currentPage;
+		previousPageRef.current = currentPage;
+		if (!pageChanged) return;
+		const activeIndex = currentPage - 1;
+		const activeThumbnail = thumbnailRefs.current[activeIndex];
+		if (activeThumbnail && containerRef.current) activeThumbnail.scrollIntoView({
+			behavior: "smooth",
+			block: "nearest",
+			inline: "center"
+		});
+	}, [currentPage, orientation]);
+	/**
+	* Creates thumbnail preview images that can be clicked to navigate to specific images.
+	* Supports both horizontal and vertical orientations with configurable size and dimming.
+	* Supports both custom ReactNode cards and responsive imageData.
+	*/
+	const thumbnailPreviews = useMemo(() => {
+		const thumbnailSize = orientation === "horizontal" ? 48 : THUMBNAIL.SIZE;
+		return cards.map(({ card, imageData, key }, index) => {
+			const pageNumber = index + 1;
+			const isActive = currentPage === pageNumber;
+			return /* @__PURE__ */ jsx("button", {
+				"aria-current": isActive ? "true" : "false",
+				"aria-label": `Go to image ${pageNumber}${imageData?.alt ? `: ${imageData.alt}` : ""}`,
+				"aria-selected": isActive,
+				className: cn("box-border flex-shrink-0 cursor-pointer overflow-hidden rounded-md transition-all duration-100", "hui-focus-visible-outline hover:opacity-80 focus:-outline-offset-4", `aspect-square h-[${thumbnailSize}px] w-[${thumbnailSize}px] max-h-[${thumbnailSize}px] max-w-[${thumbnailSize}px]`, isActive ? "opacity-100 outline outline-2 -outline-offset-2 outline-border-selected" : "opacity-50 outline outline-1 -outline-offset-1 outline-border-secondary"),
+				"data-active": isActive,
+				"data-page": pageNumber,
+				onClick: () => onThumbnailClick(pageNumber),
+				ref: (el) => {
+					thumbnailRefs.current[index] = el;
+				},
+				role: "tab",
+				style: {
+					height: `${thumbnailSize}px`,
+					maxHeight: `${thumbnailSize}px`,
+					maxWidth: `${thumbnailSize}px`,
+					width: `${thumbnailSize}px`
+				},
+				type: "button",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "h-full w-full bg-background-primary",
+					children: imageData ? renderThumbnailImage(imageData, index, thumbnailSize) : card
+				})
+			}, key);
+		});
+	}, [
+		cards,
+		currentPage,
+		onThumbnailClick,
+		renderThumbnailImage,
+		orientation
+	]);
+	const isHorizontal = orientation === "horizontal";
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": "Image thumbnails",
+		className: cn("flex xsMax:hidden", isHorizontal ? "w-full flex-row justify-center overflow-x-auto overflow-y-hidden pb-2xs" : "h-full w-[136px] flex-col overflow-y-auto overflow-x-hidden pr-2xs mdMax:w-[128px]"),
+		ref: containerRef,
+		role: "tablist",
+		style: { scrollbarWidth: "thin" },
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex gap-xs", isHorizontal ? "flex-row" : "flex-col"),
+			children: thumbnailPreviews
+		})
+	});
+};
+//#endregion
+//#region src/ImageSlider/hooks/useImageSlider.ts
+/**
+* Main hook for ImageSlider component that provides basic state and refs
+* Navigation and scroll handling are managed separately to avoid circular dependencies
+* @param props - ImageSlider configuration
+* @returns Basic state and handlers needed for the ImageSlider component
+*/
+const useImageSlider = ({ numberOfPages, responsiveImageConfig }) => {
+	const containerRef = useRef(null);
+	const contentRef = useRef(null);
+	const [hasHoveredGallery, setHasHoveredGallery] = useState(false);
+	const isMobile = useWindowIsMobile();
+	const handleMouseOver = () => {
+		if (!isMobile && !hasHoveredGallery) setHasHoveredGallery(true);
+	};
+	const handleMobileInteraction = () => {
+		if (isMobile && !hasHoveredGallery) setHasHoveredGallery(true);
+	};
+	return {
+		containerRef,
+		contentRef,
+		handleMobileInteraction,
+		handleMouseOver,
+		hasHoveredGallery,
+		isMobile,
+		numberOfPages,
+		responsiveImageConfig,
+		setHasHoveredGallery
+	};
+};
+//#endregion
+//#region src/ImageSlider/ImageSlider.types.ts
+/**
+* Display mode for thumbnail navigation
+*/
+let ThumbnailDisplay = /* @__PURE__ */ function(ThumbnailDisplay) {
+	ThumbnailDisplay["Index"] = "index";
+	ThumbnailDisplay["Thumbnails"] = "thumbnails";
+	return ThumbnailDisplay;
+}({});
+const CAROUSEL_CARD_GAP_NUM = 24;
+//#endregion
+//#region src/ImageSlider/hooks/useImageSliderNavigation.ts
+/**
+* Hook for managing navigation state and handlers in the ImageSlider.
+* Implements wraparound navigation where clicking previous on the first image
+* jumps to the last image, and clicking next on the last image jumps to the first.
+* @param props - Navigation configuration
+* @returns Navigation state and handlers
+*/
+const useImageSliderNavigation = ({ contentKey, contentRef, isScrolling, numberOfPages, setHasHoveredGallery, thumbnailDisplay = "thumbnails", thumbnailOrientation = "vertical" }) => {
+	const [currentPage, setCurrentPage] = useState(1);
+	const showNavButtonsWithSingleImage = thumbnailOrientation === "horizontal" || thumbnailDisplay === "index";
+	const showPreviousPageButton = showNavButtonsWithSingleImage ? true : numberOfPages > 1;
+	const showNextPageButton = showNavButtonsWithSingleImage ? true : numberOfPages > 1;
+	const isPreviousPageDisabled = showNavButtonsWithSingleImage && numberOfPages <= 1;
+	const isNextPageDisabled = showNavButtonsWithSingleImage && numberOfPages <= 1;
+	const goToPreviousPage = useCallback(() => {
+		if (!isScrolling) {
+			setHasHoveredGallery(true);
+			if (currentPage > 1) setCurrentPage(currentPage - 1);
+			else setCurrentPage(numberOfPages);
+		}
+	}, [
+		currentPage,
+		numberOfPages,
+		isScrolling,
+		setCurrentPage,
+		setHasHoveredGallery
+	]);
+	const goToNextPage = useCallback(() => {
+		if (!isScrolling) {
+			setHasHoveredGallery(true);
+			if (currentPage < numberOfPages) setCurrentPage(currentPage + 1);
+			else setCurrentPage(1);
+		}
+	}, [
+		currentPage,
+		numberOfPages,
+		isScrolling,
+		setCurrentPage,
+		setHasHoveredGallery
+	]);
+	const handleThumbnailClick = useCallback((pageNumber) => {
+		if (!isScrolling) {
+			setHasHoveredGallery(true);
+			setCurrentPage(pageNumber);
+		}
+	}, [
+		isScrolling,
+		setCurrentPage,
+		setHasHoveredGallery
+	]);
+	/**
+	* Handles keyboard navigation for the slider.
+	* Allows using Left and Right arrow keys to navigate between images.
+	*/
+	const onKeyNavigation = useCallback((event) => {
+		if (event.key === "ArrowRight") goToNextPage();
+		else if (event.key === "ArrowLeft") goToPreviousPage();
+	}, [goToNextPage, goToPreviousPage]);
+	useEffect(() => {
+		setCurrentPage(1);
+		setHasHoveredGallery(false);
+		if (contentRef.current && typeof contentRef.current.scrollTo === "function") contentRef.current.scrollTo({
+			behavior: "instant",
+			left: 0
+		});
+	}, [
+		contentKey,
+		contentRef,
+		setHasHoveredGallery
+	]);
+	return {
+		currentPage,
+		goToNextPage,
+		goToPreviousPage,
+		handleThumbnailClick,
+		isNextPageDisabled,
+		isPreviousPageDisabled,
+		onKeyNavigation,
+		setCurrentPage,
+		showNextPageButton,
+		showPreviousPageButton
+	};
+};
+//#endregion
+//#region src/ImageSlider/hooks/useImageSliderScrollHandler.ts
+/**
+* Hook for managing scroll behavior and page tracking in the ImageSlider
+* @param props - Scroll handler configuration
+* @returns Scroll handlers and scrolling state
+*/
+const useImageSliderScrollHandler = ({ contentRef, currentPage, maxMobileCardWidth = MOBILE_CARD.MAX_WIDTH, numberOfPages, setCurrentPage, setIsScrolling }) => {
+	const [internalIsScrolling, setInternalIsScrolling] = useState(false);
+	const isScrollingState = setIsScrolling ? internalIsScrolling : false;
+	const isMobile = useWindowIsMobile();
+	const previousPageRef = useRef(currentPage);
+	useEffect(() => {
+		if (contentRef.current) {
+			if (isMobile) return;
+			const pageChanged = previousPageRef.current !== currentPage;
+			if (setIsScrolling) setIsScrolling(true);
+			else setInternalIsScrolling(true);
+			const containerWidth = contentRef.current.offsetWidth;
+			const gap = SPACING.GAP_MD;
+			const scrollPosition = (currentPage - 1) * (containerWidth + gap);
+			contentRef.current.scrollTo({
+				behavior: pageChanged ? "smooth" : "auto",
+				left: scrollPosition
+			});
+			const scrollTimeout = setTimeout(() => {
+				if (setIsScrolling) setIsScrolling(false);
+				else setInternalIsScrolling(false);
+			}, ANIMATION.SCROLL_TIMEOUT);
+			previousPageRef.current = currentPage;
+			return () => {
+				clearTimeout(scrollTimeout);
+			};
+		}
+	}, [
+		currentPage,
+		contentRef,
+		setIsScrolling,
+		isMobile
+	]);
+	/**
+	* Memoized debounced scroll handler for desktop scroll tracking.
+	* Updates the current page when user scrolls to reflect active thumbnail.
+	*/
+	const debouncedDesktopScrollHandler = useMemo(() => debounce(() => {
+		if (contentRef.current && !isMobile) {
+			const scrollLeft = contentRef.current.scrollLeft;
+			const containerWidth = contentRef.current.offsetWidth;
+			const gap = SPACING.GAP_MD;
+			const newPage = Math.round(scrollLeft / (containerWidth + gap)) + 1;
+			if (newPage !== currentPage && newPage >= 1 && newPage <= numberOfPages) setCurrentPage(newPage);
+		}
+	}, ANIMATION.DEBOUNCE_DELAY), [
+		currentPage,
+		numberOfPages,
+		contentRef,
+		setCurrentPage,
+		isMobile
+	]);
+	/**
+	* Memoized debounced scroll handler for mobile scroll tracking.
+	* Updates the current page based on mobile card layout with gaps and margins.
+	*/
+	const debouncedMobileScrollHandler = useMemo(() => debounce(() => {
+		if (contentRef.current && isMobile) {
+			const { clientWidth, scrollLeft, scrollWidth } = contentRef.current;
+			const maxScroll = scrollWidth - clientWidth;
+			if (scrollLeft < 0) contentRef.current.scrollLeft = 0;
+			else if (scrollLeft > maxScroll) contentRef.current.scrollLeft = maxScroll;
+			const gap = SPACING.GAP_2XS;
+			const margin = SPACING.MARGIN_SM;
+			const cardWithGap = Math.min(clientWidth - MOBILE_CARD.WIDTH_REDUCTION, maxMobileCardWidth) + gap;
+			const adjustedScrollLeft = scrollLeft + margin;
+			const newPage = Math.round(adjustedScrollLeft / cardWithGap) + 1;
+			if (newPage !== currentPage && newPage >= 1 && newPage <= numberOfPages) setCurrentPage(newPage);
+		}
+	}, ANIMATION.DEBOUNCE_DELAY), [
+		currentPage,
+		maxMobileCardWidth,
+		numberOfPages,
+		contentRef,
+		setCurrentPage,
+		isMobile
+	]);
+	return {
+		isScrolling: isScrollingState,
+		onScrollCards: useCallback(() => {
+			if (isMobile) debouncedMobileScrollHandler();
+			else debouncedDesktopScrollHandler();
+		}, [
+			isMobile,
+			debouncedMobileScrollHandler,
+			debouncedDesktopScrollHandler
+		])
+	};
+};
+//#endregion
+//#region src/ImageSlider/ImageSlider.tsx
+/**
+* Displays a single image at a time with navigation controls.
+* Allows navigation via buttons, dots (pagination), or touch gestures (on mobile).
+*/
+const DEFAULT_RESPONSIVE_CONFIG = {
+	breakpoint: 768,
+	desktopSize: 651,
+	mobileSize: 366
+};
+const ImageSlider = ({ cards: initialCards, className, contentKey, iconShape = "circle", iconSize = "sm", iconType = "caret", iconVariant = "outlined", indexPosition = "bottom", onAnalyticsEventTriggered, onImageClick, onImageMouseOver, responsiveImageConfig = DEFAULT_RESPONSIVE_CONFIG, showThumbnails = true, thumbnailDisplay = "thumbnails", thumbnailOrientation = "vertical" }) => {
+	const cards = useMemo(() => {
+		if (initialCards.length === 0) return PLACEHOLDER_EMPTY_CARDS;
+		return initialCards;
+	}, [initialCards]);
+	const numberOfPages = cards.length;
+	const { containerRef, contentRef, handleMobileInteraction, handleMouseOver, hasHoveredGallery, isMobile, setHasHoveredGallery } = useImageSlider({
+		numberOfPages,
+		responsiveImageConfig
+	});
+	const [isScrolling, setIsScrolling] = useState(false);
+	const navigation = useImageSliderNavigation({
+		cards,
+		contentKey,
+		contentRef,
+		isScrolling,
+		numberOfPages,
+		setHasHoveredGallery,
+		thumbnailDisplay,
+		thumbnailOrientation
+	});
+	const { onScrollCards } = useImageSliderScrollHandler({
+		contentRef,
+		currentPage: navigation.currentPage,
+		maxMobileCardWidth: responsiveImageConfig.desktopSize,
+		numberOfPages,
+		setCurrentPage: navigation.setCurrentPage,
+		setIsScrolling
+	});
+	const { currentPage, goToNextPage, goToPreviousPage, handleThumbnailClick, isNextPageDisabled, isPreviousPageDisabled, onKeyNavigation, showNextPageButton, showPreviousPageButton } = navigation;
+	const goToNextPageWithAnalytics = useCallback(() => {
+		goToNextPage();
+		onAnalyticsEventTriggered?.({
+			imagePosition: currentPage < numberOfPages ? currentPage + 1 : 1,
+			interactionType: "Next",
+			totalImages: numberOfPages
+		});
+	}, [
+		goToNextPage,
+		onAnalyticsEventTriggered,
+		currentPage,
+		numberOfPages
+	]);
+	const goToPreviousPageWithAnalytics = useCallback(() => {
+		goToPreviousPage();
+		onAnalyticsEventTriggered?.({
+			imagePosition: currentPage > 1 ? currentPage - 1 : numberOfPages,
+			interactionType: "Prev",
+			totalImages: numberOfPages
+		});
+	}, [
+		goToPreviousPage,
+		onAnalyticsEventTriggered,
+		currentPage,
+		numberOfPages
+	]);
+	const handleThumbnailClickWithAnalytics = useCallback((pageNumber) => {
+		if (pageNumber !== currentPage && onAnalyticsEventTriggered) onAnalyticsEventTriggered({
+			imagePosition: pageNumber,
+			interactionType: "Thumbnail Click",
+			totalImages: numberOfPages
+		});
+		handleThumbnailClick(pageNumber);
+	}, [
+		currentPage,
+		handleThumbnailClick,
+		onAnalyticsEventTriggered,
+		numberOfPages
+	]);
+	/**
+	* These images are wrapped in a div and displayed one at a time with proper snap behavior.
+	* When showImageOverflow is enabled on mobile, images take partial width to show overflow.
+	* Supports both custom ReactNode cards and responsive imageData.
+	* Images are re-rendered when currentPage changes to ensure active image gets full quality.
+	*
+	* On desktop before hover: Only render first image to avoid loading second image unnecessarily.
+	* On mobile: Always render all images for swipe functionality.
+	* After hover on desktop: Render all images for navigation.
+	*/
+	const carouselCards = useMemo(() => {
+		return (!isMobile && !hasHoveredGallery ? cards.slice(0, 1) : cards).map(({ card, imageData, key }, index) => {
+			const actualIndex = !isMobile && !hasHoveredGallery ? 0 : index;
+			const isActive = actualIndex + 1 === currentPage;
+			return /* @__PURE__ */ jsx("div", {
+				"aria-current": isActive ? "true" : "false",
+				"aria-label": `Image ${actualIndex + 1} of ${cards.length}${imageData?.alt ? `: ${imageData.alt}` : ""}`,
+				className: cn("flex w-full flex-none snap-center items-center justify-center bg-background-primary", onImageClick ? "cursor-zoom-in" : "cursor-default", "smMin:h-full", "xsMax:aspect-square xsMax:max-h-[var(--slider-size)] xsMax:max-w-[var(--slider-size)] xsMax:overflow-hidden xsMax:rounded-lg xsMax:border xsMax:border-border-secondary", numberOfPages > 1 ? "xsMax:w-[calc(100%-64px)] xsMax:max-w-[var(--slider-size)]" : "xsMax:w-full xsMax:max-w-[var(--slider-size)]", {
+					"ml-sm": actualIndex === 0,
+					"mr-sm": actualIndex === cards.length - 1
+				}),
+				onClick: (event) => {
+					handleMobileInteraction();
+					if (onAnalyticsEventTriggered) onAnalyticsEventTriggered({
+						imagePosition: actualIndex + 1,
+						interactionType: "Open Lightbox",
+						totalImages: numberOfPages
+					});
+					onImageClick?.(actualIndex, event);
+				},
+				onFocus: (event) => {
+					handleMobileInteraction();
+					onImageMouseOver?.(actualIndex, event);
+				},
+				onKeyUp: onImageClick ? (event) => {
+					if (event.key === "Enter" || event.key === " ") {
+						event.preventDefault();
+						if (onAnalyticsEventTriggered) onAnalyticsEventTriggered({
+							imagePosition: actualIndex + 1,
+							interactionType: "Open Lightbox",
+							totalImages: numberOfPages
+						});
+						if (event.key === "Enter") onImageClick(actualIndex, event);
+					}
+				} : void 0,
+				onMouseOver: (event) => {
+					handleMouseOver();
+					if (onImageMouseOver) onImageMouseOver(actualIndex, event);
+				},
+				onTouchStart: () => {
+					handleMobileInteraction();
+				},
+				role: onImageClick ? "button" : void 0,
+				tabIndex: onImageClick ? 0 : void 0,
+				children: imageData ? /* @__PURE__ */ jsx(ResponsiveImage, {
+					hasHoveredGallery,
+					imageData,
+					isActiveImage: isActive,
+					isMainImage: true,
+					responsiveImageConfig
+				}) : card || null
+			}, key);
+		});
+	}, [
+		cards,
+		currentPage,
+		handleMobileInteraction,
+		handleMouseOver,
+		hasHoveredGallery,
+		isMobile,
+		numberOfPages,
+		onAnalyticsEventTriggered,
+		onImageClick,
+		onImageMouseOver,
+		responsiveImageConfig
+	]);
+	const isIndexDisplay = thumbnailDisplay === "index";
+	const isHorizontalThumbnailsDisplay = thumbnailDisplay === "thumbnails" && thumbnailOrientation === "horizontal";
+	return /* @__PURE__ */ jsx("section", {
+		"aria-label": "Image gallery",
+		"aria-roledescription": "carousel",
+		className: cn("relative mx-auto w-full pr-lg outline-none smMax:pr-0", { "xsMax:-ml-sm xsMax:w-[calc(100%+32px)]": numberOfPages > 1 }, className),
+		onClick: () => containerRef.current?.focus(),
+		onKeyUp: onKeyNavigation,
+		onMouseOver: handleMouseOver,
+		ref: containerRef,
+		role: "application",
+		style: { "--slider-size": `${responsiveImageConfig.desktopSize}px` },
+		tabIndex: 0,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex flex-col", "gap-[58px] mdMax:gap-xl smMax:gap-[38px] xsMax:gap-[28px]"),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("flex w-full", thumbnailDisplay === "index" ? "flex-col items-center justify-center gap-2xs" : thumbnailOrientation === "horizontal" ? "flex-col items-center justify-center gap-xs" : "relative items-center justify-center gap-[28px]"),
+				children: [
+					thumbnailDisplay === "index" && indexPosition === "top" && /* @__PURE__ */ jsx(IndexIndicator, {
+						currentPage,
+						numberOfPages
+					}),
+					showThumbnails && thumbnailDisplay === "thumbnails" && thumbnailOrientation === "vertical" && /* @__PURE__ */ jsx("div", {
+						className: "absolute bottom-0 left-0 top-0 z-10 xsMax:hidden",
+						children: /* @__PURE__ */ jsx(Thumbnails, {
+							cards,
+							currentPage,
+							generateThumbnailSizesAttribute,
+							generateThumbnailSrcSet,
+							onThumbnailClick: handleThumbnailClickWithAnalytics,
+							orientation: "vertical"
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("flex items-center", isIndexDisplay ? "relative w-full justify-center gap-md smMin:max-w-[780px] xsMax:w-full" : isHorizontalThumbnailsDisplay ? "max-w-[606px] gap-md xsMax:w-full" : cn("w-full justify-between gap-sm", showThumbnails ? "pl-[146px] mdMax:pl-[139px] xsMax:pl-0" : "")),
+						"data-testid": "image-slider-hero-controls",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "hidden smMin:block",
+								children: /* @__PURE__ */ jsx(NavigationButtons, {
+									goToNextPage: goToNextPageWithAnalytics,
+									goToPreviousPage: goToPreviousPageWithAnalytics,
+									iconShape,
+									iconSize,
+									iconType,
+									iconVariant,
+									isNextPageDisabled,
+									isPreviousPageDisabled,
+									position: "left",
+									showNextPageButton,
+									showPreviousPageButton
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: cn("relative", isIndexDisplay ? "max-h-[var(--slider-size)] smMin:flex smMin:aspect-square smMin:max-w-[var(--slider-size)] smMin:flex-1 smMin:justify-center smMin:overflow-hidden xsMax:w-full" : isHorizontalThumbnailsDisplay ? "max-h-[400px] smMin:flex smMin:aspect-square smMin:max-w-[400px] smMin:flex-1 smMin:justify-center smMin:overflow-hidden xsMax:w-full" : "max-h-[var(--slider-size)] smMin:flex smMin:aspect-square smMin:max-w-[var(--slider-size)] smMin:flex-1 smMin:justify-center smMin:overflow-hidden xsMax:w-full"),
+								"data-testid": "image-slider-media-frame",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "smMin:hidden",
+									children: /* @__PURE__ */ jsx(NavigationButtons, {
+										goToNextPage: goToNextPageWithAnalytics,
+										goToPreviousPage: goToPreviousPageWithAnalytics,
+										iconShape,
+										iconSize,
+										iconType,
+										iconVariant,
+										isNextPageDisabled,
+										isPreviousPageDisabled,
+										showNextPageButton,
+										showPreviousPageButton
+									})
+								}), /* @__PURE__ */ jsx("div", {
+									className: cn("w-full bg-background-primary", "smMin:h-full smMin:overflow-hidden"),
+									children: /* @__PURE__ */ jsx("div", {
+										"aria-atomic": "false",
+										"aria-live": "polite",
+										className: cn("flex w-full snap-x snap-mandatory overflow-y-hidden overflow-x-scroll", "smMin:h-full smMin:gap-md", "xsMax:gap-2xs"),
+										onScroll: onScrollCards,
+										ref: contentRef,
+										role: "region",
+										style: { scrollbarWidth: "none" },
+										children: carouselCards
+									})
+								})]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "hidden smMin:block",
+								children: /* @__PURE__ */ jsx(NavigationButtons, {
+									goToNextPage: goToNextPageWithAnalytics,
+									goToPreviousPage: goToPreviousPageWithAnalytics,
+									iconShape,
+									iconSize,
+									iconType,
+									iconVariant,
+									isNextPageDisabled,
+									isPreviousPageDisabled,
+									position: "right",
+									showNextPageButton,
+									showPreviousPageButton
+								})
+							})
+						]
+					}),
+					showThumbnails && thumbnailDisplay === "thumbnails" && thumbnailOrientation === "horizontal" && /* @__PURE__ */ jsx("div", {
+						className: "w-full xsMax:hidden",
+						children: /* @__PURE__ */ jsx(Thumbnails, {
+							cards,
+							currentPage,
+							generateThumbnailSizesAttribute,
+							generateThumbnailSrcSet,
+							onThumbnailClick: handleThumbnailClickWithAnalytics,
+							orientation: "horizontal"
+						})
+					}),
+					thumbnailDisplay === "index" && indexPosition === "bottom" && /* @__PURE__ */ jsx(IndexIndicator, {
+						currentPage,
+						numberOfPages
+					})
+				]
+			})
+		})
+	});
+};
+//#endregion
+export { Thumbnails as i, CAROUSEL_CARD_GAP_NUM as n, ThumbnailDisplay as r, ImageSlider as t };
+
+//# sourceMappingURL=ImageSlider-CDrg_TbL.mjs.map