{"version":3,"file":"PreReleaseCaptureImageHighlight-Chunk-86c0eb3edf35371bd08c.js","mappings":"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","sources":["webpack://nikon-client/./components/atoms/Image/Image.tsx","webpack://nikon-client/./components/organisms/PreReleaseCaptureImageHighlight/PreReleaseCaptureImageHighlight.tsx","webpack://nikon-client/./models/enums/BreakpointEnum.ts","webpack://nikon-client/./utility/helpers/slugify.ts","webpack://nikon-client/./utility/hooks/useBreakpoint.ts","webpack://nikon-client/./utility/hooks/useMediaQuery.ts","webpack://nikon-client/./utility/hooks/usePreviewMode.ts","webpack://nikon-client/./utility/hooks/useResizeObserver.ts","webpack://nikon-client/./node_modules/.pnpm/framer-motion@10.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/value/use-motion-value.mjs","webpack://nikon-client/./node_modules/.pnpm/framer-motion@10.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/value/use-spring.mjs","webpack://nikon-client/./node_modules/.pnpm/framer-motion@10.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/utils/transform.mjs","webpack://nikon-client/./node_modules/.pnpm/framer-motion@10.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/value/use-combine-values.mjs","webpack://nikon-client/./node_modules/.pnpm/framer-motion@10.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/value/use-transform.mjs","webpack://nikon-client/./node_modules/.pnpm/framer-motion@10.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/value/use-computed.mjs"],"sourcesContent":["import BreakpointEnum from '@models/enums/BreakpointEnum';\nimport { IImage } from '@models/IImage';\nimport useBreakpoint from '@utils/hooks/useBreakpoint';\nimport classNames from 'classnames';\nimport { PropsWithChildren, RefObject, useState } from 'react';\n\ninterface Props {\n readonly classes?: string;\n readonly dataTestId?: string;\n readonly epiEdit?: string;\n readonly image?: IImage;\n readonly imageClasses?: string;\n readonly imageRef?:\n | RefObject\n | ((node: HTMLElement | null) => void);\n readonly lazyLoad?: boolean;\n readonly progressiveLoad?: boolean;\n readonly sizes?: string;\n}\n\nconst Image = ({\n children,\n classes,\n dataTestId,\n epiEdit,\n image,\n imageClasses,\n imageRef,\n lazyLoad = true,\n progressiveLoad = true,\n sizes = '',\n}: PropsWithChildren) => {\n const mobileSource = image?.mobile;\n const tabletSource = image?.tablet;\n const desktopSource = image?.desktop;\n const largeDesktopSource = image?.largeDesktop;\n const breakpoint = useBreakpoint() as BreakpointEnum;\n const [isLoaded, setIsLoaded] = useState(false);\n\n if (!desktopSource?.url) return null;\n\n const currentSrc = {\n [BreakpointEnum.Small]: mobileSource,\n [BreakpointEnum.Medium]: tabletSource,\n [BreakpointEnum.Large]: desktopSource,\n [BreakpointEnum.XLarge]: largeDesktopSource,\n };\n\n return (\n \n \n setIsLoaded(true)}\n sizes={sizes}\n src={\n isLoaded && progressiveLoad\n ? currentSrc[breakpoint]?.url\n : mobileSource?.url\n }\n height={currentSrc[breakpoint]?.height}\n width={currentSrc[breakpoint]?.width}\n srcSet={`${mobileSource?.originalUrl} 376w, ${tabletSource?.originalUrl} 768w, ${desktopSource?.originalUrl} 1024w, ${largeDesktopSource?.originalUrl} 1440w`}\n {...(dataTestId && { 'data-testid': dataTestId })}\n />\n {isLoaded && children}\n \n );\n};\n\nexport default Image;\n","import Image from '@atoms/Image/Image';\nimport BreakpointEnum from '@models/enums/BreakpointEnum';\nimport { IImage } from '@models/IImage';\nimport slugify from '@utils/helpers/slugify';\nimport useBreakpoint from '@utils/hooks/useBreakpoint';\nimport useMediaQuery from '@utils/hooks/useMediaQuery';\nimport usePreviewMode from '@utils/hooks/usePreviewMode';\nimport useResizeObserver from '@utils/hooks/useResizeObserver';\nimport classNames from 'classnames';\nimport {\n AnimatePresence,\n motion,\n useMotionValueEvent,\n useScroll,\n useSpring,\n useTransform,\n} from 'framer-motion';\nimport { useRef, useState } from 'react';\n\ninterface Props {\n readonly title: string;\n readonly subTitle: string;\n readonly text: string;\n readonly rightImageListMobile: IImage[];\n readonly leftImageListMobile: IImage[];\n readonly rightImageListDesktop: IImage[];\n readonly leftImageListDesktop: IImage[];\n readonly backgroundImage: IImage;\n readonly centralImage: IImage;\n}\n\nconst backgroundImageInitialWidths = {\n [BreakpointEnum.Small]: 336,\n [BreakpointEnum.Medium]: 648,\n [BreakpointEnum.Large]: 824,\n [BreakpointEnum.XLarge]: 1240,\n};\n\nconst PreReleaseCaptureImageHighlight = ({\n title,\n subTitle,\n text,\n rightImageListMobile,\n leftImageListMobile,\n rightImageListDesktop,\n leftImageListDesktop,\n backgroundImage,\n centralImage,\n}: Props) => {\n const breakPoint = useBreakpoint();\n const isMobile = useMediaQuery(1024);\n const images = isMobile\n ? [...rightImageListMobile, ...leftImageListMobile]\n : [...rightImageListDesktop, ...leftImageListDesktop];\n const scrollableContainerRef = useRef(null);\n const [viewportRef, { width: viewportWidth, height: viewportHeight }] =\n useResizeObserver();\n const [lastImageRef, { height: lastImageHeight }] = useResizeObserver();\n const [cameraContainerRef, { height: cameraContainerHeight }] =\n useResizeObserver();\n const [detailsSectionRef, { height: detailsSectionHeight }] =\n useResizeObserver();\n const isPreview = usePreviewMode();\n\n const [isTitleDisplayed, setIsTitleDisplayed] = useState(true);\n const [isCameraImageDisplayed, setIsCameraImageDisplayed] = useState(false);\n\n const computedPaddingBottom = detailsSectionHeight - 55;\n const imagesContainerHeight = 0.8 * viewportHeight;\n const verticalSpacingFraction =\n (imagesContainerHeight - lastImageHeight) / (images.length - 1);\n\n const { scrollYProgress: scrollableContainerScrollYProgress } = useScroll({\n offset: ['start end', 'end end'],\n target: scrollableContainerRef,\n });\n const smoothScrollYProgress = useSpring(scrollableContainerScrollYProgress, {\n damping: 50,\n stiffness: 250,\n });\n\n const initialMainContainerXPadding = breakPoint\n ? (viewportWidth - backgroundImageInitialWidths[breakPoint]) / 2\n : 0;\n const mainContainerXPadding = useTransform(\n scrollableContainerScrollYProgress,\n [0, 0.9],\n [initialMainContainerXPadding, 0]\n );\n\n const initialMainContainerYPadding =\n (isMobile ? 1 : 0.6) * initialMainContainerXPadding;\n const mainContainerYPadding = useTransform(\n scrollableContainerScrollYProgress,\n [0, 0.9],\n [initialMainContainerYPadding, 0]\n );\n\n useMotionValueEvent(scrollableContainerScrollYProgress, 'change', (value) => {\n setIsTitleDisplayed(value < 1);\n setIsCameraImageDisplayed(value === 1);\n });\n\n const imagesInitialBottomPosition =\n -verticalSpacingFraction * (images.length - 1);\n const imagesFinalBottomPosition = (isMobile ? 0.05 : 0.15) * viewportHeight;\n const imagesBottomPosition = useTransform(\n smoothScrollYProgress,\n [0, 0.9],\n [imagesInitialBottomPosition, imagesFinalBottomPosition]\n );\n\n const imageWidth = viewportWidth / images.length;\n const horizontalImagesOverflow = (4 / 3) * imageWidth;\n const imagesInitialRightPosition =\n viewportWidth + horizontalImagesOverflow / 2;\n const imagesFinalRightPosition = -horizontalImagesOverflow / 2;\n const imagesRightPosition = useTransform(\n smoothScrollYProgress,\n [0, 0.9],\n [imagesInitialRightPosition, imagesFinalRightPosition]\n );\n\n const gradientOpacity = useTransform(\n scrollableContainerScrollYProgress,\n [0.8, 1],\n [0, 1]\n );\n\n return (\n \n \n \n \n \n \n\n \n\n \n {isTitleDisplayed && (\n \n \n {title}\n

\n \n )}\n \n\n \n {images.map((image, index) => (\n =\n (isMobile\n ? rightImageListMobile.length\n : rightImageListDesktop.length),\n })}\n key={slugify(`${image.desktop.url}-${index}`)}\n style={{ marginTop: index * verticalSpacingFraction }}\n >\n \n \n ))}\n \n \n \n \n\n \n
\n
\n \n
\n\n
\n \n {subTitle}\n

\n

\n {text}\n

\n
\n
\n \n \n \n );\n};\n\nexport default PreReleaseCaptureImageHighlight;\n","const enum BreakpointEnum {\n Small = 'sm',\n Medium = 'md',\n Large = 'lg',\n XLarge = 'xl',\n}\n\nexport default BreakpointEnum;\n","const slugify = (value: string) =>\n value\n .toLowerCase()\n .trim()\n .replace(/[^\\w\\s-]/g, '')\n .replace(/[\\s_-]+/g, '-')\n .replace(/^-+|-+$/g, '');\n\nexport default slugify;\n","import BreakpointEnum from '@models/enums/BreakpointEnum';\nimport { useCallback, useEffect, useState } from 'react';\n\nconst getCurrentBreakpoint = () => {\n const breakpoints = { tablet: 768, desktop: 1024, lgDesktop: 1440 };\n const width = window.innerWidth;\n\n if (width < breakpoints.tablet) {\n return BreakpointEnum.Small;\n }\n if (width >= breakpoints.tablet && width < breakpoints.desktop) {\n return BreakpointEnum.Medium;\n }\n if (width >= breakpoints.desktop && width < breakpoints.lgDesktop) {\n return BreakpointEnum.Large;\n }\n return BreakpointEnum.XLarge;\n};\n\nconst useBreakpoint = () => {\n const [screen, setScreen] = useState();\n\n const resizeHandler = useCallback(\n () => setScreen(getCurrentBreakpoint()),\n []\n );\n\n useEffect(() => {\n window.addEventListener('resize', resizeHandler);\n setScreen(getCurrentBreakpoint());\n\n return () => {\n window.removeEventListener('resize', resizeHandler);\n };\n }, [resizeHandler]);\n\n return screen;\n};\n\nexport default useBreakpoint;\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();\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 { useEffect, useState } from 'react';\n\nconst usePreviewMode = () => {\n const [isPreview, setIsPreview] = useState(false);\n\n useEffect(() => {\n setIsPreview(window.self !== window.top);\n }, []);\n\n return isPreview;\n};\n\nexport default usePreviewMode;\n","import { useCallback, useRef, useState } from 'react';\n\nconst useResizeObserver = () => {\n const observerRef = useRef();\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","import { useContext, useState, useEffect } from 'react';\nimport { motionValue } from './index.mjs';\nimport { MotionConfigContext } from '../context/MotionConfigContext.mjs';\nimport { useConstant } from '../utils/use-constant.mjs';\n\n/**\n * Creates a `MotionValue` to track the state and velocity of a value.\n *\n * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.\n *\n * ```jsx\n * export const MyComponent = () => {\n * const scale = useMotionValue(1)\n *\n * return \n * }\n * ```\n *\n * @param initial - The initial state.\n *\n * @public\n */\nfunction useMotionValue(initial) {\n const value = useConstant(() => motionValue(initial));\n /**\n * If this motion value is being used in static mode, like on\n * the Framer canvas, force components to rerender when the motion\n * value is updated.\n */\n const { isStatic } = useContext(MotionConfigContext);\n if (isStatic) {\n const [, setLatest] = useState(initial);\n useEffect(() => value.on(\"change\", setLatest), []);\n }\n return value;\n}\n\nexport { useMotionValue };\n","import { useContext, useRef, useInsertionEffect } from 'react';\nimport { isMotionValue } from './utils/is-motion-value.mjs';\nimport { useMotionValue } from './use-motion-value.mjs';\nimport { MotionConfigContext } from '../context/MotionConfigContext.mjs';\nimport { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';\nimport { animateValue } from '../animation/animators/js/index.mjs';\nimport { millisecondsToSeconds } from '../utils/time-conversion.mjs';\nimport { frameData } from '../frameloop/frame.mjs';\n\n/**\n * Creates a `MotionValue` that, when `set`, will use a spring animation to animate to its new state.\n *\n * It can either work as a stand-alone `MotionValue` by initialising it with a value, or as a subscriber\n * to another `MotionValue`.\n *\n * @remarks\n *\n * ```jsx\n * const x = useSpring(0, { stiffness: 300 })\n * const y = useSpring(x, { damping: 10 })\n * ```\n *\n * @param inputValue - `MotionValue` or number. If provided a `MotionValue`, when the input `MotionValue` changes, the created `MotionValue` will spring towards that value.\n * @param springConfig - Configuration options for the spring.\n * @returns `MotionValue`\n *\n * @public\n */\nfunction useSpring(source, config = {}) {\n const { isStatic } = useContext(MotionConfigContext);\n const activeSpringAnimation = useRef(null);\n const value = useMotionValue(isMotionValue(source) ? source.get() : source);\n const stopAnimation = () => {\n if (activeSpringAnimation.current) {\n activeSpringAnimation.current.stop();\n }\n };\n useInsertionEffect(() => {\n return value.attach((v, set) => {\n /**\n * A more hollistic approach to this might be to use isStatic to fix VisualElement animations\n * at that level, but this will work for now\n */\n if (isStatic)\n return set(v);\n stopAnimation();\n activeSpringAnimation.current = animateValue({\n keyframes: [value.get(), v],\n velocity: value.getVelocity(),\n type: \"spring\",\n restDelta: 0.001,\n restSpeed: 0.01,\n ...config,\n onUpdate: set,\n });\n /**\n * If we're between frames, resync the animation to the frameloop.\n */\n if (!frameData.isProcessing) {\n const delta = performance.now() - frameData.timestamp;\n if (delta < 30) {\n activeSpringAnimation.current.time =\n millisecondsToSeconds(delta);\n }\n }\n return value.get();\n }, stopAnimation);\n }, [JSON.stringify(config)]);\n useIsomorphicLayoutEffect(() => {\n if (isMotionValue(source)) {\n return source.on(\"change\", (v) => value.set(parseFloat(v)));\n }\n }, [value]);\n return value;\n}\n\nexport { useSpring };\n","import { interpolate } from './interpolate.mjs';\n\nconst isCustomValueType = (v) => {\n return v && typeof v === \"object\" && v.mix;\n};\nconst getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);\nfunction transform(...args) {\n const useImmediate = !Array.isArray(args[0]);\n const argOffset = useImmediate ? 0 : -1;\n const inputValue = args[0 + argOffset];\n const inputRange = args[1 + argOffset];\n const outputRange = args[2 + argOffset];\n const options = args[3 + argOffset];\n const interpolator = interpolate(inputRange, outputRange, {\n mixer: getMixer(outputRange[0]),\n ...options,\n });\n return useImmediate ? interpolator(inputValue) : interpolator;\n}\n\nexport { transform };\n","import { useMotionValue } from './use-motion-value.mjs';\nimport { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';\nimport { cancelFrame, frame } from '../frameloop/frame.mjs';\n\nfunction useCombineMotionValues(values, combineValues) {\n /**\n * Initialise the returned motion value. This remains the same between renders.\n */\n const value = useMotionValue(combineValues());\n /**\n * Create a function that will update the template motion value with the latest values.\n * This is pre-bound so whenever a motion value updates it can schedule its\n * execution in Framesync. If it's already been scheduled it won't be fired twice\n * in a single frame.\n */\n const updateValue = () => value.set(combineValues());\n /**\n * Synchronously update the motion value with the latest values during the render.\n * This ensures that within a React render, the styles applied to the DOM are up-to-date.\n */\n updateValue();\n /**\n * Subscribe to all motion values found within the template. Whenever any of them change,\n * schedule an update.\n */\n useIsomorphicLayoutEffect(() => {\n const scheduleUpdate = () => frame.update(updateValue, false, true);\n const subscriptions = values.map((v) => v.on(\"change\", scheduleUpdate));\n return () => {\n subscriptions.forEach((unsubscribe) => unsubscribe());\n cancelFrame(updateValue);\n };\n });\n return value;\n}\n\nexport { useCombineMotionValues };\n","import { transform } from '../utils/transform.mjs';\nimport { useCombineMotionValues } from './use-combine-values.mjs';\nimport { useConstant } from '../utils/use-constant.mjs';\nimport { useComputed } from './use-computed.mjs';\n\nfunction useTransform(input, inputRangeOrTransformer, outputRange, options) {\n if (typeof input === \"function\") {\n return useComputed(input);\n }\n const transformer = typeof inputRangeOrTransformer === \"function\"\n ? inputRangeOrTransformer\n : transform(inputRangeOrTransformer, outputRange, options);\n return Array.isArray(input)\n ? useListTransform(input, transformer)\n : useListTransform([input], ([latest]) => transformer(latest));\n}\nfunction useListTransform(values, transformer) {\n const latest = useConstant(() => []);\n return useCombineMotionValues(values, () => {\n latest.length = 0;\n const numValues = values.length;\n for (let i = 0; i < numValues; i++) {\n latest[i] = values[i].get();\n }\n return transformer(latest);\n });\n}\n\nexport { useTransform };\n","import { collectMotionValues } from './index.mjs';\nimport { useCombineMotionValues } from './use-combine-values.mjs';\n\nfunction useComputed(compute) {\n /**\n * Open session of collectMotionValues. Any MotionValue that calls get()\n * will be saved into this array.\n */\n collectMotionValues.current = [];\n compute();\n const value = useCombineMotionValues(collectMotionValues.current, compute);\n /**\n * Synchronously close session of collectMotionValues.\n */\n collectMotionValues.current = undefined;\n return value;\n}\n\nexport { useComputed };\n"],"names":["_ref","children","classes","dataTestId","epiEdit","image","imageClasses","imageRef","lazyLoad","progressiveLoad","sizes","mobileSource","mobile","tabletSource","tablet","desktopSource","desktop","largeDesktopSource","largeDesktop","breakpoint","useBreakpoint","isLoaded","setIsLoaded","useState","url","currentSrc","BreakpointEnum","Small","Medium","Large","XLarge","React","createElement","className","classNames","type","srcSet","_extends","ref","alt","altText","length","draggable","loading","onLoad","src","height","width","originalUrl","backgroundImageInitialWidths","title","subTitle","text","rightImageListMobile","leftImageListMobile","rightImageListDesktop","leftImageListDesktop","backgroundImage","centralImage","breakPoint","isMobile","useMediaQuery","images","scrollableContainerRef","useRef","viewportRef","viewportWidth","viewportHeight","useResizeObserver","lastImageRef","lastImageHeight","cameraContainerRef","cameraContainerHeight","detailsSectionRef","detailsSectionHeight","isPreview","usePreviewMode","isTitleDisplayed","setIsTitleDisplayed","isCameraImageDisplayed","setIsCameraImageDisplayed","computedPaddingBottom","imagesContainerHeight","verticalSpacingFraction","scrollYProgress","scrollableContainerScrollYProgress","useScroll","offset","target","smoothScrollYProgress","useSpring","damping","stiffness","initialMainContainerXPadding","mainContainerXPadding","useTransform","initialMainContainerYPadding","mainContainerYPadding","useMotionValueEvent","value","imagesInitialBottomPosition","imagesFinalBottomPosition","imagesBottomPosition","horizontalImagesOverflow","imagesInitialRightPosition","imagesFinalRightPosition","imagesRightPosition","gradientOpacity","style","paddingBottom","motion","div","paddingTop","paddingLeft","paddingRight","Image","opacity","AnimatePresence","initial","animate","exit","bottom","right","map","index","key","slugify","marginTop","variants","hidden","visible","transition","ease","duration","toLowerCase","trim","replace","getCurrentBreakpoint","breakpoints","window","innerWidth","screen","setScreen","resizeHandler","useCallback","useEffect","addEventListener","removeEventListener","minWidth","isSmallerThan","setIsSmallerThan","handler","isDesiredWidth","setIsPreview","self","top","observerRef","resizeParameters","setResizeParameters","clientWidth","clientHeight","scrollWidth","scrollHeight","handleResize","entries","Array","isArray","entry","contentRect","node","current","disconnect","undefined","ResizeObserver","observe","useMotionValue","isStatic","useContext","setLatest","on","source","config","activeSpringAnimation","get","stopAnimation","stop","useInsertionEffect","attach","v","set","keyframes","velocity","getVelocity","restDelta","restSpeed","onUpdate","isProcessing","delta","performance","now","timestamp","time","JSON","stringify","parseFloat","getMixer","mix","isCustomValueType","useCombineMotionValues","values","combineValues","updateValue","scheduleUpdate","update","subscriptions","forEach","unsubscribe","input","inputRangeOrTransformer","outputRange","options","compute","useComputed","transformer","args","useImmediate","argOffset","inputValue","inputRange","interpolator","interpolate","mixer","transform","useListTransform","latest","numValues","i"],"sourceRoot":""}