>();\n // biome-ignore lint/style/useConst: It's fine to use let here, as we are going to assign it later\n let thresholds: number[] | readonly number[];\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n // While it would be nice if you could just look at isIntersecting to determine if the component is inside the viewport, browsers can't agree on how to use it.\n // -Firefox ignores `threshold` when considering `isIntersecting`, so it will never be false again if `threshold` is > 0\n const inView =\n entry.isIntersecting &&\n thresholds.some((threshold) => entry.intersectionRatio >= threshold);\n\n // @ts-ignore support IntersectionObserver v2\n if (options.trackVisibility && typeof entry.isVisible === \"undefined\") {\n // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.\n // @ts-ignore\n entry.isVisible = inView;\n }\n\n elements.get(entry.target)?.forEach((callback) => {\n callback(inView, entry);\n });\n });\n }, options);\n\n // Ensure we have a valid thresholds array. If not, use the threshold from the options\n thresholds =\n observer.thresholds ||\n (Array.isArray(options.threshold)\n ? options.threshold\n : [options.threshold || 0]);\n\n instance = {\n id,\n observer,\n elements,\n };\n\n observerMap.set(id, instance);\n }\n\n return instance;\n}\n\n/**\n * @param element - DOM Element to observe\n * @param callback - Callback function to trigger when intersection status changes\n * @param options - Intersection Observer options\n * @param fallbackInView - Fallback inView value.\n * @return Function - Cleanup function that should be triggered to unregister the observer\n */\nexport function observe(\n element: Element,\n callback: ObserverInstanceCallback,\n options: IntersectionObserverInit = {},\n fallbackInView = unsupportedValue,\n) {\n if (\n typeof window.IntersectionObserver === \"undefined\" &&\n fallbackInView !== undefined\n ) {\n const bounds = element.getBoundingClientRect();\n callback(fallbackInView, {\n isIntersecting: fallbackInView,\n target: element,\n intersectionRatio:\n typeof options.threshold === \"number\" ? options.threshold : 0,\n time: 0,\n boundingClientRect: bounds,\n intersectionRect: bounds,\n rootBounds: bounds,\n });\n return () => {\n // Nothing to cleanup\n };\n }\n // An observer with the same options can be reused, so lets use this fact\n const { id, observer, elements } = createObserver(options);\n\n // Register the callback listener for this element\n const callbacks = elements.get(element) || [];\n if (!elements.has(element)) {\n elements.set(element, callbacks);\n }\n\n callbacks.push(callback);\n observer.observe(element);\n\n return function unobserve() {\n // Remove the callback from the callback list\n callbacks.splice(callbacks.indexOf(callback), 1);\n\n if (callbacks.length === 0) {\n // No more callback exists for element, so destroy it\n elements.delete(element);\n observer.unobserve(element);\n }\n\n if (elements.size === 0) {\n // No more elements are being observer by this instance, so destroy it\n observer.disconnect();\n observerMap.delete(id);\n }\n };\n}\n","import * as React from \"react\";\nimport type { InViewHookResponse, IntersectionOptions } from \"./index\";\nimport { observe } from \"./observe\";\n\ntype State = {\n inView: boolean;\n entry?: IntersectionObserverEntry;\n};\n\n/**\n * React Hooks make it easy to monitor the `inView` state of your components. Call\n * the `useInView` hook with the (optional) [options](#options) you need. It will\n * return an array containing a `ref`, the `inView` status and the current\n * [`entry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).\n * Assign the `ref` to the DOM element you want to monitor, and the hook will\n * report the status.\n *\n * @example\n * ```jsx\n * import React from 'react';\n * import { useInView } from 'react-intersection-observer';\n *\n * const Component = () => {\n * const { ref, inView, entry } = useInView({\n * threshold: 0,\n * });\n *\n * return (\n * \n *
{`Header inside viewport ${inView}.`}
\n * \n * );\n * };\n * ```\n */\nexport function useInView({\n threshold,\n delay,\n trackVisibility,\n rootMargin,\n root,\n triggerOnce,\n skip,\n initialInView,\n fallbackInView,\n onChange,\n}: IntersectionOptions = {}): InViewHookResponse {\n const [ref, setRef] = React.useState(null);\n const callback = React.useRef();\n const [state, setState] = React.useState({\n inView: !!initialInView,\n entry: undefined,\n });\n\n // Store the onChange callback in a `ref`, so we can access the latest instance\n // inside the `useEffect`, but without triggering a rerender.\n callback.current = onChange;\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: threshold is not correctly detected as a dependency\n React.useEffect(\n () => {\n // Ensure we have node ref, and that we shouldn't skip observing\n if (skip || !ref) return;\n\n let unobserve: (() => void) | undefined;\n unobserve = observe(\n ref,\n (inView, entry) => {\n setState({\n inView,\n entry,\n });\n if (callback.current) callback.current(inView, entry);\n\n if (entry.isIntersecting && triggerOnce && unobserve) {\n // If it should only trigger once, unobserve the element after it's inView\n unobserve();\n unobserve = undefined;\n }\n },\n {\n root,\n rootMargin,\n threshold,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay,\n },\n fallbackInView,\n );\n\n return () => {\n if (unobserve) {\n unobserve();\n }\n };\n },\n // We break the rule here, because we aren't including the actual `threshold` variable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n // If the threshold is an array, convert it to a string, so it won't change between renders.\n Array.isArray(threshold) ? threshold.toString() : threshold,\n ref,\n root,\n rootMargin,\n triggerOnce,\n skip,\n trackVisibility,\n fallbackInView,\n delay,\n ],\n );\n\n const entryTarget = state.entry?.target;\n const previousEntryTarget = React.useRef();\n if (\n !ref &&\n entryTarget &&\n !triggerOnce &&\n !skip &&\n previousEntryTarget.current !== entryTarget\n ) {\n // If we don't have a node ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)\n // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView\n previousEntryTarget.current = entryTarget;\n setState({\n inView: !!initialInView,\n entry: undefined,\n });\n }\n\n const result = [setRef, state.inView, state.entry] as InViewHookResponse;\n\n // Support object destructuring, by adding the specific values.\n result.ref = result[0];\n result.inView = result[1];\n result.entry = result[2];\n\n return result;\n}\n"],"names":["Promise","resolve","then","__webpack_require__","bind","StyledFeaturesWrapper","styled","div","_templateObject","screens","commonGradientStyles","css","StyledGradientRight","_templateObject2","StyledGradientLeft","_templateObject3","TryYourselfWrapper","children","param","ref","inView","useInView","threshold","triggerOnce","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__","jsx","StyledCheckIcon","theme","colors","blueGradient","$small","text","alwayWhite","borderAlwaysGradient","Container","as","$size","props","StyledContainer","StyledGradient","$shape","circleGradient","ellipseGradient","Heading","id","className","color","fontSize","fontWeight","textAlign","StyledHeading","data-heading","$textAlign","StyledSection","section","alignDictionary","right","left","center","end","start","StyledHeadingBlockWrapper","$align","$isContentCentered","$centered","StyledHeadingBlockTitle","StyledTextListWrapper","ul","StyledTextListItem","li","_templateObject1","StyledFeatureLineWrapper","lg","StyledFeatureLineContentWrapper","StyledFeatureLineTextWrapper","observerMap","Map","RootIds","WeakMap","rootId","unsupportedValue","_a","delay","trackVisibility","rootMargin","root","skip","initialInView","fallbackInView","onChange","arguments","length","setRef","React2","callback","state","setState","entry","current","unobserve","observe","element","options","window","IntersectionObserver","bounds","getBoundingClientRect","isIntersecting","target","intersectionRatio","time","boundingClientRect","intersectionRect","rootBounds","observer","elements","createObserver","Object","keys","sort","filter","key","map","concat","has","set","toString","get","instance","thresholds","entries","forEach","some","isVisible","Array","isArray","callbacks","push","splice","indexOf","delete","size","disconnect","entryTarget","previousEntryTarget","result","React"],"sourceRoot":""}