\r\n );\r\n};\r\n","import { useEffect, useState } from 'react';\r\nimport useContactInfo from './widget/hooks/useContactInfo';\r\nimport { ContactComponent } from './ContactComponent';\r\nimport { ContactInfo } from '../models/ContactInfo';\r\nimport { ContactLoadingSkeleton } from './loadingSkeleton/ContactLoadingSkeleton';\r\nimport { ContactWidgetState } from '../models/ContactWidgetState';\r\n\r\ninterface ContactWidgetWebshopProps {\r\n data: string;\r\n}\r\n\r\nexport const ContactWidgetWebshop = ({ data }: ContactWidgetWebshopProps) => {\r\n if (!data || data === '{}') return <>;\r\n\r\n const contactData = JSON.parse(data) as ContactWidgetState;\r\n\r\n const { contactInfo, loading } = useContactInfo();\r\n\r\n const [widgetState, setWidgetState] = useState({\r\n widgetTitle: {\r\n hu: { title: '' },\r\n },\r\n backgroundColor: '#ffffff',\r\n iconColor: '#000000',\r\n textColor: '#000000',\r\n });\r\n const updateWidgetStateFromContactInfo = (contactInfo: ContactInfo) => {\r\n setWidgetState((prevState) => ({\r\n ...prevState,\r\n socialMedia: [\r\n { icon: 'facebook', link: contactInfo.facebookLink || '' },\r\n { icon: 'instagram', link: contactInfo.instagramLink || '' },\r\n { icon: 'tripadvisor', link: contactInfo.tripAdvisorLink || '' },\r\n { icon: 'youtube', link: contactInfo.youtubeLink || '' },\r\n ].filter((socialMedia) => socialMedia.link),\r\n }));\r\n };\r\n\r\n // Usage in useEffect or wherever you receive the contactInfo\r\n useEffect(() => {\r\n if (contactInfo) {\r\n updateWidgetStateFromContactInfo(contactInfo);\r\n }\r\n }, [contactInfo]);\r\n if (loading) return ;\r\n return (\r\n \r\n );\r\n};\r\n","import { useState } from 'react';\r\nimport { ContactInfo } from '../../../models/ContactInfo';\r\nimport { useAsyncEffect } from 'use-async-effect';\r\nimport { getContactInfo } from '../../../services/getContactInfo';\r\n\r\nconst useContactInfo = () => {\r\n const [contactInfo, setContactInfo] = useState();\r\n const [loading, setLoading] = useState(true);\r\n\r\n useAsyncEffect(async () => {\r\n try {\r\n const response = await getContactInfo();\r\n setContactInfo(response);\r\n setLoading(false);\r\n } catch (error) {\r\n throw new Error('hiba az adatok lekérésekor');\r\n }\r\n }, []);\r\n\r\n return { contactInfo, loading };\r\n};\r\n\r\nexport default useContactInfo;\r\n","/**\r\n * The function `getContactInfo` makes an asynchronous request to a specified base URL and returns the\r\n * contact information received from the response.\r\n * @param {string} baseUrl - The `baseUrl` parameter is a string that represents the base URL of the\r\n * API endpoint. It is used to construct the complete URL for the `fetch` request.\r\n * @returns The function `getContactInfo` is returning the data fetched from the `/contact` endpoint of\r\n * the provided `baseUrl`.\r\n */\r\nexport const getContactInfo = async () => {\r\n try {\r\n const response = await fetch(`/Widget/Contact`);\r\n const data = await response.json();\r\n return data;\r\n } catch (error) {\r\n throw new Error('Hiba az adatok lekérésekor!');\r\n }\r\n};\r\n","import useCDNImage from './hooks/useCDNImage';\r\n\r\ntype CDNImageProps = {\r\n // The class name of the image\r\n className?: string;\r\n\r\n // The source of the image\r\n src: string;\r\n\r\n // The alternative text of the image\r\n alt?: string;\r\n\r\n // The width of the image\r\n imageWidth?: number;\r\n\r\n // The height of the image\r\n imageHeight?: number;\r\n\r\n // The allowed format of the image\r\n format?: 'jpg' | 'avif' | 'webp' | 'png' | '';\r\n\r\n // onclick event\r\n onClick?: () => void;\r\n\r\n // loading type\r\n loading?: 'eager' | 'lazy' | undefined;\r\n\r\n // aspect ratio\r\n aspectRatio?: string;\r\n\r\n fit?: string;\r\n\r\n // width on mobile\r\n mobileWidth?: number;\r\n\r\n // height on mobile\r\n mobileHeight?: number;\r\n};\r\n\r\n/**\r\n * @description This component is a wrapper around the next/image component that uses the CDN to serve the images\r\n * @returns An image as a component that uses the CDN\r\n */\r\n\r\nexport const CDNImage = ({ className, src, alt, imageWidth, imageHeight, format, onClick, loading, aspectRatio, fit, mobileWidth, mobileHeight }: CDNImageProps) => {\r\n const { CDNImageUrl, mobileCDNImageUrl } = useCDNImage({ imageSrc: src, imageWidth, imageHeight, format, aspectRatio, fit, mobileWidth, mobileHeight });\r\n\r\n let width = imageWidth;\r\n let height = imageHeight;\r\n\r\n if (!src) return <>;\r\n\r\n if (!mobileHeight && !mobileWidth) return ;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","interface UseCDNImageProps {\r\n imageSrc: string;\r\n\r\n imageWidth?: number;\r\n imageHeight?: number;\r\n format?: string;\r\n aspectRatio?: string;\r\n fit?: string;\r\n\r\n mobileWidth?: number;\r\n mobileHeight?: number;\r\n}\r\n\r\n/**\r\n * @descriptionb - This custom hook is used to replace the image url with the CDN url\r\n * @param {string} imageSrc - The url of the image\r\n * @param {number} imageWidth - The width of the image\r\n * @param {number} imageHeight - The height of the image\r\n * @param {string} format - The format of the image, that is \".avif\" by default\r\n * @param {number} aspectRatio - The aspect ratio of the image\r\n * @param {string} fit - The fit of the image\r\n * @param {number} mobileWidth - The width of the image on mobile\r\n * @param {number} mobileHeight - The height of the image on mobile\r\n * @returns {string} CDNImageUrl - The CDN url of the image\r\n */\r\n\r\nconst useCDNImage = ({ imageSrc, imageWidth, imageHeight, format, aspectRatio, fit, mobileWidth, mobileHeight }: UseCDNImageProps) => {\r\n const replaceImageUrlWithCDN = (url: string, width?: number, height?: number) => {\r\n if (!url) return;\r\n if (!process.env['IMGIX_URL']) return url;\r\n if (!process.env['IMG_BLOB_URL']) return url;\r\n\r\n if (url.includes(process.env['IMG_BLOB_URL'])) {\r\n url = url.replace(process.env['IMG_BLOB_URL'], process.env['IMGIX_URL']); // Assign back to url\r\n }\r\n\r\n // if the url is absolute url then replace it with the CDN url\r\n if (url.startsWith('http')) {\r\n const urlObj = new URL(url);\r\n urlObj.hostname = process.env['IMGIX_URL'];\r\n url = urlObj.toString();\r\n } else {\r\n url = process.env['IMGIX_URL'] + url;\r\n }\r\n\r\n url = `${url}?`;\r\n\r\n // Add the width to the url\r\n if (width) {\r\n url += `w=${width}&`;\r\n }\r\n\r\n // Add the height to the url\r\n if (height) {\r\n url += `h=${height}&`;\r\n }\r\n\r\n // Add the format to the url\r\n if (format) {\r\n url += `fm=${format}&`;\r\n }\r\n\r\n // Calculate aspect ratio if both width and height are provided\r\n if (aspectRatio) {\r\n url += `ar=${aspectRatio}&`;\r\n }\r\n\r\n if (fit) {\r\n url += `fit=${fit}&`;\r\n }\r\n\r\n // Remove trailing '&' if present\r\n if (url.endsWith('&')) {\r\n url = url.slice(0, -1);\r\n }\r\n\r\n return url;\r\n };\r\n\r\n // cdn url on desktop\r\n const CDNImageUrl = replaceImageUrlWithCDN(imageSrc, imageWidth, imageHeight);\r\n\r\n // cdn url on mobile\r\n const mobileCDNImageUrl = replaceImageUrlWithCDN(imageSrc, mobileWidth, mobileHeight);\r\n\r\n return { CDNImageUrl, mobileCDNImageUrl };\r\n};\r\n\r\nexport default useCDNImage;\r\n","import sanitizeHtml from 'sanitize-html';\r\n\r\n/*\r\n * Decode html entities\r\n * description: This function decodes html entities in a string\r\n * @param {string} html - html string\r\n * @returns {string} - decoded html string\r\n */\r\nconst decodeHtmlEntities = (html: string) => {\r\n const txt = document.createElement('textarea');\r\n txt.innerHTML = html;\r\n return txt.value;\r\n};\r\n\r\nexport const truncateHtml = (text: string, maxCharacterNumber: number) => {\r\n // Sanitize HTML\r\n const sanitizedHtml = sanitizeHtml(text, {\r\n allowedTags: [],\r\n allowedAttributes: {},\r\n });\r\n\r\n // Decode HTML entities\r\n const decodedHtml = decodeHtmlEntities(sanitizedHtml);\r\n\r\n // if the decoded HTML is shorter than the max character number, return it\r\n if (decodedHtml.length <= maxCharacterNumber) return decodedHtml;\r\n\r\n // Truncate the decoded HTML\r\n let truncatedHtml = `${decodedHtml.slice(0, maxCharacterNumber)}...`;\r\n\r\n return truncatedHtml;\r\n};\r\n","import { OpeningTextWidgetState } from '../../models/OpeningTextWidgetState';\r\nimport { useLangaugeContent } from './hooks/useLanguageContent';\r\n\r\nexport const OpeningTextCard = ({ props }: { props: OpeningTextWidgetState }) => {\r\n const { truncatedTitle, truncatedDescription } = useLangaugeContent({ props });\r\n\r\n if (!props.image) return <>;\r\n\r\n return (\r\n \r\n
\r\n {truncatedTitle}\r\n
\r\n {truncatedTitle !== '' && }\r\n
\r\n {truncatedDescription}\r\n
\r\n \r\n );\r\n};\r\n","import { truncateHtml } from 'shared-widget-components/src/utils/truncateHtml';\r\nimport { OpeningTextWidgetState } from '../../../models/OpeningTextWidgetState';\r\n\r\nexport const useLangaugeContent = ({ props }: { props: OpeningTextWidgetState }) => {\r\n //@ts-ignore\r\n const languageCode = window.currentLanguageCode;\r\n\r\n const getLanguageContent = () => {\r\n if (props.titleNContent && props.titleNContent[languageCode]) {\r\n const languageConent = props.titleNContent[languageCode];\r\n return languageConent;\r\n }\r\n if (props.titleNContent) return props.titleNContent['hu'];\r\n return { title: '', description: '' };\r\n };\r\n\r\n const title = getLanguageContent().title;\r\n const truncatedTitle = truncateHtml(title, 40);\r\n\r\n const description = getLanguageContent().description;\r\n const truncatedDescription = truncateHtml(description, 500);\r\n\r\n return { truncatedTitle, truncatedDescription };\r\n};\r\n","import { previewScrollbar } from 'shared-widget-components/src/components/preview/previewScrollbar';\r\nimport { CDNImage } from 'shared-widget-components/src/components/CDNImage/CDNImage';\r\nimport { OpeningTextWidgetState } from '../models/OpeningTextWidgetState';\r\nimport { OpeningTextCard } from './OpeningText/OpeningTextCard';\r\n\r\n/**\r\n * this component is used to render the opening text widget\r\n */\r\nexport const OpeningTextComponent = (props: OpeningTextWidgetState) => {\r\n // position the card with the text based on the alignment\r\n const alignmentClass = `flex min-[350px]:flex-col sm:flex-row min-[350px]:justify-center min-[350px]:items-center ${\r\n props.aligment === 'left' ? 'sm:justify-start' : 'sm:justify-end'\r\n } relative max-w-[1240px] mx-auto w-full p-6`;\r\n\r\n // change the image styling based on the type\r\n const imageChangerByType = () => {\r\n if (props.type === 1) return { className: '' };\r\n if (props.type === 2 && props.aligment === 'left') return { className: 'sm:pl-[100px]' };\r\n if (props.type === 2 && props.aligment === 'right') return { className: 'sm:pr-[100px]' };\r\n else return { className: '' };\r\n };\r\n\r\n const imageClass = imageChangerByType();\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n );\r\n};\r\n","import React from 'react';\r\nimport { GalleryImageProps } from '../../models/GalleryWidgetModel';\r\nimport { LeftArrow, RightArrow } from 'shared-widget-components/src/components/Icons';\r\nimport { CDNImage } from 'shared-widget-components/src/components/CDNImage/CDNImage';\r\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation';\r\n\r\ninterface FullscreenImagesProps {\r\n isViewerOpen: boolean;\r\n viewerImageIndex: number | null;\r\n closeImageViewer: () => void;\r\n images: GalleryImageProps[];\r\n showPreviousImage: () => void;\r\n showNextImage: () => void;\r\n}\r\n\r\n/**\r\n * @description This component displays and handles the fullscreen mode of the gallery images\r\n * @param0 isViewerOpen boolean; This boolean value indicates if the viewer is open or not.\r\n * @param1 viewerImageIndex number | null; The index of the image that is currently displayed in the viewer.\r\n * @param2 closeImageViewer () => void; This function is called when the viewer is closed.\r\n * @param3 widgetState GalleryWidgetState; The data of the widget.\r\n * @param4 showPreviousImage () => void; This function is called to show the previous image.\r\n * @param5 showNextImage () => void; This function is called to show the next image.\r\n * @returns {JSX.Element} The FullscreenImages component\r\n */\r\n\r\nexport const FullscreenImages: React.FC = ({ isViewerOpen, viewerImageIndex, closeImageViewer, images, showPreviousImage, showNextImage }) => {\r\n useKeyboardNavigation({ isViewerOpen, showPreviousImage, showNextImage, closeImageViewer });\r\n\r\n return (\r\n <>\r\n {isViewerOpen && viewerImageIndex !== null && (\r\n
\r\n );\r\n })}\r\n \r\n \r\n );\r\n};\r\n","import useGalleryRendering from './fullscreenImages/hooks/useGalleryRendering';\r\nimport { SmallImages } from './smallImages/SmallImages';\r\nimport { FullscreenImages } from './fullscreenImages/FullscreenImages';\r\nimport { GalleryWidgetModel } from '../models/GalleryWidgetModel';\r\nimport { SmallMobileImages } from './smallImages/SmallMobileImages';\r\n\r\ninterface ImageGalleryProps {\r\n formData: GalleryWidgetModel;\r\n}\r\n/**\r\n * @description This component is the wrapper component for the ImageGallery. It displays the images and handles the full screen mode.\r\n * @param0 formData GalleryWidgetState; The data of the widget.\r\n * @returns {JSX.Element} The ImageGallery component\r\n */\r\nexport const ImageGallery = ({ formData }: ImageGalleryProps) => {\r\n const { isViewerOpen, viewerImageIndex, closeImageViewer, openImageViewer, showPreviousImage, showNextImage } = useGalleryRendering({\r\n formData,\r\n });\r\n const images = formData.images && formData.images[0] ? formData.images.slice(1) : [{ alt: '', fileName: '', url: '' }];\r\n const renderedImages = formData.renderedImages ? Number(formData.renderedImages) : 5;\r\n\r\n return (\r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n","import { useState } from 'react';\r\nimport { GalleryWidgetModel } from '../../../models/GalleryWidgetModel';\r\ninterface useGalleryRenderingProps {\r\n formData: GalleryWidgetModel;\r\n}\r\n// Fullscreen képek megjelenítése\r\nconst useGalleryRendering = ({ formData }: useGalleryRenderingProps) => {\r\n const [isViewerOpen, setViewerOpen] = useState(false);\r\n const [viewerImageIndex, setViewerImageIndex] = useState(null);\r\n\r\n // Megfelelő indexxel megnyitja a fullscreen galériát\r\n const openImageViewer = (imageIndex: number) => {\r\n setViewerImageIndex(imageIndex);\r\n setViewerOpen(true);\r\n };\r\n // fullscreen galéria bezárása\r\n const closeImageViewer = () => {\r\n setViewerOpen(false);\r\n };\r\n const showPreviousImage = () => {\r\n // ha az imageindex nem null\r\n if (viewerImageIndex !== null) {\r\n // felveszi a mostani index előtti értéket\r\n let prevIndex = viewerImageIndex - 1;\r\n // amíg ez az index nagyobb mint 0, valamint van megadva kép, tovább csökkenti az indexet egyel\r\n while (prevIndex > 0 && formData.images[prevIndex].fileName === '') {\r\n prevIndex--;\r\n }\r\n // ha az első képnél vagyunk akkor az utolsó képre állítja\r\n if (prevIndex < 0) prevIndex = formData.images.length - 2;\r\n // megjeleníti a képet a megfelelő indexxel\r\n setViewerImageIndex(prevIndex);\r\n }\r\n };\r\n\r\n const showNextImage = () => {\r\n // ha az imageindex nem null\r\n if (viewerImageIndex !== null) {\r\n // felveszi a mostani index utáni értéket\r\n let nextIndex = viewerImageIndex + 1;\r\n // amíg ez az index kisebb mint a képek száma, valamint van megadva kép, tovább növeli az indexet egyel\r\n while (nextIndex < formData.images.length && formData.images[nextIndex].fileName === '') {\r\n nextIndex++;\r\n }\r\n // az utolsó képnél az első képre állítja\r\n if (nextIndex === formData.images.length - 1) nextIndex = 0;\r\n // megjeleníti a képet a megfelelő indexxel\r\n setViewerImageIndex(nextIndex);\r\n }\r\n };\r\n\r\n return { isViewerOpen, closeImageViewer, openImageViewer, showPreviousImage, showNextImage, viewerImageIndex };\r\n};\r\n\r\nexport default useGalleryRendering;\r\n","import { GalleryWidgetModel } from '../models/GalleryWidgetModel';\r\nimport { ImageGallery } from './ImageGallery';\r\nimport { previewScrollbar } from 'shared-widget-components/src/components/preview/previewScrollbar';\r\n\r\nexport interface WidgetProps {\r\n formData: GalleryWidgetModel;\r\n languageCode: string;\r\n}\r\n/**\r\n * @description This component is displayed as a preview in the Admin editor and as a widget in the webshop.\r\n * @param0 formData GalleryWidgetModel; The data of the widget.\r\n * @param1 languageCode string; The language code represents the language that is currently used.\r\n * @returns {JSX.Element} The GalleryComponent widget\r\n */\r\n\r\nexport const GalleryComponent = ({ formData, languageCode }: WidgetProps) => {\r\n const getLanguageContent = () => {\r\n if (formData.title && formData.title[languageCode]) {\r\n const languageConent = formData.title[languageCode];\r\n return languageConent;\r\n }\r\n\r\n if (formData.title) return formData.title['hu'];\r\n return { title: '' };\r\n };\r\n\r\n return (\r\n \r\n \r\n\r\n
\r\n
\r\n {getLanguageContent().title}\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n","import { GalleryComponent } from './GalleryWidget/GalleryComponent';\r\n\r\ninterface GalleryWidgetWebshopProps {\r\n data: string;\r\n}\r\n\r\n/**\r\n * @description This component is displayed in the webshop as a fully functioning widget.\r\n * @param0 data string; The data / widgetState of the widget.\r\n * @returns {JSX.Element} The GalleryWidgetWebshop component\r\n */\r\n\r\nexport const GalleryWidgetWebshop = ({ data }: GalleryWidgetWebshopProps) => {\r\n if (!data || data === '{}') return <>;\r\n\r\n const galleryData = JSON.parse(data);\r\n\r\n //@ts-ignore\r\n const languageCode = window.currentLanguageCode;\r\n\r\n return ;\r\n};\r\n","import { TextWithContentModel } from '../model/TextWithContentModel';\r\n\r\ninterface TextWithContentPreviewHeaderProps {\r\n content: TextWithContentModel;\r\n languageCode: string;\r\n}\r\n\r\nexport const TextWithContentPreviewHeader = ({ content, languageCode }: TextWithContentPreviewHeaderProps) => {\r\n const getLanguageContent = () => {\r\n if (content.titleNContent && content.titleNContent[languageCode]) {\r\n const languageConent = content.titleNContent[languageCode];\r\n return languageConent;\r\n }\r\n if (content.titleNContent) return content.titleNContent['hu'];\r\n\r\n return { title: '', description: '', ctaText: '', ctaLink: '' };\r\n };\r\n\r\n const handleNavigationButtonClick = () => {\r\n // @ts-ignore\r\n if (window.isAdminPage) return;\r\n\r\n window.location.href = getLanguageContent().ctaLink;\r\n };\r\n return (\r\n
\r\n );\r\n};\r\n","import { useEffect, useState } from 'react';\r\nimport { TextWithContentModel } from '../../../model/TextWithContentModel';\r\n\r\ninterface useYoutubeVideoProps {\r\n content: TextWithContentModel;\r\n languageCode: string;\r\n}\r\n\r\n/**\r\n * @description This custom hook handles the logic of the YouTube video\r\n * @param0 content: The widgetState / data of the widget\r\n * @param1 languageCode: The language of the widget\r\n * @returns {JSX.Element} isVideoLoaded, thumbnailUrl, handleVideoLoad, getTitleNContent states / functions to use in the component\r\n */\r\n\r\nexport const useYoutubeVideo = ({ content }: useYoutubeVideoProps) => {\r\n const [isVideoLoaded, setIsVideoLoaded] = useState(false);\r\n const [thumbnailUrl, setThumbnailUrl] = useState('');\r\n\r\n // it will be the src for the iframe\r\n const [videoSrc, setVideoSrc] = useState('');\r\n\r\n //this function is called when the video is clicked and the video is loaded\r\n const handleVideoLoad = () => {\r\n setIsVideoLoaded(true);\r\n };\r\n\r\n //this comopnent extracts the youtube video id from the videos url\r\n const extractNormalYoutubeVideoId = (url: string) => {\r\n const regex = /[?&]v=([^?&]+)/;\r\n const match = url.match(regex);\r\n return match ? match[1] : '';\r\n };\r\n\r\n //this comopnent extracts the youtube video id from the embed videos url\r\n const extractEmbedYoutubeVideoId = (url: string) => {\r\n const parts = url.split('/');\r\n const temp = parts[parts.length - 1].split('?')[0];\r\n return temp;\r\n };\r\n\r\n // this function generates the thumbnail url of the video and returns it\r\n const generateThumbnailUrl = (videoId: string) => {\r\n return `https://img.youtube.com/vi/${videoId}/0.jpg`;\r\n };\r\n\r\n useEffect(() => {\r\n if (content.mediaType !== 1 || !content.youTubeContent) return;\r\n\r\n let tempVideoId = '';\r\n\r\n // case of embed links\r\n if (content.youTubeContent.includes('/embed/')) {\r\n tempVideoId = extractEmbedYoutubeVideoId(content.youTubeContent.toString());\r\n setVideoSrc(content.youTubeContent.toString());\r\n }\r\n // case of normal links\r\n else {\r\n tempVideoId = extractNormalYoutubeVideoId(content.youTubeContent.toString());\r\n setVideoSrc(`https://www.youtube.com/embed/${tempVideoId}`);\r\n }\r\n\r\n setThumbnailUrl(generateThumbnailUrl(tempVideoId));\r\n }, [content.mediaType, content.youTubeContent]);\r\n\r\n return {\r\n isVideoLoaded,\r\n thumbnailUrl,\r\n handleVideoLoad,\r\n videoSrc,\r\n };\r\n};\r\n","import { createContext } from 'react';\n\n/**\n * @public\n */\nconst MotionConfigContext = createContext({\n transformPagePoint: (p) => p,\n isStatic: false,\n reducedMotion: \"never\",\n});\n\nexport { MotionConfigContext };\n","import { createContext } from 'react';\n\nconst MotionContext = createContext({});\n\nexport { MotionContext };\n","import { createContext } from 'react';\n\n/**\n * @public\n */\nconst PresenceContext = createContext(null);\n\nexport { PresenceContext };\n","const isBrowser = typeof document !== \"undefined\";\n\nexport { isBrowser };\n","import { useLayoutEffect, useEffect } from 'react';\nimport { isBrowser } from './is-browser.mjs';\n\nconst useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;\n\nexport { useIsomorphicLayoutEffect };\n","import { createContext } from 'react';\n\nconst LazyContext = createContext({ strict: false });\n\nexport { LazyContext };\n","/**\n * Convert camelCase to dash-case properties.\n */\nconst camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n\nexport { camelToDash };\n","import { camelToDash } from '../../render/dom/utils/camel-to-dash.mjs';\n\nconst optimizedAppearDataId = \"framerAppearId\";\nconst optimizedAppearDataAttribute = \"data-\" + camelToDash(optimizedAppearDataId);\n\nexport { optimizedAppearDataAttribute, optimizedAppearDataId };\n","function isRefObject(ref) {\n return (typeof ref === \"object\" &&\n Object.prototype.hasOwnProperty.call(ref, \"current\"));\n}\n\nexport { isRefObject };\n","/**\n * Decides if the supplied variable is variant label\n */\nfunction isVariantLabel(v) {\n return typeof v === \"string\" || Array.isArray(v);\n}\n\nexport { isVariantLabel };\n","function isAnimationControls(v) {\n return typeof v === \"object\" && typeof v.start === \"function\";\n}\n\nexport { isAnimationControls };\n","const variantPriorityOrder = [\n \"animate\",\n \"whileInView\",\n \"whileFocus\",\n \"whileHover\",\n \"whileTap\",\n \"whileDrag\",\n \"exit\",\n];\nconst variantProps = [\"initial\", ...variantPriorityOrder];\n\nexport { variantPriorityOrder, variantProps };\n","import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { isVariantLabel } from './is-variant-label.mjs';\nimport { variantProps } from './variant-props.mjs';\n\nfunction isControllingVariants(props) {\n return (isAnimationControls(props.animate) ||\n variantProps.some((name) => isVariantLabel(props[name])));\n}\nfunction isVariantNode(props) {\n return Boolean(isControllingVariants(props) || props.variants);\n}\n\nexport { isControllingVariants, isVariantNode };\n","import { useContext, useMemo } from 'react';\nimport { MotionContext } from './index.mjs';\nimport { getCurrentTreeVariants } from './utils.mjs';\n\nfunction useCreateMotionContext(props) {\n const { initial, animate } = getCurrentTreeVariants(props, useContext(MotionContext));\n return useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);\n}\nfunction variantLabelsAsDependency(prop) {\n return Array.isArray(prop) ? prop.join(\" \") : prop;\n}\n\nexport { useCreateMotionContext };\n","const featureProps = {\n animation: [\n \"animate\",\n \"variants\",\n \"whileHover\",\n \"whileTap\",\n \"exit\",\n \"whileInView\",\n \"whileFocus\",\n \"whileDrag\",\n ],\n exit: [\"exit\"],\n drag: [\"drag\", \"dragControls\"],\n focus: [\"whileFocus\"],\n hover: [\"whileHover\", \"onHoverStart\", \"onHoverEnd\"],\n tap: [\"whileTap\", \"onTap\", \"onTapStart\", \"onTapCancel\"],\n pan: [\"onPan\", \"onPanStart\", \"onPanSessionStart\", \"onPanEnd\"],\n inView: [\"whileInView\", \"onViewportEnter\", \"onViewportLeave\"],\n layout: [\"layout\", \"layoutId\"],\n};\nconst featureDefinitions = {};\nfor (const key in featureProps) {\n featureDefinitions[key] = {\n isEnabled: (props) => featureProps[key].some((name) => !!props[name]),\n };\n}\n\nexport { featureDefinitions };\n","import { createContext } from 'react';\n\nconst LayoutGroupContext = createContext({});\n\nexport { LayoutGroupContext };\n","import { createContext } from 'react';\n\n/**\n * Internal, exported only for usage in Framer\n */\nconst SwitchLayoutGroupContext = createContext({});\n\nexport { SwitchLayoutGroupContext };\n","const motionComponentSymbol = Symbol.for(\"motionComponentSymbol\");\n\nexport { motionComponentSymbol };\n","import * as React from 'react';\nimport { forwardRef, useContext } from 'react';\nimport { MotionConfigContext } from '../context/MotionConfigContext.mjs';\nimport { MotionContext } from '../context/MotionContext/index.mjs';\nimport { useVisualElement } from './utils/use-visual-element.mjs';\nimport { useMotionRef } from './utils/use-motion-ref.mjs';\nimport { useCreateMotionContext } from '../context/MotionContext/create.mjs';\nimport { loadFeatures } from './features/load-features.mjs';\nimport { isBrowser } from '../utils/is-browser.mjs';\nimport { LayoutGroupContext } from '../context/LayoutGroupContext.mjs';\nimport { LazyContext } from '../context/LazyContext.mjs';\nimport { SwitchLayoutGroupContext } from '../context/SwitchLayoutGroupContext.mjs';\nimport { motionComponentSymbol } from './utils/symbol.mjs';\n\n/**\n * Create a `motion` component.\n *\n * This function accepts a Component argument, which can be either a string (ie \"div\"\n * for `motion.div`), or an actual React component.\n *\n * Alongside this is a config option which provides a way of rendering the provided\n * component \"offline\", or outside the React render cycle.\n */\nfunction createMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) {\n preloadedFeatures && loadFeatures(preloadedFeatures);\n function MotionComponent(props, externalRef) {\n /**\n * If we need to measure the element we load this functionality in a\n * separate class component in order to gain access to getSnapshotBeforeUpdate.\n */\n let MeasureLayout;\n const configAndProps = {\n ...useContext(MotionConfigContext),\n ...props,\n layoutId: useLayoutId(props),\n };\n const { isStatic } = configAndProps;\n const context = useCreateMotionContext(props);\n const visualState = useVisualState(props, isStatic);\n if (!isStatic && isBrowser) {\n /**\n * Create a VisualElement for this component. A VisualElement provides a common\n * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as\n * providing a way of rendering to these APIs outside of the React render loop\n * for more performant animations and interactions\n */\n context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement);\n /**\n * Load Motion gesture and animation features. These are rendered as renderless\n * components so each feature can optionally make use of React lifecycle methods.\n */\n const initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext);\n const isStrict = useContext(LazyContext).strict;\n if (context.visualElement) {\n MeasureLayout = context.visualElement.loadFeatures(\n // Note: Pass the full new combined props to correctly re-render dynamic feature components.\n configAndProps, isStrict, preloadedFeatures, initialLayoutGroupConfig);\n }\n }\n /**\n * The mount order and hierarchy is specific to ensure our element ref\n * is hydrated by the time features fire their effects.\n */\n return (React.createElement(MotionContext.Provider, { value: context },\n MeasureLayout && context.visualElement ? (React.createElement(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null,\n useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)));\n }\n const ForwardRefComponent = forwardRef(MotionComponent);\n ForwardRefComponent[motionComponentSymbol] = Component;\n return ForwardRefComponent;\n}\nfunction useLayoutId({ layoutId }) {\n const layoutGroupId = useContext(LayoutGroupContext).id;\n return layoutGroupId && layoutId !== undefined\n ? layoutGroupId + \"-\" + layoutId\n : layoutId;\n}\n\nexport { createMotionComponent };\n","import { featureDefinitions } from './definitions.mjs';\n\nfunction loadFeatures(features) {\n for (const key in features) {\n featureDefinitions[key] = {\n ...featureDefinitions[key],\n ...features[key],\n };\n }\n}\n\nexport { loadFeatures };\n","import { isVariantLabel } from '../../render/utils/is-variant-label.mjs';\nimport { isControllingVariants } from '../../render/utils/is-controlling-variants.mjs';\n\nfunction getCurrentTreeVariants(props, context) {\n if (isControllingVariants(props)) {\n const { initial, animate } = props;\n return {\n initial: initial === false || isVariantLabel(initial)\n ? initial\n : undefined,\n animate: isVariantLabel(animate) ? animate : undefined,\n };\n }\n return props.inherit !== false ? context : {};\n}\n\nexport { getCurrentTreeVariants };\n","import { useContext, useRef, useInsertionEffect, useEffect } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { MotionContext } from '../../context/MotionContext/index.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\nimport { LazyContext } from '../../context/LazyContext.mjs';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\nimport { optimizedAppearDataAttribute } from '../../animation/optimized-appear/data-id.mjs';\n\nfunction useVisualElement(Component, visualState, props, createVisualElement) {\n const { visualElement: parent } = useContext(MotionContext);\n const lazyContext = useContext(LazyContext);\n const presenceContext = useContext(PresenceContext);\n const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion;\n const visualElementRef = useRef();\n /**\n * If we haven't preloaded a renderer, check to see if we have one lazy-loaded\n */\n createVisualElement = createVisualElement || lazyContext.renderer;\n if (!visualElementRef.current && createVisualElement) {\n visualElementRef.current = createVisualElement(Component, {\n visualState,\n parent,\n props,\n presenceContext,\n blockInitialAnimation: presenceContext\n ? presenceContext.initial === false\n : false,\n reducedMotionConfig,\n });\n }\n const visualElement = visualElementRef.current;\n useInsertionEffect(() => {\n visualElement && visualElement.update(props, presenceContext);\n });\n /**\n * Cache this value as we want to know whether HandoffAppearAnimations\n * was present on initial render - it will be deleted after this.\n */\n const wantsHandoff = useRef(Boolean(props[optimizedAppearDataAttribute] && !window.HandoffComplete));\n useIsomorphicLayoutEffect(() => {\n if (!visualElement)\n return;\n visualElement.render();\n /**\n * Ideally this function would always run in a useEffect.\n *\n * However, if we have optimised appear animations to handoff from,\n * it needs to happen synchronously to ensure there's no flash of\n * incorrect styles in the event of a hydration error.\n *\n * So if we detect a situtation where optimised appear animations\n * are running, we use useLayoutEffect to trigger animations.\n */\n if (wantsHandoff.current && visualElement.animationState) {\n visualElement.animationState.animateChanges();\n }\n });\n useEffect(() => {\n if (!visualElement)\n return;\n visualElement.updateFeatures();\n if (!wantsHandoff.current && visualElement.animationState) {\n visualElement.animationState.animateChanges();\n }\n if (wantsHandoff.current) {\n wantsHandoff.current = false;\n // This ensures all future calls to animateChanges() will run in useEffect\n window.HandoffComplete = true;\n }\n });\n return visualElement;\n}\n\nexport { useVisualElement };\n","import { useCallback } from 'react';\nimport { isRefObject } from '../../utils/is-ref-object.mjs';\n\n/**\n * Creates a ref function that, when called, hydrates the provided\n * external ref and VisualElement.\n */\nfunction useMotionRef(visualState, visualElement, externalRef) {\n return useCallback((instance) => {\n instance && visualState.mount && visualState.mount(instance);\n if (visualElement) {\n instance\n ? visualElement.mount(instance)\n : visualElement.unmount();\n }\n if (externalRef) {\n if (typeof externalRef === \"function\") {\n externalRef(instance);\n }\n else if (isRefObject(externalRef)) {\n externalRef.current = instance;\n }\n }\n }, \n /**\n * Only pass a new ref callback to React if we've received a visual element\n * factory. Otherwise we'll be mounting/remounting every time externalRef\n * or other dependencies change.\n */\n [visualElement]);\n}\n\nexport { useMotionRef };\n","import { createMotionComponent } from '../../motion/index.mjs';\n\n/**\n * Convert any React component into a `motion` component. The provided component\n * **must** use `React.forwardRef` to the underlying DOM component you want to animate.\n *\n * ```jsx\n * const Component = React.forwardRef((props, ref) => {\n * return \n * })\n *\n * const MotionComponent = motion(Component)\n * ```\n *\n * @public\n */\nfunction createMotionProxy(createConfig) {\n function custom(Component, customMotionComponentConfig = {}) {\n return createMotionComponent(createConfig(Component, customMotionComponentConfig));\n }\n if (typeof Proxy === \"undefined\") {\n return custom;\n }\n /**\n * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.\n * Rather than generating them anew every render.\n */\n const componentCache = new Map();\n return new Proxy(custom, {\n /**\n * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.\n * The prop name is passed through as `key` and we can use that to generate a `motion`\n * DOM component with that name.\n */\n get: (_target, key) => {\n /**\n * If this element doesn't exist in the component cache, create it and cache.\n */\n if (!componentCache.has(key)) {\n componentCache.set(key, custom(key));\n }\n return componentCache.get(key);\n },\n });\n}\n\nexport { createMotionProxy };\n","/**\n * We keep these listed seperately as we use the lowercase tag names as part\n * of the runtime bundle to detect SVG components\n */\nconst lowercaseSVGElements = [\n \"animate\",\n \"circle\",\n \"defs\",\n \"desc\",\n \"ellipse\",\n \"g\",\n \"image\",\n \"line\",\n \"filter\",\n \"marker\",\n \"mask\",\n \"metadata\",\n \"path\",\n \"pattern\",\n \"polygon\",\n \"polyline\",\n \"rect\",\n \"stop\",\n \"switch\",\n \"symbol\",\n \"svg\",\n \"text\",\n \"tspan\",\n \"use\",\n \"view\",\n];\n\nexport { lowercaseSVGElements };\n","import { lowercaseSVGElements } from '../../svg/lowercase-elements.mjs';\n\nfunction isSVGComponent(Component) {\n if (\n /**\n * If it's not a string, it's a custom React component. Currently we only support\n * HTML custom React components.\n */\n typeof Component !== \"string\" ||\n /**\n * If it contains a dash, the element is a custom HTML webcomponent.\n */\n Component.includes(\"-\")) {\n return false;\n }\n else if (\n /**\n * If it's in our list of lowercase SVG tags, it's an SVG component\n */\n lowercaseSVGElements.indexOf(Component) > -1 ||\n /**\n * If it contains a capital letter, it's an SVG component\n */\n /[A-Z]/.test(Component)) {\n return true;\n }\n return false;\n}\n\nexport { isSVGComponent };\n","const scaleCorrectors = {};\nfunction addScaleCorrector(correctors) {\n Object.assign(scaleCorrectors, correctors);\n}\n\nexport { addScaleCorrector, scaleCorrectors };\n","/**\n * Generate a list of every possible transform key.\n */\nconst transformPropOrder = [\n \"transformPerspective\",\n \"x\",\n \"y\",\n \"z\",\n \"translateX\",\n \"translateY\",\n \"translateZ\",\n \"scale\",\n \"scaleX\",\n \"scaleY\",\n \"rotate\",\n \"rotateX\",\n \"rotateY\",\n \"rotateZ\",\n \"skew\",\n \"skewX\",\n \"skewY\",\n];\n/**\n * A quick lookup for transform props.\n */\nconst transformProps = new Set(transformPropOrder);\n\nexport { transformPropOrder, transformProps };\n","import { scaleCorrectors } from '../../projection/styles/scale-correction.mjs';\nimport { transformProps } from '../../render/html/utils/transform.mjs';\n\nfunction isForcedMotionValue(key, { layout, layoutId }) {\n return (transformProps.has(key) ||\n key.startsWith(\"origin\") ||\n ((layout || layoutId !== undefined) &&\n (!!scaleCorrectors[key] || key === \"opacity\")));\n}\n\nexport { isForcedMotionValue };\n","const isMotionValue = (value) => Boolean(value && value.getVelocity);\n\nexport { isMotionValue };\n","import { transformPropOrder } from './transform.mjs';\n\nconst translateAlias = {\n x: \"translateX\",\n y: \"translateY\",\n z: \"translateZ\",\n transformPerspective: \"perspective\",\n};\nconst numTransforms = transformPropOrder.length;\n/**\n * Build a CSS transform style from individual x/y/scale etc properties.\n *\n * This outputs with a default order of transforms/scales/rotations, this can be customised by\n * providing a transformTemplate function.\n */\nfunction buildTransform(transform, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {\n // The transform string we're going to build into.\n let transformString = \"\";\n /**\n * Loop over all possible transforms in order, adding the ones that\n * are present to the transform string.\n */\n for (let i = 0; i < numTransforms; i++) {\n const key = transformPropOrder[i];\n if (transform[key] !== undefined) {\n const transformName = translateAlias[key] || key;\n transformString += `${transformName}(${transform[key]}) `;\n }\n }\n if (enableHardwareAcceleration && !transform.z) {\n transformString += \"translateZ(0)\";\n }\n transformString = transformString.trim();\n // If we have a custom `transform` template, pass our transform values and\n // generated transformString to that before returning\n if (transformTemplate) {\n transformString = transformTemplate(transform, transformIsDefault ? \"\" : transformString);\n }\n else if (allowTransformNone && transformIsDefault) {\n transformString = \"none\";\n }\n return transformString;\n}\n\nexport { buildTransform };\n","const checkStringStartsWith = (token) => (key) => typeof key === \"string\" && key.startsWith(token);\nconst isCSSVariableName = checkStringStartsWith(\"--\");\nconst isCSSVariableToken = checkStringStartsWith(\"var(--\");\nconst cssVariableRegex = /var\\s*\\(\\s*--[\\w-]+(\\s*,\\s*(?:(?:[^)(]|\\((?:[^)(]+|\\([^)(]*\\))*\\))*)+)?\\s*\\)/g;\n\nexport { cssVariableRegex, isCSSVariableName, isCSSVariableToken };\n","/**\n * Provided a value and a ValueType, returns the value as that value type.\n */\nconst getValueAsType = (value, type) => {\n return type && typeof value === \"number\"\n ? type.transform(value)\n : value;\n};\n\nexport { getValueAsType };\n","const clamp = (min, max, v) => Math.min(Math.max(v, min), max);\n\nexport { clamp };\n","import { clamp } from '../../../utils/clamp.mjs';\n\nconst number = {\n test: (v) => typeof v === \"number\",\n parse: parseFloat,\n transform: (v) => v,\n};\nconst alpha = {\n ...number,\n transform: (v) => clamp(0, 1, v),\n};\nconst scale = {\n ...number,\n default: 1,\n};\n\nexport { alpha, number, scale };\n","/**\n * TODO: When we move from string as a source of truth to data models\n * everything in this folder should probably be referred to as models vs types\n */\n// If this number is a decimal, make it just five decimal places\n// to avoid exponents\nconst sanitize = (v) => Math.round(v * 100000) / 100000;\nconst floatRegex = /(-)?([\\d]*\\.?[\\d])+/g;\nconst colorRegex = /(#[0-9a-f]{3,8}|(rgb|hsl)a?\\((-?[\\d\\.]+%?[,\\s]+){2}(-?[\\d\\.]+%?)\\s*[\\,\\/]?\\s*[\\d\\.]*%?\\))/gi;\nconst singleColorRegex = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\\((-?[\\d\\.]+%?[,\\s]+){2}(-?[\\d\\.]+%?)\\s*[\\,\\/]?\\s*[\\d\\.]*%?\\))$/i;\nfunction isString(v) {\n return typeof v === \"string\";\n}\n\nexport { colorRegex, floatRegex, isString, sanitize, singleColorRegex };\n","import { isString } from '../utils.mjs';\n\nconst createUnitType = (unit) => ({\n test: (v) => isString(v) && v.endsWith(unit) && v.split(\" \").length === 1,\n parse: parseFloat,\n transform: (v) => `${v}${unit}`,\n});\nconst degrees = createUnitType(\"deg\");\nconst percent = createUnitType(\"%\");\nconst px = createUnitType(\"px\");\nconst vh = createUnitType(\"vh\");\nconst vw = createUnitType(\"vw\");\nconst progressPercentage = {\n ...percent,\n parse: (v) => percent.parse(v) / 100,\n transform: (v) => percent.transform(v * 100),\n};\n\nexport { degrees, percent, progressPercentage, px, vh, vw };\n","import { number } from '../../../value/types/numbers/index.mjs';\n\nconst int = {\n ...number,\n transform: Math.round,\n};\n\nexport { int };\n","import { scale, alpha } from '../../../value/types/numbers/index.mjs';\nimport { px, degrees, progressPercentage } from '../../../value/types/numbers/units.mjs';\nimport { int } from './type-int.mjs';\n\nconst numberValueTypes = {\n // Border props\n borderWidth: px,\n borderTopWidth: px,\n borderRightWidth: px,\n borderBottomWidth: px,\n borderLeftWidth: px,\n borderRadius: px,\n radius: px,\n borderTopLeftRadius: px,\n borderTopRightRadius: px,\n borderBottomRightRadius: px,\n borderBottomLeftRadius: px,\n // Positioning props\n width: px,\n maxWidth: px,\n height: px,\n maxHeight: px,\n size: px,\n top: px,\n right: px,\n bottom: px,\n left: px,\n // Spacing props\n padding: px,\n paddingTop: px,\n paddingRight: px,\n paddingBottom: px,\n paddingLeft: px,\n margin: px,\n marginTop: px,\n marginRight: px,\n marginBottom: px,\n marginLeft: px,\n // Transform props\n rotate: degrees,\n rotateX: degrees,\n rotateY: degrees,\n rotateZ: degrees,\n scale,\n scaleX: scale,\n scaleY: scale,\n scaleZ: scale,\n skew: degrees,\n skewX: degrees,\n skewY: degrees,\n distance: px,\n translateX: px,\n translateY: px,\n translateZ: px,\n x: px,\n y: px,\n z: px,\n perspective: px,\n transformPerspective: px,\n opacity: alpha,\n originX: progressPercentage,\n originY: progressPercentage,\n originZ: px,\n // Misc\n zIndex: int,\n // SVG\n fillOpacity: alpha,\n strokeOpacity: alpha,\n numOctaves: int,\n};\n\nexport { numberValueTypes };\n","import { buildTransform } from './build-transform.mjs';\nimport { isCSSVariableName } from '../../dom/utils/is-css-variable.mjs';\nimport { transformProps } from './transform.mjs';\nimport { getValueAsType } from '../../dom/value-types/get-as-type.mjs';\nimport { numberValueTypes } from '../../dom/value-types/number.mjs';\n\nfunction buildHTMLStyles(state, latestValues, options, transformTemplate) {\n const { style, vars, transform, transformOrigin } = state;\n // Track whether we encounter any transform or transformOrigin values.\n let hasTransform = false;\n let hasTransformOrigin = false;\n // Does the calculated transform essentially equal \"none\"?\n let transformIsNone = true;\n /**\n * Loop over all our latest animated values and decide whether to handle them\n * as a style or CSS variable.\n *\n * Transforms and transform origins are kept seperately for further processing.\n */\n for (const key in latestValues) {\n const value = latestValues[key];\n /**\n * If this is a CSS variable we don't do any further processing.\n */\n if (isCSSVariableName(key)) {\n vars[key] = value;\n continue;\n }\n // Convert the value to its default value type, ie 0 -> \"0px\"\n const valueType = numberValueTypes[key];\n const valueAsType = getValueAsType(value, valueType);\n if (transformProps.has(key)) {\n // If this is a transform, flag to enable further transform processing\n hasTransform = true;\n transform[key] = valueAsType;\n // If we already know we have a non-default transform, early return\n if (!transformIsNone)\n continue;\n // Otherwise check to see if this is a default transform\n if (value !== (valueType.default || 0))\n transformIsNone = false;\n }\n else if (key.startsWith(\"origin\")) {\n // If this is a transform origin, flag and enable further transform-origin processing\n hasTransformOrigin = true;\n transformOrigin[key] = valueAsType;\n }\n else {\n style[key] = valueAsType;\n }\n }\n if (!latestValues.transform) {\n if (hasTransform || transformTemplate) {\n style.transform = buildTransform(state.transform, options, transformIsNone, transformTemplate);\n }\n else if (style.transform) {\n /**\n * If we have previously created a transform but currently don't have any,\n * reset transform style to none.\n */\n style.transform = \"none\";\n }\n }\n /**\n * Build a transformOrigin style. Uses the same defaults as the browser for\n * undefined origins.\n */\n if (hasTransformOrigin) {\n const { originX = \"50%\", originY = \"50%\", originZ = 0, } = transformOrigin;\n style.transformOrigin = `${originX} ${originY} ${originZ}`;\n }\n}\n\nexport { buildHTMLStyles };\n","const createHtmlRenderState = () => ({\n style: {},\n transform: {},\n transformOrigin: {},\n vars: {},\n});\n\nexport { createHtmlRenderState };\n","import { useMemo } from 'react';\nimport { isForcedMotionValue } from '../../motion/utils/is-forced-motion-value.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\nimport { buildHTMLStyles } from './utils/build-styles.mjs';\nimport { createHtmlRenderState } from './utils/create-render-state.mjs';\n\nfunction copyRawValuesOnly(target, source, props) {\n for (const key in source) {\n if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {\n target[key] = source[key];\n }\n }\n}\nfunction useInitialMotionValues({ transformTemplate }, visualState, isStatic) {\n return useMemo(() => {\n const state = createHtmlRenderState();\n buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);\n return Object.assign({}, state.vars, state.style);\n }, [visualState]);\n}\nfunction useStyle(props, visualState, isStatic) {\n const styleProp = props.style || {};\n const style = {};\n /**\n * Copy non-Motion Values straight into style\n */\n copyRawValuesOnly(style, styleProp, props);\n Object.assign(style, useInitialMotionValues(props, visualState, isStatic));\n return props.transformValues ? props.transformValues(style) : style;\n}\nfunction useHTMLProps(props, visualState, isStatic) {\n // The `any` isn't ideal but it is the type of createElement props argument\n const htmlProps = {};\n const style = useStyle(props, visualState, isStatic);\n if (props.drag && props.dragListener !== false) {\n // Disable the ghost element when a user drags\n htmlProps.draggable = false;\n // Disable text selection\n style.userSelect =\n style.WebkitUserSelect =\n style.WebkitTouchCallout =\n \"none\";\n // Disable scrolling on the draggable direction\n style.touchAction =\n props.drag === true\n ? \"none\"\n : `pan-${props.drag === \"x\" ? \"y\" : \"x\"}`;\n }\n if (props.tabIndex === undefined &&\n (props.onTap || props.onTapStart || props.whileTap)) {\n htmlProps.tabIndex = 0;\n }\n htmlProps.style = style;\n return htmlProps;\n}\n\nexport { copyRawValuesOnly, useHTMLProps };\n","/**\n * A list of all valid MotionProps.\n *\n * @privateRemarks\n * This doesn't throw if a `MotionProp` name is missing - it should.\n */\nconst validMotionProps = new Set([\n \"animate\",\n \"exit\",\n \"variants\",\n \"initial\",\n \"style\",\n \"values\",\n \"variants\",\n \"transition\",\n \"transformTemplate\",\n \"transformValues\",\n \"custom\",\n \"inherit\",\n \"onLayoutAnimationStart\",\n \"onLayoutAnimationComplete\",\n \"onLayoutMeasure\",\n \"onBeforeLayoutMeasure\",\n \"onAnimationStart\",\n \"onAnimationComplete\",\n \"onUpdate\",\n \"onDragStart\",\n \"onDrag\",\n \"onDragEnd\",\n \"onMeasureDragConstraints\",\n \"onDirectionLock\",\n \"onDragTransitionEnd\",\n \"_dragX\",\n \"_dragY\",\n \"onHoverStart\",\n \"onHoverEnd\",\n \"onViewportEnter\",\n \"onViewportLeave\",\n \"ignoreStrict\",\n \"viewport\",\n]);\n/**\n * Check whether a prop name is a valid `MotionProp` key.\n *\n * @param key - Name of the property to check\n * @returns `true` is key is a valid `MotionProp`.\n *\n * @public\n */\nfunction isValidMotionProp(key) {\n return (key.startsWith(\"while\") ||\n (key.startsWith(\"drag\") && key !== \"draggable\") ||\n key.startsWith(\"layout\") ||\n key.startsWith(\"onTap\") ||\n key.startsWith(\"onPan\") ||\n validMotionProps.has(key));\n}\n\nexport { isValidMotionProp };\n","import { isValidMotionProp } from '../../../motion/utils/valid-prop.mjs';\n\nlet shouldForward = (key) => !isValidMotionProp(key);\nfunction loadExternalIsValidProp(isValidProp) {\n if (!isValidProp)\n return;\n // Explicitly filter our events\n shouldForward = (key) => key.startsWith(\"on\") ? !isValidMotionProp(key) : isValidProp(key);\n}\n/**\n * Emotion and Styled Components both allow users to pass through arbitrary props to their components\n * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which\n * of these should be passed to the underlying DOM node.\n *\n * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props\n * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props\n * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of\n * `@emotion/is-prop-valid`, however to fix this problem we need to use it.\n *\n * By making it an optionalDependency we can offer this functionality only in the situations where it's\n * actually required.\n */\ntry {\n /**\n * We attempt to import this package but require won't be defined in esm environments, in that case\n * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed\n * in favour of explicit injection.\n */\n loadExternalIsValidProp(require(\"@emotion/is-prop-valid\").default);\n}\ncatch (_a) {\n // We don't need to actually do anything here - the fallback is the existing `isPropValid`.\n}\nfunction filterProps(props, isDom, forwardMotionProps) {\n const filteredProps = {};\n for (const key in props) {\n /**\n * values is considered a valid prop by Emotion, so if it's present\n * this will be rendered out to the DOM unless explicitly filtered.\n *\n * We check the type as it could be used with the `feColorMatrix`\n * element, which we support.\n */\n if (key === \"values\" && typeof props.values === \"object\")\n continue;\n if (shouldForward(key) ||\n (forwardMotionProps === true && isValidMotionProp(key)) ||\n (!isDom && !isValidMotionProp(key)) ||\n // If trying to use native HTML drag events, forward drag listeners\n (props[\"draggable\"] && key.startsWith(\"onDrag\"))) {\n filteredProps[key] = props[key];\n }\n }\n return filteredProps;\n}\n\nexport { filterProps, loadExternalIsValidProp };\n","import { px } from '../../../value/types/numbers/units.mjs';\n\nfunction calcOrigin(origin, offset, size) {\n return typeof origin === \"string\"\n ? origin\n : px.transform(offset + size * origin);\n}\n/**\n * The SVG transform origin defaults are different to CSS and is less intuitive,\n * so we use the measured dimensions of the SVG to reconcile these.\n */\nfunction calcSVGTransformOrigin(dimensions, originX, originY) {\n const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);\n const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);\n return `${pxOriginX} ${pxOriginY}`;\n}\n\nexport { calcSVGTransformOrigin };\n","import { px } from '../../../value/types/numbers/units.mjs';\n\nconst dashKeys = {\n offset: \"stroke-dashoffset\",\n array: \"stroke-dasharray\",\n};\nconst camelKeys = {\n offset: \"strokeDashoffset\",\n array: \"strokeDasharray\",\n};\n/**\n * Build SVG path properties. Uses the path's measured length to convert\n * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset\n * and stroke-dasharray attributes.\n *\n * This function is mutative to reduce per-frame GC.\n */\nfunction buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {\n // Normalise path length by setting SVG attribute pathLength to 1\n attrs.pathLength = 1;\n // We use dash case when setting attributes directly to the DOM node and camel case\n // when defining props on a React component.\n const keys = useDashCase ? dashKeys : camelKeys;\n // Build the dash offset\n attrs[keys.offset] = px.transform(-offset);\n // Build the dash array\n const pathLength = px.transform(length);\n const pathSpacing = px.transform(spacing);\n attrs[keys.array] = `${pathLength} ${pathSpacing}`;\n}\n\nexport { buildSVGPath };\n","import { buildHTMLStyles } from '../../html/utils/build-styles.mjs';\nimport { calcSVGTransformOrigin } from './transform-origin.mjs';\nimport { buildSVGPath } from './path.mjs';\n\n/**\n * Build SVG visual attrbutes, like cx and style.transform\n */\nfunction buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, \n// This is object creation, which we try to avoid per-frame.\n...latest }, options, isSVGTag, transformTemplate) {\n buildHTMLStyles(state, latest, options, transformTemplate);\n /**\n * For svg tags we just want to make sure viewBox is animatable and treat all the styles\n * as normal HTML tags.\n */\n if (isSVGTag) {\n if (state.style.viewBox) {\n state.attrs.viewBox = state.style.viewBox;\n }\n return;\n }\n state.attrs = state.style;\n state.style = {};\n const { attrs, style, dimensions } = state;\n /**\n * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs\n * and copy it into style.\n */\n if (attrs.transform) {\n if (dimensions)\n style.transform = attrs.transform;\n delete attrs.transform;\n }\n // Parse transformOrigin\n if (dimensions &&\n (originX !== undefined || originY !== undefined || style.transform)) {\n style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);\n }\n // Render attrX/attrY/attrScale as attributes\n if (attrX !== undefined)\n attrs.x = attrX;\n if (attrY !== undefined)\n attrs.y = attrY;\n if (attrScale !== undefined)\n attrs.scale = attrScale;\n // Build SVG path if one has been defined\n if (pathLength !== undefined) {\n buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);\n }\n}\n\nexport { buildSVGAttrs };\n","import { createHtmlRenderState } from '../../html/utils/create-render-state.mjs';\n\nconst createSvgRenderState = () => ({\n ...createHtmlRenderState(),\n attrs: {},\n});\n\nexport { createSvgRenderState };\n","const isSVGTag = (tag) => typeof tag === \"string\" && tag.toLowerCase() === \"svg\";\n\nexport { isSVGTag };\n","import { useMemo } from 'react';\nimport { copyRawValuesOnly } from '../html/use-props.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\nimport { createSvgRenderState } from './utils/create-render-state.mjs';\nimport { isSVGTag } from './utils/is-svg-tag.mjs';\n\nfunction useSVGProps(props, visualState, _isStatic, Component) {\n const visualProps = useMemo(() => {\n const state = createSvgRenderState();\n buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, isSVGTag(Component), props.transformTemplate);\n return {\n ...state.attrs,\n style: { ...state.style },\n };\n }, [visualState]);\n if (props.style) {\n const rawStyles = {};\n copyRawValuesOnly(rawStyles, props.style, props);\n visualProps.style = { ...rawStyles, ...visualProps.style };\n }\n return visualProps;\n}\n\nexport { useSVGProps };\n","import { useMemo, createElement } from 'react';\nimport { useHTMLProps } from '../html/use-props.mjs';\nimport { filterProps } from './utils/filter-props.mjs';\nimport { isSVGComponent } from './utils/is-svg-component.mjs';\nimport { useSVGProps } from '../svg/use-props.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction createUseRender(forwardMotionProps = false) {\n const useRender = (Component, props, ref, { latestValues }, isStatic) => {\n const useVisualProps = isSVGComponent(Component)\n ? useSVGProps\n : useHTMLProps;\n const visualProps = useVisualProps(props, latestValues, isStatic, Component);\n const filteredProps = filterProps(props, typeof Component === \"string\", forwardMotionProps);\n const elementProps = {\n ...filteredProps,\n ...visualProps,\n ref,\n };\n /**\n * If component has been handed a motion value as its child,\n * memoise its initial value and render that. Subsequent updates\n * will be handled by the onChange handler\n */\n const { children } = props;\n const renderedChildren = useMemo(() => (isMotionValue(children) ? children.get() : children), [children]);\n return createElement(Component, {\n ...elementProps,\n children: renderedChildren,\n });\n };\n return useRender;\n}\n\nexport { createUseRender };\n","function renderHTML(element, { style, vars }, styleProp, projection) {\n Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));\n // Loop over any CSS variables and assign those.\n for (const key in vars) {\n element.style.setProperty(key, vars[key]);\n }\n}\n\nexport { renderHTML };\n","/**\n * A set of attribute names that are always read/written as camel case.\n */\nconst camelCaseAttributes = new Set([\n \"baseFrequency\",\n \"diffuseConstant\",\n \"kernelMatrix\",\n \"kernelUnitLength\",\n \"keySplines\",\n \"keyTimes\",\n \"limitingConeAngle\",\n \"markerHeight\",\n \"markerWidth\",\n \"numOctaves\",\n \"targetX\",\n \"targetY\",\n \"surfaceScale\",\n \"specularConstant\",\n \"specularExponent\",\n \"stdDeviation\",\n \"tableValues\",\n \"viewBox\",\n \"gradientTransform\",\n \"pathLength\",\n \"startOffset\",\n \"textLength\",\n \"lengthAdjust\",\n]);\n\nexport { camelCaseAttributes };\n","import { camelToDash } from '../../dom/utils/camel-to-dash.mjs';\nimport { renderHTML } from '../../html/utils/render.mjs';\nimport { camelCaseAttributes } from './camel-case-attrs.mjs';\n\nfunction renderSVG(element, renderState, _styleProp, projection) {\n renderHTML(element, renderState, undefined, projection);\n for (const key in renderState.attrs) {\n element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);\n }\n}\n\nexport { renderSVG };\n","import { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-value.mjs';\nimport { isMotionValue } from '../../../value/utils/is-motion-value.mjs';\n\nfunction scrapeMotionValuesFromProps(props, prevProps) {\n const { style } = props;\n const newValues = {};\n for (const key in style) {\n if (isMotionValue(style[key]) ||\n (prevProps.style && isMotionValue(prevProps.style[key])) ||\n isForcedMotionValue(key, props)) {\n newValues[key] = style[key];\n }\n }\n return newValues;\n}\n\nexport { scrapeMotionValuesFromProps };\n","import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';\nimport { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.mjs';\nimport { transformPropOrder } from '../../html/utils/transform.mjs';\n\nfunction scrapeMotionValuesFromProps(props, prevProps) {\n const newValues = scrapeMotionValuesFromProps$1(props, prevProps);\n for (const key in props) {\n if (isMotionValue(props[key]) || isMotionValue(prevProps[key])) {\n const targetKey = transformPropOrder.indexOf(key) !== -1\n ? \"attr\" + key.charAt(0).toUpperCase() + key.substring(1)\n : key;\n newValues[targetKey] = props[key];\n }\n }\n return newValues;\n}\n\nexport { scrapeMotionValuesFromProps };\n","function resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) {\n /**\n * If the variant definition is a function, resolve.\n */\n if (typeof definition === \"function\") {\n definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);\n }\n /**\n * If the variant definition is a variant label, or\n * the function returned a variant label, resolve.\n */\n if (typeof definition === \"string\") {\n definition = props.variants && props.variants[definition];\n }\n /**\n * At this point we've resolved both functions and variant labels,\n * but the resolved variant label might itself have been a function.\n * If so, resolve. This can only have returned a valid target object.\n */\n if (typeof definition === \"function\") {\n definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);\n }\n return definition;\n}\n\nexport { resolveVariantFromProps };\n","const isKeyframesTarget = (v) => {\n return Array.isArray(v);\n};\n\nexport { isKeyframesTarget };\n","import { isKeyframesTarget } from '../animation/utils/is-keyframes-target.mjs';\n\nconst isCustomValue = (v) => {\n return Boolean(v && typeof v === \"object\" && v.mix && v.toValue);\n};\nconst resolveFinalValueInKeyframes = (v) => {\n // TODO maybe throw if v.length - 1 is placeholder token?\n return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;\n};\n\nexport { isCustomValue, resolveFinalValueInKeyframes };\n","import { isCustomValue } from '../../utils/resolve-value.mjs';\nimport { isMotionValue } from './is-motion-value.mjs';\n\n/**\n * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself\n *\n * TODO: Remove and move to library\n */\nfunction resolveMotionValue(value) {\n const unwrappedValue = isMotionValue(value) ? value.get() : value;\n return isCustomValue(unwrappedValue)\n ? unwrappedValue.toValue()\n : unwrappedValue;\n}\n\nexport { resolveMotionValue };\n","import { useContext } from 'react';\nimport { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { resolveVariantFromProps } from '../../render/utils/resolve-variants.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';\nimport { MotionContext } from '../../context/MotionContext/index.mjs';\nimport { isControllingVariants, isVariantNode } from '../../render/utils/is-controlling-variants.mjs';\n\nfunction makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {\n const state = {\n latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),\n renderState: createRenderState(),\n };\n if (onMount) {\n state.mount = (instance) => onMount(props, instance, state);\n }\n return state;\n}\nconst makeUseVisualState = (config) => (props, isStatic) => {\n const context = useContext(MotionContext);\n const presenceContext = useContext(PresenceContext);\n const make = () => makeState(config, props, context, presenceContext);\n return isStatic ? make() : useConstant(make);\n};\nfunction makeLatestValues(props, context, presenceContext, scrapeMotionValues) {\n const values = {};\n const motionValues = scrapeMotionValues(props, {});\n for (const key in motionValues) {\n values[key] = resolveMotionValue(motionValues[key]);\n }\n let { initial, animate } = props;\n const isControllingVariants$1 = isControllingVariants(props);\n const isVariantNode$1 = isVariantNode(props);\n if (context &&\n isVariantNode$1 &&\n !isControllingVariants$1 &&\n props.inherit !== false) {\n if (initial === undefined)\n initial = context.initial;\n if (animate === undefined)\n animate = context.animate;\n }\n let isInitialAnimationBlocked = presenceContext\n ? presenceContext.initial === false\n : false;\n isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;\n const variantToSet = isInitialAnimationBlocked ? animate : initial;\n if (variantToSet &&\n typeof variantToSet !== \"boolean\" &&\n !isAnimationControls(variantToSet)) {\n const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];\n list.forEach((definition) => {\n const resolved = resolveVariantFromProps(props, definition);\n if (!resolved)\n return;\n const { transitionEnd, transition, ...target } = resolved;\n for (const key in target) {\n let valueTarget = target[key];\n if (Array.isArray(valueTarget)) {\n /**\n * Take final keyframe if the initial animation is blocked because\n * we want to initialise at the end of that blocked animation.\n */\n const index = isInitialAnimationBlocked\n ? valueTarget.length - 1\n : 0;\n valueTarget = valueTarget[index];\n }\n if (valueTarget !== null) {\n values[key] = valueTarget;\n }\n }\n for (const key in transitionEnd)\n values[key] = transitionEnd[key];\n });\n }\n return values;\n}\n\nexport { makeUseVisualState };\n","import { useRef } from 'react';\n\n/**\n * Creates a constant value over the lifecycle of a component.\n *\n * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer\n * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`\n * you can ensure that initialisers don't execute twice or more.\n */\nfunction useConstant(init) {\n const ref = useRef(null);\n if (ref.current === null) {\n ref.current = init();\n }\n return ref.current;\n}\n\nexport { useConstant };\n","const noop = (any) => any;\n\nexport { noop };\n","class Queue {\n constructor() {\n this.order = [];\n this.scheduled = new Set();\n }\n add(process) {\n if (!this.scheduled.has(process)) {\n this.scheduled.add(process);\n this.order.push(process);\n return true;\n }\n }\n remove(process) {\n const index = this.order.indexOf(process);\n if (index !== -1) {\n this.order.splice(index, 1);\n this.scheduled.delete(process);\n }\n }\n clear() {\n this.order.length = 0;\n this.scheduled.clear();\n }\n}\nfunction createRenderStep(runNextFrame) {\n /**\n * We create and reuse two queues, one to queue jobs for the current frame\n * and one for the next. We reuse to avoid triggering GC after x frames.\n */\n let thisFrame = new Queue();\n let nextFrame = new Queue();\n let numToRun = 0;\n /**\n * Track whether we're currently processing jobs in this step. This way\n * we can decide whether to schedule new jobs for this frame or next.\n */\n let isProcessing = false;\n let flushNextFrame = false;\n /**\n * A set of processes which were marked keepAlive when scheduled.\n */\n const toKeepAlive = new WeakSet();\n const step = {\n /**\n * Schedule a process to run on the next frame.\n */\n schedule: (callback, keepAlive = false, immediate = false) => {\n const addToCurrentFrame = immediate && isProcessing;\n const queue = addToCurrentFrame ? thisFrame : nextFrame;\n if (keepAlive)\n toKeepAlive.add(callback);\n if (queue.add(callback) && addToCurrentFrame && isProcessing) {\n // If we're adding it to the currently running queue, update its measured size\n numToRun = thisFrame.order.length;\n }\n return callback;\n },\n /**\n * Cancel the provided callback from running on the next frame.\n */\n cancel: (callback) => {\n nextFrame.remove(callback);\n toKeepAlive.delete(callback);\n },\n /**\n * Execute all schedule callbacks.\n */\n process: (frameData) => {\n /**\n * If we're already processing we've probably been triggered by a flushSync\n * inside an existing process. Instead of executing, mark flushNextFrame\n * as true and ensure we flush the following frame at the end of this one.\n */\n if (isProcessing) {\n flushNextFrame = true;\n return;\n }\n isProcessing = true;\n [thisFrame, nextFrame] = [nextFrame, thisFrame];\n // Clear the next frame queue\n nextFrame.clear();\n // Execute this frame\n numToRun = thisFrame.order.length;\n if (numToRun) {\n for (let i = 0; i < numToRun; i++) {\n const callback = thisFrame.order[i];\n callback(frameData);\n if (toKeepAlive.has(callback)) {\n step.schedule(callback);\n runNextFrame();\n }\n }\n }\n isProcessing = false;\n if (flushNextFrame) {\n flushNextFrame = false;\n step.process(frameData);\n }\n },\n };\n return step;\n}\n\nexport { createRenderStep };\n","import { createRenderStep } from './render-step.mjs';\n\nconst stepsOrder = [\n \"prepare\",\n \"read\",\n \"update\",\n \"preRender\",\n \"render\",\n \"postRender\",\n];\nconst maxElapsed = 40;\nfunction createRenderBatcher(scheduleNextBatch, allowKeepAlive) {\n let runNextFrame = false;\n let useDefaultElapsed = true;\n const state = {\n delta: 0,\n timestamp: 0,\n isProcessing: false,\n };\n const steps = stepsOrder.reduce((acc, key) => {\n acc[key] = createRenderStep(() => (runNextFrame = true));\n return acc;\n }, {});\n const processStep = (stepId) => steps[stepId].process(state);\n const processBatch = () => {\n const timestamp = performance.now();\n runNextFrame = false;\n state.delta = useDefaultElapsed\n ? 1000 / 60\n : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);\n state.timestamp = timestamp;\n state.isProcessing = true;\n stepsOrder.forEach(processStep);\n state.isProcessing = false;\n if (runNextFrame && allowKeepAlive) {\n useDefaultElapsed = false;\n scheduleNextBatch(processBatch);\n }\n };\n const wake = () => {\n runNextFrame = true;\n useDefaultElapsed = true;\n if (!state.isProcessing) {\n scheduleNextBatch(processBatch);\n }\n };\n const schedule = stepsOrder.reduce((acc, key) => {\n const step = steps[key];\n acc[key] = (process, keepAlive = false, immediate = false) => {\n if (!runNextFrame)\n wake();\n return step.schedule(process, keepAlive, immediate);\n };\n return acc;\n }, {});\n const cancel = (process) => stepsOrder.forEach((key) => steps[key].cancel(process));\n return { schedule, cancel, state, steps };\n}\n\nexport { createRenderBatcher, stepsOrder };\n","import { noop } from '../utils/noop.mjs';\nimport { createRenderBatcher } from './batcher.mjs';\n\nconst { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== \"undefined\" ? requestAnimationFrame : noop, true);\n\nexport { cancelFrame, frame, frameData, steps };\n","import { renderSVG } from './utils/render.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';\nimport { createSvgRenderState } from './utils/create-render-state.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\nimport { isSVGTag } from './utils/is-svg-tag.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\nconst svgMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,\n createRenderState: createSvgRenderState,\n onMount: (props, instance, { renderState, latestValues }) => {\n frame.read(() => {\n try {\n renderState.dimensions =\n typeof instance.getBBox ===\n \"function\"\n ? instance.getBBox()\n : instance.getBoundingClientRect();\n }\n catch (e) {\n // Most likely trying to measure an unrendered element under Firefox\n renderState.dimensions = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n };\n }\n });\n frame.render(() => {\n buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate);\n renderSVG(instance, renderState);\n });\n },\n }),\n};\n\nexport { svgMotionConfig };\n","import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { createHtmlRenderState } from './utils/create-render-state.mjs';\n\nconst htmlMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps,\n createRenderState: createHtmlRenderState,\n }),\n};\n\nexport { htmlMotionConfig };\n","function addDomEvent(target, eventName, handler, options = { passive: true }) {\n target.addEventListener(eventName, handler, options);\n return () => target.removeEventListener(eventName, handler);\n}\n\nexport { addDomEvent };\n","const isPrimaryPointer = (event) => {\n if (event.pointerType === \"mouse\") {\n return typeof event.button !== \"number\" || event.button <= 0;\n }\n else {\n /**\n * isPrimary is true for all mice buttons, whereas every touch point\n * is regarded as its own input. So subsequent concurrent touch points\n * will be false.\n *\n * Specifically match against false here as incomplete versions of\n * PointerEvents in very old browser might have it set as undefined.\n */\n return event.isPrimary !== false;\n }\n};\n\nexport { isPrimaryPointer };\n","import { isPrimaryPointer } from './utils/is-primary-pointer.mjs';\n\nfunction extractEventInfo(event, pointType = \"page\") {\n return {\n point: {\n x: event[pointType + \"X\"],\n y: event[pointType + \"Y\"],\n },\n };\n}\nconst addPointerInfo = (handler) => {\n return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));\n};\n\nexport { addPointerInfo, extractEventInfo };\n","import { addDomEvent } from './add-dom-event.mjs';\nimport { addPointerInfo } from './event-info.mjs';\n\nfunction addPointerEvent(target, eventName, handler, options) {\n return addDomEvent(target, eventName, addPointerInfo(handler), options);\n}\n\nexport { addPointerEvent };\n","/**\n * Pipe\n * Compose other transformers to run linearily\n * pipe(min(20), max(40))\n * @param {...functions} transformers\n * @return {function}\n */\nconst combineFunctions = (a, b) => (v) => b(a(v));\nconst pipe = (...transformers) => transformers.reduce(combineFunctions);\n\nexport { pipe };\n","function createLock(name) {\n let lock = null;\n return () => {\n const openLock = () => {\n lock = null;\n };\n if (lock === null) {\n lock = name;\n return openLock;\n }\n return false;\n };\n}\nconst globalHorizontalLock = createLock(\"dragHorizontal\");\nconst globalVerticalLock = createLock(\"dragVertical\");\nfunction getGlobalLock(drag) {\n let lock = false;\n if (drag === \"y\") {\n lock = globalVerticalLock();\n }\n else if (drag === \"x\") {\n lock = globalHorizontalLock();\n }\n else {\n const openHorizontal = globalHorizontalLock();\n const openVertical = globalVerticalLock();\n if (openHorizontal && openVertical) {\n lock = () => {\n openHorizontal();\n openVertical();\n };\n }\n else {\n // Release the locks because we don't use them\n if (openHorizontal)\n openHorizontal();\n if (openVertical)\n openVertical();\n }\n }\n return lock;\n}\nfunction isDragActive() {\n // Check the gesture lock - if we get it, it means no drag gesture is active\n // and we can safely fire the tap gesture.\n const openGestureLock = getGlobalLock(true);\n if (!openGestureLock)\n return true;\n openGestureLock();\n return false;\n}\n\nexport { createLock, getGlobalLock, isDragActive };\n","class Feature {\n constructor(node) {\n this.isMounted = false;\n this.node = node;\n }\n update() { }\n}\n\nexport { Feature };\n","import { addPointerEvent } from '../events/add-pointer-event.mjs';\nimport { pipe } from '../utils/pipe.mjs';\nimport { isDragActive } from './drag/utils/lock.mjs';\nimport { Feature } from '../motion/features/Feature.mjs';\nimport { frame } from '../frameloop/frame.mjs';\n\nfunction addHoverEvent(node, isActive) {\n const eventName = \"pointer\" + (isActive ? \"enter\" : \"leave\");\n const callbackName = \"onHover\" + (isActive ? \"Start\" : \"End\");\n const handleEvent = (event, info) => {\n if (event.type === \"touch\" || isDragActive())\n return;\n const props = node.getProps();\n if (node.animationState && props.whileHover) {\n node.animationState.setActive(\"whileHover\", isActive);\n }\n if (props[callbackName]) {\n frame.update(() => props[callbackName](event, info));\n }\n };\n return addPointerEvent(node.current, eventName, handleEvent, {\n passive: !node.getProps()[callbackName],\n });\n}\nclass HoverGesture extends Feature {\n mount() {\n this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false));\n }\n unmount() { }\n}\n\nexport { HoverGesture };\n","/**\n * Recursively traverse up the tree to check whether the provided child node\n * is the parent or a descendant of it.\n *\n * @param parent - Element to find\n * @param child - Element to test against parent\n */\nconst isNodeOrChild = (parent, child) => {\n if (!child) {\n return false;\n }\n else if (parent === child) {\n return true;\n }\n else {\n return isNodeOrChild(parent, child.parentElement);\n }\n};\n\nexport { isNodeOrChild };\n","import { extractEventInfo } from '../events/event-info.mjs';\nimport { addDomEvent } from '../events/add-dom-event.mjs';\nimport { addPointerEvent } from '../events/add-pointer-event.mjs';\nimport { Feature } from '../motion/features/Feature.mjs';\nimport { pipe } from '../utils/pipe.mjs';\nimport { isDragActive } from './drag/utils/lock.mjs';\nimport { isNodeOrChild } from './utils/is-node-or-child.mjs';\nimport { noop } from '../utils/noop.mjs';\nimport { frame } from '../frameloop/frame.mjs';\n\nfunction fireSyntheticPointerEvent(name, handler) {\n if (!handler)\n return;\n const syntheticPointerEvent = new PointerEvent(\"pointer\" + name);\n handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));\n}\nclass PressGesture extends Feature {\n constructor() {\n super(...arguments);\n this.removeStartListeners = noop;\n this.removeEndListeners = noop;\n this.removeAccessibleListeners = noop;\n this.startPointerPress = (startEvent, startInfo) => {\n this.removeEndListeners();\n if (this.isPressing)\n return;\n const props = this.node.getProps();\n const endPointerPress = (endEvent, endInfo) => {\n if (!this.checkPressEnd())\n return;\n const { onTap, onTapCancel } = this.node.getProps();\n frame.update(() => {\n /**\n * We only count this as a tap gesture if the event.target is the same\n * as, or a child of, this component's element\n */\n !isNodeOrChild(this.node.current, endEvent.target)\n ? onTapCancel && onTapCancel(endEvent, endInfo)\n : onTap && onTap(endEvent, endInfo);\n });\n };\n const removePointerUpListener = addPointerEvent(window, \"pointerup\", endPointerPress, { passive: !(props.onTap || props[\"onPointerUp\"]) });\n const removePointerCancelListener = addPointerEvent(window, \"pointercancel\", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), { passive: !(props.onTapCancel || props[\"onPointerCancel\"]) });\n this.removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener);\n this.startPress(startEvent, startInfo);\n };\n this.startAccessiblePress = () => {\n const handleKeydown = (keydownEvent) => {\n if (keydownEvent.key !== \"Enter\" || this.isPressing)\n return;\n const handleKeyup = (keyupEvent) => {\n if (keyupEvent.key !== \"Enter\" || !this.checkPressEnd())\n return;\n fireSyntheticPointerEvent(\"up\", (event, info) => {\n const { onTap } = this.node.getProps();\n if (onTap) {\n frame.update(() => onTap(event, info));\n }\n });\n };\n this.removeEndListeners();\n this.removeEndListeners = addDomEvent(this.node.current, \"keyup\", handleKeyup);\n fireSyntheticPointerEvent(\"down\", (event, info) => {\n this.startPress(event, info);\n });\n };\n const removeKeydownListener = addDomEvent(this.node.current, \"keydown\", handleKeydown);\n const handleBlur = () => {\n if (!this.isPressing)\n return;\n fireSyntheticPointerEvent(\"cancel\", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo));\n };\n const removeBlurListener = addDomEvent(this.node.current, \"blur\", handleBlur);\n this.removeAccessibleListeners = pipe(removeKeydownListener, removeBlurListener);\n };\n }\n startPress(event, info) {\n this.isPressing = true;\n const { onTapStart, whileTap } = this.node.getProps();\n /**\n * Ensure we trigger animations before firing event callback\n */\n if (whileTap && this.node.animationState) {\n this.node.animationState.setActive(\"whileTap\", true);\n }\n if (onTapStart) {\n frame.update(() => onTapStart(event, info));\n }\n }\n checkPressEnd() {\n this.removeEndListeners();\n this.isPressing = false;\n const props = this.node.getProps();\n if (props.whileTap && this.node.animationState) {\n this.node.animationState.setActive(\"whileTap\", false);\n }\n return !isDragActive();\n }\n cancelPress(event, info) {\n if (!this.checkPressEnd())\n return;\n const { onTapCancel } = this.node.getProps();\n if (onTapCancel) {\n frame.update(() => onTapCancel(event, info));\n }\n }\n mount() {\n const props = this.node.getProps();\n const removePointerListener = addPointerEvent(this.node.current, \"pointerdown\", this.startPointerPress, { passive: !(props.onTapStart || props[\"onPointerStart\"]) });\n const removeFocusListener = addDomEvent(this.node.current, \"focus\", this.startAccessiblePress);\n this.removeStartListeners = pipe(removePointerListener, removeFocusListener);\n }\n unmount() {\n this.removeStartListeners();\n this.removeEndListeners();\n this.removeAccessibleListeners();\n }\n}\n\nexport { PressGesture };\n","/**\n * Map an IntersectionHandler callback to an element. We only ever make one handler for one\n * element, so even though these handlers might all be triggered by different\n * observers, we can keep them in the same map.\n */\nconst observerCallbacks = new WeakMap();\n/**\n * Multiple observers can be created for multiple element/document roots. Each with\n * different settings. So here we store dictionaries of observers to each root,\n * using serialised settings (threshold/margin) as lookup keys.\n */\nconst observers = new WeakMap();\nconst fireObserverCallback = (entry) => {\n const callback = observerCallbacks.get(entry.target);\n callback && callback(entry);\n};\nconst fireAllObserverCallbacks = (entries) => {\n entries.forEach(fireObserverCallback);\n};\nfunction initIntersectionObserver({ root, ...options }) {\n const lookupRoot = root || document;\n /**\n * If we don't have an observer lookup map for this root, create one.\n */\n if (!observers.has(lookupRoot)) {\n observers.set(lookupRoot, {});\n }\n const rootObservers = observers.get(lookupRoot);\n const key = JSON.stringify(options);\n /**\n * If we don't have an observer for this combination of root and settings,\n * create one.\n */\n if (!rootObservers[key]) {\n rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options });\n }\n return rootObservers[key];\n}\nfunction observeIntersection(element, options, callback) {\n const rootInteresectionObserver = initIntersectionObserver(options);\n observerCallbacks.set(element, callback);\n rootInteresectionObserver.observe(element);\n return () => {\n observerCallbacks.delete(element);\n rootInteresectionObserver.unobserve(element);\n };\n}\n\nexport { observeIntersection };\n","import { Feature } from '../Feature.mjs';\nimport { observeIntersection } from './observers.mjs';\n\nconst thresholdNames = {\n some: 0,\n all: 1,\n};\nclass InViewFeature extends Feature {\n constructor() {\n super(...arguments);\n this.hasEnteredView = false;\n this.isInView = false;\n }\n startObserver() {\n this.unmount();\n const { viewport = {} } = this.node.getProps();\n const { root, margin: rootMargin, amount = \"some\", once } = viewport;\n const options = {\n root: root ? root.current : undefined,\n rootMargin,\n threshold: typeof amount === \"number\" ? amount : thresholdNames[amount],\n };\n const onIntersectionUpdate = (entry) => {\n const { isIntersecting } = entry;\n /**\n * If there's been no change in the viewport state, early return.\n */\n if (this.isInView === isIntersecting)\n return;\n this.isInView = isIntersecting;\n /**\n * Handle hasEnteredView. If this is only meant to run once, and\n * element isn't visible, early return. Otherwise set hasEnteredView to true.\n */\n if (once && !isIntersecting && this.hasEnteredView) {\n return;\n }\n else if (isIntersecting) {\n this.hasEnteredView = true;\n }\n if (this.node.animationState) {\n this.node.animationState.setActive(\"whileInView\", isIntersecting);\n }\n /**\n * Use the latest committed props rather than the ones in scope\n * when this observer is created\n */\n const { onViewportEnter, onViewportLeave } = this.node.getProps();\n const callback = isIntersecting ? onViewportEnter : onViewportLeave;\n callback && callback(entry);\n };\n return observeIntersection(this.node.current, options, onIntersectionUpdate);\n }\n mount() {\n this.startObserver();\n }\n update() {\n if (typeof IntersectionObserver === \"undefined\")\n return;\n const { props, prevProps } = this.node;\n const hasOptionsChanged = [\"amount\", \"margin\", \"root\"].some(hasViewportOptionChanged(props, prevProps));\n if (hasOptionsChanged) {\n this.startObserver();\n }\n }\n unmount() { }\n}\nfunction hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) {\n return (name) => viewport[name] !== prevViewport[name];\n}\n\nexport { InViewFeature };\n","import { HoverGesture } from '../../gestures/hover.mjs';\nimport { FocusGesture } from '../../gestures/focus.mjs';\nimport { PressGesture } from '../../gestures/press.mjs';\nimport { InViewFeature } from './viewport/index.mjs';\n\nconst gestureAnimations = {\n inView: {\n Feature: InViewFeature,\n },\n tap: {\n Feature: PressGesture,\n },\n focus: {\n Feature: FocusGesture,\n },\n hover: {\n Feature: HoverGesture,\n },\n};\n\nexport { gestureAnimations };\n","import { addDomEvent } from '../events/add-dom-event.mjs';\nimport { Feature } from '../motion/features/Feature.mjs';\nimport { pipe } from '../utils/pipe.mjs';\n\nclass FocusGesture extends Feature {\n constructor() {\n super(...arguments);\n this.isActive = false;\n }\n onFocus() {\n let isFocusVisible = false;\n /**\n * If this element doesn't match focus-visible then don't\n * apply whileHover. But, if matches throws that focus-visible\n * is not a valid selector then in that browser outline styles will be applied\n * to the element by default and we want to match that behaviour with whileFocus.\n */\n try {\n isFocusVisible = this.node.current.matches(\":focus-visible\");\n }\n catch (e) {\n isFocusVisible = true;\n }\n if (!isFocusVisible || !this.node.animationState)\n return;\n this.node.animationState.setActive(\"whileFocus\", true);\n this.isActive = true;\n }\n onBlur() {\n if (!this.isActive || !this.node.animationState)\n return;\n this.node.animationState.setActive(\"whileFocus\", false);\n this.isActive = false;\n }\n mount() {\n this.unmount = pipe(addDomEvent(this.node.current, \"focus\", () => this.onFocus()), addDomEvent(this.node.current, \"blur\", () => this.onBlur()));\n }\n unmount() { }\n}\n\nexport { FocusGesture };\n","function shallowCompare(next, prev) {\n if (!Array.isArray(prev))\n return false;\n const prevLength = prev.length;\n if (prevLength !== next.length)\n return false;\n for (let i = 0; i < prevLength; i++) {\n if (prev[i] !== next[i])\n return false;\n }\n return true;\n}\n\nexport { shallowCompare };\n","import { resolveVariantFromProps } from './resolve-variants.mjs';\n\n/**\n * Creates an object containing the latest state of every MotionValue on a VisualElement\n */\nfunction getCurrent(visualElement) {\n const current = {};\n visualElement.values.forEach((value, key) => (current[key] = value.get()));\n return current;\n}\n/**\n * Creates an object containing the latest velocity of every MotionValue on a VisualElement\n */\nfunction getVelocity(visualElement) {\n const velocity = {};\n visualElement.values.forEach((value, key) => (velocity[key] = value.getVelocity()));\n return velocity;\n}\nfunction resolveVariant(visualElement, definition, custom) {\n const props = visualElement.getProps();\n return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, getCurrent(visualElement), getVelocity(visualElement));\n}\n\nexport { resolveVariant };\n","import { noop } from './noop.mjs';\n\nlet warning = noop;\nlet invariant = noop;\nif (process.env.NODE_ENV !== \"production\") {\n warning = (check, message) => {\n if (!check && typeof console !== \"undefined\") {\n console.warn(message);\n }\n };\n invariant = (check, message) => {\n if (!check) {\n throw new Error(message);\n }\n };\n}\n\nexport { invariant, warning };\n","/**\n * Converts seconds to milliseconds\n *\n * @param seconds - Time in seconds.\n * @return milliseconds - Converted time in milliseconds.\n */\nconst secondsToMilliseconds = (seconds) => seconds * 1000;\nconst millisecondsToSeconds = (milliseconds) => milliseconds / 1000;\n\nexport { millisecondsToSeconds, secondsToMilliseconds };\n","const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === \"number\";\n\nexport { isBezierDefinition };\n","import { isBezierDefinition } from '../../../easing/utils/is-bezier-definition.mjs';\n\nfunction isWaapiSupportedEasing(easing) {\n return Boolean(!easing ||\n (typeof easing === \"string\" && supportedWaapiEasing[easing]) ||\n isBezierDefinition(easing) ||\n (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));\n}\nconst cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;\nconst supportedWaapiEasing = {\n linear: \"linear\",\n ease: \"ease\",\n easeIn: \"ease-in\",\n easeOut: \"ease-out\",\n easeInOut: \"ease-in-out\",\n circIn: cubicBezierAsString([0, 0.65, 0.55, 1]),\n circOut: cubicBezierAsString([0.55, 0, 1, 0.45]),\n backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),\n backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),\n};\nfunction mapEasingToNativeEasing(easing) {\n if (!easing)\n return undefined;\n return isBezierDefinition(easing)\n ? cubicBezierAsString(easing)\n : Array.isArray(easing)\n ? easing.map(mapEasingToNativeEasing)\n : supportedWaapiEasing[easing];\n}\n\nexport { cubicBezierAsString, isWaapiSupportedEasing, mapEasingToNativeEasing, supportedWaapiEasing };\n","import { noop } from '../utils/noop.mjs';\n\n/*\n Bezier function generator\n This has been modified from Gaëtan Renaudeau's BezierEasing\n https://github.com/gre/bezier-easing/blob/master/src/index.js\n https://github.com/gre/bezier-easing/blob/master/LICENSE\n \n I've removed the newtonRaphsonIterate algo because in benchmarking it\n wasn't noticiably faster than binarySubdivision, indeed removing it\n usually improved times, depending on the curve.\n I also removed the lookup table, as for the added bundle size and loop we're\n only cutting ~4 or so subdivision iterations. I bumped the max iterations up\n to 12 to compensate and this still tended to be faster for no perceivable\n loss in accuracy.\n Usage\n const easeOut = cubicBezier(.17,.67,.83,.67);\n const x = easeOut(0.5); // returns 0.627...\n*/\n// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.\nconst calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *\n t;\nconst subdivisionPrecision = 0.0000001;\nconst subdivisionMaxIterations = 12;\nfunction binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {\n let currentX;\n let currentT;\n let i = 0;\n do {\n currentT = lowerBound + (upperBound - lowerBound) / 2.0;\n currentX = calcBezier(currentT, mX1, mX2) - x;\n if (currentX > 0.0) {\n upperBound = currentT;\n }\n else {\n lowerBound = currentT;\n }\n } while (Math.abs(currentX) > subdivisionPrecision &&\n ++i < subdivisionMaxIterations);\n return currentT;\n}\nfunction cubicBezier(mX1, mY1, mX2, mY2) {\n // If this is a linear gradient, return linear easing\n if (mX1 === mY1 && mX2 === mY2)\n return noop;\n const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);\n // If animation is at start/end, return t without easing\n return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);\n}\n\nexport { cubicBezier };\n","import { cubicBezier } from './cubic-bezier.mjs';\n\nconst easeIn = cubicBezier(0.42, 0, 1, 1);\nconst easeOut = cubicBezier(0, 0, 0.58, 1);\nconst easeInOut = cubicBezier(0.42, 0, 0.58, 1);\n\nexport { easeIn, easeInOut, easeOut };\n","const isEasingArray = (ease) => {\n return Array.isArray(ease) && typeof ease[0] !== \"number\";\n};\n\nexport { isEasingArray };\n","// Accepts an easing function and returns a new one that outputs mirrored values for\n// the second half of the animation. Turns easeIn into easeInOut.\nconst mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;\n\nexport { mirrorEasing };\n","// Accepts an easing function and returns a new one that outputs reversed values.\n// Turns easeIn into easeOut.\nconst reverseEasing = (easing) => (p) => 1 - easing(1 - p);\n\nexport { reverseEasing };\n","import { mirrorEasing } from './modifiers/mirror.mjs';\nimport { reverseEasing } from './modifiers/reverse.mjs';\n\nconst circIn = (p) => 1 - Math.sin(Math.acos(p));\nconst circOut = reverseEasing(circIn);\nconst circInOut = mirrorEasing(circIn);\n\nexport { circIn, circInOut, circOut };\n","import { cubicBezier } from './cubic-bezier.mjs';\nimport { mirrorEasing } from './modifiers/mirror.mjs';\nimport { reverseEasing } from './modifiers/reverse.mjs';\n\nconst backOut = cubicBezier(0.33, 1.53, 0.69, 0.99);\nconst backIn = reverseEasing(backOut);\nconst backInOut = mirrorEasing(backIn);\n\nexport { backIn, backInOut, backOut };\n","import { invariant } from '../../utils/errors.mjs';\nimport { cubicBezier } from '../cubic-bezier.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { easeIn, easeInOut, easeOut } from '../ease.mjs';\nimport { circIn, circInOut, circOut } from '../circ.mjs';\nimport { backIn, backInOut, backOut } from '../back.mjs';\nimport { anticipate } from '../anticipate.mjs';\n\nconst easingLookup = {\n linear: noop,\n easeIn,\n easeInOut,\n easeOut,\n circIn,\n circInOut,\n circOut,\n backIn,\n backInOut,\n backOut,\n anticipate,\n};\nconst easingDefinitionToFunction = (definition) => {\n if (Array.isArray(definition)) {\n // If cubic bezier definition, create bezier curve\n invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);\n const [x1, y1, x2, y2] = definition;\n return cubicBezier(x1, y1, x2, y2);\n }\n else if (typeof definition === \"string\") {\n // Else lookup from table\n invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);\n return easingLookup[definition];\n }\n return definition;\n};\n\nexport { easingDefinitionToFunction };\n","import { backIn } from './back.mjs';\n\nconst anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));\n\nexport { anticipate };\n","import { isString, singleColorRegex, floatRegex } from '../utils.mjs';\n\n/**\n * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,\n * but false if a number or multiple colors\n */\nconst isColorString = (type, testProp) => (v) => {\n return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||\n (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));\n};\nconst splitColor = (aName, bName, cName) => (v) => {\n if (!isString(v))\n return v;\n const [a, b, c, alpha] = v.match(floatRegex);\n return {\n [aName]: parseFloat(a),\n [bName]: parseFloat(b),\n [cName]: parseFloat(c),\n alpha: alpha !== undefined ? parseFloat(alpha) : 1,\n };\n};\n\nexport { isColorString, splitColor };\n","import { clamp } from '../../../utils/clamp.mjs';\nimport { number, alpha } from '../numbers/index.mjs';\nimport { sanitize } from '../utils.mjs';\nimport { isColorString, splitColor } from './utils.mjs';\n\nconst clampRgbUnit = (v) => clamp(0, 255, v);\nconst rgbUnit = {\n ...number,\n transform: (v) => Math.round(clampRgbUnit(v)),\n};\nconst rgba = {\n test: isColorString(\"rgb\", \"red\"),\n parse: splitColor(\"red\", \"green\", \"blue\"),\n transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => \"rgba(\" +\n rgbUnit.transform(red) +\n \", \" +\n rgbUnit.transform(green) +\n \", \" +\n rgbUnit.transform(blue) +\n \", \" +\n sanitize(alpha.transform(alpha$1)) +\n \")\",\n};\n\nexport { rgbUnit, rgba };\n","import { rgba } from './rgba.mjs';\nimport { isColorString } from './utils.mjs';\n\nfunction parseHex(v) {\n let r = \"\";\n let g = \"\";\n let b = \"\";\n let a = \"\";\n // If we have 6 characters, ie #FF0000\n if (v.length > 5) {\n r = v.substring(1, 3);\n g = v.substring(3, 5);\n b = v.substring(5, 7);\n a = v.substring(7, 9);\n // Or we have 3 characters, ie #F00\n }\n else {\n r = v.substring(1, 2);\n g = v.substring(2, 3);\n b = v.substring(3, 4);\n a = v.substring(4, 5);\n r += r;\n g += g;\n b += b;\n a += a;\n }\n return {\n red: parseInt(r, 16),\n green: parseInt(g, 16),\n blue: parseInt(b, 16),\n alpha: a ? parseInt(a, 16) / 255 : 1,\n };\n}\nconst hex = {\n test: isColorString(\"#\"),\n parse: parseHex,\n transform: rgba.transform,\n};\n\nexport { hex };\n","import { alpha } from '../numbers/index.mjs';\nimport { percent } from '../numbers/units.mjs';\nimport { sanitize } from '../utils.mjs';\nimport { isColorString, splitColor } from './utils.mjs';\n\nconst hsla = {\n test: isColorString(\"hsl\", \"hue\"),\n parse: splitColor(\"hue\", \"saturation\", \"lightness\"),\n transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {\n return (\"hsla(\" +\n Math.round(hue) +\n \", \" +\n percent.transform(sanitize(saturation)) +\n \", \" +\n percent.transform(sanitize(lightness)) +\n \", \" +\n sanitize(alpha.transform(alpha$1)) +\n \")\");\n },\n};\n\nexport { hsla };\n","import { isString } from '../utils.mjs';\nimport { hex } from './hex.mjs';\nimport { hsla } from './hsla.mjs';\nimport { rgba } from './rgba.mjs';\n\nconst color = {\n test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),\n parse: (v) => {\n if (rgba.test(v)) {\n return rgba.parse(v);\n }\n else if (hsla.test(v)) {\n return hsla.parse(v);\n }\n else {\n return hex.parse(v);\n }\n },\n transform: (v) => {\n return isString(v)\n ? v\n : v.hasOwnProperty(\"red\")\n ? rgba.transform(v)\n : hsla.transform(v);\n },\n};\n\nexport { color };\n","/*\n Value in range from progress\n\n Given a lower limit and an upper limit, we return the value within\n that range as expressed by progress (usually a number from 0 to 1)\n\n So progress = 0.5 would change\n\n from -------- to\n\n to\n\n from ---- to\n\n E.g. from = 10, to = 20, progress = 0.5 => 15\n\n @param [number]: Lower limit of range\n @param [number]: Upper limit of range\n @param [number]: The progress between lower and upper limits expressed 0-1\n @return [number]: Value as calculated from progress within range (not limited within range)\n*/\nconst mix = (from, to, progress) => -progress * from + progress * to + from;\n\nexport { mix };\n","// Adapted from https://gist.github.com/mjackson/5311256\nfunction hueToRgb(p, q, t) {\n if (t < 0)\n t += 1;\n if (t > 1)\n t -= 1;\n if (t < 1 / 6)\n return p + (q - p) * 6 * t;\n if (t < 1 / 2)\n return q;\n if (t < 2 / 3)\n return p + (q - p) * (2 / 3 - t) * 6;\n return p;\n}\nfunction hslaToRgba({ hue, saturation, lightness, alpha }) {\n hue /= 360;\n saturation /= 100;\n lightness /= 100;\n let red = 0;\n let green = 0;\n let blue = 0;\n if (!saturation) {\n red = green = blue = lightness;\n }\n else {\n const q = lightness < 0.5\n ? lightness * (1 + saturation)\n : lightness + saturation - lightness * saturation;\n const p = 2 * lightness - q;\n red = hueToRgb(p, q, hue + 1 / 3);\n green = hueToRgb(p, q, hue);\n blue = hueToRgb(p, q, hue - 1 / 3);\n }\n return {\n red: Math.round(red * 255),\n green: Math.round(green * 255),\n blue: Math.round(blue * 255),\n alpha,\n };\n}\n\nexport { hslaToRgba };\n","import { mix } from './mix.mjs';\nimport { invariant } from './errors.mjs';\nimport { hslaToRgba } from './hsla-to-rgba.mjs';\nimport { hex } from '../value/types/color/hex.mjs';\nimport { rgba } from '../value/types/color/rgba.mjs';\nimport { hsla } from '../value/types/color/hsla.mjs';\n\n// Linear color space blending\n// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw\n// Demonstrated http://codepen.io/osublake/pen/xGVVaN\nconst mixLinearColor = (from, to, v) => {\n const fromExpo = from * from;\n return Math.sqrt(Math.max(0, v * (to * to - fromExpo) + fromExpo));\n};\nconst colorTypes = [hex, rgba, hsla];\nconst getColorType = (v) => colorTypes.find((type) => type.test(v));\nfunction asRGBA(color) {\n const type = getColorType(color);\n invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);\n let model = type.parse(color);\n if (type === hsla) {\n // TODO Remove this cast - needed since Framer Motion's stricter typing\n model = hslaToRgba(model);\n }\n return model;\n}\nconst mixColor = (from, to) => {\n const fromRGBA = asRGBA(from);\n const toRGBA = asRGBA(to);\n const blended = { ...fromRGBA };\n return (v) => {\n blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);\n blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);\n blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);\n blended.alpha = mix(fromRGBA.alpha, toRGBA.alpha, v);\n return rgba.transform(blended);\n };\n};\n\nexport { mixColor, mixLinearColor };\n","import { cssVariableRegex } from '../../../render/dom/utils/is-css-variable.mjs';\nimport { noop } from '../../../utils/noop.mjs';\nimport { color } from '../color/index.mjs';\nimport { number } from '../numbers/index.mjs';\nimport { colorRegex, floatRegex, isString, sanitize } from '../utils.mjs';\n\nfunction test(v) {\n var _a, _b;\n return (isNaN(v) &&\n isString(v) &&\n (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +\n (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >\n 0);\n}\nconst cssVarTokeniser = {\n regex: cssVariableRegex,\n countKey: \"Vars\",\n token: \"${v}\",\n parse: noop,\n};\nconst colorTokeniser = {\n regex: colorRegex,\n countKey: \"Colors\",\n token: \"${c}\",\n parse: color.parse,\n};\nconst numberTokeniser = {\n regex: floatRegex,\n countKey: \"Numbers\",\n token: \"${n}\",\n parse: number.parse,\n};\nfunction tokenise(info, { regex, countKey, token, parse }) {\n const matches = info.tokenised.match(regex);\n if (!matches)\n return;\n info[\"num\" + countKey] = matches.length;\n info.tokenised = info.tokenised.replace(regex, token);\n info.values.push(...matches.map(parse));\n}\nfunction analyseComplexValue(value) {\n const originalValue = value.toString();\n const info = {\n value: originalValue,\n tokenised: originalValue,\n values: [],\n numVars: 0,\n numColors: 0,\n numNumbers: 0,\n };\n if (info.value.includes(\"var(--\"))\n tokenise(info, cssVarTokeniser);\n tokenise(info, colorTokeniser);\n tokenise(info, numberTokeniser);\n return info;\n}\nfunction parseComplexValue(v) {\n return analyseComplexValue(v).values;\n}\nfunction createTransformer(source) {\n const { values, numColors, numVars, tokenised } = analyseComplexValue(source);\n const numValues = values.length;\n return (v) => {\n let output = tokenised;\n for (let i = 0; i < numValues; i++) {\n if (i < numVars) {\n output = output.replace(cssVarTokeniser.token, v[i]);\n }\n else if (i < numVars + numColors) {\n output = output.replace(colorTokeniser.token, color.transform(v[i]));\n }\n else {\n output = output.replace(numberTokeniser.token, sanitize(v[i]));\n }\n }\n return output;\n };\n}\nconst convertNumbersToZero = (v) => typeof v === \"number\" ? 0 : v;\nfunction getAnimatableNone(v) {\n const parsed = parseComplexValue(v);\n const transformer = createTransformer(v);\n return transformer(parsed.map(convertNumbersToZero));\n}\nconst complex = {\n test,\n parse: parseComplexValue,\n createTransformer,\n getAnimatableNone,\n};\n\nexport { analyseComplexValue, complex };\n","import { mix } from './mix.mjs';\nimport { mixColor } from './mix-color.mjs';\nimport { pipe } from './pipe.mjs';\nimport { warning } from './errors.mjs';\nimport { color } from '../value/types/color/index.mjs';\nimport { complex, analyseComplexValue } from '../value/types/complex/index.mjs';\n\nconst mixImmediate = (origin, target) => (p) => `${p > 0 ? target : origin}`;\nfunction getMixer(origin, target) {\n if (typeof origin === \"number\") {\n return (v) => mix(origin, target, v);\n }\n else if (color.test(origin)) {\n return mixColor(origin, target);\n }\n else {\n return origin.startsWith(\"var(\")\n ? mixImmediate(origin, target)\n : mixComplex(origin, target);\n }\n}\nconst mixArray = (from, to) => {\n const output = [...from];\n const numValues = output.length;\n const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i]));\n return (v) => {\n for (let i = 0; i < numValues; i++) {\n output[i] = blendValue[i](v);\n }\n return output;\n };\n};\nconst mixObject = (origin, target) => {\n const output = { ...origin, ...target };\n const blendValue = {};\n for (const key in output) {\n if (origin[key] !== undefined && target[key] !== undefined) {\n blendValue[key] = getMixer(origin[key], target[key]);\n }\n }\n return (v) => {\n for (const key in blendValue) {\n output[key] = blendValue[key](v);\n }\n return output;\n };\n};\nconst mixComplex = (origin, target) => {\n const template = complex.createTransformer(target);\n const originStats = analyseComplexValue(origin);\n const targetStats = analyseComplexValue(target);\n const canInterpolate = originStats.numVars === targetStats.numVars &&\n originStats.numColors === targetStats.numColors &&\n originStats.numNumbers >= targetStats.numNumbers;\n if (canInterpolate) {\n return pipe(mixArray(originStats.values, targetStats.values), template);\n }\n else {\n warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);\n return mixImmediate(origin, target);\n }\n};\n\nexport { mixArray, mixComplex, mixObject };\n","/*\n Progress within given range\n\n Given a lower limit and an upper limit, we return the progress\n (expressed as a number 0-1) represented by the given value, and\n limit that progress to within 0-1.\n\n @param [number]: Lower limit\n @param [number]: Upper limit\n @param [number]: Value to find progress within given range\n @return [number]: Progress of value within range as expressed 0-1\n*/\nconst progress = (from, to, value) => {\n const toFromDifference = to - from;\n return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;\n};\n\nexport { progress };\n","import { invariant } from './errors.mjs';\nimport { color } from '../value/types/color/index.mjs';\nimport { clamp } from './clamp.mjs';\nimport { mix } from './mix.mjs';\nimport { mixColor } from './mix-color.mjs';\nimport { mixComplex, mixArray, mixObject } from './mix-complex.mjs';\nimport { pipe } from './pipe.mjs';\nimport { progress } from './progress.mjs';\nimport { noop } from './noop.mjs';\n\nconst mixNumber = (from, to) => (p) => mix(from, to, p);\nfunction detectMixerFactory(v) {\n if (typeof v === \"number\") {\n return mixNumber;\n }\n else if (typeof v === \"string\") {\n return color.test(v) ? mixColor : mixComplex;\n }\n else if (Array.isArray(v)) {\n return mixArray;\n }\n else if (typeof v === \"object\") {\n return mixObject;\n }\n return mixNumber;\n}\nfunction createMixers(output, ease, customMixer) {\n const mixers = [];\n const mixerFactory = customMixer || detectMixerFactory(output[0]);\n const numMixers = output.length - 1;\n for (let i = 0; i < numMixers; i++) {\n let mixer = mixerFactory(output[i], output[i + 1]);\n if (ease) {\n const easingFunction = Array.isArray(ease) ? ease[i] || noop : ease;\n mixer = pipe(easingFunction, mixer);\n }\n mixers.push(mixer);\n }\n return mixers;\n}\n/**\n * Create a function that maps from a numerical input array to a generic output array.\n *\n * Accepts:\n * - Numbers\n * - Colors (hex, hsl, hsla, rgb, rgba)\n * - Complex (combinations of one or more numbers or strings)\n *\n * ```jsx\n * const mixColor = interpolate([0, 1], ['#fff', '#000'])\n *\n * mixColor(0.5) // 'rgba(128, 128, 128, 1)'\n * ```\n *\n * TODO Revist this approach once we've moved to data models for values,\n * probably not needed to pregenerate mixer functions.\n *\n * @public\n */\nfunction interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {\n const inputLength = input.length;\n invariant(inputLength === output.length, \"Both input and output ranges must be the same length\");\n /**\n * If we're only provided a single input, we can just make a function\n * that returns the output.\n */\n if (inputLength === 1)\n return () => output[0];\n // If input runs highest -> lowest, reverse both arrays\n if (input[0] > input[inputLength - 1]) {\n input = [...input].reverse();\n output = [...output].reverse();\n }\n const mixers = createMixers(output, ease, mixer);\n const numMixers = mixers.length;\n const interpolator = (v) => {\n let i = 0;\n if (numMixers > 1) {\n for (; i < input.length - 2; i++) {\n if (v < input[i + 1])\n break;\n }\n }\n const progressInRange = progress(input[i], input[i + 1], v);\n return mixers[i](progressInRange);\n };\n return isClamp\n ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v))\n : interpolator;\n}\n\nexport { interpolate };\n","import { easeInOut } from '../../easing/ease.mjs';\nimport { isEasingArray } from '../../easing/utils/is-easing-array.mjs';\nimport { easingDefinitionToFunction } from '../../easing/utils/map.mjs';\nimport { interpolate } from '../../utils/interpolate.mjs';\nimport { defaultOffset } from '../../utils/offsets/default.mjs';\nimport { convertOffsetToTimes } from '../../utils/offsets/time.mjs';\n\nfunction defaultEasing(values, easing) {\n return values.map(() => easing || easeInOut).splice(0, values.length - 1);\n}\nfunction keyframes({ duration = 300, keyframes: keyframeValues, times, ease = \"easeInOut\", }) {\n /**\n * Easing functions can be externally defined as strings. Here we convert them\n * into actual functions.\n */\n const easingFunctions = isEasingArray(ease)\n ? ease.map(easingDefinitionToFunction)\n : easingDefinitionToFunction(ease);\n /**\n * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator\n * to reduce GC during animation.\n */\n const state = {\n done: false,\n value: keyframeValues[0],\n };\n /**\n * Create a times array based on the provided 0-1 offsets\n */\n const absoluteTimes = convertOffsetToTimes(\n // Only use the provided offsets if they're the correct length\n // TODO Maybe we should warn here if there's a length mismatch\n times && times.length === keyframeValues.length\n ? times\n : defaultOffset(keyframeValues), duration);\n const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {\n ease: Array.isArray(easingFunctions)\n ? easingFunctions\n : defaultEasing(keyframeValues, easingFunctions),\n });\n return {\n calculatedDuration: duration,\n next: (t) => {\n state.value = mapTimeToKeyframe(t);\n state.done = t >= duration;\n return state;\n },\n };\n}\n\nexport { defaultEasing, keyframes };\n","function convertOffsetToTimes(offset, duration) {\n return offset.map((o) => o * duration);\n}\n\nexport { convertOffsetToTimes };\n","import { fillOffset } from './fill.mjs';\n\nfunction defaultOffset(arr) {\n const offset = [0];\n fillOffset(offset, arr.length - 1);\n return offset;\n}\n\nexport { defaultOffset };\n","import { mix } from '../mix.mjs';\nimport { progress } from '../progress.mjs';\n\nfunction fillOffset(offset, remaining) {\n const min = offset[offset.length - 1];\n for (let i = 1; i <= remaining; i++) {\n const offsetProgress = progress(0, remaining, i);\n offset.push(mix(min, 1, offsetProgress));\n }\n}\n\nexport { fillOffset };\n","/*\n Convert velocity into velocity per second\n\n @param [number]: Unit per frame\n @param [number]: Frame duration in ms\n*/\nfunction velocityPerSecond(velocity, frameDuration) {\n return frameDuration ? velocity * (1000 / frameDuration) : 0;\n}\n\nexport { velocityPerSecond };\n","import { velocityPerSecond } from '../../../utils/velocity-per-second.mjs';\n\nconst velocitySampleDuration = 5; // ms\nfunction calcGeneratorVelocity(resolveValue, t, current) {\n const prevT = Math.max(t - velocitySampleDuration, 0);\n return velocityPerSecond(current - resolveValue(prevT), t - prevT);\n}\n\nexport { calcGeneratorVelocity };\n","import { warning } from '../../../utils/errors.mjs';\nimport { clamp } from '../../../utils/clamp.mjs';\nimport { secondsToMilliseconds, millisecondsToSeconds } from '../../../utils/time-conversion.mjs';\n\nconst safeMin = 0.001;\nconst minDuration = 0.01;\nconst maxDuration = 10.0;\nconst minDamping = 0.05;\nconst maxDamping = 1;\nfunction findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {\n let envelope;\n let derivative;\n warning(duration <= secondsToMilliseconds(maxDuration), \"Spring duration must be 10 seconds or less\");\n let dampingRatio = 1 - bounce;\n /**\n * Restrict dampingRatio and duration to within acceptable ranges.\n */\n dampingRatio = clamp(minDamping, maxDamping, dampingRatio);\n duration = clamp(minDuration, maxDuration, millisecondsToSeconds(duration));\n if (dampingRatio < 1) {\n /**\n * Underdamped spring\n */\n envelope = (undampedFreq) => {\n const exponentialDecay = undampedFreq * dampingRatio;\n const delta = exponentialDecay * duration;\n const a = exponentialDecay - velocity;\n const b = calcAngularFreq(undampedFreq, dampingRatio);\n const c = Math.exp(-delta);\n return safeMin - (a / b) * c;\n };\n derivative = (undampedFreq) => {\n const exponentialDecay = undampedFreq * dampingRatio;\n const delta = exponentialDecay * duration;\n const d = delta * velocity + velocity;\n const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;\n const f = Math.exp(-delta);\n const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);\n const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;\n return (factor * ((d - e) * f)) / g;\n };\n }\n else {\n /**\n * Critically-damped spring\n */\n envelope = (undampedFreq) => {\n const a = Math.exp(-undampedFreq * duration);\n const b = (undampedFreq - velocity) * duration + 1;\n return -safeMin + a * b;\n };\n derivative = (undampedFreq) => {\n const a = Math.exp(-undampedFreq * duration);\n const b = (velocity - undampedFreq) * (duration * duration);\n return a * b;\n };\n }\n const initialGuess = 5 / duration;\n const undampedFreq = approximateRoot(envelope, derivative, initialGuess);\n duration = secondsToMilliseconds(duration);\n if (isNaN(undampedFreq)) {\n return {\n stiffness: 100,\n damping: 10,\n duration,\n };\n }\n else {\n const stiffness = Math.pow(undampedFreq, 2) * mass;\n return {\n stiffness,\n damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),\n duration,\n };\n }\n}\nconst rootIterations = 12;\nfunction approximateRoot(envelope, derivative, initialGuess) {\n let result = initialGuess;\n for (let i = 1; i < rootIterations; i++) {\n result = result - envelope(result) / derivative(result);\n }\n return result;\n}\nfunction calcAngularFreq(undampedFreq, dampingRatio) {\n return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);\n}\n\nexport { calcAngularFreq, findSpring, maxDamping, maxDuration, minDamping, minDuration };\n","import { millisecondsToSeconds } from '../../../utils/time-conversion.mjs';\nimport { calcGeneratorVelocity } from '../utils/velocity.mjs';\nimport { findSpring, calcAngularFreq } from './find.mjs';\n\nconst durationKeys = [\"duration\", \"bounce\"];\nconst physicsKeys = [\"stiffness\", \"damping\", \"mass\"];\nfunction isSpringType(options, keys) {\n return keys.some((key) => options[key] !== undefined);\n}\nfunction getSpringOptions(options) {\n let springOptions = {\n velocity: 0.0,\n stiffness: 100,\n damping: 10,\n mass: 1.0,\n isResolvedFromDuration: false,\n ...options,\n };\n // stiffness/damping/mass overrides duration/bounce\n if (!isSpringType(options, physicsKeys) &&\n isSpringType(options, durationKeys)) {\n const derived = findSpring(options);\n springOptions = {\n ...springOptions,\n ...derived,\n mass: 1.0,\n };\n springOptions.isResolvedFromDuration = true;\n }\n return springOptions;\n}\nfunction spring({ keyframes, restDelta, restSpeed, ...options }) {\n const origin = keyframes[0];\n const target = keyframes[keyframes.length - 1];\n /**\n * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator\n * to reduce GC during animation.\n */\n const state = { done: false, value: origin };\n const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration, } = getSpringOptions({\n ...options,\n velocity: -millisecondsToSeconds(options.velocity || 0),\n });\n const initialVelocity = velocity || 0.0;\n const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));\n const initialDelta = target - origin;\n const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));\n /**\n * If we're working on a granular scale, use smaller defaults for determining\n * when the spring is finished.\n *\n * These defaults have been selected emprically based on what strikes a good\n * ratio between feeling good and finishing as soon as changes are imperceptible.\n */\n const isGranularScale = Math.abs(initialDelta) < 5;\n restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);\n restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);\n let resolveSpring;\n if (dampingRatio < 1) {\n const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);\n // Underdamped spring\n resolveSpring = (t) => {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n return (target -\n envelope *\n (((initialVelocity +\n dampingRatio * undampedAngularFreq * initialDelta) /\n angularFreq) *\n Math.sin(angularFreq * t) +\n initialDelta * Math.cos(angularFreq * t)));\n };\n }\n else if (dampingRatio === 1) {\n // Critically damped spring\n resolveSpring = (t) => target -\n Math.exp(-undampedAngularFreq * t) *\n (initialDelta +\n (initialVelocity + undampedAngularFreq * initialDelta) * t);\n }\n else {\n // Overdamped spring\n const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);\n resolveSpring = (t) => {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n // When performing sinh or cosh values can hit Infinity so we cap them here\n const freqForT = Math.min(dampedAngularFreq * t, 300);\n return (target -\n (envelope *\n ((initialVelocity +\n dampingRatio * undampedAngularFreq * initialDelta) *\n Math.sinh(freqForT) +\n dampedAngularFreq *\n initialDelta *\n Math.cosh(freqForT))) /\n dampedAngularFreq);\n };\n }\n return {\n calculatedDuration: isResolvedFromDuration ? duration || null : null,\n next: (t) => {\n const current = resolveSpring(t);\n if (!isResolvedFromDuration) {\n let currentVelocity = initialVelocity;\n if (t !== 0) {\n /**\n * We only need to calculate velocity for under-damped springs\n * as over- and critically-damped springs can't overshoot, so\n * checking only for displacement is enough.\n */\n if (dampingRatio < 1) {\n currentVelocity = calcGeneratorVelocity(resolveSpring, t, current);\n }\n else {\n currentVelocity = 0;\n }\n }\n const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;\n const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;\n state.done =\n isBelowVelocityThreshold && isBelowDisplacementThreshold;\n }\n else {\n state.done = t >= duration;\n }\n state.value = state.done ? target : current;\n return state;\n },\n };\n}\n\nexport { spring };\n","import { spring } from './spring/index.mjs';\nimport { calcGeneratorVelocity } from './utils/velocity.mjs';\n\nfunction inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {\n const origin = keyframes[0];\n const state = {\n done: false,\n value: origin,\n };\n const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max);\n const nearestBoundary = (v) => {\n if (min === undefined)\n return max;\n if (max === undefined)\n return min;\n return Math.abs(min - v) < Math.abs(max - v) ? min : max;\n };\n let amplitude = power * velocity;\n const ideal = origin + amplitude;\n const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);\n /**\n * If the target has changed we need to re-calculate the amplitude, otherwise\n * the animation will start from the wrong position.\n */\n if (target !== ideal)\n amplitude = target - origin;\n const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant);\n const calcLatest = (t) => target + calcDelta(t);\n const applyFriction = (t) => {\n const delta = calcDelta(t);\n const latest = calcLatest(t);\n state.done = Math.abs(delta) <= restDelta;\n state.value = state.done ? target : latest;\n };\n /**\n * Ideally this would resolve for t in a stateless way, we could\n * do that by always precalculating the animation but as we know\n * this will be done anyway we can assume that spring will\n * be discovered during that.\n */\n let timeReachedBoundary;\n let spring$1;\n const checkCatchBoundary = (t) => {\n if (!isOutOfBounds(state.value))\n return;\n timeReachedBoundary = t;\n spring$1 = spring({\n keyframes: [state.value, nearestBoundary(state.value)],\n velocity: calcGeneratorVelocity(calcLatest, t, state.value),\n damping: bounceDamping,\n stiffness: bounceStiffness,\n restDelta,\n restSpeed,\n });\n };\n checkCatchBoundary(0);\n return {\n calculatedDuration: null,\n next: (t) => {\n /**\n * We need to resolve the friction to figure out if we need a\n * spring but we don't want to do this twice per frame. So here\n * we flag if we updated for this frame and later if we did\n * we can skip doing it again.\n */\n let hasUpdatedFrame = false;\n if (!spring$1 && timeReachedBoundary === undefined) {\n hasUpdatedFrame = true;\n applyFriction(t);\n checkCatchBoundary(t);\n }\n /**\n * If we have a spring and the provided t is beyond the moment the friction\n * animation crossed the min/max boundary, use the spring.\n */\n if (timeReachedBoundary !== undefined && t > timeReachedBoundary) {\n return spring$1.next(t - timeReachedBoundary);\n }\n else {\n !hasUpdatedFrame && applyFriction(t);\n return state;\n }\n },\n };\n}\n\nexport { inertia };\n","import { frame, cancelFrame, frameData } from '../../../frameloop/frame.mjs';\n\nconst frameloopDriver = (update) => {\n const passTimestamp = ({ timestamp }) => update(timestamp);\n return {\n start: () => frame.update(passTimestamp, true),\n stop: () => cancelFrame(passTimestamp),\n /**\n * If we're processing this frame we can use the\n * framelocked timestamp to keep things in sync.\n */\n now: () => frameData.isProcessing ? frameData.timestamp : performance.now(),\n };\n};\n\nexport { frameloopDriver };\n","/**\n * Implement a practical max duration for keyframe generation\n * to prevent infinite loops\n */\nconst maxGeneratorDuration = 20000;\nfunction calcGeneratorDuration(generator) {\n let duration = 0;\n const timeStep = 50;\n let state = generator.next(duration);\n while (!state.done && duration < maxGeneratorDuration) {\n duration += timeStep;\n state = generator.next(duration);\n }\n return duration >= maxGeneratorDuration ? Infinity : duration;\n}\n\nexport { calcGeneratorDuration, maxGeneratorDuration };\n","import { keyframes } from '../../generators/keyframes.mjs';\nimport { spring } from '../../generators/spring/index.mjs';\nimport { inertia } from '../../generators/inertia.mjs';\nimport { frameloopDriver } from './driver-frameloop.mjs';\nimport { interpolate } from '../../../utils/interpolate.mjs';\nimport { clamp } from '../../../utils/clamp.mjs';\nimport { millisecondsToSeconds, secondsToMilliseconds } from '../../../utils/time-conversion.mjs';\nimport { calcGeneratorDuration } from '../../generators/utils/calc-duration.mjs';\n\nconst types = {\n decay: inertia,\n inertia,\n tween: keyframes,\n keyframes: keyframes,\n spring,\n};\n/**\n * Animate a single value on the main thread.\n *\n * This function is written, where functionality overlaps,\n * to be largely spec-compliant with WAAPI to allow fungibility\n * between the two.\n */\nfunction animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, keyframes: keyframes$1, type = \"keyframes\", repeat = 0, repeatDelay = 0, repeatType = \"loop\", onPlay, onStop, onComplete, onUpdate, ...options }) {\n let speed = 1;\n let hasStopped = false;\n let resolveFinishedPromise;\n let currentFinishedPromise;\n /**\n * Resolve the current Promise every time we enter the\n * finished state. This is WAAPI-compatible behaviour.\n */\n const updateFinishedPromise = () => {\n currentFinishedPromise = new Promise((resolve) => {\n resolveFinishedPromise = resolve;\n });\n };\n // Create the first finished promise\n updateFinishedPromise();\n let animationDriver;\n const generatorFactory = types[type] || keyframes;\n /**\n * If this isn't the keyframes generator and we've been provided\n * strings as keyframes, we need to interpolate these.\n * TODO: Support velocity for units and complex value types/\n */\n let mapNumbersToKeyframes;\n if (generatorFactory !== keyframes &&\n typeof keyframes$1[0] !== \"number\") {\n mapNumbersToKeyframes = interpolate([0, 100], keyframes$1, {\n clamp: false,\n });\n keyframes$1 = [0, 100];\n }\n const generator = generatorFactory({ ...options, keyframes: keyframes$1 });\n let mirroredGenerator;\n if (repeatType === \"mirror\") {\n mirroredGenerator = generatorFactory({\n ...options,\n keyframes: [...keyframes$1].reverse(),\n velocity: -(options.velocity || 0),\n });\n }\n let playState = \"idle\";\n let holdTime = null;\n let startTime = null;\n let cancelTime = null;\n /**\n * If duration is undefined and we have repeat options,\n * we need to calculate a duration from the generator.\n *\n * We set it to the generator itself to cache the duration.\n * Any timeline resolver will need to have already precalculated\n * the duration by this step.\n */\n if (generator.calculatedDuration === null && repeat) {\n generator.calculatedDuration = calcGeneratorDuration(generator);\n }\n const { calculatedDuration } = generator;\n let resolvedDuration = Infinity;\n let totalDuration = Infinity;\n if (calculatedDuration !== null) {\n resolvedDuration = calculatedDuration + repeatDelay;\n totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;\n }\n let currentTime = 0;\n const tick = (timestamp) => {\n if (startTime === null)\n return;\n /**\n * requestAnimationFrame timestamps can come through as lower than\n * the startTime as set by performance.now(). Here we prevent this,\n * though in the future it could be possible to make setting startTime\n * a pending operation that gets resolved here.\n */\n if (speed > 0)\n startTime = Math.min(startTime, timestamp);\n if (speed < 0)\n startTime = Math.min(timestamp - totalDuration / speed, startTime);\n if (holdTime !== null) {\n currentTime = holdTime;\n }\n else {\n // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =\n // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for\n // example.\n currentTime = Math.round(timestamp - startTime) * speed;\n }\n // Rebase on delay\n const timeWithoutDelay = currentTime - delay * (speed >= 0 ? 1 : -1);\n const isInDelayPhase = speed >= 0 ? timeWithoutDelay < 0 : timeWithoutDelay > totalDuration;\n currentTime = Math.max(timeWithoutDelay, 0);\n /**\n * If this animation has finished, set the current time\n * to the total duration.\n */\n if (playState === \"finished\" && holdTime === null) {\n currentTime = totalDuration;\n }\n let elapsed = currentTime;\n let frameGenerator = generator;\n if (repeat) {\n /**\n * Get the current progress (0-1) of the animation. If t is >\n * than duration we'll get values like 2.5 (midway through the\n * third iteration)\n */\n const progress = currentTime / resolvedDuration;\n /**\n * Get the current iteration (0 indexed). For instance the floor of\n * 2.5 is 2.\n */\n let currentIteration = Math.floor(progress);\n /**\n * Get the current progress of the iteration by taking the remainder\n * so 2.5 is 0.5 through iteration 2\n */\n let iterationProgress = progress % 1.0;\n /**\n * If iteration progress is 1 we count that as the end\n * of the previous iteration.\n */\n if (!iterationProgress && progress >= 1) {\n iterationProgress = 1;\n }\n iterationProgress === 1 && currentIteration--;\n currentIteration = Math.min(currentIteration, repeat + 1);\n /**\n * Reverse progress if we're not running in \"normal\" direction\n */\n const iterationIsOdd = Boolean(currentIteration % 2);\n if (iterationIsOdd) {\n if (repeatType === \"reverse\") {\n iterationProgress = 1 - iterationProgress;\n if (repeatDelay) {\n iterationProgress -= repeatDelay / resolvedDuration;\n }\n }\n else if (repeatType === \"mirror\") {\n frameGenerator = mirroredGenerator;\n }\n }\n let p = clamp(0, 1, iterationProgress);\n if (currentTime > totalDuration) {\n p = repeatType === \"reverse\" && iterationIsOdd ? 1 : 0;\n }\n elapsed = p * resolvedDuration;\n }\n /**\n * If we're in negative time, set state as the initial keyframe.\n * This prevents delay: x, duration: 0 animations from finishing\n * instantly.\n */\n const state = isInDelayPhase\n ? { done: false, value: keyframes$1[0] }\n : frameGenerator.next(elapsed);\n if (mapNumbersToKeyframes) {\n state.value = mapNumbersToKeyframes(state.value);\n }\n let { done } = state;\n if (!isInDelayPhase && calculatedDuration !== null) {\n done = speed >= 0 ? currentTime >= totalDuration : currentTime <= 0;\n }\n const isAnimationFinished = holdTime === null &&\n (playState === \"finished\" || (playState === \"running\" && done));\n if (onUpdate) {\n onUpdate(state.value);\n }\n if (isAnimationFinished) {\n finish();\n }\n return state;\n };\n const stopAnimationDriver = () => {\n animationDriver && animationDriver.stop();\n animationDriver = undefined;\n };\n const cancel = () => {\n playState = \"idle\";\n stopAnimationDriver();\n resolveFinishedPromise();\n updateFinishedPromise();\n startTime = cancelTime = null;\n };\n const finish = () => {\n playState = \"finished\";\n onComplete && onComplete();\n stopAnimationDriver();\n resolveFinishedPromise();\n };\n const play = () => {\n if (hasStopped)\n return;\n if (!animationDriver)\n animationDriver = driver(tick);\n const now = animationDriver.now();\n onPlay && onPlay();\n if (holdTime !== null) {\n startTime = now - holdTime;\n }\n else if (!startTime || playState === \"finished\") {\n startTime = now;\n }\n if (playState === \"finished\") {\n updateFinishedPromise();\n }\n cancelTime = startTime;\n holdTime = null;\n /**\n * Set playState to running only after we've used it in\n * the previous logic.\n */\n playState = \"running\";\n animationDriver.start();\n };\n if (autoplay) {\n play();\n }\n const controls = {\n then(resolve, reject) {\n return currentFinishedPromise.then(resolve, reject);\n },\n get time() {\n return millisecondsToSeconds(currentTime);\n },\n set time(newTime) {\n newTime = secondsToMilliseconds(newTime);\n currentTime = newTime;\n if (holdTime !== null || !animationDriver || speed === 0) {\n holdTime = newTime;\n }\n else {\n startTime = animationDriver.now() - newTime / speed;\n }\n },\n get duration() {\n const duration = generator.calculatedDuration === null\n ? calcGeneratorDuration(generator)\n : generator.calculatedDuration;\n return millisecondsToSeconds(duration);\n },\n get speed() {\n return speed;\n },\n set speed(newSpeed) {\n if (newSpeed === speed || !animationDriver)\n return;\n speed = newSpeed;\n controls.time = millisecondsToSeconds(currentTime);\n },\n get state() {\n return playState;\n },\n play,\n pause: () => {\n playState = \"paused\";\n holdTime = currentTime;\n },\n stop: () => {\n hasStopped = true;\n if (playState === \"idle\")\n return;\n playState = \"idle\";\n onStop && onStop();\n cancel();\n },\n cancel: () => {\n if (cancelTime !== null)\n tick(cancelTime);\n cancel();\n },\n complete: () => {\n playState = \"finished\";\n },\n sample: (elapsed) => {\n startTime = 0;\n return tick(elapsed);\n },\n };\n return controls;\n}\n\nexport { animateValue };\n","import { animateStyle } from './index.mjs';\nimport { isWaapiSupportedEasing } from './easing.mjs';\nimport { getFinalKeyframe } from './utils/get-final-keyframe.mjs';\nimport { animateValue } from '../js/index.mjs';\nimport { millisecondsToSeconds, secondsToMilliseconds } from '../../../utils/time-conversion.mjs';\nimport { memo } from '../../../utils/memo.mjs';\nimport { noop } from '../../../utils/noop.mjs';\nimport { frame, cancelFrame } from '../../../frameloop/frame.mjs';\n\nconst supportsWaapi = memo(() => Object.hasOwnProperty.call(Element.prototype, \"animate\"));\n/**\n * A list of values that can be hardware-accelerated.\n */\nconst acceleratedValues = new Set([\n \"opacity\",\n \"clipPath\",\n \"filter\",\n \"transform\",\n \"backgroundColor\",\n]);\n/**\n * 10ms is chosen here as it strikes a balance between smooth\n * results (more than one keyframe per frame at 60fps) and\n * keyframe quantity.\n */\nconst sampleDelta = 10; //ms\n/**\n * Implement a practical max duration for keyframe generation\n * to prevent infinite loops\n */\nconst maxDuration = 20000;\nconst requiresPregeneratedKeyframes = (valueName, options) => options.type === \"spring\" ||\n valueName === \"backgroundColor\" ||\n !isWaapiSupportedEasing(options.ease);\nfunction createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) {\n const canAccelerateAnimation = supportsWaapi() &&\n acceleratedValues.has(valueName) &&\n !options.repeatDelay &&\n options.repeatType !== \"mirror\" &&\n options.damping !== 0 &&\n options.type !== \"inertia\";\n if (!canAccelerateAnimation)\n return false;\n /**\n * TODO: Unify with js/index\n */\n let hasStopped = false;\n let resolveFinishedPromise;\n let currentFinishedPromise;\n /**\n * Resolve the current Promise every time we enter the\n * finished state. This is WAAPI-compatible behaviour.\n */\n const updateFinishedPromise = () => {\n currentFinishedPromise = new Promise((resolve) => {\n resolveFinishedPromise = resolve;\n });\n };\n // Create the first finished promise\n updateFinishedPromise();\n let { keyframes, duration = 300, ease, times } = options;\n /**\n * If this animation needs pre-generated keyframes then generate.\n */\n if (requiresPregeneratedKeyframes(valueName, options)) {\n const sampleAnimation = animateValue({\n ...options,\n repeat: 0,\n delay: 0,\n });\n let state = { done: false, value: keyframes[0] };\n const pregeneratedKeyframes = [];\n /**\n * Bail after 20 seconds of pre-generated keyframes as it's likely\n * we're heading for an infinite loop.\n */\n let t = 0;\n while (!state.done && t < maxDuration) {\n state = sampleAnimation.sample(t);\n pregeneratedKeyframes.push(state.value);\n t += sampleDelta;\n }\n times = undefined;\n keyframes = pregeneratedKeyframes;\n duration = t - sampleDelta;\n ease = \"linear\";\n }\n const animation = animateStyle(value.owner.current, valueName, keyframes, {\n ...options,\n duration,\n /**\n * This function is currently not called if ease is provided\n * as a function so the cast is safe.\n *\n * However it would be possible for a future refinement to port\n * in easing pregeneration from Motion One for browsers that\n * support the upcoming `linear()` easing function.\n */\n ease: ease,\n times,\n });\n const cancelAnimation = () => animation.cancel();\n const safeCancel = () => {\n frame.update(cancelAnimation);\n resolveFinishedPromise();\n updateFinishedPromise();\n };\n /**\n * Prefer the `onfinish` prop as it's more widely supported than\n * the `finished` promise.\n *\n * Here, we synchronously set the provided MotionValue to the end\n * keyframe. If we didn't, when the WAAPI animation is finished it would\n * be removed from the element which would then revert to its old styles.\n */\n animation.onfinish = () => {\n value.set(getFinalKeyframe(keyframes, options));\n onComplete && onComplete();\n safeCancel();\n };\n /**\n * Animation interrupt callback.\n */\n const controls = {\n then(resolve, reject) {\n return currentFinishedPromise.then(resolve, reject);\n },\n attachTimeline(timeline) {\n animation.timeline = timeline;\n animation.onfinish = null;\n return noop;\n },\n get time() {\n return millisecondsToSeconds(animation.currentTime || 0);\n },\n set time(newTime) {\n animation.currentTime = secondsToMilliseconds(newTime);\n },\n get speed() {\n return animation.playbackRate;\n },\n set speed(newSpeed) {\n animation.playbackRate = newSpeed;\n },\n get duration() {\n return millisecondsToSeconds(duration);\n },\n play: () => {\n if (hasStopped)\n return;\n animation.play();\n /**\n * Cancel any pending cancel tasks\n */\n cancelFrame(cancelAnimation);\n },\n pause: () => animation.pause(),\n stop: () => {\n hasStopped = true;\n if (animation.playState === \"idle\")\n return;\n /**\n * WAAPI doesn't natively have any interruption capabilities.\n *\n * Rather than read commited styles back out of the DOM, we can\n * create a renderless JS animation and sample it twice to calculate\n * its current value, \"previous\" value, and therefore allow\n * Motion to calculate velocity for any subsequent animation.\n */\n const { currentTime } = animation;\n if (currentTime) {\n const sampleAnimation = animateValue({\n ...options,\n autoplay: false,\n });\n value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);\n }\n safeCancel();\n },\n complete: () => animation.finish(),\n cancel: safeCancel,\n };\n return controls;\n}\n\nexport { createAcceleratedAnimation };\n","function memo(callback) {\n let result;\n return () => {\n if (result === undefined)\n result = callback();\n return result;\n };\n}\n\nexport { memo };\n","import { transformProps } from '../../render/html/utils/transform.mjs';\n\nconst underDampedSpring = {\n type: \"spring\",\n stiffness: 500,\n damping: 25,\n restSpeed: 10,\n};\nconst criticallyDampedSpring = (target) => ({\n type: \"spring\",\n stiffness: 550,\n damping: target === 0 ? 2 * Math.sqrt(550) : 30,\n restSpeed: 10,\n});\nconst keyframesTransition = {\n type: \"keyframes\",\n duration: 0.8,\n};\n/**\n * Default easing curve is a slightly shallower version of\n * the default browser easing curve.\n */\nconst ease = {\n type: \"keyframes\",\n ease: [0.25, 0.1, 0.35, 1],\n duration: 0.3,\n};\nconst getDefaultTransition = (valueKey, { keyframes }) => {\n if (keyframes.length > 2) {\n return keyframesTransition;\n }\n else if (transformProps.has(valueKey)) {\n return valueKey.startsWith(\"scale\")\n ? criticallyDampedSpring(keyframes[1])\n : underDampedSpring;\n }\n return ease;\n};\n\nexport { getDefaultTransition };\n","import { complex } from '../../value/types/complex/index.mjs';\n\n/**\n * Check if a value is animatable. Examples:\n *\n * ✅: 100, \"100px\", \"#fff\"\n * ❌: \"block\", \"url(2.jpg)\"\n * @param value\n *\n * @internal\n */\nconst isAnimatable = (key, value) => {\n // If the list of keys tat might be non-animatable grows, replace with Set\n if (key === \"zIndex\")\n return false;\n // If it's a number or a keyframes array, we can animate it. We might at some point\n // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,\n // but for now lets leave it like this for performance reasons\n if (typeof value === \"number\" || Array.isArray(value))\n return true;\n if (typeof value === \"string\" && // It's animatable if we have a string\n (complex.test(value) || value === \"0\") && // And it contains numbers and/or colors\n !value.startsWith(\"url(\") // Unless it starts with \"url(\"\n ) {\n return true;\n }\n return false;\n};\n\nexport { isAnimatable };\n","import { complex } from './index.mjs';\nimport { floatRegex } from '../utils.mjs';\n\n/**\n * Properties that should default to 1 or 100%\n */\nconst maxDefaults = new Set([\"brightness\", \"contrast\", \"saturate\", \"opacity\"]);\nfunction applyDefaultFilter(v) {\n const [name, value] = v.slice(0, -1).split(\"(\");\n if (name === \"drop-shadow\")\n return v;\n const [number] = value.match(floatRegex) || [];\n if (!number)\n return v;\n const unit = value.replace(number, \"\");\n let defaultValue = maxDefaults.has(name) ? 1 : 0;\n if (number !== value)\n defaultValue *= 100;\n return name + \"(\" + defaultValue + unit + \")\";\n}\nconst functionRegex = /([a-z-]*)\\(.*?\\)/g;\nconst filter = {\n ...complex,\n getAnimatableNone: (v) => {\n const functions = v.match(functionRegex);\n return functions ? functions.map(applyDefaultFilter).join(\" \") : v;\n },\n};\n\nexport { filter };\n","import { color } from '../../../value/types/color/index.mjs';\nimport { filter } from '../../../value/types/complex/filter.mjs';\nimport { numberValueTypes } from './number.mjs';\n\n/**\n * A map of default value types for common values\n */\nconst defaultValueTypes = {\n ...numberValueTypes,\n // Color props\n color,\n backgroundColor: color,\n outlineColor: color,\n fill: color,\n stroke: color,\n // Border props\n borderColor: color,\n borderTopColor: color,\n borderRightColor: color,\n borderBottomColor: color,\n borderLeftColor: color,\n filter,\n WebkitFilter: filter,\n};\n/**\n * Gets the default ValueType for the provided value key\n */\nconst getDefaultValueType = (key) => defaultValueTypes[key];\n\nexport { defaultValueTypes, getDefaultValueType };\n","import { complex } from '../../../value/types/complex/index.mjs';\nimport { filter } from '../../../value/types/complex/filter.mjs';\nimport { getDefaultValueType } from './defaults.mjs';\n\nfunction getAnimatableNone(key, value) {\n let defaultValueType = getDefaultValueType(key);\n if (defaultValueType !== filter)\n defaultValueType = complex;\n // If value is not recognised as animatable, ie \"none\", create an animatable version origin based on the target\n return defaultValueType.getAnimatableNone\n ? defaultValueType.getAnimatableNone(value)\n : undefined;\n}\n\nexport { getAnimatableNone };\n","/**\n * Check if the value is a zero value string like \"0px\" or \"0%\"\n */\nconst isZeroValueString = (v) => /^0[^.\\s]+$/.test(v);\n\nexport { isZeroValueString };\n","import { isZeroValueString } from '../../utils/is-zero-value-string.mjs';\n\nfunction isNone(value) {\n if (typeof value === \"number\") {\n return value === 0;\n }\n else if (value !== null) {\n return value === \"none\" || value === \"0\" || isZeroValueString(value);\n }\n}\n\nexport { isNone };\n","/**\n * Decide whether a transition is defined on a given Transition.\n * This filters out orchestration options and returns true\n * if any options are left.\n */\nfunction isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {\n return !!Object.keys(transition).length;\n}\nfunction getValueTransition(transition, key) {\n return transition[key] || transition[\"default\"] || transition;\n}\n\nexport { getValueTransition, isTransitionDefined };\n","const MotionGlobalConfig = {\n skipAnimations: false,\n};\n\nexport { MotionGlobalConfig };\n","import { warning } from '../../utils/errors.mjs';\nimport { secondsToMilliseconds } from '../../utils/time-conversion.mjs';\nimport { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';\nimport { createAcceleratedAnimation } from '../animators/waapi/create-accelerated-animation.mjs';\nimport { createInstantAnimation } from '../animators/instant.mjs';\nimport { getDefaultTransition } from '../utils/default-transitions.mjs';\nimport { isAnimatable } from '../utils/is-animatable.mjs';\nimport { getKeyframes } from '../utils/keyframes.mjs';\nimport { getValueTransition, isTransitionDefined } from '../utils/transitions.mjs';\nimport { animateValue } from '../animators/js/index.mjs';\nimport { MotionGlobalConfig } from '../../utils/GlobalConfig.mjs';\n\nconst animateMotionValue = (valueName, value, target, transition = {}) => {\n return (onComplete) => {\n const valueTransition = getValueTransition(transition, valueName) || {};\n /**\n * Most transition values are currently completely overwritten by value-specific\n * transitions. In the future it'd be nicer to blend these transitions. But for now\n * delay actually does inherit from the root transition if not value-specific.\n */\n const delay = valueTransition.delay || transition.delay || 0;\n /**\n * Elapsed isn't a public transition option but can be passed through from\n * optimized appear effects in milliseconds.\n */\n let { elapsed = 0 } = transition;\n elapsed = elapsed - secondsToMilliseconds(delay);\n const keyframes = getKeyframes(value, valueName, target, valueTransition);\n /**\n * Check if we're able to animate between the start and end keyframes,\n * and throw a warning if we're attempting to animate between one that's\n * animatable and another that isn't.\n */\n const originKeyframe = keyframes[0];\n const targetKeyframe = keyframes[keyframes.length - 1];\n const isOriginAnimatable = isAnimatable(valueName, originKeyframe);\n const isTargetAnimatable = isAnimatable(valueName, targetKeyframe);\n warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${valueName} from \"${originKeyframe}\" to \"${targetKeyframe}\". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \\`style\\` property.`);\n let options = {\n keyframes,\n velocity: value.getVelocity(),\n ease: \"easeOut\",\n ...valueTransition,\n delay: -elapsed,\n onUpdate: (v) => {\n value.set(v);\n valueTransition.onUpdate && valueTransition.onUpdate(v);\n },\n onComplete: () => {\n onComplete();\n valueTransition.onComplete && valueTransition.onComplete();\n },\n };\n /**\n * If there's no transition defined for this value, we can generate\n * unqiue transition settings for this value.\n */\n if (!isTransitionDefined(valueTransition)) {\n options = {\n ...options,\n ...getDefaultTransition(valueName, options),\n };\n }\n /**\n * Both WAAPI and our internal animation functions use durations\n * as defined by milliseconds, while our external API defines them\n * as seconds.\n */\n if (options.duration) {\n options.duration = secondsToMilliseconds(options.duration);\n }\n if (options.repeatDelay) {\n options.repeatDelay = secondsToMilliseconds(options.repeatDelay);\n }\n if (!isOriginAnimatable ||\n !isTargetAnimatable ||\n instantAnimationState.current ||\n valueTransition.type === false ||\n MotionGlobalConfig.skipAnimations) {\n /**\n * If we can't animate this value, or the global instant animation flag is set,\n * or this is simply defined as an instant transition, return an instant transition.\n */\n return createInstantAnimation(instantAnimationState.current\n ? { ...options, delay: 0 }\n : options);\n }\n /**\n * Animate via WAAPI if possible.\n */\n if (\n /**\n * If this is a handoff animation, the optimised animation will be running via\n * WAAPI. Therefore, this animation must be JS to ensure it runs \"under\" the\n * optimised animation.\n */\n !transition.isHandoff &&\n value.owner &&\n value.owner.current instanceof HTMLElement &&\n /**\n * If we're outputting values to onUpdate then we can't use WAAPI as there's\n * no way to read the value from WAAPI every frame.\n */\n !value.owner.getProps().onUpdate) {\n const acceleratedAnimation = createAcceleratedAnimation(value, valueName, options);\n if (acceleratedAnimation)\n return acceleratedAnimation;\n }\n /**\n * If we didn't create an accelerated animation, create a JS animation\n */\n return animateValue(options);\n };\n};\n\nexport { animateMotionValue };\n","import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.mjs';\nimport { isAnimatable } from './is-animatable.mjs';\nimport { isNone } from './is-none.mjs';\n\nfunction getKeyframes(value, valueName, target, transition) {\n const isTargetAnimatable = isAnimatable(valueName, target);\n let keyframes;\n if (Array.isArray(target)) {\n keyframes = [...target];\n }\n else {\n keyframes = [null, target];\n }\n const defaultOrigin = transition.from !== undefined ? transition.from : value.get();\n let animatableTemplateValue = undefined;\n const noneKeyframeIndexes = [];\n for (let i = 0; i < keyframes.length; i++) {\n /**\n * Fill null/wildcard keyframes\n */\n if (keyframes[i] === null) {\n keyframes[i] = i === 0 ? defaultOrigin : keyframes[i - 1];\n }\n if (isNone(keyframes[i])) {\n noneKeyframeIndexes.push(i);\n }\n // TODO: Clean this conditional, it works for now\n if (typeof keyframes[i] === \"string\" &&\n keyframes[i] !== \"none\" &&\n keyframes[i] !== \"0\") {\n animatableTemplateValue = keyframes[i];\n }\n }\n if (isTargetAnimatable &&\n noneKeyframeIndexes.length &&\n animatableTemplateValue) {\n for (let i = 0; i < noneKeyframeIndexes.length; i++) {\n const index = noneKeyframeIndexes[i];\n keyframes[index] = getAnimatableNone(valueName, animatableTemplateValue);\n }\n }\n return keyframes;\n}\n\nexport { getKeyframes };\n","import { animateValue } from './js/index.mjs';\nimport { noop } from '../../utils/noop.mjs';\n\nfunction createInstantAnimation({ keyframes, delay, onUpdate, onComplete, }) {\n const setValue = () => {\n onUpdate && onUpdate(keyframes[keyframes.length - 1]);\n onComplete && onComplete();\n /**\n * TODO: As this API grows it could make sense to always return\n * animateValue. This will be a bigger project as animateValue\n * is frame-locked whereas this function resolves instantly.\n * This is a behavioural change and also has ramifications regarding\n * assumptions within tests.\n */\n return {\n time: 0,\n speed: 1,\n duration: 0,\n play: (noop),\n pause: (noop),\n stop: (noop),\n then: (resolve) => {\n resolve();\n return Promise.resolve();\n },\n cancel: (noop),\n complete: (noop),\n };\n };\n return delay\n ? animateValue({\n keyframes: [0, 1],\n duration: 0,\n delay,\n onComplete: setValue,\n })\n : setValue();\n}\n\nexport { createInstantAnimation };\n","import { mapEasingToNativeEasing } from './easing.mjs';\n\nfunction animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = \"loop\", ease, times, } = {}) {\n const keyframeOptions = { [valueName]: keyframes };\n if (times)\n keyframeOptions.offset = times;\n const easing = mapEasingToNativeEasing(ease);\n /**\n * If this is an easing array, apply to keyframes, not animation as a whole\n */\n if (Array.isArray(easing))\n keyframeOptions.easing = easing;\n return element.animate(keyframeOptions, {\n delay,\n duration,\n easing: !Array.isArray(easing) ? easing : \"linear\",\n fill: \"both\",\n iterations: repeat + 1,\n direction: repeatType === \"reverse\" ? \"alternate\" : \"normal\",\n });\n}\n\nexport { animateStyle };\n","function getFinalKeyframe(keyframes, { repeat, repeatType = \"loop\" }) {\n const index = repeat && repeatType !== \"loop\" && repeat % 2 === 1\n ? 0\n : keyframes.length - 1;\n return keyframes[index];\n}\n\nexport { getFinalKeyframe };\n","import { isMotionValue } from '../utils/is-motion-value.mjs';\n\nfunction isWillChangeMotionValue(value) {\n return Boolean(isMotionValue(value) && value.add);\n}\n\nexport { isWillChangeMotionValue };\n","/**\n * Check if value is a numerical string, ie a string that is purely a number eg \"100\" or \"-100.1\"\n */\nconst isNumericalString = (v) => /^\\-?\\d*\\.?\\d+$/.test(v);\n\nexport { isNumericalString };\n","function addUniqueItem(arr, item) {\n if (arr.indexOf(item) === -1)\n arr.push(item);\n}\nfunction removeItem(arr, item) {\n const index = arr.indexOf(item);\n if (index > -1)\n arr.splice(index, 1);\n}\n// Adapted from array-move\nfunction moveItem([...arr], fromIndex, toIndex) {\n const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;\n if (startIndex >= 0 && startIndex < arr.length) {\n const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;\n const [item] = arr.splice(fromIndex, 1);\n arr.splice(endIndex, 0, item);\n }\n return arr;\n}\n\nexport { addUniqueItem, moveItem, removeItem };\n","import { addUniqueItem, removeItem } from './array.mjs';\n\nclass SubscriptionManager {\n constructor() {\n this.subscriptions = [];\n }\n add(handler) {\n addUniqueItem(this.subscriptions, handler);\n return () => removeItem(this.subscriptions, handler);\n }\n notify(a, b, c) {\n const numSubscriptions = this.subscriptions.length;\n if (!numSubscriptions)\n return;\n if (numSubscriptions === 1) {\n /**\n * If there's only a single handler we can just call it without invoking a loop.\n */\n this.subscriptions[0](a, b, c);\n }\n else {\n for (let i = 0; i < numSubscriptions; i++) {\n /**\n * Check whether the handler exists before firing as it's possible\n * the subscriptions were modified during this loop running.\n */\n const handler = this.subscriptions[i];\n handler && handler(a, b, c);\n }\n }\n }\n getSize() {\n return this.subscriptions.length;\n }\n clear() {\n this.subscriptions.length = 0;\n }\n}\n\nexport { SubscriptionManager };\n","import { SubscriptionManager } from '../utils/subscription-manager.mjs';\nimport { velocityPerSecond } from '../utils/velocity-per-second.mjs';\nimport { warnOnce } from '../utils/warn-once.mjs';\nimport { frame, frameData } from '../frameloop/frame.mjs';\n\nconst isFloat = (value) => {\n return !isNaN(parseFloat(value));\n};\nconst collectMotionValues = {\n current: undefined,\n};\n/**\n * `MotionValue` is used to track the state and velocity of motion values.\n *\n * @public\n */\nclass MotionValue {\n /**\n * @param init - The initiating value\n * @param config - Optional configuration options\n *\n * - `transformer`: A function to transform incoming values with.\n *\n * @internal\n */\n constructor(init, options = {}) {\n /**\n * This will be replaced by the build step with the latest version number.\n * When MotionValues are provided to motion components, warn if versions are mixed.\n */\n this.version = \"10.17.4\";\n /**\n * Duration, in milliseconds, since last updating frame.\n *\n * @internal\n */\n this.timeDelta = 0;\n /**\n * Timestamp of the last time this `MotionValue` was updated.\n *\n * @internal\n */\n this.lastUpdated = 0;\n /**\n * Tracks whether this value can output a velocity. Currently this is only true\n * if the value is numerical, but we might be able to widen the scope here and support\n * other value types.\n *\n * @internal\n */\n this.canTrackVelocity = false;\n /**\n * An object containing a SubscriptionManager for each active event.\n */\n this.events = {};\n this.updateAndNotify = (v, render = true) => {\n this.prev = this.current;\n this.current = v;\n // Update timestamp\n const { delta, timestamp } = frameData;\n if (this.lastUpdated !== timestamp) {\n this.timeDelta = delta;\n this.lastUpdated = timestamp;\n frame.postRender(this.scheduleVelocityCheck);\n }\n // Update update subscribers\n if (this.prev !== this.current && this.events.change) {\n this.events.change.notify(this.current);\n }\n // Update velocity subscribers\n if (this.events.velocityChange) {\n this.events.velocityChange.notify(this.getVelocity());\n }\n // Update render subscribers\n if (render && this.events.renderRequest) {\n this.events.renderRequest.notify(this.current);\n }\n };\n /**\n * Schedule a velocity check for the next frame.\n *\n * This is an instanced and bound function to prevent generating a new\n * function once per frame.\n *\n * @internal\n */\n this.scheduleVelocityCheck = () => frame.postRender(this.velocityCheck);\n /**\n * Updates `prev` with `current` if the value hasn't been updated this frame.\n * This ensures velocity calculations return `0`.\n *\n * This is an instanced and bound function to prevent generating a new\n * function once per frame.\n *\n * @internal\n */\n this.velocityCheck = ({ timestamp }) => {\n if (timestamp !== this.lastUpdated) {\n this.prev = this.current;\n if (this.events.velocityChange) {\n this.events.velocityChange.notify(this.getVelocity());\n }\n }\n };\n this.hasAnimated = false;\n this.prev = this.current = init;\n this.canTrackVelocity = isFloat(this.current);\n this.owner = options.owner;\n }\n /**\n * Adds a function that will be notified when the `MotionValue` is updated.\n *\n * It returns a function that, when called, will cancel the subscription.\n *\n * When calling `onChange` inside a React component, it should be wrapped with the\n * `useEffect` hook. As it returns an unsubscribe function, this should be returned\n * from the `useEffect` function to ensure you don't add duplicate subscribers..\n *\n * ```jsx\n * export const MyComponent = () => {\n * const x = useMotionValue(0)\n * const y = useMotionValue(0)\n * const opacity = useMotionValue(1)\n *\n * useEffect(() => {\n * function updateOpacity() {\n * const maxXY = Math.max(x.get(), y.get())\n * const newOpacity = transform(maxXY, [0, 100], [1, 0])\n * opacity.set(newOpacity)\n * }\n *\n * const unsubscribeX = x.on(\"change\", updateOpacity)\n * const unsubscribeY = y.on(\"change\", updateOpacity)\n *\n * return () => {\n * unsubscribeX()\n * unsubscribeY()\n * }\n * }, [])\n *\n * return \n * }\n * ```\n *\n * @param subscriber - A function that receives the latest value.\n * @returns A function that, when called, will cancel this subscription.\n *\n * @deprecated\n */\n onChange(subscription) {\n if (process.env.NODE_ENV !== \"production\") {\n warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on(\"change\", callback).`);\n }\n return this.on(\"change\", subscription);\n }\n on(eventName, callback) {\n if (!this.events[eventName]) {\n this.events[eventName] = new SubscriptionManager();\n }\n const unsubscribe = this.events[eventName].add(callback);\n if (eventName === \"change\") {\n return () => {\n unsubscribe();\n /**\n * If we have no more change listeners by the start\n * of the next frame, stop active animations.\n */\n frame.read(() => {\n if (!this.events.change.getSize()) {\n this.stop();\n }\n });\n };\n }\n return unsubscribe;\n }\n clearListeners() {\n for (const eventManagers in this.events) {\n this.events[eventManagers].clear();\n }\n }\n /**\n * Attaches a passive effect to the `MotionValue`.\n *\n * @internal\n */\n attach(passiveEffect, stopPassiveEffect) {\n this.passiveEffect = passiveEffect;\n this.stopPassiveEffect = stopPassiveEffect;\n }\n /**\n * Sets the state of the `MotionValue`.\n *\n * @remarks\n *\n * ```jsx\n * const x = useMotionValue(0)\n * x.set(10)\n * ```\n *\n * @param latest - Latest value to set.\n * @param render - Whether to notify render subscribers. Defaults to `true`\n *\n * @public\n */\n set(v, render = true) {\n if (!render || !this.passiveEffect) {\n this.updateAndNotify(v, render);\n }\n else {\n this.passiveEffect(v, this.updateAndNotify);\n }\n }\n setWithVelocity(prev, current, delta) {\n this.set(current);\n this.prev = prev;\n this.timeDelta = delta;\n }\n /**\n * Set the state of the `MotionValue`, stopping any active animations,\n * effects, and resets velocity to `0`.\n */\n jump(v) {\n this.updateAndNotify(v);\n this.prev = v;\n this.stop();\n if (this.stopPassiveEffect)\n this.stopPassiveEffect();\n }\n /**\n * Returns the latest state of `MotionValue`\n *\n * @returns - The latest state of `MotionValue`\n *\n * @public\n */\n get() {\n if (collectMotionValues.current) {\n collectMotionValues.current.push(this);\n }\n return this.current;\n }\n /**\n * @public\n */\n getPrevious() {\n return this.prev;\n }\n /**\n * Returns the latest velocity of `MotionValue`\n *\n * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.\n *\n * @public\n */\n getVelocity() {\n // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful\n return this.canTrackVelocity\n ? // These casts could be avoided if parseFloat would be typed better\n velocityPerSecond(parseFloat(this.current) -\n parseFloat(this.prev), this.timeDelta)\n : 0;\n }\n /**\n * Registers a new animation to control this `MotionValue`. Only one\n * animation can drive a `MotionValue` at one time.\n *\n * ```jsx\n * value.start()\n * ```\n *\n * @param animation - A function that starts the provided animation\n *\n * @internal\n */\n start(startAnimation) {\n this.stop();\n return new Promise((resolve) => {\n this.hasAnimated = true;\n this.animation = startAnimation(resolve);\n if (this.events.animationStart) {\n this.events.animationStart.notify();\n }\n }).then(() => {\n if (this.events.animationComplete) {\n this.events.animationComplete.notify();\n }\n this.clearAnimation();\n });\n }\n /**\n * Stop the currently active animation.\n *\n * @public\n */\n stop() {\n if (this.animation) {\n this.animation.stop();\n if (this.events.animationCancel) {\n this.events.animationCancel.notify();\n }\n }\n this.clearAnimation();\n }\n /**\n * Returns `true` if this value is currently animating.\n *\n * @public\n */\n isAnimating() {\n return !!this.animation;\n }\n clearAnimation() {\n delete this.animation;\n }\n /**\n * Destroy and clean up subscribers to this `MotionValue`.\n *\n * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically\n * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually\n * created a `MotionValue` via the `motionValue` function.\n *\n * @public\n */\n destroy() {\n this.clearListeners();\n this.stop();\n if (this.stopPassiveEffect) {\n this.stopPassiveEffect();\n }\n }\n}\nfunction motionValue(init, options) {\n return new MotionValue(init, options);\n}\n\nexport { MotionValue, collectMotionValues, motionValue };\n","/**\n * Tests a provided value against a ValueType\n */\nconst testValueType = (v) => (type) => type.test(v);\n\nexport { testValueType };\n","import { number } from '../../../value/types/numbers/index.mjs';\nimport { px, percent, degrees, vw, vh } from '../../../value/types/numbers/units.mjs';\nimport { testValueType } from './test.mjs';\nimport { auto } from './type-auto.mjs';\n\n/**\n * A list of value types commonly used for dimensions\n */\nconst dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];\n/**\n * Tests a dimensional value against the list of dimension ValueTypes\n */\nconst findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));\n\nexport { dimensionValueTypes, findDimensionValueType };\n","/**\n * ValueType for \"auto\"\n */\nconst auto = {\n test: (v) => v === \"auto\",\n parse: (v) => v,\n};\n\nexport { auto };\n","import { color } from '../../../value/types/color/index.mjs';\nimport { complex } from '../../../value/types/complex/index.mjs';\nimport { dimensionValueTypes } from './dimensions.mjs';\nimport { testValueType } from './test.mjs';\n\n/**\n * A list of all ValueTypes\n */\nconst valueTypes = [...dimensionValueTypes, color, complex];\n/**\n * Tests a value against the list of ValueTypes\n */\nconst findValueType = (v) => valueTypes.find(testValueType(v));\n\nexport { findValueType };\n","import { isNumericalString } from '../../utils/is-numerical-string.mjs';\nimport { isZeroValueString } from '../../utils/is-zero-value-string.mjs';\nimport { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';\nimport { motionValue } from '../../value/index.mjs';\nimport { complex } from '../../value/types/complex/index.mjs';\nimport { getAnimatableNone } from '../dom/value-types/animatable-none.mjs';\nimport { findValueType } from '../dom/value-types/find.mjs';\nimport { resolveVariant } from './resolve-dynamic-variants.mjs';\n\n/**\n * Set VisualElement's MotionValue, creating a new MotionValue for it if\n * it doesn't exist.\n */\nfunction setMotionValue(visualElement, key, value) {\n if (visualElement.hasValue(key)) {\n visualElement.getValue(key).set(value);\n }\n else {\n visualElement.addValue(key, motionValue(value));\n }\n}\nfunction setTarget(visualElement, definition) {\n const resolved = resolveVariant(visualElement, definition);\n let { transitionEnd = {}, transition = {}, ...target } = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {};\n target = { ...target, ...transitionEnd };\n for (const key in target) {\n const value = resolveFinalValueInKeyframes(target[key]);\n setMotionValue(visualElement, key, value);\n }\n}\nfunction setVariants(visualElement, variantLabels) {\n const reversedLabels = [...variantLabels].reverse();\n reversedLabels.forEach((key) => {\n const variant = visualElement.getVariant(key);\n variant && setTarget(visualElement, variant);\n if (visualElement.variantChildren) {\n visualElement.variantChildren.forEach((child) => {\n setVariants(child, variantLabels);\n });\n }\n });\n}\nfunction setValues(visualElement, definition) {\n if (Array.isArray(definition)) {\n return setVariants(visualElement, definition);\n }\n else if (typeof definition === \"string\") {\n return setVariants(visualElement, [definition]);\n }\n else {\n setTarget(visualElement, definition);\n }\n}\nfunction checkTargetForNewValues(visualElement, target, origin) {\n var _a, _b;\n const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));\n const numNewValues = newValueKeys.length;\n if (!numNewValues)\n return;\n for (let i = 0; i < numNewValues; i++) {\n const key = newValueKeys[i];\n const targetValue = target[key];\n let value = null;\n /**\n * If the target is a series of keyframes, we can use the first value\n * in the array. If this first value is null, we'll still need to read from the DOM.\n */\n if (Array.isArray(targetValue)) {\n value = targetValue[0];\n }\n /**\n * If the target isn't keyframes, or the first keyframe was null, we need to\n * first check if an origin value was explicitly defined in the transition as \"from\",\n * if not read the value from the DOM. As an absolute fallback, take the defined target value.\n */\n if (value === null) {\n value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement.readValue(key)) !== null && _b !== void 0 ? _b : target[key];\n }\n /**\n * If value is still undefined or null, ignore it. Preferably this would throw,\n * but this was causing issues in Framer.\n */\n if (value === undefined || value === null)\n continue;\n if (typeof value === \"string\" &&\n (isNumericalString(value) || isZeroValueString(value))) {\n // If this is a number read as a string, ie \"0\" or \"200\", convert it to a number\n value = parseFloat(value);\n }\n else if (!findValueType(value) && complex.test(targetValue)) {\n value = getAnimatableNone(key, targetValue);\n }\n visualElement.addValue(key, motionValue(value, { owner: visualElement }));\n if (origin[key] === undefined) {\n origin[key] = value;\n }\n if (value !== null)\n visualElement.setBaseTarget(key, value);\n }\n}\nfunction getOriginFromTransition(key, transition) {\n if (!transition)\n return;\n const valueTransition = transition[key] || transition[\"default\"] || transition;\n return valueTransition.from;\n}\nfunction getOrigin(target, transition, visualElement) {\n const origin = {};\n for (const key in target) {\n const transitionOrigin = getOriginFromTransition(key, transition);\n if (transitionOrigin !== undefined) {\n origin[key] = transitionOrigin;\n }\n else {\n const value = visualElement.getValue(key);\n if (value) {\n origin[key] = value.get();\n }\n }\n }\n return origin;\n}\n\nexport { checkTargetForNewValues, getOrigin, getOriginFromTransition, setTarget, setValues };\n","import { transformProps } from '../../render/html/utils/transform.mjs';\nimport { optimizedAppearDataAttribute } from '../optimized-appear/data-id.mjs';\nimport { animateMotionValue } from './motion-value.mjs';\nimport { isWillChangeMotionValue } from '../../value/use-will-change/is.mjs';\nimport { setTarget } from '../../render/utils/setters.mjs';\nimport { getValueTransition } from '../utils/transitions.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\n/**\n * Decide whether we should block this animation. Previously, we achieved this\n * just by checking whether the key was listed in protectedKeys, but this\n * posed problems if an animation was triggered by afterChildren and protectedKeys\n * had been set to true in the meantime.\n */\nfunction shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {\n const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;\n needsAnimating[key] = false;\n return shouldBlock;\n}\nfunction hasKeyframesChanged(value, target) {\n const current = value.get();\n if (Array.isArray(target)) {\n for (let i = 0; i < target.length; i++) {\n if (target[i] !== current)\n return true;\n }\n }\n else {\n return current !== target;\n }\n}\nfunction animateTarget(visualElement, definition, { delay = 0, transitionOverride, type } = {}) {\n let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = visualElement.makeTargetAnimatable(definition);\n const willChange = visualElement.getValue(\"willChange\");\n if (transitionOverride)\n transition = transitionOverride;\n const animations = [];\n const animationTypeState = type &&\n visualElement.animationState &&\n visualElement.animationState.getState()[type];\n for (const key in target) {\n const value = visualElement.getValue(key);\n const valueTarget = target[key];\n if (!value ||\n valueTarget === undefined ||\n (animationTypeState &&\n shouldBlockAnimation(animationTypeState, key))) {\n continue;\n }\n const valueTransition = {\n delay,\n elapsed: 0,\n ...getValueTransition(transition || {}, key),\n };\n /**\n * If this is the first time a value is being animated, check\n * to see if we're handling off from an existing animation.\n */\n if (window.HandoffAppearAnimations) {\n const appearId = visualElement.getProps()[optimizedAppearDataAttribute];\n if (appearId) {\n const elapsed = window.HandoffAppearAnimations(appearId, key, value, frame);\n if (elapsed !== null) {\n valueTransition.elapsed = elapsed;\n valueTransition.isHandoff = true;\n }\n }\n }\n let canSkip = !valueTransition.isHandoff &&\n !hasKeyframesChanged(value, valueTarget);\n if (valueTransition.type === \"spring\" &&\n (value.getVelocity() || valueTransition.velocity)) {\n canSkip = false;\n }\n /**\n * Temporarily disable skipping animations if there's an animation in\n * progress. Better would be to track the current target of a value\n * and compare that against valueTarget.\n */\n if (value.animation) {\n canSkip = false;\n }\n if (canSkip)\n continue;\n value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)\n ? { type: false }\n : valueTransition));\n const animation = value.animation;\n if (isWillChangeMotionValue(willChange)) {\n willChange.add(key);\n animation.then(() => willChange.remove(key));\n }\n animations.push(animation);\n }\n if (transitionEnd) {\n Promise.all(animations).then(() => {\n transitionEnd && setTarget(visualElement, transitionEnd);\n });\n }\n return animations;\n}\n\nexport { animateTarget };\n","import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';\nimport { animateTarget } from './visual-element-target.mjs';\n\nfunction animateVariant(visualElement, variant, options = {}) {\n const resolved = resolveVariant(visualElement, variant, options.custom);\n let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};\n if (options.transitionOverride) {\n transition = options.transitionOverride;\n }\n /**\n * If we have a variant, create a callback that runs it as an animation.\n * Otherwise, we resolve a Promise immediately for a composable no-op.\n */\n const getAnimation = resolved\n ? () => Promise.all(animateTarget(visualElement, resolved, options))\n : () => Promise.resolve();\n /**\n * If we have children, create a callback that runs all their animations.\n * Otherwise, we resolve a Promise immediately for a composable no-op.\n */\n const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size\n ? (forwardDelay = 0) => {\n const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;\n return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);\n }\n : () => Promise.resolve();\n /**\n * If the transition explicitly defines a \"when\" option, we need to resolve either\n * this animation or all children animations before playing the other.\n */\n const { when } = transition;\n if (when) {\n const [first, last] = when === \"beforeChildren\"\n ? [getAnimation, getChildAnimations]\n : [getChildAnimations, getAnimation];\n return first().then(() => last());\n }\n else {\n return Promise.all([getAnimation(), getChildAnimations(options.delay)]);\n }\n}\nfunction animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {\n const animations = [];\n const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;\n const generateStaggerDuration = staggerDirection === 1\n ? (i = 0) => i * staggerChildren\n : (i = 0) => maxStaggerDuration - i * staggerChildren;\n Array.from(visualElement.variantChildren)\n .sort(sortByTreeOrder)\n .forEach((child, i) => {\n child.notify(\"AnimationStart\", variant);\n animations.push(animateVariant(child, variant, {\n ...options,\n delay: delayChildren + generateStaggerDuration(i),\n }).then(() => child.notify(\"AnimationComplete\", variant)));\n });\n return Promise.all(animations);\n}\nfunction sortByTreeOrder(a, b) {\n return a.sortNodePosition(b);\n}\n\nexport { animateVariant, sortByTreeOrder };\n","import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { isKeyframesTarget } from '../../animation/utils/is-keyframes-target.mjs';\nimport { shallowCompare } from '../../utils/shallow-compare.mjs';\nimport { isVariantLabel } from './is-variant-label.mjs';\nimport { resolveVariant } from './resolve-dynamic-variants.mjs';\nimport { variantPriorityOrder } from './variant-props.mjs';\nimport { animateVisualElement } from '../../animation/interfaces/visual-element.mjs';\n\nconst reversePriorityOrder = [...variantPriorityOrder].reverse();\nconst numAnimationTypes = variantPriorityOrder.length;\nfunction animateList(visualElement) {\n return (animations) => Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));\n}\nfunction createAnimationState(visualElement) {\n let animate = animateList(visualElement);\n const state = createState();\n let isInitialRender = true;\n /**\n * This function will be used to reduce the animation definitions for\n * each active animation type into an object of resolved values for it.\n */\n const buildResolvedTypeValues = (acc, definition) => {\n const resolved = resolveVariant(visualElement, definition);\n if (resolved) {\n const { transition, transitionEnd, ...target } = resolved;\n acc = { ...acc, ...target, ...transitionEnd };\n }\n return acc;\n };\n /**\n * This just allows us to inject mocked animation functions\n * @internal\n */\n function setAnimateFunction(makeAnimator) {\n animate = makeAnimator(visualElement);\n }\n /**\n * When we receive new props, we need to:\n * 1. Create a list of protected keys for each type. This is a directory of\n * value keys that are currently being \"handled\" by types of a higher priority\n * so that whenever an animation is played of a given type, these values are\n * protected from being animated.\n * 2. Determine if an animation type needs animating.\n * 3. Determine if any values have been removed from a type and figure out\n * what to animate those to.\n */\n function animateChanges(options, changedActiveType) {\n const props = visualElement.getProps();\n const context = visualElement.getVariantContext(true) || {};\n /**\n * A list of animations that we'll build into as we iterate through the animation\n * types. This will get executed at the end of the function.\n */\n const animations = [];\n /**\n * Keep track of which values have been removed. Then, as we hit lower priority\n * animation types, we can check if they contain removed values and animate to that.\n */\n const removedKeys = new Set();\n /**\n * A dictionary of all encountered keys. This is an object to let us build into and\n * copy it without iteration. Each time we hit an animation type we set its protected\n * keys - the keys its not allowed to animate - to the latest version of this object.\n */\n let encounteredKeys = {};\n /**\n * If a variant has been removed at a given index, and this component is controlling\n * variant animations, we want to ensure lower-priority variants are forced to animate.\n */\n let removedVariantIndex = Infinity;\n /**\n * Iterate through all animation types in reverse priority order. For each, we want to\n * detect which values it's handling and whether or not they've changed (and therefore\n * need to be animated). If any values have been removed, we want to detect those in\n * lower priority props and flag for animation.\n */\n for (let i = 0; i < numAnimationTypes; i++) {\n const type = reversePriorityOrder[i];\n const typeState = state[type];\n const prop = props[type] !== undefined ? props[type] : context[type];\n const propIsVariant = isVariantLabel(prop);\n /**\n * If this type has *just* changed isActive status, set activeDelta\n * to that status. Otherwise set to null.\n */\n const activeDelta = type === changedActiveType ? typeState.isActive : null;\n if (activeDelta === false)\n removedVariantIndex = i;\n /**\n * If this prop is an inherited variant, rather than been set directly on the\n * component itself, we want to make sure we allow the parent to trigger animations.\n *\n * TODO: Can probably change this to a !isControllingVariants check\n */\n let isInherited = prop === context[type] && prop !== props[type] && propIsVariant;\n /**\n *\n */\n if (isInherited &&\n isInitialRender &&\n visualElement.manuallyAnimateOnMount) {\n isInherited = false;\n }\n /**\n * Set all encountered keys so far as the protected keys for this type. This will\n * be any key that has been animated or otherwise handled by active, higher-priortiy types.\n */\n typeState.protectedKeys = { ...encounteredKeys };\n // Check if we can skip analysing this prop early\n if (\n // If it isn't active and hasn't *just* been set as inactive\n (!typeState.isActive && activeDelta === null) ||\n // If we didn't and don't have any defined prop for this animation type\n (!prop && !typeState.prevProp) ||\n // Or if the prop doesn't define an animation\n isAnimationControls(prop) ||\n typeof prop === \"boolean\") {\n continue;\n }\n /**\n * As we go look through the values defined on this type, if we detect\n * a changed value or a value that was removed in a higher priority, we set\n * this to true and add this prop to the animation list.\n */\n const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);\n let shouldAnimateType = variantDidChange ||\n // If we're making this variant active, we want to always make it active\n (type === changedActiveType &&\n typeState.isActive &&\n !isInherited &&\n propIsVariant) ||\n // If we removed a higher-priority variant (i is in reverse order)\n (i > removedVariantIndex && propIsVariant);\n let handledRemovedValues = false;\n /**\n * As animations can be set as variant lists, variants or target objects, we\n * coerce everything to an array if it isn't one already\n */\n const definitionList = Array.isArray(prop) ? prop : [prop];\n /**\n * Build an object of all the resolved values. We'll use this in the subsequent\n * animateChanges calls to determine whether a value has changed.\n */\n let resolvedValues = definitionList.reduce(buildResolvedTypeValues, {});\n if (activeDelta === false)\n resolvedValues = {};\n /**\n * Now we need to loop through all the keys in the prev prop and this prop,\n * and decide:\n * 1. If the value has changed, and needs animating\n * 2. If it has been removed, and needs adding to the removedKeys set\n * 3. If it has been removed in a higher priority type and needs animating\n * 4. If it hasn't been removed in a higher priority but hasn't changed, and\n * needs adding to the type's protectedKeys list.\n */\n const { prevResolvedValues = {} } = typeState;\n const allKeys = {\n ...prevResolvedValues,\n ...resolvedValues,\n };\n const markToAnimate = (key) => {\n shouldAnimateType = true;\n if (removedKeys.has(key)) {\n handledRemovedValues = true;\n removedKeys.delete(key);\n }\n typeState.needsAnimating[key] = true;\n };\n for (const key in allKeys) {\n const next = resolvedValues[key];\n const prev = prevResolvedValues[key];\n // If we've already handled this we can just skip ahead\n if (encounteredKeys.hasOwnProperty(key))\n continue;\n /**\n * If the value has changed, we probably want to animate it.\n */\n let valueHasChanged = false;\n if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {\n valueHasChanged = !shallowCompare(next, prev);\n }\n else {\n valueHasChanged = next !== prev;\n }\n if (valueHasChanged) {\n if (next !== undefined) {\n // If next is defined and doesn't equal prev, it needs animating\n markToAnimate(key);\n }\n else {\n // If it's undefined, it's been removed.\n removedKeys.add(key);\n }\n }\n else if (next !== undefined && removedKeys.has(key)) {\n /**\n * If next hasn't changed and it isn't undefined, we want to check if it's\n * been removed by a higher priority\n */\n markToAnimate(key);\n }\n else {\n /**\n * If it hasn't changed, we add it to the list of protected values\n * to ensure it doesn't get animated.\n */\n typeState.protectedKeys[key] = true;\n }\n }\n /**\n * Update the typeState so next time animateChanges is called we can compare the\n * latest prop and resolvedValues to these.\n */\n typeState.prevProp = prop;\n typeState.prevResolvedValues = resolvedValues;\n /**\n *\n */\n if (typeState.isActive) {\n encounteredKeys = { ...encounteredKeys, ...resolvedValues };\n }\n if (isInitialRender && visualElement.blockInitialAnimation) {\n shouldAnimateType = false;\n }\n /**\n * If this is an inherited prop we want to hard-block animations\n */\n if (shouldAnimateType && (!isInherited || handledRemovedValues)) {\n animations.push(...definitionList.map((animation) => ({\n animation: animation,\n options: { type, ...options },\n })));\n }\n }\n /**\n * If there are some removed value that haven't been dealt with,\n * we need to create a new animation that falls back either to the value\n * defined in the style prop, or the last read value.\n */\n if (removedKeys.size) {\n const fallbackAnimation = {};\n removedKeys.forEach((key) => {\n const fallbackTarget = visualElement.getBaseTarget(key);\n if (fallbackTarget !== undefined) {\n fallbackAnimation[key] = fallbackTarget;\n }\n });\n animations.push({ animation: fallbackAnimation });\n }\n let shouldAnimate = Boolean(animations.length);\n if (isInitialRender &&\n (props.initial === false || props.initial === props.animate) &&\n !visualElement.manuallyAnimateOnMount) {\n shouldAnimate = false;\n }\n isInitialRender = false;\n return shouldAnimate ? animate(animations) : Promise.resolve();\n }\n /**\n * Change whether a certain animation type is active.\n */\n function setActive(type, isActive, options) {\n var _a;\n // If the active state hasn't changed, we can safely do nothing here\n if (state[type].isActive === isActive)\n return Promise.resolve();\n // Propagate active change to children\n (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });\n state[type].isActive = isActive;\n const animations = animateChanges(options, type);\n for (const key in state) {\n state[key].protectedKeys = {};\n }\n return animations;\n }\n return {\n animateChanges,\n setActive,\n setAnimateFunction,\n getState: () => state,\n };\n}\nfunction checkVariantsDidChange(prev, next) {\n if (typeof next === \"string\") {\n return next !== prev;\n }\n else if (Array.isArray(next)) {\n return !shallowCompare(next, prev);\n }\n return false;\n}\nfunction createTypeState(isActive = false) {\n return {\n isActive,\n protectedKeys: {},\n needsAnimating: {},\n prevResolvedValues: {},\n };\n}\nfunction createState() {\n return {\n animate: createTypeState(true),\n whileInView: createTypeState(),\n whileHover: createTypeState(),\n whileTap: createTypeState(),\n whileDrag: createTypeState(),\n whileFocus: createTypeState(),\n exit: createTypeState(),\n };\n}\n\nexport { checkVariantsDidChange, createAnimationState };\n","import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';\nimport { animateTarget } from './visual-element-target.mjs';\nimport { animateVariant } from './visual-element-variant.mjs';\n\nfunction animateVisualElement(visualElement, definition, options = {}) {\n visualElement.notify(\"AnimationStart\", definition);\n let animation;\n if (Array.isArray(definition)) {\n const animations = definition.map((variant) => animateVariant(visualElement, variant, options));\n animation = Promise.all(animations);\n }\n else if (typeof definition === \"string\") {\n animation = animateVariant(visualElement, definition, options);\n }\n else {\n const resolvedDefinition = typeof definition === \"function\"\n ? resolveVariant(visualElement, definition, options.custom)\n : definition;\n animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));\n }\n return animation.then(() => visualElement.notify(\"AnimationComplete\", definition));\n}\n\nexport { animateVisualElement };\n","import { Feature } from '../Feature.mjs';\n\nlet id = 0;\nclass ExitAnimationFeature extends Feature {\n constructor() {\n super(...arguments);\n this.id = id++;\n }\n update() {\n if (!this.node.presenceContext)\n return;\n const { isPresent, onExitComplete, custom } = this.node.presenceContext;\n const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {};\n if (!this.node.animationState || isPresent === prevIsPresent) {\n return;\n }\n const exitAnimation = this.node.animationState.setActive(\"exit\", !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });\n if (onExitComplete && !isPresent) {\n exitAnimation.then(() => onExitComplete(this.id));\n }\n }\n mount() {\n const { register } = this.node.presenceContext || {};\n if (register) {\n this.unmount = register(this.id);\n }\n }\n unmount() { }\n}\n\nexport { ExitAnimationFeature };\n","import { AnimationFeature } from './animation/index.mjs';\nimport { ExitAnimationFeature } from './animation/exit.mjs';\n\nconst animations = {\n animation: {\n Feature: AnimationFeature,\n },\n exit: {\n Feature: ExitAnimationFeature,\n },\n};\n\nexport { animations };\n","import { isAnimationControls } from '../../../animation/utils/is-animation-controls.mjs';\nimport { createAnimationState } from '../../../render/utils/animation-state.mjs';\nimport { Feature } from '../Feature.mjs';\n\nclass AnimationFeature extends Feature {\n /**\n * We dynamically generate the AnimationState manager as it contains a reference\n * to the underlying animation library. We only want to load that if we load this,\n * so people can optionally code split it out using the `m` component.\n */\n constructor(node) {\n super(node);\n node.animationState || (node.animationState = createAnimationState(node));\n }\n updateAnimationControlsSubscription() {\n const { animate } = this.node.getProps();\n this.unmount();\n if (isAnimationControls(animate)) {\n this.unmount = animate.subscribe(this.node);\n }\n }\n /**\n * Subscribe any provided AnimationControls to the component's VisualElement\n */\n mount() {\n this.updateAnimationControlsSubscription();\n }\n update() {\n const { animate } = this.node.getProps();\n const { animate: prevAnimate } = this.node.prevProps || {};\n if (animate !== prevAnimate) {\n this.updateAnimationControlsSubscription();\n }\n }\n unmount() { }\n}\n\nexport { AnimationFeature };\n","const distance = (a, b) => Math.abs(a - b);\nfunction distance2D(a, b) {\n // Multi-dimensional\n const xDelta = distance(a.x, b.x);\n const yDelta = distance(a.y, b.y);\n return Math.sqrt(xDelta ** 2 + yDelta ** 2);\n}\n\nexport { distance, distance2D };\n","import { extractEventInfo } from '../../events/event-info.mjs';\nimport { secondsToMilliseconds, millisecondsToSeconds } from '../../utils/time-conversion.mjs';\nimport { addPointerEvent } from '../../events/add-pointer-event.mjs';\nimport { pipe } from '../../utils/pipe.mjs';\nimport { distance2D } from '../../utils/distance.mjs';\nimport { isPrimaryPointer } from '../../events/utils/is-primary-pointer.mjs';\nimport { frame, cancelFrame, frameData } from '../../frameloop/frame.mjs';\n\n/**\n * @internal\n */\nclass PanSession {\n constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false } = {}) {\n /**\n * @internal\n */\n this.startEvent = null;\n /**\n * @internal\n */\n this.lastMoveEvent = null;\n /**\n * @internal\n */\n this.lastMoveEventInfo = null;\n /**\n * @internal\n */\n this.handlers = {};\n /**\n * @internal\n */\n this.contextWindow = window;\n this.updatePoint = () => {\n if (!(this.lastMoveEvent && this.lastMoveEventInfo))\n return;\n const info = getPanInfo(this.lastMoveEventInfo, this.history);\n const isPanStarted = this.startEvent !== null;\n // Only start panning if the offset is larger than 3 pixels. If we make it\n // any larger than this we'll want to reset the pointer history\n // on the first update to avoid visual snapping to the cursoe.\n const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= 3;\n if (!isPanStarted && !isDistancePastThreshold)\n return;\n const { point } = info;\n const { timestamp } = frameData;\n this.history.push({ ...point, timestamp });\n const { onStart, onMove } = this.handlers;\n if (!isPanStarted) {\n onStart && onStart(this.lastMoveEvent, info);\n this.startEvent = this.lastMoveEvent;\n }\n onMove && onMove(this.lastMoveEvent, info);\n };\n this.handlePointerMove = (event, info) => {\n this.lastMoveEvent = event;\n this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);\n // Throttle mouse move event to once per frame\n frame.update(this.updatePoint, true);\n };\n this.handlePointerUp = (event, info) => {\n this.end();\n const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;\n if (this.dragSnapToOrigin)\n resumeAnimation && resumeAnimation();\n if (!(this.lastMoveEvent && this.lastMoveEventInfo))\n return;\n const panInfo = getPanInfo(event.type === \"pointercancel\"\n ? this.lastMoveEventInfo\n : transformPoint(info, this.transformPagePoint), this.history);\n if (this.startEvent && onEnd) {\n onEnd(event, panInfo);\n }\n onSessionEnd && onSessionEnd(event, panInfo);\n };\n // If we have more than one touch, don't start detecting this gesture\n if (!isPrimaryPointer(event))\n return;\n this.dragSnapToOrigin = dragSnapToOrigin;\n this.handlers = handlers;\n this.transformPagePoint = transformPagePoint;\n this.contextWindow = contextWindow || window;\n const info = extractEventInfo(event);\n const initialInfo = transformPoint(info, this.transformPagePoint);\n const { point } = initialInfo;\n const { timestamp } = frameData;\n this.history = [{ ...point, timestamp }];\n const { onSessionStart } = handlers;\n onSessionStart &&\n onSessionStart(event, getPanInfo(initialInfo, this.history));\n this.removeListeners = pipe(addPointerEvent(this.contextWindow, \"pointermove\", this.handlePointerMove), addPointerEvent(this.contextWindow, \"pointerup\", this.handlePointerUp), addPointerEvent(this.contextWindow, \"pointercancel\", this.handlePointerUp));\n }\n updateHandlers(handlers) {\n this.handlers = handlers;\n }\n end() {\n this.removeListeners && this.removeListeners();\n cancelFrame(this.updatePoint);\n }\n}\nfunction transformPoint(info, transformPagePoint) {\n return transformPagePoint ? { point: transformPagePoint(info.point) } : info;\n}\nfunction subtractPoint(a, b) {\n return { x: a.x - b.x, y: a.y - b.y };\n}\nfunction getPanInfo({ point }, history) {\n return {\n point,\n delta: subtractPoint(point, lastDevicePoint(history)),\n offset: subtractPoint(point, startDevicePoint(history)),\n velocity: getVelocity(history, 0.1),\n };\n}\nfunction startDevicePoint(history) {\n return history[0];\n}\nfunction lastDevicePoint(history) {\n return history[history.length - 1];\n}\nfunction getVelocity(history, timeDelta) {\n if (history.length < 2) {\n return { x: 0, y: 0 };\n }\n let i = history.length - 1;\n let timestampedPoint = null;\n const lastPoint = lastDevicePoint(history);\n while (i >= 0) {\n timestampedPoint = history[i];\n if (lastPoint.timestamp - timestampedPoint.timestamp >\n secondsToMilliseconds(timeDelta)) {\n break;\n }\n i--;\n }\n if (!timestampedPoint) {\n return { x: 0, y: 0 };\n }\n const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);\n if (time === 0) {\n return { x: 0, y: 0 };\n }\n const currentVelocity = {\n x: (lastPoint.x - timestampedPoint.x) / time,\n y: (lastPoint.y - timestampedPoint.y) / time,\n };\n if (currentVelocity.x === Infinity) {\n currentVelocity.x = 0;\n }\n if (currentVelocity.y === Infinity) {\n currentVelocity.y = 0;\n }\n return currentVelocity;\n}\n\nexport { PanSession };\n","import { mix } from '../../utils/mix.mjs';\n\nfunction calcLength(axis) {\n return axis.max - axis.min;\n}\nfunction isNear(value, target = 0, maxDistance = 0.01) {\n return Math.abs(value - target) <= maxDistance;\n}\nfunction calcAxisDelta(delta, source, target, origin = 0.5) {\n delta.origin = origin;\n delta.originPoint = mix(source.min, source.max, delta.origin);\n delta.scale = calcLength(target) / calcLength(source);\n if (isNear(delta.scale, 1, 0.0001) || isNaN(delta.scale))\n delta.scale = 1;\n delta.translate =\n mix(target.min, target.max, delta.origin) - delta.originPoint;\n if (isNear(delta.translate) || isNaN(delta.translate))\n delta.translate = 0;\n}\nfunction calcBoxDelta(delta, source, target, origin) {\n calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : undefined);\n calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : undefined);\n}\nfunction calcRelativeAxis(target, relative, parent) {\n target.min = parent.min + relative.min;\n target.max = target.min + calcLength(relative);\n}\nfunction calcRelativeBox(target, relative, parent) {\n calcRelativeAxis(target.x, relative.x, parent.x);\n calcRelativeAxis(target.y, relative.y, parent.y);\n}\nfunction calcRelativeAxisPosition(target, layout, parent) {\n target.min = layout.min - parent.min;\n target.max = target.min + calcLength(layout);\n}\nfunction calcRelativePosition(target, layout, parent) {\n calcRelativeAxisPosition(target.x, layout.x, parent.x);\n calcRelativeAxisPosition(target.y, layout.y, parent.y);\n}\n\nexport { calcAxisDelta, calcBoxDelta, calcLength, calcRelativeAxis, calcRelativeAxisPosition, calcRelativeBox, calcRelativePosition, isNear };\n","import { progress } from '../../../utils/progress.mjs';\nimport { calcLength } from '../../../projection/geometry/delta-calc.mjs';\nimport { clamp } from '../../../utils/clamp.mjs';\nimport { mix } from '../../../utils/mix.mjs';\n\n/**\n * Apply constraints to a point. These constraints are both physical along an\n * axis, and an elastic factor that determines how much to constrain the point\n * by if it does lie outside the defined parameters.\n */\nfunction applyConstraints(point, { min, max }, elastic) {\n if (min !== undefined && point < min) {\n // If we have a min point defined, and this is outside of that, constrain\n point = elastic ? mix(min, point, elastic.min) : Math.max(point, min);\n }\n else if (max !== undefined && point > max) {\n // If we have a max point defined, and this is outside of that, constrain\n point = elastic ? mix(max, point, elastic.max) : Math.min(point, max);\n }\n return point;\n}\n/**\n * Calculate constraints in terms of the viewport when defined relatively to the\n * measured axis. This is measured from the nearest edge, so a max constraint of 200\n * on an axis with a max value of 300 would return a constraint of 500 - axis length\n */\nfunction calcRelativeAxisConstraints(axis, min, max) {\n return {\n min: min !== undefined ? axis.min + min : undefined,\n max: max !== undefined\n ? axis.max + max - (axis.max - axis.min)\n : undefined,\n };\n}\n/**\n * Calculate constraints in terms of the viewport when\n * defined relatively to the measured bounding box.\n */\nfunction calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {\n return {\n x: calcRelativeAxisConstraints(layoutBox.x, left, right),\n y: calcRelativeAxisConstraints(layoutBox.y, top, bottom),\n };\n}\n/**\n * Calculate viewport constraints when defined as another viewport-relative axis\n */\nfunction calcViewportAxisConstraints(layoutAxis, constraintsAxis) {\n let min = constraintsAxis.min - layoutAxis.min;\n let max = constraintsAxis.max - layoutAxis.max;\n // If the constraints axis is actually smaller than the layout axis then we can\n // flip the constraints\n if (constraintsAxis.max - constraintsAxis.min <\n layoutAxis.max - layoutAxis.min) {\n [min, max] = [max, min];\n }\n return { min, max };\n}\n/**\n * Calculate viewport constraints when defined as another viewport-relative box\n */\nfunction calcViewportConstraints(layoutBox, constraintsBox) {\n return {\n x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),\n y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y),\n };\n}\n/**\n * Calculate a transform origin relative to the source axis, between 0-1, that results\n * in an asthetically pleasing scale/transform needed to project from source to target.\n */\nfunction calcOrigin(source, target) {\n let origin = 0.5;\n const sourceLength = calcLength(source);\n const targetLength = calcLength(target);\n if (targetLength > sourceLength) {\n origin = progress(target.min, target.max - sourceLength, source.min);\n }\n else if (sourceLength > targetLength) {\n origin = progress(source.min, source.max - targetLength, target.min);\n }\n return clamp(0, 1, origin);\n}\n/**\n * Rebase the calculated viewport constraints relative to the layout.min point.\n */\nfunction rebaseAxisConstraints(layout, constraints) {\n const relativeConstraints = {};\n if (constraints.min !== undefined) {\n relativeConstraints.min = constraints.min - layout.min;\n }\n if (constraints.max !== undefined) {\n relativeConstraints.max = constraints.max - layout.min;\n }\n return relativeConstraints;\n}\nconst defaultElastic = 0.35;\n/**\n * Accepts a dragElastic prop and returns resolved elastic values for each axis.\n */\nfunction resolveDragElastic(dragElastic = defaultElastic) {\n if (dragElastic === false) {\n dragElastic = 0;\n }\n else if (dragElastic === true) {\n dragElastic = defaultElastic;\n }\n return {\n x: resolveAxisElastic(dragElastic, \"left\", \"right\"),\n y: resolveAxisElastic(dragElastic, \"top\", \"bottom\"),\n };\n}\nfunction resolveAxisElastic(dragElastic, minLabel, maxLabel) {\n return {\n min: resolvePointElastic(dragElastic, minLabel),\n max: resolvePointElastic(dragElastic, maxLabel),\n };\n}\nfunction resolvePointElastic(dragElastic, label) {\n return typeof dragElastic === \"number\"\n ? dragElastic\n : dragElastic[label] || 0;\n}\n\nexport { applyConstraints, calcOrigin, calcRelativeAxisConstraints, calcRelativeConstraints, calcViewportAxisConstraints, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, resolveAxisElastic, resolveDragElastic, resolvePointElastic };\n","const createAxisDelta = () => ({\n translate: 0,\n scale: 1,\n origin: 0,\n originPoint: 0,\n});\nconst createDelta = () => ({\n x: createAxisDelta(),\n y: createAxisDelta(),\n});\nconst createAxis = () => ({ min: 0, max: 0 });\nconst createBox = () => ({\n x: createAxis(),\n y: createAxis(),\n});\n\nexport { createAxis, createAxisDelta, createBox, createDelta };\n","function eachAxis(callback) {\n return [callback(\"x\"), callback(\"y\")];\n}\n\nexport { eachAxis };\n","/**\n * Bounding boxes tend to be defined as top, left, right, bottom. For various operations\n * it's easier to consider each axis individually. This function returns a bounding box\n * as a map of single-axis min/max values.\n */\nfunction convertBoundingBoxToBox({ top, left, right, bottom, }) {\n return {\n x: { min: left, max: right },\n y: { min: top, max: bottom },\n };\n}\nfunction convertBoxToBoundingBox({ x, y }) {\n return { top: y.min, right: x.max, bottom: y.max, left: x.min };\n}\n/**\n * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function\n * provided by Framer to allow measured points to be corrected for device scaling. This is used\n * when measuring DOM elements and DOM event points.\n */\nfunction transformBoxPoints(point, transformPoint) {\n if (!transformPoint)\n return point;\n const topLeft = transformPoint({ x: point.left, y: point.top });\n const bottomRight = transformPoint({ x: point.right, y: point.bottom });\n return {\n top: topLeft.y,\n left: topLeft.x,\n bottom: bottomRight.y,\n right: bottomRight.x,\n };\n}\n\nexport { convertBoundingBoxToBox, convertBoxToBoundingBox, transformBoxPoints };\n","function isIdentityScale(scale) {\n return scale === undefined || scale === 1;\n}\nfunction hasScale({ scale, scaleX, scaleY }) {\n return (!isIdentityScale(scale) ||\n !isIdentityScale(scaleX) ||\n !isIdentityScale(scaleY));\n}\nfunction hasTransform(values) {\n return (hasScale(values) ||\n has2DTranslate(values) ||\n values.z ||\n values.rotate ||\n values.rotateX ||\n values.rotateY);\n}\nfunction has2DTranslate(values) {\n return is2DTranslate(values.x) || is2DTranslate(values.y);\n}\nfunction is2DTranslate(value) {\n return value && value !== \"0%\";\n}\n\nexport { has2DTranslate, hasScale, hasTransform };\n","import { mix } from '../../utils/mix.mjs';\nimport { hasTransform } from '../utils/has-transform.mjs';\n\n/**\n * Scales a point based on a factor and an originPoint\n */\nfunction scalePoint(point, scale, originPoint) {\n const distanceFromOrigin = point - originPoint;\n const scaled = scale * distanceFromOrigin;\n return originPoint + scaled;\n}\n/**\n * Applies a translate/scale delta to a point\n */\nfunction applyPointDelta(point, translate, scale, originPoint, boxScale) {\n if (boxScale !== undefined) {\n point = scalePoint(point, boxScale, originPoint);\n }\n return scalePoint(point, scale, originPoint) + translate;\n}\n/**\n * Applies a translate/scale delta to an axis\n */\nfunction applyAxisDelta(axis, translate = 0, scale = 1, originPoint, boxScale) {\n axis.min = applyPointDelta(axis.min, translate, scale, originPoint, boxScale);\n axis.max = applyPointDelta(axis.max, translate, scale, originPoint, boxScale);\n}\n/**\n * Applies a translate/scale delta to a box\n */\nfunction applyBoxDelta(box, { x, y }) {\n applyAxisDelta(box.x, x.translate, x.scale, x.originPoint);\n applyAxisDelta(box.y, y.translate, y.scale, y.originPoint);\n}\n/**\n * Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms\n * in a tree upon our box before then calculating how to project it into our desired viewport-relative box\n *\n * This is the final nested loop within updateLayoutDelta for future refactoring\n */\nfunction applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {\n const treeLength = treePath.length;\n if (!treeLength)\n return;\n // Reset the treeScale\n treeScale.x = treeScale.y = 1;\n let node;\n let delta;\n for (let i = 0; i < treeLength; i++) {\n node = treePath[i];\n delta = node.projectionDelta;\n /**\n * TODO: Prefer to remove this, but currently we have motion components with\n * display: contents in Framer.\n */\n const instance = node.instance;\n if (instance &&\n instance.style &&\n instance.style.display === \"contents\") {\n continue;\n }\n if (isSharedTransition &&\n node.options.layoutScroll &&\n node.scroll &&\n node !== node.root) {\n transformBox(box, {\n x: -node.scroll.offset.x,\n y: -node.scroll.offset.y,\n });\n }\n if (delta) {\n // Incoporate each ancestor's scale into a culmulative treeScale for this component\n treeScale.x *= delta.x.scale;\n treeScale.y *= delta.y.scale;\n // Apply each ancestor's calculated delta into this component's recorded layout box\n applyBoxDelta(box, delta);\n }\n if (isSharedTransition && hasTransform(node.latestValues)) {\n transformBox(box, node.latestValues);\n }\n }\n /**\n * Snap tree scale back to 1 if it's within a non-perceivable threshold.\n * This will help reduce useless scales getting rendered.\n */\n treeScale.x = snapToDefault(treeScale.x);\n treeScale.y = snapToDefault(treeScale.y);\n}\nfunction snapToDefault(scale) {\n if (Number.isInteger(scale))\n return scale;\n return scale > 1.0000000000001 || scale < 0.999999999999 ? scale : 1;\n}\nfunction translateAxis(axis, distance) {\n axis.min = axis.min + distance;\n axis.max = axis.max + distance;\n}\n/**\n * Apply a transform to an axis from the latest resolved motion values.\n * This function basically acts as a bridge between a flat motion value map\n * and applyAxisDelta\n */\nfunction transformAxis(axis, transforms, [key, scaleKey, originKey]) {\n const axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5;\n const originPoint = mix(axis.min, axis.max, axisOrigin);\n // Apply the axis delta to the final axis\n applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale);\n}\n/**\n * The names of the motion values we want to apply as translation, scale and origin.\n */\nconst xKeys = [\"x\", \"scaleX\", \"originX\"];\nconst yKeys = [\"y\", \"scaleY\", \"originY\"];\n/**\n * Apply a transform to a box from the latest resolved motion values.\n */\nfunction transformBox(box, transform) {\n transformAxis(box.x, transform, xKeys);\n transformAxis(box.y, transform, yKeys);\n}\n\nexport { applyAxisDelta, applyBoxDelta, applyPointDelta, applyTreeDeltas, scalePoint, transformAxis, transformBox, translateAxis };\n","import { convertBoundingBoxToBox, transformBoxPoints } from '../geometry/conversion.mjs';\nimport { translateAxis } from '../geometry/delta-apply.mjs';\n\nfunction measureViewportBox(instance, transformPoint) {\n return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint));\n}\nfunction measurePageBox(element, rootProjectionNode, transformPagePoint) {\n const viewportBox = measureViewportBox(element, transformPagePoint);\n const { scroll } = rootProjectionNode;\n if (scroll) {\n translateAxis(viewportBox.x, scroll.offset.x);\n translateAxis(viewportBox.y, scroll.offset.y);\n }\n return viewportBox;\n}\n\nexport { measurePageBox, measureViewportBox };\n","// Fixes https://github.com/framer/motion/issues/2270\nconst getContextWindow = ({ current }) => {\n return current ? current.ownerDocument.defaultView : null;\n};\n\nexport { getContextWindow };\n","import { invariant } from '../../utils/errors.mjs';\nimport { PanSession } from '../pan/PanSession.mjs';\nimport { getGlobalLock } from './utils/lock.mjs';\nimport { isRefObject } from '../../utils/is-ref-object.mjs';\nimport { addPointerEvent } from '../../events/add-pointer-event.mjs';\nimport { applyConstraints, calcRelativeConstraints, resolveDragElastic, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, calcOrigin } from './utils/constraints.mjs';\nimport { createBox } from '../../projection/geometry/models.mjs';\nimport { eachAxis } from '../../projection/utils/each-axis.mjs';\nimport { measurePageBox } from '../../projection/utils/measure.mjs';\nimport { extractEventInfo } from '../../events/event-info.mjs';\nimport { convertBoxToBoundingBox, convertBoundingBoxToBox } from '../../projection/geometry/conversion.mjs';\nimport { addDomEvent } from '../../events/add-dom-event.mjs';\nimport { calcLength } from '../../projection/geometry/delta-calc.mjs';\nimport { mix } from '../../utils/mix.mjs';\nimport { percent } from '../../value/types/numbers/units.mjs';\nimport { animateMotionValue } from '../../animation/interfaces/motion-value.mjs';\nimport { getContextWindow } from '../../utils/get-context-window.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\nconst elementDragControls = new WeakMap();\n/**\n *\n */\n// let latestPointerEvent: PointerEvent\nclass VisualElementDragControls {\n constructor(visualElement) {\n // This is a reference to the global drag gesture lock, ensuring only one component\n // can \"capture\" the drag of one or both axes.\n // TODO: Look into moving this into pansession?\n this.openGlobalLock = null;\n this.isDragging = false;\n this.currentDirection = null;\n this.originPoint = { x: 0, y: 0 };\n /**\n * The permitted boundaries of travel, in pixels.\n */\n this.constraints = false;\n this.hasMutatedConstraints = false;\n /**\n * The per-axis resolved elastic values.\n */\n this.elastic = createBox();\n this.visualElement = visualElement;\n }\n start(originEvent, { snapToCursor = false } = {}) {\n /**\n * Don't start dragging if this component is exiting\n */\n const { presenceContext } = this.visualElement;\n if (presenceContext && presenceContext.isPresent === false)\n return;\n const onSessionStart = (event) => {\n const { dragSnapToOrigin } = this.getProps();\n // Stop or pause any animations on both axis values immediately. This allows the user to throw and catch\n // the component.\n dragSnapToOrigin ? this.pauseAnimation() : this.stopAnimation();\n if (snapToCursor) {\n this.snapToCursor(extractEventInfo(event, \"page\").point);\n }\n };\n const onStart = (event, info) => {\n // Attempt to grab the global drag gesture lock - maybe make this part of PanSession\n const { drag, dragPropagation, onDragStart } = this.getProps();\n if (drag && !dragPropagation) {\n if (this.openGlobalLock)\n this.openGlobalLock();\n this.openGlobalLock = getGlobalLock(drag);\n // If we don 't have the lock, don't start dragging\n if (!this.openGlobalLock)\n return;\n }\n this.isDragging = true;\n this.currentDirection = null;\n this.resolveConstraints();\n if (this.visualElement.projection) {\n this.visualElement.projection.isAnimationBlocked = true;\n this.visualElement.projection.target = undefined;\n }\n /**\n * Record gesture origin\n */\n eachAxis((axis) => {\n let current = this.getAxisMotionValue(axis).get() || 0;\n /**\n * If the MotionValue is a percentage value convert to px\n */\n if (percent.test(current)) {\n const { projection } = this.visualElement;\n if (projection && projection.layout) {\n const measuredAxis = projection.layout.layoutBox[axis];\n if (measuredAxis) {\n const length = calcLength(measuredAxis);\n current = length * (parseFloat(current) / 100);\n }\n }\n }\n this.originPoint[axis] = current;\n });\n // Fire onDragStart event\n if (onDragStart) {\n frame.update(() => onDragStart(event, info), false, true);\n }\n const { animationState } = this.visualElement;\n animationState && animationState.setActive(\"whileDrag\", true);\n };\n const onMove = (event, info) => {\n // latestPointerEvent = event\n const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps();\n // If we didn't successfully receive the gesture lock, early return.\n if (!dragPropagation && !this.openGlobalLock)\n return;\n const { offset } = info;\n // Attempt to detect drag direction if directionLock is true\n if (dragDirectionLock && this.currentDirection === null) {\n this.currentDirection = getCurrentDirection(offset);\n // If we've successfully set a direction, notify listener\n if (this.currentDirection !== null) {\n onDirectionLock && onDirectionLock(this.currentDirection);\n }\n return;\n }\n // Update each point with the latest position\n this.updateAxis(\"x\", info.point, offset);\n this.updateAxis(\"y\", info.point, offset);\n /**\n * Ideally we would leave the renderer to fire naturally at the end of\n * this frame but if the element is about to change layout as the result\n * of a re-render we want to ensure the browser can read the latest\n * bounding box to ensure the pointer and element don't fall out of sync.\n */\n this.visualElement.render();\n /**\n * This must fire after the render call as it might trigger a state\n * change which itself might trigger a layout update.\n */\n onDrag && onDrag(event, info);\n };\n const onSessionEnd = (event, info) => this.stop(event, info);\n const resumeAnimation = () => eachAxis((axis) => { var _a; return (this.getAnimationState(axis) === 'paused') && ((_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.play()); });\n const { dragSnapToOrigin } = this.getProps();\n this.panSession = new PanSession(originEvent, {\n onSessionStart,\n onStart,\n onMove,\n onSessionEnd,\n resumeAnimation\n }, {\n transformPagePoint: this.visualElement.getTransformPagePoint(),\n dragSnapToOrigin,\n contextWindow: getContextWindow(this.visualElement),\n });\n }\n stop(event, info) {\n const isDragging = this.isDragging;\n this.cancel();\n if (!isDragging)\n return;\n const { velocity } = info;\n this.startAnimation(velocity);\n const { onDragEnd } = this.getProps();\n if (onDragEnd) {\n frame.update(() => onDragEnd(event, info));\n }\n }\n cancel() {\n this.isDragging = false;\n const { projection, animationState } = this.visualElement;\n if (projection) {\n projection.isAnimationBlocked = false;\n }\n this.panSession && this.panSession.end();\n this.panSession = undefined;\n const { dragPropagation } = this.getProps();\n if (!dragPropagation && this.openGlobalLock) {\n this.openGlobalLock();\n this.openGlobalLock = null;\n }\n animationState && animationState.setActive(\"whileDrag\", false);\n }\n updateAxis(axis, _point, offset) {\n const { drag } = this.getProps();\n // If we're not dragging this axis, do an early return.\n if (!offset || !shouldDrag(axis, drag, this.currentDirection))\n return;\n const axisValue = this.getAxisMotionValue(axis);\n let next = this.originPoint[axis] + offset[axis];\n // Apply constraints\n if (this.constraints && this.constraints[axis]) {\n next = applyConstraints(next, this.constraints[axis], this.elastic[axis]);\n }\n axisValue.set(next);\n }\n resolveConstraints() {\n var _a;\n const { dragConstraints, dragElastic } = this.getProps();\n const layout = this.visualElement.projection &&\n !this.visualElement.projection.layout\n ? this.visualElement.projection.measure(false)\n : (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout;\n const prevConstraints = this.constraints;\n if (dragConstraints && isRefObject(dragConstraints)) {\n if (!this.constraints) {\n this.constraints = this.resolveRefConstraints();\n }\n }\n else {\n if (dragConstraints && layout) {\n this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints);\n }\n else {\n this.constraints = false;\n }\n }\n this.elastic = resolveDragElastic(dragElastic);\n /**\n * If we're outputting to external MotionValues, we want to rebase the measured constraints\n * from viewport-relative to component-relative.\n */\n if (prevConstraints !== this.constraints &&\n layout &&\n this.constraints &&\n !this.hasMutatedConstraints) {\n eachAxis((axis) => {\n if (this.getAxisMotionValue(axis)) {\n this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]);\n }\n });\n }\n }\n resolveRefConstraints() {\n const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();\n if (!constraints || !isRefObject(constraints))\n return false;\n const constraintsElement = constraints.current;\n invariant(constraintsElement !== null, \"If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.\");\n const { projection } = this.visualElement;\n // TODO\n if (!projection || !projection.layout)\n return false;\n const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());\n let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);\n /**\n * If there's an onMeasureDragConstraints listener we call it and\n * if different constraints are returned, set constraints to that\n */\n if (onMeasureDragConstraints) {\n const userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints));\n this.hasMutatedConstraints = !!userConstraints;\n if (userConstraints) {\n measuredConstraints = convertBoundingBoxToBox(userConstraints);\n }\n }\n return measuredConstraints;\n }\n startAnimation(velocity) {\n const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps();\n const constraints = this.constraints || {};\n const momentumAnimations = eachAxis((axis) => {\n if (!shouldDrag(axis, drag, this.currentDirection)) {\n return;\n }\n let transition = (constraints && constraints[axis]) || {};\n if (dragSnapToOrigin)\n transition = { min: 0, max: 0 };\n /**\n * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame\n * of spring animations so we should look into adding a disable spring option to `inertia`.\n * We could do something here where we affect the `bounceStiffness` and `bounceDamping`\n * using the value of `dragElastic`.\n */\n const bounceStiffness = dragElastic ? 200 : 1000000;\n const bounceDamping = dragElastic ? 40 : 10000000;\n const inertia = {\n type: \"inertia\",\n velocity: dragMomentum ? velocity[axis] : 0,\n bounceStiffness,\n bounceDamping,\n timeConstant: 750,\n restDelta: 1,\n restSpeed: 10,\n ...dragTransition,\n ...transition,\n };\n // If we're not animating on an externally-provided `MotionValue` we can use the\n // component's animation controls which will handle interactions with whileHover (etc),\n // otherwise we just have to animate the `MotionValue` itself.\n return this.startAxisValueAnimation(axis, inertia);\n });\n // Run all animations and then resolve the new drag constraints.\n return Promise.all(momentumAnimations).then(onDragTransitionEnd);\n }\n startAxisValueAnimation(axis, transition) {\n const axisValue = this.getAxisMotionValue(axis);\n return axisValue.start(animateMotionValue(axis, axisValue, 0, transition));\n }\n stopAnimation() {\n eachAxis((axis) => this.getAxisMotionValue(axis).stop());\n }\n pauseAnimation() {\n eachAxis((axis) => { var _a; return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.pause(); });\n }\n getAnimationState(axis) {\n var _a;\n return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.state;\n }\n /**\n * Drag works differently depending on which props are provided.\n *\n * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.\n * - Otherwise, we apply the delta to the x/y motion values.\n */\n getAxisMotionValue(axis) {\n const dragKey = \"_drag\" + axis.toUpperCase();\n const props = this.visualElement.getProps();\n const externalMotionValue = props[dragKey];\n return externalMotionValue\n ? externalMotionValue\n : this.visualElement.getValue(axis, (props.initial ? props.initial[axis] : undefined) || 0);\n }\n snapToCursor(point) {\n eachAxis((axis) => {\n const { drag } = this.getProps();\n // If we're not dragging this axis, do an early return.\n if (!shouldDrag(axis, drag, this.currentDirection))\n return;\n const { projection } = this.visualElement;\n const axisValue = this.getAxisMotionValue(axis);\n if (projection && projection.layout) {\n const { min, max } = projection.layout.layoutBox[axis];\n axisValue.set(point[axis] - mix(min, max, 0.5));\n }\n });\n }\n /**\n * When the viewport resizes we want to check if the measured constraints\n * have changed and, if so, reposition the element within those new constraints\n * relative to where it was before the resize.\n */\n scalePositionWithinConstraints() {\n if (!this.visualElement.current)\n return;\n const { drag, dragConstraints } = this.getProps();\n const { projection } = this.visualElement;\n if (!isRefObject(dragConstraints) || !projection || !this.constraints)\n return;\n /**\n * Stop current animations as there can be visual glitching if we try to do\n * this mid-animation\n */\n this.stopAnimation();\n /**\n * Record the relative position of the dragged element relative to the\n * constraints box and save as a progress value.\n */\n const boxProgress = { x: 0, y: 0 };\n eachAxis((axis) => {\n const axisValue = this.getAxisMotionValue(axis);\n if (axisValue) {\n const latest = axisValue.get();\n boxProgress[axis] = calcOrigin({ min: latest, max: latest }, this.constraints[axis]);\n }\n });\n /**\n * Update the layout of this element and resolve the latest drag constraints\n */\n const { transformTemplate } = this.visualElement.getProps();\n this.visualElement.current.style.transform = transformTemplate\n ? transformTemplate({}, \"\")\n : \"none\";\n projection.root && projection.root.updateScroll();\n projection.updateLayout();\n this.resolveConstraints();\n /**\n * For each axis, calculate the current progress of the layout axis\n * within the new constraints.\n */\n eachAxis((axis) => {\n if (!shouldDrag(axis, drag, null))\n return;\n /**\n * Calculate a new transform based on the previous box progress\n */\n const axisValue = this.getAxisMotionValue(axis);\n const { min, max } = this.constraints[axis];\n axisValue.set(mix(min, max, boxProgress[axis]));\n });\n }\n addListeners() {\n if (!this.visualElement.current)\n return;\n elementDragControls.set(this.visualElement, this);\n const element = this.visualElement.current;\n /**\n * Attach a pointerdown event listener on this DOM element to initiate drag tracking.\n */\n const stopPointerListener = addPointerEvent(element, \"pointerdown\", (event) => {\n const { drag, dragListener = true } = this.getProps();\n drag && dragListener && this.start(event);\n });\n const measureDragConstraints = () => {\n const { dragConstraints } = this.getProps();\n if (isRefObject(dragConstraints)) {\n this.constraints = this.resolveRefConstraints();\n }\n };\n const { projection } = this.visualElement;\n const stopMeasureLayoutListener = projection.addEventListener(\"measure\", measureDragConstraints);\n if (projection && !projection.layout) {\n projection.root && projection.root.updateScroll();\n projection.updateLayout();\n }\n measureDragConstraints();\n /**\n * Attach a window resize listener to scale the draggable target within its defined\n * constraints as the window resizes.\n */\n const stopResizeListener = addDomEvent(window, \"resize\", () => this.scalePositionWithinConstraints());\n /**\n * If the element's layout changes, calculate the delta and apply that to\n * the drag gesture's origin point.\n */\n const stopLayoutUpdateListener = projection.addEventListener(\"didUpdate\", (({ delta, hasLayoutChanged }) => {\n if (this.isDragging && hasLayoutChanged) {\n eachAxis((axis) => {\n const motionValue = this.getAxisMotionValue(axis);\n if (!motionValue)\n return;\n this.originPoint[axis] += delta[axis].translate;\n motionValue.set(motionValue.get() + delta[axis].translate);\n });\n this.visualElement.render();\n }\n }));\n return () => {\n stopResizeListener();\n stopPointerListener();\n stopMeasureLayoutListener();\n stopLayoutUpdateListener && stopLayoutUpdateListener();\n };\n }\n getProps() {\n const props = this.visualElement.getProps();\n const { drag = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true, } = props;\n return {\n ...props,\n drag,\n dragDirectionLock,\n dragPropagation,\n dragConstraints,\n dragElastic,\n dragMomentum,\n };\n }\n}\nfunction shouldDrag(direction, drag, currentDirection) {\n return ((drag === true || drag === direction) &&\n (currentDirection === null || currentDirection === direction));\n}\n/**\n * Based on an x/y offset determine the current drag direction. If both axis' offsets are lower\n * than the provided threshold, return `null`.\n *\n * @param offset - The x/y offset from origin.\n * @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction.\n */\nfunction getCurrentDirection(offset, lockThreshold = 10) {\n let direction = null;\n if (Math.abs(offset.y) > lockThreshold) {\n direction = \"y\";\n }\n else if (Math.abs(offset.x) > lockThreshold) {\n direction = \"x\";\n }\n return direction;\n}\n\nexport { VisualElementDragControls, elementDragControls };\n","import { PanSession } from './PanSession.mjs';\nimport { addPointerEvent } from '../../events/add-pointer-event.mjs';\nimport { Feature } from '../../motion/features/Feature.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { getContextWindow } from '../../utils/get-context-window.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\nconst asyncHandler = (handler) => (event, info) => {\n if (handler) {\n frame.update(() => handler(event, info));\n }\n};\nclass PanGesture extends Feature {\n constructor() {\n super(...arguments);\n this.removePointerDownListener = noop;\n }\n onPointerDown(pointerDownEvent) {\n this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {\n transformPagePoint: this.node.getTransformPagePoint(),\n contextWindow: getContextWindow(this.node),\n });\n }\n createPanHandlers() {\n const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();\n return {\n onSessionStart: asyncHandler(onPanSessionStart),\n onStart: asyncHandler(onPanStart),\n onMove: onPan,\n onEnd: (event, info) => {\n delete this.session;\n if (onPanEnd) {\n frame.update(() => onPanEnd(event, info));\n }\n },\n };\n }\n mount() {\n this.removePointerDownListener = addPointerEvent(this.node.current, \"pointerdown\", (event) => this.onPointerDown(event));\n }\n update() {\n this.session && this.session.updateHandlers(this.createPanHandlers());\n }\n unmount() {\n this.removePointerDownListener();\n this.session && this.session.end();\n }\n}\n\nexport { PanGesture };\n","/**\n * This should only ever be modified on the client otherwise it'll\n * persist through server requests. If we need instanced states we\n * could lazy-init via root.\n */\nconst globalProjectionState = {\n /**\n * Global flag as to whether the tree has animated since the last time\n * we resized the window\n */\n hasAnimatedSinceResize: true,\n /**\n * We set this to true once, on the first update. Any nodes added to the tree beyond that\n * update will be given a `data-projection-id` attribute.\n */\n hasEverUpdated: false,\n};\n\nexport { globalProjectionState };\n","import { px } from '../../value/types/numbers/units.mjs';\n\nfunction pixelsToPercent(pixels, axis) {\n if (axis.max === axis.min)\n return 0;\n return (pixels / (axis.max - axis.min)) * 100;\n}\n/**\n * We always correct borderRadius as a percentage rather than pixels to reduce paints.\n * For example, if you are projecting a box that is 100px wide with a 10px borderRadius\n * into a box that is 200px wide with a 20px borderRadius, that is actually a 10%\n * borderRadius in both states. If we animate between the two in pixels that will trigger\n * a paint each time. If we animate between the two in percentage we'll avoid a paint.\n */\nconst correctBorderRadius = {\n correct: (latest, node) => {\n if (!node.target)\n return latest;\n /**\n * If latest is a string, if it's a percentage we can return immediately as it's\n * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.\n */\n if (typeof latest === \"string\") {\n if (px.test(latest)) {\n latest = parseFloat(latest);\n }\n else {\n return latest;\n }\n }\n /**\n * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that\n * pixel value as a percentage of each axis\n */\n const x = pixelsToPercent(latest, node.target.x);\n const y = pixelsToPercent(latest, node.target.y);\n return `${x}% ${y}%`;\n },\n};\n\nexport { correctBorderRadius, pixelsToPercent };\n","import { mix } from '../../utils/mix.mjs';\nimport { complex } from '../../value/types/complex/index.mjs';\n\nconst correctBoxShadow = {\n correct: (latest, { treeScale, projectionDelta }) => {\n const original = latest;\n const shadow = complex.parse(latest);\n // TODO: Doesn't support multiple shadows\n if (shadow.length > 5)\n return original;\n const template = complex.createTransformer(latest);\n const offset = typeof shadow[0] !== \"number\" ? 1 : 0;\n // Calculate the overall context scale\n const xScale = projectionDelta.x.scale * treeScale.x;\n const yScale = projectionDelta.y.scale * treeScale.y;\n shadow[0 + offset] /= xScale;\n shadow[1 + offset] /= yScale;\n /**\n * Ideally we'd correct x and y scales individually, but because blur and\n * spread apply to both we have to take a scale average and apply that instead.\n * We could potentially improve the outcome of this by incorporating the ratio between\n * the two scales.\n */\n const averageScale = mix(xScale, yScale, 0.5);\n // Blur\n if (typeof shadow[2 + offset] === \"number\")\n shadow[2 + offset] /= averageScale;\n // Spread\n if (typeof shadow[3 + offset] === \"number\")\n shadow[3 + offset] /= averageScale;\n return template(shadow);\n },\n};\n\nexport { correctBoxShadow };\n","import React__default, { useContext } from 'react';\nimport { usePresence } from '../../../components/AnimatePresence/use-presence.mjs';\nimport { LayoutGroupContext } from '../../../context/LayoutGroupContext.mjs';\nimport { SwitchLayoutGroupContext } from '../../../context/SwitchLayoutGroupContext.mjs';\nimport { globalProjectionState } from '../../../projection/node/state.mjs';\nimport { correctBorderRadius } from '../../../projection/styles/scale-border-radius.mjs';\nimport { correctBoxShadow } from '../../../projection/styles/scale-box-shadow.mjs';\nimport { addScaleCorrector } from '../../../projection/styles/scale-correction.mjs';\nimport { frame } from '../../../frameloop/frame.mjs';\n\nclass MeasureLayoutWithContext extends React__default.Component {\n /**\n * This only mounts projection nodes for components that\n * need measuring, we might want to do it for all components\n * in order to incorporate transforms\n */\n componentDidMount() {\n const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props;\n const { projection } = visualElement;\n addScaleCorrector(defaultScaleCorrectors);\n if (projection) {\n if (layoutGroup.group)\n layoutGroup.group.add(projection);\n if (switchLayoutGroup && switchLayoutGroup.register && layoutId) {\n switchLayoutGroup.register(projection);\n }\n projection.root.didUpdate();\n projection.addEventListener(\"animationComplete\", () => {\n this.safeToRemove();\n });\n projection.setOptions({\n ...projection.options,\n onExitComplete: () => this.safeToRemove(),\n });\n }\n globalProjectionState.hasEverUpdated = true;\n }\n getSnapshotBeforeUpdate(prevProps) {\n const { layoutDependency, visualElement, drag, isPresent } = this.props;\n const projection = visualElement.projection;\n if (!projection)\n return null;\n /**\n * TODO: We use this data in relegate to determine whether to\n * promote a previous element. There's no guarantee its presence data\n * will have updated by this point - if a bug like this arises it will\n * have to be that we markForRelegation and then find a new lead some other way,\n * perhaps in didUpdate\n */\n projection.isPresent = isPresent;\n if (drag ||\n prevProps.layoutDependency !== layoutDependency ||\n layoutDependency === undefined) {\n projection.willUpdate();\n }\n else {\n this.safeToRemove();\n }\n if (prevProps.isPresent !== isPresent) {\n if (isPresent) {\n projection.promote();\n }\n else if (!projection.relegate()) {\n /**\n * If there's another stack member taking over from this one,\n * it's in charge of the exit animation and therefore should\n * be in charge of the safe to remove. Otherwise we call it here.\n */\n frame.postRender(() => {\n const stack = projection.getStack();\n if (!stack || !stack.members.length) {\n this.safeToRemove();\n }\n });\n }\n }\n return null;\n }\n componentDidUpdate() {\n const { projection } = this.props.visualElement;\n if (projection) {\n projection.root.didUpdate();\n queueMicrotask(() => {\n if (!projection.currentAnimation && projection.isLead()) {\n this.safeToRemove();\n }\n });\n }\n }\n componentWillUnmount() {\n const { visualElement, layoutGroup, switchLayoutGroup: promoteContext, } = this.props;\n const { projection } = visualElement;\n if (projection) {\n projection.scheduleCheckAfterUnmount();\n if (layoutGroup && layoutGroup.group)\n layoutGroup.group.remove(projection);\n if (promoteContext && promoteContext.deregister)\n promoteContext.deregister(projection);\n }\n }\n safeToRemove() {\n const { safeToRemove } = this.props;\n safeToRemove && safeToRemove();\n }\n render() {\n return null;\n }\n}\nfunction MeasureLayout(props) {\n const [isPresent, safeToRemove] = usePresence();\n const layoutGroup = useContext(LayoutGroupContext);\n return (React__default.createElement(MeasureLayoutWithContext, { ...props, layoutGroup: layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove }));\n}\nconst defaultScaleCorrectors = {\n borderRadius: {\n ...correctBorderRadius,\n applyTo: [\n \"borderTopLeftRadius\",\n \"borderTopRightRadius\",\n \"borderBottomLeftRadius\",\n \"borderBottomRightRadius\",\n ],\n },\n borderTopLeftRadius: correctBorderRadius,\n borderTopRightRadius: correctBorderRadius,\n borderBottomLeftRadius: correctBorderRadius,\n borderBottomRightRadius: correctBorderRadius,\n boxShadow: correctBoxShadow,\n};\n\nexport { MeasureLayout };\n","import { useContext, useId, useEffect } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\n\n/**\n * When a component is the child of `AnimatePresence`, it can use `usePresence`\n * to access information about whether it's still present in the React tree.\n *\n * ```jsx\n * import { usePresence } from \"framer-motion\"\n *\n * export const Component = () => {\n * const [isPresent, safeToRemove] = usePresence()\n *\n * useEffect(() => {\n * !isPresent && setTimeout(safeToRemove, 1000)\n * }, [isPresent])\n *\n * return \n * }\n * ```\n *\n * If `isPresent` is `false`, it means that a component has been removed the tree, but\n * `AnimatePresence` won't really remove it until `safeToRemove` has been called.\n *\n * @public\n */\nfunction usePresence() {\n const context = useContext(PresenceContext);\n if (context === null)\n return [true, null];\n const { isPresent, onExitComplete, register } = context;\n // It's safe to call the following hooks conditionally (after an early return) because the context will always\n // either be null or non-null for the lifespan of the component.\n const id = useId();\n useEffect(() => register(id), []);\n const safeToRemove = () => onExitComplete && onExitComplete(id);\n return !isPresent && onExitComplete ? [false, safeToRemove] : [true];\n}\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function.\n *\n * ```jsx\n * import { useIsPresent } from \"framer-motion\"\n *\n * export const Component = () => {\n * const isPresent = useIsPresent()\n *\n * useEffect(() => {\n * !isPresent && console.log(\"I've been removed!\")\n * }, [isPresent])\n *\n * return \n * }\n * ```\n *\n * @public\n */\nfunction useIsPresent() {\n return isPresent(useContext(PresenceContext));\n}\nfunction isPresent(context) {\n return context === null ? true : context.isPresent;\n}\n\nexport { isPresent, useIsPresent, usePresence };\n","import { circOut } from '../../easing/circ.mjs';\nimport { progress } from '../../utils/progress.mjs';\nimport { mix } from '../../utils/mix.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { percent, px } from '../../value/types/numbers/units.mjs';\n\nconst borders = [\"TopLeft\", \"TopRight\", \"BottomLeft\", \"BottomRight\"];\nconst numBorders = borders.length;\nconst asNumber = (value) => typeof value === \"string\" ? parseFloat(value) : value;\nconst isPx = (value) => typeof value === \"number\" || px.test(value);\nfunction mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {\n if (shouldCrossfadeOpacity) {\n target.opacity = mix(0, \n // TODO Reinstate this if only child\n lead.opacity !== undefined ? lead.opacity : 1, easeCrossfadeIn(progress));\n target.opacityExit = mix(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress));\n }\n else if (isOnlyMember) {\n target.opacity = mix(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress);\n }\n /**\n * Mix border radius\n */\n for (let i = 0; i < numBorders; i++) {\n const borderLabel = `border${borders[i]}Radius`;\n let followRadius = getRadius(follow, borderLabel);\n let leadRadius = getRadius(lead, borderLabel);\n if (followRadius === undefined && leadRadius === undefined)\n continue;\n followRadius || (followRadius = 0);\n leadRadius || (leadRadius = 0);\n const canMix = followRadius === 0 ||\n leadRadius === 0 ||\n isPx(followRadius) === isPx(leadRadius);\n if (canMix) {\n target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);\n if (percent.test(leadRadius) || percent.test(followRadius)) {\n target[borderLabel] += \"%\";\n }\n }\n else {\n target[borderLabel] = leadRadius;\n }\n }\n /**\n * Mix rotation\n */\n if (follow.rotate || lead.rotate) {\n target.rotate = mix(follow.rotate || 0, lead.rotate || 0, progress);\n }\n}\nfunction getRadius(values, radiusName) {\n return values[radiusName] !== undefined\n ? values[radiusName]\n : values.borderRadius;\n}\n// /**\n// * We only want to mix the background color if there's a follow element\n// * that we're not crossfading opacity between. For instance with switch\n// * AnimateSharedLayout animations, this helps the illusion of a continuous\n// * element being animated but also cuts down on the number of paints triggered\n// * for elements where opacity is doing that work for us.\n// */\n// if (\n// !hasFollowElement &&\n// latestLeadValues.backgroundColor &&\n// latestFollowValues.backgroundColor\n// ) {\n// /**\n// * This isn't ideal performance-wise as mixColor is creating a new function every frame.\n// * We could probably create a mixer that runs at the start of the animation but\n// * the idea behind the crossfader is that it runs dynamically between two potentially\n// * changing targets (ie opacity or borderRadius may be animating independently via variants)\n// */\n// leadState.backgroundColor = followState.backgroundColor = mixColor(\n// latestFollowValues.backgroundColor as string,\n// latestLeadValues.backgroundColor as string\n// )(p)\n// }\nconst easeCrossfadeIn = compress(0, 0.5, circOut);\nconst easeCrossfadeOut = compress(0.5, 0.95, noop);\nfunction compress(min, max, easing) {\n return (p) => {\n // Could replace ifs with clamp\n if (p < min)\n return 0;\n if (p > max)\n return 1;\n return easing(progress(min, max, p));\n };\n}\n\nexport { mixValues };\n","/**\n * Reset an axis to the provided origin box.\n *\n * This is a mutative operation.\n */\nfunction copyAxisInto(axis, originAxis) {\n axis.min = originAxis.min;\n axis.max = originAxis.max;\n}\n/**\n * Reset a box to the provided origin box.\n *\n * This is a mutative operation.\n */\nfunction copyBoxInto(box, originBox) {\n copyAxisInto(box.x, originBox.x);\n copyAxisInto(box.y, originBox.y);\n}\n\nexport { copyAxisInto, copyBoxInto };\n","import { mix } from '../../utils/mix.mjs';\nimport { percent } from '../../value/types/numbers/units.mjs';\nimport { scalePoint } from './delta-apply.mjs';\n\n/**\n * Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse\n */\nfunction removePointDelta(point, translate, scale, originPoint, boxScale) {\n point -= translate;\n point = scalePoint(point, 1 / scale, originPoint);\n if (boxScale !== undefined) {\n point = scalePoint(point, 1 / boxScale, originPoint);\n }\n return point;\n}\n/**\n * Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse\n */\nfunction removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {\n if (percent.test(translate)) {\n translate = parseFloat(translate);\n const relativeProgress = mix(sourceAxis.min, sourceAxis.max, translate / 100);\n translate = relativeProgress - sourceAxis.min;\n }\n if (typeof translate !== \"number\")\n return;\n let originPoint = mix(originAxis.min, originAxis.max, origin);\n if (axis === originAxis)\n originPoint -= translate;\n axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale);\n axis.max = removePointDelta(axis.max, translate, scale, originPoint, boxScale);\n}\n/**\n * Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse\n * and acts as a bridge between motion values and removeAxisDelta\n */\nfunction removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) {\n removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis);\n}\n/**\n * The names of the motion values we want to apply as translation, scale and origin.\n */\nconst xKeys = [\"x\", \"scaleX\", \"originX\"];\nconst yKeys = [\"y\", \"scaleY\", \"originY\"];\n/**\n * Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse\n * and acts as a bridge between motion values and removeAxisDelta\n */\nfunction removeBoxTransforms(box, transforms, originBox, sourceBox) {\n removeAxisTransforms(box.x, transforms, xKeys, originBox ? originBox.x : undefined, sourceBox ? sourceBox.x : undefined);\n removeAxisTransforms(box.y, transforms, yKeys, originBox ? originBox.y : undefined, sourceBox ? sourceBox.y : undefined);\n}\n\nexport { removeAxisDelta, removeAxisTransforms, removeBoxTransforms, removePointDelta };\n","import { calcLength } from './delta-calc.mjs';\n\nfunction isAxisDeltaZero(delta) {\n return delta.translate === 0 && delta.scale === 1;\n}\nfunction isDeltaZero(delta) {\n return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y);\n}\nfunction boxEquals(a, b) {\n return (a.x.min === b.x.min &&\n a.x.max === b.x.max &&\n a.y.min === b.y.min &&\n a.y.max === b.y.max);\n}\nfunction boxEqualsRounded(a, b) {\n return (Math.round(a.x.min) === Math.round(b.x.min) &&\n Math.round(a.x.max) === Math.round(b.x.max) &&\n Math.round(a.y.min) === Math.round(b.y.min) &&\n Math.round(a.y.max) === Math.round(b.y.max));\n}\nfunction aspectRatio(box) {\n return calcLength(box.x) / calcLength(box.y);\n}\n\nexport { aspectRatio, boxEquals, boxEqualsRounded, isDeltaZero };\n","import { addUniqueItem, removeItem } from '../../utils/array.mjs';\n\nclass NodeStack {\n constructor() {\n this.members = [];\n }\n add(node) {\n addUniqueItem(this.members, node);\n node.scheduleRender();\n }\n remove(node) {\n removeItem(this.members, node);\n if (node === this.prevLead) {\n this.prevLead = undefined;\n }\n if (node === this.lead) {\n const prevLead = this.members[this.members.length - 1];\n if (prevLead) {\n this.promote(prevLead);\n }\n }\n }\n relegate(node) {\n const indexOfNode = this.members.findIndex((member) => node === member);\n if (indexOfNode === 0)\n return false;\n /**\n * Find the next projection node that is present\n */\n let prevLead;\n for (let i = indexOfNode; i >= 0; i--) {\n const member = this.members[i];\n if (member.isPresent !== false) {\n prevLead = member;\n break;\n }\n }\n if (prevLead) {\n this.promote(prevLead);\n return true;\n }\n else {\n return false;\n }\n }\n promote(node, preserveFollowOpacity) {\n const prevLead = this.lead;\n if (node === prevLead)\n return;\n this.prevLead = prevLead;\n this.lead = node;\n node.show();\n if (prevLead) {\n prevLead.instance && prevLead.scheduleRender();\n node.scheduleRender();\n node.resumeFrom = prevLead;\n if (preserveFollowOpacity) {\n node.resumeFrom.preserveOpacity = true;\n }\n if (prevLead.snapshot) {\n node.snapshot = prevLead.snapshot;\n node.snapshot.latestValues =\n prevLead.animationValues || prevLead.latestValues;\n }\n if (node.root && node.root.isUpdating) {\n node.isLayoutDirty = true;\n }\n const { crossfade } = node.options;\n if (crossfade === false) {\n prevLead.hide();\n }\n /**\n * TODO:\n * - Test border radius when previous node was deleted\n * - boxShadow mixing\n * - Shared between element A in scrolled container and element B (scroll stays the same or changes)\n * - Shared between element A in transformed container and element B (transform stays the same or changes)\n * - Shared between element A in scrolled page and element B (scroll stays the same or changes)\n * ---\n * - Crossfade opacity of root nodes\n * - layoutId changes after animation\n * - layoutId changes mid animation\n */\n }\n }\n exitAnimationComplete() {\n this.members.forEach((node) => {\n const { options, resumingFrom } = node;\n options.onExitComplete && options.onExitComplete();\n if (resumingFrom) {\n resumingFrom.options.onExitComplete &&\n resumingFrom.options.onExitComplete();\n }\n });\n }\n scheduleRender() {\n this.members.forEach((node) => {\n node.instance && node.scheduleRender(false);\n });\n }\n /**\n * Clear any leads that have been removed this render to prevent them from being\n * used in future animations and to prevent memory leaks\n */\n removeLeadSnapshot() {\n if (this.lead && this.lead.snapshot) {\n this.lead.snapshot = undefined;\n }\n }\n}\n\nexport { NodeStack };\n","function buildProjectionTransform(delta, treeScale, latestTransform) {\n let transform = \"\";\n /**\n * The translations we use to calculate are always relative to the viewport coordinate space.\n * But when we apply scales, we also scale the coordinate space of an element and its children.\n * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need\n * to move an element 100 pixels, we actually need to move it 200 in within that scaled space.\n */\n const xTranslate = delta.x.translate / treeScale.x;\n const yTranslate = delta.y.translate / treeScale.y;\n if (xTranslate || yTranslate) {\n transform = `translate3d(${xTranslate}px, ${yTranslate}px, 0) `;\n }\n /**\n * Apply scale correction for the tree transform.\n * This will apply scale to the screen-orientated axes.\n */\n if (treeScale.x !== 1 || treeScale.y !== 1) {\n transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;\n }\n if (latestTransform) {\n const { rotate, rotateX, rotateY } = latestTransform;\n if (rotate)\n transform += `rotate(${rotate}deg) `;\n if (rotateX)\n transform += `rotateX(${rotateX}deg) `;\n if (rotateY)\n transform += `rotateY(${rotateY}deg) `;\n }\n /**\n * Apply scale to match the size of the element to the size we want it.\n * This will apply scale to the element-orientated axes.\n */\n const elementScaleX = delta.x.scale * treeScale.x;\n const elementScaleY = delta.y.scale * treeScale.y;\n if (elementScaleX !== 1 || elementScaleY !== 1) {\n transform += `scale(${elementScaleX}, ${elementScaleY})`;\n }\n return transform || \"none\";\n}\n\nexport { buildProjectionTransform };\n","const compareByDepth = (a, b) => a.depth - b.depth;\n\nexport { compareByDepth };\n","import { addUniqueItem, removeItem } from '../../utils/array.mjs';\nimport { compareByDepth } from './compare-by-depth.mjs';\n\nclass FlatTree {\n constructor() {\n this.children = [];\n this.isDirty = false;\n }\n add(child) {\n addUniqueItem(this.children, child);\n this.isDirty = true;\n }\n remove(child) {\n removeItem(this.children, child);\n this.isDirty = true;\n }\n forEach(callback) {\n this.isDirty && this.children.sort(compareByDepth);\n this.isDirty = false;\n this.children.forEach(callback);\n }\n}\n\nexport { FlatTree };\n","import { SubscriptionManager } from '../../utils/subscription-manager.mjs';\nimport { mixValues } from '../animation/mix-values.mjs';\nimport { copyBoxInto } from '../geometry/copy.mjs';\nimport { translateAxis, transformBox, applyBoxDelta, applyTreeDeltas } from '../geometry/delta-apply.mjs';\nimport { calcRelativePosition, calcRelativeBox, calcBoxDelta, calcLength, isNear } from '../geometry/delta-calc.mjs';\nimport { removeBoxTransforms } from '../geometry/delta-remove.mjs';\nimport { createBox, createDelta } from '../geometry/models.mjs';\nimport { getValueTransition } from '../../animation/utils/transitions.mjs';\nimport { boxEqualsRounded, isDeltaZero, aspectRatio, boxEquals } from '../geometry/utils.mjs';\nimport { NodeStack } from '../shared/stack.mjs';\nimport { scaleCorrectors } from '../styles/scale-correction.mjs';\nimport { buildProjectionTransform } from '../styles/transform.mjs';\nimport { eachAxis } from '../utils/each-axis.mjs';\nimport { hasTransform, hasScale, has2DTranslate } from '../utils/has-transform.mjs';\nimport { FlatTree } from '../../render/utils/flat-tree.mjs';\nimport { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';\nimport { globalProjectionState } from './state.mjs';\nimport { delay } from '../../utils/delay.mjs';\nimport { mix } from '../../utils/mix.mjs';\nimport { record } from '../../debug/record.mjs';\nimport { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';\nimport { animateSingleValue } from '../../animation/interfaces/single-value.mjs';\nimport { clamp } from '../../utils/clamp.mjs';\nimport { cancelFrame, frameData, steps, frame } from '../../frameloop/frame.mjs';\nimport { noop } from '../../utils/noop.mjs';\n\nconst transformAxes = [\"\", \"X\", \"Y\", \"Z\"];\nconst hiddenVisibility = { visibility: \"hidden\" };\n/**\n * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1\n * which has a noticeable difference in spring animations\n */\nconst animationTarget = 1000;\nlet id = 0;\n/**\n * Use a mutable data object for debug data so as to not create a new\n * object every frame.\n */\nconst projectionFrameData = {\n type: \"projectionFrame\",\n totalNodes: 0,\n resolvedTargetDeltas: 0,\n recalculatedProjection: 0,\n};\nfunction createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {\n return class ProjectionNode {\n constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {\n /**\n * A unique ID generated for every projection node.\n */\n this.id = id++;\n /**\n * An id that represents a unique session instigated by startUpdate.\n */\n this.animationId = 0;\n /**\n * A Set containing all this component's children. This is used to iterate\n * through the children.\n *\n * TODO: This could be faster to iterate as a flat array stored on the root node.\n */\n this.children = new Set();\n /**\n * Options for the node. We use this to configure what kind of layout animations\n * we should perform (if any).\n */\n this.options = {};\n /**\n * We use this to detect when its safe to shut down part of a projection tree.\n * We have to keep projecting children for scale correction and relative projection\n * until all their parents stop performing layout animations.\n */\n this.isTreeAnimating = false;\n this.isAnimationBlocked = false;\n /**\n * Flag to true if we think this layout has been changed. We can't always know this,\n * currently we set it to true every time a component renders, or if it has a layoutDependency\n * if that has changed between renders. Additionally, components can be grouped by LayoutGroup\n * and if one node is dirtied, they all are.\n */\n this.isLayoutDirty = false;\n /**\n * Flag to true if we think the projection calculations for this node needs\n * recalculating as a result of an updated transform or layout animation.\n */\n this.isProjectionDirty = false;\n /**\n * Flag to true if the layout *or* transform has changed. This then gets propagated\n * throughout the projection tree, forcing any element below to recalculate on the next frame.\n */\n this.isSharedProjectionDirty = false;\n /**\n * Flag transform dirty. This gets propagated throughout the whole tree but is only\n * respected by shared nodes.\n */\n this.isTransformDirty = false;\n /**\n * Block layout updates for instant layout transitions throughout the tree.\n */\n this.updateManuallyBlocked = false;\n this.updateBlockedByResize = false;\n /**\n * Set to true between the start of the first `willUpdate` call and the end of the `didUpdate`\n * call.\n */\n this.isUpdating = false;\n /**\n * If this is an SVG element we currently disable projection transforms\n */\n this.isSVG = false;\n /**\n * Flag to true (during promotion) if a node doing an instant layout transition needs to reset\n * its projection styles.\n */\n this.needsReset = false;\n /**\n * Flags whether this node should have its transform reset prior to measuring.\n */\n this.shouldResetTransform = false;\n /**\n * An object representing the calculated contextual/accumulated/tree scale.\n * This will be used to scale calculcated projection transforms, as these are\n * calculated in screen-space but need to be scaled for elements to layoutly\n * make it to their calculated destinations.\n *\n * TODO: Lazy-init\n */\n this.treeScale = { x: 1, y: 1 };\n /**\n *\n */\n this.eventHandlers = new Map();\n this.hasTreeAnimated = false;\n // Note: Currently only running on root node\n this.updateScheduled = false;\n this.projectionUpdateScheduled = false;\n this.checkUpdateFailed = () => {\n if (this.isUpdating) {\n this.isUpdating = false;\n this.clearAllSnapshots();\n }\n };\n /**\n * This is a multi-step process as shared nodes might be of different depths. Nodes\n * are sorted by depth order, so we need to resolve the entire tree before moving to\n * the next step.\n */\n this.updateProjection = () => {\n this.projectionUpdateScheduled = false;\n /**\n * Reset debug counts. Manually resetting rather than creating a new\n * object each frame.\n */\n projectionFrameData.totalNodes =\n projectionFrameData.resolvedTargetDeltas =\n projectionFrameData.recalculatedProjection =\n 0;\n this.nodes.forEach(propagateDirtyNodes);\n this.nodes.forEach(resolveTargetDelta);\n this.nodes.forEach(calcProjection);\n this.nodes.forEach(cleanDirtyNodes);\n record(projectionFrameData);\n };\n this.hasProjected = false;\n this.isVisible = true;\n this.animationProgress = 0;\n /**\n * Shared layout\n */\n // TODO Only running on root node\n this.sharedNodes = new Map();\n this.latestValues = latestValues;\n this.root = parent ? parent.root || parent : this;\n this.path = parent ? [...parent.path, parent] : [];\n this.parent = parent;\n this.depth = parent ? parent.depth + 1 : 0;\n for (let i = 0; i < this.path.length; i++) {\n this.path[i].shouldResetTransform = true;\n }\n if (this.root === this)\n this.nodes = new FlatTree();\n }\n addEventListener(name, handler) {\n if (!this.eventHandlers.has(name)) {\n this.eventHandlers.set(name, new SubscriptionManager());\n }\n return this.eventHandlers.get(name).add(handler);\n }\n notifyListeners(name, ...args) {\n const subscriptionManager = this.eventHandlers.get(name);\n subscriptionManager && subscriptionManager.notify(...args);\n }\n hasListeners(name) {\n return this.eventHandlers.has(name);\n }\n /**\n * Lifecycles\n */\n mount(instance, isLayoutDirty = this.root.hasTreeAnimated) {\n if (this.instance)\n return;\n this.isSVG = isSVGElement(instance);\n this.instance = instance;\n const { layoutId, layout, visualElement } = this.options;\n if (visualElement && !visualElement.current) {\n visualElement.mount(instance);\n }\n this.root.nodes.add(this);\n this.parent && this.parent.children.add(this);\n if (isLayoutDirty && (layout || layoutId)) {\n this.isLayoutDirty = true;\n }\n if (attachResizeListener) {\n let cancelDelay;\n const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false);\n attachResizeListener(instance, () => {\n this.root.updateBlockedByResize = true;\n cancelDelay && cancelDelay();\n cancelDelay = delay(resizeUnblockUpdate, 250);\n if (globalProjectionState.hasAnimatedSinceResize) {\n globalProjectionState.hasAnimatedSinceResize = false;\n this.nodes.forEach(finishAnimation);\n }\n });\n }\n if (layoutId) {\n this.root.registerSharedNode(layoutId, this);\n }\n // Only register the handler if it requires layout animation\n if (this.options.animate !== false &&\n visualElement &&\n (layoutId || layout)) {\n this.addEventListener(\"didUpdate\", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout, }) => {\n if (this.isTreeAnimationBlocked()) {\n this.target = undefined;\n this.relativeTarget = undefined;\n return;\n }\n // TODO: Check here if an animation exists\n const layoutTransition = this.options.transition ||\n visualElement.getDefaultTransition() ||\n defaultLayoutTransition;\n const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();\n /**\n * The target layout of the element might stay the same,\n * but its position relative to its parent has changed.\n */\n const targetChanged = !this.targetLayout ||\n !boxEqualsRounded(this.targetLayout, newLayout) ||\n hasRelativeTargetChanged;\n /**\n * If the layout hasn't seemed to have changed, it might be that the\n * element is visually in the same place in the document but its position\n * relative to its parent has indeed changed. So here we check for that.\n */\n const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;\n if (this.options.layoutRoot ||\n (this.resumeFrom && this.resumeFrom.instance) ||\n hasOnlyRelativeTargetChanged ||\n (hasLayoutChanged &&\n (targetChanged || !this.currentAnimation))) {\n if (this.resumeFrom) {\n this.resumingFrom = this.resumeFrom;\n this.resumingFrom.resumingFrom = undefined;\n }\n this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);\n const animationOptions = {\n ...getValueTransition(layoutTransition, \"layout\"),\n onPlay: onLayoutAnimationStart,\n onComplete: onLayoutAnimationComplete,\n };\n if (visualElement.shouldReduceMotion ||\n this.options.layoutRoot) {\n animationOptions.delay = 0;\n animationOptions.type = false;\n }\n this.startAnimation(animationOptions);\n }\n else {\n /**\n * If the layout hasn't changed and we have an animation that hasn't started yet,\n * finish it immediately. Otherwise it will be animating from a location\n * that was probably never commited to screen and look like a jumpy box.\n */\n if (!hasLayoutChanged) {\n finishAnimation(this);\n }\n if (this.isLead() && this.options.onExitComplete) {\n this.options.onExitComplete();\n }\n }\n this.targetLayout = newLayout;\n });\n }\n }\n unmount() {\n this.options.layoutId && this.willUpdate();\n this.root.nodes.remove(this);\n const stack = this.getStack();\n stack && stack.remove(this);\n this.parent && this.parent.children.delete(this);\n this.instance = undefined;\n cancelFrame(this.updateProjection);\n }\n // only on the root\n blockUpdate() {\n this.updateManuallyBlocked = true;\n }\n unblockUpdate() {\n this.updateManuallyBlocked = false;\n }\n isUpdateBlocked() {\n return this.updateManuallyBlocked || this.updateBlockedByResize;\n }\n isTreeAnimationBlocked() {\n return (this.isAnimationBlocked ||\n (this.parent && this.parent.isTreeAnimationBlocked()) ||\n false);\n }\n // Note: currently only running on root node\n startUpdate() {\n if (this.isUpdateBlocked())\n return;\n this.isUpdating = true;\n this.nodes && this.nodes.forEach(resetRotation);\n this.animationId++;\n }\n getTransformTemplate() {\n const { visualElement } = this.options;\n return visualElement && visualElement.getProps().transformTemplate;\n }\n willUpdate(shouldNotifyListeners = true) {\n this.root.hasTreeAnimated = true;\n if (this.root.isUpdateBlocked()) {\n this.options.onExitComplete && this.options.onExitComplete();\n return;\n }\n !this.root.isUpdating && this.root.startUpdate();\n if (this.isLayoutDirty)\n return;\n this.isLayoutDirty = true;\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n node.shouldResetTransform = true;\n node.updateScroll(\"snapshot\");\n if (node.options.layoutRoot) {\n node.willUpdate(false);\n }\n }\n const { layoutId, layout } = this.options;\n if (layoutId === undefined && !layout)\n return;\n const transformTemplate = this.getTransformTemplate();\n this.prevTransformTemplateValue = transformTemplate\n ? transformTemplate(this.latestValues, \"\")\n : undefined;\n this.updateSnapshot();\n shouldNotifyListeners && this.notifyListeners(\"willUpdate\");\n }\n update() {\n this.updateScheduled = false;\n const updateWasBlocked = this.isUpdateBlocked();\n // When doing an instant transition, we skip the layout update,\n // but should still clean up the measurements so that the next\n // snapshot could be taken correctly.\n if (updateWasBlocked) {\n this.unblockUpdate();\n this.clearAllSnapshots();\n this.nodes.forEach(clearMeasurements);\n return;\n }\n if (!this.isUpdating) {\n this.nodes.forEach(clearIsLayoutDirty);\n }\n this.isUpdating = false;\n /**\n * Write\n */\n this.nodes.forEach(resetTransformStyle);\n /**\n * Read ==================\n */\n // Update layout measurements of updated children\n this.nodes.forEach(updateLayout);\n /**\n * Write\n */\n // Notify listeners that the layout is updated\n this.nodes.forEach(notifyLayoutUpdate);\n this.clearAllSnapshots();\n /**\n * Manually flush any pending updates. Ideally\n * we could leave this to the following requestAnimationFrame but this seems\n * to leave a flash of incorrectly styled content.\n */\n const now = performance.now();\n frameData.delta = clamp(0, 1000 / 60, now - frameData.timestamp);\n frameData.timestamp = now;\n frameData.isProcessing = true;\n steps.update.process(frameData);\n steps.preRender.process(frameData);\n steps.render.process(frameData);\n frameData.isProcessing = false;\n }\n didUpdate() {\n if (!this.updateScheduled) {\n this.updateScheduled = true;\n queueMicrotask(() => this.update());\n }\n }\n clearAllSnapshots() {\n this.nodes.forEach(clearSnapshot);\n this.sharedNodes.forEach(removeLeadSnapshots);\n }\n scheduleUpdateProjection() {\n if (!this.projectionUpdateScheduled) {\n this.projectionUpdateScheduled = true;\n frame.preRender(this.updateProjection, false, true);\n }\n }\n scheduleCheckAfterUnmount() {\n /**\n * If the unmounting node is in a layoutGroup and did trigger a willUpdate,\n * we manually call didUpdate to give a chance to the siblings to animate.\n * Otherwise, cleanup all snapshots to prevents future nodes from reusing them.\n */\n frame.postRender(() => {\n if (this.isLayoutDirty) {\n this.root.didUpdate();\n }\n else {\n this.root.checkUpdateFailed();\n }\n });\n }\n /**\n * Update measurements\n */\n updateSnapshot() {\n if (this.snapshot || !this.instance)\n return;\n this.snapshot = this.measure();\n }\n updateLayout() {\n if (!this.instance)\n return;\n // TODO: Incorporate into a forwarded scroll offset\n this.updateScroll();\n if (!(this.options.alwaysMeasureLayout && this.isLead()) &&\n !this.isLayoutDirty) {\n return;\n }\n /**\n * When a node is mounted, it simply resumes from the prevLead's\n * snapshot instead of taking a new one, but the ancestors scroll\n * might have updated while the prevLead is unmounted. We need to\n * update the scroll again to make sure the layout we measure is\n * up to date.\n */\n if (this.resumeFrom && !this.resumeFrom.instance) {\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n node.updateScroll();\n }\n }\n const prevLayout = this.layout;\n this.layout = this.measure(false);\n this.layoutCorrected = createBox();\n this.isLayoutDirty = false;\n this.projectionDelta = undefined;\n this.notifyListeners(\"measure\", this.layout.layoutBox);\n const { visualElement } = this.options;\n visualElement &&\n visualElement.notify(\"LayoutMeasure\", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : undefined);\n }\n updateScroll(phase = \"measure\") {\n let needsMeasurement = Boolean(this.options.layoutScroll && this.instance);\n if (this.scroll &&\n this.scroll.animationId === this.root.animationId &&\n this.scroll.phase === phase) {\n needsMeasurement = false;\n }\n if (needsMeasurement) {\n this.scroll = {\n animationId: this.root.animationId,\n phase,\n isRoot: checkIsScrollRoot(this.instance),\n offset: measureScroll(this.instance),\n };\n }\n }\n resetTransform() {\n if (!resetTransform)\n return;\n const isResetRequested = this.isLayoutDirty || this.shouldResetTransform;\n const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);\n const transformTemplate = this.getTransformTemplate();\n const transformTemplateValue = transformTemplate\n ? transformTemplate(this.latestValues, \"\")\n : undefined;\n const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;\n if (isResetRequested &&\n (hasProjection ||\n hasTransform(this.latestValues) ||\n transformTemplateHasChanged)) {\n resetTransform(this.instance, transformTemplateValue);\n this.shouldResetTransform = false;\n this.scheduleRender();\n }\n }\n measure(removeTransform = true) {\n const pageBox = this.measurePageBox();\n let layoutBox = this.removeElementScroll(pageBox);\n /**\n * Measurements taken during the pre-render stage\n * still have transforms applied so we remove them\n * via calculation.\n */\n if (removeTransform) {\n layoutBox = this.removeTransform(layoutBox);\n }\n roundBox(layoutBox);\n return {\n animationId: this.root.animationId,\n measuredBox: pageBox,\n layoutBox,\n latestValues: {},\n source: this.id,\n };\n }\n measurePageBox() {\n const { visualElement } = this.options;\n if (!visualElement)\n return createBox();\n const box = visualElement.measureViewportBox();\n // Remove viewport scroll to give page-relative coordinates\n const { scroll } = this.root;\n if (scroll) {\n translateAxis(box.x, scroll.offset.x);\n translateAxis(box.y, scroll.offset.y);\n }\n return box;\n }\n removeElementScroll(box) {\n const boxWithoutScroll = createBox();\n copyBoxInto(boxWithoutScroll, box);\n /**\n * Performance TODO: Keep a cumulative scroll offset down the tree\n * rather than loop back up the path.\n */\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n const { scroll, options } = node;\n if (node !== this.root && scroll && options.layoutScroll) {\n /**\n * If this is a new scroll root, we want to remove all previous scrolls\n * from the viewport box.\n */\n if (scroll.isRoot) {\n copyBoxInto(boxWithoutScroll, box);\n const { scroll: rootScroll } = this.root;\n /**\n * Undo the application of page scroll that was originally added\n * to the measured bounding box.\n */\n if (rootScroll) {\n translateAxis(boxWithoutScroll.x, -rootScroll.offset.x);\n translateAxis(boxWithoutScroll.y, -rootScroll.offset.y);\n }\n }\n translateAxis(boxWithoutScroll.x, scroll.offset.x);\n translateAxis(boxWithoutScroll.y, scroll.offset.y);\n }\n }\n return boxWithoutScroll;\n }\n applyTransform(box, transformOnly = false) {\n const withTransforms = createBox();\n copyBoxInto(withTransforms, box);\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n if (!transformOnly &&\n node.options.layoutScroll &&\n node.scroll &&\n node !== node.root) {\n transformBox(withTransforms, {\n x: -node.scroll.offset.x,\n y: -node.scroll.offset.y,\n });\n }\n if (!hasTransform(node.latestValues))\n continue;\n transformBox(withTransforms, node.latestValues);\n }\n if (hasTransform(this.latestValues)) {\n transformBox(withTransforms, this.latestValues);\n }\n return withTransforms;\n }\n removeTransform(box) {\n const boxWithoutTransform = createBox();\n copyBoxInto(boxWithoutTransform, box);\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n if (!node.instance)\n continue;\n if (!hasTransform(node.latestValues))\n continue;\n hasScale(node.latestValues) && node.updateSnapshot();\n const sourceBox = createBox();\n const nodeBox = node.measurePageBox();\n copyBoxInto(sourceBox, nodeBox);\n removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : undefined, sourceBox);\n }\n if (hasTransform(this.latestValues)) {\n removeBoxTransforms(boxWithoutTransform, this.latestValues);\n }\n return boxWithoutTransform;\n }\n setTargetDelta(delta) {\n this.targetDelta = delta;\n this.root.scheduleUpdateProjection();\n this.isProjectionDirty = true;\n }\n setOptions(options) {\n this.options = {\n ...this.options,\n ...options,\n crossfade: options.crossfade !== undefined ? options.crossfade : true,\n };\n }\n clearMeasurements() {\n this.scroll = undefined;\n this.layout = undefined;\n this.snapshot = undefined;\n this.prevTransformTemplateValue = undefined;\n this.targetDelta = undefined;\n this.target = undefined;\n this.isLayoutDirty = false;\n }\n forceRelativeParentToResolveTarget() {\n if (!this.relativeParent)\n return;\n /**\n * If the parent target isn't up-to-date, force it to update.\n * This is an unfortunate de-optimisation as it means any updating relative\n * projection will cause all the relative parents to recalculate back\n * up the tree.\n */\n if (this.relativeParent.resolvedRelativeTargetAt !==\n frameData.timestamp) {\n this.relativeParent.resolveTargetDelta(true);\n }\n }\n resolveTargetDelta(forceRecalculation = false) {\n var _a;\n /**\n * Once the dirty status of nodes has been spread through the tree, we also\n * need to check if we have a shared node of a different depth that has itself\n * been dirtied.\n */\n const lead = this.getLead();\n this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty);\n this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty);\n this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);\n const isShared = Boolean(this.resumingFrom) || this !== lead;\n /**\n * We don't use transform for this step of processing so we don't\n * need to check whether any nodes have changed transform.\n */\n const canSkip = !(forceRecalculation ||\n (isShared && this.isSharedProjectionDirty) ||\n this.isProjectionDirty ||\n ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||\n this.attemptToResolveRelativeTarget);\n if (canSkip)\n return;\n const { layout, layoutId } = this.options;\n /**\n * If we have no layout, we can't perform projection, so early return\n */\n if (!this.layout || !(layout || layoutId))\n return;\n this.resolvedRelativeTargetAt = frameData.timestamp;\n /**\n * If we don't have a targetDelta but do have a layout, we can attempt to resolve\n * a relativeParent. This will allow a component to perform scale correction\n * even if no animation has started.\n */\n // TODO If this is unsuccessful this currently happens every frame\n if (!this.targetDelta && !this.relativeTarget) {\n // TODO: This is a semi-repetition of further down this function, make DRY\n const relativeParent = this.getClosestProjectingParent();\n if (relativeParent &&\n relativeParent.layout &&\n this.animationProgress !== 1) {\n this.relativeParent = relativeParent;\n this.forceRelativeParentToResolveTarget();\n this.relativeTarget = createBox();\n this.relativeTargetOrigin = createBox();\n calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);\n copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);\n }\n else {\n this.relativeParent = this.relativeTarget = undefined;\n }\n }\n /**\n * If we have no relative target or no target delta our target isn't valid\n * for this frame.\n */\n if (!this.relativeTarget && !this.targetDelta)\n return;\n /**\n * Lazy-init target data structure\n */\n if (!this.target) {\n this.target = createBox();\n this.targetWithTransforms = createBox();\n }\n /**\n * If we've got a relative box for this component, resolve it into a target relative to the parent.\n */\n if (this.relativeTarget &&\n this.relativeTargetOrigin &&\n this.relativeParent &&\n this.relativeParent.target) {\n this.forceRelativeParentToResolveTarget();\n calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);\n /**\n * If we've only got a targetDelta, resolve it into a target\n */\n }\n else if (this.targetDelta) {\n if (Boolean(this.resumingFrom)) {\n // TODO: This is creating a new object every frame\n this.target = this.applyTransform(this.layout.layoutBox);\n }\n else {\n copyBoxInto(this.target, this.layout.layoutBox);\n }\n applyBoxDelta(this.target, this.targetDelta);\n }\n else {\n /**\n * If no target, use own layout as target\n */\n copyBoxInto(this.target, this.layout.layoutBox);\n }\n /**\n * If we've been told to attempt to resolve a relative target, do so.\n */\n if (this.attemptToResolveRelativeTarget) {\n this.attemptToResolveRelativeTarget = false;\n const relativeParent = this.getClosestProjectingParent();\n if (relativeParent &&\n Boolean(relativeParent.resumingFrom) ===\n Boolean(this.resumingFrom) &&\n !relativeParent.options.layoutScroll &&\n relativeParent.target &&\n this.animationProgress !== 1) {\n this.relativeParent = relativeParent;\n this.forceRelativeParentToResolveTarget();\n this.relativeTarget = createBox();\n this.relativeTargetOrigin = createBox();\n calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);\n copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);\n }\n else {\n this.relativeParent = this.relativeTarget = undefined;\n }\n }\n /**\n * Increase debug counter for resolved target deltas\n */\n projectionFrameData.resolvedTargetDeltas++;\n }\n getClosestProjectingParent() {\n if (!this.parent ||\n hasScale(this.parent.latestValues) ||\n has2DTranslate(this.parent.latestValues)) {\n return undefined;\n }\n if (this.parent.isProjecting()) {\n return this.parent;\n }\n else {\n return this.parent.getClosestProjectingParent();\n }\n }\n isProjecting() {\n return Boolean((this.relativeTarget ||\n this.targetDelta ||\n this.options.layoutRoot) &&\n this.layout);\n }\n calcProjection() {\n var _a;\n const lead = this.getLead();\n const isShared = Boolean(this.resumingFrom) || this !== lead;\n let canSkip = true;\n /**\n * If this is a normal layout animation and neither this node nor its nearest projecting\n * is dirty then we can't skip.\n */\n if (this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty)) {\n canSkip = false;\n }\n /**\n * If this is a shared layout animation and this node's shared projection is dirty then\n * we can't skip.\n */\n if (isShared &&\n (this.isSharedProjectionDirty || this.isTransformDirty)) {\n canSkip = false;\n }\n /**\n * If we have resolved the target this frame we must recalculate the\n * projection to ensure it visually represents the internal calculations.\n */\n if (this.resolvedRelativeTargetAt === frameData.timestamp) {\n canSkip = false;\n }\n if (canSkip)\n return;\n const { layout, layoutId } = this.options;\n /**\n * If this section of the tree isn't animating we can\n * delete our target sources for the following frame.\n */\n this.isTreeAnimating = Boolean((this.parent && this.parent.isTreeAnimating) ||\n this.currentAnimation ||\n this.pendingAnimation);\n if (!this.isTreeAnimating) {\n this.targetDelta = this.relativeTarget = undefined;\n }\n if (!this.layout || !(layout || layoutId))\n return;\n /**\n * Reset the corrected box with the latest values from box, as we're then going\n * to perform mutative operations on it.\n */\n copyBoxInto(this.layoutCorrected, this.layout.layoutBox);\n /**\n * Record previous tree scales before updating.\n */\n const prevTreeScaleX = this.treeScale.x;\n const prevTreeScaleY = this.treeScale.y;\n /**\n * Apply all the parent deltas to this box to produce the corrected box. This\n * is the layout box, as it will appear on screen as a result of the transforms of its parents.\n */\n applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared);\n /**\n * If this layer needs to perform scale correction but doesn't have a target,\n * use the layout as the target.\n */\n if (lead.layout &&\n !lead.target &&\n (this.treeScale.x !== 1 || this.treeScale.y !== 1)) {\n lead.target = lead.layout.layoutBox;\n }\n const { target } = lead;\n if (!target) {\n /**\n * If we don't have a target to project into, but we were previously\n * projecting, we want to remove the stored transform and schedule\n * a render to ensure the elements reflect the removed transform.\n */\n if (this.projectionTransform) {\n this.projectionDelta = createDelta();\n this.projectionTransform = \"none\";\n this.scheduleRender();\n }\n return;\n }\n if (!this.projectionDelta) {\n this.projectionDelta = createDelta();\n this.projectionDeltaWithTransform = createDelta();\n }\n const prevProjectionTransform = this.projectionTransform;\n /**\n * Update the delta between the corrected box and the target box before user-set transforms were applied.\n * This will allow us to calculate the corrected borderRadius and boxShadow to compensate\n * for our layout reprojection, but still allow them to be scaled correctly by the user.\n * It might be that to simplify this we may want to accept that user-set scale is also corrected\n * and we wouldn't have to keep and calc both deltas, OR we could support a user setting\n * to allow people to choose whether these styles are corrected based on just the\n * layout reprojection or the final bounding box.\n */\n calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues);\n this.projectionTransform = buildProjectionTransform(this.projectionDelta, this.treeScale);\n if (this.projectionTransform !== prevProjectionTransform ||\n this.treeScale.x !== prevTreeScaleX ||\n this.treeScale.y !== prevTreeScaleY) {\n this.hasProjected = true;\n this.scheduleRender();\n this.notifyListeners(\"projectionUpdate\", target);\n }\n /**\n * Increase debug counter for recalculated projections\n */\n projectionFrameData.recalculatedProjection++;\n }\n hide() {\n this.isVisible = false;\n // TODO: Schedule render\n }\n show() {\n this.isVisible = true;\n // TODO: Schedule render\n }\n scheduleRender(notifyAll = true) {\n this.options.scheduleRender && this.options.scheduleRender();\n if (notifyAll) {\n const stack = this.getStack();\n stack && stack.scheduleRender();\n }\n if (this.resumingFrom && !this.resumingFrom.instance) {\n this.resumingFrom = undefined;\n }\n }\n setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {\n const snapshot = this.snapshot;\n const snapshotLatestValues = snapshot\n ? snapshot.latestValues\n : {};\n const mixedValues = { ...this.latestValues };\n const targetDelta = createDelta();\n if (!this.relativeParent ||\n !this.relativeParent.options.layoutRoot) {\n this.relativeTarget = this.relativeTargetOrigin = undefined;\n }\n this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;\n const relativeLayout = createBox();\n const snapshotSource = snapshot ? snapshot.source : undefined;\n const layoutSource = this.layout ? this.layout.source : undefined;\n const isSharedLayoutAnimation = snapshotSource !== layoutSource;\n const stack = this.getStack();\n const isOnlyMember = !stack || stack.members.length <= 1;\n const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&\n !isOnlyMember &&\n this.options.crossfade === true &&\n !this.path.some(hasOpacityCrossfade));\n this.animationProgress = 0;\n let prevRelativeTarget;\n this.mixTargetDelta = (latest) => {\n const progress = latest / 1000;\n mixAxisDelta(targetDelta.x, delta.x, progress);\n mixAxisDelta(targetDelta.y, delta.y, progress);\n this.setTargetDelta(targetDelta);\n if (this.relativeTarget &&\n this.relativeTargetOrigin &&\n this.layout &&\n this.relativeParent &&\n this.relativeParent.layout) {\n calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);\n mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);\n /**\n * If this is an unchanged relative target we can consider the\n * projection not dirty.\n */\n if (prevRelativeTarget &&\n boxEquals(this.relativeTarget, prevRelativeTarget)) {\n this.isProjectionDirty = false;\n }\n if (!prevRelativeTarget)\n prevRelativeTarget = createBox();\n copyBoxInto(prevRelativeTarget, this.relativeTarget);\n }\n if (isSharedLayoutAnimation) {\n this.animationValues = mixedValues;\n mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember);\n }\n this.root.scheduleUpdateProjection();\n this.scheduleRender();\n this.animationProgress = progress;\n };\n this.mixTargetDelta(this.options.layoutRoot ? 1000 : 0);\n }\n startAnimation(options) {\n this.notifyListeners(\"animationStart\");\n this.currentAnimation && this.currentAnimation.stop();\n if (this.resumingFrom && this.resumingFrom.currentAnimation) {\n this.resumingFrom.currentAnimation.stop();\n }\n if (this.pendingAnimation) {\n cancelFrame(this.pendingAnimation);\n this.pendingAnimation = undefined;\n }\n /**\n * Start the animation in the next frame to have a frame with progress 0,\n * where the target is the same as when the animation started, so we can\n * calculate the relative positions correctly for instant transitions.\n */\n this.pendingAnimation = frame.update(() => {\n globalProjectionState.hasAnimatedSinceResize = true;\n this.currentAnimation = animateSingleValue(0, animationTarget, {\n ...options,\n onUpdate: (latest) => {\n this.mixTargetDelta(latest);\n options.onUpdate && options.onUpdate(latest);\n },\n onComplete: () => {\n options.onComplete && options.onComplete();\n this.completeAnimation();\n },\n });\n if (this.resumingFrom) {\n this.resumingFrom.currentAnimation = this.currentAnimation;\n }\n this.pendingAnimation = undefined;\n });\n }\n completeAnimation() {\n if (this.resumingFrom) {\n this.resumingFrom.currentAnimation = undefined;\n this.resumingFrom.preserveOpacity = undefined;\n }\n const stack = this.getStack();\n stack && stack.exitAnimationComplete();\n this.resumingFrom =\n this.currentAnimation =\n this.animationValues =\n undefined;\n this.notifyListeners(\"animationComplete\");\n }\n finishAnimation() {\n if (this.currentAnimation) {\n this.mixTargetDelta && this.mixTargetDelta(animationTarget);\n this.currentAnimation.stop();\n }\n this.completeAnimation();\n }\n applyTransformsToTarget() {\n const lead = this.getLead();\n let { targetWithTransforms, target, layout, latestValues } = lead;\n if (!targetWithTransforms || !target || !layout)\n return;\n /**\n * If we're only animating position, and this element isn't the lead element,\n * then instead of projecting into the lead box we instead want to calculate\n * a new target that aligns the two boxes but maintains the layout shape.\n */\n if (this !== lead &&\n this.layout &&\n layout &&\n shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) {\n target = this.target || createBox();\n const xLength = calcLength(this.layout.layoutBox.x);\n target.x.min = lead.target.x.min;\n target.x.max = target.x.min + xLength;\n const yLength = calcLength(this.layout.layoutBox.y);\n target.y.min = lead.target.y.min;\n target.y.max = target.y.min + yLength;\n }\n copyBoxInto(targetWithTransforms, target);\n /**\n * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.\n * This is the final box that we will then project into by calculating a transform delta and\n * applying it to the corrected box.\n */\n transformBox(targetWithTransforms, latestValues);\n /**\n * Update the delta between the corrected box and the final target box, after\n * user-set transforms are applied to it. This will be used by the renderer to\n * create a transform style that will reproject the element from its layout layout\n * into the desired bounding box.\n */\n calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);\n }\n registerSharedNode(layoutId, node) {\n if (!this.sharedNodes.has(layoutId)) {\n this.sharedNodes.set(layoutId, new NodeStack());\n }\n const stack = this.sharedNodes.get(layoutId);\n stack.add(node);\n const config = node.options.initialPromotionConfig;\n node.promote({\n transition: config ? config.transition : undefined,\n preserveFollowOpacity: config && config.shouldPreserveFollowOpacity\n ? config.shouldPreserveFollowOpacity(node)\n : undefined,\n });\n }\n isLead() {\n const stack = this.getStack();\n return stack ? stack.lead === this : true;\n }\n getLead() {\n var _a;\n const { layoutId } = this.options;\n return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;\n }\n getPrevLead() {\n var _a;\n const { layoutId } = this.options;\n return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined;\n }\n getStack() {\n const { layoutId } = this.options;\n if (layoutId)\n return this.root.sharedNodes.get(layoutId);\n }\n promote({ needsReset, transition, preserveFollowOpacity, } = {}) {\n const stack = this.getStack();\n if (stack)\n stack.promote(this, preserveFollowOpacity);\n if (needsReset) {\n this.projectionDelta = undefined;\n this.needsReset = true;\n }\n if (transition)\n this.setOptions({ transition });\n }\n relegate() {\n const stack = this.getStack();\n if (stack) {\n return stack.relegate(this);\n }\n else {\n return false;\n }\n }\n resetRotation() {\n const { visualElement } = this.options;\n if (!visualElement)\n return;\n // If there's no detected rotation values, we can early return without a forced render.\n let hasRotate = false;\n /**\n * An unrolled check for rotation values. Most elements don't have any rotation and\n * skipping the nested loop and new object creation is 50% faster.\n */\n const { latestValues } = visualElement;\n if (latestValues.rotate ||\n latestValues.rotateX ||\n latestValues.rotateY ||\n latestValues.rotateZ) {\n hasRotate = true;\n }\n // If there's no rotation values, we don't need to do any more.\n if (!hasRotate)\n return;\n const resetValues = {};\n // Check the rotate value of all axes and reset to 0\n for (let i = 0; i < transformAxes.length; i++) {\n const key = \"rotate\" + transformAxes[i];\n // Record the rotation and then temporarily set it to 0\n if (latestValues[key]) {\n resetValues[key] = latestValues[key];\n visualElement.setStaticValue(key, 0);\n }\n }\n // Force a render of this element to apply the transform with all rotations\n // set to 0.\n visualElement.render();\n // Put back all the values we reset\n for (const key in resetValues) {\n visualElement.setStaticValue(key, resetValues[key]);\n }\n // Schedule a render for the next frame. This ensures we won't visually\n // see the element with the reset rotate value applied.\n visualElement.scheduleRender();\n }\n getProjectionStyles(styleProp) {\n var _a, _b;\n if (!this.instance || this.isSVG)\n return undefined;\n if (!this.isVisible) {\n return hiddenVisibility;\n }\n const styles = {\n visibility: \"\",\n };\n const transformTemplate = this.getTransformTemplate();\n if (this.needsReset) {\n this.needsReset = false;\n styles.opacity = \"\";\n styles.pointerEvents =\n resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || \"\";\n styles.transform = transformTemplate\n ? transformTemplate(this.latestValues, \"\")\n : \"none\";\n return styles;\n }\n const lead = this.getLead();\n if (!this.projectionDelta || !this.layout || !lead.target) {\n const emptyStyles = {};\n if (this.options.layoutId) {\n emptyStyles.opacity =\n this.latestValues.opacity !== undefined\n ? this.latestValues.opacity\n : 1;\n emptyStyles.pointerEvents =\n resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || \"\";\n }\n if (this.hasProjected && !hasTransform(this.latestValues)) {\n emptyStyles.transform = transformTemplate\n ? transformTemplate({}, \"\")\n : \"none\";\n this.hasProjected = false;\n }\n return emptyStyles;\n }\n const valuesToRender = lead.animationValues || lead.latestValues;\n this.applyTransformsToTarget();\n styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);\n if (transformTemplate) {\n styles.transform = transformTemplate(valuesToRender, styles.transform);\n }\n const { x, y } = this.projectionDelta;\n styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;\n if (lead.animationValues) {\n /**\n * If the lead component is animating, assign this either the entering/leaving\n * opacity\n */\n styles.opacity =\n lead === this\n ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1\n : this.preserveOpacity\n ? this.latestValues.opacity\n : valuesToRender.opacityExit;\n }\n else {\n /**\n * Or we're not animating at all, set the lead component to its layout\n * opacity and other components to hidden.\n */\n styles.opacity =\n lead === this\n ? valuesToRender.opacity !== undefined\n ? valuesToRender.opacity\n : \"\"\n : valuesToRender.opacityExit !== undefined\n ? valuesToRender.opacityExit\n : 0;\n }\n /**\n * Apply scale correction\n */\n for (const key in scaleCorrectors) {\n if (valuesToRender[key] === undefined)\n continue;\n const { correct, applyTo } = scaleCorrectors[key];\n /**\n * Only apply scale correction to the value if we have an\n * active projection transform. Otherwise these values become\n * vulnerable to distortion if the element changes size without\n * a corresponding layout animation.\n */\n const corrected = styles.transform === \"none\"\n ? valuesToRender[key]\n : correct(valuesToRender[key], lead);\n if (applyTo) {\n const num = applyTo.length;\n for (let i = 0; i < num; i++) {\n styles[applyTo[i]] = corrected;\n }\n }\n else {\n styles[key] = corrected;\n }\n }\n /**\n * Disable pointer events on follow components. This is to ensure\n * that if a follow component covers a lead component it doesn't block\n * pointer events on the lead.\n */\n if (this.options.layoutId) {\n styles.pointerEvents =\n lead === this\n ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || \"\"\n : \"none\";\n }\n return styles;\n }\n clearSnapshot() {\n this.resumeFrom = this.snapshot = undefined;\n }\n // Only run on root\n resetTree() {\n this.root.nodes.forEach((node) => { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); });\n this.root.nodes.forEach(clearMeasurements);\n this.root.sharedNodes.clear();\n }\n };\n}\nfunction updateLayout(node) {\n node.updateLayout();\n}\nfunction notifyLayoutUpdate(node) {\n var _a;\n const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;\n if (node.isLead() &&\n node.layout &&\n snapshot &&\n node.hasListeners(\"didUpdate\")) {\n const { layoutBox: layout, measuredBox: measuredLayout } = node.layout;\n const { animationType } = node.options;\n const isShared = snapshot.source !== node.layout.source;\n // TODO Maybe we want to also resize the layout snapshot so we don't trigger\n // animations for instance if layout=\"size\" and an element has only changed position\n if (animationType === \"size\") {\n eachAxis((axis) => {\n const axisSnapshot = isShared\n ? snapshot.measuredBox[axis]\n : snapshot.layoutBox[axis];\n const length = calcLength(axisSnapshot);\n axisSnapshot.min = layout[axis].min;\n axisSnapshot.max = axisSnapshot.min + length;\n });\n }\n else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {\n eachAxis((axis) => {\n const axisSnapshot = isShared\n ? snapshot.measuredBox[axis]\n : snapshot.layoutBox[axis];\n const length = calcLength(layout[axis]);\n axisSnapshot.max = axisSnapshot.min + length;\n /**\n * Ensure relative target gets resized and rerendererd\n */\n if (node.relativeTarget && !node.currentAnimation) {\n node.isProjectionDirty = true;\n node.relativeTarget[axis].max =\n node.relativeTarget[axis].min + length;\n }\n });\n }\n const layoutDelta = createDelta();\n calcBoxDelta(layoutDelta, layout, snapshot.layoutBox);\n const visualDelta = createDelta();\n if (isShared) {\n calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);\n }\n else {\n calcBoxDelta(visualDelta, layout, snapshot.layoutBox);\n }\n const hasLayoutChanged = !isDeltaZero(layoutDelta);\n let hasRelativeTargetChanged = false;\n if (!node.resumeFrom) {\n const relativeParent = node.getClosestProjectingParent();\n /**\n * If the relativeParent is itself resuming from a different element then\n * the relative snapshot is not relavent\n */\n if (relativeParent && !relativeParent.resumeFrom) {\n const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;\n if (parentSnapshot && parentLayout) {\n const relativeSnapshot = createBox();\n calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);\n const relativeLayout = createBox();\n calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);\n if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {\n hasRelativeTargetChanged = true;\n }\n if (relativeParent.options.layoutRoot) {\n node.relativeTarget = relativeLayout;\n node.relativeTargetOrigin = relativeSnapshot;\n node.relativeParent = relativeParent;\n }\n }\n }\n }\n node.notifyListeners(\"didUpdate\", {\n layout,\n snapshot,\n delta: visualDelta,\n layoutDelta,\n hasLayoutChanged,\n hasRelativeTargetChanged,\n });\n }\n else if (node.isLead()) {\n const { onExitComplete } = node.options;\n onExitComplete && onExitComplete();\n }\n /**\n * Clearing transition\n * TODO: Investigate why this transition is being passed in as {type: false } from Framer\n * and why we need it at all\n */\n node.options.transition = undefined;\n}\nfunction propagateDirtyNodes(node) {\n /**\n * Increase debug counter for nodes encountered this frame\n */\n projectionFrameData.totalNodes++;\n if (!node.parent)\n return;\n /**\n * If this node isn't projecting, propagate isProjectionDirty. It will have\n * no performance impact but it will allow the next child that *is* projecting\n * but *isn't* dirty to just check its parent to see if *any* ancestor needs\n * correcting.\n */\n if (!node.isProjecting()) {\n node.isProjectionDirty = node.parent.isProjectionDirty;\n }\n /**\n * Propagate isSharedProjectionDirty and isTransformDirty\n * throughout the whole tree. A future revision can take another look at\n * this but for safety we still recalcualte shared nodes.\n */\n node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty ||\n node.parent.isProjectionDirty ||\n node.parent.isSharedProjectionDirty));\n node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty);\n}\nfunction cleanDirtyNodes(node) {\n node.isProjectionDirty =\n node.isSharedProjectionDirty =\n node.isTransformDirty =\n false;\n}\nfunction clearSnapshot(node) {\n node.clearSnapshot();\n}\nfunction clearMeasurements(node) {\n node.clearMeasurements();\n}\nfunction clearIsLayoutDirty(node) {\n node.isLayoutDirty = false;\n}\nfunction resetTransformStyle(node) {\n const { visualElement } = node.options;\n if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {\n visualElement.notify(\"BeforeLayoutMeasure\");\n }\n node.resetTransform();\n}\nfunction finishAnimation(node) {\n node.finishAnimation();\n node.targetDelta = node.relativeTarget = node.target = undefined;\n node.isProjectionDirty = true;\n}\nfunction resolveTargetDelta(node) {\n node.resolveTargetDelta();\n}\nfunction calcProjection(node) {\n node.calcProjection();\n}\nfunction resetRotation(node) {\n node.resetRotation();\n}\nfunction removeLeadSnapshots(stack) {\n stack.removeLeadSnapshot();\n}\nfunction mixAxisDelta(output, delta, p) {\n output.translate = mix(delta.translate, 0, p);\n output.scale = mix(delta.scale, 1, p);\n output.origin = delta.origin;\n output.originPoint = delta.originPoint;\n}\nfunction mixAxis(output, from, to, p) {\n output.min = mix(from.min, to.min, p);\n output.max = mix(from.max, to.max, p);\n}\nfunction mixBox(output, from, to, p) {\n mixAxis(output.x, from.x, to.x, p);\n mixAxis(output.y, from.y, to.y, p);\n}\nfunction hasOpacityCrossfade(node) {\n return (node.animationValues && node.animationValues.opacityExit !== undefined);\n}\nconst defaultLayoutTransition = {\n duration: 0.45,\n ease: [0.4, 0, 0.1, 1],\n};\nconst userAgentContains = (string) => typeof navigator !== \"undefined\" &&\n navigator.userAgent.toLowerCase().includes(string);\n/**\n * Measured bounding boxes must be rounded in Safari and\n * left untouched in Chrome, otherwise non-integer layouts within scaled-up elements\n * can appear to jump.\n */\nconst roundPoint = userAgentContains(\"applewebkit/\") && !userAgentContains(\"chrome/\")\n ? Math.round\n : noop;\nfunction roundAxis(axis) {\n // Round to the nearest .5 pixels to support subpixel layouts\n axis.min = roundPoint(axis.min);\n axis.max = roundPoint(axis.max);\n}\nfunction roundBox(box) {\n roundAxis(box.x);\n roundAxis(box.y);\n}\nfunction shouldAnimatePositionOnly(animationType, snapshot, layout) {\n return (animationType === \"position\" ||\n (animationType === \"preserve-aspect\" &&\n !isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2)));\n}\n\nexport { cleanDirtyNodes, createProjectionNode, mixAxis, mixAxisDelta, mixBox, propagateDirtyNodes };\n","function record(data) {\n if (window.MotionDebug) {\n window.MotionDebug.record(data);\n }\n}\n\nexport { record };\n","function isSVGElement(element) {\n return element instanceof SVGElement && element.tagName !== \"svg\";\n}\n\nexport { isSVGElement };\n","import { frame, cancelFrame } from '../frameloop/frame.mjs';\n\n/**\n * Timeout defined in ms\n */\nfunction delay(callback, timeout) {\n const start = performance.now();\n const checkElapsed = ({ timestamp }) => {\n const elapsed = timestamp - start;\n if (elapsed >= timeout) {\n cancelFrame(checkElapsed);\n callback(elapsed - timeout);\n }\n };\n frame.read(checkElapsed, true);\n return () => cancelFrame(checkElapsed);\n}\n\nexport { delay };\n","import { animateMotionValue } from './motion-value.mjs';\nimport { motionValue } from '../../value/index.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction animateSingleValue(value, keyframes, options) {\n const motionValue$1 = isMotionValue(value) ? value : motionValue(value);\n motionValue$1.start(animateMotionValue(\"\", motionValue$1, keyframes, options));\n return motionValue$1.animation;\n}\n\nexport { animateSingleValue };\n","import { createProjectionNode } from './create-projection-node.mjs';\nimport { addDomEvent } from '../../events/add-dom-event.mjs';\n\nconst DocumentProjectionNode = createProjectionNode({\n attachResizeListener: (ref, notify) => addDomEvent(ref, \"resize\", notify),\n measureScroll: () => ({\n x: document.documentElement.scrollLeft || document.body.scrollLeft,\n y: document.documentElement.scrollTop || document.body.scrollTop,\n }),\n checkIsScrollRoot: () => true,\n});\n\nexport { DocumentProjectionNode };\n","import { createProjectionNode } from './create-projection-node.mjs';\nimport { DocumentProjectionNode } from './DocumentProjectionNode.mjs';\n\nconst rootProjectionNode = {\n current: undefined,\n};\nconst HTMLProjectionNode = createProjectionNode({\n measureScroll: (instance) => ({\n x: instance.scrollLeft,\n y: instance.scrollTop,\n }),\n defaultParent: () => {\n if (!rootProjectionNode.current) {\n const documentNode = new DocumentProjectionNode({});\n documentNode.mount(window);\n documentNode.setOptions({ layoutScroll: true });\n rootProjectionNode.current = documentNode;\n }\n return rootProjectionNode.current;\n },\n resetTransform: (instance, value) => {\n instance.style.transform = value !== undefined ? value : \"none\";\n },\n checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === \"fixed\"),\n});\n\nexport { HTMLProjectionNode, rootProjectionNode };\n","import { DragGesture } from '../../gestures/drag/index.mjs';\nimport { PanGesture } from '../../gestures/pan/index.mjs';\nimport { MeasureLayout } from './layout/MeasureLayout.mjs';\nimport { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';\n\nconst drag = {\n pan: {\n Feature: PanGesture,\n },\n drag: {\n Feature: DragGesture,\n ProjectionNode: HTMLProjectionNode,\n MeasureLayout,\n },\n};\n\nexport { drag };\n","import { Feature } from '../../motion/features/Feature.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { VisualElementDragControls } from './VisualElementDragControls.mjs';\n\nclass DragGesture extends Feature {\n constructor(node) {\n super(node);\n this.removeGroupControls = noop;\n this.removeListeners = noop;\n this.controls = new VisualElementDragControls(node);\n }\n mount() {\n // If we've been provided a DragControls for manual control over the drag gesture,\n // subscribe this component to it on mount.\n const { dragControls } = this.node.getProps();\n if (dragControls) {\n this.removeGroupControls = dragControls.subscribe(this.controls);\n }\n this.removeListeners = this.controls.addListeners() || noop;\n }\n unmount() {\n this.removeGroupControls();\n this.removeListeners();\n }\n}\n\nexport { DragGesture };\n","import { invariant } from '../../../utils/errors.mjs';\nimport { isNumericalString } from '../../../utils/is-numerical-string.mjs';\nimport { isCSSVariableToken } from './is-css-variable.mjs';\n\n/**\n * Parse Framer's special CSS variable format into a CSS token and a fallback.\n *\n * ```\n * `var(--foo, #fff)` => [`--foo`, '#fff']\n * ```\n *\n * @param current\n */\nconst splitCSSVariableRegex = /var\\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\\)/;\nfunction parseCSSVariable(current) {\n const match = splitCSSVariableRegex.exec(current);\n if (!match)\n return [,];\n const [, token, fallback] = match;\n return [token, fallback];\n}\nconst maxDepth = 4;\nfunction getVariableValue(current, element, depth = 1) {\n invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property \"${current}\". This may indicate a circular fallback dependency.`);\n const [token, fallback] = parseCSSVariable(current);\n // No CSS variable detected\n if (!token)\n return;\n // Attempt to read this CSS variable off the element\n const resolved = window.getComputedStyle(element).getPropertyValue(token);\n if (resolved) {\n const trimmed = resolved.trim();\n return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;\n }\n else if (isCSSVariableToken(fallback)) {\n // The fallback might itself be a CSS variable, in which case we attempt to resolve it too.\n return getVariableValue(fallback, element, depth + 1);\n }\n else {\n return fallback;\n }\n}\n/**\n * Resolve CSS variables from\n *\n * @internal\n */\nfunction resolveCSSVariables(visualElement, { ...target }, transitionEnd) {\n const element = visualElement.current;\n if (!(element instanceof Element))\n return { target, transitionEnd };\n // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`\n // only if they change but I think this reads clearer and this isn't a performance-critical path.\n if (transitionEnd) {\n transitionEnd = { ...transitionEnd };\n }\n // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved\n visualElement.values.forEach((value) => {\n const current = value.get();\n if (!isCSSVariableToken(current))\n return;\n const resolved = getVariableValue(current, element);\n if (resolved)\n value.set(resolved);\n });\n // Cycle through every target property and resolve CSS variables. Currently\n // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`\n for (const key in target) {\n const current = target[key];\n if (!isCSSVariableToken(current))\n continue;\n const resolved = getVariableValue(current, element);\n if (!resolved)\n continue;\n // Clone target if it hasn't already been\n target[key] = resolved;\n if (!transitionEnd)\n transitionEnd = {};\n // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved\n // CSS variable. This will ensure that after the animation the component will reflect\n // changes in the value of the CSS variable.\n if (transitionEnd[key] === undefined) {\n transitionEnd[key] = current;\n }\n }\n return { target, transitionEnd };\n}\n\nexport { parseCSSVariable, resolveCSSVariables };\n","import { isKeyframesTarget } from '../../../animation/utils/is-keyframes-target.mjs';\nimport { invariant } from '../../../utils/errors.mjs';\nimport { transformPropOrder } from '../../html/utils/transform.mjs';\nimport { findDimensionValueType } from '../value-types/dimensions.mjs';\nimport { isBrowser } from '../../../utils/is-browser.mjs';\nimport { number } from '../../../value/types/numbers/index.mjs';\nimport { px } from '../../../value/types/numbers/units.mjs';\n\nconst positionalKeys = new Set([\n \"width\",\n \"height\",\n \"top\",\n \"left\",\n \"right\",\n \"bottom\",\n \"x\",\n \"y\",\n \"translateX\",\n \"translateY\",\n]);\nconst isPositionalKey = (key) => positionalKeys.has(key);\nconst hasPositionalKey = (target) => {\n return Object.keys(target).some(isPositionalKey);\n};\nconst isNumOrPxType = (v) => v === number || v === px;\nconst getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(\", \")[pos]);\nconst getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {\n if (transform === \"none\" || !transform)\n return 0;\n const matrix3d = transform.match(/^matrix3d\\((.+)\\)$/);\n if (matrix3d) {\n return getPosFromMatrix(matrix3d[1], pos3);\n }\n else {\n const matrix = transform.match(/^matrix\\((.+)\\)$/);\n if (matrix) {\n return getPosFromMatrix(matrix[1], pos2);\n }\n else {\n return 0;\n }\n }\n};\nconst transformKeys = new Set([\"x\", \"y\", \"z\"]);\nconst nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));\nfunction removeNonTranslationalTransform(visualElement) {\n const removedTransforms = [];\n nonTranslationalTransformKeys.forEach((key) => {\n const value = visualElement.getValue(key);\n if (value !== undefined) {\n removedTransforms.push([key, value.get()]);\n value.set(key.startsWith(\"scale\") ? 1 : 0);\n }\n });\n // Apply changes to element before measurement\n if (removedTransforms.length)\n visualElement.render();\n return removedTransforms;\n}\nconst positionalValues = {\n // Dimensions\n width: ({ x }, { paddingLeft = \"0\", paddingRight = \"0\" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),\n height: ({ y }, { paddingTop = \"0\", paddingBottom = \"0\" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),\n top: (_bbox, { top }) => parseFloat(top),\n left: (_bbox, { left }) => parseFloat(left),\n bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),\n right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),\n // Transform\n x: getTranslateFromMatrix(4, 13),\n y: getTranslateFromMatrix(5, 14),\n};\n// Alias translate longform names\npositionalValues.translateX = positionalValues.x;\npositionalValues.translateY = positionalValues.y;\nconst convertChangedValueTypes = (target, visualElement, changedKeys) => {\n const originBbox = visualElement.measureViewportBox();\n const element = visualElement.current;\n const elementComputedStyle = getComputedStyle(element);\n const { display } = elementComputedStyle;\n const origin = {};\n // If the element is currently set to display: \"none\", make it visible before\n // measuring the target bounding box\n if (display === \"none\") {\n visualElement.setStaticValue(\"display\", target.display || \"block\");\n }\n /**\n * Record origins before we render and update styles\n */\n changedKeys.forEach((key) => {\n origin[key] = positionalValues[key](originBbox, elementComputedStyle);\n });\n // Apply the latest values (as set in checkAndConvertChangedValueTypes)\n visualElement.render();\n const targetBbox = visualElement.measureViewportBox();\n changedKeys.forEach((key) => {\n // Restore styles to their **calculated computed style**, not their actual\n // originally set style. This allows us to animate between equivalent pixel units.\n const value = visualElement.getValue(key);\n value && value.jump(origin[key]);\n target[key] = positionalValues[key](targetBbox, elementComputedStyle);\n });\n return target;\n};\nconst checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, transitionEnd = {}) => {\n target = { ...target };\n transitionEnd = { ...transitionEnd };\n const targetPositionalKeys = Object.keys(target).filter(isPositionalKey);\n // We want to remove any transform values that could affect the element's bounding box before\n // it's measured. We'll reapply these later.\n let removedTransformValues = [];\n let hasAttemptedToRemoveTransformValues = false;\n const changedValueTypeKeys = [];\n targetPositionalKeys.forEach((key) => {\n const value = visualElement.getValue(key);\n if (!visualElement.hasValue(key))\n return;\n let from = origin[key];\n let fromType = findDimensionValueType(from);\n const to = target[key];\n let toType;\n // TODO: The current implementation of this basically throws an error\n // if you try and do value conversion via keyframes. There's probably\n // a way of doing this but the performance implications would need greater scrutiny,\n // as it'd be doing multiple resize-remeasure operations.\n if (isKeyframesTarget(to)) {\n const numKeyframes = to.length;\n const fromIndex = to[0] === null ? 1 : 0;\n from = to[fromIndex];\n fromType = findDimensionValueType(from);\n for (let i = fromIndex; i < numKeyframes; i++) {\n /**\n * Don't allow wildcard keyframes to be used to detect\n * a difference in value types.\n */\n if (to[i] === null)\n break;\n if (!toType) {\n toType = findDimensionValueType(to[i]);\n invariant(toType === fromType ||\n (isNumOrPxType(fromType) && isNumOrPxType(toType)), \"Keyframes must be of the same dimension as the current value\");\n }\n else {\n invariant(findDimensionValueType(to[i]) === toType, \"All keyframes must be of the same type\");\n }\n }\n }\n else {\n toType = findDimensionValueType(to);\n }\n if (fromType !== toType) {\n // If they're both just number or px, convert them both to numbers rather than\n // relying on resize/remeasure to convert (which is wasteful in this situation)\n if (isNumOrPxType(fromType) && isNumOrPxType(toType)) {\n const current = value.get();\n if (typeof current === \"string\") {\n value.set(parseFloat(current));\n }\n if (typeof to === \"string\") {\n target[key] = parseFloat(to);\n }\n else if (Array.isArray(to) && toType === px) {\n target[key] = to.map(parseFloat);\n }\n }\n else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) &&\n (toType === null || toType === void 0 ? void 0 : toType.transform) &&\n (from === 0 || to === 0)) {\n // If one or the other value is 0, it's safe to coerce it to the\n // type of the other without measurement\n if (from === 0) {\n value.set(toType.transform(from));\n }\n else {\n target[key] = fromType.transform(to);\n }\n }\n else {\n // If we're going to do value conversion via DOM measurements, we first\n // need to remove non-positional transform values that could affect the bbox measurements.\n if (!hasAttemptedToRemoveTransformValues) {\n removedTransformValues =\n removeNonTranslationalTransform(visualElement);\n hasAttemptedToRemoveTransformValues = true;\n }\n changedValueTypeKeys.push(key);\n transitionEnd[key] =\n transitionEnd[key] !== undefined\n ? transitionEnd[key]\n : target[key];\n value.jump(to);\n }\n }\n });\n if (changedValueTypeKeys.length) {\n const scrollY = changedValueTypeKeys.indexOf(\"height\") >= 0\n ? window.pageYOffset\n : null;\n const convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);\n // If we removed transform values, reapply them before the next render\n if (removedTransformValues.length) {\n removedTransformValues.forEach(([key, value]) => {\n visualElement.getValue(key).set(value);\n });\n }\n // Reapply original values\n visualElement.render();\n // Restore scroll position\n if (isBrowser && scrollY !== null) {\n window.scrollTo({ top: scrollY });\n }\n return { target: convertedTarget, transitionEnd };\n }\n else {\n return { target, transitionEnd };\n }\n};\n/**\n * Convert value types for x/y/width/height/top/left/bottom/right\n *\n * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'`\n *\n * @internal\n */\nfunction unitConversion(visualElement, target, origin, transitionEnd) {\n return hasPositionalKey(target)\n ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd)\n : { target, transitionEnd };\n}\n\nexport { positionalValues, unitConversion };\n","import { resolveCSSVariables } from './css-variables-conversion.mjs';\nimport { unitConversion } from './unit-conversion.mjs';\n\n/**\n * Parse a DOM variant to make it animatable. This involves resolving CSS variables\n * and ensuring animations like \"20%\" => \"calc(50vw)\" are performed in pixels.\n */\nconst parseDomVariant = (visualElement, target, origin, transitionEnd) => {\n const resolved = resolveCSSVariables(visualElement, target, transitionEnd);\n target = resolved.target;\n transitionEnd = resolved.transitionEnd;\n return unitConversion(visualElement, target, origin, transitionEnd);\n};\n\nexport { parseDomVariant };\n","// Does this device prefer reduced motion? Returns `null` server-side.\nconst prefersReducedMotion = { current: null };\nconst hasReducedMotionListener = { current: false };\n\nexport { hasReducedMotionListener, prefersReducedMotion };\n","const visualElementStore = new WeakMap();\n\nexport { visualElementStore };\n","import { warning, invariant } from '../utils/errors.mjs';\nimport { createBox } from '../projection/geometry/models.mjs';\nimport { isRefObject } from '../utils/is-ref-object.mjs';\nimport { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';\nimport { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.mjs';\nimport { SubscriptionManager } from '../utils/subscription-manager.mjs';\nimport { motionValue } from '../value/index.mjs';\nimport { isWillChangeMotionValue } from '../value/use-will-change/is.mjs';\nimport { isMotionValue } from '../value/utils/is-motion-value.mjs';\nimport { transformProps } from './html/utils/transform.mjs';\nimport { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.mjs';\nimport { isVariantLabel } from './utils/is-variant-label.mjs';\nimport { updateMotionValuesFromProps } from './utils/motion-values.mjs';\nimport { resolveVariantFromProps } from './utils/resolve-variants.mjs';\nimport { warnOnce } from '../utils/warn-once.mjs';\nimport { featureDefinitions } from '../motion/features/definitions.mjs';\nimport { variantProps } from './utils/variant-props.mjs';\nimport { visualElementStore } from './store.mjs';\nimport { frame, cancelFrame } from '../frameloop/frame.mjs';\n\nconst featureNames = Object.keys(featureDefinitions);\nconst numFeatures = featureNames.length;\nconst propEventHandlers = [\n \"AnimationStart\",\n \"AnimationComplete\",\n \"Update\",\n \"BeforeLayoutMeasure\",\n \"LayoutMeasure\",\n \"LayoutAnimationStart\",\n \"LayoutAnimationComplete\",\n];\nconst numVariantProps = variantProps.length;\n/**\n * A VisualElement is an imperative abstraction around UI elements such as\n * HTMLElement, SVGElement, Three.Object3D etc.\n */\nclass VisualElement {\n constructor({ parent, props, presenceContext, reducedMotionConfig, visualState, }, options = {}) {\n /**\n * A reference to the current underlying Instance, e.g. a HTMLElement\n * or Three.Mesh etc.\n */\n this.current = null;\n /**\n * A set containing references to this VisualElement's children.\n */\n this.children = new Set();\n /**\n * Determine what role this visual element should take in the variant tree.\n */\n this.isVariantNode = false;\n this.isControllingVariants = false;\n /**\n * Decides whether this VisualElement should animate in reduced motion\n * mode.\n *\n * TODO: This is currently set on every individual VisualElement but feels\n * like it could be set globally.\n */\n this.shouldReduceMotion = null;\n /**\n * A map of all motion values attached to this visual element. Motion\n * values are source of truth for any given animated value. A motion\n * value might be provided externally by the component via props.\n */\n this.values = new Map();\n /**\n * Cleanup functions for active features (hover/tap/exit etc)\n */\n this.features = {};\n /**\n * A map of every subscription that binds the provided or generated\n * motion values onChange listeners to this visual element.\n */\n this.valueSubscriptions = new Map();\n /**\n * A reference to the previously-provided motion values as returned\n * from scrapeMotionValuesFromProps. We use the keys in here to determine\n * if any motion values need to be removed after props are updated.\n */\n this.prevMotionValues = {};\n /**\n * An object containing a SubscriptionManager for each active event.\n */\n this.events = {};\n /**\n * An object containing an unsubscribe function for each prop event subscription.\n * For example, every \"Update\" event can have multiple subscribers via\n * VisualElement.on(), but only one of those can be defined via the onUpdate prop.\n */\n this.propEventSubscriptions = {};\n this.notifyUpdate = () => this.notify(\"Update\", this.latestValues);\n this.render = () => {\n if (!this.current)\n return;\n this.triggerBuild();\n this.renderInstance(this.current, this.renderState, this.props.style, this.projection);\n };\n this.scheduleRender = () => frame.render(this.render, false, true);\n const { latestValues, renderState } = visualState;\n this.latestValues = latestValues;\n this.baseTarget = { ...latestValues };\n this.initialValues = props.initial ? { ...latestValues } : {};\n this.renderState = renderState;\n this.parent = parent;\n this.props = props;\n this.presenceContext = presenceContext;\n this.depth = parent ? parent.depth + 1 : 0;\n this.reducedMotionConfig = reducedMotionConfig;\n this.options = options;\n this.isControllingVariants = isControllingVariants(props);\n this.isVariantNode = isVariantNode(props);\n if (this.isVariantNode) {\n this.variantChildren = new Set();\n }\n this.manuallyAnimateOnMount = Boolean(parent && parent.current);\n /**\n * Any motion values that are provided to the element when created\n * aren't yet bound to the element, as this would technically be impure.\n * However, we iterate through the motion values and set them to the\n * initial values for this component.\n *\n * TODO: This is impure and we should look at changing this to run on mount.\n * Doing so will break some tests but this isn't neccessarily a breaking change,\n * more a reflection of the test.\n */\n const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {});\n for (const key in initialMotionValues) {\n const value = initialMotionValues[key];\n if (latestValues[key] !== undefined && isMotionValue(value)) {\n value.set(latestValues[key], false);\n if (isWillChangeMotionValue(willChange)) {\n willChange.add(key);\n }\n }\n }\n }\n /**\n * This method takes React props and returns found MotionValues. For example, HTML\n * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.\n *\n * This isn't an abstract method as it needs calling in the constructor, but it is\n * intended to be one.\n */\n scrapeMotionValuesFromProps(_props, _prevProps) {\n return {};\n }\n mount(instance) {\n this.current = instance;\n visualElementStore.set(instance, this);\n if (this.projection && !this.projection.instance) {\n this.projection.mount(instance);\n }\n if (this.parent && this.isVariantNode && !this.isControllingVariants) {\n this.removeFromVariantTree = this.parent.addVariantChild(this);\n }\n this.values.forEach((value, key) => this.bindToMotionValue(key, value));\n if (!hasReducedMotionListener.current) {\n initPrefersReducedMotion();\n }\n this.shouldReduceMotion =\n this.reducedMotionConfig === \"never\"\n ? false\n : this.reducedMotionConfig === \"always\"\n ? true\n : prefersReducedMotion.current;\n if (process.env.NODE_ENV !== \"production\") {\n warnOnce(this.shouldReduceMotion !== true, \"You have Reduced Motion enabled on your device. Animations may not appear as expected.\");\n }\n if (this.parent)\n this.parent.children.add(this);\n this.update(this.props, this.presenceContext);\n }\n unmount() {\n visualElementStore.delete(this.current);\n this.projection && this.projection.unmount();\n cancelFrame(this.notifyUpdate);\n cancelFrame(this.render);\n this.valueSubscriptions.forEach((remove) => remove());\n this.removeFromVariantTree && this.removeFromVariantTree();\n this.parent && this.parent.children.delete(this);\n for (const key in this.events) {\n this.events[key].clear();\n }\n for (const key in this.features) {\n this.features[key].unmount();\n }\n this.current = null;\n }\n bindToMotionValue(key, value) {\n const valueIsTransform = transformProps.has(key);\n const removeOnChange = value.on(\"change\", (latestValue) => {\n this.latestValues[key] = latestValue;\n this.props.onUpdate &&\n frame.update(this.notifyUpdate, false, true);\n if (valueIsTransform && this.projection) {\n this.projection.isTransformDirty = true;\n }\n });\n const removeOnRenderRequest = value.on(\"renderRequest\", this.scheduleRender);\n this.valueSubscriptions.set(key, () => {\n removeOnChange();\n removeOnRenderRequest();\n });\n }\n sortNodePosition(other) {\n /**\n * If these nodes aren't even of the same type we can't compare their depth.\n */\n if (!this.current ||\n !this.sortInstanceNodePosition ||\n this.type !== other.type) {\n return 0;\n }\n return this.sortInstanceNodePosition(this.current, other.current);\n }\n loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, initialLayoutGroupConfig) {\n let ProjectionNodeConstructor;\n let MeasureLayout;\n /**\n * If we're in development mode, check to make sure we're not rendering a motion component\n * as a child of LazyMotion, as this will break the file-size benefits of using it.\n */\n if (process.env.NODE_ENV !== \"production\" &&\n preloadedFeatures &&\n isStrict) {\n const strictMessage = \"You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.\";\n renderedProps.ignoreStrict\n ? warning(false, strictMessage)\n : invariant(false, strictMessage);\n }\n for (let i = 0; i < numFeatures; i++) {\n const name = featureNames[i];\n const { isEnabled, Feature: FeatureConstructor, ProjectionNode, MeasureLayout: MeasureLayoutComponent, } = featureDefinitions[name];\n if (ProjectionNode)\n ProjectionNodeConstructor = ProjectionNode;\n if (isEnabled(renderedProps)) {\n if (!this.features[name] && FeatureConstructor) {\n this.features[name] = new FeatureConstructor(this);\n }\n if (MeasureLayoutComponent) {\n MeasureLayout = MeasureLayoutComponent;\n }\n }\n }\n if (!this.projection && ProjectionNodeConstructor) {\n this.projection = new ProjectionNodeConstructor(this.latestValues, this.parent && this.parent.projection);\n const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = renderedProps;\n this.projection.setOptions({\n layoutId,\n layout,\n alwaysMeasureLayout: Boolean(drag) ||\n (dragConstraints && isRefObject(dragConstraints)),\n visualElement: this,\n scheduleRender: () => this.scheduleRender(),\n /**\n * TODO: Update options in an effect. This could be tricky as it'll be too late\n * to update by the time layout animations run.\n * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,\n * ensuring it gets called if there's no potential layout animations.\n *\n */\n animationType: typeof layout === \"string\" ? layout : \"both\",\n initialPromotionConfig: initialLayoutGroupConfig,\n layoutScroll,\n layoutRoot,\n });\n }\n return MeasureLayout;\n }\n updateFeatures() {\n for (const key in this.features) {\n const feature = this.features[key];\n if (feature.isMounted) {\n feature.update();\n }\n else {\n feature.mount();\n feature.isMounted = true;\n }\n }\n }\n triggerBuild() {\n this.build(this.renderState, this.latestValues, this.options, this.props);\n }\n /**\n * Measure the current viewport box with or without transforms.\n * Only measures axis-aligned boxes, rotate and skew must be manually\n * removed with a re-render to work.\n */\n measureViewportBox() {\n return this.current\n ? this.measureInstanceViewportBox(this.current, this.props)\n : createBox();\n }\n getStaticValue(key) {\n return this.latestValues[key];\n }\n setStaticValue(key, value) {\n this.latestValues[key] = value;\n }\n /**\n * Make a target animatable by Popmotion. For instance, if we're\n * trying to animate width from 100px to 100vw we need to measure 100vw\n * in pixels to determine what we really need to animate to. This is also\n * pluggable to support Framer's custom value types like Color,\n * and CSS variables.\n */\n makeTargetAnimatable(target, canMutate = true) {\n return this.makeTargetAnimatableFromInstance(target, this.props, canMutate);\n }\n /**\n * Update the provided props. Ensure any newly-added motion values are\n * added to our map, old ones removed, and listeners updated.\n */\n update(props, presenceContext) {\n if (props.transformTemplate || this.props.transformTemplate) {\n this.scheduleRender();\n }\n this.prevProps = this.props;\n this.props = props;\n this.prevPresenceContext = this.presenceContext;\n this.presenceContext = presenceContext;\n /**\n * Update prop event handlers ie onAnimationStart, onAnimationComplete\n */\n for (let i = 0; i < propEventHandlers.length; i++) {\n const key = propEventHandlers[i];\n if (this.propEventSubscriptions[key]) {\n this.propEventSubscriptions[key]();\n delete this.propEventSubscriptions[key];\n }\n const listener = props[\"on\" + key];\n if (listener) {\n this.propEventSubscriptions[key] = this.on(key, listener);\n }\n }\n this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps), this.prevMotionValues);\n if (this.handleChildMotionValue) {\n this.handleChildMotionValue();\n }\n }\n getProps() {\n return this.props;\n }\n /**\n * Returns the variant definition with a given name.\n */\n getVariant(name) {\n return this.props.variants ? this.props.variants[name] : undefined;\n }\n /**\n * Returns the defined default transition on this component.\n */\n getDefaultTransition() {\n return this.props.transition;\n }\n getTransformPagePoint() {\n return this.props.transformPagePoint;\n }\n getClosestVariantNode() {\n return this.isVariantNode\n ? this\n : this.parent\n ? this.parent.getClosestVariantNode()\n : undefined;\n }\n getVariantContext(startAtParent = false) {\n if (startAtParent) {\n return this.parent ? this.parent.getVariantContext() : undefined;\n }\n if (!this.isControllingVariants) {\n const context = this.parent\n ? this.parent.getVariantContext() || {}\n : {};\n if (this.props.initial !== undefined) {\n context.initial = this.props.initial;\n }\n return context;\n }\n const context = {};\n for (let i = 0; i < numVariantProps; i++) {\n const name = variantProps[i];\n const prop = this.props[name];\n if (isVariantLabel(prop) || prop === false) {\n context[name] = prop;\n }\n }\n return context;\n }\n /**\n * Add a child visual element to our set of children.\n */\n addVariantChild(child) {\n const closestVariantNode = this.getClosestVariantNode();\n if (closestVariantNode) {\n closestVariantNode.variantChildren &&\n closestVariantNode.variantChildren.add(child);\n return () => closestVariantNode.variantChildren.delete(child);\n }\n }\n /**\n * Add a motion value and bind it to this visual element.\n */\n addValue(key, value) {\n // Remove existing value if it exists\n if (value !== this.values.get(key)) {\n this.removeValue(key);\n this.bindToMotionValue(key, value);\n }\n this.values.set(key, value);\n this.latestValues[key] = value.get();\n }\n /**\n * Remove a motion value and unbind any active subscriptions.\n */\n removeValue(key) {\n this.values.delete(key);\n const unsubscribe = this.valueSubscriptions.get(key);\n if (unsubscribe) {\n unsubscribe();\n this.valueSubscriptions.delete(key);\n }\n delete this.latestValues[key];\n this.removeValueFromRenderState(key, this.renderState);\n }\n /**\n * Check whether we have a motion value for this key\n */\n hasValue(key) {\n return this.values.has(key);\n }\n getValue(key, defaultValue) {\n if (this.props.values && this.props.values[key]) {\n return this.props.values[key];\n }\n let value = this.values.get(key);\n if (value === undefined && defaultValue !== undefined) {\n value = motionValue(defaultValue, { owner: this });\n this.addValue(key, value);\n }\n return value;\n }\n /**\n * If we're trying to animate to a previously unencountered value,\n * we need to check for it in our state and as a last resort read it\n * directly from the instance (which might have performance implications).\n */\n readValue(key) {\n var _a;\n return this.latestValues[key] !== undefined || !this.current\n ? this.latestValues[key]\n : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);\n }\n /**\n * Set the base target to later animate back to. This is currently\n * only hydrated on creation and when we first read a value.\n */\n setBaseTarget(key, value) {\n this.baseTarget[key] = value;\n }\n /**\n * Find the base target for a value thats been removed from all animation\n * props.\n */\n getBaseTarget(key) {\n var _a;\n const { initial } = this.props;\n const valueFromInitial = typeof initial === \"string\" || typeof initial === \"object\"\n ? (_a = resolveVariantFromProps(this.props, initial)) === null || _a === void 0 ? void 0 : _a[key]\n : undefined;\n /**\n * If this value still exists in the current initial variant, read that.\n */\n if (initial && valueFromInitial !== undefined) {\n return valueFromInitial;\n }\n /**\n * Alternatively, if this VisualElement config has defined a getBaseTarget\n * so we can read the value from an alternative source, try that.\n */\n const target = this.getBaseTargetFromProps(this.props, key);\n if (target !== undefined && !isMotionValue(target))\n return target;\n /**\n * If the value was initially defined on initial, but it doesn't any more,\n * return undefined. Otherwise return the value as initially read from the DOM.\n */\n return this.initialValues[key] !== undefined &&\n valueFromInitial === undefined\n ? undefined\n : this.baseTarget[key];\n }\n on(eventName, callback) {\n if (!this.events[eventName]) {\n this.events[eventName] = new SubscriptionManager();\n }\n return this.events[eventName].add(callback);\n }\n notify(eventName, ...args) {\n if (this.events[eventName]) {\n this.events[eventName].notify(...args);\n }\n }\n}\n\nexport { VisualElement };\n","import { isBrowser } from '../is-browser.mjs';\nimport { hasReducedMotionListener, prefersReducedMotion } from './state.mjs';\n\nfunction initPrefersReducedMotion() {\n hasReducedMotionListener.current = true;\n if (!isBrowser)\n return;\n if (window.matchMedia) {\n const motionMediaQuery = window.matchMedia(\"(prefers-reduced-motion)\");\n const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);\n motionMediaQuery.addListener(setReducedMotionPreferences);\n setReducedMotionPreferences();\n }\n else {\n prefersReducedMotion.current = false;\n }\n}\n\nexport { initPrefersReducedMotion };\n","import { isWillChangeMotionValue } from '../../value/use-will-change/is.mjs';\nimport { warnOnce } from '../../utils/warn-once.mjs';\nimport { motionValue } from '../../value/index.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction updateMotionValuesFromProps(element, next, prev) {\n const { willChange } = next;\n for (const key in next) {\n const nextValue = next[key];\n const prevValue = prev[key];\n if (isMotionValue(nextValue)) {\n /**\n * If this is a motion value found in props or style, we want to add it\n * to our visual element's motion value map.\n */\n element.addValue(key, nextValue);\n if (isWillChangeMotionValue(willChange)) {\n willChange.add(key);\n }\n /**\n * Check the version of the incoming motion value with this version\n * and warn against mismatches.\n */\n if (process.env.NODE_ENV === \"development\") {\n warnOnce(nextValue.version === \"10.17.4\", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.17.4 may not work as expected.`);\n }\n }\n else if (isMotionValue(prevValue)) {\n /**\n * If we're swapping from a motion value to a static value,\n * create a new motion value from that\n */\n element.addValue(key, motionValue(nextValue, { owner: element }));\n if (isWillChangeMotionValue(willChange)) {\n willChange.remove(key);\n }\n }\n else if (prevValue !== nextValue) {\n /**\n * If this is a flat value that has changed, update the motion value\n * or create one if it doesn't exist. We only want to do this if we're\n * not handling the value with our animation state.\n */\n if (element.hasValue(key)) {\n const existingValue = element.getValue(key);\n // TODO: Only update values that aren't being animated or even looked at\n !existingValue.hasAnimated && existingValue.set(nextValue);\n }\n else {\n const latestValue = element.getStaticValue(key);\n element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));\n }\n }\n }\n // Handle removed values\n for (const key in prev) {\n if (next[key] === undefined)\n element.removeValue(key);\n }\n return next;\n}\n\nexport { updateMotionValuesFromProps };\n","import { getOrigin, checkTargetForNewValues } from '../utils/setters.mjs';\nimport { parseDomVariant } from './utils/parse-dom-variant.mjs';\nimport { VisualElement } from '../VisualElement.mjs';\n\nclass DOMVisualElement extends VisualElement {\n sortInstanceNodePosition(a, b) {\n /**\n * compareDocumentPosition returns a bitmask, by using the bitwise &\n * we're returning true if 2 in that bitmask is set to true. 2 is set\n * to true if b preceeds a.\n */\n return a.compareDocumentPosition(b) & 2 ? 1 : -1;\n }\n getBaseTargetFromProps(props, key) {\n return props.style ? props.style[key] : undefined;\n }\n removeValueFromRenderState(key, { vars, style }) {\n delete vars[key];\n delete style[key];\n }\n makeTargetAnimatableFromInstance({ transition, transitionEnd, ...target }, { transformValues }, isMounted) {\n let origin = getOrigin(target, transition || {}, this);\n /**\n * If Framer has provided a function to convert `Color` etc value types, convert them\n */\n if (transformValues) {\n if (transitionEnd)\n transitionEnd = transformValues(transitionEnd);\n if (target)\n target = transformValues(target);\n if (origin)\n origin = transformValues(origin);\n }\n if (isMounted) {\n checkTargetForNewValues(this, target, origin);\n const parsed = parseDomVariant(this, target, origin, transitionEnd);\n transitionEnd = parsed.transitionEnd;\n target = parsed.target;\n }\n return {\n transition,\n transitionEnd,\n ...target,\n };\n }\n}\n\nexport { DOMVisualElement };\n","import { buildHTMLStyles } from './utils/build-styles.mjs';\nimport { isCSSVariableName } from '../dom/utils/is-css-variable.mjs';\nimport { transformProps } from './utils/transform.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { renderHTML } from './utils/render.mjs';\nimport { getDefaultValueType } from '../dom/value-types/defaults.mjs';\nimport { measureViewportBox } from '../../projection/utils/measure.mjs';\nimport { DOMVisualElement } from '../dom/DOMVisualElement.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction getComputedStyle(element) {\n return window.getComputedStyle(element);\n}\nclass HTMLVisualElement extends DOMVisualElement {\n readValueFromInstance(instance, key) {\n if (transformProps.has(key)) {\n const defaultType = getDefaultValueType(key);\n return defaultType ? defaultType.default || 0 : 0;\n }\n else {\n const computedStyle = getComputedStyle(instance);\n const value = (isCSSVariableName(key)\n ? computedStyle.getPropertyValue(key)\n : computedStyle[key]) || 0;\n return typeof value === \"string\" ? value.trim() : value;\n }\n }\n measureInstanceViewportBox(instance, { transformPagePoint }) {\n return measureViewportBox(instance, transformPagePoint);\n }\n build(renderState, latestValues, options, props) {\n buildHTMLStyles(renderState, latestValues, options, props.transformTemplate);\n }\n scrapeMotionValuesFromProps(props, prevProps) {\n return scrapeMotionValuesFromProps(props, prevProps);\n }\n handleChildMotionValue() {\n if (this.childSubscription) {\n this.childSubscription();\n delete this.childSubscription;\n }\n const { children } = this.props;\n if (isMotionValue(children)) {\n this.childSubscription = children.on(\"change\", (latest) => {\n if (this.current)\n this.current.textContent = `${latest}`;\n });\n }\n }\n renderInstance(instance, renderState, styleProp, projection) {\n renderHTML(instance, renderState, styleProp, projection);\n }\n}\n\nexport { HTMLVisualElement, getComputedStyle };\n","import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { DOMVisualElement } from '../dom/DOMVisualElement.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\nimport { camelToDash } from '../dom/utils/camel-to-dash.mjs';\nimport { camelCaseAttributes } from './utils/camel-case-attrs.mjs';\nimport { transformProps } from '../html/utils/transform.mjs';\nimport { renderSVG } from './utils/render.mjs';\nimport { getDefaultValueType } from '../dom/value-types/defaults.mjs';\nimport { createBox } from '../../projection/geometry/models.mjs';\nimport { isSVGTag } from './utils/is-svg-tag.mjs';\n\nclass SVGVisualElement extends DOMVisualElement {\n constructor() {\n super(...arguments);\n this.isSVGTag = false;\n }\n getBaseTargetFromProps(props, key) {\n return props[key];\n }\n readValueFromInstance(instance, key) {\n if (transformProps.has(key)) {\n const defaultType = getDefaultValueType(key);\n return defaultType ? defaultType.default || 0 : 0;\n }\n key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;\n return instance.getAttribute(key);\n }\n measureInstanceViewportBox() {\n return createBox();\n }\n scrapeMotionValuesFromProps(props, prevProps) {\n return scrapeMotionValuesFromProps(props, prevProps);\n }\n build(renderState, latestValues, options, props) {\n buildSVGAttrs(renderState, latestValues, options, this.isSVGTag, props.transformTemplate);\n }\n renderInstance(instance, renderState, styleProp, projection) {\n renderSVG(instance, renderState, styleProp, projection);\n }\n mount(instance) {\n this.isSVGTag = isSVGTag(instance.tagName);\n super.mount(instance);\n }\n}\n\nexport { SVGVisualElement };\n","import { HTMLVisualElement } from '../html/HTMLVisualElement.mjs';\nimport { SVGVisualElement } from '../svg/SVGVisualElement.mjs';\nimport { isSVGComponent } from './utils/is-svg-component.mjs';\n\nconst createDomVisualElement = (Component, options) => {\n return isSVGComponent(Component)\n ? new SVGVisualElement(options, { enableHardwareAcceleration: false })\n : new HTMLVisualElement(options, { enableHardwareAcceleration: true });\n};\n\nexport { createDomVisualElement };\n","import { createMotionComponent } from '../../motion/index.mjs';\nimport { createMotionProxy } from './motion-proxy.mjs';\nimport { createDomMotionConfig } from './utils/create-config.mjs';\nimport { gestureAnimations } from '../../motion/features/gestures.mjs';\nimport { animations } from '../../motion/features/animations.mjs';\nimport { drag } from '../../motion/features/drag.mjs';\nimport { createDomVisualElement } from './create-visual-element.mjs';\nimport { layout } from '../../motion/features/layout.mjs';\n\nconst preloadedFeatures = {\n ...animations,\n ...gestureAnimations,\n ...drag,\n ...layout,\n};\n/**\n * HTML & SVG components, optimised for use with gestures and animation. These can be used as\n * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.\n *\n * @public\n */\nconst motion = /*@__PURE__*/ createMotionProxy((Component, config) => createDomMotionConfig(Component, config, preloadedFeatures, createDomVisualElement));\n/**\n * Create a DOM `motion` component with the provided string. This is primarily intended\n * as a full alternative to `motion` for consumers who have to support environments that don't\n * support `Proxy`.\n *\n * ```javascript\n * import { createDomMotionComponent } from \"framer-motion\"\n *\n * const motion = {\n * div: createDomMotionComponent('div')\n * }\n * ```\n *\n * @public\n */\nfunction createDomMotionComponent(key) {\n return createMotionComponent(createDomMotionConfig(key, { forwardMotionProps: false }, preloadedFeatures, createDomVisualElement));\n}\n\nexport { createDomMotionComponent, motion };\n","import { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';\nimport { MeasureLayout } from './layout/MeasureLayout.mjs';\n\nconst layout = {\n layout: {\n ProjectionNode: HTMLProjectionNode,\n MeasureLayout,\n },\n};\n\nexport { layout };\n","import { isSVGComponent } from './is-svg-component.mjs';\nimport { createUseRender } from '../use-render.mjs';\nimport { svgMotionConfig } from '../../svg/config-motion.mjs';\nimport { htmlMotionConfig } from '../../html/config-motion.mjs';\n\nfunction createDomMotionConfig(Component, { forwardMotionProps = false }, preloadedFeatures, createVisualElement) {\n const baseConfig = isSVGComponent(Component)\n ? svgMotionConfig\n : htmlMotionConfig;\n return {\n ...baseConfig,\n preloadedFeatures,\n useRender: createUseRender(forwardMotionProps),\n createVisualElement,\n Component,\n };\n}\n\nexport { createDomMotionConfig };\n","import { useEffect, useState } from 'react';\r\nimport { TextWithContentModel } from '../../model/TextWithContentModel';\r\nimport { motion } from 'framer-motion';\r\nimport { CDNImage } from 'shared-widget-components/src/components/CDNImage/CDNImage';\r\n\r\ninterface MultipleImagesPreviewProps {\r\n content: TextWithContentModel;\r\n}\r\n\r\nexport const MultipleImagesPreview = ({ content }: MultipleImagesPreviewProps) => {\r\n const [lastScrollY, setLastScrollY] = useState(0);\r\n const [scrollDirection, setScrollDirection] = useState('down'); // 'up' or 'down'\r\n\r\n const handleScroll = () => {\r\n const currentScrollY = window.scrollY;\r\n setScrollDirection(currentScrollY > lastScrollY ? 'down' : 'up');\r\n setLastScrollY(currentScrollY);\r\n };\r\n\r\n useEffect(() => {\r\n window.addEventListener('scroll', handleScroll, { passive: true });\r\n\r\n return () => {\r\n window.removeEventListener('scroll', handleScroll);\r\n };\r\n }, [lastScrollY]);\r\n if (content.mediaType !== 2) return null;\r\n\r\n const parallaxEffect = {\r\n initial: { y: 0 },\r\n whileInView: scrollDirection === 'down' ? { y: -10 } : { y: 10 }, //tweek this value to adjust the parallax effect\r\n transition: { type: 'tween', ease: 'ease', duration: 2 },\r\n };\r\n\r\n return (\r\n
\r\n );\r\n};\r\n","import { TextWithContentModel } from './model/TextWithContentModel';\r\nimport { TextWithContentPreviewHeader } from './widget/TextWithContentPreviewHeader';\r\nimport { YoutubePreview } from './widget/PreviewComponents/YoutubePreview';\r\nimport { MultipleImagesPreview } from './widget/PreviewComponents/MultipleImagesPreview';\r\nimport { CoverImagePreview } from './widget/PreviewComponents/CoverImagePreview';\r\nimport { previewScrollbar } from 'shared-widget-components/src/components/preview/previewScrollbar';\r\n\r\ninterface TextWithContentProps {\r\n content: TextWithContentModel;\r\n languageCode: string;\r\n}\r\n\r\n/**\r\n * @description This component is displayed as a preview in the Admin editor and as a widget in the webshop.\r\n * @param0 content TextWithContentModel; The widgetState aka the date of the widget.\r\n * @param1 languageCode string; The language code represents the language that is currently used.\r\n * @returns {JSX.Element} The TextWithContent component\r\n */\r\n\r\nexport const TextWithContent = ({ content, languageCode }: TextWithContentProps) => {\r\n return (\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n};\r\n","import { TextWithContent } from './TextWithContent';\r\nimport { TextWithContentModel } from './model/TextWithContentModel';\r\n\r\ninterface TextWithContentWebshopProps {\r\n data: string;\r\n}\r\n\r\n/**\r\n * @description This component is displayed in the webshop as a fully functioning widget.\r\n * @param0 data string; The data of the widget.\r\n * @returns {JSX.Element} The TextWithContentWebshop component\r\n */\r\n\r\nexport const TextWithContentWebshop = ({ data }: TextWithContentWebshopProps) => {\r\n if (!data || data === '{}') return <>;\r\n\r\n const state = JSON.parse(data) as TextWithContentModel;\r\n //@ts-ignore\r\n const languageCode = window.currentLanguageCode;\r\n\r\n return ;\r\n};\r\n","export const PACKAGES = \"packages\";\r\n\r\nexport const PackageTypes = {\r\n FEATURED: \"FEATURED\",\r\n CUSTOM: \"CUSTOM\",\r\n}\r\n\r\nexport const WineTypes = {\r\n FEATURED: \"FEATURED\",\r\n CUSTOM: \"CUSTOM\",\r\n}","export interface WinePackageWidgetModel {\r\n title: string;\r\n id: number;\r\n productVariantId: number;\r\n showWineBottlesInFront: boolean; // ha true, csak a foregroundImage-t kell megjeleníteni\r\n backgroundImage: string;\r\n foregroundImage: string;\r\n availableQuantity: number;\r\n description: string;\r\n basePrice: number | null;\r\n discount: number;\r\n currentPrice: number | null;\r\n content: PackageElement[];\r\n currentEurPrice: number | null;\r\n baseEurPrice: number | null;\r\n\r\n showEurPrice: boolean;\r\n minimumCartQuantity: number;\r\n maximumCartQuantity: number;\r\n}\r\n\r\nexport interface PackageElement {\r\n id: number;\r\n title: string;\r\n productYear: number;\r\n}\r\n\r\nexport const getFeaturedPackages = async () => {\r\n try {\r\n const response = await fetch(`/Widget/FeaturedPackages`, {\r\n method: 'GET',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n },\r\n });\r\n return (await response.json()) as WinePackageWidgetModel[];\r\n } catch (error) {\r\n throw new Error(error);\r\n }\r\n};\r\n","export interface WineWidgetModel {\r\n title: string;\r\n id: number;\r\n productVariantId: number;\r\n imgUrl: string;\r\n availableQuantity: number;\r\n description: string;\r\n basePrice: number | null;\r\n discount: number;\r\n currentPrice: number | null;\r\n productYear: number;\r\n manufacturerName?: string;\r\n isManufacturer?: boolean;\r\n\r\n currentEurPrice: number | null;\r\n\r\n baseEurPrice: number | null;\r\n showEurPrice: boolean;\r\n minimumCartQuantity: number;\r\n maximumCartQuantity: number;\r\n tags: string[];\r\n}\r\n\r\nexport const getFeaturedWines = async () => {\r\n try {\r\n const response = await fetch(`/Widget/FeaturedWines`, {\r\n method: 'GET',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n },\r\n });\r\n return (await response.json()) as WineWidgetModel[];\r\n } catch (error) {\r\n throw new Error('Probléma történt az adatok lekérdezése közben.');\r\n }\r\n};\r\n","import React, { useState } from 'react';\r\nimport useAsyncEffect from 'use-async-effect';\r\nimport { WinePackageWidgetModel, getFeaturedPackages } from '../services/FeaturedPackagesService';\r\nimport { WineWidgetModel, getFeaturedWines } from '../services/FeaturedWinesService';\r\n\r\ninterface FeaturedProductContextInterface {\r\n featuredWines: WineWidgetModel[];\r\n featuredPackages: WinePackageWidgetModel[];\r\n isFeaturedWinesLoading: boolean;\r\n isFeaturedPackagesLoading: boolean;\r\n}\r\n\r\nconst FeaturedProductContext = React.createContext({} as FeaturedProductContextInterface);\r\n\r\nexport const FeaturedProductProvider = ({ children }: { children: JSX.Element }) => {\r\n const [featuredWines, setFeaturedWines] = useState([]);\r\n const [featuredPackages, setFeaturedPackages] = useState([]);\r\n\r\n const [isFeaturedWinesLoading, setIsFeaturedWinesLoading] = useState(false);\r\n const [isFeaturedPackagesLoading, setIsFeaturedPackagesLoading] = useState(false);\r\n\r\n useAsyncEffect(async () => {\r\n try {\r\n setIsFeaturedWinesLoading(true);\r\n setIsFeaturedPackagesLoading(true);\r\n\r\n const [featuredWines, featuredPackages] = await Promise.all([getFeaturedWines(), getFeaturedPackages()]);\r\n\r\n setFeaturedWines(featuredWines as WineWidgetModel[]);\r\n setIsFeaturedWinesLoading(false);\r\n setFeaturedPackages(featuredPackages as WinePackageWidgetModel[]);\r\n setIsFeaturedPackagesLoading(false);\r\n } catch (error) {\r\n console.error(error);\r\n throw new Error('Hiba az adatok betöltése során');\r\n }\r\n }, []);\r\n\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\n/**\r\n * Use method\r\n * @returns\r\n */\r\nexport const useFeaturedProductContext = () => {\r\n const context = React.useContext(FeaturedProductContext);\r\n\r\n if (context === undefined) {\r\n throw new Error('must be used within a Provider');\r\n }\r\n\r\n return context;\r\n};\r\n","import { useTranslation } from 'react-i18next';\r\n\r\ninterface OrderableTextProps {\r\n backgroundColor: string;\r\n orderableText: string;\r\n}\r\n\r\n/**\r\n * The OrderableText component renders a text with a colored dot.\r\n * @param backgroundColor - The background color of the dot.\r\n * @param orderableText - The text to render.\r\n * @returns The OrderableText component is returning JSX elements.\r\n */\r\n\r\nconst OrderableText = ({ backgroundColor, orderableText }: OrderableTextProps) => {\r\n return (\r\n <>\r\n \r\n
{orderableText}
\r\n \r\n );\r\n};\r\n\r\n/**\r\n * The AvailableText component renders a text with a green dot.\r\n * @returns The AvailableText component is returning JSX elements.\r\n */\r\n\r\nexport const AvailableText = () => {\r\n const { t } = useTranslation();\r\n return ;\r\n};\r\n\r\n/**\r\n * The NotAvailableText component renders a text with a red dot.\r\n * @returns The NotAvailableText component is returning JSX elements.\r\n */\r\n\r\nexport const NotAvailableText = () => {\r\n const { t } = useTranslation();\r\n return ;\r\n};\r\n","import { useState, useEffect } from 'react';\r\n\r\ninterface useCalculatedDiscountProps {\r\n basePrice: number;\r\n currentPrice: number;\r\n}\r\n\r\nexport const useCalculatedDiscount = ({ basePrice, currentPrice }: useCalculatedDiscountProps) => {\r\n const [calculatedDiscount, setCalculatedDiscount] = useState(0);\r\n\r\n useEffect(() => {\r\n // calculate the discount based on the base price and the current price\r\n if (!basePrice || !currentPrice || basePrice <= currentPrice) {\r\n setCalculatedDiscount(0);\r\n return;\r\n } else {\r\n const discount = basePrice - currentPrice;\r\n const calculatedDiscount = (discount / basePrice) * 100;\r\n const roundedDiscount = Number(calculatedDiscount.toFixed(0));\r\n setCalculatedDiscount(roundedDiscount);\r\n }\r\n }, [basePrice, currentPrice]);\r\n\r\n return { calculatedDiscount };\r\n};\r\n","export const formatHufPrice = (price: number) => {\r\n return `${price.toLocaleString('hu-HU')} Ft`;\r\n};\r\n\r\nexport const formatEurPrice = (price: number) => {\r\n return `${price.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}`;\r\n};\r\n","import { WinePackageWidgetModel } from '../../../models/WinePackageWidgetModel';\r\nimport { useCalculatedDiscount } from 'shared-widget-components/src/hooks/useCalculatedDiscount';\r\nimport { formatEurPrice, formatHufPrice } from 'shared-widget-components/src/utils/FormatPrice';\r\n\r\n/**\r\n * The WinePackagePrices component renders the base and current prices of a wine package.\r\n * @param winePackage - The object containing information about the wine package.\r\n * @returns The WinePackagePrices component is returning JSX elements.\r\n */\r\n\r\nexport const WinePackagePrices = ({ winePackage }: { winePackage: WinePackageWidgetModel }) => {\r\n const basePrice = winePackage.basePrice!;\r\n const currentPrice = winePackage.currentPrice!;\r\n\r\n const { calculatedDiscount } = useCalculatedDiscount({ basePrice, currentPrice });\r\n\r\n return (\r\n
\r\n {/** if there is eur price, but no discount */}\r\n {calculatedDiscount === 0 && winePackage.baseEurPrice && winePackage.showEurPrice && (\r\n
({formatEurPrice(winePackage.baseEurPrice)})
\r\n )}\r\n\r\n {/** if there is discount, but no eur price */}\r\n {calculatedDiscount > 0 && winePackage.basePrice && (\r\n
{formatHufPrice(winePackage.basePrice)}
\r\n )}\r\n
\r\n {winePackage.showEurPrice && (\r\n
\r\n {/** if there is eur price and discount, its the current eur price */}\r\n {calculatedDiscount > 0 && winePackage.currentEurPrice && winePackage.showEurPrice && (\r\n
({formatEurPrice(winePackage.currentEurPrice)}
\r\n )}\r\n {/** if there is eur price and discount, its the base eur price */}\r\n {calculatedDiscount > 0 && winePackage.baseEurPrice && winePackage.showEurPrice && (\r\n
{formatEurPrice(winePackage.baseEurPrice)})
\r\n )}\r\n
\r\n )}\r\n
\r\n );\r\n};\r\n","function t(t){return t.split(\"-\")[1]}function e(t){return\"y\"===t?\"height\":\"width\"}function n(t){return t.split(\"-\")[0]}function o(t){return[\"top\",\"bottom\"].includes(n(t))?\"x\":\"y\"}function i(i,r,a){let{reference:l,floating:s}=i;const c=l.x+l.width/2-s.width/2,f=l.y+l.height/2-s.height/2,m=o(r),u=e(m),g=l[u]/2-s[u]/2,d=\"x\"===m;let p;switch(n(r)){case\"top\":p={x:c,y:l.y-s.height};break;case\"bottom\":p={x:c,y:l.y+l.height};break;case\"right\":p={x:l.x+l.width,y:f};break;case\"left\":p={x:l.x-s.width,y:f};break;default:p={x:l.x,y:l.y}}switch(t(r)){case\"start\":p[m]-=g*(a&&d?-1:1);break;case\"end\":p[m]+=g*(a&&d?-1:1)}return p}const r=async(t,e,n)=>{const{placement:o=\"bottom\",strategy:r=\"absolute\",middleware:a=[],platform:l}=n,s=a.filter(Boolean),c=await(null==l.isRTL?void 0:l.isRTL(e));let f=await l.getElementRects({reference:t,floating:e,strategy:r}),{x:m,y:u}=i(f,o,c),g=o,d={},p=0;for(let n=0;n({name:\"arrow\",options:n,async fn(i){const{element:r,padding:l=0}=n||{},{x:s,y:c,placement:f,rects:u,platform:g,elements:d}=i;if(null==r)return{};const p=a(l),h={x:s,y:c},y=o(f),x=e(y),w=await g.getDimensions(r),v=\"y\"===y,b=v?\"top\":\"left\",A=v?\"bottom\":\"right\",R=v?\"clientHeight\":\"clientWidth\",P=u.reference[x]+u.reference[y]-h[y]-u.floating[x],E=h[y]-u.reference[y],T=await(null==g.getOffsetParent?void 0:g.getOffsetParent(r));let D=T?T[R]:0;D&&await(null==g.isElement?void 0:g.isElement(T))||(D=d.floating[R]||u.floating[x]);const L=P/2-E/2,k=p[b],O=D-w[x]-p[A],B=D/2-w[x]/2+L,C=m(k,B,O),H=null!=t(f)&&B!=C&&u.reference[x]/2-(Bt.concat(e,e+\"-start\",e+\"-end\")),[]),p={left:\"right\",right:\"left\",bottom:\"top\",top:\"bottom\"};function h(t){return t.replace(/left|right|bottom|top/g,(t=>p[t]))}function y(n,i,r){void 0===r&&(r=!1);const a=t(n),l=o(n),s=e(l);let c=\"x\"===l?a===(r?\"end\":\"start\")?\"right\":\"left\":\"start\"===a?\"bottom\":\"top\";return i.reference[s]>i.floating[s]&&(c=h(c)),{main:c,cross:h(c)}}const x={start:\"end\",end:\"start\"};function w(t){return t.replace(/start|end/g,(t=>x[t]))}const v=function(e){return void 0===e&&(e={}),{name:\"autoPlacement\",options:e,async fn(o){var i,r,a;const{rects:l,middlewareData:c,placement:f,platform:m,elements:u}=o,{crossAxis:g=!1,alignment:p,allowedPlacements:h=d,autoAlignment:x=!0,...v}=e,b=void 0!==p||h===d?function(e,o,i){return(e?[...i.filter((n=>t(n)===e)),...i.filter((n=>t(n)!==e))]:i.filter((t=>n(t)===t))).filter((n=>!e||t(n)===e||!!o&&w(n)!==n))}(p||null,x,h):h,A=await s(o,v),R=(null==(i=c.autoPlacement)?void 0:i.index)||0,P=b[R];if(null==P)return{};const{main:E,cross:T}=y(P,l,await(null==m.isRTL?void 0:m.isRTL(u.floating)));if(f!==P)return{reset:{placement:b[0]}};const D=[A[n(P)],A[E],A[T]],L=[...(null==(r=c.autoPlacement)?void 0:r.overflows)||[],{placement:P,overflows:D}],k=b[R+1];if(k)return{data:{index:R+1,overflows:L},reset:{placement:k}};const O=L.map((e=>{const n=t(e.placement);return[e.placement,n&&g?e.overflows.slice(0,2).reduce(((t,e)=>t+e),0):e.overflows[0],e.overflows]})).sort(((t,e)=>t[1]-e[1])),B=(null==(a=O.filter((e=>e[2].slice(0,t(e[0])?2:3).every((t=>t<=0))))[0])?void 0:a[0])||O[0][0];return B!==f?{data:{index:R+1,overflows:L},reset:{placement:B}}:{}}}};const b=function(e){return void 0===e&&(e={}),{name:\"flip\",options:e,async fn(o){var i;const{placement:r,middlewareData:a,rects:l,initialPlacement:c,platform:f,elements:m}=o,{mainAxis:u=!0,crossAxis:g=!0,fallbackPlacements:d,fallbackStrategy:p=\"bestFit\",fallbackAxisSideDirection:x=\"none\",flipAlignment:v=!0,...b}=e,A=n(r),R=n(c)===c,P=await(null==f.isRTL?void 0:f.isRTL(m.floating)),E=d||(R||!v?[h(c)]:function(t){const e=h(t);return[w(t),e,w(e)]}(c));d||\"none\"===x||E.push(...function(e,o,i,r){const a=t(e);let l=function(t,e,n){const o=[\"left\",\"right\"],i=[\"right\",\"left\"],r=[\"top\",\"bottom\"],a=[\"bottom\",\"top\"];switch(t){case\"top\":case\"bottom\":return n?e?i:o:e?o:i;case\"left\":case\"right\":return e?r:a;default:return[]}}(n(e),\"start\"===i,r);return a&&(l=l.map((t=>t+\"-\"+a)),o&&(l=l.concat(l.map(w)))),l}(c,v,x,P));const T=[c,...E],D=await s(o,b),L=[];let k=(null==(i=a.flip)?void 0:i.overflows)||[];if(u&&L.push(D[A]),g){const{main:t,cross:e}=y(r,l,P);L.push(D[t],D[e])}if(k=[...k,{placement:r,overflows:L}],!L.every((t=>t<=0))){var O,B;const t=((null==(O=a.flip)?void 0:O.index)||0)+1,e=T[t];if(e)return{data:{index:t,overflows:k},reset:{placement:e}};let n=null==(B=k.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:B.placement;if(!n)switch(p){case\"bestFit\":{var C;const t=null==(C=k.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:C[0];t&&(n=t);break}case\"initialPlacement\":n=c}if(r!==n)return{reset:{placement:n}}}return{}}}};function A(t,e){return{top:t.top-e.height,right:t.right-e.width,bottom:t.bottom-e.height,left:t.left-e.width}}function R(t){return g.some((e=>t[e]>=0))}const P=function(t){return void 0===t&&(t={}),{name:\"hide\",options:t,async fn(e){const{strategy:n=\"referenceHidden\",...o}=t,{rects:i}=e;switch(n){case\"referenceHidden\":{const t=A(await s(e,{...o,elementContext:\"reference\"}),i.reference);return{data:{referenceHiddenOffsets:t,referenceHidden:R(t)}}}case\"escaped\":{const t=A(await s(e,{...o,altBoundary:!0}),i.floating);return{data:{escapedOffsets:t,escaped:R(t)}}}default:return{}}}}};function E(t){const e=c(...t.map((t=>t.left))),n=c(...t.map((t=>t.top)));return{x:e,y:n,width:f(...t.map((t=>t.right)))-e,height:f(...t.map((t=>t.bottom)))-n}}const T=function(t){return void 0===t&&(t={}),{name:\"inline\",options:t,async fn(e){const{placement:i,elements:r,rects:s,platform:m,strategy:u}=e,{padding:g=2,x:d,y:p}=t,h=Array.from(await(null==m.getClientRects?void 0:m.getClientRects(r.reference))||[]),y=function(t){const e=t.slice().sort(((t,e)=>t.y-e.y)),n=[];let o=null;for(let t=0;to.height/2?n.push([i]):n[n.length-1].push(i),o=i}return n.map((t=>l(E(t))))}(h),x=l(E(h)),w=a(g);const v=await m.getElementRects({reference:{getBoundingClientRect:function(){if(2===y.length&&y[0].left>y[1].right&&null!=d&&null!=p)return y.find((t=>d>t.left-w.left&&dt.top-w.top&&p=2){if(\"x\"===o(i)){const t=y[0],e=y[y.length-1],o=\"top\"===n(i),r=t.top,a=e.bottom,l=o?t.left:e.left,s=o?t.right:e.right;return{top:r,bottom:a,left:l,right:s,width:s-l,height:a-r,x:l,y:r}}const t=\"left\"===n(i),e=f(...y.map((t=>t.right))),r=c(...y.map((t=>t.left))),a=y.filter((n=>t?n.left===r:n.right===e)),l=a[0].top,s=a[a.length-1].bottom;return{top:l,bottom:s,left:r,right:e,width:e-r,height:s-l,x:r,y:l}}return x}},floating:r.floating,strategy:u});return s.reference.x!==v.reference.x||s.reference.y!==v.reference.y||s.reference.width!==v.reference.width||s.reference.height!==v.reference.height?{reset:{rects:v}}:{}}}};const D=function(e){return void 0===e&&(e=0),{name:\"offset\",options:e,async fn(i){const{x:r,y:a}=i,l=await async function(e,i){const{placement:r,platform:a,elements:l}=e,s=await(null==a.isRTL?void 0:a.isRTL(l.floating)),c=n(r),f=t(r),m=\"x\"===o(r),u=[\"left\",\"top\"].includes(c)?-1:1,g=s&&m?-1:1,d=\"function\"==typeof i?i(e):i;let{mainAxis:p,crossAxis:h,alignmentAxis:y}=\"number\"==typeof d?{mainAxis:d,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...d};return f&&\"number\"==typeof y&&(h=\"end\"===f?-1*y:y),m?{x:h*g,y:p*u}:{x:p*u,y:h*g}}(i,e);return{x:r+l.x,y:a+l.y,data:l}}}};function L(t){return\"x\"===t?\"y\":\"x\"}const k=function(t){return void 0===t&&(t={}),{name:\"shift\",options:t,async fn(e){const{x:i,y:r,placement:a}=e,{mainAxis:l=!0,crossAxis:c=!1,limiter:f={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...u}=t,g={x:i,y:r},d=await s(e,u),p=o(n(a)),h=L(p);let y=g[p],x=g[h];if(l){const t=\"y\"===p?\"bottom\":\"right\";y=m(y+d[\"y\"===p?\"top\":\"left\"],y,y-d[t])}if(c){const t=\"y\"===h?\"bottom\":\"right\";x=m(x+d[\"y\"===h?\"top\":\"left\"],x,x-d[t])}const w=f.fn({...e,[p]:y,[h]:x});return{...w,data:{x:w.x-i,y:w.y-r}}}}},O=function(t){return void 0===t&&(t={}),{options:t,fn(e){const{x:i,y:r,placement:a,rects:l,middlewareData:s}=e,{offset:c=0,mainAxis:f=!0,crossAxis:m=!0}=t,u={x:i,y:r},g=o(a),d=L(g);let p=u[g],h=u[d];const y=\"function\"==typeof c?c(e):c,x=\"number\"==typeof y?{mainAxis:y,crossAxis:0}:{mainAxis:0,crossAxis:0,...y};if(f){const t=\"y\"===g?\"height\":\"width\",e=l.reference[g]-l.floating[t]+x.mainAxis,n=l.reference[g]+l.reference[t]-x.mainAxis;pn&&(p=n)}if(m){var w,v;const t=\"y\"===g?\"width\":\"height\",e=[\"top\",\"left\"].includes(n(a)),o=l.reference[d]-l.floating[t]+(e&&(null==(w=s.offset)?void 0:w[d])||0)+(e?0:x.crossAxis),i=l.reference[d]+l.reference[t]+(e?0:(null==(v=s.offset)?void 0:v[d])||0)-(e?x.crossAxis:0);hi&&(h=i)}return{[g]:p,[d]:h}}}},B=function(e){return void 0===e&&(e={}),{name:\"size\",options:e,async fn(i){const{placement:r,rects:a,platform:l,elements:m}=i,{apply:u=(()=>{}),...g}=e,d=await s(i,g),p=n(r),h=t(r),y=\"x\"===o(r),{width:x,height:w}=a.floating;let v,b;\"top\"===p||\"bottom\"===p?(v=p,b=h===(await(null==l.isRTL?void 0:l.isRTL(m.floating))?\"start\":\"end\")?\"left\":\"right\"):(b=p,v=\"end\"===h?\"top\":\"bottom\");const A=w-d[v],R=x-d[b],P=!i.middlewareData.shift;let E=A,T=R;if(y){const t=x-d.left-d.right;T=h||P?c(R,t):t}else{const t=w-d.top-d.bottom;E=h||P?c(A,t):t}if(P&&!h){const t=f(d.left,0),e=f(d.right,0),n=f(d.top,0),o=f(d.bottom,0);y?T=x-2*(0!==t||0!==e?t+e:f(d.left,d.right)):E=w-2*(0!==n||0!==o?n+o:f(d.top,d.bottom))}await u({...i,availableWidth:T,availableHeight:E});const D=await l.getDimensions(m.floating);return x!==D.width||w!==D.height?{reset:{rects:!0}}:{}}}};export{u as arrow,v as autoPlacement,r as computePosition,s as detectOverflow,b as flip,P as hide,T as inline,O as limitShift,D as offset,l as rectToClientRect,k as shift,B as size};\n","import{rectToClientRect as t,computePosition as e}from\"@floating-ui/core\";export{arrow,autoPlacement,detectOverflow,flip,hide,inline,limitShift,offset,shift,size}from\"@floating-ui/core\";function n(t){var e;return(null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function o(t){return n(t).getComputedStyle(t)}function i(t){return t instanceof n(t).Node}function r(t){return i(t)?(t.nodeName||\"\").toLowerCase():\"\"}let l;function c(){if(l)return l;const t=navigator.userAgentData;return t&&Array.isArray(t.brands)?(l=t.brands.map((t=>t.brand+\"/\"+t.version)).join(\" \"),l):navigator.userAgent}function s(t){return t instanceof n(t).HTMLElement}function f(t){return t instanceof n(t).Element}function u(t){if(\"undefined\"==typeof ShadowRoot)return!1;return t instanceof n(t).ShadowRoot||t instanceof ShadowRoot}function a(t){const{overflow:e,overflowX:n,overflowY:i,display:r}=o(t);return/auto|scroll|overlay|hidden|clip/.test(e+i+n)&&![\"inline\",\"contents\"].includes(r)}function d(t){return[\"table\",\"td\",\"th\"].includes(r(t))}function h(t){const e=/firefox/i.test(c()),n=o(t),i=n.backdropFilter||n.WebkitBackdropFilter;return\"none\"!==n.transform||\"none\"!==n.perspective||!!i&&\"none\"!==i||e&&\"filter\"===n.willChange||e&&!!n.filter&&\"none\"!==n.filter||[\"transform\",\"perspective\"].some((t=>n.willChange.includes(t)))||[\"paint\",\"layout\",\"strict\",\"content\"].some((t=>{const e=n.contain;return null!=e&&e.includes(t)}))}function p(){return/^((?!chrome|android).)*safari/i.test(c())}function g(t){return[\"html\",\"body\",\"#document\"].includes(r(t))}const m=Math.min,y=Math.max,x=Math.round;function w(t){const e=o(t);let n=parseFloat(e.width),i=parseFloat(e.height);const r=s(t),l=r?t.offsetWidth:n,c=r?t.offsetHeight:i,f=x(n)!==l||x(i)!==c;return f&&(n=l,i=c),{width:n,height:i,fallback:f}}function v(t){return f(t)?t:t.contextElement}const b={x:1,y:1};function L(t){const e=v(t);if(!s(e))return b;const n=e.getBoundingClientRect(),{width:o,height:i,fallback:r}=w(e);let l=(r?x(n.width):n.width)/o,c=(r?x(n.height):n.height)/i;return l&&Number.isFinite(l)||(l=1),c&&Number.isFinite(c)||(c=1),{x:l,y:c}}function E(e,o,i,r){var l,c;void 0===o&&(o=!1),void 0===i&&(i=!1);const s=e.getBoundingClientRect(),u=v(e);let a=b;o&&(r?f(r)&&(a=L(r)):a=L(e));const d=u?n(u):window,h=p()&&i;let g=(s.left+(h&&(null==(l=d.visualViewport)?void 0:l.offsetLeft)||0))/a.x,m=(s.top+(h&&(null==(c=d.visualViewport)?void 0:c.offsetTop)||0))/a.y,y=s.width/a.x,x=s.height/a.y;if(u){const t=n(u),e=r&&f(r)?n(r):r;let o=t.frameElement;for(;o&&r&&e!==t;){const t=L(o),e=o.getBoundingClientRect(),i=getComputedStyle(o);e.x+=(o.clientLeft+parseFloat(i.paddingLeft))*t.x,e.y+=(o.clientTop+parseFloat(i.paddingTop))*t.y,g*=t.x,m*=t.y,y*=t.x,x*=t.y,g+=e.x,m+=e.y,o=n(o).frameElement}}return t({width:y,height:x,x:g,y:m})}function T(t){return((i(t)?t.ownerDocument:t.document)||window.document).documentElement}function R(t){return f(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function C(t){return E(T(t)).left+R(t).scrollLeft}function F(t){if(\"html\"===r(t))return t;const e=t.assignedSlot||t.parentNode||u(t)&&t.host||T(t);return u(e)?e.host:e}function W(t){const e=F(t);return g(e)?e.ownerDocument.body:s(e)&&a(e)?e:W(e)}function D(t,e){var o;void 0===e&&(e=[]);const i=W(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=n(i);return r?e.concat(l,l.visualViewport||[],a(i)?i:[]):e.concat(i,D(i))}function S(e,i,r){let l;if(\"viewport\"===i)l=function(t,e){const o=n(t),i=T(t),r=o.visualViewport;let l=i.clientWidth,c=i.clientHeight,s=0,f=0;if(r){l=r.width,c=r.height;const t=p();(!t||t&&\"fixed\"===e)&&(s=r.offsetLeft,f=r.offsetTop)}return{width:l,height:c,x:s,y:f}}(e,r);else if(\"document\"===i)l=function(t){const e=T(t),n=R(t),i=t.ownerDocument.body,r=y(e.scrollWidth,e.clientWidth,i.scrollWidth,i.clientWidth),l=y(e.scrollHeight,e.clientHeight,i.scrollHeight,i.clientHeight);let c=-n.scrollLeft+C(t);const s=-n.scrollTop;return\"rtl\"===o(i).direction&&(c+=y(e.clientWidth,i.clientWidth)-r),{width:r,height:l,x:c,y:s}}(T(e));else if(f(i))l=function(t,e){const n=E(t,!0,\"fixed\"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=s(t)?L(t):{x:1,y:1};return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(i,r);else{const t={...i};if(p()){var c,u;const o=n(e);t.x-=(null==(c=o.visualViewport)?void 0:c.offsetLeft)||0,t.y-=(null==(u=o.visualViewport)?void 0:u.offsetTop)||0}l=t}return t(l)}function A(t,e){return s(t)&&\"fixed\"!==o(t).position?e?e(t):t.offsetParent:null}function H(t,e){const i=n(t);if(!s(t))return i;let l=A(t,e);for(;l&&d(l)&&\"static\"===o(l).position;)l=A(l,e);return l&&(\"html\"===r(l)||\"body\"===r(l)&&\"static\"===o(l).position&&!h(l))?i:l||function(t){let e=F(t);for(;s(e)&&!g(e);){if(h(e))return e;e=F(e)}return null}(t)||i}function V(t,e,n){const o=s(e),i=T(e),l=E(t,!0,\"fixed\"===n,e);let c={scrollLeft:0,scrollTop:0};const f={x:0,y:0};if(o||!o&&\"fixed\"!==n)if((\"body\"!==r(e)||a(i))&&(c=R(e)),s(e)){const t=E(e,!0);f.x=t.x+e.clientLeft,f.y=t.y+e.clientTop}else i&&(f.x=C(i));return{x:l.left+c.scrollLeft-f.x,y:l.top+c.scrollTop-f.y,width:l.width,height:l.height}}const O={getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:i,strategy:l}=t;const c=\"clippingAncestors\"===n?function(t,e){const n=e.get(t);if(n)return n;let i=D(t).filter((t=>f(t)&&\"body\"!==r(t))),l=null;const c=\"fixed\"===o(t).position;let s=c?F(t):t;for(;f(s)&&!g(s);){const t=o(s),e=h(s);\"fixed\"===t.position&&(l=null),(c?e||l:e||\"static\"!==t.position||!l||![\"absolute\",\"fixed\"].includes(l.position))?l=t:i=i.filter((t=>t!==s)),s=F(s)}return e.set(t,i),i}(e,this._c):[].concat(n),s=[...c,i],u=s[0],a=s.reduce(((t,n)=>{const o=S(e,n,l);return t.top=y(o.top,t.top),t.right=m(o.right,t.right),t.bottom=m(o.bottom,t.bottom),t.left=y(o.left,t.left),t}),S(e,u,l));return{width:a.right-a.left,height:a.bottom-a.top,x:a.left,y:a.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{rect:e,offsetParent:n,strategy:o}=t;const i=s(n),l=T(n);if(n===l)return e;let c={scrollLeft:0,scrollTop:0},f={x:1,y:1};const u={x:0,y:0};if((i||!i&&\"fixed\"!==o)&&((\"body\"!==r(n)||a(l))&&(c=R(n)),s(n))){const t=E(n);f=L(n),u.x=t.x+n.clientLeft,u.y=t.y+n.clientTop}return{width:e.width*f.x,height:e.height*f.y,x:e.x*f.x-c.scrollLeft*f.x+u.x,y:e.y*f.y-c.scrollTop*f.y+u.y}},isElement:f,getDimensions:function(t){return w(t)},getOffsetParent:H,getDocumentElement:T,getScale:L,async getElementRects(t){let{reference:e,floating:n,strategy:o}=t;const i=this.getOffsetParent||H,r=this.getDimensions;return{reference:V(e,await i(n),o),floating:{x:0,y:0,...await r(n)}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>\"rtl\"===o(t).direction};function P(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:l=!0,animationFrame:c=!1}=o,s=i&&!c,u=s||r?[...f(t)?D(t):t.contextElement?D(t.contextElement):[],...D(e)]:[];u.forEach((t=>{s&&t.addEventListener(\"scroll\",n,{passive:!0}),r&&t.addEventListener(\"resize\",n)}));let a,d=null;l&&(d=new ResizeObserver((()=>{n()})),f(t)&&!c&&d.observe(t),f(t)||!t.contextElement||c||d.observe(t.contextElement),d.observe(e));let h=c?E(t):null;return c&&function e(){const o=E(t);!h||o.x===h.x&&o.y===h.y&&o.width===h.width&&o.height===h.height||n();h=o,a=requestAnimationFrame(e)}(),n(),()=>{var t;u.forEach((t=>{s&&t.removeEventListener(\"scroll\",n),r&&t.removeEventListener(\"resize\",n)})),null==(t=d)||t.disconnect(),d=null,c&&cancelAnimationFrame(a)}}const z=(t,n,o)=>{const i=new Map,r={platform:O,...o},l={...r.platform,_c:i};return e(t,n,{...r,platform:l})};export{P as autoUpdate,z as computePosition,D as getOverflowAncestors,O as platform};\n","/*\n* React Tooltip\n* {@link https://github.com/ReactTooltip/react-tooltip}\n* @copyright ReactTooltip Team\n* @license MIT\n*/\nimport e,{createContext as t,useState as o,useCallback as l,useMemo as r,useContext as n,useRef as c,useEffect as i,useLayoutEffect as s,useImperativeHandle as a}from\"react\";import{arrow as d,computePosition as u,offset as p,flip as v,shift as m,autoUpdate as f}from\"@floating-ui/dom\";import y from\"classnames\";const h=\"react-tooltip-core-styles\",w=\"react-tooltip-base-styles\",b={core:!1,base:!1};function S({css:e,id:t=w,type:o=\"base\",ref:l}){var r,n;if(!e||\"undefined\"==typeof document||b[o])return;if(\"core\"===o&&\"undefined\"!=typeof process&&(null===(r=null===process||void 0===process?void 0:process.env)||void 0===r?void 0:r.REACT_TOOLTIP_DISABLE_CORE_STYLES))return;if(\"base\"!==o&&\"undefined\"!=typeof process&&(null===(n=null===process||void 0===process?void 0:process.env)||void 0===n?void 0:n.REACT_TOOLTIP_DISABLE_BASE_STYLES))return;\"core\"===o&&(t=h),l||(l={});const{insertAt:c}=l;if(document.getElementById(t))return void console.warn(`[react-tooltip] Element with id '${t}' already exists. Call \\`removeStyle()\\` first`);const i=document.head||document.getElementsByTagName(\"head\")[0],s=document.createElement(\"style\");s.id=t,s.type=\"text/css\",\"top\"===c&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e)),b[o]=!0}function E({type:e=\"base\",id:t=w}={}){if(!b[e])return;\"core\"===e&&(t=h);const o=document.getElementById(t);\"style\"===(null==o?void 0:o.tagName)?null==o||o.remove():console.warn(`[react-tooltip] Failed to remove 'style' element with id '${t}'. Call \\`injectStyle()\\` first`),b[e]=!1}const g=(e,t,o)=>{let l=null;return function(...r){const n=()=>{l=null,o||e.apply(this,r)};o&&!l&&(e.apply(this,r),l=setTimeout(n,t)),o||(l&&clearTimeout(l),l=setTimeout(n,t))}},_=\"DEFAULT_TOOLTIP_ID\",A={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},O=t({getTooltipData:()=>A}),T=({children:t})=>{const[n,c]=o({[_]:new Set}),[i,s]=o({[_]:{current:null}}),a=(e,...t)=>{c((o=>{var l;const r=null!==(l=o[e])&&void 0!==l?l:new Set;return t.forEach((e=>r.add(e))),{...o,[e]:new Set(r)}}))},d=(e,...t)=>{c((o=>{const l=o[e];return l?(t.forEach((e=>l.delete(e))),{...o}):o}))},u=l(((e=_)=>{var t,o;return{anchorRefs:null!==(t=n[e])&&void 0!==t?t:new Set,activeAnchor:null!==(o=i[e])&&void 0!==o?o:{current:null},attach:(...t)=>a(e,...t),detach:(...t)=>d(e,...t),setActiveAnchor:t=>((e,t)=>{s((o=>{var l;return(null===(l=o[e])||void 0===l?void 0:l.current)===t.current?o:{...o,[e]:t}}))})(e,t)}}),[n,i,a,d]),p=r((()=>({getTooltipData:u})),[u]);return e.createElement(O.Provider,{value:p},t)};function k(e=_){return n(O).getTooltipData(e)}const L=({tooltipId:t,children:o,className:l,place:r,content:n,html:s,variant:a,offset:d,wrapper:u,events:p,positionStrategy:v,delayShow:m,delayHide:f})=>{const{attach:h,detach:w}=k(t),b=c(null);return i((()=>(h(b),()=>{w(b)})),[]),e.createElement(\"span\",{ref:b,className:y(\"react-tooltip-wrapper\",l),\"data-tooltip-place\":r,\"data-tooltip-content\":n,\"data-tooltip-html\":s,\"data-tooltip-variant\":a,\"data-tooltip-offset\":d,\"data-tooltip-wrapper\":u,\"data-tooltip-events\":p,\"data-tooltip-position-strategy\":v,\"data-tooltip-delay-show\":m,\"data-tooltip-delay-hide\":f},o)},C=\"undefined\"!=typeof window?s:i,R=e=>{if(!(e instanceof HTMLElement||e instanceof SVGElement))return!1;const t=getComputedStyle(e);return[\"overflow\",\"overflow-x\",\"overflow-y\"].some((e=>{const o=t.getPropertyValue(e);return\"auto\"===o||\"scroll\"===o}))},x=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(R(t))return t;t=t.parentElement}return document.scrollingElement||document.documentElement},N=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:l=\"top\",offset:r=10,strategy:n=\"absolute\",middlewares:c=[p(Number(r)),v(),m({padding:5})],border:i})=>{if(!e)return{tooltipStyles:{},tooltipArrowStyles:{},place:l};if(null===t)return{tooltipStyles:{},tooltipArrowStyles:{},place:l};const s=c;return o?(s.push(d({element:o,padding:5})),u(e,t,{placement:l,strategy:n,middleware:s}).then((({x:e,y:t,placement:o,middlewareData:l})=>{var r,n;const c={left:`${e}px`,top:`${t}px`,border:i},{x:s,y:a}=null!==(r=l.arrow)&&void 0!==r?r:{x:0,y:0},d=null!==(n={top:\"bottom\",right:\"left\",bottom:\"top\",left:\"right\"}[o.split(\"-\")[0]])&&void 0!==n?n:\"bottom\",u=i&&{borderBottom:i,borderRight:i};let p=0;if(i){const e=`${i}`.match(/(\\d+)px/);p=(null==e?void 0:e[1])?Number(e[1]):1}return{tooltipStyles:c,tooltipArrowStyles:{left:null!=s?`${s}px`:\"\",top:null!=a?`${a}px`:\"\",right:\"\",bottom:\"\",...u,[d]:`-${4+p}px`},place:o}}))):u(e,t,{placement:\"bottom\",strategy:n,middleware:s}).then((({x:e,y:t,placement:o})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:o})))};var $={tooltip:\"core-styles-module_tooltip__3vRRp\",fixed:\"core-styles-module_fixed__pcSol\",arrow:\"core-styles-module_arrow__cvMwQ\",noArrow:\"core-styles-module_noArrow__xock6\",clickable:\"core-styles-module_clickable__ZuTTB\",show:\"core-styles-module_show__Nt9eE\",closing:\"core-styles-module_closing__sGnxF\"},j={tooltip:\"styles-module_tooltip__mnnfp\",arrow:\"styles-module_arrow__K0L3T\",dark:\"styles-module_dark__xNqje\",light:\"styles-module_light__Z6W-X\",success:\"styles-module_success__A2AKt\",warning:\"styles-module_warning__SCK0X\",error:\"styles-module_error__JvumD\",info:\"styles-module_info__BWdHW\"};const I=({forwardRef:t,id:r,className:n,classNameArrow:s,variant:d=\"dark\",anchorId:u,anchorSelect:p,place:v=\"top\",offset:m=10,events:h=[\"hover\"],openOnClick:w=!1,positionStrategy:b=\"absolute\",middlewares:S,wrapper:E,delayShow:_=0,delayHide:A=0,float:O=!1,hidden:T=!1,noArrow:L=!1,clickable:R=!1,closeOnEsc:I=!1,closeOnScroll:B=!1,closeOnResize:z=!1,openEvents:D,closeEvents:q,globalCloseEvents:H,imperativeModeOnly:M,style:W,position:P,afterShow:F,afterHide:K,content:U,contentWrapperRef:X,isOpen:Y,setIsOpen:G,activeAnchor:V,setActiveAnchor:Z,border:J,opacity:Q,arrowColor:ee,role:te=\"tooltip\"})=>{var oe;const le=c(null),re=c(null),ne=c(null),ce=c(null),[ie,se]=o(v),[ae,de]=o({}),[ue,pe]=o({}),[ve,me]=o(!1),[fe,ye]=o(!1),[he,we]=o(null),be=c(!1),Se=c(null),{anchorRefs:Ee,setActiveAnchor:ge}=k(r),_e=c(!1),[Ae,Oe]=o([]),Te=c(!1),ke=w||h.includes(\"click\"),Le=ke||(null==D?void 0:D.click)||(null==D?void 0:D.dblclick)||(null==D?void 0:D.mousedown),Ce=D?{...D}:{mouseenter:!0,focus:!0,click:!1,dblclick:!1,mousedown:!1};!D&&ke&&Object.assign(Ce,{mouseenter:!1,focus:!1,click:!0});const Re=q?{...q}:{mouseleave:!0,blur:!0,click:!1,dblclick:!1,mouseup:!1};!q&&ke&&Object.assign(Re,{mouseleave:!1,blur:!1});const xe=H?{...H}:{escape:I||!1,scroll:B||!1,resize:z||!1,clickOutsideAnchor:Le||!1};M&&(Object.assign(Ce,{mouseenter:!1,focus:!1,click:!1,dblclick:!1,mousedown:!1}),Object.assign(Re,{mouseleave:!1,blur:!1,click:!1,dblclick:!1,mouseup:!1}),Object.assign(xe,{escape:!1,scroll:!1,resize:!1,clickOutsideAnchor:!1})),C((()=>(Te.current=!0,()=>{Te.current=!1})),[]);const Ne=e=>{Te.current&&(e&&ye(!0),setTimeout((()=>{Te.current&&(null==G||G(e),void 0===Y&&me(e))}),10))};i((()=>{if(void 0===Y)return()=>null;Y&&ye(!0);const e=setTimeout((()=>{me(Y)}),10);return()=>{clearTimeout(e)}}),[Y]),i((()=>{ve!==be.current&&(be.current=ve,ve&&(null==F||F()))}),[ve]);const $e=(e=_)=>{ne.current&&clearTimeout(ne.current),ne.current=setTimeout((()=>{Ne(!0)}),e)},je=(e=A)=>{ce.current&&clearTimeout(ce.current),ce.current=setTimeout((()=>{_e.current||Ne(!1)}),e)},Ie=e=>{var t;if(!e)return;const o=null!==(t=e.currentTarget)&&void 0!==t?t:e.target;if(!(null==o?void 0:o.isConnected))return Z(null),void ge({current:null});_?$e():Ne(!0),Z(o),ge({current:o}),ce.current&&clearTimeout(ce.current)},Be=()=>{R?je(A||100):A?je():Ne(!1),ne.current&&clearTimeout(ne.current)},ze=({x:e,y:t})=>{var o;const l={getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})};N({place:null!==(o=null==he?void 0:he.place)&&void 0!==o?o:v,offset:m,elementReference:l,tooltipReference:le.current,tooltipArrowReference:re.current,strategy:b,middlewares:S,border:J}).then((e=>{Object.keys(e.tooltipStyles).length&&de(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&pe(e.tooltipArrowStyles),se(e.place)}))},De=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};ze(o),Se.current=o},qe=e=>{var t;if(!ve)return;const o=e.target;if(null===(t=le.current)||void 0===t?void 0:t.contains(o))return;[document.querySelector(`[id='${u}']`),...Ae].some((e=>null==e?void 0:e.contains(o)))||(Ne(!1),ne.current&&clearTimeout(ne.current))},He=g(Ie,50,!0),Me=g(Be,50,!0),We=l((()=>{var e,t;const o=null!==(e=null==he?void 0:he.position)&&void 0!==e?e:P;o?ze(o):O?Se.current&&ze(Se.current):(null==V?void 0:V.isConnected)&&N({place:null!==(t=null==he?void 0:he.place)&&void 0!==t?t:v,offset:m,elementReference:V,tooltipReference:le.current,tooltipArrowReference:re.current,strategy:b,middlewares:S,border:J}).then((e=>{Te.current&&(Object.keys(e.tooltipStyles).length&&de(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&pe(e.tooltipArrowStyles),se(e.place))}))}),[ve,V,U,W,v,null==he?void 0:he.place,m,b,P,null==he?void 0:he.position,O]);i((()=>{var e,t;const o=new Set(Ee);Ae.forEach((e=>{o.add({current:e})}));const l=document.querySelector(`[id='${u}']`);l&&o.add({current:l});const r=()=>{Ne(!1)},n=x(V),c=x(le.current);xe.scroll&&(window.addEventListener(\"scroll\",r),null==n||n.addEventListener(\"scroll\",r),null==c||c.addEventListener(\"scroll\",r));let i=null;xe.resize?window.addEventListener(\"resize\",r):V&&le.current&&(i=f(V,le.current,We,{ancestorResize:!0,elementResize:!0,layoutShift:!0}));const s=e=>{\"Escape\"===e.key&&Ne(!1)};xe.escape&&window.addEventListener(\"keydown\",s),xe.clickOutsideAnchor&&window.addEventListener(\"click\",qe);const a=[],d=e=>{ve||Ie(e)},p=()=>{ve&&Be()},v=[\"mouseenter\",\"mouseleave\",\"focus\",\"blur\"],m=[\"click\",\"dblclick\",\"mousedown\",\"mouseup\"];Object.entries(Ce).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:He}):m.includes(e)&&a.push({event:e,listener:d}))})),Object.entries(Re).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:Me}):m.includes(e)&&a.push({event:e,listener:p}))})),O&&a.push({event:\"mousemove\",listener:De});const y=()=>{_e.current=!0},h=()=>{_e.current=!1,Be()};return R&&!Le&&(null===(e=le.current)||void 0===e||e.addEventListener(\"mouseenter\",y),null===(t=le.current)||void 0===t||t.addEventListener(\"mouseleave\",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var l;null===(l=o.current)||void 0===l||l.addEventListener(e,t)}))})),()=>{var e,t;xe.scroll&&(window.removeEventListener(\"scroll\",r),null==n||n.removeEventListener(\"scroll\",r),null==c||c.removeEventListener(\"scroll\",r)),xe.resize?window.removeEventListener(\"resize\",r):null==i||i(),xe.clickOutsideAnchor&&window.removeEventListener(\"click\",qe),xe.escape&&window.removeEventListener(\"keydown\",s),R&&!Le&&(null===(e=le.current)||void 0===e||e.removeEventListener(\"mouseenter\",y),null===(t=le.current)||void 0===t||t.removeEventListener(\"mouseleave\",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var l;null===(l=o.current)||void 0===l||l.removeEventListener(e,t)}))}))}}),[V,We,fe,Ee,Ae,D,q,H,ke]),i((()=>{var e,t;let o=null!==(t=null!==(e=null==he?void 0:he.anchorSelect)&&void 0!==e?e:p)&&void 0!==t?t:\"\";!o&&r&&(o=`[data-tooltip-id='${r}']`);const l=new MutationObserver((e=>{const t=[],l=[];e.forEach((e=>{if(\"attributes\"===e.type&&\"data-tooltip-id\"===e.attributeName){e.target.getAttribute(\"data-tooltip-id\")===r&&t.push(e.target)}if(\"childList\"===e.type){if(V){const t=[...e.removedNodes].filter((e=>1===e.nodeType));if(o)try{l.push(...t.filter((e=>e.matches(o)))),l.push(...t.flatMap((e=>[...e.querySelectorAll(o)])))}catch(e){}t.some((e=>{var t;return!!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,V))&&(ye(!1),Ne(!1),Z(null),ne.current&&clearTimeout(ne.current),ce.current&&clearTimeout(ce.current),!0)}))}if(o)try{const l=[...e.addedNodes].filter((e=>1===e.nodeType));t.push(...l.filter((e=>e.matches(o)))),t.push(...l.flatMap((e=>[...e.querySelectorAll(o)])))}catch(e){}}})),(t.length||l.length)&&Oe((e=>[...e.filter((e=>!l.includes(e))),...t]))}));return l.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[\"data-tooltip-id\"]}),()=>{l.disconnect()}}),[r,p,null==he?void 0:he.anchorSelect,V]),i((()=>{We()}),[We]),i((()=>{if(!(null==X?void 0:X.current))return()=>null;const e=new ResizeObserver((()=>{We()}));return e.observe(X.current),()=>{e.disconnect()}}),[U,null==X?void 0:X.current]),i((()=>{var e;const t=document.querySelector(`[id='${u}']`),o=[...Ae,t];V&&o.includes(V)||Z(null!==(e=Ae[0])&&void 0!==e?e:t)}),[u,Ae,V]),i((()=>()=>{ne.current&&clearTimeout(ne.current),ce.current&&clearTimeout(ce.current)}),[]),i((()=>{var e;let t=null!==(e=null==he?void 0:he.anchorSelect)&&void 0!==e?e:p;if(!t&&r&&(t=`[data-tooltip-id='${r}']`),t)try{const e=Array.from(document.querySelectorAll(t));Oe(e)}catch(e){Oe([])}}),[r,p,null==he?void 0:he.anchorSelect]);const Pe=null!==(oe=null==he?void 0:he.content)&&void 0!==oe?oe:U,Fe=ve&&Object.keys(ae).length>0;return a(t,(()=>({open:e=>{if(null==e?void 0:e.anchorSelect)try{document.querySelector(e.anchorSelect)}catch(t){return void console.warn(`[react-tooltip] \"${e.anchorSelect}\" is not a valid CSS selector`)}we(null!=e?e:null),(null==e?void 0:e.delay)?$e(e.delay):Ne(!0)},close:e=>{(null==e?void 0:e.delay)?je(e.delay):Ne(!1)},activeAnchor:V,place:ie,isOpen:Boolean(fe&&!T&&Pe&&Fe)}))),fe&&!T&&Pe?e.createElement(E,{id:r,role:te,className:y(\"react-tooltip\",$.tooltip,j.tooltip,j[d],n,`react-tooltip__place-${ie}`,$[Fe?\"show\":\"closing\"],Fe?\"react-tooltip__show\":\"react-tooltip__closing\",\"fixed\"===b&&$.fixed,R&&$.clickable),onTransitionEnd:e=>{ve||\"opacity\"!==e.propertyName||(ye(!1),we(null),null==K||K())},style:{...W,...ae,opacity:void 0!==Q&&Fe?Q:void 0},ref:le},Pe,e.createElement(E,{className:y(\"react-tooltip-arrow\",$.arrow,j.arrow,s,L&&$.noArrow),style:{...ue,background:ee?`linear-gradient(to right bottom, transparent 50%, ${ee} 50%)`:void 0},ref:re})):null},B=({content:t})=>e.createElement(\"span\",{dangerouslySetInnerHTML:{__html:t}}),z=(e,t)=>!(\"CSS\"in window&&\"supports\"in window.CSS)||window.CSS.supports(e,t),D=e.forwardRef((({id:t,anchorId:l,anchorSelect:r,content:n,html:s,render:a,className:d,classNameArrow:u,variant:p=\"dark\",place:v=\"top\",offset:m=10,wrapper:f=\"div\",children:y=null,events:h=[\"hover\"],openOnClick:w=!1,positionStrategy:b=\"absolute\",middlewares:S,delayShow:E=0,delayHide:g=0,float:_=!1,hidden:A=!1,noArrow:O=!1,clickable:T=!1,closeOnEsc:L=!1,closeOnScroll:C=!1,closeOnResize:R=!1,openEvents:x,closeEvents:N,globalCloseEvents:$,imperativeModeOnly:j=!1,style:D,position:q,isOpen:H,disableStyleInjection:M=!1,border:W,opacity:P,arrowColor:F,setIsOpen:K,afterShow:U,afterHide:X,role:Y=\"tooltip\"},G)=>{const[V,Z]=o(n),[J,Q]=o(s),[ee,te]=o(v),[oe,le]=o(p),[re,ne]=o(m),[ce,ie]=o(E),[se,ae]=o(g),[de,ue]=o(_),[pe,ve]=o(A),[me,fe]=o(f),[ye,he]=o(h),[we,be]=o(b),[Se,Ee]=o(null),ge=c(M),{anchorRefs:_e,activeAnchor:Ae}=k(t),Oe=e=>null==e?void 0:e.getAttributeNames().reduce(((t,o)=>{var l;if(o.startsWith(\"data-tooltip-\")){t[o.replace(/^data-tooltip-/,\"\")]=null!==(l=null==e?void 0:e.getAttribute(o))&&void 0!==l?l:null}return t}),{}),Te=e=>{const t={place:e=>{var t;te(null!==(t=e)&&void 0!==t?t:v)},content:e=>{Z(null!=e?e:n)},html:e=>{Q(null!=e?e:s)},variant:e=>{var t;le(null!==(t=e)&&void 0!==t?t:p)},offset:e=>{ne(null===e?m:Number(e))},wrapper:e=>{var t;fe(null!==(t=e)&&void 0!==t?t:f)},events:e=>{const t=null==e?void 0:e.split(\" \");he(null!=t?t:h)},\"position-strategy\":e=>{var t;be(null!==(t=e)&&void 0!==t?t:b)},\"delay-show\":e=>{ie(null===e?E:Number(e))},\"delay-hide\":e=>{ae(null===e?g:Number(e))},float:e=>{ue(null===e?_:\"true\"===e)},hidden:e=>{ve(null===e?A:\"true\"===e)}};Object.values(t).forEach((e=>e(null))),Object.entries(e).forEach((([e,o])=>{var l;null===(l=t[e])||void 0===l||l.call(t,o)}))};i((()=>{Z(n)}),[n]),i((()=>{Q(s)}),[s]),i((()=>{te(v)}),[v]),i((()=>{le(p)}),[p]),i((()=>{ne(m)}),[m]),i((()=>{ie(E)}),[E]),i((()=>{ae(g)}),[g]),i((()=>{ue(_)}),[_]),i((()=>{ve(A)}),[A]),i((()=>{be(b)}),[b]),i((()=>{ge.current!==M&&console.warn(\"[react-tooltip] Do not change `disableStyleInjection` dynamically.\")}),[M]),i((()=>{\"undefined\"!=typeof window&&window.dispatchEvent(new CustomEvent(\"react-tooltip-inject-styles\",{detail:{disableCore:\"core\"===M,disableBase:M}}))}),[]),i((()=>{var e;const o=new Set(_e);let n=r;if(!n&&t&&(n=`[data-tooltip-id='${t}']`),n)try{document.querySelectorAll(n).forEach((e=>{o.add({current:e})}))}catch(e){console.warn(`[react-tooltip] \"${n}\" is not a valid CSS selector`)}const c=document.querySelector(`[id='${l}']`);if(c&&o.add({current:c}),!o.size)return()=>null;const i=null!==(e=null!=Se?Se:c)&&void 0!==e?e:Ae.current,s=new MutationObserver((e=>{e.forEach((e=>{var t;if(!i||\"attributes\"!==e.type||!(null===(t=e.attributeName)||void 0===t?void 0:t.startsWith(\"data-tooltip-\")))return;const o=Oe(i);Te(o)}))})),a={attributes:!0,childList:!1,subtree:!1};if(i){const e=Oe(i);Te(e),s.observe(i,a)}return()=>{s.disconnect()}}),[_e,Ae,Se,l,r]),i((()=>{(null==D?void 0:D.border)&&console.warn(\"[react-tooltip] Do not set `style.border`. Use `border` prop instead.\"),W&&!z(\"border\",`${W}`)&&console.warn(`[react-tooltip] \"${W}\" is not a valid \\`border\\`.`),(null==D?void 0:D.opacity)&&console.warn(\"[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead.\"),P&&!z(\"opacity\",`${P}`)&&console.warn(`[react-tooltip] \"${P}\" is not a valid \\`opacity\\`.`)}),[]);let ke=y;const Le=c(null);if(a){const t=a({content:null!=V?V:null,activeAnchor:Se});ke=t?e.createElement(\"div\",{ref:Le,className:\"react-tooltip-content-wrapper\"},t):null}else V&&(ke=V);J&&(ke=e.createElement(B,{content:J}));const Ce={forwardRef:G,id:t,anchorId:l,anchorSelect:r,className:d,classNameArrow:u,content:ke,contentWrapperRef:Le,place:ee,variant:oe,offset:re,wrapper:me,events:ye,openOnClick:w,positionStrategy:we,middlewares:S,delayShow:ce,delayHide:se,float:de,hidden:pe,noArrow:O,clickable:T,closeOnEsc:L,closeOnScroll:C,closeOnResize:R,openEvents:x,closeEvents:N,globalCloseEvents:$,imperativeModeOnly:j,style:D,position:q,isOpen:H,border:W,opacity:P,arrowColor:F,setIsOpen:K,afterShow:U,afterHide:X,activeAnchor:Se,setActiveAnchor:e=>Ee(e),role:Y};return e.createElement(I,{...Ce})}));\"undefined\"!=typeof window&&window.addEventListener(\"react-tooltip-inject-styles\",(e=>{e.detail.disableCore||S({css:`:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s}.core-styles-module_tooltip__3vRRp{position:absolute;top:0;left:0;pointer-events:none;opacity:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay)ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay)ease-in}`,type:\"core\"}),e.detail.disableBase||S({css:`\n.styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px}[class*='react-tooltip__place-top']>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*='react-tooltip__place-right']>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*='react-tooltip__place-bottom']>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*='react-tooltip__place-left']>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,type:\"base\"})}));export{D as Tooltip,T as TooltipProvider,L as TooltipWrapper,E as removeStyle};\n","import { useTranslation } from 'react-i18next';\r\nimport { Tooltip } from 'react-tooltip';\r\nimport { PackageInfoIcon } from 'shared-widget-components/src/components/Icons';\r\nimport { useWineContentInfo } from '../hooks/useWineContentInfo';\r\nimport { WinePackageWidgetModel } from 'shared-widget-components/src/services/FeaturedPackagesService';\r\n\r\ninterface WinePackageContentProps {\r\n winePackage: WinePackageWidgetModel;\r\n isShowContent: boolean;\r\n}\r\n\r\n/**\r\n * The WinePackageContent component renders the content of a wine package.\r\n * @param winePackage - The wine package to render.\r\n * @param isShowContent - The boolean value to show the content of the wine package.\r\n * @returns The WinePackageContent component is returning JSX elements.\r\n */\r\n\r\nexport const WinePackageContent = ({ winePackage, isShowContent }: WinePackageContentProps) => {\r\n const { tooltipContent, handleIconHover, handleIconLeave } = useWineContentInfo({ winePackage });\r\n\r\n const { t } = useTranslation();\r\n\r\n return (\r\n
\r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n","import { useState } from 'react';\r\nimport { WinePackageWidgetModel } from '../../../models/WinePackageWidgetModel';\r\n\r\ninterface useWineContentInfo {\r\n winePackage: WinePackageWidgetModel;\r\n}\r\n\r\n/**\r\n * The useWineContentInfo hook returns the content of a wine package.\r\n * @param winePackage - The object containing information about the wine package.\r\n * @returns The useWineContentInfo hook returns the content of a wine package.\r\n */\r\n\r\nexport const useWineContentInfo = ({ winePackage }: useWineContentInfo) => {\r\n const [tooltipContent, setTooltipContent] = useState('');\r\n\r\n // get the packages content on hover the tooltip\r\n const handleIconHover = () => {\r\n if (!winePackage?.content) return;\r\n\r\n const contentMap: { [title: string]: { count: number; productYear: number | null } } = {};\r\n\r\n winePackage.content.forEach((packageElement) => {\r\n const title = packageElement.title;\r\n const productYear = packageElement.productYear;\r\n\r\n if (!contentMap[title]) {\r\n contentMap[title] = { count: 1, productYear: productYear };\r\n } else {\r\n contentMap[title].count++;\r\n if (contentMap[title].productYear !== productYear) {\r\n contentMap[title].productYear = null;\r\n }\r\n }\r\n });\r\n\r\n const content = Object.entries(contentMap)\r\n .map(([title, { count, productYear }]) => {\r\n return `${title} ${productYear}${count > 1 ? ` x${count}` : ''}`;\r\n })\r\n .join(' ');\r\n\r\n setTooltipContent(content || '');\r\n };\r\n\r\n // reset the content when stop hovering the tooltip\r\n const handleIconLeave = () => {\r\n setTooltipContent('');\r\n };\r\n\r\n return { tooltipContent, handleIconHover, handleIconLeave };\r\n};\r\n","import { WinePackageWidgetModel } from 'shared-widget-components/src/services/FeaturedPackagesService';\r\nimport { truncateHtml } from 'shared-widget-components/src/utils/truncateHtml';\r\n\r\n/**\r\n * The WinePackageDescription component renders the description of a wine package.\r\n * @param winePackage - The wine package to render.\r\n * @returns The WinePackageDescription component is returning JSX elements.\r\n */\r\n\r\nexport const WinePackageDescription = ({ winePackage }: { winePackage: WinePackageWidgetModel }) => {\r\n // sanitize and truncate description\r\n const sanitizedTruncatedDescription = truncateHtml(winePackage.description, 70);\r\n\r\n return (\r\n
\r\n {sanitizedTruncatedDescription ?? ''}\r\n
\r\n );\r\n};\r\n","import { WinePackageWidgetModel } from '../../../models/WinePackageWidgetModel';\r\n\r\n/**\r\n * The WinePackageTitle component renders the title of a wine package.\r\n * @param winePackage - The object containing information about the wine package.\r\n * @returns The WinePackageTitle component is returning JSX elements.\r\n */\r\n\r\nexport const WinePackageTitle = ({ winePackage }: { winePackage: WinePackageWidgetModel }) => {\r\n return
{winePackage.title}
;\r\n};\r\n","import { WinePackageWidgetModel } from '../../models/WinePackageWidgetModel';\r\nimport { AvailableText, NotAvailableText } from './components/OrderableText';\r\nimport { WinePackagePrices } from './components/WinePackagePrice';\r\nimport { WinePackageContent } from './components/WinePackageContent';\r\nimport { WinePackageDescription } from './components/WinePackageDescription';\r\nimport { WinePackageTitle } from './components/WinePackageTitle';\r\n\r\ninterface WinePackageContentProps {\r\n winePackage: WinePackageWidgetModel;\r\n isShowContent: boolean;\r\n}\r\n\r\n/**\r\n * The WinePackageInfo component renders information about a wine package, including its title,\r\n * content, description, price, and availability.\r\n * @param {WinePackageContentProps} - - `winePackage`: The object containing information about the\r\n * wine package.\r\n * @returns The WinePackageInfo component is returning JSX elements.\r\n */\r\nexport const WinePackageInfo = ({ winePackage, isShowContent }: WinePackageContentProps) => {\r\n return (\r\n <>\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
{winePackage.availableQuantity > 0 ? : }
\r\n
\r\n \r\n );\r\n};\r\n","import React, { useState } from 'react';\r\nimport useAsyncEffect from 'use-async-effect';\r\nimport { WebshopColorsModel } from '../models/WebshopColorModel';\r\nimport { getWebshopColors } from '../services/WebshopColorService';\r\n\r\ninterface ColorContextInterface {\r\n buttonColor: string;\r\n buttonTextColor: string;\r\n primaryColor: string;\r\n}\r\n\r\nconst ColorContext = React.createContext({} as ColorContextInterface);\r\n\r\nexport const ColorContextProvider = ({ children }: { children: JSX.Element }) => {\r\n const [buttonColor, setButtonColor] = useState('#000000');\r\n const [buttonTextColor, setButtonTextColor] = useState('#ffffff');\r\n const [primaryColor, setPrimaryColor] = useState('#ffffff');\r\n\r\n useAsyncEffect(async () => {\r\n const webshopColors = (await getWebshopColors()) as WebshopColorsModel;\r\n\r\n const buttonColor = webshopColors.primaryButtonColor ?? '#000000';\r\n const buttonTextColor = webshopColors.primaryButtonTextColor ?? '#ffffff';\r\n const primaryColor = webshopColors.primaryColor ?? '#ffffff';\r\n\r\n setButtonColor(buttonColor);\r\n setButtonTextColor(buttonTextColor);\r\n setPrimaryColor(primaryColor);\r\n }, []);\r\n\r\n return {children};\r\n};\r\n\r\n/**\r\n * Use method\r\n * @returns\r\n */\r\nexport const useColorContext = () => {\r\n const context = React.useContext(ColorContext);\r\n\r\n if (context === undefined) {\r\n throw new Error('use must be used within a Provider');\r\n }\r\n\r\n return context;\r\n};\r\n","export const getWebshopColors = async () => {\r\n try {\r\n const response = await fetch(`/Widget/webshopcolors`, {\r\n method: 'GET',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n },\r\n });\r\n return await response.json();\r\n } catch (error) {\r\n throw new Error(`request failed, HTTP status ${error}`);\r\n }\r\n};\r\n","import { useEffect, useState } from 'react';\r\nimport useCartQuantity from './hooks/useCartQuantity';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { WinePackageWidgetModel } from '../../../models/WinePackageWidgetModel';\r\nimport { useColorContext } from 'shared-widget-components/src/providers/ColorsProvider';\r\n\r\ninterface CartComponentProps {\r\n winePackage: WinePackageWidgetModel;\r\n}\r\n\r\n// csomagkártyákon megjelenő kosár\r\nexport const CartComponent = ({ winePackage }: CartComponentProps) => {\r\n const { buttonColor, buttonTextColor } = useColorContext();\r\n const { t } = useTranslation();\r\n const { increment, decrement, cartQuantity } = useCartQuantity({ winePackage });\r\n const [isAdmin, setIsAdmin] = useState(false);\r\n\r\n // ha a kosár mennyisége megegyezik a minimum mennyiséggel, akkor a minusz gomb legyen disabled\r\n const isMinusButtonDisabled = cartQuantity === winePackage.minimumCartQuantity;\r\n // ha a kosár mennyisége megegyezik a maximum mennyiséggel, akkor a plusz gomb legyen disabled\r\n const isPlusButtonDisabled = cartQuantity === winePackage.maximumCartQuantity || cartQuantity === winePackage.availableQuantity;\r\n\r\n // determine if the user is on the admin page\r\n useEffect(() => {\r\n //@ts-ignore\r\n setIsAdmin(window.isAdminPage);\r\n }, []);\r\n\r\n const addToCart = () => {\r\n //@ts-ignore\r\n if (isAdmin) return;\r\n //@ts-ignore\r\n if (!cartHandler) return;\r\n //@ts-ignore\r\n cartHandler && cartHandler.addOrUpdateCart(winePackage.productVariantId);\r\n };\r\n\r\n return (\r\n
\r\n
\r\n \r\n -\r\n \r\n
{cartQuantity}
\r\n \r\n +\r\n \r\n \r\n
\r\n \r\n {t('winePackageWidget.cart')}\r\n \r\n
\r\n );\r\n};\r\n","import { useState } from 'react';\r\nimport { WinePackageWidgetModel } from '../../../../models/WinePackageWidgetModel';\r\n\r\ninterface UseCartQuantityProps {\r\n winePackage: WinePackageWidgetModel;\r\n}\r\n\r\n/**\r\n * The useCartQuantity hook returns the cart quantity of a wine package.\r\n * @param winePackage - The object containing information about the wine package.\r\n * @returns The useCartQuantity hook returns the cart quantity of a wine package.\r\n */\r\n\r\nconst useCartQuantity = ({ winePackage }: UseCartQuantityProps) => {\r\n const [cartQuantity, setCartQuantity] = useState(winePackage.minimumCartQuantity ?? 1);\r\n\r\n /**\r\n * The function `decrement` decreases the value of `cartQuantity` by 1 if it is greater than 1.\r\n */\r\n const decrement = () => {\r\n if (cartQuantity > 1 && cartQuantity > winePackage.minimumCartQuantity) setCartQuantity((prevState) => prevState - 1);\r\n };\r\n\r\n /**\r\n * The function `increment` increases the value of `cartQuantity` by 1 if it is less than `stock`.\r\n */\r\n const increment = () => {\r\n if (cartQuantity < winePackage.availableQuantity && cartQuantity < winePackage.maximumCartQuantity) setCartQuantity((prevState) => prevState + 1);\r\n };\r\n\r\n return { increment, decrement, cartQuantity };\r\n};\r\n\r\nexport default useCartQuantity;\r\n","type DiscountTagProps = {\r\n discount: number;\r\n};\r\n\r\n/**\r\n * The DiscountTag component renders the discount tag of a wine package.\r\n * @param discount - The discount of the wine package.\r\n * @returns The DiscountTag component is returning JSX elements.\r\n */\r\n\r\nexport const DiscountTag = ({ discount }: DiscountTagProps) => {\r\n if (discount <= 0) return <>;\r\n\r\n return
{-discount.toFixed(0)}%
;\r\n};\r\n","const CAMELCASE_REGEXP_PATTERN = '(?:[a-z](?=[A-Z])|[A-Z](?=[A-Z][a-z]))';\nfunction replace(value, dictionary) {\n for (let index = 0, length = value.length; index < length; index++) {\n const char = value[index];\n const replacement = dictionary[char] && String(dictionary[char]);\n if (replacement !== undefined) {\n value = value.slice(0, index) + replacement + value.slice(index + 1);\n const addedCharsCount = replacement.length - 1;\n index += addedCharsCount;\n length += addedCharsCount;\n }\n }\n return value;\n}\n\nconst LOWERCASE_TRANSFORMER = (fragments, separator) => {\n return fragments.join(separator).toLowerCase();\n};\nconst SENTENCECASE_TRANSFORMER = (fragments, separator) => {\n const sentence = fragments.join(separator);\n return sentence.charAt(0).toUpperCase() + sentence.slice(1).toLowerCase();\n};\nconst TITLECASE_TRANSFORMER = (fragments, separator) => {\n const buffer = [];\n for (let index = 0; index < fragments.length; index++) {\n buffer.push(fragments[index].charAt(0).toUpperCase() +\n fragments[index].slice(1).toLowerCase());\n }\n return buffer.join(separator);\n};\nconst UPPERCASE_TRANSFORMER = (fragments, separator) => {\n return fragments.join(separator).toUpperCase();\n};\n\n// eslint-disable-next-line no-misleading-character-class\nconst COMBINING_CHARS = /[\\u0300-\\u036F\\u1AB0-\\u1AFF\\u1DC0-\\u1DFF]+/g;\nconst CONVERT = /[A-Za-z\\d]+/g;\nconst CONVERT_CAMELCASE = new RegExp('[A-Za-z\\\\d]*?' + CAMELCASE_REGEXP_PATTERN + '|[A-Za-z\\\\d]+', 'g');\nfunction convert(value, { camelCase = true, dictionary, separator = '-', transformer = LOWERCASE_TRANSFORMER, } = {}) {\n const fragments = (dictionary ? replace(String(value), dictionary) : String(value))\n .normalize('NFKD')\n .replace(COMBINING_CHARS, '')\n .match(camelCase ? CONVERT_CAMELCASE : CONVERT);\n if (!fragments) {\n return '';\n }\n return transformer\n ? transformer(fragments, String(separator))\n : fragments.join(String(separator));\n}\n\nconst REVERT = /[^-._~!$&'()*+,;=]+/g;\nconst REVERT_CAMELCASE = new RegExp(\"[^-._~!$&'()*+,;=]*?\" + CAMELCASE_REGEXP_PATTERN + \"|[^-._~!$&'()*+,;=]+\", 'g');\nconst REVERT_CAMELCASE_ONLY = new RegExp('.*?' + CAMELCASE_REGEXP_PATTERN + '|.+', 'g');\nfunction revert(value, { camelCase = false, separator = null, transformer = null, } = {}) {\n let fragments;\n value = String(value);\n /* Determine which method will be used to split the slug */\n if (separator === '') {\n fragments = camelCase ? value.match(REVERT_CAMELCASE_ONLY) : [value];\n }\n else if (typeof separator === 'string') {\n fragments = value.split(separator);\n }\n else {\n fragments = value.match(camelCase ? REVERT_CAMELCASE : REVERT);\n }\n if (!fragments) {\n return '';\n }\n return transformer ? transformer(fragments, ' ') : fragments.join(' ');\n}\n\nexport { LOWERCASE_TRANSFORMER, SENTENCECASE_TRANSFORMER, TITLECASE_TRANSFORMER, UPPERCASE_TRANSFORMER, convert, convert as default, revert };\n//# sourceMappingURL=index.mjs.map\n","import { CDNImage } from 'shared-widget-components/src/components/CDNImage/CDNImage';\r\nimport { WinePackageWidgetModel } from 'shared-widget-components/src/services/FeaturedPackagesService';\r\nimport useWinePackageUrl from '../hooks/useWinePackageUrl';\r\n\r\n/**\r\n * The WinePackageImage component renders the image of a wine package.\r\n * @param winePackage - The wine package to render.\r\n * @returns The WinePackageImage component is returning JSX elements.\r\n */\r\n\r\nexport const WinePackageImage = ({ winePackage }: { winePackage: WinePackageWidgetModel }) => {\r\n const { onPackageClick } = useWinePackageUrl({ winePackage });\r\n\r\n if (!winePackage.showWineBottlesInFront) {\r\n return ;\r\n }\r\n\r\n return (\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n};\r\n","import { WinePackageWidgetModel } from 'shared-widget-components/src/services/FeaturedPackagesService';\r\nimport { convert as urlSlug } from 'url-slug';\r\n\r\nconst useWinePackageUrl = ({ winePackage }: { winePackage: WinePackageWidgetModel }) => {\r\n // @ts-ignore\r\n const languageCode = window.currentLanguageCode;\r\n\r\n const createUrl = (winePackageId: number, packageName: string, languageCode: string) => {\r\n const domain = getPackageDomain(languageCode);\r\n\r\n const slug = urlSlug(packageName);\r\n\r\n return `/${domain}/${winePackageId}/${slug}`;\r\n };\r\n\r\n const getPackageDomain = (languageCode: string): string => {\r\n switch (languageCode) {\r\n case 'en':\r\n return 'winepackages';\r\n case 'de':\r\n return 'weinpaket';\r\n case 'pl':\r\n return 'pakiety-win';\r\n case 'hu':\r\n default:\r\n return 'borcsomagok';\r\n }\r\n };\r\n\r\n const url = createUrl(winePackage.productVariantId, winePackage.title, languageCode);\r\n\r\n // navigate to the package when the image is clicked\r\n const onPackageClick = () => {\r\n // @ts-ignore\r\n if (window.isAdminPage) return;\r\n\r\n window.location.href = url;\r\n };\r\n return { onPackageClick };\r\n};\r\n\r\nexport default useWinePackageUrl;\r\n","import { WinePackageInfo } from './WinePackageInfo';\r\nimport useMouse from './hooks/useMouse';\r\nimport { WinePackageWidgetModel } from '../../models/WinePackageWidgetModel';\r\nimport { CartComponent } from './cart/CartComponent';\r\nimport { DiscountTag } from './components/DiscountTag';\r\nimport { WinePackageImage } from './components/WinePackageImage';\r\nimport { useCalculatedDiscount } from 'shared-widget-components/src/hooks/useCalculatedDiscount';\r\nimport { useWinePackageClasses } from './hooks/useWinePackageClasses';\r\n\r\ninterface PackageProps {\r\n winePackage: WinePackageWidgetModel;\r\n\r\n // false in drag and drop, true in preview\r\n isShowCart: boolean;\r\n isShowContent: boolean;\r\n}\r\n\r\n/**\r\n * The WinePackage component renders a wine package with its image, information, and cart component.\r\n * @param winePackage - The object containing information about the wine package.\r\n * @param isShowCart - The boolean value to show the cart component.\r\n * @param isShowContent - The boolean value to show the content of the wine package.\r\n * @returns The WinePackage component is returning JSX elements.\r\n */\r\n\r\nexport const WinePackage = ({ winePackage, isShowCart, isShowContent }: PackageProps) => {\r\n const { isCartVisible, handleMouseEnter, handleMouseLeave } = useMouse(isShowCart);\r\n\r\n const basePrice = winePackage.basePrice!;\r\n const currentPrice = winePackage.currentPrice!;\r\n\r\n const { calculatedDiscount } = useCalculatedDiscount({ basePrice, currentPrice });\r\n\r\n const { classnameWithCart, classnameWithoutCart, slideUpDivClasses } = useWinePackageClasses(winePackage.showEurPrice);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {isShowCart && }\r\n \r\n \r\n );\r\n};\r\n","import { useState } from 'react';\r\n\r\n/**\r\n * The `useMouse` function returns an object with properties and functions related to handling mouse\r\n * events and showing/hiding a cart.\r\n * @param {boolean} isShowCart - A boolean value indicating whether the cart should be shown or not.\r\n * @returns The useMouse function returns an object with the following properties and functions:\r\n */\r\nconst useMouse = (isShowCart: boolean) => {\r\n // cart mutatása hoverre\r\n const [isCartVisible, setIsCartVisible] = useState(false);\r\n\r\n /**\r\n * The handleMouseEnter function shows the cart if it is currently visible.\r\n */\r\n const handleMouseEnter = () => {\r\n isShowCart && setIsCartVisible(true);\r\n };\r\n\r\n /**\r\n * The handleMouseLeave function hides the cart if it is currently visible.\r\n */\r\n const handleMouseLeave = () => {\r\n isShowCart && setIsCartVisible(false);\r\n };\r\n\r\n return { isCartVisible, handleMouseEnter, handleMouseLeave };\r\n};\r\n\r\nexport default useMouse;\r\n","import { useEffect, useState } from 'react';\r\n\r\nexport const useWinePackageClasses = (showEurPrice: boolean) => {\r\n const slideUpDivClasses =\r\n 'w-full flex flex-col min-[350px]:transform-none lg:transform lg:absolute lg:bottom-[80px] lg:left-0 lg:px-[12px] lg:backdrop-blur-md bg-[#F6F5F2] bg-opacity-30 lg:transition-transform duration-300 ease-in-out';\r\n\r\n const [classnameWithCart, setClassnameWithCart] = useState('');\r\n const [classnameWithoutCart, setClassnameWithoutCart] = useState('');\r\n\r\n useEffect(() => {\r\n const classnameWithCart = showEurPrice ? 'lg:translate-y-[75px]' : 'lg:translate-y-[60px]';\r\n const classnameWithoutCart = showEurPrice ? 'lg:translate-y-[160px]' : 'lg:translate-y-[140px]';\r\n setClassnameWithCart(classnameWithCart);\r\n setClassnameWithoutCart(classnameWithoutCart);\r\n }, [showEurPrice]);\r\n\r\n return { slideUpDivClasses, classnameWithCart, classnameWithoutCart };\r\n};\r\n","export const containerVariants = {\r\n hidden: { opacity: 0 },\r\n visible: {\r\n opacity: 1,\r\n transition: {\r\n staggerChildren: 0.3, // Adjust stagger timing here\r\n },\r\n },\r\n };\r\n \r\n export const childVariants = {\r\n hidden: { opacity: 0 },\r\n visible: {\r\n opacity: 1,\r\n transition: {\r\n duration: 0.3, // Adjust duration here\r\n },\r\n },\r\n };\r\n ","\"use client\";\nvar __defProp = Object.defineProperty;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __publicField = (obj, key, value) => {\n __defNormalProp(obj, typeof key !== \"symbol\" ? key + \"\" : key, value);\n return value;\n};\n\n// src/InView.tsx\nimport * as React from \"react\";\n\n// src/observe.ts\nvar observerMap = /* @__PURE__ */ new Map();\nvar RootIds = /* @__PURE__ */ new WeakMap();\nvar rootId = 0;\nvar unsupportedValue = void 0;\nfunction defaultFallbackInView(inView) {\n unsupportedValue = inView;\n}\nfunction getRootId(root) {\n if (!root)\n return \"0\";\n if (RootIds.has(root))\n return RootIds.get(root);\n rootId += 1;\n RootIds.set(root, rootId.toString());\n return RootIds.get(root);\n}\nfunction optionsToId(options) {\n return Object.keys(options).sort().filter(\n (key) => options[key] !== void 0\n ).map((key) => {\n return `${key}_${key === \"root\" ? getRootId(options.root) : options[key]}`;\n }).toString();\n}\nfunction createObserver(options) {\n let id = optionsToId(options);\n let instance = observerMap.get(id);\n if (!instance) {\n const elements = /* @__PURE__ */ new Map();\n let thresholds;\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n var _a;\n const inView = entry.isIntersecting && thresholds.some((threshold) => entry.intersectionRatio >= threshold);\n if (options.trackVisibility && typeof entry.isVisible === \"undefined\") {\n entry.isVisible = inView;\n }\n (_a = elements.get(entry.target)) == null ? void 0 : _a.forEach((callback) => {\n callback(inView, entry);\n });\n });\n }, options);\n thresholds = observer.thresholds || (Array.isArray(options.threshold) ? options.threshold : [options.threshold || 0]);\n instance = {\n id,\n observer,\n elements\n };\n observerMap.set(id, instance);\n }\n return instance;\n}\nfunction observe(element, callback, options = {}, fallbackInView = unsupportedValue) {\n if (typeof window.IntersectionObserver === \"undefined\" && fallbackInView !== void 0) {\n const bounds = element.getBoundingClientRect();\n callback(fallbackInView, {\n isIntersecting: fallbackInView,\n target: element,\n intersectionRatio: typeof options.threshold === \"number\" ? options.threshold : 0,\n time: 0,\n boundingClientRect: bounds,\n intersectionRect: bounds,\n rootBounds: bounds\n });\n return () => {\n };\n }\n const { id, observer, elements } = createObserver(options);\n let callbacks = elements.get(element) || [];\n if (!elements.has(element)) {\n elements.set(element, callbacks);\n }\n callbacks.push(callback);\n observer.observe(element);\n return function unobserve() {\n callbacks.splice(callbacks.indexOf(callback), 1);\n if (callbacks.length === 0) {\n elements.delete(element);\n observer.unobserve(element);\n }\n if (elements.size === 0) {\n observer.disconnect();\n observerMap.delete(id);\n }\n };\n}\n\n// src/InView.tsx\nfunction isPlainChildren(props) {\n return typeof props.children !== \"function\";\n}\nvar InView = class extends React.Component {\n constructor(props) {\n super(props);\n __publicField(this, \"node\", null);\n __publicField(this, \"_unobserveCb\", null);\n __publicField(this, \"handleNode\", (node) => {\n if (this.node) {\n this.unobserve();\n if (!node && !this.props.triggerOnce && !this.props.skip) {\n this.setState({ inView: !!this.props.initialInView, entry: void 0 });\n }\n }\n this.node = node ? node : null;\n this.observeNode();\n });\n __publicField(this, \"handleChange\", (inView, entry) => {\n if (inView && this.props.triggerOnce) {\n this.unobserve();\n }\n if (!isPlainChildren(this.props)) {\n this.setState({ inView, entry });\n }\n if (this.props.onChange) {\n this.props.onChange(inView, entry);\n }\n });\n this.state = {\n inView: !!props.initialInView,\n entry: void 0\n };\n }\n componentDidMount() {\n this.unobserve();\n this.observeNode();\n }\n componentDidUpdate(prevProps) {\n if (prevProps.rootMargin !== this.props.rootMargin || prevProps.root !== this.props.root || prevProps.threshold !== this.props.threshold || prevProps.skip !== this.props.skip || prevProps.trackVisibility !== this.props.trackVisibility || prevProps.delay !== this.props.delay) {\n this.unobserve();\n this.observeNode();\n }\n }\n componentWillUnmount() {\n this.unobserve();\n }\n observeNode() {\n if (!this.node || this.props.skip)\n return;\n const {\n threshold,\n root,\n rootMargin,\n trackVisibility,\n delay,\n fallbackInView\n } = this.props;\n this._unobserveCb = observe(\n this.node,\n this.handleChange,\n {\n threshold,\n root,\n rootMargin,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay\n },\n fallbackInView\n );\n }\n unobserve() {\n if (this._unobserveCb) {\n this._unobserveCb();\n this._unobserveCb = null;\n }\n }\n render() {\n const { children } = this.props;\n if (typeof children === \"function\") {\n const { inView, entry } = this.state;\n return children({ inView, entry, ref: this.handleNode });\n }\n const {\n as,\n triggerOnce,\n threshold,\n root,\n rootMargin,\n onChange,\n skip,\n trackVisibility,\n delay,\n initialInView,\n fallbackInView,\n ...props\n } = this.props;\n return React.createElement(\n as || \"div\",\n { ref: this.handleNode, ...props },\n children\n );\n }\n};\n\n// src/useInView.tsx\nimport * as React2 from \"react\";\nfunction useInView({\n threshold,\n delay,\n trackVisibility,\n rootMargin,\n root,\n triggerOnce,\n skip,\n initialInView,\n fallbackInView,\n onChange\n} = {}) {\n var _a;\n const [ref, setRef] = React2.useState(null);\n const callback = React2.useRef();\n const [state, setState] = React2.useState({\n inView: !!initialInView,\n entry: void 0\n });\n callback.current = onChange;\n React2.useEffect(\n () => {\n if (skip || !ref)\n return;\n let unobserve;\n unobserve = observe(\n ref,\n (inView, entry) => {\n setState({\n inView,\n entry\n });\n if (callback.current)\n callback.current(inView, entry);\n if (entry.isIntersecting && triggerOnce && unobserve) {\n unobserve();\n unobserve = void 0;\n }\n },\n {\n root,\n rootMargin,\n threshold,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay\n },\n fallbackInView\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 const entryTarget = (_a = state.entry) == null ? void 0 : _a.target;\n const previousEntryTarget = React2.useRef();\n if (!ref && entryTarget && !triggerOnce && !skip && previousEntryTarget.current !== entryTarget) {\n previousEntryTarget.current = entryTarget;\n setState({\n inView: !!initialInView,\n entry: void 0\n });\n }\n const result = [setRef, state.inView, state.entry];\n result.ref = result[0];\n result.inView = result[1];\n result.entry = result[2];\n return result;\n}\nexport {\n InView,\n defaultFallbackInView,\n observe,\n useInView\n};\n//# sourceMappingURL=index.mjs.map","import { motion } from 'framer-motion';\r\nimport { WinePackageModel, WinePackageWidgetModel } from '../../models/WinePackageWidgetModel';\r\nimport { WinePackage } from './WinePackage';\r\nimport { containerVariants, childVariants } from './animation/animation';\r\nimport { useInView } from 'react-intersection-observer';\r\n\r\ninterface WinePackagesProps {\r\n item: WinePackageModel;\r\n winePackageList: WinePackageWidgetModel[];\r\n}\r\n\r\n/**\r\n * The CustomWinePackages component renders the wine packages.\r\n * @param item - The object containing information about the wine package.\r\n * @param winePackageList - The list of wine packages.\r\n * @returns The CustomWinePackages component is returning JSX elements.\r\n */\r\n\r\nexport const CustomWinePackages = ({ winePackageList }: WinePackagesProps) => {\r\n const [ref, inView] = useInView({ triggerOnce: true }); // Intersection Observer, the triggerOnce prop is set to true, so the component will be animated only once.\r\n\r\n if (!winePackageList || winePackageList.length === 0) return <>;\r\n\r\n const showEurPrice = winePackageList[0].showEurPrice;\r\n\r\n return (\r\n \r\n {winePackageList?.map((winePackage: WinePackageWidgetModel, index: number) => (\r\n \r\n \r\n \r\n ))}\r\n \r\n );\r\n};\r\n","import { motion } from 'framer-motion';\r\nimport { useInView } from 'react-intersection-observer';\r\nimport { WinePackageModel, WinePackageWidgetModel } from '../../models/WinePackageWidgetModel';\r\nimport { WinePackage } from './WinePackage';\r\nimport { containerVariants, childVariants } from './animation/animation';\r\n\r\ninterface WinePackagesProps {\r\n item: WinePackageModel;\r\n winePackageList: WinePackageWidgetModel[];\r\n}\r\n\r\n/**\r\n * The FeaturedWinePackages component renders the featured wine packages.\r\n * @param item - The object containing information about the wine package.\r\n * @param winePackageList - The list of wine packages.\r\n * @returns The FeaturedWinePackages component is returning JSX elements.\r\n */\r\n\r\nexport const FeaturedWinePackages = ({ item, winePackageList }: WinePackagesProps) => {\r\n const [ref, inView] = useInView({ triggerOnce: true });\r\n\r\n if (!winePackageList || winePackageList.length === 0) return <>;\r\n\r\n const showEurPrice = winePackageList[0].showEurPrice;\r\n\r\n return (\r\n \r\n {item.renderedPackages > 0 && (\r\n <>\r\n {winePackageList.slice(0, Number(item.renderedPackages)).map((featurePackage: WinePackageWidgetModel, i: number) => (\r\n \r\n \r\n \r\n ))}\r\n \r\n )}\r\n \r\n );\r\n};\r\n","import { PackageTypes } from 'shared-widget-components/src/constants/Constants';\r\nimport { WinePackageModel, WinePackageWidgetModel } from '../../models/WinePackageWidgetModel';\r\nimport { useFeaturedProductContext } from 'shared-widget-components/src/providers/FeaturedProductProvider';\r\nimport { CustomWinePackages } from './CustomWinePackages';\r\nimport { FeaturedWinePackages } from './FeaturedWinePackages';\r\n\r\ninterface WinePackagesProps {\r\n item: WinePackageModel;\r\n winePackageList: WinePackageWidgetModel[];\r\n}\r\n\r\nexport const WinePackages = ({ item, winePackageList }: WinePackagesProps) => {\r\n const { featuredPackages } = useFeaturedProductContext();\r\n\r\n if (item.type == PackageTypes.FEATURED) {\r\n return ;\r\n }\r\n\r\n return ;\r\n};\r\n","const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default {\n randomUUID\n};","// Unique ID creation requires a high quality random # generator. In the browser we therefore\n// require the crypto API and do not support built-in fallback to lower quality random number\n// generators (like Math.random()).\nlet getRandomValues;\nconst rnds8 = new Uint8Array(16);\nexport default function rng() {\n // lazy load so that environments that need to polyfill have a chance to do so\n if (!getRandomValues) {\n // getRandomValues needs to be invoked in a context where \"this\" is a Crypto implementation.\n getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);\n\n if (!getRandomValues) {\n throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n }\n }\n\n return getRandomValues(rnds8);\n}","import validate from './validate.js';\n/**\n * Convert array of 16 byte values to UUID string format of the form:\n * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\n */\n\nconst byteToHex = [];\n\nfor (let i = 0; i < 256; ++i) {\n byteToHex.push((i + 0x100).toString(16).slice(1));\n}\n\nexport function unsafeStringify(arr, offset = 0) {\n // Note: Be careful editing this code! It's been tuned for performance\n // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434\n return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];\n}\n\nfunction stringify(arr, offset = 0) {\n const uuid = unsafeStringify(arr, offset); // Consistency check for valid UUID. If this throws, it's likely due to one\n // of the following:\n // - One or more input array values don't map to a hex octet (leading to\n // \"undefined\" in the uuid)\n // - Invalid input values for the RFC `version` or `variant` fields\n\n if (!validate(uuid)) {\n throw TypeError('Stringified UUID is invalid');\n }\n\n return uuid;\n}\n\nexport default stringify;","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\n\nfunction v4(options, buf, offset) {\n if (native.randomUUID && !buf && !options) {\n return native.randomUUID();\n }\n\n options = options || {};\n const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`\n\n rnds[6] = rnds[6] & 0x0f | 0x40;\n rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided\n\n if (buf) {\n offset = offset || 0;\n\n for (let i = 0; i < 16; ++i) {\n buf[offset + i] = rnds[i];\n }\n\n return buf;\n }\n\n return unsafeStringify(rnds);\n}\n\nexport default v4;","import { WinePackages } from '../../WinePackages/WinePackages';\r\nimport { RefObject } from 'react';\r\nimport { WinePackageModel, WinePackageWidgetModel } from '../../../models/WinePackageWidgetModel';\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\ninterface WinePackagesContentWithScrollbarProps {\r\n scrollbarRef: RefObject;\r\n isScrollbarVisible: boolean;\r\n scrollbarColor: string;\r\n item: WinePackageModel;\r\n winePackageList: WinePackageWidgetModel[];\r\n}\r\n\r\n/* The `WinePackagesContentWithScrollbar` component is responsible for rendering the wine packages\r\ncontent with a scrollbar. It takes the `scrollbarPosition` prop as an argument, which represents the\r\ncurrent position of the scrollbar. */\r\nconst WinePackagesContentWithScrollbar = ({ scrollbarRef, isScrollbarVisible, scrollbarColor, item, winePackageList }: WinePackagesContentWithScrollbarProps) => {\r\n const scrollbarId = uuidv4();\r\n const uniqueScrollbarClassName = `CustomScrollbar${scrollbarId}`;\r\n\r\n const dynamicStyle = `\r\n /* Chrome custom scrollbar */\r\n .${uniqueScrollbarClassName}::-webkit-scrollbar {\r\n width: 12px; !important;\r\n height: 12px !important;\r\n }\r\n .${uniqueScrollbarClassName}::-webkit-scrollbar-track {\r\n background: #f2f2f2; !important;\r\n border-radius: 8px; !important;\r\n }\r\n .${uniqueScrollbarClassName}::-webkit-scrollbar-thumb {\r\n background: ${scrollbarColor}; !important;\r\n border-radius: 8px; !important;\r\n }\r\n .${uniqueScrollbarClassName}::-webkit-scrollbar-thumb:hover {\r\n background: ${scrollbarColor}; !important;\r\n }\r\n\r\n /* Firefox custom scrollbar */\r\n @-moz-document url-prefix() {\r\n .${uniqueScrollbarClassName} {\r\n scrollbar-width: 16px !important;\r\n scrollbar-color: ${scrollbarColor} #f2f2f2 !important;\r\n }\r\n .${uniqueScrollbarClassName} {\r\n border-radius: 8px !important; \r\n }\r\n}\r\n`;\r\n\r\n return (\r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default WinePackagesContentWithScrollbar;\r\n","import { useTranslation } from 'react-i18next';\r\nimport useAllPackageUrl from './hooks/useAllPackageUrl';\r\n\r\nexport const WinePackageLink = ({ textColor }: { textColor: string }) => {\r\n const { t } = useTranslation();\r\n // @ts-ignore\r\n const isAdmin = window.isAdminPage;\r\n // @ts-ignore\r\n const languageCode = window.currentLanguageCode;\r\n\r\n const { createAllPackageUrl } = useAllPackageUrl();\r\n const url = createAllPackageUrl(languageCode);\r\n return (\r\n isAdmin && e.preventDefault()}>\r\n {t('winePackageWidget.allPackages')}\r\n \r\n );\r\n};\r\n","const useAllPackageUrl = () => {\r\n const createAllPackageUrl = (languageCode: string) => {\r\n const domain = getPackageDomain(languageCode);\r\n\r\n return `/${domain}`;\r\n };\r\n\r\n const getPackageDomain = (languageCode: string): string => {\r\n switch (languageCode) {\r\n case 'en':\r\n return 'winepackages';\r\n case 'de':\r\n return 'weinpaket';\r\n case 'pl':\r\n return 'pakiety-win';\r\n case 'hu':\r\n default:\r\n return 'borcsomagok';\r\n }\r\n };\r\n\r\n return { createAllPackageUrl };\r\n};\r\n\r\nexport default useAllPackageUrl;\r\n","import { LeftArrow, RightArrow } from 'shared-widget-components/src/components/Icons';\r\nimport { WinePackageLink } from './WinePackageLink';\r\n\r\ninterface WineHeaderProps {\r\n title: string;\r\n textColor: string;\r\n scrollLeft: () => void;\r\n scrollRight: () => void;\r\n isScrollbarVisible: boolean;\r\n isScrollableToLeft: boolean;\r\n isScrollableToRight: boolean;\r\n}\r\n\r\n/**\r\n * The WinePackagesHeader component is a React component that displays a title, the number of wine\r\n * packages, and navigation buttons for scrolling through the packages.\r\n * @param {WineHeaderProps} - - `title`: The title of the wine package header.\r\n * @returns The WinePackagesHeader component is returning a JSX element.\r\n */\r\nconst WinesScrollbarHeader = ({ title, textColor, scrollLeft, scrollRight, isScrollbarVisible, isScrollableToLeft, isScrollableToRight }: WineHeaderProps) => {\r\n return (\r\n
\r\n );\r\n};\r\n","import { useState } from 'react';\r\nimport { WineWidgetModel } from '../../../../models/WineWidgetModel';\r\n\r\ninterface UseCartQuantityProps {\r\n wine: WineWidgetModel;\r\n}\r\n\r\n/**\r\n * The `useCartQuantity` function is a custom hook that manages the quantity of items in a cart,\r\n * allowing for incrementing and decrementing the quantity within the given stock limit.\r\n * @param wine - The wine object.\r\n * @returns an object with three properties: `increment`, `decrement`, and `cartQuantity`.\r\n * The `increment` and `decrement` functions are used to increase and decrease the value of\r\n * `cartQuantity`, respectively. The `cartQuantity` property represents the quantity of items in the cart.\r\n */\r\n\r\nconst useCartQuantity = ({ wine }: UseCartQuantityProps) => {\r\n const [cartQuantity, setCartQuantity] = useState(wine.minimumCartQuantity ?? 1);\r\n\r\n /**\r\n * The function `decrement` decreases the value of `cartQuantity` by 1 if it is greater than 1.\r\n */\r\n const decrement = () => {\r\n if (cartQuantity > 1 && cartQuantity > wine.minimumCartQuantity) setCartQuantity((prevState) => prevState - 1);\r\n };\r\n\r\n /**\r\n * The function `increment` increases the value of `cartQuantity` by 1 if it is less than `stock`.\r\n */\r\n const increment = () => {\r\n if (cartQuantity < wine.availableQuantity && cartQuantity < wine.maximumCartQuantity) setCartQuantity((prevState) => prevState + 1);\r\n };\r\n\r\n return { increment, decrement, cartQuantity };\r\n};\r\n\r\nexport default useCartQuantity;\r\n","import { useTranslation } from 'react-i18next';\r\n\r\ninterface OrderableTextProps {\r\n backgroundColor: string;\r\n orderableText: string;\r\n showEurPrice?: boolean;\r\n isCartVisible?: boolean;\r\n}\r\n\r\n/**\r\n * The OrderableText component renders the orderable text.\r\n * @param backgroundColor - The background color of the orderable text.\r\n * @param orderableText - The orderable text.\r\n * @param showEurPrice - The boolean value to show the price in EUR.\r\n * @returns a JSX element. It is rendering the orderable text.\r\n */\r\n\r\nconst OrderableText = ({ backgroundColor, orderableText, showEurPrice }: OrderableTextProps) => {\r\n return (\r\n <>\r\n \r\n
{orderableText}
\r\n \r\n );\r\n};\r\n\r\ninterface AvailableTextProps {\r\n showEurPrice?: boolean;\r\n isCartVisible?: boolean;\r\n}\r\n\r\n/**\r\n * The AvailableText component renders the available text.\r\n * @param showEurPrice - The boolean value to show the price in EUR.\r\n * @param isCartVisible - The boolean value to show the cart.\r\n * @returns a JSX element. It is rendering the available text.\r\n */\r\n\r\nexport const AvailableText = ({ showEurPrice, isCartVisible }: AvailableTextProps) => {\r\n const { t } = useTranslation();\r\n return ;\r\n};\r\n\r\n/**\r\n * The NotAvailableText component renders the not available text.\r\n * @param showEurPrice - The boolean value to show the price in EUR.\r\n * @param isCartVisible - The boolean value to show the cart.\r\n * @returns a JSX element. It is rendering the not available text.\r\n */\r\n\r\nexport const NotAvailableText = ({ showEurPrice, isCartVisible }: AvailableTextProps) => {\r\n const { t } = useTranslation();\r\n\r\n return ;\r\n};\r\n","import { useCalculatedDiscount } from 'shared-widget-components/src/hooks/useCalculatedDiscount';\r\nimport { WineWidgetModel } from '../../../models/WineWidgetModel';\r\nimport { formatEurPrice, formatHufPrice } from 'shared-widget-components/src/utils/FormatPrice';\r\n\r\n/**\r\n * The WineDiscount component renders the price of the wine based on the discount.\r\n * @returns a JSX fragment. It is rendering the price of the wine. The price is rendered inside a div element with a class name.\r\n */\r\nexport const WineDiscount = ({ wine }: { wine: WineWidgetModel }) => {\r\n const basePrice = wine.basePrice!;\r\n const currentPrice = wine.currentPrice!;\r\n\r\n const { calculatedDiscount } = useCalculatedDiscount({ basePrice, currentPrice });\r\n\r\n return (\r\n
\r\n {/** no discount, only eur and huf price */}\r\n {calculatedDiscount === 0 && wine.baseEurPrice && wine.showEurPrice && (\r\n
({formatEurPrice(wine.baseEurPrice)})
\r\n )}\r\n\r\n {/** discount, but no eur price */}\r\n {calculatedDiscount > 0 && wine.basePrice &&
{formatHufPrice(wine.basePrice)}
}\r\n
\r\n {wine.showEurPrice && (\r\n
\r\n {/** eur current price if there is a discount */}\r\n {calculatedDiscount > 0 && wine.currentEurPrice && wine.showEurPrice && (\r\n
({formatEurPrice(wine.currentEurPrice)}
\r\n )}\r\n {/** eur base price if there is a discount */}\r\n {calculatedDiscount > 0 && wine.baseEurPrice && wine.showEurPrice && (\r\n
{formatEurPrice(wine.baseEurPrice)})
\r\n )}\r\n
\r\n )}\r\n
\r\n );\r\n};\r\n","import { WineWidgetModel } from '../../models/WineWidgetModel';\r\nimport { AvailableText, NotAvailableText } from './components/OrderableText';\r\nimport { WineDiscount } from './components/WineDiscount';\r\n\r\ninterface WineContentProps {\r\n wine: WineWidgetModel;\r\n}\r\n\r\n/**\r\n * The WineInfo component renders the title, manufacturer name, price, discount, and\r\n * availability of the wine.\r\n * @param wine - The wine object.\r\n * @returns a JSX fragment. It is rendering the title, manufacturer name, price, discount, and\r\n */\r\nexport const WineInfo = ({ wine }: WineContentProps) => {\r\n return (\r\n <>\r\n
\r\n
\r\n
{wine.title}
\r\n {wine.productYear}\r\n
\r\n
\r\n
\r\n \r\n
{wine.availableQuantity > 0 ? : }
\r\n
\r\n \r\n );\r\n};\r\n","import { WineWidgetModel } from '../../../models/WineWidgetModel';\r\n\r\n/* The `interface WineTagProps` is defining the type of props that the `WineTags` component expects. It\r\nspecifies that the `wine` prop should be of type `WineModel`. This allows the component to receive\r\nthe `wine` prop and access its properties and methods. */\r\ninterface WineTagProps {\r\n wine: WineWidgetModel;\r\n}\r\n\r\n/**\r\n * The WineTags component renders the first tags of a wine and displays the number of hidden tags.\r\n * @param {WineTagProps} - - `wine`: The wine object that contains information about the wine.\r\n * @returns The WineTags component is returning a div element with the class name 'absolute top-1\r\n * right-0 w-[25%] sm:w-[30%]'. Inside the div, it renders the FirstTags component and the\r\n * NumberOfHiddenTags component, passing the wine prop to both components.\r\n */\r\nexport const WineTags = ({ wine }: WineTagProps) => {\r\n const tagClasses = wine.isManufacturer ? 'absolute top-12 right-0 w-[40%]' : 'absolute top-4 right-0 w-[40%]';\r\n\r\n return (\r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\n/**\r\n * The FirstTags component displays a count of tags.\r\n * @param {WineTagProps} - The `FirstTags` component takes a prop called `wine` which is an\r\n * object with the following structure:\r\n * @returns The component `FirstTags` returns tags based on the given number\r\n */\r\nconst FirstTags = ({ wine }: WineTagProps) => {\r\n return (\r\n <>\r\n {wine.tags &&\r\n wine.tags.slice(0, 3).map((tag, index) => (\r\n \r\n
{tag.toUpperCase()}
\r\n \r\n ))}\r\n \r\n );\r\n};\r\n\r\n/**\r\n * The NumberOfHiddenTags component displays a count of hidden tags if the number of tags exceeds 3.\r\n * @param {WineTagProps} - The `NumberOfHiddenTags` component takes a prop called `wine` which is an\r\n * object with the following structure:\r\n * @returns The component `NumberOfHiddenTags` returns a `div` element with the text\r\n * `+{wine.tags.length - 3}` if the length of `wine.tags` is greater than 3.\r\n */\r\nconst NumberOfHiddenTags = ({ wine }: WineTagProps) => {\r\n return (\r\n <>\r\n {wine.tags && wine.tags.length > 3 && (\r\n \r\n
+{wine.tags.length - 3}
\r\n \r\n )}\r\n \r\n );\r\n};\r\n","type DiscountTagProps = {\r\n discount: number;\r\n isManufacturer?: boolean;\r\n};\r\n\r\n/**\r\n * The DiscountTag component renders the discount tag.\r\n * @param discount - The discount value.\r\n * @param isManufacturer - The manufacturer name.\r\n * @returns a JSX element. It is rendering the discount tag.\r\n */\r\n\r\nexport const DiscountTag = ({ discount, isManufacturer }: DiscountTagProps) => {\r\n if (discount <= 0) return <>;\r\n\r\n return
{-discount.toFixed(0)}%
;\r\n};\r\n","import { CartComponent } from './cart/CartComponent';\r\nimport { WineInfo } from './WineInfo';\r\nimport useMouse from './hooks/useMouse';\r\nimport { WineWidgetModel } from '../../models/WineWidgetModel';\r\nimport { WineTags } from './components/WineTags';\r\nimport { DiscountTag } from './components/DiscountTag';\r\nimport { CDNImage } from 'shared-widget-components/src/components/CDNImage/CDNImage';\r\nimport { useCalculatedDiscount } from 'shared-widget-components/src/hooks/useCalculatedDiscount';\r\nimport { useWineClasses } from './hooks/useWineClasses';\r\nimport { useOnWineClick } from './hooks/useOnWineClick';\r\n\r\ninterface WineProps {\r\n wine: WineWidgetModel;\r\n //drag and drop komponensben false, previewben true\r\n isShowCart: boolean;\r\n}\r\n\r\n/**\r\n * The Wine component renders a wine card with the wine image, title, manufacturer name, price, and discount.\r\n * @param wine - The wine object.\r\n * @param isShowCart - A boolean value that determines whether the cart component is visible or not\r\n * @returns a JSX fragment. It is rendering the wine card with the wine image, title, manufacturer name, price, and discount\r\n */\r\n\r\nexport const Wine = ({ wine, isShowCart }: WineProps) => {\r\n const { isCartVisible, handleMouseEnter, handleMouseLeave } = useMouse(isShowCart);\r\n\r\n const { onWineClick } = useOnWineClick(wine);\r\n\r\n const { slideUpDivClasses, classnameWithCart, classnameWithoutCart } = useWineClasses(wine.showEurPrice);\r\n\r\n const basePrice = wine.basePrice!;\r\n const currentPrice = wine.currentPrice!;\r\n\r\n const { calculatedDiscount } = useCalculatedDiscount({ basePrice, currentPrice });\r\n\r\n return (\r\n \r\n \r\n \r\n {wine.isManufacturer && ( // if we are on a merchant site, we display the manufacturers name\r\n <>\r\n
{wine.manufacturerName}
\r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n","import { useState } from 'react';\r\n\r\n/**\r\n * The `useMouse` function returns an object with properties and functions related to handling mouse\r\n * events and showing/hiding a cart.\r\n * @param {boolean} isShowCart - A boolean value indicating whether the cart should be shown or not.\r\n * @returns The useMouse function returns an object with the following properties and functions:\r\n */\r\nconst useMouse = (isShowCart: boolean) => {\r\n // cart mutatása hoverre\r\n const [isCartVisible, setIsCartVisible] = useState(false);\r\n\r\n /**\r\n * The handleMouseEnter function shows the cart if it is currently visible.\r\n */\r\n const handleMouseEnter = () => {\r\n isShowCart && setIsCartVisible(true);\r\n };\r\n\r\n /**\r\n * The handleMouseLeave function hides the cart if it is currently visible.\r\n */\r\n const handleMouseLeave = () => {\r\n isShowCart && setIsCartVisible(false);\r\n };\r\n\r\n return { isCartVisible, handleMouseEnter, handleMouseLeave };\r\n};\r\n\r\nexport default useMouse;\r\n","import { WineWidgetModel } from 'shared-widget-components/src/services/FeaturedWinesService';\r\nimport useWineUrl from './useWineUrl';\r\n\r\nexport const useOnWineClick = (wine: WineWidgetModel) => {\r\n const { createUrl } = useWineUrl();\r\n\r\n const onWineClick = () => {\r\n // @ts-ignore\r\n const languageCode = window.currentLanguageCode;\r\n\r\n const url = createUrl(wine.id, wine.title, languageCode);\r\n\r\n // @ts-ignore\r\n if (window.isAdminPage) return;\r\n\r\n window.location.href = url;\r\n };\r\n\r\n return { onWineClick };\r\n};\r\n","import { convert as urlSlug } from 'url-slug';\r\n\r\nconst useWineUrl = () => {\r\n const createUrl = (wineId: number, wineName: string, languageCode: string) => {\r\n const domain = getWineDomain(languageCode);\r\n\r\n const slug = urlSlug(wineName);\r\n\r\n return `/${domain}/${wineId}/${slug}`;\r\n };\r\n\r\n const getWineDomain = (languageCode: string): string => {\r\n switch (languageCode) {\r\n case 'en':\r\n return 'wines';\r\n case 'de':\r\n return 'weine';\r\n case 'pl':\r\n return 'wina';\r\n case 'hu':\r\n default:\r\n return 'borok';\r\n }\r\n };\r\n\r\n return { createUrl };\r\n};\r\n\r\nexport default useWineUrl;\r\n","import { useEffect, useState } from 'react';\r\n\r\n/**\r\n * The useWineClasses hook provides classes for the wine cards.\r\n * @param showEurPrice - A boolean value that determines whether to show the price in EUR.\r\n * @returns an object with the following properties and methods:\r\n */\r\n\r\nexport const useWineClasses = (showEurPrice: boolean) => {\r\n // The slideUpDivClasses is the classname for the wine card the contains the cart animation.\r\n const slideUpDivClasses =\r\n 'w-full flex min-[350px]:transform-none lg:transform lg:absolute lg:bottom-20 lg:left-0 lg:px-3 lg:backdrop-blur-md flex flex-col bg-[#F6F5F2] bg-opacity-30 lg:transition-transform duration-300 ease-in-out';\r\n\r\n // The classnameWithCart and classnameWithoutCart are used to determine the position of the cart section on the wine card.\r\n const [classnameWithCart, setClassnameWithCart] = useState('');\r\n const [classnameWithoutCart, setClassnameWithoutCart] = useState('');\r\n\r\n useEffect(() => {\r\n const classnameWithCart = showEurPrice ? 'lg:translate-y-[75px]' : 'lg:translate-y-[60px]';\r\n const classnameWithoutCart = showEurPrice ? 'lg:translate-y-[160px]' : 'lg:translate-y-[140px]';\r\n setClassnameWithCart(classnameWithCart);\r\n setClassnameWithoutCart(classnameWithoutCart);\r\n }, [showEurPrice]);\r\n\r\n return { slideUpDivClasses, classnameWithCart, classnameWithoutCart };\r\n};\r\n","export const containerVariants = {\r\n hidden: { opacity: 0 },\r\n visible: {\r\n opacity: 1,\r\n transition: {\r\n staggerChildren: 0.3, // Adjust stagger timing here\r\n },\r\n },\r\n};\r\n\r\nexport const childVariants = {\r\n hidden: { opacity: 0 },\r\n visible: {\r\n opacity: 1,\r\n transition: {\r\n duration: 0.3, // Adjust duration here\r\n },\r\n },\r\n};\r\n","import { motion } from 'framer-motion';\r\nimport { useInView } from 'react-intersection-observer';\r\nimport { WineModel, WineWidgetModel } from '../../models/WineWidgetModel';\r\nimport { Wine } from './Wine';\r\nimport { containerVariants, childVariants } from './animation/animation';\r\n\r\ninterface WinesProps {\r\n item: WineModel;\r\n wineList: WineWidgetModel[];\r\n}\r\n\r\n/**\r\n * The FeaturedWines component renders the wine cards with the wine image, title, manufacturer name, price, and discount.\r\n * @param item - The wine object.\r\n * @param wineList - The list of wines.\r\n * @returns a JSX fragment. It is rendering the wine cards with the wine image, title, manufacturer name, price, and discount\r\n */\r\n\r\nexport const FeaturedWines = ({ item, wineList }: WinesProps) => {\r\n const [ref, inView] = useInView({ triggerOnce: true });\r\n\r\n return (\r\n \r\n {item.renderedWines > 0 && (\r\n <>\r\n {wineList?.slice(0, Number(item.renderedWines)).map((wine: WineWidgetModel, i: number) => {\r\n return (\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n )}\r\n \r\n );\r\n};\r\n","import { motion } from 'framer-motion';\r\nimport { useInView } from 'react-intersection-observer';\r\nimport { WineModel, WineWidgetModel } from '../../models/WineWidgetModel';\r\nimport { Wine } from './Wine';\r\nimport { containerVariants, childVariants } from './animation/animation';\r\n\r\ninterface WinesProps {\r\n item: WineModel;\r\n wineList: WineWidgetModel[];\r\n}\r\n\r\n/**\r\n * The CustomWines component renders the wine cards with the wine image, title, manufacturer name, price, and discount.\r\n * @param item - The wine object.\r\n * @param wineList - The list of wines.\r\n * @returns a JSX fragment. It is rendering the wine cards with the wine image, title, manufacturer name, price, and discount\r\n */\r\n\r\nexport const CustomWines = ({ wineList }: WinesProps) => {\r\n const [ref, inView] = useInView({ triggerOnce: true });\r\n\r\n if (!wineList || wineList.length === 0) {\r\n return <>;\r\n }\r\n\r\n const showEurPrice = wineList[0].showEurPrice;\r\n\r\n return (\r\n \r\n {wineList.map((wine: WineWidgetModel, index: number) => (\r\n \r\n \r\n \r\n ))}\r\n \r\n );\r\n};\r\n","import { WineTypes } from 'shared-widget-components/src/constants/Constants';\r\nimport { WineModel, WineWidgetModel } from '../../models/WineWidgetModel';\r\nimport { useFeaturedProductContext } from 'shared-widget-components/src/providers/FeaturedProductProvider';\r\nimport { FeaturedWines } from './FeaturedWines';\r\nimport { CustomWines } from './CustomWines';\r\n\r\ninterface WinesProps {\r\n item: WineModel;\r\n wineList: WineWidgetModel[];\r\n}\r\n\r\n/**\r\n * The Wines function renders either the RecommendedWines or CustomWines component\r\n * based on the type prop.\r\n * @returns either the component `` or the component `` based on the value of the `type` variable.\r\n */\r\nexport const Wines = ({ item, wineList }: WinesProps) => {\r\n const { featuredWines } = useFeaturedProductContext();\r\n\r\n if (item.type == WineTypes.FEATURED) {\r\n return ;\r\n }\r\n\r\n return ;\r\n};\r\n","const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default {\n randomUUID\n};","// Unique ID creation requires a high quality random # generator. In the browser we therefore\n// require the crypto API and do not support built-in fallback to lower quality random number\n// generators (like Math.random()).\nlet getRandomValues;\nconst rnds8 = new Uint8Array(16);\nexport default function rng() {\n // lazy load so that environments that need to polyfill have a chance to do so\n if (!getRandomValues) {\n // getRandomValues needs to be invoked in a context where \"this\" is a Crypto implementation.\n getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);\n\n if (!getRandomValues) {\n throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n }\n }\n\n return getRandomValues(rnds8);\n}","import validate from './validate.js';\n/**\n * Convert array of 16 byte values to UUID string format of the form:\n * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\n */\n\nconst byteToHex = [];\n\nfor (let i = 0; i < 256; ++i) {\n byteToHex.push((i + 0x100).toString(16).slice(1));\n}\n\nexport function unsafeStringify(arr, offset = 0) {\n // Note: Be careful editing this code! It's been tuned for performance\n // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434\n return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];\n}\n\nfunction stringify(arr, offset = 0) {\n const uuid = unsafeStringify(arr, offset); // Consistency check for valid UUID. If this throws, it's likely due to one\n // of the following:\n // - One or more input array values don't map to a hex octet (leading to\n // \"undefined\" in the uuid)\n // - Invalid input values for the RFC `version` or `variant` fields\n\n if (!validate(uuid)) {\n throw TypeError('Stringified UUID is invalid');\n }\n\n return uuid;\n}\n\nexport default stringify;","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\n\nfunction v4(options, buf, offset) {\n if (native.randomUUID && !buf && !options) {\n return native.randomUUID();\n }\n\n options = options || {};\n const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`\n\n rnds[6] = rnds[6] & 0x0f | 0x40;\n rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided\n\n if (buf) {\n offset = offset || 0;\n\n for (let i = 0; i < 16; ++i) {\n buf[offset + i] = rnds[i];\n }\n\n return buf;\n }\n\n return unsafeStringify(rnds);\n}\n\nexport default v4;","import { Wines } from '../../Wines/Wines';\r\nimport { RefObject } from 'react';\r\nimport { WineModel, WineWidgetModel } from '../../../models/WineWidgetModel';\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\ninterface WinesContentWithScrollbarProps {\r\n scrollbarRef: RefObject;\r\n isScrollbarVisible: boolean;\r\n scrollbarColor: string;\r\n item: WineModel;\r\n wineList: WineWidgetModel[];\r\n}\r\n\r\n/**\r\n * WinesContentWithScrollbar component\r\n * @param scrollbarRef - scrollbar reference\r\n * @param isScrollbarVisible - is scrollbar visible\r\n * @param scrollbarColor - scrollbar color\r\n * @param item - wine model\r\n * @param wineList - list of wines\r\n * @returns - WinesContentWithScrollbar component\r\n */\r\n\r\nconst WinesContentWithScrollbar = ({ scrollbarRef, isScrollbarVisible, scrollbarColor, item, wineList }: WinesContentWithScrollbarProps) => {\r\n // Generate a unique scrollbar class name\r\n const scrollbarId = uuidv4();\r\n const uniqueScrollbarClassName = `CustomScrollbar${scrollbarId}`;\r\n\r\n // Dynamic style for the scrollbar\r\n const dynamicStyle = `\r\n /* Chrome custom scrollbar */\r\n .${uniqueScrollbarClassName}::-webkit-scrollbar {\r\n width: 12px; !important;\r\n height: 12px !important;\r\n }\r\n .${uniqueScrollbarClassName}::-webkit-scrollbar-track {\r\n background: #f2f2f2; !important;\r\n border-radius: 8px; !important;\r\n }\r\n .${uniqueScrollbarClassName}::-webkit-scrollbar-thumb {\r\n background: ${scrollbarColor}; !important;\r\n border-radius: 8px; !important;\r\n }\r\n .${uniqueScrollbarClassName}::-webkit-scrollbar-thumb:hover {\r\n background: ${scrollbarColor}; !important;\r\n }\r\n\r\n /* Firefox custom scrollbar */\r\n @-moz-document url-prefix() {\r\n .${uniqueScrollbarClassName} {\r\n scrollbar-width: 16px !important;\r\n scrollbar-color: ${scrollbarColor} #f2f2f2 !important;\r\n }\r\n .${uniqueScrollbarClassName} {\r\n border-radius: 8px !important; \r\n }\r\n}\r\n`;\r\n\r\n return (\r\n
\r\n );\r\n};\r\n","import { WinesPreview } from './Widget/WinesPreview';\r\nimport { WinesPreviewWrapper } from './Widget/Scrollbar/WinesPreviewWrapper';\r\nimport { useWidgetBody } from './Widget/hooks/useWidgetBody';\r\nimport { WinesLoadingSkeleton } from './skeleton/WinesLoadingSkeleton';\r\n\r\ninterface RecommendedWinesWidgetWebshopProps {\r\n data: string;\r\n}\r\n\r\n/**\r\n * @description This component is displayed in the webshop as a fully functioning widget.\r\n * @param0 data string; The data / widgetState of the widget.\r\n * @returns {JSX.Element} The GalleryWidgetWebshop component\r\n */\r\n\r\nexport const WinesWidgetWebshop = ({ data }: RecommendedWinesWidgetWebshopProps) => {\r\n if (!data || data === '{}') return <>;\r\n\r\n const InnerWineWidgetWebshop = () => {\r\n const RecommendedWineData = JSON.parse(data);\r\n const { languageCode, wineList, isLoading } = useWidgetBody(data, RecommendedWineData.wines, RecommendedWineData.type);\r\n\r\n if (isLoading) return ;\r\n\r\n return ;\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\n","import { useEffect, useState } from 'react';\r\nimport { useFormContext } from 'shared-widget-components/src/providers/FormContextProvider';\r\nimport { WineTypes } from 'shared-widget-components/src/constants/Constants';\r\nimport { WineModel, WineWidgetModel } from '../../../models/WineWidgetModel';\r\nimport useAsyncEffect from 'use-async-effect';\r\nimport { fetchWinesForPreview } from '../../../services/WinePreviewService';\r\nimport { isEqual } from 'lodash';\r\nexport const useWidgetBody = (data: string, wines: number[], type: string, buttonColor?: string, buttonTextColor?: string, primaryColor?: string, featuredWines?: WineWidgetModel[]) => {\r\n const [isValidationError, setIsValidationError] = useState(false);\r\n\r\n const showErrorMessage = () => {\r\n setIsValidationError(true);\r\n setTimeout(() => {\r\n setIsValidationError(false);\r\n }, 2000);\r\n };\r\n\r\n //@ts-ignore\r\n const languageCode = window.currentLanguageCode;\r\n\r\n const { reset } = useFormContext();\r\n\r\n useEffect(() => {\r\n if (data) return;\r\n reset({ type: 'FEATURED' } as WineModel);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (data) {\r\n const parsedData: WineModel = JSON.parse(data);\r\n const productVariantIdList = featuredWines?.map((wine) => wine.productVariantId);\r\n reset({\r\n widgetTitle: parsedData.widgetTitle ?? { hu: { title: '' } },\r\n backgroundColor: parsedData.backgroundColor ?? primaryColor,\r\n textColor: parsedData.textColor ?? buttonTextColor,\r\n type: parsedData.type ?? WineTypes.FEATURED,\r\n renderedWines: parsedData.renderedWines ?? 5,\r\n wines: parsedData.wines ?? productVariantIdList,\r\n scrollbarColor: parsedData.scrollbarColor ?? buttonColor,\r\n });\r\n }\r\n }, [data, buttonColor, buttonTextColor, primaryColor, featuredWines]);\r\n\r\n const [wineList, setWineList] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n useAsyncEffect(async () => {\r\n if (!wines || wines?.length === 0) {\r\n setWineList([]);\r\n return;\r\n }\r\n const areArraysEqual = isEqual(\r\n wines,\r\n wineList.map((item) => item.productVariantId),\r\n );\r\n\r\n if (areArraysEqual || isLoading) return;\r\n setIsLoading(true);\r\n try {\r\n const wineDatas = await fetchWinesForPreview(wines);\r\n const reorderedWineDatas = wines.map((wineId: number) => wineDatas.find((wine: WineWidgetModel) => wine.productVariantId === wineId));\r\n setWineList(reorderedWineDatas);\r\n setIsLoading(false);\r\n } catch (error) {\r\n setIsLoading(false);\r\n throw new Error(error);\r\n }\r\n }, [wines, type]);\r\n\r\n return { languageCode, showErrorMessage, isValidationError, wineList, isLoading };\r\n};\r\n","/**\r\n * @module WinePreviewService\r\n * @description Service for fetching package preview data\r\n * @param productVariantIds - array of product variant IDs (list of long integers)\r\n * @returns Promise that resolves to the response\r\n */\r\nexport const fetchWinesForPreview = async (productVariantIds: number[]) => {\r\n try {\r\n const response = await fetch(`/Widget/WineProductVariantForCarousel`, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n },\r\n body: JSON.stringify(productVariantIds),\r\n });\r\n\r\n return await response.json();\r\n } catch (error) {\r\n throw new Error(error);\r\n }\r\n};\r\n","import * as yup from 'yup';\r\nimport { Language } from './slides/CustomSlide/LanguageSelector/hooks/useLanguageSelector';\r\n\r\nexport const validationSchema = yup.object().shape({\r\n backgroundColor: yup.string().required('Háttérszín megadása kötelező!'),\r\n textColor: yup.string().required('Szövegszín megadása kötelező!'),\r\n buttonColor: yup.string().required('Gomb színének megadása kötelező!'),\r\n buttonTextColor: yup.string().required('Gomb szövegének megadása kötelező!'),\r\n autoPlay: yup.boolean().required('Automatikus lejátszás megadása kötelező!'),\r\n // validáció a slideokra\r\n slides: yup\r\n .array()\r\n // legalább 1 slide szükséges, külöben error\r\n .min(1, 'Legalább 1 slide hozzáadása kötelező')\r\n .of(\r\n yup.object().shape({\r\n type: yup.string().required('Típus megadása kötelező!'),\r\n\r\n // event slide esetén egy event kiválasztása szükséges\r\n id: yup.number().when('type', {\r\n is: (slideType: string) => slideType === 'EVENT',\r\n then: (eventId) => eventId.required('Kérlek válassz a legördülő listából').min(1, 'Kérlek válassz a legördülő listából'),\r\n }),\r\n\r\n // product és package slide esetén egy id kiválasztása szükséges\r\n productVariantId: yup.number().when('type', {\r\n is: (slideType: string) => slideType === 'PACKAGE' || slideType === 'PRODUCT',\r\n then: (id) => id.required('Kérlek válassz a legördülő listából').min(1, 'Kérlek válassz a legördülő listából'),\r\n }),\r\n\r\n // custom slide esetén egy kép feltöltése szükséges\r\n image: yup.object().when('type', {\r\n is: (slideType: string) => slideType === 'CUSTOM',\r\n then: (image) =>\r\n image.shape({\r\n url: yup.string().required('Kép feltöltése kötelező').min(1, 'Kép megadása kötelező'),\r\n }),\r\n }),\r\n\r\n // custom slide esetén nyelvesített content ellenőrzése\r\n content: yup.object().when('type', {\r\n is: (slideType: string) => slideType === 'CUSTOM',\r\n then: () =>\r\n yup.lazy((content) => {\r\n // nyelvek listája\r\n const languages = Object.keys(content);\r\n\r\n // minden nyelvhez tartozó content validációja\r\n return yup.object().shape({\r\n ...languages.reduce((lang, value) => {\r\n lang[value] = yup.object().shape({\r\n title: yup.string().required(`${value.toUpperCase()} cím megadása kötelező`) as yup.StringSchema,\r\n description: yup.string().required(`${value.toUpperCase()} leírás megadása kötelező`) as yup.StringSchema,\r\n buttonText: yup.string().required(`${value.toUpperCase()} gomb szöveg megadása kötelező`) as yup.StringSchema,\r\n buttonLink: yup.string().required(`${value.toUpperCase()} gomb link megadása kötelező`) as yup.StringSchema,\r\n });\r\n\r\n return lang;\r\n }, {} as Record>),\r\n });\r\n }),\r\n }),\r\n }),\r\n ),\r\n});\r\n","import { FormContextProvider } from 'shared-widget-components/src/providers/FormContextProvider';\r\nimport { validationSchema } from './validationSchema';\r\n\r\ninterface CarouselPreviewWrapperProps {\r\n children: JSX.Element;\r\n}\r\n\r\n/**\r\n * CarouselPreviewWrapper component\r\n * this component is responsible for providing the context for the carousel\r\n * @param children - the children of the component\r\n * @returns CarouselPreviewWrapper component\r\n */\r\nexport const CarouselPreviewWrapper = ({ children }: CarouselPreviewWrapperProps) => {\r\n return {children};\r\n};\r\n","import { MouseEventHandler } from 'react';\r\nimport { LeftArrow, RightArrow } from 'shared-widget-components/src/components/Icons';\r\n\r\ninterface ArrowButtonsProps {\r\n prevSlide: MouseEventHandler;\r\n nextSlide: () => void;\r\n}\r\n\r\n/**\r\n * ArrowButtons component\r\n * this component is responsible for rendering the arrow buttons in the carousel\r\n * @param prevSlide - the previous slide function\r\n * @param nextSlide - the next slide function\r\n * @returns ArrowButtons component\r\n */\r\n\r\nexport const ArrowButtons = ({ prevSlide, nextSlide }: ArrowButtonsProps) => {\r\n return (\r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n","/**\r\n * AnimatedCircle component\r\n * this component is responsible for rendering the animated circle around the navigation buttons\r\n * @param radius - the radius of the circle\r\n * @param steps - the steps of the animation\r\n * @param duration - the duration of the animation\r\n * @param buttonColor - the color of the button\r\n * @returns AnimatedCircle component\r\n */\r\n\r\nimport { useState, useEffect } from 'react';\r\n\r\nexport const AnimatedCircle = ({ radius, steps, duration, buttonColor }: { radius: number; steps: number; duration: number; buttonColor: string }) => {\r\n // State to store the points of the circle\r\n const [points, setPoints] = useState<{ x: number; y: number }[]>([]);\r\n\r\n useEffect(() => {\r\n // Effect to calculate and update points for drawing the circle over time\r\n const interval = setInterval(() => {\r\n if (points.length >= steps) {\r\n clearInterval(interval);\r\n return;\r\n }\r\n\r\n const newPoints = [];\r\n const angleStep = (2 * Math.PI) / steps;\r\n\r\n for (let i = 0; i < points.length + 1; i++) {\r\n // Calculate the angle for each point, starting from the top\r\n const angle = i * angleStep - Math.PI / 2;\r\n\r\n // Calculate the coordinates (x, y) for each point on the circle\r\n const x = radius * Math.cos(angle);\r\n const y = radius * Math.sin(angle);\r\n\r\n newPoints.push({ x, y });\r\n }\r\n\r\n // Update the points state with the newly calculated points\r\n setPoints(newPoints);\r\n }, duration / steps); // Interval to add points continously, creating the effect of drawing the circle over time\r\n\r\n // Cleanup function\r\n return () => clearInterval(interval);\r\n }, [radius, steps, duration, points]);\r\n\r\n // Return the animated circle based on the calculated points\r\n return (\r\n
\r\n );\r\n};\r\n","import { BaseSlide } from '../../../models/slides/BaseSlide';\r\nimport { AnimatedCircle } from './AnimatedCircle';\r\n\r\ninterface NavigationButtonsProps {\r\n slides: BaseSlide[];\r\n handleDotClick: (index: number) => void;\r\n currentIndex: number;\r\n buttonColor: string;\r\n autoPlay: boolean;\r\n isHovered: boolean;\r\n}\r\n\r\n/**\r\n * NavigationButtons component\r\n * this component is responsible for rendering the navigation buttons of the carousel\r\n * @param images - the images of the carousel\r\n * @param handleDotClick - function to handle the dot click\r\n * @param currentIndex - the current index of the carousel\r\n * @param buttonColor - the color of the buttons\r\n * @param autoPlay - the autoplay state of the carousel\r\n * @param isHovered - the hover state of the carousel\r\n * @returns NavigationButtons component\r\n */\r\n\r\nexport const NavigationButtons = ({ slides, handleDotClick, currentIndex, buttonColor, autoPlay, isHovered }: NavigationButtonsProps) => {\r\n // Function to show the animation circle if needed\r\n const showAnimationCircle = (index: number) => {\r\n // If the index is not the current index, return false\r\n if (index !== currentIndex) return false;\r\n\r\n // If autoPlay is disabled, return false\r\n if (!autoPlay) return false;\r\n\r\n // If the carousel is hovered, return false\r\n if (isHovered) return false;\r\n\r\n return true;\r\n };\r\n\r\n return (\r\n
\r\n );\r\n};\r\n","import { MouseEventHandler } from 'react';\r\nimport { BaseSlide } from '../../../models/slides/BaseSlide';\r\nimport { ArrowButtons } from './ArrowButtons';\r\nimport { NavigationButtons } from './NavigationButtons';\r\n\r\ninterface CarouselButtonsProps {\r\n slides: BaseSlide[];\r\n currentIndex: number;\r\n prevSlide: MouseEventHandler;\r\n nextSlide: () => void;\r\n handleDotClick: (index: number) => void;\r\n buttonColor: string;\r\n autoPlay: boolean;\r\n isHovered: boolean;\r\n}\r\n\r\n/**\r\n * CarouselButtons component\r\n * this component is responsible for rendering the arrow and dot buttons in the carousel\r\n * @param slides - slides array\r\n * @param currentIndex - current index of the slide\r\n * @param prevSlide - function to go to the previous slide\r\n * @param nextSlide - function to go to the next slide\r\n * @param handleDotClick - function to handle the dot click\r\n * @param buttonColor - color of the buttons\r\n * @param autoPlay - auto play state\r\n * @param isHovered - is hovered state\r\n * @returns CarouselButtons component\r\n */\r\n\r\nexport const CarouselButtons = ({ slides, currentIndex, prevSlide, nextSlide, handleDotClick, buttonColor, autoPlay, isHovered }: CarouselButtonsProps) => {\r\n // If there is zero or one slide, return\r\n if (slides?.length <= 1) return <>;\r\n\r\n return (\r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n","import { CDNImage } from 'shared-widget-components/src/components/CDNImage/CDNImage';\r\nimport { CarouselImages } from '../../../hooks/useCarouselImageRetriever';\r\n\r\n/**\r\n * SlideImage component\r\n * this component is responsible for rendering the slide image\r\n * @param image - the image of the slide\r\n * @returns SlideImage component\r\n */\r\n\r\nexport const SlideImage = ({ image }: { image: CarouselImages }) => {\r\n if (!image.backgroundImageUrl) {\r\n // if wine width is undefined, if package width is 500, else width is 1080\r\n const imageWidth = image.type === 'PRODUCT' ? undefined : image.type === 'PACKAGE' ? 500 : 1080;\r\n\r\n // if wine height is 370, if package height is undefined, else height is 607\r\n const imageHeight = image.type === 'PRODUCT' ? 370 : image.type === 'PACKAGE' ? undefined : 607;\r\n\r\n return ;\r\n }\r\n\r\n return (\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n};\r\n","import { CameraIcon } from 'shared-widget-components/src/components/Icons';\r\nimport { CarouselImages } from '../../../hooks/useCarouselImageRetriever';\r\n\r\n/**\r\n * SlideImagePlaceholder component\r\n * this component is responsible for rendering the placeholder of the carousel if there is no image\r\n * @param image - image url\r\n * @returns SlideImagePlaceholder component\r\n */\r\n\r\nexport const SlideImagePlaceholder = ({ image }: { image: CarouselImages }) => {\r\n return (\r\n
\r\n
\r\n \r\n
Ezen a sliden még nem található kép
\r\n
\r\n
\r\n );\r\n};\r\n","import { motion } from 'framer-motion';\r\nimport { CarouselImages } from '../../../hooks/useCarouselImageRetriever';\r\nimport { useState } from 'react';\r\nimport { useMobileSwipe } from './hooks/useMobileSwipe';\r\nimport { useDesktopSwipe } from './hooks/useDesktopSwipe';\r\nimport { SlideImage } from './CarouselSlideImage';\r\nimport { SlideImagePlaceholder } from './ImagePlaceholder';\r\n\r\ninterface CarouselSliderProps {\r\n images: CarouselImages[];\r\n currentIndex: number;\r\n prevSlide: () => void;\r\n nextSlide: () => void;\r\n}\r\n\r\n/**\r\n * CarouselSlideImages component\r\n * this component is responsible for rendering the images of the carousel\r\n * @param currentIndex - current index of the image\r\n * @param images - images array\r\n * @param prevSlide - function to go to the previous slide\r\n * @param nextSlide - function to go to the next slide\r\n * @returns CarouselSlider component\r\n */\r\nconst CarouselSlideImages = ({ currentIndex, images, prevSlide, nextSlide }: CarouselSliderProps) => {\r\n const [touchPosition, setTouchPosition] = useState(0);\r\n\r\n const { handleTouchStart, handleTouchMove, handleTouchEnd, isSwiping } = useMobileSwipe({ setTouchPosition, nextSlide, prevSlide });\r\n const { handleMouseDown, handleMouseMove, handleMouseUp, onMouseLeave, isDragging } = useDesktopSwipe({ setTouchPosition, touchPosition, nextSlide, prevSlide });\r\n\r\n // true if the user is swiping or dragging\r\n const isSwipingOrDragging = isSwiping || isDragging;\r\n\r\n return (\r\n
\r\n );\r\n};\r\n\r\nexport default CarouselSlideImages;\r\n","import { useState } from 'react';\r\nimport { MIN_SWIPE_DISTANCE } from '../../../../constants/Constants';\r\n\r\ninterface useMobileSwipeProps {\r\n setTouchPosition: (position: number) => void;\r\n nextSlide: () => void;\r\n prevSlide: () => void;\r\n}\r\n\r\nexport const useMobileSwipe = ({ setTouchPosition, nextSlide, prevSlide }: useMobileSwipeProps) => {\r\n // position of the touch start\r\n const [touchStart, setTouchStart] = useState(0);\r\n // position of the touch end\r\n const [touchEnd, setTouchEnd] = useState(0);\r\n // true if the user is swiping\r\n const [isSwiping, setIsSwiping] = useState(false);\r\n\r\n // function to handle touch start\r\n const handleTouchStart = (e: React.TouchEvent) => {\r\n setTouchStart(e.targetTouches[0].clientX);\r\n setIsSwiping(true);\r\n };\r\n\r\n // set the touch position and calculate the distance when the user is swiping\r\n const handleTouchMove = (e: React.TouchEvent) => {\r\n const currentPosition = e.targetTouches[0].clientX;\r\n\r\n setTouchEnd(e.targetTouches[0].clientX);\r\n setTouchPosition(currentPosition - touchStart);\r\n };\r\n\r\n // handle touch end\r\n const handleTouchEnd = () => {\r\n if (touchStart - touchEnd > MIN_SWIPE_DISTANCE) {\r\n // Swipe Left, show next\r\n nextSlide();\r\n }\r\n\r\n if (touchEnd - touchStart > MIN_SWIPE_DISTANCE) {\r\n // Swipe Right, show previous\r\n prevSlide();\r\n }\r\n setIsSwiping(false);\r\n setTouchPosition(0);\r\n };\r\n\r\n return {\r\n handleTouchStart,\r\n handleTouchMove,\r\n handleTouchEnd,\r\n isSwiping,\r\n };\r\n};\r\n","export const MIN_SWIPE_DISTANCE = 50;\r\n","import { useState } from 'react';\r\nimport { MIN_SWIPE_DISTANCE } from '../../../../constants/Constants';\r\n\r\ninterface useDesktopSwipeProps {\r\n setTouchPosition: (position: number) => void;\r\n touchPosition: number;\r\n nextSlide: () => void;\r\n prevSlide: () => void;\r\n}\r\n\r\nexport const useDesktopSwipe = ({ setTouchPosition, touchPosition, nextSlide, prevSlide }: useDesktopSwipeProps) => {\r\n // position of the touch start\r\n const [startPosition, setStartPosition] = useState(0);\r\n // true if the user is dragging\r\n const [isDragging, setIsDragging] = useState(false);\r\n\r\n // function to handle mouse down\r\n const handleMouseDown = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n setStartPosition(e.clientX);\r\n setIsDragging(true);\r\n };\r\n\r\n // set the touch position and calculate the distance when the user is dragging\r\n const handleMouseMove = (e: React.MouseEvent) => {\r\n if (!isDragging) return;\r\n e.preventDefault();\r\n setTouchPosition(e.clientX - startPosition);\r\n };\r\n\r\n // handle mouse up\r\n const handleMouseUp = () => {\r\n if (touchPosition > MIN_SWIPE_DISTANCE) {\r\n // Swipe Left, show next\r\n prevSlide();\r\n } else if (touchPosition < -MIN_SWIPE_DISTANCE) {\r\n // Swipe Right, show previous\r\n nextSlide();\r\n }\r\n setIsDragging(false);\r\n setTouchPosition(0);\r\n };\r\n\r\n // end the swipe action when the cursor leaves the element\r\n const onMouseLeave = () => {\r\n if (!isDragging) return;\r\n handleMouseUp();\r\n };\r\n\r\n return {\r\n handleMouseDown,\r\n handleMouseMove,\r\n handleMouseUp,\r\n onMouseLeave,\r\n isDragging,\r\n };\r\n};\r\n","export const fadeAnimationName = `@keyframes fadeIn: {\r\n from: { opacity: 0 },\r\n to: { opacity: 1 },\r\n}`;\r\n\r\nexport const fadeAnimation = 'fadeIn 1s linear forwards';\r\n","import sanitizeHtml from 'sanitize-html';\r\n\r\nexport const sanitizeUrl = (text: string) => {\r\n // Sanitize url\r\n const sanitizedUrl = sanitizeHtml(text, {\r\n allowedTags: [],\r\n allowedAttributes: {},\r\n });\r\n\r\n return sanitizedUrl;\r\n};\r\n","import { sanitizeUrl } from 'shared-widget-components/src/utils/sanitizeUrl';\r\nimport { truncateHtml } from 'shared-widget-components/src/utils/truncateHtml';\r\n\r\ninterface CustomSlideButtonProps {\r\n buttonColor: string;\r\n buttonTextColor: string;\r\n slideContent: any;\r\n}\r\n\r\n/**\r\n * CustomSlideButton component\r\n * this component is responsible for rendering the button of the custom slide\r\n * @param buttonColor - button color of the custom slide\r\n * @param buttonTextColor - button text color of the custom slide\r\n * @param slideContent - content of the custom slide\r\n * @returns CustomSlideButton component\r\n */\r\n\r\nexport const CustomSlideButton = ({ slideContent, buttonColor, buttonTextColor }: CustomSlideButtonProps) => {\r\n // ha nincs buttonText vagy buttonLink, akkor return\r\n if (!slideContent.buttonText || !slideContent.buttonLink) return <>;\r\n\r\n // a button szöveg rövidítése megadott karakterszámra\r\n const truncatedButtonText = truncateHtml(slideContent.buttonText, 20);\r\n\r\n //@ts-ignore\r\n const isAdmin = window.isAdminPage;\r\n\r\n // a gombra kattintáskor történő esemény\r\n const handleNavigation = () => {\r\n if (isAdmin) return;\r\n const url = sanitizeUrl(slideContent.buttonLink);\r\n window.location.href = url;\r\n };\r\n\r\n return (\r\n \r\n {truncatedButtonText}\r\n \r\n );\r\n};\r\n","import { useEffect, useState } from 'react';\r\nimport { CustomSlide } from '../../../models/slides/CustomSlide';\r\nimport { fadeAnimation, fadeAnimationName } from '../../../utils/fadeAnimation';\r\nimport { sanitizeUrl } from 'shared-widget-components/src/utils/sanitizeUrl';\r\nimport { truncateHtml } from 'shared-widget-components/src/utils/truncateHtml';\r\nimport { CustomSlideButton } from './CustomSlideButton';\r\n\r\ninterface CustomSlideContentProps {\r\n slides: CustomSlide[];\r\n textColor: string;\r\n buttonColor: string;\r\n buttonTextColor: string;\r\n currentIndex: number;\r\n}\r\n\r\n/**\r\n * CustomSlideContent component\r\n * this component is responsible for rendering the content of the custom slide\r\n * @param slides - the list of the carousel slides\r\n * @param currentIndex - the index of the currently active slide\r\n * @param textColor - the color of the text\r\n * @param buttonColor - the color of the button\r\n * @param buttonTextColor - the color of the button text\r\n * @returns CustomSlideContent component\r\n */\r\n\r\nconst CustomSlideContent = ({ slides, buttonColor, buttonTextColor, textColor, currentIndex }: CustomSlideContentProps) => {\r\n //@ts-ignore\r\n const languageCode = window.currentLanguageCode;\r\n\r\n // the content of the slide on the current language || hu content if no content for the current language\r\n const defaultContent = slides[currentIndex].content[languageCode] || slides[currentIndex].content['hu'];\r\n\r\n const [slideContent, setSlideContent] = useState(defaultContent);\r\n\r\n useEffect(() => {\r\n // if there is no content for the current language, return\r\n if (!slides[currentIndex] || !slides[currentIndex].content[languageCode]) return;\r\n // set the content of the slide on the current language\r\n setSlideContent(slides[currentIndex].content[languageCode]);\r\n }, [slides, languageCode]);\r\n\r\n // a description rövidítése megadott karakterszámra\r\n const truncatedDescription = truncateHtml(slideContent.description, 120);\r\n\r\n return (\r\n
\r\n
\r\n \r\n {slideContent.title}\r\n \r\n
\r\n {truncatedDescription}\r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default CustomSlideContent;\r\n","import { PackageContentProps } from '../../../models/slides/PackageSlide';\r\n\r\n/**\r\n * PackageDiscount component\r\n * this component is responsible for rendering the package discount\r\n * @param calculatedDiscount - the calculated discount\r\n * @returns PackageDiscount component\r\n */\r\n\r\nexport const PackageDiscount = ({ calculatedDiscount }: PackageContentProps) => {\r\n if (!calculatedDiscount) return null;\r\n return (\r\n
\r\n
{-calculatedDiscount}%
\r\n
\r\n );\r\n};\r\n","import { truncateHtml } from 'shared-widget-components/src/utils/truncateHtml';\r\nimport { PackageContentProps } from '../../../models/slides/PackageSlide';\r\n\r\n/**\r\n * PackageTextContent component\r\n * this component is responsible for rendering the package text content\r\n * @param packageData - the data of the package\r\n * @param textColor - the color of the text\r\n * @param animationClass - the animation class\r\n * @returns PackageTextContent component\r\n */\r\n\r\nexport const PackageTextContent = ({ packageData, textColor, animationClass }: PackageContentProps) => {\r\n const truncatedDescription = truncateHtml(packageData.description, 120);\r\n\r\n return (\r\n <>\r\n \r\n {packageData.title}\r\n \r\n
\r\n {truncatedDescription}\r\n
\r\n \r\n );\r\n};\r\n","import { PackageContentProps, PackageSlide } from '../../../models/slides/PackageSlide';\r\nimport { formatEurPrice, formatHufPrice } from 'shared-widget-components/src/utils/FormatPrice';\r\n\r\n/**\r\n * PackagePriceContent component\r\n * this component is responsible for rendering the package price content\r\n * @param packageData - the data of the package\r\n * @param calculatedDiscount - the calculated discount\r\n * @returns PackagePriceContent component\r\n */\r\n\r\nexport const PackagePriceContent = ({ packageData, calculatedDiscount }: PackageContentProps) => {\r\n if (!calculatedDiscount) {\r\n return (\r\n
\r\n );\r\n};\r\n","import { PackageSlide } from '../../../models/slides/PackageSlide';\r\nimport { fadeAnimation, fadeAnimationName } from '../../../utils/fadeAnimation';\r\nimport { usePackageContentClick } from './hooks/usePackageContentClick';\r\nimport { useInitPackageData } from './hooks/useInitPackageData';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useCalculatedDiscount } from 'shared-widget-components/src/hooks/useCalculatedDiscount';\r\nimport { PackageDiscount } from './PackageDiscount';\r\nimport { PackageTextContent } from './PackageTextContent';\r\nimport { PackagePriceContent } from './PackagePriceContent';\r\n\r\ninterface PackageSlideProps {\r\n // the list of the carousel slides\r\n slides: PackageSlide[];\r\n // the index of the currently active slide\r\n currentIndex: number;\r\n // the color of the text\r\n textColor: string;\r\n // the color of the button\r\n buttonColor: string;\r\n // the color of the button text\r\n buttonTextColor: string;\r\n}\r\n\r\n/**\r\n * PackageContent component\r\n * this component is responsible for rendering the package content\r\n * @param currentIndex - the index of the currently active slide\r\n * @param buttonColor - the color of the button\r\n * @param buttonTextColor - the color of the button text\r\n * @param textColor - the color of the text\r\n * @param slides - the list of the carousel slides\r\n * @returns PackageContent component\r\n */\r\n\r\nconst PackageContent = ({ currentIndex, textColor, buttonColor, buttonTextColor, slides }: PackageSlideProps) => {\r\n const { t } = useTranslation();\r\n const { packageData } = useInitPackageData({ slides, currentIndex });\r\n const { onPackageClick } = usePackageContentClick({ packageData });\r\n\r\n //@ts-ignore\r\n const isAdmin = window.isAdminPage;\r\n\r\n const basePrice = packageData.basePrice!;\r\n const currentPrice = packageData.currentPrice!;\r\n\r\n const { calculatedDiscount } = useCalculatedDiscount({ basePrice, currentPrice });\r\n\r\n if (!packageData.productVariantId) return <>;\r\n\r\n return (\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n {t('carousel.viewOffer')}\r\n {' '}\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default PackageContent;\r\n","import { useState, useEffect } from 'react';\r\nimport { PackageSlide } from '../../../../models/slides/PackageSlide';\r\n\r\ninterface UseInitPackageDataProps {\r\n slides: PackageSlide[];\r\n currentIndex: number;\r\n}\r\n\r\nexport const useInitPackageData = ({ slides, currentIndex }: UseInitPackageDataProps) => {\r\n const [packageData, setPackageData] = useState({} as PackageSlide);\r\n\r\n useEffect(() => {\r\n if (!slides || !slides[currentIndex]) return;\r\n setPackageData(slides[currentIndex]);\r\n }, [slides && slides[currentIndex]]);\r\n\r\n return { packageData };\r\n};\r\n","import { sanitizeUrl } from 'shared-widget-components/src/utils/sanitizeUrl';\r\nimport usePackageUrl from './usePackageUrl';\r\nimport { PackageSlide } from '../../../../models/slides/PackageSlide';\r\n\r\nexport const usePackageContentClick = ({ packageData }: { packageData: PackageSlide }) => {\r\n const { createUrl } = usePackageUrl();\r\n\r\n //@ts-ignore\r\n const isAdmin = window.isAdminPage;\r\n\r\n // @ts-ignore\r\n const languageCode = window.currentLanguageCode;\r\n\r\n // if not on admin page, navigate to the package page on click\r\n const onPackageClick = () => {\r\n if (isAdmin) return;\r\n\r\n const url = createUrl(packageData.productVariantId, packageData.title, languageCode);\r\n\r\n const sanitizedUrl = sanitizeUrl(url);\r\n\r\n window.location.href = sanitizedUrl;\r\n };\r\n return { onPackageClick };\r\n};\r\n","import { convert as urlSlug } from 'url-slug';\r\n\r\nconst usePackageUrl = () => {\r\n // megadott id, név és nyelv alapján generál egy url-t a borcsomagokhoz\r\n const createUrl = (winePackageId: number, packageName: string, languageCode: string) => {\r\n const domain = getPackageDomain(languageCode);\r\n\r\n const slug = urlSlug(packageName);\r\n\r\n return `/${domain}/${winePackageId}/${slug}`;\r\n };\r\n\r\n const getPackageDomain = (languageCode: string): string => {\r\n switch (languageCode) {\r\n case 'en':\r\n return 'winepackages';\r\n case 'de':\r\n return 'weinpaket';\r\n case 'pl':\r\n return 'pakiety-win';\r\n case 'hu':\r\n default:\r\n return 'borcsomagok';\r\n }\r\n };\r\n\r\n return { createUrl };\r\n};\r\n\r\nexport default usePackageUrl;\r\n","import { WineContentProps } from '../../../models/slides/ProductSlide';\r\n\r\n/**\r\n * WineDiscount component\r\n * this component is responsible for rendering the wine discount\r\n * @param calculatedDiscount - the calculated discount\r\n * @returns WineDiscount component\r\n */\r\n\r\nexport const WineDiscount = ({ calculatedDiscount }: WineContentProps) => {\r\n if (!calculatedDiscount) return null;\r\n return (\r\n
\r\n
-{calculatedDiscount}%
\r\n
\r\n );\r\n};\r\n","import { ProductSlide, WineContentProps } from '../../../models/slides/ProductSlide';\r\nimport { formatEurPrice, formatHufPrice } from 'shared-widget-components/src/utils/FormatPrice';\r\n\r\n/**\r\n * WinePriceContent component\r\n * this component is responsible for rendering the wine price content\r\n * @param wineData - the data of the wine\r\n * @param calculatedDiscount - the calculated discount\r\n * @returns WinePriceContent component\r\n */\r\n\r\nexport const WinePriceContent = ({ wineData, calculatedDiscount }: WineContentProps) => {\r\n if (!calculatedDiscount) {\r\n return (\r\n
\r\n );\r\n};\r\n","import { truncateHtml } from 'shared-widget-components/src/utils/truncateHtml';\r\nimport { WineContentProps } from '../../../models/slides/ProductSlide';\r\n\r\n/**\r\n * WineTextContent component\r\n * this component is responsible for rendering the wine text content\r\n * @param wineData - the data of the wine\r\n * @param textColor - the color of the text\r\n * @returns WineTextContent component\r\n */\r\n\r\nexport const WineTextContent = ({ wineData, textColor }: WineContentProps) => {\r\n const truncatedDescription = truncateHtml(wineData.description, 120);\r\n return (\r\n <>\r\n \r\n {wineData.title}\r\n \r\n
\r\n {truncatedDescription}\r\n
\r\n \r\n );\r\n};\r\n","import { ProductSlide } from '../../../models/slides/ProductSlide';\r\nimport { fadeAnimation, fadeAnimationName } from '../../../utils/fadeAnimation';\r\nimport { useCalculatedDiscount } from 'shared-widget-components/src/hooks/useCalculatedDiscount';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { WineDiscount } from './WineDiscount';\r\nimport { WinePriceContent } from './WinePriceContent';\r\nimport { WineTextContent } from './WineTextContent';\r\nimport { useWineContent } from './hooks/useWineContent';\r\n\r\ninterface WineSlideProps {\r\n // the list of the carousel slides\r\n slides: ProductSlide[];\r\n // the index of the currently active slide\r\n currentIndex: number;\r\n // the color of the text\r\n textColor: string;\r\n // the color of the button\r\n buttonColor: string;\r\n // the color of the button text\r\n buttonTextColor: string;\r\n}\r\n\r\n/**\r\n * WineContent component\r\n * this component is responsible for rendering the wine content\r\n * @param currentIndex - the index of the currently active slide\r\n * @param buttonColor - the color of the button\r\n * @param buttonTextColor - the color of the button text\r\n * @param textColor - the color of the text\r\n * @param slides - the list of the carousel slides\r\n * @returns WineContent component\r\n */\r\n\r\nconst WineContent = ({ currentIndex, buttonColor, buttonTextColor, textColor, slides }: WineSlideProps) => {\r\n const { t } = useTranslation();\r\n\r\n const { wineData, onWineClick } = useWineContent({ slides, currentIndex });\r\n\r\n const basePrice = wineData.basePrice!;\r\n const currentPrice = wineData.currentPrice!;\r\n\r\n const { calculatedDiscount } = useCalculatedDiscount({ basePrice, currentPrice });\r\n\r\n // @ts-ignore\r\n const isAdmin = window.isAdminPage;\r\n\r\n if (!wineData.productVariantId) return <>;\r\n\r\n return (\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n {t('carousel.viewOffer')}\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default WineContent;\r\n","import { sanitizeUrl } from 'shared-widget-components/src/utils/sanitizeUrl';\r\nimport useWineUrl from './useWineUrl';\r\nimport { useEffect, useState } from 'react';\r\nimport { ProductSlide } from '../../../../models/slides/ProductSlide';\r\n\r\ninterface useWineContentProps {\r\n slides: ProductSlide[];\r\n currentIndex: number;\r\n}\r\n\r\nexport const useWineContent = ({ slides, currentIndex }: useWineContentProps) => {\r\n const { createUrl } = useWineUrl();\r\n\r\n const [wineData, setWineData] = useState({} as ProductSlide);\r\n\r\n // @ts-ignore\r\n const isAdmin = window.isAdminPage;\r\n\r\n // @ts-ignore\r\n const languageCode = window.currentLanguageCode;\r\n\r\n // onclick the wine image, navigate to the wine page\r\n const onWineClick = () => {\r\n if (isAdmin) return;\r\n\r\n const url = createUrl(wineData.id, wineData.title, languageCode);\r\n\r\n const sanitizedUrl = sanitizeUrl(url);\r\n\r\n window.location.href = sanitizedUrl;\r\n };\r\n\r\n // set the wine data\r\n useEffect(() => {\r\n if (!slides || !slides[currentIndex]) return;\r\n setWineData(slides[currentIndex]);\r\n }, [slides && slides[currentIndex]]);\r\n\r\n return { wineData, onWineClick };\r\n};\r\n","import { convert as urlSlug } from 'url-slug';\r\n\r\nconst useWineUrl = () => {\r\n // megadott id, név és nyelv alapján generál egy url-t a borokhoz\r\n const createUrl = (wineId: number, wineName: string, languageCode: string) => {\r\n const domain = getWineDomain(languageCode);\r\n\r\n const slug = urlSlug(wineName);\r\n\r\n return `/${domain}/${wineId}/${slug}`;\r\n };\r\n\r\n const getWineDomain = (languageCode: string): string => {\r\n switch (languageCode) {\r\n case 'en':\r\n return 'wines';\r\n case 'de':\r\n return 'weine';\r\n case 'pl':\r\n return 'wina';\r\n case 'hu':\r\n default:\r\n return 'borok';\r\n }\r\n };\r\n\r\n return { createUrl };\r\n};\r\n\r\nexport default useWineUrl;\r\n","import { CalendarIcon } from 'shared-widget-components/src/components/Icons';\r\n\r\ninterface EventDateProps {\r\n dateFrom: Date | null;\r\n dateTo: Date | null;\r\n}\r\n\r\n/**\r\n * EventDate component\r\n * this component is responsible for rendering the date of the event\r\n * @param dateFrom - the start date of the event\r\n * @param dateTo - the end date of the event\r\n * @returns EventDate component\r\n */\r\n\r\nexport const EventDate = ({ dateFrom, dateTo }: EventDateProps) => {\r\n // Format the date using Moment.js\r\n const formatDate = (dateParam: string) => {\r\n const date = new Date(dateParam);\r\n // Helper function to add leading zeros\r\n const zeroPad = (num: number) => num.toString().padStart(2, '0');\r\n\r\n // Extract year, month, and day\r\n const year = date.getFullYear();\r\n const month = zeroPad(date.getMonth() + 1); // getMonth() is zero-indexed\r\n const day = zeroPad(date.getDate());\r\n\r\n // Extract hours and minutes\r\n const hours = zeroPad(date.getHours());\r\n const minutes = zeroPad(date.getMinutes());\r\n\r\n // Format the date as YYYY.MM.DD.\r\n const formattedDate = `${year}.${month}.${day}.`;\r\n\r\n // If the time is 00:00, return only the date\r\n if (hours === '00' && minutes === '00') {\r\n return formattedDate;\r\n }\r\n\r\n // Otherwise, return the date and time\r\n return `${formattedDate} ${hours}:${minutes}`;\r\n };\r\n\r\n if (!dateFrom) return <>; // in case of no dates\r\n\r\n // in case of both dates are present\r\n return (\r\n
\r\n \r\n
\r\n
{formatDate('' + dateFrom)} -
\r\n
{dateTo ? formatDate('' + dateTo) : ''}
\r\n
\r\n
\r\n );\r\n};\r\n","import { truncateHtml } from 'shared-widget-components/src/utils/truncateHtml';\r\n\r\ninterface EventDescriptionProps {\r\n description: string;\r\n textColor: string;\r\n}\r\n\r\n/**\r\n * EventDescription component\r\n * this component is responsible for rendering the event description\r\n * @param description - the description of the event\r\n * @param textColor - the color of the text\r\n * @returns EventDescription component\r\n */\r\n\r\nexport const EventDescription = ({ description, textColor }: EventDescriptionProps) => {\r\n const truncatedDescription = truncateHtml(description, 120);\r\n\r\n return (\r\n
\r\n {truncatedDescription}\r\n
\r\n );\r\n};\r\n","interface EventOrganizerProps {\r\n organizer: string;\r\n textColor: string;\r\n}\r\n\r\n/**\r\n * EventOrganizer component\r\n * @param organizer - organizer of the event\r\n * @param textColor - text color of the organizer\r\n * @returns EventOrganizer component\r\n */\r\n\r\nexport const EventOrganizer = ({ organizer, textColor }: EventOrganizerProps) => {\r\n return (\r\n \r\n {organizer}\r\n \r\n );\r\n};\r\n","import { MobileIcon } from 'shared-widget-components/src/components/Icons';\r\nimport { formatHufPrice } from 'shared-widget-components/src/utils/FormatPrice';\r\n\r\n/**\r\n * Event price component\r\n * this component is responsible for rendering the event price\r\n * @param {number[]} price - price of the event\r\n * @returns EventPrice component\r\n */\r\n\r\nexport const EventPrice = ({ price }: { price: number[] }) => {\r\n if (!price || price.length === 0) return <>;\r\n\r\n const minPrice = Math.min(...price);\r\n\r\n const formattedPrice = formatHufPrice(minPrice);\r\n\r\n return (\r\n
\r\n \r\n
{formattedPrice}-tól
\r\n
\r\n );\r\n};\r\n","interface EventTitleProps {\r\n title: string;\r\n textColor: string;\r\n}\r\n\r\n/**\r\n * EventTitle component\r\n * @param title - title of the event\r\n * @param textColor - text color of the title\r\n * @returns EventTitle component\r\n */\r\n\r\nexport const EventTitle = ({ title, textColor }: EventTitleProps) => {\r\n return (\r\n \r\n {title}\r\n \r\n );\r\n};\r\n","import { EventSlide } from '../../../models/slides/EventSlide';\r\nimport { fadeAnimation, fadeAnimationName } from '../../../utils/fadeAnimation';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { EventDate } from './EventDate';\r\nimport { EventDescription } from './EventDescription';\r\nimport { EventOrganizer } from './EventOrganizer';\r\nimport { EventPrice } from './EventPrice';\r\nimport { EventTitle } from './EventTitle';\r\nimport { useEvent } from './hooks/useEvent';\r\n\r\ninterface EventSlideProps {\r\n // the list of the carousel slides\r\n slides: EventSlide[];\r\n // the index of the currently active slide\r\n currentIndex: number;\r\n // the color of the text\r\n textColor: string;\r\n // the color of the button\r\n buttonColor: string;\r\n // the color of the button text\r\n buttonTextColor: string;\r\n}\r\n\r\n/**\r\n * EventContent component\r\n * this component is responsible for rendering the content of the event slide\r\n * @param currentIndex - the index of the currently active slide\r\n * @param textColor - the color of the text\r\n * @param buttonColor - the color of the button\r\n * @param buttonTextColor - the color of the button text\r\n * @param slides - the list of the carousel slides\r\n * @returns EventContent component\r\n */\r\n\r\nconst EventContent = ({ currentIndex, textColor, buttonColor, buttonTextColor, slides }: EventSlideProps) => {\r\n const { t } = useTranslation();\r\n\r\n const { eventData, onEventClick } = useEvent({ slides, currentIndex });\r\n\r\n //@ts-ignore\r\n const isAdmin = window.isAdminPage;\r\n\r\n if (!eventData.id) return <>;\r\n\r\n return (\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {' '}\r\n
\r\n
\r\n \r\n {t('carousel.viewEvent')}\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default EventContent;\r\n","import { useState, useEffect } from 'react';\r\nimport { sanitizeUrl } from 'shared-widget-components/src/utils/sanitizeUrl';\r\nimport { EventSlide } from '../../../../models/slides/EventSlide';\r\nimport useEventUrl from './useEventUrl';\r\n\r\ninterface useEventProps {\r\n slides: EventSlide[];\r\n currentIndex: number;\r\n}\r\n\r\nexport const useEvent = ({ slides, currentIndex }: useEventProps) => {\r\n const { createUrl } = useEventUrl();\r\n\r\n const [eventData, setEventData] = useState({} as EventSlide);\r\n\r\n //@ts-ignore\r\n const isAdmin = window.isAdminPage;\r\n\r\n // @ts-ignore\r\n const languageCode = window.currentLanguageCode;\r\n\r\n // if not on admin page, navigate to the event page on click\r\n const onEventClick = () => {\r\n if (isAdmin) return;\r\n\r\n const url = createUrl(eventData.id, eventData.title, languageCode);\r\n\r\n const sanitizedUrl = sanitizeUrl(url);\r\n\r\n window.location.href = sanitizedUrl;\r\n };\r\n\r\n useEffect(() => {\r\n if (!slides || !slides[currentIndex]) return;\r\n setEventData(slides[currentIndex]);\r\n }, [slides && slides[currentIndex]]);\r\n\r\n return { eventData, onEventClick };\r\n};\r\n","import { convert as urlSlug } from 'url-slug';\r\n\r\nconst useEventUrl = () => {\r\n // megadott id, név és nyelv alapján generál egy url-t az eseményekhez\r\n const createUrl = (eventId: number, eventName: string, languageCode: string) => {\r\n const domain = getEventDomain(languageCode);\r\n\r\n const slug = urlSlug(eventName);\r\n\r\n return `/${domain}/${eventId}/${slug}`;\r\n };\r\n\r\n const getEventDomain = (languageCode: string): string => {\r\n switch (languageCode) {\r\n case 'en':\r\n return 'events';\r\n case 'de':\r\n return 'veranstaltungen';\r\n case 'pl':\r\n return 'wydarzenia';\r\n case 'hu':\r\n default:\r\n return 'esemenyek';\r\n }\r\n };\r\n\r\n return { createUrl };\r\n};\r\n\r\nexport default useEventUrl;\r\n","import { BaseSlide } from '../../models/slides/BaseSlide';\r\nimport CustomSlideContent from '../slides/CustomSlide/CustomSlideContent';\r\nimport PackageContent from '../slides/PackageSlide/PackageContent';\r\nimport WineContent from '../slides/WineSlide/WineContent';\r\nimport EventContent from '../slides/eventSlide/EventContent';\r\n\r\ninterface CarouselSlideContent {\r\n slides: any[];\r\n currentIndex: number;\r\n textColor: string;\r\n buttonColor: string;\r\n buttonTextColor: string;\r\n}\r\n\r\n/**\r\n * CarouselContent component\r\n * this component is responsible for rendering the content of the carousel by the type of the slide\r\n * @param currentIndex - the current index of the carousel\r\n * @param buttonColor - the color of the buttons\r\n * @param textColor - the color of the text\r\n * @param buttonTextColor - the color of the button text\r\n * @param slides - the slides of the carousel\r\n * @returns The content of the carousel\r\n */\r\n\r\nexport const CarouselContent = ({ currentIndex, buttonColor, textColor, buttonTextColor, slides }: CarouselSlideContent) => {\r\n return (\r\n
\r\n );\r\n};\r\n","import { useState } from 'react';\r\nimport { CarouselButtons } from './carouselButtons/CarouselButtons';\r\nimport CarouselSlideImages from './slideImages/CarouselSlideImages';\r\nimport useCarouselElement from './hooks/useCarouselElement';\r\nimport { useCarouselImageRetriever } from '../../hooks/useCarouselImageRetriever';\r\nimport { CarouselContent } from './CarouselContent';\r\n\r\ninterface CarouselElementProps {\r\n slides: any[];\r\n autoPlay: boolean;\r\n\r\n textColor: string;\r\n buttonColor: string;\r\n buttonTextColor: string;\r\n}\r\n\r\n/**\r\n * CarouselElement component\r\n * this component is responsible for rendering the carousel\r\n * @param autoPlay - the autoplay state of the carousel\r\n * @param buttonColor - the color of the buttons\r\n * @param textColor - the color of the text\r\n * @param buttonTextColor - the color of the button text\r\n * @param slides - the slides of the carousel\r\n * @returns The carousel element what will be displayed on the preview\r\n */\r\nexport const CarouselElement = ({ autoPlay, buttonColor, textColor, buttonTextColor, slides }: CarouselElementProps) => {\r\n const [isHovered, setIsHovered] = useState(false);\r\n\r\n const { currentIndex, handleDotClick, nextSlide, prevSlide } = useCarouselElement({ slides, isHovered, autoPlay });\r\n const { images } = useCarouselImageRetriever({ slides });\r\n\r\n return (\r\n setIsHovered(true)}\r\n onMouseLeave={() => setIsHovered(false)}\r\n onTouchStart={() => setIsHovered(true)}\r\n onTouchEnd={() => setIsHovered(false)}\r\n className='flex min-[350px]:flex-col lg:flex-row mx-auto bg-white w-full'\r\n >\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n","import { useEffect, useState } from 'react';\r\n\r\ninterface UseCarouselComponent {\r\n slides: any[];\r\n isHovered: boolean;\r\n autoPlay: boolean;\r\n}\r\n\r\n/**\r\n * This custom hook is used to handle the navigation of the carousel\r\n * @param slides - slides\r\n */\r\nconst useCarouselElement = ({ slides, isHovered, autoPlay }: UseCarouselComponent) => {\r\n const [currentIndex, setCurrentIndex] = useState(0);\r\n\r\n // this function is used to navigate to the previous slide\r\n const prevSlide = () => {\r\n setCurrentIndex(currentIndex === 0 ? slides?.length - 1 : currentIndex - 1);\r\n };\r\n\r\n // this function is used to navigate to the next slide\r\n const nextSlide = () => {\r\n setCurrentIndex(currentIndex === slides?.length - 1 ? 0 : currentIndex + 1);\r\n };\r\n\r\n // this function is used to navigate to the selected slide\r\n const handleDotClick = (index: number) => {\r\n setCurrentIndex(index);\r\n };\r\n\r\n // this function is used to set the current index with a given timeout value\r\n useEffect(() => {\r\n if (!autoPlay) return;\r\n if (isHovered) return;\r\n const interval = setInterval(() => {\r\n nextSlide();\r\n }, 5000);\r\n\r\n return () => clearInterval(interval);\r\n }, [currentIndex, slides, isHovered, autoPlay]);\r\n\r\n // this function is used to reset the current index if the slides array's length changes\r\n useEffect(() => {\r\n setCurrentIndex(0);\r\n }, [slides.length]);\r\n\r\n return {\r\n currentIndex,\r\n prevSlide,\r\n nextSlide,\r\n handleDotClick,\r\n setCurrentIndex,\r\n };\r\n};\r\n\r\nexport default useCarouselElement;\r\n","import { useEffect, useState } from 'react';\r\nimport { CustomSlide } from '../models/slides/CustomSlide';\r\nimport { PackageSlide } from '../models/slides/PackageSlide';\r\nimport { ProductSlide } from '../models/slides/ProductSlide';\r\nimport { EventSlide } from '../models/slides/EventSlide';\r\nimport { BaseSlide } from '../models/slides/BaseSlide';\r\n\r\nexport interface CarouselImages {\r\n url: string;\r\n type: string;\r\n backgroundImageUrl?: string;\r\n\r\n alt: string;\r\n}\r\n\r\nexport const useCarouselImageRetriever = ({ slides }: { slides: BaseSlide[] }) => {\r\n const [images, setImages] = useState([]);\r\n\r\n useEffect(() => {\r\n if (!slides) return;\r\n const updatedImageUrls = slides.map((slider: BaseSlide, index) => {\r\n switch (slider.type) {\r\n case 'CUSTOM':\r\n const customSlide = slides[index] as CustomSlide;\r\n return { url: customSlide.image.url || '', alt: customSlide.image.alt || '', type: 'CUSTOM' };\r\n\r\n case 'PACKAGE':\r\n const packageSlide = slides[index] as PackageSlide;\r\n if (!packageSlide.showWineBottlesInFront) return { url: packageSlide.backgroundImage || '', alt: packageSlide.backgroundImage || '', type: 'PACKAGE' };\r\n return { url: packageSlide.foregroundImage || '', backgroundImageUrl: packageSlide.backgroundImage, alt: packageSlide.foregroundImage || '', type: 'PACKAGE' };\r\n\r\n case 'PRODUCT':\r\n const wineSlide = slides[index] as ProductSlide;\r\n return { url: wineSlide.imgUrl || '', alt: wineSlide.imgUrl || '', type: 'PRODUCT' };\r\n\r\n case 'EVENT':\r\n const eventSlide = slides[index] as EventSlide;\r\n return { url: eventSlide.image || '', alt: eventSlide.image || '', type: 'EVENT' };\r\n\r\n default:\r\n return { url: '', alt: '', type: '' };\r\n }\r\n });\r\n\r\n const filteredImages = updatedImageUrls.filter((obj) => obj !== null);\r\n setImages(filteredImages);\r\n }, [slides]);\r\n\r\n return { images };\r\n};\r\n","/**\r\n * @module PackagePreviewService\r\n * @description Service for fetching package preview data\r\n * @param productVariantIds - array of product variant IDs (list of long integers)\r\n * @returns Promise that resolves to the response\r\n */\r\nexport const fetchPackagesForPreview = async (productVariantIds: number[]) => {\r\n try {\r\n const response = await fetch(`/Widget/PackageProductVariantForCarousel`, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n },\r\n body: JSON.stringify(productVariantIds),\r\n });\r\n\r\n return await response.json();\r\n } catch (error) {\r\n throw new Error(error);\r\n }\r\n};\r\n","import { UseFormSetValue, FieldValues } from 'react-hook-form';\r\nimport { BaseSlide } from '../../../../../models/slides/BaseSlide';\r\nimport { PackageSlide } from '../../../../../models/slides/PackageSlide';\r\nimport { fetchPackagesForPreview } from '../../../../../services/packageServices/packagePreviewService';\r\nimport { getPackageSlide } from './getPackageSlide';\r\n\r\nexport const updatePackage = async ({ slide, setValue, index }: { slide: BaseSlide; setValue: UseFormSetValue; index: number }) => {\r\n const packageSlide = slide as PackageSlide;\r\n if (!packageSlide.productVariantId) setValue(`slideDatas[${index}]`, emptyPackage);\r\n\r\n try {\r\n const packageElement = (await fetchPackagesForPreview([packageSlide.productVariantId])) as PackageSlide[];\r\n\r\n const updatedPackage = getPackageSlide(packageElement);\r\n\r\n setValue(`slideDatas[${index}]`, updatedPackage);\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n};\r\n\r\nexport const emptyPackage = {\r\n imgUrl: '',\r\n type: 'PACKAGE',\r\n description: '',\r\n title: '',\r\n id: 0,\r\n productVariantId: 0,\r\n availableQuantity: 0,\r\n basePrice: 0,\r\n discount: 0,\r\n currentPrice: 0,\r\n currentEurPrice: 0,\r\n baseEurPrice: 0,\r\n showEurPrice: false,\r\n isManufacturer: false,\r\n};\r\n","import { PackageSlide } from '../../../../../models/slides/PackageSlide';\r\n\r\nexport const getPackageSlide = (packageElement: PackageSlide[]) => {\r\n const updatedPackage = {\r\n type: 'PACKAGE',\r\n title: packageElement[0]?.title || '',\r\n id: packageElement[0]?.id || 0,\r\n productVariantId: packageElement[0]?.productVariantId || 0,\r\n foregroundImage: packageElement[0]?.foregroundImage || '',\r\n backgroundImage: packageElement[0]?.backgroundImage || '',\r\n showWineBottlesInFront: packageElement[0]?.showWineBottlesInFront || false,\r\n availableQuantity: packageElement[0]?.availableQuantity || 0,\r\n description: packageElement[0]?.description || '',\r\n basePrice: packageElement[0]?.basePrice || 0,\r\n discount: packageElement[0]?.discount || 0,\r\n currentPrice: packageElement[0]?.currentPrice || 0,\r\n currentEurPrice: packageElement[0]?.currentEurPrice || 0,\r\n baseEurPrice: packageElement[0]?.baseEurPrice || 0,\r\n showEurPrice: packageElement[0]?.showEurPrice || false,\r\n isManufacturer: packageElement[0]?.isManufacturer || false,\r\n };\r\n\r\n return updatedPackage;\r\n};\r\n","/**\r\n * @module WinePreviewService\r\n * @description Service for fetching package preview data\r\n * @param productVariantIds - array of product variant IDs (list of long integers)\r\n * @returns Promise that resolves to the response\r\n */\r\nexport const fetchWinesForPreview = async (productVariantIds: number[]) => {\r\n try {\r\n const response = await fetch(`/Widget/WineProductVariantForCarousel`, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n },\r\n body: JSON.stringify(productVariantIds),\r\n });\r\n\r\n return await response.json();\r\n } catch (error) {\r\n throw new Error(error);\r\n }\r\n};\r\n","import { UseFormSetValue, FieldValues } from 'react-hook-form';\r\nimport { BaseSlide } from '../../../../../models/slides/BaseSlide';\r\nimport { ProductSlide } from '../../../../../models/slides/ProductSlide';\r\nimport { fetchWinesForPreview } from '../../../../../services/wineServices/WinePreviewService';\r\nimport { getProductSlide } from './getProductSlide';\r\n\r\nexport const updateProduct = async ({ slide, setValue, index }: { slide: BaseSlide; setValue: UseFormSetValue; index: number }) => {\r\n const wineSlide = slide as ProductSlide;\r\n if (!wineSlide.productVariantId) setValue(`slideDatas[${index}]`, emptyProduct);\r\n\r\n try {\r\n const wineElement = (await fetchWinesForPreview([wineSlide.productVariantId])) as ProductSlide[];\r\n const updatedWine = getProductSlide(wineElement);\r\n setValue(`slideDatas[${index}]`, updatedWine);\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n};\r\n\r\nexport const emptyProduct = {\r\n imgUrl: '',\r\n type: 'PRODUCT',\r\n description: '',\r\n title: '',\r\n id: 0,\r\n productVariantId: 0,\r\n availableQuantity: 0,\r\n basePrice: 0,\r\n discount: 0,\r\n currentPrice: 0,\r\n currentEurPrice: 0,\r\n baseEurPrice: 0,\r\n showEurPrice: false,\r\n isManufacturer: false,\r\n tags: [],\r\n productYear: 0,\r\n};\r\n","import { ProductSlide } from '../../../../../models/slides/ProductSlide';\r\n\r\nexport const getProductSlide = (wineElement: ProductSlide[]) => {\r\n const updatedWine = {\r\n imgUrl: wineElement[0]?.imgUrl || '',\r\n type: 'PRODUCT',\r\n title: wineElement[0]?.title || '',\r\n description: wineElement[0]?.description || '',\r\n id: wineElement[0]?.id || 0,\r\n productVariantId: wineElement[0]?.productVariantId || 0,\r\n availableQuantity: wineElement[0]?.availableQuantity || 0,\r\n basePrice: wineElement[0]?.basePrice || 0,\r\n discount: wineElement[0]?.discount || 0,\r\n currentPrice: wineElement[0]?.currentPrice || 0,\r\n currentEurPrice: wineElement[0]?.currentEurPrice || 0,\r\n baseEurPrice: wineElement[0]?.baseEurPrice || 0,\r\n showEurPrice: wineElement[0]?.showEurPrice || false,\r\n isManufacturer: wineElement[0]?.isManufacturer || false,\r\n tags: wineElement[0]?.tags || [],\r\n productYear: wineElement[0]?.productYear || 0,\r\n };\r\n\r\n return updatedWine;\r\n};\r\n","/**\r\n * @module EventPreviewService\r\n * @description Service for fetching event preview data\r\n * @param eventId - array of product variant IDs (list of long integers)\r\n * @returns Promise that resolves to the response\r\n */\r\nexport const fetchEventForPreview = async (eventId: number) => {\r\n try {\r\n const response = await fetch(`/Widget/event/${eventId}`, {\r\n method: 'GET',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n },\r\n });\r\n\r\n return await response.json();\r\n } catch (error) {\r\n throw new Error(error);\r\n }\r\n};\r\n","import { FieldValues, UseFormSetValue } from 'react-hook-form';\r\nimport { BaseSlide } from '../../../../../models/slides/BaseSlide';\r\nimport { EventSlide } from '../../../../../models/slides/EventSlide';\r\nimport { fetchEventForPreview } from '../../../../../services/eventServices/EventPreviewService';\r\nimport { getEventSlide } from './getEventSlide';\r\n\r\nexport const updateEvent = async ({ slide, setValue, index }: { slide: BaseSlide; setValue: UseFormSetValue; index: number }) => {\r\n const eventSlide = slide as EventSlide;\r\n if (!eventSlide.id) setValue(`slideDatas[${index}]`, emptyEvent);\r\n\r\n try {\r\n const eventElement = (await fetchEventForPreview(eventSlide.id)) as EventSlide;\r\n const updatedEvent = getEventSlide(eventElement);\r\n setValue(`slideDatas[${index}]`, updatedEvent);\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n};\r\n\r\nexport const emptyEvent = { url: '', type: 'EVENT', description: '', title: '', id: 0, dateFrom: null, dateTo: null, organizer: '', location: [], ticketPrices: [], animalFriendly: null, disabledFriendly: null };\r\n","import { EventSlide } from '../../../../../models/slides/EventSlide';\r\n\r\nexport const getEventSlide = (eventElement: EventSlide) => {\r\n const updatedEvent = {\r\n image: eventElement?.image || '',\r\n type: 'EVENT',\r\n title: eventElement?.title || '',\r\n description: eventElement?.description || '',\r\n id: eventElement?.id || 0,\r\n dateFrom: eventElement?.dateFrom || null,\r\n dateTo: eventElement?.dateTo || null,\r\n organizer: eventElement?.organizer || '',\r\n location: eventElement?.location || [],\r\n ticketPrices: eventElement?.ticketPrices || [],\r\n animalFriendly: eventElement?.animalFriendly || null,\r\n disabledFriendly: eventElement?.disabledFriendly || null,\r\n };\r\n\r\n return updatedEvent;\r\n};\r\n","import { UseFormSetValue, FieldValues } from 'react-hook-form';\r\nimport { BaseSlide } from '../../../../../models/slides/BaseSlide';\r\nimport { getCustomSlide } from './getCustomSlide';\r\n\r\nexport const updateCustom = ({ slide, setValue, index }: { slide: BaseSlide; setValue: UseFormSetValue; index: number }) => {\r\n const customSlide = getCustomSlide(slide);\r\n setValue(`slideDatas[${index}]`, customSlide);\r\n return customSlide;\r\n};\r\n","import { BaseSlide } from '../../../../../models/slides/BaseSlide';\r\nimport { CustomSlide } from '../../../../../models/slides/CustomSlide';\r\n\r\nexport const getCustomSlide = (slide: BaseSlide) => {\r\n const customSlide = slide as CustomSlide;\r\n const updatedSlide = {\r\n image: customSlide.image || {\r\n alt: '',\r\n url: '',\r\n },\r\n type: 'CUSTOM',\r\n content: customSlide.content,\r\n };\r\n\r\n return updatedSlide as CustomSlide;\r\n};\r\n","import { ImageIcon } from 'shared-widget-components/src/components/Icons';\r\n\r\nexport const CarouselLoadingSkeleton = () => {\r\n return (\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n );\r\n};\r\n","import { useFormContext } from 'shared-widget-components/src/providers/FormContextProvider';\r\nimport { Carousel } from '../../models/CarouselModel';\r\nimport { CarouselElement } from './CarouselElement';\r\nimport { previewScrollbar } from 'shared-widget-components/src/components/preview/previewScrollbar';\r\nimport { useWatch } from 'react-hook-form';\r\nimport useInitCarouselSlides from '../widgetSettings/hooks/useInitCarouselSlides';\r\nimport { useEffect, useState } from 'react';\r\nimport { BaseSlide } from '../../models/slides/BaseSlide';\r\nimport { CarouselLoadingSkeleton } from '../skeleton/CarouselLoadingSkeleton';\r\n\r\ninterface CarouselPreviewProps {\r\n item: Carousel;\r\n}\r\n\r\n/**\r\n * CarouselPreview component\r\n * this component is responsible for rendering the preview of the carousel\r\n * @param item - the item of the carousel\r\n * @returns CarouselPreview component\r\n */\r\nconst CarouselPreview = ({ item }: CarouselPreviewProps) => {\r\n const { control } = useFormContext();\r\n const slideDatas: BaseSlide[] = useWatch({ control, name: 'slideDatas' });\r\n const [slides, setSlides] = useState([]);\r\n\r\n const { isLoading } = useInitCarouselSlides({ slides: item.slides });\r\n\r\n useEffect(() => {\r\n if (!slideDatas) return;\r\n setSlides(slideDatas);\r\n }, [slideDatas]);\r\n\r\n if (isLoading) return ;\r\n\r\n return (\r\n
\r\n \r\n
\r\n {slides?.length > 0 && (\r\n
\r\n \r\n
\r\n )}\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default CarouselPreview;\r\n","import { useEffect, useState } from 'react';\r\nimport { BaseSlide } from '../../../models/slides/BaseSlide';\r\nimport useAsyncEffect from 'use-async-effect';\r\nimport { useFormContext } from 'shared-widget-components/src/providers/FormContextProvider';\r\nimport { useWatch } from 'react-hook-form';\r\nimport { updatePackage } from './initHelper/package/packageHelper';\r\nimport { updateProduct } from './initHelper/product/productHelper';\r\nimport { updateEvent } from './initHelper/event/eventHelper';\r\nimport { updateCustom } from './initHelper/custom/customHelper';\r\nimport { slideDataUpdater } from './initHelper/slideDataUpdater';\r\nimport { CustomSlide } from '../../../models/slides/CustomSlide';\r\nimport { EventSlide } from '../../../models/slides/EventSlide';\r\nimport { ProductSlide } from '../../../models/slides/ProductSlide';\r\nimport { PackageSlide } from '../../../models/slides/PackageSlide';\r\n\r\ninterface useInitCarouselSlidesProps {\r\n slides: BaseSlide[];\r\n}\r\n\r\nexport type SlideType = CustomSlide | ProductSlide | EventSlide | PackageSlide;\r\n\r\nconst useInitCarouselSlides = ({ slides }: useInitCarouselSlidesProps) => {\r\n const { setValue, control } = useFormContext();\r\n const slideDatas: SlideType[] = useWatch({ control, name: 'slideDatas' });\r\n const [slideData, setSlideData] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n useAsyncEffect(async () => {\r\n setIsLoading(true);\r\n try {\r\n await slideDataUpdater({ slides, setValue });\r\n } catch (error) {\r\n throw new Error(error);\r\n } finally {\r\n setIsLoading(false);\r\n }\r\n }, [slides.length]);\r\n\r\n useEffect(() => {\r\n if (!slideDatas) return;\r\n setSlideData(slideDatas);\r\n }, [slideDatas]);\r\n\r\n useAsyncEffect(async () => {\r\n for (let index = 0; index < slides.length; index++) {\r\n const slide = slides[index];\r\n const previousSlide = slideData[index];\r\n\r\n if (previousSlide && JSON.stringify(previousSlide) !== JSON.stringify(slide)) {\r\n switch (slide.type) {\r\n case 'CUSTOM':\r\n updateCustom({ slide, setValue, index });\r\n break;\r\n case 'PACKAGE':\r\n updatePackage({ slide, setValue, index });\r\n break;\r\n case 'PRODUCT':\r\n updateProduct({ slide, setValue, index });\r\n break;\r\n case 'EVENT':\r\n updateEvent({ slide, setValue, index });\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n }\r\n\r\n setSlideData(slides);\r\n }, [slides]);\r\n\r\n return { slideData, isLoading };\r\n};\r\n\r\nexport default useInitCarouselSlides;\r\n","import { FieldValues, UseFormSetValue } from 'react-hook-form';\r\nimport { BaseSlide } from '../../../../models/slides/BaseSlide';\r\nimport { CustomSlide } from '../../../../models/slides/CustomSlide';\r\nimport { EventSlide } from '../../../../models/slides/EventSlide';\r\nimport { PackageSlide } from '../../../../models/slides/PackageSlide';\r\nimport { ProductSlide } from '../../../../models/slides/ProductSlide';\r\nimport { fetchEventForPreview } from '../../../../services/eventServices/EventPreviewService';\r\nimport { fetchPackagesForPreview } from '../../../../services/packageServices/packagePreviewService';\r\nimport { fetchWinesForPreview } from '../../../../services/wineServices/WinePreviewService';\r\nimport { emptyEvent } from './event/eventHelper';\r\nimport { emptyPackage } from './package/packageHelper';\r\nimport { emptyProduct } from './product/productHelper';\r\n\r\nexport const slideDataUpdater = async ({ slides, setValue }: { slides: BaseSlide[]; setValue: UseFormSetValue }) => {\r\n if (!slides) return;\r\n const updatedSlidesPromise = slides.map(async (slider: BaseSlide, index) => {\r\n switch (slider.type) {\r\n case 'CUSTOM':\r\n const customSlide = slides[index] as CustomSlide;\r\n return { image: customSlide.image || { alt: '', url: '' }, type: 'CUSTOM', content: customSlide.content };\r\n\r\n case 'PACKAGE':\r\n const packageSlide = slides[index] as PackageSlide;\r\n if (!packageSlide.productVariantId) return emptyPackage;\r\n\r\n try {\r\n const packageElement = (await fetchPackagesForPreview([packageSlide.productVariantId])) as PackageSlide[];\r\n return {\r\n type: 'PACKAGE',\r\n title: packageElement[0]?.title || '',\r\n id: packageElement[0]?.id || 0,\r\n productVariantId: packageElement[0]?.productVariantId || 0,\r\n foregroundImage: packageElement[0]?.foregroundImage || '',\r\n backgroundImage: packageElement[0]?.backgroundImage || '',\r\n showWineBottlesInFront: packageElement[0]?.showWineBottlesInFront || false,\r\n availableQuantity: packageElement[0]?.availableQuantity || 0,\r\n description: packageElement[0]?.description || '',\r\n basePrice: packageElement[0]?.basePrice || 0,\r\n discount: packageElement[0]?.discount || 0,\r\n currentPrice: packageElement[0]?.currentPrice || 0,\r\n currentEurPrice: packageElement[0]?.currentEurPrice || 0,\r\n baseEurPrice: packageElement[0]?.baseEurPrice || 0,\r\n showEurPrice: packageElement[0]?.showEurPrice || false,\r\n isManufacturer: packageElement[0]?.isManufacturer || false,\r\n };\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n\r\n case 'PRODUCT':\r\n const wineSlide = slides[index] as ProductSlide;\r\n if (!wineSlide.productVariantId) return emptyProduct;\r\n\r\n try {\r\n const wineElement = (await fetchWinesForPreview([wineSlide.productVariantId])) as ProductSlide[];\r\n return {\r\n imgUrl: wineElement[0]?.imgUrl || '',\r\n type: 'PRODUCT',\r\n title: wineElement[0]?.title || '',\r\n description: wineElement[0]?.description || '',\r\n id: wineElement[0]?.id || 0,\r\n productVariantId: wineElement[0]?.productVariantId || 0,\r\n availableQuantity: wineElement[0]?.availableQuantity || 0,\r\n basePrice: wineElement[0]?.basePrice || 0,\r\n discount: wineElement[0]?.discount || 0,\r\n currentPrice: wineElement[0]?.currentPrice || 0,\r\n currentEurPrice: wineElement[0]?.currentEurPrice || 0,\r\n baseEurPrice: wineElement[0]?.baseEurPrice || 0,\r\n showEurPrice: wineElement[0]?.showEurPrice || false,\r\n isManufacturer: wineElement[0]?.isManufacturer || false,\r\n tags: wineElement[0]?.tags || [],\r\n productYear: wineElement[0]?.productYear || 0,\r\n };\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n\r\n case 'EVENT':\r\n const eventSlide = slides[index] as EventSlide;\r\n if (!eventSlide.id) return emptyEvent;\r\n\r\n try {\r\n const eventElement = (await fetchEventForPreview(eventSlide.id)) as EventSlide;\r\n return {\r\n image: eventElement?.image || '',\r\n type: 'EVENT',\r\n title: eventElement?.title || '',\r\n description: eventElement?.description || '',\r\n id: eventElement?.id || 0,\r\n dateFrom: eventElement?.dateFrom || null,\r\n dateTo: eventElement?.dateTo || null,\r\n organizer: eventElement?.organizer || '',\r\n location: eventElement?.location || [],\r\n ticketPrices: eventElement?.ticketPrices || [],\r\n animalFriendly: eventElement?.animalFriendly || null,\r\n disabledFriendly: eventElement?.disabledFriendly || null,\r\n };\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n\r\n default:\r\n return null;\r\n }\r\n });\r\n\r\n const updatedSlides = await Promise.all(updatedSlidesPromise);\r\n const filtered = updatedSlides.filter((obj) => obj !== null);\r\n\r\n if (!filtered) return;\r\n setValue('slideDatas', filtered);\r\n};\r\n","import { CarouselPreviewWrapper } from './CarouselPreviewWrapper';\r\nimport CarouselPreview from './widgetPreview/CarouselPreview';\r\nimport { useWidgetBody } from './widgetSettings/hooks/useWidgetBody';\r\n\r\ninterface CarouselWidgetWebshopProps {\r\n data: string;\r\n}\r\n\r\n/**\r\n * @description This component is displayed in the webshop as a fully functioning widget.\r\n * @param0 data string; The data / widgetState of the widget.\r\n * @returns {JSX.Element} The GalleryWidgetWebshop component\r\n */\r\n\r\nexport const CarouselWidgetWebshop = ({ data }: CarouselWidgetWebshopProps) => {\r\n // webshopon ha nincs adat, akkor ne jelenjen meg semmi\r\n if (!data || data === '{}') return <>;\r\n\r\n const InnerCarouselWidgetWebshop = () => {\r\n useWidgetBody(data);\r\n const CarouselData = JSON.parse(data);\r\n\r\n return ;\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\n","import { useEffect, useState } from 'react';\r\nimport { useFormContext } from 'shared-widget-components/src/providers/FormContextProvider';\r\nimport { Carousel } from '../../../models/CarouselModel';\r\n\r\n/**\r\n * Custom hook to reset the form and update the widgetstate with data from backend\r\n * @param data - data from backend\r\n * @returns {object} - object containing the languageCode\r\n */\r\nexport const useWidgetBody = (data: string, buttonColor?: string, buttonTextColor?: string, primaryColor?: string) => {\r\n //@ts-ignore\r\n const languageCode = window.currentLanguageCode;\r\n const { reset, errors } = useFormContext();\r\n\r\n const [isValidationError, setIsValidationError] = useState(false);\r\n\r\n const showErrorMessage = () => {\r\n setIsValidationError(true);\r\n console.log('showErrorMessage -> errors', errors);\r\n setTimeout(() => {\r\n setIsValidationError(false);\r\n }, 2000);\r\n };\r\n\r\n // update widgetstate with data from backend\r\n useEffect(() => {\r\n try {\r\n const parsedData: Carousel = JSON.parse(data);\r\n reset({\r\n backgroundColor: parsedData.backgroundColor ?? primaryColor,\r\n textColor: parsedData.textColor ?? buttonTextColor,\r\n buttonColor: parsedData.buttonColor ?? buttonColor,\r\n slides: parsedData.slides ?? [],\r\n autoPlay: parsedData.autoPlay ?? true,\r\n buttonTextColor: parsedData.buttonTextColor ?? buttonTextColor,\r\n });\r\n } catch (error) {\r\n throw new Error('Hiba az adatok betöltése közben!');\r\n }\r\n }, [data, buttonColor, buttonTextColor, primaryColor]);\r\n\r\n return { languageCode, isValidationError, showErrorMessage };\r\n};\r\n","import * as yup from 'yup';\r\n\r\nexport const validationSchema = yup.object().shape({\r\n backgroundColor: yup.string().required('Háttérszín megadása kötelező!'),\r\n textColor: yup.string().required('Szövegszín megadása kötelező!'),\r\n buttonColor: yup.string().required('Gomb színének megadása kötelező!'),\r\n buttonTextColor: yup.string().required('Gomb szövegének megadása kötelező!'),\r\n});\r\n","import { FormContextProvider } from 'shared-widget-components/src/providers/FormContextProvider';\r\nimport { validationSchema } from './validationSchema';\r\n\r\ninterface SubscribePreviewWrapperProps {\r\n children: JSX.Element;\r\n}\r\n\r\n/**\r\n * SubscribePreviewWrapper component\r\n * this component is responsible for providing the context for the subscribe widget\r\n * @param children - the children of the component\r\n * @returns SubscribePreviewWrapper component\r\n */\r\nexport const SubscribePreviewWrapper = ({ children }: SubscribePreviewWrapperProps) => {\r\n return {children};\r\n};\r\n","import { useTranslation } from 'react-i18next';\r\n\r\ninterface SuccessScreenProps {\r\n textColor: string;\r\n}\r\n\r\nexport const SuccessScreen = ({ textColor }: SuccessScreenProps) => {\r\n const { t } = useTranslation();\r\n\r\n //@ts-ignore\r\n const isAdmin = window.isAdminPage;\r\n\r\n const subscribeImageUrl = isAdmin ? '/images/newsletter.png' : '/static_assets/newsletter.png';\r\n\r\n return (\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n {t('subscribeWidget.thanks')}\r\n
\r\n
\r\n {t('subscribeWidget.success')}\r\n
\r\n
\r\n
\r\n );\r\n};\r\n","import { useState } from 'react';\r\n\r\nimport { QuestionIcon, InfoSVG } from './Icons';\r\n\r\ninterface InfoIconProps {\r\n infoText: string;\r\n id?: string;\r\n className?: string;\r\n icon?: 'question' | 'info';\r\n variant?: 'primary' | 'secondary';\r\n}\r\n\r\n/**\r\n * @description This component is an infoicon that shows a tooltip when hovered over\r\n * @param infoText The text to show in the tooltip\r\n * @param id The id of the infoicon\r\n * @param className Addititonal classes to add to the infoicon\r\n * @param icon The icon to show in the infoicon. question or info. Defaults to question\r\n * @param variant The color of the infoicon. primary/blue or secondary/grey. Defaults to primary\r\n * @returns The InfoIcon component\r\n */\r\n\r\nconst InfoIcon = ({ infoText, id, className, icon, variant }: InfoIconProps) => {\r\n const [showTooltip, setShowTooltip] = useState(false);\r\n\r\n return (\r\n
\r\n );\r\n};\r\n\r\nconst CheckboxLabel = ({ label, link, inputKey, onClick, labelColor, linkColor }: CheckboxLabelProps) => {\r\n // case of no label or link\r\n if (!label && !link) return <>;\r\n\r\n // case of label and no link\r\n if (label && !link) {\r\n return (\r\n \r\n );\r\n }\r\n\r\n // case of link and no label\r\n if (!label && link) {\r\n return (\r\n
\r\n {link}\r\n
\r\n );\r\n }\r\n\r\n // case of label and link\r\n if (label && link) {\r\n return (\r\n