{"version":3,"file":"ProductImageGallery-Chunk-26bf8e0a2756333e30a5.js","mappings":"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","sources":["webpack://nikon-client/./components/atoms/NavButton/NavButton.tsx","webpack://nikon-client/./utility/hooks/useHorizontalGrabScroll.ts","webpack://nikon-client/./utility/hooks/useHorizontalScrollShadows.ts","webpack://nikon-client/./components/atoms/ShadowContainerHorizontal/ShadowContainerHorizontal.tsx","webpack://nikon-client/./components/molecules/Carousel/Carousel.tsx","webpack://nikon-client/./components/molecules/PaginationArrows/PaginationArrows.tsx","webpack://nikon-client/./components/atoms/GalleryTabButton/GalleryTabButton.tsx","webpack://nikon-client/./utility/helpers/replaceWithNonBreakingHyphens.ts","webpack://nikon-client/./utility/helpers/scrollIntoViewWithOffset.ts","webpack://nikon-client/./components/organisms/ProductImageGallery/ProductImageGallery.tsx","webpack://nikon-client/./models/enums/HorizontalDirectionEnum.ts","webpack://nikon-client/./models/enums/ScrollProgressEnum.ts","webpack://nikon-client/./utility/hooks/useMediaQuery.ts","webpack://nikon-client/./utility/hooks/useResizeObserver.ts","webpack://nikon-client/./assets/hue_hero.svg"],"sourcesContent":["import Icon from '@atoms/Icon/Icon';\nimport HorizontalDirectionEnum from '@models/enums/HorizontalDirectionEnum';\nimport updateDataLayer from '@utils/helpers/gtm';\nimport useAriaLabels from '@utils/hooks/useAriaLabels';\nimport classNames from 'classnames';\nimport { forwardRef, KeyboardEvent, useImperativeHandle, useRef } from 'react';\n\ninterface Props {\n  readonly direction:\n    | HorizontalDirectionEnum.Left\n    | HorizontalDirectionEnum.Right;\n  readonly id?: string;\n  readonly disabled?: boolean;\n  readonly hasBackgroundColor?: boolean;\n  readonly sizeClassName?: string;\n  readonly iconSize?: string;\n  readonly enabledArrowColor?: string;\n  readonly onClick?: (e?: KeyboardEvent<HTMLButtonElement>) => void;\n  readonly additionalDataLayerProperties?: Record<string, string>;\n  readonly isLightMode?: boolean;\n}\n\nexport interface NavButtonRef {\n  focus: () => void;\n  disabled: boolean;\n}\n\nconst NavButton = forwardRef<NavButtonRef, Props>(\n  (\n    {\n      additionalDataLayerProperties,\n      direction,\n      id,\n      disabled = false,\n      hasBackgroundColor = true,\n      sizeClassName = 'h-10 w-10',\n      iconSize,\n      enabledArrowColor = 'text-black-100',\n      isLightMode,\n      onClick,\n    },\n    ref\n  ) => {\n    const { nextAriaLabel, previousAriaLabel } = useAriaLabels();\n    const buttonRef = useRef<HTMLButtonElement>(null);\n\n    useImperativeHandle(ref, () => ({\n      focus: () => buttonRef.current?.focus(),\n      disabled: !!buttonRef.current?.disabled,\n    }));\n\n    return (\n      <button\n        ref={buttonRef}\n        id={`${\n          direction === HorizontalDirectionEnum.Left ? 'prevBtn' : 'nextBtn'\n        }-${id}`}\n        className={classNames(\n          'flex select-none items-center justify-center rounded-full',\n          sizeClassName,\n          {\n            'animate-arrow-left':\n              direction === HorizontalDirectionEnum.Left && !disabled,\n            'animate-arrow-right':\n              direction === HorizontalDirectionEnum.Right && !disabled,\n            'cursor-pointer': !disabled,\n            'cursor-default': disabled,\n            'bg-yellow active:bg-yellow-500 xl:hover:bg-yellow-100 xl:active:bg-yellow-500':\n              hasBackgroundColor && !disabled,\n            [`bg-grey ${isLightMode ? '' : 'dark:bg-grey-600'}`]:\n              hasBackgroundColor && disabled,\n          }\n        )}\n        aria-label={\n          direction === HorizontalDirectionEnum.Left\n            ? previousAriaLabel\n            : nextAriaLabel\n        }\n        disabled={disabled}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        data-testid={\n          direction === HorizontalDirectionEnum.Left\n            ? 'previous-slide'\n            : 'next-slide'\n        }\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') onClick?.(e);\n        }}\n        onClick={() => {\n          onClick?.();\n          updateDataLayer({\n            event: 'carousel',\n            content_type: 'tab_change',\n            link_text:\n              direction === HorizontalDirectionEnum.Left ? 'Previous' : 'Next',\n            ...additionalDataLayerProperties,\n          });\n        }}\n      >\n        <Icon\n          name={`arrow_${\n            direction === HorizontalDirectionEnum.Left ? 'left' : 'right'\n          }`}\n          colorClassName={\n            disabled\n              ? `text-grey-400 ${isLightMode ? '' : 'dark:text-grey-700'}`\n              : enabledArrowColor\n          }\n          size={iconSize}\n        />\n      </button>\n    );\n  }\n);\n\nexport default NavButton;\n","import { RefObject, useEffect, useRef, useState } from 'react';\n\nconst useHorizontalGrabScroll = (\n  containerRef: RefObject<HTMLElement>,\n  disabled: boolean\n) => {\n  const [isMouseDown, setIsMouseDown] = useState(false);\n  const mouseScrollPosition = useRef<{\n    top: number;\n    left: number;\n    x: number;\n    y: number;\n  }>({\n    top: 0,\n    left: 0,\n    x: 0,\n    y: 0,\n  });\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container?.clientWidth) return;\n\n    if (container.clientWidth >= container.scrollWidth || disabled) {\n      container.style.cursor = 'inherit';\n      return;\n    }\n\n    if (isMouseDown) {\n      container.style.cursor = 'grabbing';\n      return;\n    }\n\n    container.style.cursor = 'grab';\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMouseDown, disabled]);\n\n  useEffect(() => {\n    mouseScrollPosition.current = { top: 0, left: 0, x: 0, y: 0 };\n    const container = containerRef.current;\n\n    if (!container) return () => ({});\n    if (disabled) {\n      container.scrollTop = 0;\n      container.scrollLeft = 0;\n\n      return () => ({});\n    }\n\n    const mouseMoveHandler = (e: MouseEvent) => {\n      const dx = e.clientX - mouseScrollPosition.current.x;\n      const dy = e.clientY - mouseScrollPosition.current.y;\n\n      container.scrollTop = mouseScrollPosition.current.top - dy;\n      container.scrollLeft = mouseScrollPosition.current.left - dx;\n    };\n\n    const mouseUpHandler = () => {\n      document.removeEventListener('mousemove', mouseMoveHandler);\n      document.removeEventListener('mouseup', mouseUpHandler);\n      setIsMouseDown(false);\n    };\n\n    const mouseDownHandler = (e: MouseEvent) => {\n      mouseScrollPosition.current = {\n        top: container.scrollTop,\n        left: container.scrollLeft,\n        x: e.clientX,\n        y: e.clientY,\n      };\n      setIsMouseDown(true);\n\n      document.addEventListener('mousemove', mouseMoveHandler);\n      document.addEventListener('mouseup', mouseUpHandler);\n    };\n\n    const onWheel = (e: WheelEvent) => {\n      if (e.deltaY === 0) return;\n\n      container.scrollTo({\n        left: container.scrollLeft + e.deltaY,\n        behavior: 'smooth',\n      });\n    };\n\n    container.addEventListener('mousedown', mouseDownHandler);\n    container.addEventListener('wheel', onWheel, { passive: true });\n\n    return () => {\n      container.removeEventListener('mousedown', mouseDownHandler);\n      container.removeEventListener('wheel', onWheel);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled]);\n};\n\nexport default useHorizontalGrabScroll;\n","import ScrollProgressEnum from '@models/enums/ScrollProgressEnum';\nimport { useMotionValueEvent, useScroll } from 'framer-motion';\nimport { RefObject, useEffect, useState } from 'react';\n\nconst useHorizontalScrollShadows = (\n  containerRef: RefObject<HTMLElement>,\n  threshold: number,\n  disabled: boolean\n) => {\n  const { scrollXProgress } = useScroll({ container: containerRef });\n  const [isStart, setIsStart] = useState(true);\n  const [isEnd, setIsEnd] = useState(false);\n  const [scrollProgress, setScrollProgress] = useState(\n    ScrollProgressEnum.Start\n  );\n\n  useMotionValueEvent(scrollXProgress, 'change', (value: number) => {\n    if (value < threshold) {\n      setScrollProgress(ScrollProgressEnum.Start);\n    }\n\n    if (value >= threshold && value <= 1 - threshold) {\n      setScrollProgress(ScrollProgressEnum.Middle);\n    }\n\n    if (value > 1 - threshold) {\n      setScrollProgress(ScrollProgressEnum.End);\n    }\n  });\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container?.clientWidth || disabled) return;\n\n    const { clientWidth, scrollWidth } = container;\n    if (clientWidth >= scrollWidth) {\n      setIsStart(true);\n      setIsEnd(true);\n\n      return;\n    }\n\n    if (scrollProgress === ScrollProgressEnum.Start) {\n      setIsStart(true);\n      setIsEnd(false);\n    }\n\n    if (scrollProgress === ScrollProgressEnum.Middle) {\n      setIsStart(false);\n      setIsEnd(false);\n    }\n\n    if (scrollProgress === ScrollProgressEnum.End) {\n      setIsEnd(true);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled, scrollProgress]);\n\n  return { isStart, isEnd };\n};\n\nexport default useHorizontalScrollShadows;\n","import useHorizontalGrabScroll from '@utils/hooks/useHorizontalGrabScroll';\nimport useHorizontalScrollShadows from '@utils/hooks/useHorizontalScrollShadows';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport {\n  PropsWithChildren,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nexport interface IShadowContainerHorizontalRef {\n  readonly scrollTo: (offset: number) => void;\n  readonly getOffsetWidth: () => number;\n}\n\ninterface Props {\n  readonly className?: string;\n  readonly shadowColour?: string;\n  readonly threshold?: number;\n  readonly showStart?: boolean; // Manually override shadows from a parent component\n  readonly showEnd?: boolean;\n  readonly disableScroll?: boolean; // Used together with showStart/showEnd to disable scrolling within the container (e.g. when we want to wrap a carousel within some left/right shadows, we want to use the carousel's scrolling/swiping, not the container's one)\n  readonly shadowWidth?: string;\n  readonly isNoWrapEnabled?: boolean;\n}\n\nconst ShadowContainerHorizontal = forwardRef<\n  IShadowContainerHorizontalRef,\n  PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      className,\n      disableScroll = false,\n      shadowColour = 'from-white dark:from-black-100',\n      threshold = 0.05,\n      showStart = false,\n      showEnd = true,\n      shadowWidth = 'w-10',\n      isNoWrapEnabled = true,\n    },\n    ref\n  ) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { isStart, isEnd } = useHorizontalScrollShadows(\n      containerRef,\n      threshold,\n      disableScroll\n    );\n    useHorizontalGrabScroll(containerRef, disableScroll);\n\n    useImperativeHandle(ref, () => ({\n      scrollTo: (leftOffset: number) => {\n        containerRef.current?.scrollTo({\n          left: leftOffset,\n          behavior: 'smooth',\n        });\n      },\n      getOffsetWidth: () => containerRef.current?.offsetWidth ?? 0,\n    }));\n\n    return (\n      <div className={classNames(className, 'relative')}>\n        <AnimatePresence>\n          {(!isStart || showStart) && (\n            <motion.span\n              animate={{ opacity: 1 }}\n              className={classNames(\n                shadowColour,\n                shadowWidth,\n                'pointer-events-none absolute left-0 top-0 z-10 -ml-[1px] h-full bg-gradient-to-r to-transparent'\n              )}\n              exit={{ opacity: 0 }}\n              initial={{ opacity: 0 }}\n              transition={{ duration: 0.25 }}\n            />\n          )}\n        </AnimatePresence>\n\n        <div\n          ref={containerRef}\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n          tabIndex={0}\n          className={classNames(\n            {\n              'z-0 overflow-x-hidden': disableScroll,\n              'overflow-x-auto': !disableScroll,\n              'whitespace-nowrap': isNoWrapEnabled,\n            },\n            'relative select-none scrollbar-hide'\n          )}\n        >\n          {children}\n        </div>\n\n        {/* isEnd is always false when using showEnd override so !isEnd is always true */}\n        <AnimatePresence>\n          {!isEnd && showEnd && (\n            <motion.span\n              animate={{ opacity: 1 }}\n              className={classNames(\n                shadowColour || 'from-white dark:from-black-100',\n                shadowWidth,\n                'pointer-events-none absolute right-0 top-0 z-10 -ml-[1px] h-full bg-gradient-to-l to-transparent'\n              )}\n              exit={{ opacity: 0 }}\n              initial={{ opacity: 0 }}\n              transition={{ duration: 0.25 }}\n            />\n          )}\n        </AnimatePresence>\n      </div>\n    );\n  }\n);\n\nexport default ShadowContainerHorizontal;\n","import updateDataLayer from '@utils/helpers/gtm';\nimport { PropsWithChildren } from 'react';\nimport { A11y, Keyboard, Navigation } from 'swiper/modules';\nimport { Swiper, SwiperProps } from 'swiper/react';\nimport 'swiper/scss';\nimport 'swiper/scss/a11y';\nimport 'swiper/scss/autoplay';\nimport 'swiper/scss/effect-fade';\nimport 'swiper/scss/keyboard';\nimport { SwiperModule } from 'swiper/types';\n\ninterface Props extends SwiperProps {\n  readonly additionalModules?: SwiperModule[];\n  readonly className?: string;\n  readonly id?: string;\n  readonly navId?: string;\n  readonly analyticsEnabled?: boolean;\n}\n\nconst Carousel = ({\n  additionalModules = [],\n  children,\n  className,\n  id = 'carousel',\n  navId = '',\n  analyticsEnabled = false,\n  ...props\n}: PropsWithChildren<Props>) => {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <Swiper\n      id={id}\n      onSlideChangeTransitionEnd={(swiper) => {\n        if (analyticsEnabled && swiper.realIndex !== 0) {\n          updateDataLayer({\n            event: 'carousel',\n            content_type: `tab_change`,\n            link_text:\n              swiper.previousIndex < swiper.activeIndex ? 'Next' : 'Previous',\n          });\n        }\n      }}\n      a11y={{ enabled: true }}\n      className={className}\n      navigation={{\n        enabled: !!navId,\n        prevEl: `#prevBtn-${navId}`,\n        nextEl: `#nextBtn-${navId}`,\n      }}\n      keyboard={{\n        enabled: true,\n        onlyInViewport: true,\n      }}\n      modules={[...[A11y, Keyboard, Navigation], ...additionalModules]}\n      {...props}\n    >\n      {children}\n    </Swiper>\n  );\n};\n\nexport default Carousel;\n","import NavButton from '@atoms/NavButton/NavButton';\nimport HorizontalDirectionEnum from '@models/enums/HorizontalDirectionEnum';\nimport useMediaQuery from '@utils/hooks/useMediaQuery';\nimport classNames from 'classnames';\n\ninterface Props {\n  readonly arrowIconSize?: string;\n  readonly carouselNavId: string;\n  readonly componentName: string;\n  readonly counterText: string;\n  readonly dataTestId?: string;\n  readonly isCounterTextBetweenArrows?: boolean;\n  readonly hasWrapper?: boolean;\n  readonly productName?: string;\n}\n\nconst PaginationArrows = ({\n  arrowIconSize = '1.05rem',\n  carouselNavId,\n  componentName,\n  counterText,\n  dataTestId = 'Pagination-Arrows',\n  isCounterTextBetweenArrows = false,\n  hasWrapper = true,\n  productName = '',\n}: Props) => {\n  const isMobile = useMediaQuery(1024);\n\n  return (\n    <div\n      className={classNames({\n        'flex rounded-[40px] bg-grey-600 py-2.5 pl-5 pr-[15px]': hasWrapper,\n      })}\n      data-testid={dataTestId}\n    >\n      <div className=\"flex h-full items-center justify-center gap-2.5\">\n        {!isCounterTextBetweenArrows && (\n          <p\n            className={classNames(\n              'pr-2.5 text-grey-200',\n              isMobile ? 'body-four' : 'body-three'\n            )}\n          >\n            {counterText}\n          </p>\n        )}\n\n        <NavButton\n          direction={HorizontalDirectionEnum.Left}\n          id={carouselNavId}\n          sizeClassName=\"h-[18px] w-[18px] lg:w-[28px] lg:h-[28px]\"\n          iconSize={arrowIconSize}\n          additionalDataLayerProperties={{\n            product_id: productName,\n            component_name: componentName,\n          }}\n        />\n\n        {isCounterTextBetweenArrows && (\n          <p className=\"body-three hidden text-yellow lg:block\">\n            {counterText}\n          </p>\n        )}\n\n        <NavButton\n          direction={HorizontalDirectionEnum.Right}\n          id={carouselNavId}\n          sizeClassName=\"h-[18px] w-[18px] lg:w-[28px] lg:h-[28px]\"\n          iconSize={arrowIconSize}\n          additionalDataLayerProperties={{\n            product_id: productName,\n            component_name: componentName,\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default PaginationArrows;\n","import Icon from '@atoms/Icon/Icon';\nimport useMediaQuery from '@utils/hooks/useMediaQuery';\nimport classNames from 'classnames';\n\ninterface Props {\n  readonly isActive: boolean;\n  readonly onClick: () => void;\n  readonly icon: string;\n  readonly label: string;\n  readonly rightDesktopPadding?: number;\n}\n\nconst GalleryTabButton = ({\n  isActive,\n  onClick,\n  icon,\n  label,\n  rightDesktopPadding = 15,\n}: Props) => {\n  const isMobile = useMediaQuery(1024);\n\n  return (\n    <button\n      tabIndex={0}\n      onClick={onClick}\n      className={classNames(\n        'flex-start group flex flex-row items-center rounded-[40px] border border-transparent bg-grey-600 py-[10px] transition-colors hover:border-yellow max-lg:px-5 lg:pl-5',\n        {\n          'border-yellow text-yellow': isActive,\n        }\n      )}\n      style={{\n        ...(isMobile\n          ? {}\n          : {\n              paddingRight: rightDesktopPadding,\n            }),\n      }}\n    >\n      <div className=\"flex items-center justify-center pr-2.5\">\n        <Icon\n          name={icon}\n          colorClassName=\"transition-colors group-hover:text-yellow\"\n        />\n      </div>\n\n      {label && (\n        <div\n          key={`tab-${label}`}\n          className={classNames(\n            'flex w-auto flex-col items-center transition-colors group-hover:text-yellow',\n            isActive ? 'text-yellow' : 'text-grey-500'\n          )}\n        >\n          <div className=\"body-three whitespace-nowrap\">{label}</div>\n        </div>\n      )}\n    </button>\n  );\n};\n\nexport default GalleryTabButton;\n","const replaceWithNonBreakingHyphens = (text: string) =>\n  text.replaceAll('-', '‑');\n\nexport default replaceWithNonBreakingHyphens;\n","const scrollIntoViewWithOffset = (\n  element: HTMLElement,\n  offset: number,\n  behavior: ScrollBehavior = 'smooth'\n) => {\n  window.scrollTo({\n    behavior,\n    top:\n      (element.getBoundingClientRect().top ?? 0) -\n      document.body.getBoundingClientRect().top -\n      offset,\n  });\n};\n\nexport default scrollIntoViewWithOffset;\n","import Hue from '@assets/hue_hero.svg';\nimport GalleryTabButton from '@atoms/GalleryTabButton/GalleryTabButton';\nimport Image from '@atoms/Image/Image';\nimport ShadowContainerHorizontal from '@atoms/ShadowContainerHorizontal/ShadowContainerHorizontal';\nimport IExternalVideo from '@models/IExternalVideo';\nimport { IImage } from '@models/IImage';\nimport { IMeta } from '@models/IMeta';\nimport Carousel from '@molecules/Carousel/Carousel';\nimport EmbeddedVideo from '@molecules/EmbeddedVideo/EmbeddedVideo';\nimport PaginationArrows from '@molecules/PaginationArrows/PaginationArrows';\nimport updateDataLayer from '@utils/helpers/gtm';\nimport replaceWithNonBreakingHyphens from '@utils/helpers/replaceWithNonBreakingHyphens';\nimport useMediaQuery from '@utils/hooks/useMediaQuery';\nimport useResizeObserver from '@utils/hooks/useResizeObserver';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useRef, useState } from 'react';\nimport { SwiperSlide } from 'swiper/react';\nimport scrollIntoViewWithOffset from '../../../utility/helpers/scrollIntoViewWithOffset';\n\ninterface Props {\n  readonly meta?: IMeta;\n  readonly images?: IImage[];\n  readonly video?: IExternalVideo;\n  readonly backgroundImage?: IImage;\n  readonly videoLabel?: string;\n  readonly imageLabel?: string;\n  readonly videoIcon?: string;\n  readonly imageIcon?: string;\n  readonly anchorId?: string;\n  readonly title?: string;\n  readonly subtitle?: string;\n  readonly dividerText?: string;\n}\n\nconst enum GalleryTabsEnum {\n  Video = 'video',\n  Images = 'images',\n}\n\nconst ProductImageGallery = ({\n  meta,\n  images,\n  video,\n  backgroundImage,\n  videoLabel = '',\n  imageLabel = '',\n  videoIcon = '',\n  imageIcon = '',\n  anchorId = '',\n  title,\n  subtitle,\n  dividerText = '/',\n}: Props) => {\n  const isTablet = useMediaQuery(1024);\n  const isMobile = useMediaQuery(768);\n  const [paginationRef, { width: paginationWidth }] = useResizeObserver();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // When 3D is implemented, tab must be called 'view_3d' to integrate with Nikon GA\n  const [activeTab, setActiveTab] = useState(\n    images?.length ? GalleryTabsEnum.Images : GalleryTabsEnum.Video\n  );\n  const [currentImageSlideIndex, setCurrentImageSlideIndex] = useState(1);\n  const carouselNavId = 'product-image-gallery';\n  const imagesPaginationCounterText = `${currentImageSlideIndex} ${dividerText} ${\n    images?.length ?? 0\n  }`;\n  const showTabs = video && !!images?.length;\n\n  const setTab = (tab: GalleryTabsEnum) => {\n    setActiveTab(tab);\n    updateDataLayer({\n      event: 'selectContent',\n      content_type: 'product_image_side_menu',\n      selection: tab,\n    });\n  };\n\n  if (!video && !images?.length) return null;\n\n  return (\n    <section\n      id={`a-${anchorId}`}\n      className=\"bg-black-100 pb-20 pt-20 text-white xl:pt-28\"\n      data-epi-block-id={meta?.contentLink}\n      data-testid=\"CT-14-Product-Image-Gallery\"\n    >\n      <div\n        className={classNames('container', {\n          'flex flex-col xl:flex-row': title && subtitle,\n        })}\n        ref={containerRef}\n      >\n        {title && subtitle && (\n          <div className=\"flex flex-col justify-center gap-6 text-center max-xl:items-center max-xl:px-2.5 max-xl:pb-10 xl:w-2/5 xl:gap-10 xl:pr-15 xl:text-left 2xl:pr-24\">\n            <h1\n              className=\"mount\"\n              data-testid=\"CT-14-Product-Image-Gallery-Title\"\n            >\n              {replaceWithNonBreakingHyphens(title)}\n            </h1>\n            <p\n              className={classNames('text-grey-400', isTablet ? 'h5' : 'h3')}\n              data-testid=\"CT-14-Product-Image-Gallery-Subtitle\"\n            >\n              {subtitle}\n            </p>\n          </div>\n        )}\n\n        <div\n          className={classNames('relative z-[1] flex w-full flex-col', {\n            'xl:w-3/5': title && subtitle,\n          })}\n        >\n          {activeTab === GalleryTabsEnum.Video && (\n            <motion.div\n              className=\"w-full pr-0 xl:pr-[150px]\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.5 }}\n              exit={{ opacity: 0 }}\n            >\n              <EmbeddedVideo {...video} embedded />\n            </motion.div>\n          )}\n\n          {activeTab === GalleryTabsEnum.Images && (\n            <motion.div\n              className=\"w-full\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.5 }}\n              exit={{ opacity: 0 }}\n            >\n              <div className=\"relative select-none\">\n                <Carousel\n                  tabIndex={0}\n                  slidesPerView={1}\n                  loop\n                  navId={carouselNavId}\n                  onSlideChange={(swiper) => {\n                    setCurrentImageSlideIndex(swiper.realIndex + 1);\n                  }}\n                  id={carouselNavId}\n                  data-testid=\"CT-14-Product-Image-Gallery-Carousel\"\n                >\n                  {images?.map((image, index) => (\n                    <SwiperSlide\n                      key={`Product-Gallery-${image.desktop?.url}`}\n                      className=\"stretch-card flex items-center justify-center\"\n                    >\n                      <div className=\"flex h-[350px] w-full select-none md:h-[500px]\">\n                        <Image\n                          image={image}\n                          classes=\"flex justify-center w-full\"\n                          imageClasses=\"object-contain w-full h-full\"\n                          lazyLoad={index !== 0}\n                          dataTestId={`CT-14-Product-Image-Gallery-Image-${index}`}\n                        />\n                      </div>\n                    </SwiperSlide>\n                  ))}\n\n                  {backgroundImage && (\n                    <Image\n                      image={backgroundImage}\n                      classes=\"w-full\"\n                      imageClasses=\"absolute left-1/2 -translate-x-1/2 xl:flex xl:px-[200px] h-full w-auto inset-y-0 z-0\"\n                      dataTestId=\"CT-14-Product-Image-Gallery-Background-Image\"\n                    />\n                  )}\n                </Carousel>\n\n                <div className=\"pointer-events-none absolute left-0 top-0 -z-[1] flex h-full w-full items-center justify-center\">\n                  <img\n                    alt=\"background-hue\"\n                    src={`${Hue}`}\n                    className=\"w-full object-contain lg:w-3/4\"\n                  />\n                </div>\n              </div>\n            </motion.div>\n          )}\n        </div>\n      </div>\n\n      <AnimatePresence>\n        {images && images?.length > 1 && (\n          <motion.div\n            className={classNames(\n              'mt-13 h-10 items-center justify-center',\n              activeTab !== GalleryTabsEnum.Images ? 'hidden' : 'flex',\n              {\n                'lg:hidden': !!video,\n              }\n            )}\n            initial={{ opacity: 0 }}\n            transition={{ duration: 0.5 }}\n            animate={{\n              opacity: 1,\n            }}\n          >\n            <PaginationArrows\n              carouselNavId={carouselNavId}\n              componentName=\"Product Image Gallery\"\n              counterText={imagesPaginationCounterText}\n              arrowIconSize={isTablet ? '0.7rem' : '1.05rem'}\n              productName={title}\n              dataTestId=\"CT-14-Product-Image-Gallery-Pagination\"\n            />\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      <AnimatePresence>\n        {showTabs && (\n          <motion.div\n            initial={{ opacity: 0 }}\n            transition={{ duration: 0.5 }}\n            animate={{\n              opacity:\n                paginationWidth > 0 || images?.length === 1 || isTablet ? 1 : 0,\n            }}\n          >\n            <ShadowContainerHorizontal className=\"mt-10 lg:mt-28\">\n              <div\n                className=\"flex items-center justify-around gap-x-5 md:justify-center\"\n                data-testid=\"CT-14-Product-Image-Gallery-Tab-Buttons\"\n              >\n                {video && (\n                  <div className=\"pointer-events-auto\">\n                    <GalleryTabButton\n                      onClick={() => {\n                        setCurrentImageSlideIndex(1);\n                        setTab(GalleryTabsEnum.Video);\n                        if (isMobile) {\n                          scrollIntoViewWithOffset(\n                            containerRef.current as HTMLElement,\n                            120\n                          );\n                        }\n                      }}\n                      label={videoLabel}\n                      icon={videoIcon}\n                      isActive={activeTab === GalleryTabsEnum.Video}\n                    />\n                  </div>\n                )}\n\n                {images && (\n                  <div className=\"pointer-events-auto relative\">\n                    <GalleryTabButton\n                      onClick={() => {\n                        setTab(GalleryTabsEnum.Images);\n                        if (isMobile) {\n                          scrollIntoViewWithOffset(\n                            containerRef.current as HTMLElement,\n                            120\n                          );\n                        }\n                      }}\n                      label={imageLabel}\n                      icon={imageIcon}\n                      isActive={activeTab === GalleryTabsEnum.Images}\n                      rightDesktopPadding={\n                        images?.length > 1 &&\n                        activeTab === GalleryTabsEnum.Images\n                          ? paginationWidth + 45\n                          : 15\n                      }\n                    />\n\n                    {images?.length > 1 &&\n                      activeTab === GalleryTabsEnum.Images && (\n                        <div\n                          ref={paginationRef}\n                          className=\"absolute right-[15px] top-0 flex h-full items-center max-lg:hidden\"\n                        >\n                          <PaginationArrows\n                            carouselNavId={carouselNavId}\n                            componentName=\"Product Image Gallery\"\n                            counterText={imagesPaginationCounterText}\n                            isCounterTextBetweenArrows\n                            productName={title}\n                            hasWrapper={false}\n                          />\n                        </div>\n                      )}\n                  </div>\n                )}\n              </div>\n            </ShadowContainerHorizontal>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </section>\n  );\n};\n\nexport default ProductImageGallery;\n","enum HorizontalDirectionEnum {\n  Left = 'LEFT',\n  Right = 'RIGHT',\n}\n\nexport default HorizontalDirectionEnum;\n","enum ScrollProgressEnum {\n  Start = 'Start',\n  Middle = 'Middle',\n  End = 'End',\n}\n\nexport default ScrollProgressEnum;\n","import { useCallback, useEffect, useState } from 'react';\n\nconst useMediaQuery = (minWidth: number) => {\n  // Set the default value to undefined in order to properly distinguish the falsey values\n  // where undefined is the value before computing whether the screen size is smaller than the minWidth\n  // i.e. a state where we don't really know whether we're below the threshold or not\n  // and false is the value where the computation returns false\n  const [isSmallerThan, setIsSmallerThan] = useState<boolean>();\n\n  const handler = useCallback(() => {\n    const isDesiredWidth = window.innerWidth < minWidth;\n    setIsSmallerThan(isDesiredWidth);\n  }, [minWidth]);\n\n  useEffect(() => {\n    window.addEventListener('resize', handler);\n    handler();\n\n    return () => {\n      window.removeEventListener('resize', handler);\n    };\n  }, [handler]);\n\n  return isSmallerThan;\n};\n\nexport default useMediaQuery;\n","import { useCallback, useRef, useState } from 'react';\n\nconst useResizeObserver = () => {\n  const observerRef = useRef<ResizeObserver>();\n  const [resizeParameters, setResizeParameters] = useState({\n    width: 0,\n    height: 0,\n    clientWidth: 0,\n    clientHeight: 0,\n    scrollWidth: 0,\n    scrollHeight: 0,\n  });\n\n  const handleResize = useCallback((entries: ResizeObserverEntry[]) => {\n    if (!Array.isArray(entries)) return;\n\n    const entry = entries[0];\n\n    setResizeParameters({\n      width: entry?.contentRect.width ?? 0,\n      height: entry?.contentRect.height ?? 0,\n      clientWidth: entry?.target.clientWidth ?? 0,\n      clientHeight: entry?.target.clientHeight ?? 0,\n      scrollWidth: entry?.target.scrollWidth ?? 0,\n      scrollHeight: entry?.target.scrollHeight ?? 0,\n    });\n  }, []);\n\n  const ref = useCallback(\n    (node: HTMLElement | null) => {\n      if (observerRef.current && !node) {\n        observerRef.current.disconnect();\n        observerRef.current = undefined;\n      }\n\n      if (!observerRef.current && node) {\n        observerRef.current = new ResizeObserver(handleResize);\n        observerRef.current.observe(node);\n      }\n    },\n    [handleResize]\n  );\n\n  return [ref, resizeParameters] as const;\n};\n\nexport default useResizeObserver;\n","module.exports = \"data:image/svg+xml,%3csvg width='1151' height='1150' viewBox='0 0 1151 1150' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg opacity='0.35' filter='url(%23filter0_df_4014_178052)'%3e %3cpath d='M801 575C801 699.264 700.04 800 575.5 800C450.96 800 350 699.264 350 575C350 450.736 450.96 350 575.5 350C700.04 350 801 450.736 801 575Z' fill='%23FFDD00'/%3e %3c/g%3e %3cdefs%3e %3cfilter id='filter0_df_4014_178052' x='0' y='0' width='1151' height='1150' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e %3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e %3cfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e %3cfeOffset dy='1.66516'/%3e %3cfeGaussianBlur stdDeviation='0.832579'/%3e %3cfeComposite in2='hardAlpha' operator='out'/%3e %3cfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3e %3cfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_4014_178052'/%3e %3cfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_4014_178052' result='shape'/%3e %3cfeGaussianBlur stdDeviation='175' result='effect2_foregroundBlur_4014_178052'/%3e %3c/filter%3e %3c/defs%3e %3c/svg%3e\""],"names":["forwardRef","_ref","ref","additionalDataLayerProperties","direction","id","disabled","hasBackgroundColor","sizeClassName","iconSize","enabledArrowColor","isLightMode","onClick","nextAriaLabel","previousAriaLabel","useAriaLabels","buttonRef","useRef","useImperativeHandle","focus","current","React","createElement","HorizontalDirectionEnum","Left","className","classNames","Right","tabIndex","onKeyDown","e","key","updateDataLayer","event","content_type","link_text","Icon","name","colorClassName","size","useHorizontalGrabScroll","containerRef","isMouseDown","setIsMouseDown","useState","mouseScrollPosition","top","left","x","y","useEffect","container","clientWidth","scrollWidth","style","cursor","scrollTop","scrollLeft","mouseMoveHandler","dx","clientX","dy","clientY","mouseUpHandler","document","removeEventListener","mouseDownHandler","addEventListener","onWheel","deltaY","scrollTo","behavior","passive","useHorizontalScrollShadows","threshold","scrollXProgress","useScroll","isStart","setIsStart","isEnd","setIsEnd","scrollProgress","setScrollProgress","ScrollProgressEnum","Start","useMotionValueEvent","value","Middle","End","children","disableScroll","shadowColour","showStart","showEnd","shadowWidth","isNoWrapEnabled","leftOffset","getOffsetWidth","offsetWidth","AnimatePresence","motion","span","animate","opacity","exit","initial","transition","duration","additionalModules","navId","analyticsEnabled","props","Swiper","_extends","onSlideChangeTransitionEnd","swiper","realIndex","previousIndex","activeIndex","a11y","enabled","navigation","prevEl","nextEl","keyboard","onlyInViewport","modules","A11y","Keyboard","Navigation","arrowIconSize","carouselNavId","componentName","counterText","dataTestId","isCounterTextBetweenArrows","hasWrapper","productName","isMobile","useMediaQuery","NavButton","product_id","component_name","isActive","icon","label","rightDesktopPadding","paddingRight","text","replaceAll","element","offset","arguments","length","undefined","window","getBoundingClientRect","body","GalleryTabsEnum","meta","images","video","backgroundImage","videoLabel","imageLabel","videoIcon","imageIcon","anchorId","title","subtitle","dividerText","isTablet","paginationRef","width","paginationWidth","useResizeObserver","activeTab","setActiveTab","Images","Video","currentImageSlideIndex","setCurrentImageSlideIndex","imagesPaginationCounterText","showTabs","setTab","tab","selection","contentLink","replaceWithNonBreakingHyphens","div","EmbeddedVideo","embedded","Carousel","slidesPerView","loop","onSlideChange","map","image","index","SwiperSlide","desktop","url","Image","classes","imageClasses","lazyLoad","alt","src","Hue","PaginationArrows","ShadowContainerHorizontal","GalleryTabButton","scrollIntoViewWithOffset","minWidth","isSmallerThan","setIsSmallerThan","handler","useCallback","isDesiredWidth","innerWidth","observerRef","resizeParameters","setResizeParameters","height","clientHeight","scrollHeight","handleResize","entries","Array","isArray","entry","contentRect","target","node","disconnect","ResizeObserver","observe","module","exports"],"sourceRoot":""}