@evolve.ui/core-components 1.0.0

package/ImageSlider-BidXfnLj.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSlider-BidXfnLj.cjs","names":["ArrowLeft","CaretLeft","ArrowRight","CaretRight","IconButton","spacing","placeholderImage","useHighQuality","useWindowIsMobile","useWindowIsMobile"],"sources":["../src/ImageSlider/components/IndexIndicator/IndexIndicator.tsx","../src/ImageSlider/components/NavigationButtons/NavigationButtons.tsx","../src/ImageSlider/assets/placeholder.svg","../src/ImageSlider/constants.ts","../src/ImageSlider/utils/imageOptimization.ts","../src/ImageSlider/components/ResponsiveImage/ResponsiveImage.tsx","../src/ImageSlider/components/Thumbnails/Thumbnails.tsx","../src/ImageSlider/hooks/useImageSlider.ts","../src/ImageSlider/ImageSlider.types.ts","../src/ImageSlider/hooks/useImageSliderNavigation.ts","../src/ImageSlider/hooks/useImageSliderScrollHandler.ts","../src/ImageSlider/ImageSlider.tsx"],"sourcesContent":["type Props = {\n    /** Currently active page number (1-based) */\n    currentPage: number;\n    /** Total number of pages/images */\n    numberOfPages: number;\n};\n\n/**\n * Displays a numeric index indicator (e.g., \"1 of 11\") for image gallery position.\n * Used when thumbnailDisplay is 'index' instead of image thumbnails.\n */\nexport const IndexIndicator = ({ currentPage, numberOfPages }: Props) => (\n    <div\n        aria-label={`Image ${currentPage} of ${numberOfPages}`}\n        aria-live=\"polite\"\n        className=\"hui-text-caption flex justify-center text-text-secondary\"\n        role=\"status\"\n    >\n        {currentPage} of {numberOfPages}\n    </div>\n);\n","import { cn } from '@evolve.ui/theme-system';\n\nimport { IconButton } from '../../../IconButton/IconButton';\nimport { ArrowLeft, ArrowRight, CaretLeft, CaretRight } from '../../../Icons';\n\ntype Props = {\n    goToNextPage: () => void;\n    goToPreviousPage: () => void;\n    /** Shape of the navigation icons */\n    iconShape?: 'circle' | 'square';\n    /** Size of the navigation icons - sm=34px, md=42px, lg=54px */\n    iconSize?: 'sm' | 'md' | 'lg';\n    /** Type of icons to use for navigation */\n    iconType?: 'caret' | 'arrow';\n    /** Variant of the navigation icons */\n    iconVariant?: 'outlined' | 'transparent';\n    /** Whether the next button should be disabled */\n    isNextPageDisabled?: boolean;\n    /** Whether the previous button should be disabled */\n    isPreviousPageDisabled?: boolean;\n    /** For grid layout - which position this button should render (left or right) */\n    position?: 'left' | 'right';\n    showNextPageButton: boolean;\n    showPreviousPageButton: boolean;\n};\n\nexport const NavigationButtons = ({\n    goToNextPage,\n    goToPreviousPage,\n    iconShape = 'circle',\n    iconSize = 'sm',\n    iconType = 'caret',\n    iconVariant = 'outlined',\n    isNextPageDisabled = false,\n    isPreviousPageDisabled = false,\n    position,\n    showNextPageButton,\n    showPreviousPageButton,\n}: Props) => {\n    // Choose the correct icons based on iconType prop\n    const LeftIcon = iconType === 'arrow' ? ArrowLeft : CaretLeft;\n    const RightIcon = iconType === 'arrow' ? ArrowRight : CaretRight;\n\n    // For grid layout with outside positioning, render individual buttons\n    if (position) {\n        if (position === 'left') {\n            return showPreviousPageButton ? (\n                <IconButton\n                    aria-label=\"Previous Page\"\n                    className=\"xsMax:hidden\"\n                    disabled={isPreviousPageDisabled}\n                    hideTooltip\n                    icon={LeftIcon}\n                    onClick={goToPreviousPage}\n                    shape={iconShape}\n                    size={iconSize}\n                    variant={iconVariant}\n                />\n            ) : null;\n        }\n\n        // position === 'right'\n        return showNextPageButton ? (\n            <IconButton\n                aria-label=\"Next Page\"\n                className=\"xsMax:hidden\"\n                disabled={isNextPageDisabled}\n                hideTooltip\n                icon={RightIcon}\n                onClick={goToNextPage}\n                shape={iconShape}\n                size={iconSize}\n                variant={iconVariant}\n            />\n        ) : null;\n    }\n\n    // Original layout for inside positioning or non-grid layouts\n    // For inside positioning: calculate from the top to put the button halfway down its parent relative to its own center.\n    // this will break if the size of the IconButton is ever changed,\n    const positionStyles = cn('absolute top-[calc(50%-21px)] w-full');\n\n    return (\n        <div className=\"z-10\">\n            {showPreviousPageButton && (\n                <IconButton\n                    aria-label=\"Previous Page\"\n                    className={cn(positionStyles, 'left-sm', 'xsMax:hidden')}\n                    disabled={isPreviousPageDisabled}\n                    hideTooltip\n                    icon={LeftIcon}\n                    onClick={goToPreviousPage}\n                    shape={iconShape}\n                    size={iconSize}\n                    variant={iconVariant}\n                />\n            )}\n            {showNextPageButton && (\n                <IconButton\n                    aria-label=\"Next Page\"\n                    className={cn(positionStyles, 'right-sm', 'xsMax:hidden')}\n                    disabled={isNextPageDisabled}\n                    hideTooltip\n                    icon={RightIcon}\n                    onClick={goToNextPage}\n                    shape={iconShape}\n                    size={iconSize}\n                    variant={iconVariant}\n                />\n            )}\n        </div>\n    );\n};\n","\"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\"","import { spacing } from '@evolve.ui/theme-system/themes/common';\n\nimport placeholderImage from './assets/placeholder.svg';\nimport { ImageSliderCard } from './ImageSlider.types';\n\n/**\n * Constants used throughout the ImageSlider component\n */\n\n// Breakpoints\nexport const MOBILE_BREAKPOINT = 768;\nexport const MOBILE_BREAKPOINT_QUERY = `(max-width: ${MOBILE_BREAKPOINT}px)`;\n\n// Spacing values (use design tokens)\nexport const SPACING = {\n    GAP_2XS: spacing.xxsValue, // gap-2xs (4px)\n    GAP_MD: spacing.mdValue, // gap-md (24px)\n    MARGIN_SM: spacing.smValue, // ml-sm, mr-sm (16px)\n} as const;\n\n// Thumbnail dimensions\nexport const THUMBNAIL = {\n    QUALITY: 50, // Thumbnail quality setting\n    SIZE: 111, // Fixed thumbnail size\n    WIDTH_PARAM: 107, // URL width parameter for thumbnails\n} as const;\n\n// Mobile card dimensions\nexport const MOBILE_CARD = {\n    MAX_WIDTH: 651, // Max card width\n    WIDTH_REDUCTION: 64, // calc(100% - 64px) to match container extension for optimal bleed effect\n} as const;\n\n// Animation timings\nexport const ANIMATION = {\n    DEBOUNCE_DELAY: 100, // Scroll handler debounce delay\n    SCROLL_TIMEOUT: 300, // Smooth scroll animation duration\n} as const;\n\n// Navigation button positioning\nexport const NAVIGATION = {\n    INSIDE_TOP_OFFSET: 21, // top-[calc(50%-21px)]\n    OUTSIDE_TOP_OFFSET: 17, // top-[calc(50%-17px)]\n} as const;\n\n// Bundled brand-neutral fallback (inlined as a data URI at build time) — the image-error\n// fallback must never depend on an external CDN.\nexport const PLACEHOLDER_IMAGE_URL = placeholderImage;\n\nexport const PLACEHOLDER_EMPTY_CARDS: ImageSliderCard[] = [\n    {\n        imageData: {\n            alt: 'Placeholder empty card',\n            baseUrl: PLACEHOLDER_IMAGE_URL,\n            title: 'Placeholder empty card',\n        },\n        key: 'placeholder-empty-card-1',\n    },\n];\n","import { THUMBNAIL } from '../constants';\nimport { ResponsiveImageConfig } from '../ImageSlider.types';\n\n/**\n * Generates a srcSet string for main images with responsive breakpoints\n * @param baseUrl - The base URL of the image\n * @param config - Responsive image configuration\n * @param useHighQuality - Whether to use high quality mode (no width constraints)\n * @returns The srcSet string for the image\n */\nexport const generateMainImageSrcSet = (\n    baseUrl: string,\n    config: ResponsiveImageConfig,\n    useHighQuality: boolean = false\n): string => {\n    // If high quality mode is enabled (after hover), return empty string\n    // This forces the browser to use only the src attribute (full quality)\n    // avoiding intermediate 651px requests\n    if (useHighQuality) {\n        return '';\n    }\n\n    const { desktopSize, mobileSize } = config;\n    const widths = [mobileSize, desktopSize];\n\n    return widths\n        .map((width) => {\n            return `${baseUrl}&width=${width} ${width}w`;\n        })\n        .join(', ');\n};\n\n/**\n * Generates a srcSet string for thumbnail images\n * @param baseUrl - The base URL of the image\n * @returns The srcSet string for the thumbnail\n */\nexport const generateThumbnailSrcSet = (baseUrl: string): string => {\n    return `${baseUrl}&width=${THUMBNAIL.WIDTH_PARAM} ${THUMBNAIL.WIDTH_PARAM}w`;\n};\n\n/**\n * Generates the sizes attribute for responsive images\n * @param config - Responsive image configuration\n * @param useHighQuality - Whether to use high quality mode\n * @returns The sizes attribute string\n */\nexport const generateSizesAttribute = (config: ResponsiveImageConfig, useHighQuality: boolean = false): string => {\n    // If high quality mode is enabled (after hover), sizes attribute is not needed\n    // since we're using empty srcSet and relying only on src attribute\n    if (useHighQuality) {\n        return '';\n    }\n\n    const { breakpoint, desktopSize, mobileSize } = config;\n    // Use a much smaller size on mobile to force selection of 366w image even on high-DPR devices\n    const adjustedMobileSize = Math.floor(mobileSize / 3); // ~122px, ensuring 366w is selected even at DPR 3.0\n    return `(max-width: ${breakpoint}px) ${adjustedMobileSize}px, ${desktopSize}px`;\n};\n\n// Memoized thumbnail sizes attribute (static value)\nconst THUMBNAIL_SIZES_ATTRIBUTE = `${THUMBNAIL.WIDTH_PARAM}px`;\n\n/**\n * Generates the sizes attribute for thumbnail images\n * @returns The sizes attribute string for thumbnails\n */\nexport const generateThumbnailSizesAttribute = (): string => {\n    return THUMBNAIL_SIZES_ATTRIBUTE;\n};\n\n/**\n * Gets the appropriate image source URL based on quality mode\n * @param baseUrl - The base URL of the image\n * @param config - Responsive image configuration\n * @param useHighQuality - Whether to use high quality mode\n * @returns The appropriate source URL\n */\nexport const getImageSrc = (\n    baseUrl: string,\n    config: ResponsiveImageConfig,\n    useHighQuality: boolean = false\n): string => {\n    if (useHighQuality) {\n        return baseUrl;\n    }\n    return `${baseUrl}&width=${config.mobileSize}`;\n};\n\n/**\n * Gets the thumbnail image source URL\n * @param baseUrl - The base URL of the image\n * @returns The thumbnail source URL\n */\nexport const getThumbnailSrc = (baseUrl: string): string => {\n    return `${baseUrl}&width=${THUMBNAIL.WIDTH_PARAM}`;\n};\n","import { PLACEHOLDER_IMAGE_URL } from '../../constants';\nimport { ResponsiveImageConfig, ResponsiveImageData } from '../../ImageSlider.types';\nimport {\n    generateMainImageSrcSet,\n    generateSizesAttribute,\n    generateThumbnailSizesAttribute,\n    generateThumbnailSrcSet,\n    getImageSrc,\n    getThumbnailSrc,\n} from '../../utils/imageOptimization';\n\n/**\n * Props for the ResponsiveImage component\n */\ntype Props = {\n    /** Additional CSS classes */\n    className?: string;\n    /** Whether the gallery has been hovered (for quality optimization) */\n    hasHoveredGallery?: boolean;\n    /** Image data containing alt, baseUrl, and title */\n    imageData: ResponsiveImageData;\n    /** Whether this image is currently active/visible */\n    isActiveImage?: boolean;\n    /** Whether this is a main image (not a thumbnail) */\n    isMainImage?: boolean;\n    /** Responsive image configuration */\n    responsiveImageConfig?: ResponsiveImageConfig;\n};\n\n/**\n * Renders a responsive image with optimized loading priorities and srcSet\n */\nexport const ResponsiveImage = ({\n    className,\n    hasHoveredGallery = false,\n    imageData,\n    isActiveImage = false,\n    isMainImage = true,\n    responsiveImageConfig,\n}: Props) => {\n    const { alt, baseUrl, title } = imageData;\n\n    if (!responsiveImageConfig) {\n        // Fallback to simple image if no config provided\n        return (\n            <img\n                alt={alt}\n                className={className}\n                onError={(e) => {\n                    const target = e.target as HTMLImageElement;\n                    if (target.src !== PLACEHOLDER_IMAGE_URL) {\n                        target.src = PLACEHOLDER_IMAGE_URL;\n                    }\n                }}\n                src={baseUrl}\n                title={title}\n            />\n        );\n    }\n\n    if (isMainImage) {\n        // Use high quality mode for all images once gallery has been hovered\n        const useHighQuality = hasHoveredGallery;\n\n        // Only use high quality URLs/srcSet after gallery has been hovered\n        // Active images get high priority/eager loading but still use responsive srcSet initially\n        const shouldLoadHighQuality = useHighQuality;\n\n        return (\n            <img\n                alt={alt}\n                className=\"h-full w-full bg-background-primary object-contain\"\n                fetchPriority={isActiveImage || shouldLoadHighQuality ? 'high' : 'low'}\n                // Force React to create a new img element when switching to high quality\n                // This prevents the browser from loading both constrained and unconstrained versions\n                key={shouldLoadHighQuality && !isActiveImage ? 'high-quality' : 'standard-quality'}\n                loading={isActiveImage || shouldLoadHighQuality ? 'eager' : 'lazy'}\n                onError={(e) => {\n                    const target = e.target as HTMLImageElement;\n                    if (target.src !== PLACEHOLDER_IMAGE_URL) {\n                        target.src = PLACEHOLDER_IMAGE_URL;\n                        // Clear srcSet to prevent fallback to other sizes that might also fail\n                        target.srcset = '';\n                    }\n                }}\n                sizes={generateSizesAttribute(responsiveImageConfig, shouldLoadHighQuality)}\n                src={getImageSrc(baseUrl, responsiveImageConfig, shouldLoadHighQuality)}\n                srcSet={generateMainImageSrcSet(baseUrl, responsiveImageConfig, shouldLoadHighQuality)}\n                title={title}\n            />\n        );\n    }\n\n    // Thumbnail image - responsive sizes\n    return (\n        <img\n            alt={alt}\n            className=\"h-full max-h-[111px] w-full max-w-[111px] object-cover\"\n            loading=\"lazy\"\n            onError={(e) => {\n                const target = e.target as HTMLImageElement;\n                if (target.src !== PLACEHOLDER_IMAGE_URL) {\n                    target.src = PLACEHOLDER_IMAGE_URL;\n                    // Clear srcSet to prevent fallback to other sizes that might also fail\n                    target.srcset = '';\n                }\n            }}\n            sizes={generateThumbnailSizesAttribute()}\n            src={getThumbnailSrc(baseUrl)}\n            srcSet={generateThumbnailSrcSet(baseUrl)}\n            title={title}\n        />\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { PLACEHOLDER_IMAGE_URL, THUMBNAIL } from '../../constants';\nimport { ImageSliderCard, ResponsiveImageData } from '../../ImageSlider.types';\n\n/**\n * Props for the Thumbnails component\n */\ntype Props = {\n    /** Array of image cards to display as thumbnails */\n    cards: ImageSliderCard[];\n    /** Currently active page number (1-based) */\n    currentPage: number;\n    /** Function to generate responsive thumbnail sizes attribute */\n    generateThumbnailSizesAttribute: () => string;\n    /** Function to generate responsive thumbnail srcSet */\n    generateThumbnailSrcSet: (baseUrl: string) => string;\n    /** Callback fired when a thumbnail is clicked */\n    onThumbnailClick: (pageNumber: number) => void;\n    /** Orientation of the thumbnail previews */\n    orientation: 'vertical' | 'horizontal';\n};\n\n/**\n * Thumbnails component displays clickable thumbnail previews for image navigation.\n * Supports both vertical and horizontal orientations with consistent 111px sizing across all viewports.\n */\nexport const Thumbnails = ({\n    cards,\n    currentPage,\n    generateThumbnailSizesAttribute,\n    generateThumbnailSrcSet,\n    onThumbnailClick,\n    orientation,\n}: Props) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const thumbnailRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const previousPageRef = useRef<number>(currentPage);\n\n    // Initialize refs array to match cards length - more efficient approach\n    useEffect(() => {\n        // Only resize if length changed, don't create new array unnecessarily\n        if (thumbnailRefs.current.length !== cards.length) {\n            thumbnailRefs.current.length = cards.length;\n        }\n    }, [cards.length]);\n\n    // Helper function to modify baseUrl query parameters for quality and sharpening\n    // Memoized to avoid repeated URL object creation\n    const enhanceBaseUrl = useCallback((baseUrl: string) => {\n        // Use string manipulation instead of URL constructor for better performance\n        const hasParams = baseUrl.includes('?');\n        const separator = hasParams ? '&' : '?';\n        return `${baseUrl}${separator}quality=${THUMBNAIL.QUALITY}&sharpen=false`;\n    }, []);\n\n    // Helper function to render thumbnail images with low fetch priority\n    const renderThumbnailImage = useCallback(\n        (imageData: ResponsiveImageData, index: number, thumbnailSize: number) => {\n            const { alt, baseUrl, title } = imageData;\n            const enhancedBaseUrl = enhanceBaseUrl(baseUrl);\n            return (\n                <img\n                    alt={alt}\n                    className={`h-full max-h-[${thumbnailSize}px] w-full max-w-[${thumbnailSize}px] bg-background-primary object-contain`}\n                    fetchPriority={index <= 5 ? 'high' : 'low'}\n                    loading={index <= 5 ? 'eager' : 'lazy'}\n                    onError={(e) => {\n                        const target = e.target as HTMLImageElement;\n                        if (target.src !== PLACEHOLDER_IMAGE_URL) {\n                            target.src = PLACEHOLDER_IMAGE_URL;\n                            // Clear srcSet to prevent fallback to other sizes that might also fail\n                            target.srcset = '';\n                        }\n                    }}\n                    sizes={generateThumbnailSizesAttribute()}\n                    src={`${enhancedBaseUrl}&width=${thumbnailSize}`} // Fallback for browsers without srcSet support\n                    srcSet={generateThumbnailSrcSet(enhancedBaseUrl)}\n                    title={title}\n                />\n            );\n        },\n        [generateThumbnailSrcSet, generateThumbnailSizesAttribute, enhanceBaseUrl]\n    );\n\n    // Auto-scroll the active thumbnail into view when currentPage changes\n    // Only scroll if the page actually changed (not on mount or remount from mobile → desktop)\n    useEffect(() => {\n        const pageChanged = previousPageRef.current !== currentPage;\n\n        // Update the ref for next comparison\n        previousPageRef.current = currentPage;\n\n        // Only scroll if the page actually changed\n        if (!pageChanged) {\n            return;\n        }\n\n        const activeIndex = currentPage - 1;\n        const activeThumbnail = thumbnailRefs.current[activeIndex];\n\n        if (activeThumbnail && containerRef.current) {\n            activeThumbnail.scrollIntoView({\n                behavior: 'smooth',\n                block: 'nearest',\n                inline: 'center',\n            });\n        }\n    }, [currentPage, orientation]);\n\n    /**\n     * Creates thumbnail preview images that can be clicked to navigate to specific images.\n     * Supports both horizontal and vertical orientations with configurable size and dimming.\n     * Supports both custom ReactNode cards and responsive imageData.\n     */\n    const thumbnailPreviews = useMemo(() => {\n        const isHorizontal = orientation === 'horizontal';\n        const thumbnailSize = isHorizontal ? 48 : THUMBNAIL.SIZE;\n\n        return cards.map(({ card, imageData, key }, index) => {\n            const pageNumber = index + 1;\n            const isActive = currentPage === pageNumber;\n\n            return (\n                <button\n                    aria-current={isActive ? 'true' : 'false'}\n                    aria-label={`Go to image ${pageNumber}${imageData?.alt ? `: ${imageData.alt}` : ''}`}\n                    aria-selected={isActive}\n                    className={cn(\n                        'box-border flex-shrink-0 cursor-pointer overflow-hidden rounded-md transition-all duration-100',\n                        'hui-focus-visible-outline hover:opacity-80 focus:-outline-offset-4',\n                        `aspect-square h-[${thumbnailSize}px] w-[${thumbnailSize}px] max-h-[${thumbnailSize}px] max-w-[${thumbnailSize}px]`,\n                        // Use outline instead of border to avoid affecting box dimensions\n                        isActive\n                            ? 'opacity-100 outline outline-2 -outline-offset-2 outline-border-selected'\n                            : 'opacity-50 outline outline-1 -outline-offset-1 outline-border-secondary'\n                    )}\n                    data-active={isActive}\n                    data-page={pageNumber}\n                    key={key}\n                    onClick={() => onThumbnailClick(pageNumber)}\n                    ref={(el) => {\n                        thumbnailRefs.current[index] = el;\n                    }}\n                    role=\"tab\"\n                    style={{\n                        height: `${thumbnailSize}px`,\n                        maxHeight: `${thumbnailSize}px`,\n                        maxWidth: `${thumbnailSize}px`,\n                        width: `${thumbnailSize}px`,\n                    }}\n                    type=\"button\"\n                >\n                    <div className=\"h-full w-full bg-background-primary\">\n                        {/* Render responsive image if imageData is provided, otherwise use custom card */}\n                        {imageData ? renderThumbnailImage(imageData, index, thumbnailSize) : card}\n                    </div>\n                </button>\n            );\n        });\n    }, [cards, currentPage, onThumbnailClick, renderThumbnailImage, orientation]);\n\n    const isHorizontal = orientation === 'horizontal';\n\n    return (\n        <div\n            aria-label=\"Image thumbnails\"\n            className={cn(\n                'flex xsMax:hidden',\n                isHorizontal\n                    ? 'w-full flex-row justify-center overflow-x-auto overflow-y-hidden pb-2xs'\n                    : 'h-full w-[136px] flex-col overflow-y-auto overflow-x-hidden pr-2xs mdMax:w-[128px]'\n            )}\n            ref={containerRef}\n            role=\"tablist\"\n            style={{\n                scrollbarWidth: 'thin',\n            }}\n        >\n            <div className={cn('flex gap-xs', isHorizontal ? 'flex-row' : 'flex-col')}>{thumbnailPreviews}</div>\n        </div>\n    );\n};\n","import { useRef, useState } from 'react';\n\nimport { useWindowIsMobile } from '../../providers';\nimport { ResponsiveImageConfig } from '../ImageSlider.types';\n\n/**\n * Props for the useImageSlider hook\n */\ntype UseImageSliderProps = {\n    /** Number of cards/images in the slider */\n    numberOfPages: number;\n    /** Responsive image configuration */\n    responsiveImageConfig: ResponsiveImageConfig;\n};\n\n/**\n * Main hook for ImageSlider component that provides basic state and refs\n * Navigation and scroll handling are managed separately to avoid circular dependencies\n * @param props - ImageSlider configuration\n * @returns Basic state and handlers needed for the ImageSlider component\n */\nexport const useImageSlider = ({ numberOfPages, responsiveImageConfig }: UseImageSliderProps) => {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const [hasHoveredGallery, setHasHoveredGallery] = useState(false);\n    const isMobile = useWindowIsMobile();\n\n    const handleMouseOver = () => {\n        if (!isMobile && !hasHoveredGallery) {\n            setHasHoveredGallery(true);\n        }\n    };\n\n    const handleMobileInteraction = () => {\n        if (isMobile && !hasHoveredGallery) {\n            setHasHoveredGallery(true);\n        }\n    };\n\n    return {\n        // Refs\n        containerRef,\n        contentRef,\n\n        // Event handlers\n        handleMobileInteraction,\n        handleMouseOver,\n\n        // State\n        hasHoveredGallery,\n        isMobile,\n        numberOfPages,\n        responsiveImageConfig,\n        setHasHoveredGallery,\n    };\n};\n","import { ReactNode } from 'react';\n\n/**\n * Display mode for thumbnail navigation\n */\nexport enum ThumbnailDisplay {\n    Index = 'index',\n    Thumbnails = 'thumbnails',\n}\n\n/**\n * Analytics event data for ImageSlider interactions\n */\nexport type ImageSliderAnalyticsEvent = {\n    /** Current image position (1-based index) */\n    imagePosition: number;\n    /** Type of interaction that triggered the event */\n    interactionType: 'Thumbnail Click' | 'Next' | 'Prev' | 'Open Lightbox';\n    /** Total number of images in the slider */\n    totalImages: number;\n};\n\n/**\n * Responsive image data for optimized loading\n */\nexport type ResponsiveImageData = {\n    /**\n     * Alt text for the image\n     */\n    alt: string;\n    /**\n     * Base URL for the image (without width parameters)\n     */\n    baseUrl: string;\n    /**\n     * Optional title for the image\n     */\n    title?: string;\n};\n\n/**\n * Configuration for responsive image sizes and breakpoints\n */\nexport type ResponsiveImageConfig = {\n    /**\n     * Breakpoint width in pixels where mobile switches to desktop\n     * @default 768\n     */\n    breakpoint: number;\n    /**\n     * Desktop image width in pixels\n     * @default 651\n     */\n    desktopSize: number;\n    /**\n     * Mobile image width in pixels\n     * @default 366\n     */\n    mobileSize: number;\n};\n\n/**\n * Card for the ImageSlider - supports both custom ReactNode and responsive images\n */\nexport type ImageSliderCard = {\n    /**\n     * The rendered content of the card or image.\n     * Optional when using imageData.\n     */\n    card?: ReactNode;\n    /**\n     * Responsive image data for automatic srcset/sizes optimization.\n     * When provided, `card` will be ignored and an optimized <img> will be rendered.\n     * Optional when using custom card content.\n     */\n    imageData?: ResponsiveImageData;\n    /**\n     * The unique identifier for the card\n     */\n    key: string;\n};\n\nexport type ImageSliderPageInfo = {\n    breakpoints: number[];\n    cardsPerPage: number;\n    numberOfPages: number;\n};\n\n// this is the px size of the MD gap (kept for potential future use)\nexport const CAROUSEL_CARD_GAP_NUM = 24;\n","import { RefObject, useCallback, useEffect, useState } from 'react';\n\nimport { ImageSliderCard, ThumbnailDisplay } from '../ImageSlider.types';\n\n/**\n * Props for the useImageSliderNavigation hook\n */\ntype UseImageSliderNavigationProps = {\n    /** The cards in the slider */\n    cards: ImageSliderCard[];\n    /** Optional key to identify when content has changed (e.g., an item id) */\n    contentKey?: string | number;\n    /** Ref to the content container */\n    contentRef: RefObject<HTMLDivElement | null>;\n    /** Whether the slider is currently scrolling */\n    isScrolling: boolean;\n    /** Total number of pages/slides */\n    numberOfPages: number;\n    /** Function to reset the gallery hover state when content changes (new URL/different images) */\n    setHasHoveredGallery: (hasHovered: boolean) => void;\n    /** Display mode for navigation controls; 'index' uses same button visibility as horizontal */\n    thumbnailDisplay?: ThumbnailDisplay;\n    /** Orientation of the thumbnail previews */\n    thumbnailOrientation?: 'vertical' | 'horizontal';\n};\n\n/**\n * Hook for managing navigation state and handlers in the ImageSlider.\n * Implements wraparound navigation where clicking previous on the first image\n * jumps to the last image, and clicking next on the last image jumps to the first.\n * @param props - Navigation configuration\n * @returns Navigation state and handlers\n */\nexport const useImageSliderNavigation = ({\n    contentKey,\n    contentRef,\n    isScrolling,\n    numberOfPages,\n    setHasHoveredGallery,\n    thumbnailDisplay = ThumbnailDisplay.Thumbnails,\n    thumbnailOrientation = 'vertical',\n}: UseImageSliderNavigationProps) => {\n    const [currentPage, setCurrentPage] = useState(1);\n\n    // For horizontal thumbnails or index display, always show buttons even with single image\n    // For vertical thumbnails, hide buttons when there's only one image\n    const showNavButtonsWithSingleImage =\n        thumbnailOrientation === 'horizontal' || thumbnailDisplay === ThumbnailDisplay.Index;\n    const showPreviousPageButton = showNavButtonsWithSingleImage ? true : numberOfPages > 1;\n    const showNextPageButton = showNavButtonsWithSingleImage ? true : numberOfPages > 1;\n\n    // For horizontal/index with single image, disable buttons\n    // For vertical or multiple images, use wraparound navigation (never disabled)\n    const isPreviousPageDisabled = showNavButtonsWithSingleImage && numberOfPages <= 1;\n    const isNextPageDisabled = showNavButtonsWithSingleImage && numberOfPages <= 1;\n\n    const goToPreviousPage = useCallback(() => {\n        if (!isScrolling) {\n            // Trigger hover state to load all images when navigation is used\n            setHasHoveredGallery(true);\n            if (currentPage > 1) {\n                setCurrentPage(currentPage - 1);\n            } else {\n                // Wrap to last page when on first page\n                setCurrentPage(numberOfPages);\n            }\n        }\n    }, [currentPage, numberOfPages, isScrolling, setCurrentPage, setHasHoveredGallery]);\n\n    const goToNextPage = useCallback(() => {\n        if (!isScrolling) {\n            // Trigger hover state to load all images when navigation is used\n            setHasHoveredGallery(true);\n            if (currentPage < numberOfPages) {\n                setCurrentPage(currentPage + 1);\n            } else {\n                // Wrap to first page when on last page\n                setCurrentPage(1);\n            }\n        }\n    }, [currentPage, numberOfPages, isScrolling, setCurrentPage, setHasHoveredGallery]);\n\n    const handleThumbnailClick = useCallback(\n        (pageNumber: number) => {\n            if (!isScrolling) {\n                // Trigger hover state to load all images when thumbnail navigation is used\n                setHasHoveredGallery(true);\n                setCurrentPage(pageNumber);\n            }\n        },\n        [isScrolling, setCurrentPage, setHasHoveredGallery]\n    );\n\n    /**\n     * Handles keyboard navigation for the slider.\n     * Allows using Left and Right arrow keys to navigate between images.\n     */\n    const onKeyNavigation = useCallback(\n        (event: React.KeyboardEvent) => {\n            if (event.key === 'ArrowRight') {\n                goToNextPage();\n            } else if (event.key === 'ArrowLeft') {\n                goToPreviousPage();\n            }\n        },\n        [goToNextPage, goToPreviousPage]\n    );\n\n    useEffect(() => {\n        setCurrentPage(1);\n        // Reset hover state when content changes (new content key/different images)\n        setHasHoveredGallery(false);\n        if (contentRef.current && typeof contentRef.current.scrollTo === 'function') {\n            contentRef.current.scrollTo({\n                behavior: 'instant',\n                left: 0,\n            });\n        }\n    }, [contentKey, contentRef, setHasHoveredGallery]);\n\n    return {\n        currentPage,\n        goToNextPage,\n        goToPreviousPage,\n        handleThumbnailClick,\n        isNextPageDisabled,\n        isPreviousPageDisabled,\n        onKeyNavigation,\n        setCurrentPage,\n        showNextPageButton,\n        showPreviousPageButton,\n    };\n};\n","import { debounce } from 'es-toolkit';\nimport { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useWindowIsMobile } from '../../providers';\nimport { ANIMATION, MOBILE_CARD, SPACING } from '../constants';\n\n/**\n * Props for the useImageSliderScrollHandler hook\n */\ntype UseImageSliderScrollHandlerProps = {\n    /** Ref to the content container */\n    contentRef: RefObject<HTMLDivElement | null>;\n    /** Current page number */\n    currentPage: number;\n    /**\n     * Max width in px of each carousel card on mobile (matches `responsiveImageConfig.desktopSize` on the slider).\n     * @default MOBILE_CARD.MAX_WIDTH\n     */\n    maxMobileCardWidth?: number;\n    /** Total number of pages */\n    numberOfPages: number;\n    /** Function to update the current page */\n    setCurrentPage: (page: number) => void;\n    /** Function to update the scrolling state */\n    setIsScrolling?: (isScrolling: boolean) => void;\n};\n\n/**\n * Hook for managing scroll behavior and page tracking in the ImageSlider\n * @param props - Scroll handler configuration\n * @returns Scroll handlers and scrolling state\n */\nexport const useImageSliderScrollHandler = ({\n    contentRef,\n    currentPage,\n    maxMobileCardWidth = MOBILE_CARD.MAX_WIDTH,\n    numberOfPages,\n    setCurrentPage,\n    setIsScrolling,\n}: UseImageSliderScrollHandlerProps) => {\n    const [internalIsScrolling, setInternalIsScrolling] = useState(false);\n    const isScrollingState = setIsScrolling ? internalIsScrolling : false;\n    const isMobile = useWindowIsMobile();\n    const previousPageRef = useRef<number>(currentPage);\n\n    // Handle programmatic scrolling on page changes (desktop only)\n    useEffect(() => {\n        if (contentRef.current) {\n            // Skip programmatic scrolling on mobile - let natural snap scrolling handle it\n            if (isMobile) {\n                return;\n            }\n\n            const pageChanged = previousPageRef.current !== currentPage;\n\n            // Set scrolling state to prevent rapid navigation\n            if (setIsScrolling) {\n                setIsScrolling(true);\n            } else {\n                setInternalIsScrolling(true);\n            }\n\n            // Calculate scroll position including gap for desktop\n            const containerWidth = contentRef.current.offsetWidth;\n            const gap = SPACING.GAP_MD; // md gap in pixels for desktop\n            const scrollPosition = (currentPage - 1) * (containerWidth + gap);\n\n            // Use 'auto' (instant) instead of 'smooth' if page hasn't changed\n            // This prevents page scrolling on resize/mount while keeping smooth scrolling for navigation\n            contentRef.current.scrollTo({\n                behavior: pageChanged ? 'smooth' : 'auto',\n                left: scrollPosition,\n            });\n\n            // Reset scrolling state after animation completes\n            // Smooth scroll animation typically takes ~300-400ms\n            const scrollTimeout = setTimeout(() => {\n                if (setIsScrolling) {\n                    setIsScrolling(false);\n                } else {\n                    setInternalIsScrolling(false);\n                }\n            }, ANIMATION.SCROLL_TIMEOUT);\n\n            // Update previous page reference\n            previousPageRef.current = currentPage;\n\n            return () => {\n                clearTimeout(scrollTimeout);\n            };\n        }\n        return undefined;\n    }, [currentPage, contentRef, setIsScrolling, isMobile]);\n\n    /**\n     * Memoized debounced scroll handler for desktop scroll tracking.\n     * Updates the current page when user scrolls to reflect active thumbnail.\n     */\n    const debouncedDesktopScrollHandler = useMemo(\n        () =>\n            debounce(() => {\n                if (contentRef.current && !isMobile) {\n                    const scrollLeft = contentRef.current.scrollLeft;\n                    const containerWidth = contentRef.current.offsetWidth;\n                    const gap = SPACING.GAP_MD; // md gap in pixels for desktop\n                    const newPage = Math.round(scrollLeft / (containerWidth + gap)) + 1;\n\n                    if (newPage !== currentPage && newPage >= 1 && newPage <= numberOfPages) {\n                        setCurrentPage(newPage);\n                    }\n                }\n            }, ANIMATION.DEBOUNCE_DELAY),\n        [currentPage, numberOfPages, contentRef, setCurrentPage, isMobile]\n    );\n\n    /**\n     * Memoized debounced scroll handler for mobile scroll tracking.\n     * Updates the current page based on mobile card layout with gaps and margins.\n     */\n    const debouncedMobileScrollHandler = useMemo(\n        () =>\n            debounce(() => {\n                if (contentRef.current && isMobile) {\n                    const { clientWidth, scrollLeft, scrollWidth } = contentRef.current;\n                    const maxScroll = scrollWidth - clientWidth;\n\n                    // Prevent scrolling beyond bounds\n                    if (scrollLeft < 0) {\n                        contentRef.current.scrollLeft = 0;\n                    } else if (scrollLeft > maxScroll) {\n                        contentRef.current.scrollLeft = maxScroll;\n                    }\n\n                    // Calculate current page based on scroll position\n                    // Mobile cards: min(calc(100% - 64px), maxMobileCardWidth) with 4px gaps\n                    // First card has 16px left margin, last card has 16px right margin\n                    const gap = SPACING.GAP_2XS;\n                    const margin = SPACING.MARGIN_SM;\n                    const cardWidth = Math.min(clientWidth - MOBILE_CARD.WIDTH_REDUCTION, maxMobileCardWidth);\n                    const cardWithGap = cardWidth + gap;\n\n                    // Calculate which card is most visible based on scroll position\n                    // Account for the initial margin offset\n                    const adjustedScrollLeft = scrollLeft + margin;\n                    const newPage = Math.round(adjustedScrollLeft / cardWithGap) + 1;\n\n                    if (newPage !== currentPage && newPage >= 1 && newPage <= numberOfPages) {\n                        setCurrentPage(newPage);\n                    }\n                }\n            }, ANIMATION.DEBOUNCE_DELAY),\n        [currentPage, maxMobileCardWidth, numberOfPages, contentRef, setCurrentPage, isMobile]\n    );\n\n    /**\n     * Handles scroll events within the slider content area.\n     * Uses debounced handlers for both mobile and desktop to improve performance.\n     */\n    const onScrollCards = useCallback(() => {\n        if (isMobile) {\n            debouncedMobileScrollHandler();\n        } else {\n            debouncedDesktopScrollHandler();\n        }\n    }, [isMobile, debouncedMobileScrollHandler, debouncedDesktopScrollHandler]);\n\n    return {\n        isScrolling: isScrollingState,\n        onScrollCards,\n    };\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useCallback, useMemo, useState, type CSSProperties } from 'react';\n\nimport { IndexIndicator } from './components/IndexIndicator/IndexIndicator';\nimport { NavigationButtons } from './components/NavigationButtons/NavigationButtons';\nimport { ResponsiveImage } from './components/ResponsiveImage';\nimport { Thumbnails } from './components/Thumbnails/Thumbnails';\nimport { PLACEHOLDER_EMPTY_CARDS } from './constants';\nimport { useImageSlider } from './hooks/useImageSlider';\nimport { useImageSliderNavigation } from './hooks/useImageSliderNavigation';\nimport { useImageSliderScrollHandler } from './hooks/useImageSliderScrollHandler';\nimport {\n    ImageSliderAnalyticsEvent,\n    ImageSliderCard,\n    ResponsiveImageConfig,\n    ThumbnailDisplay,\n} from './ImageSlider.types';\nimport { generateThumbnailSizesAttribute, generateThumbnailSrcSet } from './utils/imageOptimization';\n\ntype Props = {\n    /**\n     * The scrollable content of the image slider.\n     * Should be individual images.\n     *\n     * @property {ReactNode} card - The rendered image content\n     * @property {string} key - A unique identifier for the image\n     */\n    cards: ImageSliderCard[];\n    /**\n     * Class name for the image gallery container.\n     */\n    className?: string;\n    /**\n     * Optional key to identify when content has changed (e.g., an item id).\n     * When this key changes, the slider will reset to the first image.\n     * If not provided, will reset whenever the cards array reference changes.\n     */\n    contentKey?: string | number;\n    /**\n     * Shape of the navigation icons.\n     * 'circle' creates round buttons, 'square' creates square buttons.\n     *\n     * @default 'circle'\n     */\n    iconShape?: 'circle' | 'square';\n    /**\n     * Size of the navigation icons - sm=34px, md=42px, lg=54px.\n     * For horizontal thumbnails, 'lg' (54px) is recommended.\n     *\n     * @default 'sm'\n     */\n    iconSize?: 'sm' | 'md' | 'lg';\n    /**\n     * Type of icons to use for navigation.\n     * 'caret' uses CaretLeft/CaretRight, 'arrow' uses ArrowLeft/ArrowRight.\n     *\n     * @default 'caret'\n     */\n    iconType?: 'caret' | 'arrow';\n    /**\n     * Variant of the navigation icons.\n     * 'outlined' shows buttons with borders, 'transparent' shows borderless buttons.\n     *\n     * @default 'outlined'\n     */\n    iconVariant?: 'outlined' | 'transparent';\n    /**\n     * When thumbnailDisplay is 'index', position of the numeric indicator relative to the main image.\n     *\n     * @default 'bottom'\n     */\n    indexPosition?: 'top' | 'bottom';\n    /**\n     * Callback fired when an analytics event occurs in the image slider.\n     * Receives interaction type, current image position (1-based), and total image count.\n     * Does not fire for mobile swipe navigation, only for button/thumbnail clicks and lightbox opens.\n     */\n    onAnalyticsEventTriggered?: (event: ImageSliderAnalyticsEvent) => void;\n    /**\n     * Callback fired when an image is clicked (mouse) or activated via keyboard (Enter/Space).\n     * Receives the index of the image and the mouse or keyboard event.\n     */\n    onImageClick?: (\n        imageIndex: number,\n        event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n    ) => void;\n    /**\n     * Callback fired when an image is hovered (mouse) or focused (keyboard/screen reader).\n     * Receives the index of the image and the mouse or focus event.\n     */\n    onImageMouseOver?: (\n        imageIndex: number,\n        event: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement>\n    ) => void;\n    /**\n     * Configuration for responsive image loading when using imageData in cards.\n     * Defines mobile/desktop sizes and breakpoint for optimal image loading.\n     */\n    responsiveImageConfig?: ResponsiveImageConfig;\n    /**\n     * Displays thumbnail previews on the left side of the slider.\n     * Clicking a thumbnail will navigate to the corresponding image.\n     * The current image thumbnail will have a border highlight.\n     *\n     * @default true\n     */\n    showThumbnails?: boolean;\n    /**\n     * Display mode for image navigation controls.\n     * 'thumbnails' shows image previews (vertical or horizontal per thumbnailOrientation).\n     * 'index' shows a numeric indicator (e.g., \"1 of 11\") above or below the main image per indexPosition.\n     *\n     * @default ThumbnailDisplay.Thumbnails\n     */\n    thumbnailDisplay?: ThumbnailDisplay;\n    /**\n     * Orientation of the thumbnail previews when showThumbnails is true.\n     * 'vertical' displays thumbnails on the left side, 'horizontal' displays them below the image.\n     *\n     * @default 'vertical'\n     */\n    thumbnailOrientation?: 'vertical' | 'horizontal';\n};\n\n/**\n * Displays a single image at a time with navigation controls.\n * Allows navigation via buttons, dots (pagination), or touch gestures (on mobile).\n */\n// Default responsive image configuration\nconst DEFAULT_RESPONSIVE_CONFIG: ResponsiveImageConfig = {\n    breakpoint: 768,\n    desktopSize: 651,\n    mobileSize: 366,\n};\n\nexport const ImageSlider = ({\n    cards: initialCards,\n    className,\n    contentKey,\n    iconShape = 'circle',\n    iconSize = 'sm',\n    iconType = 'caret',\n    iconVariant = 'outlined',\n    indexPosition = 'bottom',\n    onAnalyticsEventTriggered,\n    onImageClick,\n    onImageMouseOver,\n    responsiveImageConfig = DEFAULT_RESPONSIVE_CONFIG,\n    showThumbnails = true,\n    thumbnailDisplay = ThumbnailDisplay.Thumbnails,\n    thumbnailOrientation = 'vertical',\n}: Props) => {\n    // When an item doesn't have images, the cards array will be empty.\n    // We need to show a placeholder empty card in this case.\n    const cards = useMemo(() => {\n        if (initialCards.length === 0) {\n            return PLACEHOLDER_EMPTY_CARDS;\n        }\n        return initialCards;\n    }, [initialCards]);\n\n    const numberOfPages = cards.length;\n\n    // Initialize base slider state and refs\n    const {\n        containerRef,\n        contentRef,\n        handleMobileInteraction,\n        handleMouseOver,\n        hasHoveredGallery,\n        isMobile,\n        setHasHoveredGallery,\n    } = useImageSlider({\n        numberOfPages,\n        responsiveImageConfig,\n    });\n\n    // Manage scrolling state locally to avoid circular dependency\n    const [isScrolling, setIsScrolling] = useState(false);\n\n    // Initialize navigation state and handlers\n    const navigation = useImageSliderNavigation({\n        cards,\n        contentKey,\n        contentRef,\n        isScrolling,\n        numberOfPages,\n        setHasHoveredGallery,\n        thumbnailDisplay,\n        thumbnailOrientation,\n    });\n\n    // Initialize scroll handling with navigation state and local setIsScrolling\n    const { onScrollCards } = useImageSliderScrollHandler({\n        contentRef,\n        currentPage: navigation.currentPage,\n        maxMobileCardWidth: responsiveImageConfig.desktopSize,\n        numberOfPages,\n        setCurrentPage: navigation.setCurrentPage,\n        setIsScrolling,\n    });\n\n    // Extract all the values we need\n    const {\n        currentPage,\n        goToNextPage,\n        goToPreviousPage,\n        handleThumbnailClick,\n        isNextPageDisabled,\n        isPreviousPageDisabled,\n        onKeyNavigation,\n        showNextPageButton,\n        showPreviousPageButton,\n    } = navigation;\n\n    // Wrap navigation handlers to trigger analytics\n    const goToNextPageWithAnalytics = useCallback(() => {\n        goToNextPage();\n        onAnalyticsEventTriggered?.({\n            imagePosition: currentPage < numberOfPages ? currentPage + 1 : 1,\n            interactionType: 'Next',\n            totalImages: numberOfPages,\n        });\n    }, [goToNextPage, onAnalyticsEventTriggered, currentPage, numberOfPages]);\n\n    const goToPreviousPageWithAnalytics = useCallback(() => {\n        goToPreviousPage();\n        onAnalyticsEventTriggered?.({\n            imagePosition: currentPage > 1 ? currentPage - 1 : numberOfPages,\n            interactionType: 'Prev',\n            totalImages: numberOfPages,\n        });\n    }, [goToPreviousPage, onAnalyticsEventTriggered, currentPage, numberOfPages]);\n\n    const handleThumbnailClickWithAnalytics = useCallback(\n        (pageNumber: number) => {\n            // Only trigger analytics if navigating to a different image\n            if (pageNumber !== currentPage && onAnalyticsEventTriggered) {\n                onAnalyticsEventTriggered({\n                    imagePosition: pageNumber,\n                    interactionType: 'Thumbnail Click',\n                    totalImages: numberOfPages,\n                });\n            }\n            handleThumbnailClick(pageNumber);\n        },\n        [currentPage, handleThumbnailClick, onAnalyticsEventTriggered, numberOfPages]\n    );\n\n    /**\n     * These images are wrapped in a div and displayed one at a time with proper snap behavior.\n     * When showImageOverflow is enabled on mobile, images take partial width to show overflow.\n     * Supports both custom ReactNode cards and responsive imageData.\n     * Images are re-rendered when currentPage changes to ensure active image gets full quality.\n     *\n     * On desktop before hover: Only render first image to avoid loading second image unnecessarily.\n     * On mobile: Always render all images for swipe functionality.\n     * After hover on desktop: Render all images for navigation.\n     */\n    const carouselCards = useMemo(() => {\n        // On desktop before hover, only render the first image to prevent unnecessary loading\n        // On mobile or after hover, render all images\n        const cardsToRender = !isMobile && !hasHoveredGallery ? cards.slice(0, 1) : cards;\n\n        return cardsToRender.map(({ card, imageData, key }, index) => {\n            // For the sliced scenario, we need to get the actual index from the original cards array\n            const actualIndex = !isMobile && !hasHoveredGallery ? 0 : index;\n            const isActive = actualIndex + 1 === currentPage;\n\n            return (\n                <div\n                    aria-current={isActive ? 'true' : 'false'}\n                    aria-label={`Image ${actualIndex + 1} of ${cards.length}${imageData?.alt ? `: ${imageData.alt}` : ''}`}\n                    className={cn(\n                        'flex w-full flex-none snap-center items-center justify-center bg-background-primary',\n                        onImageClick ? 'cursor-zoom-in' : 'cursor-default',\n                        // Desktop: full height\n                        'smMin:h-full',\n                        // Mobile-specific styling (xsMax) — max dimensions follow responsiveImageConfig.desktopSize via --slider-size\n                        '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',\n                        // Apply width reduction only when there are multiple cards for bleed effect\n                        numberOfPages > 1\n                            ? 'xsMax:w-[calc(100%-64px)] xsMax:max-w-[var(--slider-size)]'\n                            : 'xsMax:w-full xsMax:max-w-[var(--slider-size)]',\n                        {\n                            'ml-sm': actualIndex === 0,\n                            'mr-sm': actualIndex === cards.length - 1,\n                        }\n                    )}\n                    key={key} // Use stable key to avoid unnecessary DOM recreations\n                    onClick={(event) => {\n                        // Trigger mobile interaction for high-quality loading\n                        handleMobileInteraction();\n                        // Trigger analytics for lightbox open\n                        if (onAnalyticsEventTriggered) {\n                            onAnalyticsEventTriggered({\n                                imagePosition: actualIndex + 1,\n                                interactionType: 'Open Lightbox',\n                                totalImages: numberOfPages,\n                            });\n                        }\n                        // Call optional user-provided handler\n                        onImageClick?.(actualIndex, event);\n                    }}\n                    onFocus={(event) => {\n                        // Trigger mobile interaction for high-quality loading\n                        handleMobileInteraction();\n                        // Call optional user-provided handler\n                        onImageMouseOver?.(actualIndex, event);\n                    }}\n                    onKeyUp={\n                        onImageClick\n                            ? (event) => {\n                                  if (event.key === 'Enter' || event.key === ' ') {\n                                      event.preventDefault();\n                                      // Trigger analytics for lightbox open via keyboard\n                                      if (onAnalyticsEventTriggered) {\n                                          onAnalyticsEventTriggered({\n                                              imagePosition: actualIndex + 1,\n                                              interactionType: 'Open Lightbox',\n                                              totalImages: numberOfPages,\n                                          });\n                                      }\n                                      if (event.key === 'Enter') {\n                                          onImageClick(actualIndex, event);\n                                      }\n                                  }\n                              }\n                            : undefined\n                    }\n                    onMouseOver={(event) => {\n                        // Always trigger gallery hover state for high-quality loading\n                        handleMouseOver();\n                        // Call optional user-provided handler\n                        if (onImageMouseOver) {\n                            onImageMouseOver(actualIndex, event);\n                        }\n                    }}\n                    onTouchStart={() => {\n                        // Trigger mobile interaction for high-quality loading on touch/drag\n                        handleMobileInteraction();\n                    }}\n                    role={onImageClick ? 'button' : undefined}\n                    tabIndex={onImageClick ? 0 : undefined}\n                >\n                    {/* Render responsive image if imageData is provided, otherwise use custom card */}\n                    {imageData ? (\n                        <ResponsiveImage\n                            hasHoveredGallery={hasHoveredGallery}\n                            imageData={imageData}\n                            isActiveImage={isActive}\n                            isMainImage\n                            responsiveImageConfig={responsiveImageConfig}\n                        />\n                    ) : (\n                        card || null\n                    )}\n                </div>\n            );\n        });\n    }, [\n        cards,\n        currentPage,\n        handleMobileInteraction,\n        handleMouseOver,\n        hasHoveredGallery,\n        isMobile,\n        numberOfPages,\n        onAnalyticsEventTriggered,\n        onImageClick,\n        onImageMouseOver,\n        responsiveImageConfig,\n    ]);\n\n    const isIndexDisplay = thumbnailDisplay === ThumbnailDisplay.Index;\n    const isHorizontalThumbnailsDisplay =\n        thumbnailDisplay === ThumbnailDisplay.Thumbnails && thumbnailOrientation === 'horizontal';\n\n    return (\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/mouse-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/tabindex-no-positive\n        <section\n            aria-label=\"Image gallery\"\n            aria-roledescription=\"carousel\"\n            className={cn(\n                'relative mx-auto w-full pr-lg outline-none smMax:pr-0',\n                // Only extend beyond viewport for bleed effect when there are multiple cards\n                { 'xsMax:-ml-sm xsMax:w-[calc(100%+32px)]': numberOfPages > 1 },\n                className\n            )}\n            onClick={() => containerRef.current?.focus()}\n            onKeyUp={onKeyNavigation}\n            onMouseOver={handleMouseOver}\n            ref={containerRef}\n            role=\"application\"\n            style={\n                {\n                    '--slider-size': `${responsiveImageConfig.desktopSize}px`,\n                } as CSSProperties\n            }\n            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n            tabIndex={0}\n        >\n            <div\n                className={cn(\n                    'flex flex-col',\n                    // Dynamic gap that scales smoothly from ~58px down to smaller sizes\n                    'gap-[58px] mdMax:gap-xl smMax:gap-[38px] xsMax:gap-[28px]'\n                )}\n            >\n                {/* Image Gallery Container */}\n                <div\n                    className={cn(\n                        'flex w-full',\n                        thumbnailDisplay === ThumbnailDisplay.Index\n                            ? 'flex-col items-center justify-center gap-2xs'\n                            : thumbnailOrientation === 'horizontal'\n                              ? 'flex-col items-center justify-center gap-xs'\n                              : 'relative items-center justify-center gap-[28px]'\n                    )}\n                >\n                    {/* Index indicator - above main image when thumbnailDisplay is 'index' and indexPosition is 'top' */}\n                    {thumbnailDisplay === ThumbnailDisplay.Index && indexPosition === 'top' && (\n                        <IndexIndicator\n                            currentPage={currentPage}\n                            numberOfPages={numberOfPages}\n                        />\n                    )}\n\n                    {/* Vertical Thumbnails Container - Absolutely positioned */}\n                    {showThumbnails &&\n                        thumbnailDisplay === ThumbnailDisplay.Thumbnails &&\n                        thumbnailOrientation === 'vertical' && (\n                            <div className=\"absolute bottom-0 left-0 top-0 z-10 xsMax:hidden\">\n                                <Thumbnails\n                                    cards={cards}\n                                    currentPage={currentPage}\n                                    generateThumbnailSizesAttribute={generateThumbnailSizesAttribute}\n                                    generateThumbnailSrcSet={generateThumbnailSrcSet}\n                                    onThumbnailClick={handleThumbnailClickWithAnalytics}\n                                    orientation=\"vertical\"\n                                />\n                            </div>\n                        )}\n\n                    {/* Main Image Area */}\n                    <div\n                        className={cn(\n                            'flex items-center',\n                            isIndexDisplay\n                                ? 'relative w-full justify-center gap-md smMin:max-w-[780px] xsMax:w-full'\n                                : isHorizontalThumbnailsDisplay\n                                  ? 'max-w-[606px] gap-md xsMax:w-full'\n                                  : cn(\n                                        'w-full justify-between gap-sm',\n                                        showThumbnails ? 'pl-[146px] mdMax:pl-[139px] xsMax:pl-0' : ''\n                                    )\n                        )}\n                        data-testid=\"image-slider-hero-controls\"\n                    >\n                        {/* Desktop navigation buttons (left) - hidden on mobile */}\n                        <div className=\"hidden smMin:block\">\n                            <NavigationButtons\n                                goToNextPage={goToNextPageWithAnalytics}\n                                goToPreviousPage={goToPreviousPageWithAnalytics}\n                                iconShape={iconShape}\n                                iconSize={iconSize}\n                                iconType={iconType}\n                                iconVariant={iconVariant}\n                                isNextPageDisabled={isNextPageDisabled}\n                                isPreviousPageDisabled={isPreviousPageDisabled}\n                                position=\"left\"\n                                showNextPageButton={showNextPageButton}\n                                showPreviousPageButton={showPreviousPageButton}\n                            />\n                        </div>\n\n                        {/* Main image container - responsive layout */}\n                        <div\n                            className={cn(\n                                // Shared: relative container with consistent max dimensions\n                                'relative',\n                                isIndexDisplay\n                                    ? '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'\n                                    : isHorizontalThumbnailsDisplay\n                                      ? 'max-h-[400px] smMin:flex smMin:aspect-square smMin:max-w-[400px] smMin:flex-1 smMin:justify-center smMin:overflow-hidden xsMax:w-full'\n                                      : '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'\n                            )}\n                            data-testid=\"image-slider-media-frame\"\n                        >\n                            {/* Mobile navigation buttons - hidden on desktop */}\n                            <div className=\"smMin:hidden\">\n                                <NavigationButtons\n                                    goToNextPage={goToNextPageWithAnalytics}\n                                    goToPreviousPage={goToPreviousPageWithAnalytics}\n                                    iconShape={iconShape}\n                                    iconSize={iconSize}\n                                    iconType={iconType}\n                                    iconVariant={iconVariant}\n                                    isNextPageDisabled={isNextPageDisabled}\n                                    isPreviousPageDisabled={isPreviousPageDisabled}\n                                    showNextPageButton={showNextPageButton}\n                                    showPreviousPageButton={showPreviousPageButton}\n                                />\n                            </div>\n\n                            {/* Responsive scroll container wrapper */}\n                            <div\n                                className={cn(\n                                    // Shared: primary background and full width\n                                    'w-full bg-background-primary',\n                                    // Desktop: full height and hidden overflow\n                                    'smMin:h-full smMin:overflow-hidden'\n                                )}\n                            >\n                                <div\n                                    aria-atomic=\"false\"\n                                    aria-live=\"polite\"\n                                    className={cn(\n                                        'flex w-full snap-x snap-mandatory overflow-y-hidden overflow-x-scroll',\n                                        // Desktop: full height and 24px gap\n                                        'smMin:h-full smMin:gap-md',\n                                        // Mobile: 2xs gap, let aspect-square control height\n                                        'xsMax:gap-2xs'\n                                    )}\n                                    onScroll={onScrollCards}\n                                    ref={contentRef}\n                                    role=\"region\"\n                                    style={{\n                                        scrollbarWidth: 'none',\n                                    }}\n                                >\n                                    {carouselCards}\n                                </div>\n                            </div>\n                        </div>\n\n                        {/* Desktop navigation buttons (right) - hidden on mobile */}\n                        <div className=\"hidden smMin:block\">\n                            <NavigationButtons\n                                goToNextPage={goToNextPageWithAnalytics}\n                                goToPreviousPage={goToPreviousPageWithAnalytics}\n                                iconShape={iconShape}\n                                iconSize={iconSize}\n                                iconType={iconType}\n                                iconVariant={iconVariant}\n                                isNextPageDisabled={isNextPageDisabled}\n                                isPreviousPageDisabled={isPreviousPageDisabled}\n                                position=\"right\"\n                                showNextPageButton={showNextPageButton}\n                                showPreviousPageButton={showPreviousPageButton}\n                            />\n                        </div>\n                    </div>\n\n                    {/* Horizontal Thumbnails Container - Below image */}\n                    {showThumbnails &&\n                        thumbnailDisplay === ThumbnailDisplay.Thumbnails &&\n                        thumbnailOrientation === 'horizontal' && (\n                            <div className=\"w-full xsMax:hidden\">\n                                <Thumbnails\n                                    cards={cards}\n                                    currentPage={currentPage}\n                                    generateThumbnailSizesAttribute={generateThumbnailSizesAttribute}\n                                    generateThumbnailSrcSet={generateThumbnailSrcSet}\n                                    onThumbnailClick={handleThumbnailClickWithAnalytics}\n                                    orientation=\"horizontal\"\n                                />\n                            </div>\n                        )}\n\n                    {/* Index indicator - below main image when thumbnailDisplay is 'index' and indexPosition is 'bottom' */}\n                    {thumbnailDisplay === ThumbnailDisplay.Index && indexPosition === 'bottom' && (\n                        <IndexIndicator\n                            currentPage={currentPage}\n                            numberOfPages={numberOfPages}\n                        />\n                    )}\n                </div>\n            </div>\n        </section>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAa,kBAAkB,EAAE,aAAa,oBAC1C,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;CACI,cAAY,SAAS,YAAY,MAAM;CACvC,aAAU;CACV,WAAU;CACV,MAAK;WAJT;EAMK;EAAY;EAAK;CACjB;;;;ACOT,MAAa,qBAAqB,EAC9B,cACA,kBACA,YAAY,UACZ,WAAW,MACX,WAAW,SACX,cAAc,YACd,qBAAqB,OACrB,yBAAyB,OACzB,UACA,oBACA,6BACS;CAET,MAAM,WAAW,aAAa,UAAUA,cAAAA,YAAYC,cAAAA;CACpD,MAAM,YAAY,aAAa,UAAUC,cAAAA,aAAaC,cAAAA;CAGtD,IAAI,UAAU;EACV,IAAI,aAAa,QACb,OAAO,yBACH,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;GACI,cAAW;GACX,WAAU;GACV,UAAU;GACV,aAAA;GACA,MAAM;GACN,SAAS;GACT,OAAO;GACP,MAAM;GACN,SAAS;EACZ,CAAA,IACD;EAIR,OAAO,qBACH,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;GACI,cAAW;GACX,WAAU;GACV,UAAU;GACV,aAAA;GACA,MAAM;GACN,SAAS;GACT,OAAO;GACP,MAAM;GACN,SAAS;EACZ,CAAA,IACD;CACR;CAKA,MAAM,kBAAA,GAAA,wBAAA,GAAA,CAAoB,sCAAsC;CAEhE,OACI,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;YAAf,CACK,0BACG,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;GACI,cAAW;GACX,YAAA,GAAA,wBAAA,GAAA,CAAc,gBAAgB,WAAW,cAAc;GACvD,UAAU;GACV,aAAA;GACA,MAAM;GACN,SAAS;GACT,OAAO;GACP,MAAM;GACN,SAAS;EACZ,CAAA,GAEJ,sBACG,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;GACI,cAAW;GACX,YAAA,GAAA,wBAAA,GAAA,CAAc,gBAAgB,YAAY,cAAc;GACxD,UAAU;GACV,aAAA;GACA,MAAM;GACN,SAAS;GACT,OAAO;GACP,MAAM;GACN,SAAS;EACZ,CAAA,CAEJ;;AAEb;;;0BChHA;ACcA,MAAa,UAAU;CACnB,SAASC,sCAAAA,QAAQ;CACjB,QAAQA,sCAAAA,QAAQ;CAChB,WAAWA,sCAAAA,QAAQ;AACvB;AAGA,MAAa,YAAY;CACrB,SAAS;CACT,MAAM;CACN,aAAa;AACjB;AAGA,MAAa,cAAc;CACvB,WAAW;CACX,iBAAiB;AACrB;AAGA,MAAa,YAAY;CACrB,gBAAgB;CAChB,gBAAgB;AACpB;AAUA,MAAa,wBAAwBC;AAErC,MAAa,0BAA6C,CACtD;CACI,WAAW;EACP,KAAK;EACL,SAAS;EACT,OAAO;CACX;CACA,KAAK;AACT,CACJ;;;;;;;;;;AChDA,MAAa,2BACT,SACA,QACA,iBAA0B,UACjB;CAIT,IAAI,gBACA,OAAO;CAGX,MAAM,EAAE,aAAa,eAAe;CAGpC,OAAO,CAFS,YAAY,WAEhB,CAAC,CACR,KAAK,UAAU;EACZ,OAAO,GAAG,QAAQ,SAAS,MAAM,GAAG,MAAM;CAC9C,CAAC,CAAC,CACD,KAAK,IAAI;AAClB;;;;;;AAOA,MAAa,2BAA2B,YAA4B;CAChE,OAAO,GAAG,QAAQ,SAAS,UAAU,YAAY,GAAG,UAAU,YAAY;AAC9E;;;;;;;AAQA,MAAa,0BAA0B,QAA+B,iBAA0B,UAAkB;CAG9G,IAAI,gBACA,OAAO;CAGX,MAAM,EAAE,YAAY,aAAa,eAAe;CAGhD,OAAO,eAAe,WAAW,MADN,KAAK,MAAM,aAAa,CACK,EAAE,MAAM,YAAY;AAChF;AAGA,MAAM,4BAA4B,GAAG,UAAU,YAAY;;;;;AAM3D,MAAa,wCAAgD;CACzD,OAAO;AACX;;;;;;;;AASA,MAAa,eACT,SACA,QACA,iBAA0B,UACjB;CACT,IAAI,gBACA,OAAO;CAEX,OAAO,GAAG,QAAQ,SAAS,OAAO;AACtC;;;;;;AAOA,MAAa,mBAAmB,YAA4B;CACxD,OAAO,GAAG,QAAQ,SAAS,UAAU;AACzC;;;;;;AChEA,MAAa,mBAAmB,EAC5B,WACA,oBAAoB,OACpB,WACA,gBAAgB,OAChB,cAAc,MACd,4BACS;CACT,MAAM,EAAE,KAAK,SAAS,UAAU;CAEhC,IAAI,CAAC,uBAED,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACS;EACM;EACX,UAAU,MAAM;GACZ,MAAM,SAAS,EAAE;GACjB,IAAI,OAAO,QAAQ,uBACf,OAAO,MAAM;EAErB;EACA,KAAK;EACE;CACV,CAAA;CAIT,IAAI,aAAa;EAMb,MAAM,wBAAwBC;EAE9B,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACS;GACL,WAAU;GACV,eAAe,iBAAiB,wBAAwB,SAAS;GAIjE,SAAS,iBAAiB,wBAAwB,UAAU;GAC5D,UAAU,MAAM;IACZ,MAAM,SAAS,EAAE;IACjB,IAAI,OAAO,QAAQ,uBAAuB;KACtC,OAAO,MAAM;KAEb,OAAO,SAAS;IACpB;GACJ;GACA,OAAO,uBAAuB,uBAAuB,qBAAqB;GAC1E,KAAK,YAAY,SAAS,uBAAuB,qBAAqB;GACtE,QAAQ,wBAAwB,SAAS,uBAAuB,qBAAqB;GAC9E;EACV,GAdQ,yBAAyB,CAAC,gBAAgB,iBAAiB,kBAcnE;CAET;CAGA,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACS;EACL,WAAU;EACV,SAAQ;EACR,UAAU,MAAM;GACZ,MAAM,SAAS,EAAE;GACjB,IAAI,OAAO,QAAQ,uBAAuB;IACtC,OAAO,MAAM;IAEb,OAAO,SAAS;GACpB;EACJ;EACA,OAAO,gCAAgC;EACvC,KAAK,gBAAgB,OAAO;EAC5B,QAAQ,wBAAwB,OAAO;EAChC;CACV,CAAA;AAET;;;;;;;ACrFA,MAAa,cAAc,EACvB,OACA,aACA,iCACA,yBACA,kBACA,kBACS;CACT,MAAM,gBAAA,GAAA,MAAA,OAAA,CAAsC,IAAI;CAChD,MAAM,iBAAA,GAAA,MAAA,OAAA,CAAqD,CAAC,CAAC;CAC7D,MAAM,mBAAA,GAAA,MAAA,OAAA,CAAiC,WAAW;CAGlD,CAAA,GAAA,MAAA,UAAA,OAAgB;EAEZ,IAAI,cAAc,QAAQ,WAAW,MAAM,QACvC,cAAc,QAAQ,SAAS,MAAM;CAE7C,GAAG,CAAC,MAAM,MAAM,CAAC;CAIjB,MAAM,kBAAA,GAAA,MAAA,YAAA,EAA8B,YAAoB;EAIpD,OAAO,GAAG,UAFQ,QAAQ,SAAS,GACT,IAAI,MAAM,IACN,UAAU,UAAU,QAAQ;CAC9D,GAAG,CAAC,CAAC;CAGL,MAAM,wBAAA,GAAA,MAAA,YAAA,EACD,WAAgC,OAAe,kBAA0B;EACtE,MAAM,EAAE,KAAK,SAAS,UAAU;EAChC,MAAM,kBAAkB,eAAe,OAAO;EAC9C,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACS;GACL,WAAW,iBAAiB,cAAc,oBAAoB,cAAc;GAC5E,eAAe,SAAS,IAAI,SAAS;GACrC,SAAS,SAAS,IAAI,UAAU;GAChC,UAAU,MAAM;IACZ,MAAM,SAAS,EAAE;IACjB,IAAI,OAAO,QAAQ,uBAAuB;KACtC,OAAO,MAAM;KAEb,OAAO,SAAS;IACpB;GACJ;GACA,OAAO,gCAAgC;GACvC,KAAK,GAAG,gBAAgB,SAAS;GACjC,QAAQ,wBAAwB,eAAe;GACxC;EACV,CAAA;CAET,GACA;EAAC;EAAyB;EAAiC;CAAc,CAC7E;CAIA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACZ,MAAM,cAAc,gBAAgB,YAAY;EAGhD,gBAAgB,UAAU;EAG1B,IAAI,CAAC,aACD;EAGJ,MAAM,cAAc,cAAc;EAClC,MAAM,kBAAkB,cAAc,QAAQ;EAE9C,IAAI,mBAAmB,aAAa,SAChC,gBAAgB,eAAe;GAC3B,UAAU;GACV,OAAO;GACP,QAAQ;EACZ,CAAC;CAET,GAAG,CAAC,aAAa,WAAW,CAAC;;;;;;CAO7B,MAAM,qBAAA,GAAA,MAAA,QAAA,OAAkC;EAEpC,MAAM,gBADe,gBAAgB,eACA,KAAK,UAAU;EAEpD,OAAO,MAAM,KAAK,EAAE,MAAM,WAAW,OAAO,UAAU;GAClD,MAAM,aAAa,QAAQ;GAC3B,MAAM,WAAW,gBAAgB;GAEjC,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IACI,gBAAc,WAAW,SAAS;IAClC,cAAY,eAAe,aAAa,WAAW,MAAM,KAAK,UAAU,QAAQ;IAChF,iBAAe;IACf,YAAA,GAAA,wBAAA,GAAA,CACI,kGACA,sEACA,oBAAoB,cAAc,SAAS,cAAc,aAAa,cAAc,aAAa,cAAc,MAE/G,WACM,4EACA,yEACV;IACA,eAAa;IACb,aAAW;IAEX,eAAe,iBAAiB,UAAU;IAC1C,MAAM,OAAO;KACT,cAAc,QAAQ,SAAS;IACnC;IACA,MAAK;IACL,OAAO;KACH,QAAQ,GAAG,cAAc;KACzB,WAAW,GAAG,cAAc;KAC5B,UAAU,GAAG,cAAc;KAC3B,OAAO,GAAG,cAAc;IAC5B;IACA,MAAK;cAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;eAEV,YAAY,qBAAqB,WAAW,OAAO,aAAa,IAAI;IACpE,CAAA;GACD,GAlBC,GAkBD;EAEhB,CAAC;CACL,GAAG;EAAC;EAAO;EAAa;EAAkB;EAAsB;CAAW,CAAC;CAE5E,MAAM,eAAe,gBAAgB;CAErC,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACI,cAAW;EACX,YAAA,GAAA,wBAAA,GAAA,CACI,qBACA,eACM,4EACA,oFACV;EACA,KAAK;EACL,MAAK;EACL,OAAO,EACH,gBAAgB,OACpB;YAEA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,YAAA,GAAA,wBAAA,GAAA,CAAc,eAAe,eAAe,aAAa,UAAU;aAAI;EAAuB,CAAA;CAClG,CAAA;AAEb;;;;;;;;;AClKA,MAAa,kBAAkB,EAAE,eAAe,4BAAiD;CAC7F,MAAM,gBAAA,GAAA,MAAA,OAAA,CAA6C,IAAI;CACvD,MAAM,cAAA,GAAA,MAAA,OAAA,CAA2C,IAAI;CAErD,MAAM,CAAC,mBAAmB,yBAAA,GAAA,MAAA,SAAA,CAAiC,KAAK;CAChE,MAAM,WAAWC,2BAAAA,kBAAkB;CAEnC,MAAM,wBAAwB;EAC1B,IAAI,CAAC,YAAY,CAAC,mBACd,qBAAqB,IAAI;CAEjC;CAEA,MAAM,gCAAgC;EAClC,IAAI,YAAY,CAAC,mBACb,qBAAqB,IAAI;CAEjC;CAEA,OAAO;EAEH;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EACA;CACJ;AACJ;;;;;;ACnDA,IAAY,mBAAL,yBAAA,kBAAA;CACH,iBAAA,WAAA;CACA,iBAAA,gBAAA;;AACJ,EAAA,CAAA,CAAA;AAiFA,MAAa,wBAAwB;;;;;;;;;;ACxDrC,MAAa,4BAA4B,EACrC,YACA,YACA,aACA,eACA,sBACA,mBAAA,cACA,uBAAuB,iBACU;CACjC,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,SAAA,CAA2B,CAAC;CAIhD,MAAM,gCACF,yBAAyB,gBAAgB,qBAAA;CAC7C,MAAM,yBAAyB,gCAAgC,OAAO,gBAAgB;CACtF,MAAM,qBAAqB,gCAAgC,OAAO,gBAAgB;CAIlF,MAAM,yBAAyB,iCAAiC,iBAAiB;CACjF,MAAM,qBAAqB,iCAAiC,iBAAiB;CAE7E,MAAM,oBAAA,GAAA,MAAA,YAAA,OAAqC;EACvC,IAAI,CAAC,aAAa;GAEd,qBAAqB,IAAI;GACzB,IAAI,cAAc,GACd,eAAe,cAAc,CAAC;QAG9B,eAAe,aAAa;EAEpC;CACJ,GAAG;EAAC;EAAa;EAAe;EAAa;EAAgB;CAAoB,CAAC;CAElF,MAAM,gBAAA,GAAA,MAAA,YAAA,OAAiC;EACnC,IAAI,CAAC,aAAa;GAEd,qBAAqB,IAAI;GACzB,IAAI,cAAc,eACd,eAAe,cAAc,CAAC;QAG9B,eAAe,CAAC;EAExB;CACJ,GAAG;EAAC;EAAa;EAAe;EAAa;EAAgB;CAAoB,CAAC;CAElF,MAAM,wBAAA,GAAA,MAAA,YAAA,EACD,eAAuB;EACpB,IAAI,CAAC,aAAa;GAEd,qBAAqB,IAAI;GACzB,eAAe,UAAU;EAC7B;CACJ,GACA;EAAC;EAAa;EAAgB;CAAoB,CACtD;;;;;CAMA,MAAM,mBAAA,GAAA,MAAA,YAAA,EACD,UAA+B;EAC5B,IAAI,MAAM,QAAQ,cACd,aAAa;OACV,IAAI,MAAM,QAAQ,aACrB,iBAAiB;CAEzB,GACA,CAAC,cAAc,gBAAgB,CACnC;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACZ,eAAe,CAAC;EAEhB,qBAAqB,KAAK;EAC1B,IAAI,WAAW,WAAW,OAAO,WAAW,QAAQ,aAAa,YAC7D,WAAW,QAAQ,SAAS;GACxB,UAAU;GACV,MAAM;EACV,CAAC;CAET,GAAG;EAAC;EAAY;EAAY;CAAoB,CAAC;CAEjD,OAAO;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACJ;AACJ;;;;;;;;ACpGA,MAAa,+BAA+B,EACxC,YACA,aACA,qBAAqB,YAAY,WACjC,eACA,gBACA,qBACoC;CACpC,MAAM,CAAC,qBAAqB,2BAAA,GAAA,MAAA,SAAA,CAAmC,KAAK;CACpE,MAAM,mBAAmB,iBAAiB,sBAAsB;CAChE,MAAM,WAAWC,2BAAAA,kBAAkB;CACnC,MAAM,mBAAA,GAAA,MAAA,OAAA,CAAiC,WAAW;CAGlD,CAAA,GAAA,MAAA,UAAA,OAAgB;EACZ,IAAI,WAAW,SAAS;GAEpB,IAAI,UACA;GAGJ,MAAM,cAAc,gBAAgB,YAAY;GAGhD,IAAI,gBACA,eAAe,IAAI;QAEnB,uBAAuB,IAAI;GAI/B,MAAM,iBAAiB,WAAW,QAAQ;GAC1C,MAAM,MAAM,QAAQ;GACpB,MAAM,kBAAkB,cAAc,MAAM,iBAAiB;GAI7D,WAAW,QAAQ,SAAS;IACxB,UAAU,cAAc,WAAW;IACnC,MAAM;GACV,CAAC;GAID,MAAM,gBAAgB,iBAAiB;IACnC,IAAI,gBACA,eAAe,KAAK;SAEpB,uBAAuB,KAAK;GAEpC,GAAG,UAAU,cAAc;GAG3B,gBAAgB,UAAU;GAE1B,aAAa;IACT,aAAa,aAAa;GAC9B;EACJ;CAEJ,GAAG;EAAC;EAAa;EAAY;EAAgB;CAAQ,CAAC;;;;;CAMtD,MAAM,iCAAA,GAAA,MAAA,QAAA,QAAA,GAAA,WAAA,SAAA,OAEiB;EACX,IAAI,WAAW,WAAW,CAAC,UAAU;GACjC,MAAM,aAAa,WAAW,QAAQ;GACtC,MAAM,iBAAiB,WAAW,QAAQ;GAC1C,MAAM,MAAM,QAAQ;GACpB,MAAM,UAAU,KAAK,MAAM,cAAc,iBAAiB,IAAI,IAAI;GAElE,IAAI,YAAY,eAAe,WAAW,KAAK,WAAW,eACtD,eAAe,OAAO;EAE9B;CACJ,GAAG,UAAU,cAAc,GAC/B;EAAC;EAAa;EAAe;EAAY;EAAgB;CAAQ,CACrE;;;;;CAMA,MAAM,gCAAA,GAAA,MAAA,QAAA,QAAA,GAAA,WAAA,SAAA,OAEiB;EACX,IAAI,WAAW,WAAW,UAAU;GAChC,MAAM,EAAE,aAAa,YAAY,gBAAgB,WAAW;GAC5D,MAAM,YAAY,cAAc;GAGhC,IAAI,aAAa,GACb,WAAW,QAAQ,aAAa;QAC7B,IAAI,aAAa,WACpB,WAAW,QAAQ,aAAa;GAMpC,MAAM,MAAM,QAAQ;GACpB,MAAM,SAAS,QAAQ;GAEvB,MAAM,cADY,KAAK,IAAI,cAAc,YAAY,iBAAiB,kBAC1C,IAAI;GAIhC,MAAM,qBAAqB,aAAa;GACxC,MAAM,UAAU,KAAK,MAAM,qBAAqB,WAAW,IAAI;GAE/D,IAAI,YAAY,eAAe,WAAW,KAAK,WAAW,eACtD,eAAe,OAAO;EAE9B;CACJ,GAAG,UAAU,cAAc,GAC/B;EAAC;EAAa;EAAoB;EAAe;EAAY;EAAgB;CAAQ,CACzF;CAcA,OAAO;EACH,aAAa;EACb,gBAAA,GAAA,MAAA,YAAA,OAVoC;GACpC,IAAI,UACA,6BAA6B;QAE7B,8BAA8B;EAEtC,GAAG;GAAC;GAAU;GAA8B;EAA6B,CAIzD;CAChB;AACJ;;;;;;;ACzCA,MAAM,4BAAmD;CACrD,YAAY;CACZ,aAAa;CACb,YAAY;AAChB;AAEA,MAAa,eAAe,EACxB,OAAO,cACP,WACA,YACA,YAAY,UACZ,WAAW,MACX,WAAW,SACX,cAAc,YACd,gBAAgB,UAChB,2BACA,cACA,kBACA,wBAAwB,2BACxB,iBAAiB,MACjB,mBAAA,cACA,uBAAuB,iBACd;CAGT,MAAM,SAAA,GAAA,MAAA,QAAA,OAAsB;EACxB,IAAI,aAAa,WAAW,GACxB,OAAO;EAEX,OAAO;CACX,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,gBAAgB,MAAM;CAG5B,MAAM,EACF,cACA,YACA,yBACA,iBACA,mBACA,UACA,yBACA,eAAe;EACf;EACA;CACJ,CAAC;CAGD,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,SAAA,CAA2B,KAAK;CAGpD,MAAM,aAAa,yBAAyB;EACxC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACJ,CAAC;CAGD,MAAM,EAAE,kBAAkB,4BAA4B;EAClD;EACA,aAAa,WAAW;EACxB,oBAAoB,sBAAsB;EAC1C;EACA,gBAAgB,WAAW;EAC3B;CACJ,CAAC;CAGD,MAAM,EACF,aACA,cACA,kBACA,sBACA,oBACA,wBACA,iBACA,oBACA,2BACA;CAGJ,MAAM,6BAAA,GAAA,MAAA,YAAA,OAA8C;EAChD,aAAa;EACb,4BAA4B;GACxB,eAAe,cAAc,gBAAgB,cAAc,IAAI;GAC/D,iBAAiB;GACjB,aAAa;EACjB,CAAC;CACL,GAAG;EAAC;EAAc;EAA2B;EAAa;CAAa,CAAC;CAExE,MAAM,iCAAA,GAAA,MAAA,YAAA,OAAkD;EACpD,iBAAiB;EACjB,4BAA4B;GACxB,eAAe,cAAc,IAAI,cAAc,IAAI;GACnD,iBAAiB;GACjB,aAAa;EACjB,CAAC;CACL,GAAG;EAAC;EAAkB;EAA2B;EAAa;CAAa,CAAC;CAE5E,MAAM,qCAAA,GAAA,MAAA,YAAA,EACD,eAAuB;EAEpB,IAAI,eAAe,eAAe,2BAC9B,0BAA0B;GACtB,eAAe;GACf,iBAAiB;GACjB,aAAa;EACjB,CAAC;EAEL,qBAAqB,UAAU;CACnC,GACA;EAAC;EAAa;EAAsB;EAA2B;CAAa,CAChF;;;;;;;;;;;CAYA,MAAM,iBAAA,GAAA,MAAA,QAAA,OAA8B;EAKhC,QAFsB,CAAC,YAAY,CAAC,oBAAoB,MAAM,MAAM,GAAG,CAAC,IAAI,MAAA,CAEvD,KAAK,EAAE,MAAM,WAAW,OAAO,UAAU;GAE1D,MAAM,cAAc,CAAC,YAAY,CAAC,oBAAoB,IAAI;GAC1D,MAAM,WAAW,cAAc,MAAM;GAErC,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACI,gBAAc,WAAW,SAAS;IAClC,cAAY,SAAS,cAAc,EAAE,MAAM,MAAM,SAAS,WAAW,MAAM,KAAK,UAAU,QAAQ;IAClG,YAAA,GAAA,wBAAA,GAAA,CACI,uFACA,eAAe,mBAAmB,kBAElC,gBAEA,2KAEA,gBAAgB,IACV,+DACA,iDACN;KACI,SAAS,gBAAgB;KACzB,SAAS,gBAAgB,MAAM,SAAS;IAC5C,CACJ;IAEA,UAAU,UAAU;KAEhB,wBAAwB;KAExB,IAAI,2BACA,0BAA0B;MACtB,eAAe,cAAc;MAC7B,iBAAiB;MACjB,aAAa;KACjB,CAAC;KAGL,eAAe,aAAa,KAAK;IACrC;IACA,UAAU,UAAU;KAEhB,wBAAwB;KAExB,mBAAmB,aAAa,KAAK;IACzC;IACA,SACI,gBACO,UAAU;KACP,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;MAC5C,MAAM,eAAe;MAErB,IAAI,2BACA,0BAA0B;OACtB,eAAe,cAAc;OAC7B,iBAAiB;OACjB,aAAa;MACjB,CAAC;MAEL,IAAI,MAAM,QAAQ,SACd,aAAa,aAAa,KAAK;KAEvC;IACJ,IACA,KAAA;IAEV,cAAc,UAAU;KAEpB,gBAAgB;KAEhB,IAAI,kBACA,iBAAiB,aAAa,KAAK;IAE3C;IACA,oBAAoB;KAEhB,wBAAwB;IAC5B;IACA,MAAM,eAAe,WAAW,KAAA;IAChC,UAAU,eAAe,IAAI,KAAA;cAG5B,YACG,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAD;KACuB;KACR;KACX,eAAe;KACf,aAAA;KACuB;IAC1B,CAAA,IAED,QAAQ;GAEX,GApEI,GAoEJ;EAEb,CAAC;CACL,GAAG;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACJ,CAAC;CAED,MAAM,iBAAiB,qBAAA;CACvB,MAAM,gCACF,qBAAA,gBAAoD,yBAAyB;CAEjF,OAEI,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACI,cAAW;EACX,wBAAqB;EACrB,YAAA,GAAA,wBAAA,GAAA,CACI,yDAEA,EAAE,0CAA0C,gBAAgB,EAAE,GAC9D,SACJ;EACA,eAAe,aAAa,SAAS,MAAM;EAC3C,SAAS;EACT,aAAa;EACb,KAAK;EACL,MAAK;EACL,OACI,EACI,iBAAiB,GAAG,sBAAsB,YAAY,IAC1D;EAGJ,UAAU;YAEV,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACI,YAAA,GAAA,wBAAA,GAAA,CACI,iBAEA,2DACJ;aAGA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IACI,YAAA,GAAA,wBAAA,GAAA,CACI,eACA,qBAAA,UACM,iDACA,yBAAyB,eACvB,gDACA,iDACZ;cARJ;KAWK,qBAAA,WAA+C,kBAAkB,SAC9D,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD;MACiB;MACE;KAClB,CAAA;KAIJ,kBACG,qBAAA,gBACA,yBAAyB,cACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAK,WAAU;gBACX,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;OACW;OACM;OACoB;OACR;OACzB,kBAAkB;OAClB,aAAY;MACf,CAAA;KACA,CAAA;KAIb,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;MACI,YAAA,GAAA,wBAAA,GAAA,CACI,qBACA,iBACM,2EACA,gCACE,uCAAA,GAAA,wBAAA,GAAA,CAEI,iCACA,iBAAiB,2CAA2C,EAChE,CACZ;MACA,eAAY;gBAZhB;OAeI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;QAAK,WAAU;kBACX,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;SACI,cAAc;SACd,kBAAkB;SACP;SACD;SACA;SACG;SACO;SACI;SACxB,UAAS;SACW;SACI;QAC3B,CAAA;OACA,CAAA;OAGL,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;QACI,YAAA,GAAA,wBAAA,GAAA,CAEI,YACA,iBACM,oKACA,gCACE,0IACA,iKACZ;QACA,eAAY;kBAVhB,CAaI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;SAAK,WAAU;mBACX,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;UACI,cAAc;UACd,kBAAkB;UACP;UACD;UACA;UACG;UACO;UACI;UACJ;UACI;SAC3B,CAAA;QACA,CAAA,GAGL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;SACI,YAAA,GAAA,wBAAA,GAAA,CAEI,gCAEA,oCACJ;mBAEA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;UACI,eAAY;UACZ,aAAU;UACV,YAAA,GAAA,wBAAA,GAAA,CACI,yEAEA,6BAEA,eACJ;UACA,UAAU;UACV,KAAK;UACL,MAAK;UACL,OAAO,EACH,gBAAgB,OACpB;oBAEC;SACA,CAAA;QACJ,CAAA,CACJ;;OAGL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;QAAK,WAAU;kBACX,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;SACI,cAAc;SACd,kBAAkB;SACP;SACD;SACA;SACG;SACO;SACI;SACxB,UAAS;SACW;SACI;QAC3B,CAAA;OACA,CAAA;MACJ;;KAGJ,kBACG,qBAAA,gBACA,yBAAyB,gBACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAK,WAAU;gBACX,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;OACW;OACM;OACoB;OACR;OACzB,kBAAkB;OAClB,aAAY;MACf,CAAA;KACA,CAAA;KAIZ,qBAAA,WAA+C,kBAAkB,YAC9D,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD;MACiB;MACE;KAClB,CAAA;IAEJ;;EACJ,CAAA;CACA,CAAA;AAEjB"}