(our hidden element)\n // react-dom in dev mode will warn about this. There doesn't seem to be a way to render arbitrary\n // user Head without hitting this issue (our hidden element could be just \"new Document()\", but\n // this can only have 1 child, and we don't control what is being rendered so that's not an option)\n // instead we continue to render to
, and just silence warnings for and elements\n // https://github.com/facebook/react/blob/e2424f33b3ad727321fc12e75c5e94838e84c2b5/packages/react-dom-bindings/src/client/validateDOMNesting.js#L498-L520\n const originalConsoleError = console.error.bind(console)\n console.error = (...args) => {\n if (\n Array.isArray(args) &&\n args.length >= 2 &&\n args[0]?.includes?.(`validateDOMNesting(...): %s cannot appear as`) &&\n (args[1] === `` || args[1] === ``)\n ) {\n return undefined\n }\n return originalConsoleError(...args)\n }\n\n /* We set up observer to be able to regenerate after react-refresh\n updates our hidden element.\n */\n const observer = new MutationObserver(onHeadRendered)\n observer.observe(hiddenRoot, {\n attributes: true,\n childList: true,\n characterData: true,\n subtree: true,\n })\n}\n\nexport function headHandlerForBrowser({\n pageComponent,\n staticQueryResults,\n pageComponentProps,\n}) {\n useEffect(() => {\n if (pageComponent?.Head) {\n headExportValidator(pageComponent.Head)\n\n const { render } = reactDOMUtils()\n\n const HeadElement = (\n \n \n {WrapHeadElement} \n \n ,\n hiddenRoot\n )\n }\n\n return () => {\n removePrevHeadElements()\n removeHtmlAndBodyAttributes(keysOfHtmlAndBodyAttributes)\n }\n })\n}\n","import React, { Suspense, createElement } from \"react\"\nimport PropTypes from \"prop-types\"\nimport { apiRunner } from \"./api-runner-browser\"\nimport { grabMatchParams } from \"./find-path\"\nimport { headHandlerForBrowser } from \"./head/head-export-handler-for-browser\"\n\n// Renders page\nfunction PageRenderer(props) {\n const pageComponentProps = {\n ...props,\n params: {\n ...grabMatchParams(props.location.pathname),\n ...props.pageResources.json.pageContext.__params,\n },\n }\n\n const preferDefault = m => (m && m.default) || m\n\n let pageElement\n if (props.pageResources.partialHydration) {\n pageElement = props.pageResources.partialHydration\n } else {\n pageElement = createElement(preferDefault(props.pageResources.component), {\n ...pageComponentProps,\n key: props.path || props.pageResources.page.path,\n })\n }\n\n const pageComponent = props.pageResources.head\n\n headHandlerForBrowser({\n pageComponent,\n staticQueryResults: props.pageResources.staticQueryResults,\n pageComponentProps,\n })\n\n const wrappedPage = apiRunner(\n `wrapPageElement`,\n {\n element: pageElement,\n props: pageComponentProps,\n },\n pageElement,\n ({ result }) => {\n return { element: result, props: pageComponentProps }\n }\n ).pop()\n\n return wrappedPage\n}\n\nPageRenderer.propTypes = {\n location: PropTypes.object.isRequired,\n pageResources: PropTypes.object.isRequired,\n data: PropTypes.object,\n pageContext: PropTypes.object.isRequired,\n}\n\nexport default PageRenderer\n","// This is extracted to separate module because it's shared\n// between browser and SSR code\nexport const RouteAnnouncerProps = {\n id: `gatsby-announcer`,\n style: {\n position: `absolute`,\n top: 0,\n width: 1,\n height: 1,\n padding: 0,\n overflow: `hidden`,\n clip: `rect(0, 0, 0, 0)`,\n whiteSpace: `nowrap`,\n border: 0,\n },\n \"aria-live\": `assertive`,\n \"aria-atomic\": `true`,\n}\n","import React from \"react\"\nimport PropTypes from \"prop-types\"\nimport loader, { PageResourceStatus } from \"./loader\"\nimport { maybeGetBrowserRedirect } from \"./redirect-utils.js\"\nimport { apiRunner } from \"./api-runner-browser\"\nimport emitter from \"./emitter\"\nimport { RouteAnnouncerProps } from \"./route-announcer-props\"\nimport {\n navigate as reachNavigate,\n globalHistory,\n} from \"@gatsbyjs/reach-router\"\nimport { parsePath } from \"gatsby-link\"\n\nfunction maybeRedirect(pathname) {\n const redirect = maybeGetBrowserRedirect(pathname)\n const { hash, search } = window.location\n\n if (redirect != null) {\n window.___replace(redirect.toPath + search + hash)\n return true\n } else {\n return false\n }\n}\n\n// Catch unhandled chunk loading errors and force a restart of the app.\nlet nextRoute = ``\n\nwindow.addEventListener(`unhandledrejection`, event => {\n if (/loading chunk \\d* failed./i.test(event.reason)) {\n if (nextRoute) {\n window.location.pathname = nextRoute\n }\n }\n})\n\nconst onPreRouteUpdate = (location, prevLocation) => {\n if (!maybeRedirect(location.pathname)) {\n nextRoute = location.pathname\n apiRunner(`onPreRouteUpdate`, { location, prevLocation })\n }\n}\n\nconst onRouteUpdate = (location, prevLocation) => {\n if (!maybeRedirect(location.pathname)) {\n apiRunner(`onRouteUpdate`, { location, prevLocation })\n if (\n process.env.GATSBY_QUERY_ON_DEMAND &&\n process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR === `true`\n ) {\n emitter.emit(`onRouteUpdate`, { location, prevLocation })\n }\n }\n}\n\nconst navigate = (to, options = {}) => {\n // Support forward/backward navigation with numbers\n // navigate(-2) (jumps back 2 history steps)\n // navigate(2) (jumps forward 2 history steps)\n if (typeof to === `number`) {\n globalHistory.navigate(to)\n return\n }\n\n const { pathname, search, hash } = parsePath(to)\n const redirect = maybeGetBrowserRedirect(pathname)\n\n // If we're redirecting, just replace the passed in pathname\n // to the one we want to redirect to.\n if (redirect) {\n to = redirect.toPath + search + hash\n }\n\n // If we had a service worker update, no matter the path, reload window and\n // reset the pathname whitelist\n if (window.___swUpdated) {\n window.location = pathname + search + hash\n return\n }\n\n // Start a timer to wait for a second before transitioning and showing a\n // loader in case resources aren't around yet.\n const timeoutId = setTimeout(() => {\n emitter.emit(`onDelayedLoadPageResources`, { pathname })\n apiRunner(`onRouteUpdateDelayed`, {\n location: window.location,\n })\n }, 1000)\n\n loader.loadPage(pathname + search).then(pageResources => {\n // If no page resources, then refresh the page\n // Do this, rather than simply `window.location.reload()`, so that\n // pressing the back/forward buttons work - otherwise when pressing\n // back, the browser will just change the URL and expect JS to handle\n // the change, which won't always work since it might not be a Gatsby\n // page.\n if (!pageResources || pageResources.status === PageResourceStatus.Error) {\n window.history.replaceState({}, ``, location.href)\n window.location = pathname\n clearTimeout(timeoutId)\n return\n }\n\n // If the loaded page has a different compilation hash to the\n // window, then a rebuild has occurred on the server. Reload.\n if (process.env.NODE_ENV === `production` && pageResources) {\n if (\n pageResources.page.webpackCompilationHash !==\n window.___webpackCompilationHash\n ) {\n // Purge plugin-offline cache\n if (\n `serviceWorker` in navigator &&\n navigator.serviceWorker.controller !== null &&\n navigator.serviceWorker.controller.state === `activated`\n ) {\n navigator.serviceWorker.controller.postMessage({\n gatsbyApi: `clearPathResources`,\n })\n }\n\n window.location = pathname + search + hash\n }\n }\n reachNavigate(to, options)\n clearTimeout(timeoutId)\n })\n}\n\nfunction shouldUpdateScroll(prevRouterProps, { location }) {\n const { pathname, hash } = location\n const results = apiRunner(`shouldUpdateScroll`, {\n prevRouterProps,\n // `pathname` for backwards compatibility\n pathname,\n routerProps: { location },\n getSavedScrollPosition: args => [\n 0,\n // FIXME this is actually a big code smell, we should fix this\n // eslint-disable-next-line @babel/no-invalid-this\n this._stateStorage.read(args, args.key),\n ],\n })\n if (results.length > 0) {\n // Use the latest registered shouldUpdateScroll result, this allows users to override plugin's configuration\n // @see https://github.com/gatsbyjs/gatsby/issues/12038\n return results[results.length - 1]\n }\n\n if (prevRouterProps) {\n const {\n location: { pathname: oldPathname },\n } = prevRouterProps\n if (oldPathname === pathname) {\n // Scroll to element if it exists, if it doesn't, or no hash is provided,\n // scroll to top.\n return hash ? decodeURI(hash.slice(1)) : [0, 0]\n }\n }\n return true\n}\n\nfunction init() {\n // The \"scroll-behavior\" package expects the \"action\" to be on the location\n // object so let's copy it over.\n globalHistory.listen(args => {\n args.location.action = args.action\n })\n\n window.___push = to => navigate(to, { replace: false })\n window.___replace = to => navigate(to, { replace: true })\n window.___navigate = (to, options) => navigate(to, options)\n}\n\nclass RouteAnnouncer extends React.Component {\n constructor(props) {\n super(props)\n this.announcementRef = React.createRef()\n }\n\n componentDidUpdate(prevProps, nextProps) {\n requestAnimationFrame(() => {\n let pageName = `new page at ${this.props.location.pathname}`\n if (document.title) {\n pageName = document.title\n }\n const pageHeadings = document.querySelectorAll(`#gatsby-focus-wrapper h1`)\n if (pageHeadings && pageHeadings.length) {\n pageName = pageHeadings[0].textContent\n }\n const newAnnouncement = `Navigated to ${pageName}`\n if (this.announcementRef.current) {\n const oldAnnouncement = this.announcementRef.current.innerText\n if (oldAnnouncement !== newAnnouncement) {\n this.announcementRef.current.innerText = newAnnouncement\n }\n }\n })\n }\n\n render() {\n return \n }\n}\n\nconst compareLocationProps = (prevLocation, nextLocation) => {\n if (prevLocation.href !== nextLocation.href) {\n return true\n }\n\n if (prevLocation?.state?.key !== nextLocation?.state?.key) {\n return true\n }\n\n return false\n}\n\n// Fire on(Pre)RouteUpdate APIs\nclass RouteUpdates extends React.Component {\n constructor(props) {\n super(props)\n onPreRouteUpdate(props.location, null)\n }\n\n componentDidMount() {\n onRouteUpdate(this.props.location, null)\n }\n\n shouldComponentUpdate(prevProps) {\n if (compareLocationProps(prevProps.location, this.props.location)) {\n onPreRouteUpdate(this.props.location, prevProps.location)\n return true\n }\n return false\n }\n\n componentDidUpdate(prevProps) {\n if (compareLocationProps(prevProps.location, this.props.location)) {\n onRouteUpdate(this.props.location, prevProps.location)\n }\n }\n\n render() {\n return (\n \n {this.props.children}\n \n )\n }\n}\n\nRouteUpdates.propTypes = {\n location: PropTypes.object.isRequired,\n}\n\nexport { init, shouldUpdateScroll, RouteUpdates, maybeGetBrowserRedirect }\n","// Pulled from react-compat\n// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349\nfunction shallowDiffers(a, b) {\n for (var i in a) {\n if (!(i in b)) return true;\n }for (var _i in b) {\n if (a[_i] !== b[_i]) return true;\n }return false;\n}\n\nexport default (function (instance, nextProps, nextState) {\n return shallowDiffers(instance.props, nextProps) || shallowDiffers(instance.state, nextState);\n});","import React from \"react\"\nimport loader, { PageResourceStatus } from \"./loader\"\nimport shallowCompare from \"shallow-compare\"\n\nclass EnsureResources extends React.Component {\n constructor(props) {\n super()\n const { location, pageResources } = props\n this.state = {\n location: { ...location },\n pageResources:\n pageResources ||\n loader.loadPageSync(location.pathname + location.search, {\n withErrorDetails: true,\n }),\n }\n }\n\n static getDerivedStateFromProps({ location }, prevState) {\n if (prevState.location.href !== location.href) {\n const pageResources = loader.loadPageSync(\n location.pathname + location.search,\n {\n withErrorDetails: true,\n }\n )\n\n return {\n pageResources,\n location: { ...location },\n }\n }\n\n return {\n location: { ...location },\n }\n }\n\n loadResources(rawPath) {\n loader.loadPage(rawPath).then(pageResources => {\n if (pageResources && pageResources.status !== PageResourceStatus.Error) {\n this.setState({\n location: { ...window.location },\n pageResources,\n })\n } else {\n window.history.replaceState({}, ``, location.href)\n window.location = rawPath\n }\n })\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n // Always return false if we're missing resources.\n if (!nextState.pageResources) {\n this.loadResources(\n nextProps.location.pathname + nextProps.location.search\n )\n return false\n }\n\n if (\n process.env.BUILD_STAGE === `develop` &&\n nextState.pageResources.stale\n ) {\n this.loadResources(\n nextProps.location.pathname + nextProps.location.search\n )\n return false\n }\n\n // Check if the component or json have changed.\n if (this.state.pageResources !== nextState.pageResources) {\n return true\n }\n if (\n this.state.pageResources.component !== nextState.pageResources.component\n ) {\n return true\n }\n\n if (this.state.pageResources.json !== nextState.pageResources.json) {\n return true\n }\n // Check if location has changed on a page using internal routing\n // via matchPath configuration.\n if (\n this.state.location.key !== nextState.location.key &&\n nextState.pageResources.page &&\n (nextState.pageResources.page.matchPath ||\n nextState.pageResources.page.path)\n ) {\n return true\n }\n return shallowCompare(this, nextProps, nextState)\n }\n\n render() {\n if (\n process.env.NODE_ENV !== `production` &&\n (!this.state.pageResources ||\n this.state.pageResources.status === PageResourceStatus.Error)\n ) {\n const message = `EnsureResources was not able to find resources for path: \"${this.props.location.pathname}\"\nThis typically means that an issue occurred building components for that path.\nRun \\`gatsby clean\\` to remove any cached elements.`\n if (this.state.pageResources?.error) {\n console.error(message)\n throw this.state.pageResources.error\n }\n\n throw new Error(message)\n }\n\n return this.props.children(this.state)\n }\n}\n\nexport default EnsureResources\n","import { apiRunner, apiRunnerAsync } from \"./api-runner-browser\"\nimport React from \"react\"\nimport { Router, navigate, Location, BaseContext } from \"@gatsbyjs/reach-router\"\nimport { ScrollContext } from \"gatsby-react-router-scroll\"\nimport { StaticQueryContext } from \"./static-query\"\nimport {\n SlicesMapContext,\n SlicesContext,\n SlicesResultsContext,\n} from \"./slice/context\"\nimport {\n shouldUpdateScroll,\n init as navigationInit,\n RouteUpdates,\n} from \"./navigation\"\nimport emitter from \"./emitter\"\nimport PageRenderer from \"./page-renderer\"\nimport asyncRequires from \"$virtual/async-requires\"\nimport {\n setLoader,\n ProdLoader,\n publicLoader,\n PageResourceStatus,\n getStaticQueryResults,\n getSliceResults,\n} from \"./loader\"\nimport EnsureResources from \"./ensure-resources\"\nimport stripPrefix from \"./strip-prefix\"\n\n// Generated during bootstrap\nimport matchPaths from \"$virtual/match-paths.json\"\nimport { reactDOMUtils } from \"./react-dom-utils\"\n\nconst loader = new ProdLoader(asyncRequires, matchPaths, window.pageData)\nsetLoader(loader)\nloader.setApiRunner(apiRunner)\n\nconst { render, hydrate } = reactDOMUtils()\n\nwindow.asyncRequires = asyncRequires\nwindow.___emitter = emitter\nwindow.___loader = publicLoader\n\nnavigationInit()\n\nconst reloadStorageKey = `gatsby-reload-compilation-hash-match`\n\napiRunnerAsync(`onClientEntry`).then(() => {\n // Let plugins register a service worker. The plugin just needs\n // to return true.\n if (apiRunner(`registerServiceWorker`).filter(Boolean).length > 0) {\n require(`./register-service-worker`)\n }\n\n // In gatsby v2 if Router is used in page using matchPaths\n // paths need to contain full path.\n // For example:\n // - page have `/app/*` matchPath\n // - inside template user needs to use `/app/xyz` as path\n // Resetting `basepath`/`baseuri` keeps current behaviour\n // to not introduce breaking change.\n // Remove this in v3\n const RouteHandler = props => (\n \n \n {({ location }) => (\n \n {({ pageResources, location }) => {\n const staticQueryResults = getStaticQueryResults()\n const sliceResults = getSliceResults()\n\n return (\n \n \n \n \n \n {children}\n \n \n \n \n \n )\n }}\n \n )}\n \n )\n }\n }\n\n class LocationHandler extends React.Component {\n render() {\n return (\n \n {({ pageResources, location }) => (\n \n \n \n \n )}\n \n )\n }\n }\n\n const { pagePath, location: browserLoc } = window\n\n // Explicitly call navigate if the canonical path (window.pagePath)\n // is different to the browser path (window.location.pathname). SSR\n // page paths might include search params, while SSG and DSG won't.\n // If page path include search params we also compare query params.\n // But only if NONE of the following conditions hold:\n //\n // - The url matches a client side route (page.matchPath)\n // - it's a 404 page\n // - it's the offline plugin shell (/offline-plugin-app-shell-fallback/)\n if (\n pagePath &&\n __BASE_PATH__ + pagePath !==\n browserLoc.pathname + (pagePath.includes(`?`) ? browserLoc.search : ``) &&\n !(\n loader.findMatchPath(stripPrefix(browserLoc.pathname, __BASE_PATH__)) ||\n pagePath.match(/^\\/(404|500)(\\/?|.html)$/) ||\n pagePath.match(/^\\/offline-plugin-app-shell-fallback\\/?$/)\n )\n ) {\n navigate(\n __BASE_PATH__ +\n pagePath +\n (!pagePath.includes(`?`) ? browserLoc.search : ``) +\n browserLoc.hash,\n {\n replace: true,\n }\n )\n }\n\n // It's possible that sessionStorage can throw an exception if access is not granted, see https://github.com/gatsbyjs/gatsby/issues/34512\n const getSessionStorage = () => {\n try {\n return sessionStorage\n } catch {\n return null\n }\n }\n\n publicLoader.loadPage(browserLoc.pathname + browserLoc.search).then(page => {\n const sessionStorage = getSessionStorage()\n\n if (\n page?.page?.webpackCompilationHash &&\n page.page.webpackCompilationHash !== window.___webpackCompilationHash\n ) {\n // Purge plugin-offline cache\n if (\n `serviceWorker` in navigator &&\n navigator.serviceWorker.controller !== null &&\n navigator.serviceWorker.controller.state === `activated`\n ) {\n navigator.serviceWorker.controller.postMessage({\n gatsbyApi: `clearPathResources`,\n })\n }\n\n // We have not matching html + js (inlined `window.___webpackCompilationHash`)\n // with our data (coming from `app-data.json` file). This can cause issues such as\n // errors trying to load static queries (as list of static queries is inside `page-data`\n // which might not match to currently loaded `.js` scripts).\n // We are making attempt to reload if hashes don't match, but we also have to handle case\n // when reload doesn't fix it (possibly broken deploy) so we don't end up in infinite reload loop\n if (sessionStorage) {\n const isReloaded = sessionStorage.getItem(reloadStorageKey) === `1`\n\n if (!isReloaded) {\n sessionStorage.setItem(reloadStorageKey, `1`)\n window.location.reload(true)\n return\n }\n }\n }\n\n if (sessionStorage) {\n sessionStorage.removeItem(reloadStorageKey)\n }\n\n if (!page || page.status === PageResourceStatus.Error) {\n const message = `page resources for ${browserLoc.pathname} not found. Not rendering React`\n\n // if the chunk throws an error we want to capture the real error\n // This should help with https://github.com/gatsbyjs/gatsby/issues/19618\n if (page && page.error) {\n console.error(message)\n throw page.error\n }\n\n throw new Error(message)\n }\n\n const SiteRoot = apiRunner(\n `wrapRootElement`,\n { element: {SiteRoot} \n }\n\n const focusEl = document.getElementById(`gatsby-focus-wrapper`)\n\n // Client only pages have any empty body so we just do a normal\n // render to avoid React complaining about hydration mis-matches.\n let defaultRenderer = render\n if (focusEl && focusEl.children.length) {\n defaultRenderer = hydrate\n }\n\n const renderer = apiRunner(\n `replaceHydrateFunction`,\n undefined,\n defaultRenderer\n )[0]\n\n function runRender() {\n const rootElement =\n typeof window !== `undefined`\n ? document.getElementById(`___gatsby`)\n : null\n\n renderer(\n {finalData && render(finalData)}\n {!finalData && \n )\n}\n\nlet warnedAboutStaticQuery = false\n\n// TODO(v6): Remove completely\nconst StaticQuery = props => {\n const { data, query, render, children } = props\n\n if (process.env.NODE_ENV === `development` && !warnedAboutStaticQuery) {\n console.warn(\n `The \n {staticQueryData => (\n \n )\n}\n\nStaticQuery.propTypes = {\n data: PropTypes.object,\n query: PropTypes.string.isRequired,\n render: PropTypes.func,\n children: PropTypes.func,\n}\n\nconst useStaticQuery = query => {\n if (\n typeof React.useContext !== `function` &&\n process.env.NODE_ENV === `development`\n ) {\n // TODO(v5): Remove since we require React >= 18\n throw new Error(\n `You're likely using a version of React that doesn't support Hooks\\n` +\n `Please update React and ReactDOM to 16.8.0 or later to use the useStaticQuery hook.`\n )\n }\n\n const context = React.useContext(StaticQueryContext)\n\n // query is a stringified number like `3303882` when wrapped with graphql, If a user forgets\n // to wrap the query in a grqphql, then casting it to a Number results in `NaN` allowing us to\n // catch the misuse of the API and give proper direction\n if (isNaN(Number(query))) {\n throw new Error(`useStaticQuery was called with a string but expects to be called using \\`graphql\\`. Try this:\n\nimport { useStaticQuery, graphql } from 'gatsby';\n\nuseStaticQuery(graphql\\`${query}\\`);\n`)\n }\n\n if (context[query]?.data) {\n return context[query].data\n } else {\n throw new Error(\n `The result of this StaticQuery could not be fetched.\\n\\n` +\n `This is likely a bug in Gatsby and if refreshing the page does not fix it, ` +\n `please open an issue in https://github.com/gatsbyjs/gatsby/issues`\n )\n }\n}\n\nexport { StaticQuery, StaticQueryContext, useStaticQuery }\n","import React from \"react\"\n\n// Ensure serverContext is not created more than once as React will throw when creating it more than once\n// https://github.com/facebook/react/blob/dd2d6522754f52c70d02c51db25eb7cbd5d1c8eb/packages/react/src/ReactServerContext.js#L101\nconst createServerContext = (name, defaultValue = null) => {\n /* eslint-disable no-undef */\n if (!globalThis.__SERVER_CONTEXT) {\n globalThis.__SERVER_CONTEXT = {}\n }\n\n if (!globalThis.__SERVER_CONTEXT[name]) {\n globalThis.__SERVER_CONTEXT[name] = React.createServerContext(\n name,\n defaultValue\n )\n }\n\n return globalThis.__SERVER_CONTEXT[name]\n}\n\nfunction createServerOrClientContext(name, defaultValue) {\n if (React.createServerContext) {\n return createServerContext(name, defaultValue)\n }\n\n return React.createContext(defaultValue)\n}\n\nexport { createServerOrClientContext }\n","/**\n * Remove a prefix from a string. Return the input string if the given prefix\n * isn't found.\n */\n\nexport default function stripPrefix(str, prefix = ``) {\n if (!prefix) {\n return str\n }\n\n if (str === prefix) {\n return `/`\n }\n\n if (str.startsWith(`${prefix}/`)) {\n return str.slice(prefix.length)\n }\n\n return str\n}\n","const listOfMetricsSend = new Set();\nfunction debounce(fn, timeout) {\n let timer = null;\n return function (...args) {\n if (timer) {\n clearTimeout(timer);\n }\n timer = setTimeout(fn, timeout, ...args);\n };\n}\nfunction sendWebVitals() {\n function sendData(data) {\n if (listOfMetricsSend.has(data.name)) {\n return;\n }\n listOfMetricsSend.add(data.name);\n sendToGoogleAnalytics(data);\n }\n return import(`web-vitals/base`).then(({\n getLCP,\n getFID,\n getCLS\n }) => {\n const debouncedCLS = debounce(sendData, 3000);\n // we don't need to debounce FID - we send it when it happens\n const debouncedFID = sendData;\n // LCP can occur multiple times so we debounce it\n const debouncedLCP = debounce(sendData, 3000);\n\n // With the true flag, we measure all previous occurences too, in case we start listening to late.\n getCLS(debouncedCLS, true);\n getFID(debouncedFID, true);\n getLCP(debouncedLCP, true);\n });\n}\nfunction sendToGoogleAnalytics({\n name,\n value,\n id\n}) {\n window.ga(`send`, `event`, {\n eventCategory: `Web Vitals`,\n eventAction: name,\n // The `id` value will be unique to the current page load. When sending\n // multiple values from the same page (e.g. for CLS), Google Analytics can\n // compute a total by grouping on this ID (note: requires `eventLabel` to\n // be a dimension in your report).\n eventLabel: id,\n // Google Analytics metrics must be integers, so the value is rounded.\n // For CLS the value is first multiplied by 1000 for greater precision\n // (note: increase the multiplier for greater precision if needed).\n eventValue: Math.round(name === `CLS` ? value * 1000 : value),\n // Use a non-interaction event to avoid affecting bounce rate.\n nonInteraction: true,\n // Use `sendBeacon()` if the browser supports it.\n transport: `beacon`\n });\n}\nexport const onRouteUpdate = ({\n location\n}, pluginOptions = {}) => {\n const ga = window.ga;\n if (process.env.NODE_ENV !== `production` || typeof ga !== `function`) {\n return null;\n }\n const pathIsExcluded = location && typeof window.excludeGAPaths !== `undefined` && window.excludeGAPaths.some(rx => rx.test(location.pathname));\n if (pathIsExcluded) return null;\n\n // wrap inside a timeout to make sure react-helmet is done with it's changes (https://github.com/gatsbyjs/gatsby/issues/9139)\n // reactHelmet is using requestAnimationFrame: https://github.com/nfl/react-helmet/blob/5.2.0/src/HelmetUtils.js#L296-L299\n const sendPageView = () => {\n const pagePath = location ? location.pathname + location.search + location.hash : undefined;\n ga(`set`, `page`, pagePath);\n ga(`send`, `pageview`);\n };\n\n // Minimum delay for reactHelmet's requestAnimationFrame\n const delay = Math.max(32, pluginOptions.pageTransitionDelay || 0);\n setTimeout(sendPageView, delay);\n return null;\n};\nexport function onInitialClientRender(_, pluginOptions) {\n if (process.env.NODE_ENV === `production` && typeof ga === `function` && pluginOptions.enableWebVitalsTracking) {\n sendWebVitals();\n }\n}","\"use strict\";\n\nexports.wrapPageElement = require(\"./wrap-page\");","\"use strict\";\n\nvar React = require(\"react\");\nvar preferDefault = function preferDefault(m) {\n return m && m.default || m;\n};\nvar Layout;\ntry {\n Layout = preferDefault(require(GATSBY_LAYOUT_COMPONENT_PATH));\n} catch (e) {\n if (e.toString().indexOf(\"Error: Cannot find module\") !== -1) {\n throw new Error(\"Couldn't find layout component at \\\"\" + GATSBY_LAYOUT_COMPONENT_PATH + \".\\n\\n\" + \"Please create layout component in that location or specify path to layout component in gatsby-config.js\");\n } else {\n // Logging the error for debugging older browsers as there is no way\n // to wrap the thrown error in a try/catch.\n console.error(e);\n throw e;\n }\n}\n\n// eslint-disable-next-line react/prop-types,react/display-name\nmodule.exports = function (_ref) {\n var element = _ref.element,\n props = _ref.props;\n return /*#__PURE__*/React.createElement(Layout, props, element);\n};","/* global __MANIFEST_PLUGIN_HAS_LOCALISATION__ */\nimport { withPrefix } from \"gatsby\";\nimport getManifestForPathname from \"./get-manifest-pathname\";\n\n// when we don't have localisation in our manifest, we tree shake everything away\nexport const onRouteUpdate = function onRouteUpdate({\n location\n}, pluginOptions) {\n if (__MANIFEST_PLUGIN_HAS_LOCALISATION__) {\n const {\n localize\n } = pluginOptions;\n const manifestFilename = getManifestForPathname(location.pathname, localize, true);\n const manifestEl = document.head.querySelector(`link[rel=\"manifest\"]`);\n if (manifestEl) {\n manifestEl.setAttribute(`href`, withPrefix(manifestFilename));\n }\n }\n};","\"use strict\";\n\nexports.__esModule = true;\nexports.default = void 0;\nvar _gatsby = require(\"gatsby\");\n/**\n * Get a manifest filename depending on localized pathname\n *\n * @param {string} pathname\n * @param {Array<{start_url: string, lang: string}>} localizedManifests\n * @param {boolean} shouldPrependPathPrefix\n * @return string\n */\nvar _default = (pathname, localizedManifests, shouldPrependPathPrefix = false) => {\n const defaultFilename = `manifest.webmanifest`;\n if (!Array.isArray(localizedManifests)) {\n return defaultFilename;\n }\n const localizedManifest = localizedManifests.find(app => {\n let startUrl = app.start_url;\n if (shouldPrependPathPrefix) {\n startUrl = (0, _gatsby.withPrefix)(startUrl);\n }\n return pathname.startsWith(startUrl);\n });\n if (!localizedManifest) {\n return defaultFilename;\n }\n return `manifest_${localizedManifest.lang}.webmanifest`;\n};\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _styledComponents = require(\"styled-components\");\n// eslint-disable-next-line react/prop-types,react/display-name\nexports.wrapRootElement = function (_ref, pluginOptions) {\n var element = _ref.element;\n return /*#__PURE__*/_react.default.createElement(_styledComponents.StyleSheetManager, {\n disableVendorPrefixes: (pluginOptions === null || pluginOptions === void 0 ? void 0 : pluginOptions.disableVendorPrefixes) === true\n }, element);\n};","import React from 'react'\nimport styled from 'styled-components'\n\nconst Container = styled.div`\n max-width: calc(1190px - 2rem);\n margin-left: auto;\n margin-right: auto;\n padding-left: 1rem;\n padding-right: 1rem;\n`\n\nconst Maxwidth = ({ children, nominheight, path }) => {\n return (\n {children} \n )\n}\n\nexport default Maxwidth;\n","import React from 'react'\nimport styled from 'styled-components'\n\nimport Facebook from '../../images/facebook_black.svg'\nimport Instagram from '../../images/instagram_black.svg'\nimport LinkedIn from '../../images/linkedin_black.svg'\n\n\nconst Container = styled.div`\n display: flex;\n column-gap: 1rem;\n margin-left: auto;\n margin-right: auto;\n justify-content: center;\n img {\n height: 40px;\n }\n}\n`\n\nconst Email = styled.p`\n margin-bottom: 4em;\n margin-top: 1em;\n text-align: center;\n a {\n color: #000;\n text-decoration: none;\n }\n`\n\nconst Socials = () => {\n return (\n <>\n \n 
\n 
\n \n contact@bbcstudioscreative.com \n \n )\n}\n\nexport default Socials\n","export default \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPkdyb3VwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGZpbGw9IiMwMDAwMDAiIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjEwMCI+PC9jaXJjbGU+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik03NC44LDQwIEwxMjUuMiw0MCBDMTQ0LjQsNDAgMTYwLDU1LjYgMTYwLDc0LjggTDE2MCwxMjUuMiBDMTYwLDE0NC40MTk1MDkgMTQ0LjQxOTUwOSwxNjAgMTI1LjIsMTYwIEw3NC44LDE2MCBDNTUuNiwxNjAgNDAsMTQ0LjQgNDAsMTI1LjIgTDQwLDc0LjggQzQwLDU1LjU4MDQ5MDcgNTUuNTgwNDkwNyw0MCA3NC44LDQwIE03My42LDUyIEM2MS42NzA2NDk0LDUyIDUyLDYxLjY3MDY0OTQgNTIsNzMuNiBMNTIsMTI2LjQgQzUyLDEzOC4zNCA2MS42NiwxNDggNzMuNiwxNDggTDEyNi40LDE0OCBDMTM4LjMyOTM1MSwxNDggMTQ4LDEzOC4zMjkzNTEgMTQ4LDEyNi40IEwxNDgsNzMuNiBDMTQ4LDYxLjY2IDEzOC4zNCw1MiAxMjYuNCw1MiBMNzMuNiw1MiBNMTMxLDYyIEMxMzQuODY1OTkzLDYyIDEzOCw2NS4xMzQwMDY4IDEzOCw2OSBDMTM4LDcyLjg2NTk5MzIgMTM0Ljg2NTk5Myw3NiAxMzEsNzYgQzEyNy4xMzQwMDcsNzYgMTI0LDcyLjg2NTk5MzIgMTI0LDY5IEMxMjQsNjUuMTM0MDA2OCAxMjcuMTM0MDA3LDYyIDEzMSw2MiBNMTAwLDcwIEMxMTYuNTY4NTQyLDcwIDEzMCw4My40MzE0NTc1IDEzMCwxMDAgQzEzMCwxMTYuNTY4NTQyIDExNi41Njg1NDIsMTMwIDEwMCwxMzAgQzgzLjQzMTQ1NzUsMTMwIDcwLDExNi41Njg1NDIgNzAsMTAwIEM3MCw4My40MzE0NTc1IDgzLjQzMTQ1NzUsNzAgMTAwLDcwIE0xMDAsODIgQzkwLjA1ODg3NDUsODIgODIsOTAuMDU4ODc0NSA4MiwxMDAgQzgyLDEwOS45NDExMjUgOTAuMDU4ODc0NSwxMTggMTAwLDExOCBDMTA5Ljk0MTEyNSwxMTggMTE4LDEwOS45NDExMjUgMTE4LDEwMCBDMTE4LDkwLjA1ODg3NDUgMTA5Ljk0MTEyNSw4MiAxMDAsODIgTDEwMCw4MiBaIiBpZD0iU2hhcGUiIGZpbGw9IiNGRkZGRkYiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+\"","export default \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPkdyb3VwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgIDxjaXJjbGUgaWQ9IkNpcmNsZSIgZmlsbD0iIzAwMDAwMCIgY3g9IjEwMCIgY3k9IjEwMCIgcj0iMTAwIj48L2NpcmNsZT4KICAgICAgICAgICAgPHBhdGggZD0iTTYyLjUwNzA5NjQsNTAgQzU5LjE5MTY5ODYsNDkuOTk3NjA1MiA1Ni4wMTExNjIzLDUxLjI1MzU0MTIgNTMuNjY1NDkwNSw1My40OTEzOTMxIEM1MS4zMTk4MTg2LDU1LjcyOTI0NSA1MC4wMDEyNTQ0LDU4Ljc2NTYwNjEgNTAsNjEuOTMyMjA1MSBDNTAsNjguNTMxMDc0MiA1NS41OTgxNDQyLDc0IDYyLjQ5MjksNzQgQzY5LjM5NzEyMDEsNzQgNzUsNjguNTMxMDc0MiA3NSw2MS45NDEyNDQ3IEM3NS4wMDI1MDc3LDU4Ljc3NTA2MjEgNzMuNjg3NDA0LDU1LjczNzczNzEgNzEuMzQ0MjU4Niw1My40OTgwNTk3IEM2OS4wMDExMTMxLDUxLjI1ODM4MjQgNjUuODIyMDYsNTAgNjIuNTA3MDk2NCw1MCBaIE0xMjMuODQ2MDcxLDgyIEMxMTMuMjI2NTcxLDgyIDEwNy4xNTM1LDg3LjI1ODY2NjcgMTA0LjIzNDIxNCw5Mi40OTAxMzMzIEwxMDMuOTI3OTI5LDkyLjQ5MDEzMzMgTDEwMy45Mjc5MjksODMuNDA5ODY2NyBMODMsODMuNDA5ODY2NyBMODMsMTUwIEwxMDQuODA4NSwxNTAgTDEwNC44MDg1LDExNy4wMzgxMzMgQzEwNC44MDg1LDEwOC4zNTIyNjcgMTA1LjQ5NzY0Myw5OS45NTY1MzMzIDExNi44NDQ1NzEsOTkuOTU2NTMzMyBDMTI4LjAyODc4Niw5OS45NTY1MzMzIDEyOC4xOTE1LDEwOS44NjE4NjcgMTI4LjE5MTUsMTE3LjU4NjY2NyBMMTI4LjE5MTUsMTUwIEwxNTAsMTUwIEwxNTAsMTEzLjQyNTA2NyBDMTUwLDk1LjUyNzQ2NjcgMTQ1LjkzNjkyOSw4MiAxMjMuODQ2MDcxLDgyIFogTTUyLDgzIEw1MiwxNTAgTDc0LDE1MCBMNzQsODMgTDUyLDgzIFoiIGlkPSJsaW5rZWRpbiIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=\"","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","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","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","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 { 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","/**\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 { useConstant } from '../../utils/use-constant.mjs';\nimport { globalProjectionState } from './state.mjs';\n\nlet id = 1;\nfunction useProjectionId() {\n return useConstant(() => {\n if (globalProjectionState.hasEverUpdated) {\n return id++;\n }\n });\n}\n\nexport { useProjectionId };\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 { useProjectionId } from '../projection/node/id.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 /**\n * Create a unique projection ID for this component. If a new component is added\n * during a layout animation we'll use this to query the DOM and hydrate its ref early, allowing\n * us to measure it as soon as any layout effect flushes pending layout animations.\n *\n * Performance note: It'd be better not to have to search the DOM for these elements.\n * For newly-entering components it could be enough to only correct treeScale, in which\n * case we could mount in a scale-correction mode. This wouldn't be enough for\n * shared element transitions however. Perhaps for those we could revert to a root node\n * that gets forceRendered and layout animations are triggered on its layout effect.\n */\n const projectionId = isStatic ? undefined : useProjectionId();\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, projectionId, 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, projectionId, 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 { 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';\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 useIsomorphicLayoutEffect(() => {\n visualElement && visualElement.render();\n });\n useEffect(() => {\n visualElement && visualElement.updateFeatures();\n });\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 const useAnimateChangesEffect = window.HandoffAppearAnimations\n ? useIsomorphicLayoutEffect\n : useEffect;\n useAnimateChangesEffect(() => {\n if (visualElement && visualElement.animationState) {\n visualElement.animationState.animateChanges();\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(--\");\n\nexport { 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, 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 // Treat x/y not as shortcuts but as actual attributes\n if (attrX !== undefined)\n attrs.x = attrX;\n if (attrY !== undefined)\n attrs.y = attrY;\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, projectionId, 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 if (projectionId) {\n elementProps[\"data-projection-id\"] = projectionId;\n }\n return createElement(Component, {\n ...elementProps,\n children: renderedChildren,\n });\n };\n return useRender;\n}\n\nexport { createUseRender };\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","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';\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 = key === \"x\" || key === \"y\" ? \"attr\" + key.toUpperCase() : 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 { 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';\n\nconst svgMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,\n createRenderState: createSvgRenderState,\n onMount: (props, instance, { renderState, latestValues }) => {\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 buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate);\n renderSVG(instance, renderState);\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","const frameData = {\n delta: 0,\n timestamp: 0,\n isProcessing: false,\n};\n\nexport { frameData };\n","import { createRenderStep } from './create-render-step.mjs';\nimport { frameData } from './data.mjs';\n\nconst maxElapsed = 40;\nlet useDefaultElapsed = true;\nlet runNextFrame = false;\nconst stepsOrder = [\n \"read\",\n \"update\",\n \"preRender\",\n \"render\",\n \"postRender\",\n];\nconst steps = stepsOrder.reduce((acc, key) => {\n acc[key] = createRenderStep(() => (runNextFrame = true));\n return acc;\n}, {});\nconst sync = stepsOrder.reduce((acc, key) => {\n const step = steps[key];\n acc[key] = (process, keepAlive = false, immediate = false) => {\n if (!runNextFrame)\n startLoop();\n return step.schedule(process, keepAlive, immediate);\n };\n return acc;\n}, {});\nconst cancelSync = stepsOrder.reduce((acc, key) => {\n acc[key] = steps[key].cancel;\n return acc;\n}, {});\nconst flushSync = stepsOrder.reduce((acc, key) => {\n acc[key] = () => steps[key].process(frameData);\n return acc;\n}, {});\nconst processStep = (stepId) => steps[stepId].process(frameData);\nconst processFrame = (timestamp) => {\n runNextFrame = false;\n frameData.delta = useDefaultElapsed\n ? 1000 / 60\n : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed), 1);\n frameData.timestamp = timestamp;\n frameData.isProcessing = true;\n stepsOrder.forEach(processStep);\n frameData.isProcessing = false;\n if (runNextFrame) {\n useDefaultElapsed = false;\n requestAnimationFrame(processFrame);\n }\n};\nconst startLoop = () => {\n runNextFrame = true;\n useDefaultElapsed = true;\n if (!frameData.isProcessing)\n requestAnimationFrame(processFrame);\n};\n\nexport { cancelSync, flushSync, sync };\n","function createRenderStep(runNextFrame) {\n /**\n * We create and reuse two arrays, 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 toRun = [];\n let toRunNextFrame = [];\n /**\n *\n */\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 buffer = addToCurrentFrame ? toRun : toRunNextFrame;\n if (keepAlive)\n toKeepAlive.add(callback);\n // If the buffer doesn't already contain this callback, add it\n if (buffer.indexOf(callback) === -1) {\n buffer.push(callback);\n // If we're adding it to the currently running buffer, update its measured size\n if (addToCurrentFrame && isProcessing)\n numToRun = toRun.length;\n }\n return callback;\n },\n /**\n * Cancel the provided callback from running on the next frame.\n */\n cancel: (callback) => {\n const index = toRunNextFrame.indexOf(callback);\n if (index !== -1)\n toRunNextFrame.splice(index, 1);\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 [toRun, toRunNextFrame] = [toRunNextFrame, toRun];\n // Clear the next frame list\n toRunNextFrame.length = 0;\n // Execute this frame\n numToRun = toRun.length;\n if (numToRun) {\n for (let i = 0; i < numToRun; i++) {\n const callback = toRun[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 { 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 { sync } from '../frameloop/index.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 sync.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","const noop = (any) => any;\n\nexport { noop };\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 { sync } from '../frameloop/index.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 sync.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 sync.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 sync.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 sync.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 { camelToDash } from '../../render/dom/utils/camel-to-dash.mjs';\n\nconst optimizedAppearDataId = \"framerAppearId\";\nconst optimizedAppearDataAttribute = \"data-\" + camelToDash(optimizedAppearDataId);\n\nexport { optimizedAppearDataAttribute, optimizedAppearDataId };\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 instantAnimationState = {\n current: false,\n};\n\nexport { instantAnimationState };\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","const featureTests = {\n waapi: () => Object.hasOwnProperty.call(Element.prototype, \"animate\"),\n};\nconst results = {};\nconst supports = {};\n/**\n * Generate features tests that cache their results.\n */\nfor (const key in featureTests) {\n supports[key] = () => {\n if (results[key] === undefined)\n results[key] = featureTests[key]();\n return results[key];\n };\n}\n\nexport { supports };\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(circOut);\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 { color } from '../color/index.mjs';\nimport { number } from '../numbers/index.mjs';\nimport { isString, floatRegex, colorRegex, sanitize } from '../utils.mjs';\n\nconst colorToken = \"${c}\";\nconst numberToken = \"${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}\nfunction analyseComplexValue(v) {\n if (typeof v === \"number\")\n v = `${v}`;\n const values = [];\n let numColors = 0;\n let numNumbers = 0;\n const colors = v.match(colorRegex);\n if (colors) {\n numColors = colors.length;\n // Strip colors from input so they're not picked up by number regex.\n // There's a better way to combine these regex searches, but its beyond my regex skills\n v = v.replace(colorRegex, colorToken);\n values.push(...colors.map(color.parse));\n }\n const numbers = v.match(floatRegex);\n if (numbers) {\n numNumbers = numbers.length;\n v = v.replace(floatRegex, numberToken);\n values.push(...numbers.map(number.parse));\n }\n return { values, numColors, numNumbers, tokenised: v };\n}\nfunction parse(v) {\n return analyseComplexValue(v).values;\n}\nfunction createTransformer(source) {\n const { values, numColors, tokenised } = analyseComplexValue(source);\n const numValues = values.length;\n return (v) => {\n let output = tokenised;\n for (let i = 0; i < numValues; i++) {\n output = output.replace(i < numColors ? colorToken : numberToken, i < numColors\n ? color.transform(v[i])\n : sanitize(v[i]));\n }\n return output;\n };\n}\nconst convertNumbersToZero = (v) => typeof v === \"number\" ? 0 : v;\nfunction getAnimatableNone(v) {\n const parsed = parse(v);\n const transformer = createTransformer(v);\n return transformer(parsed.map(convertNumbersToZero));\n}\nconst complex = { test, parse, createTransformer, getAnimatableNone };\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\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 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.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 (p) => `${p > 0 ? target : origin}`;\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 if (color.test(v)) {\n return mixColor;\n }\n else {\n return mixComplex;\n }\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 { 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","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","/*\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 velocity: 0.0,\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, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);\n const initialVelocity = velocity ? -millisecondsToSeconds(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 { sync, cancelSync } from '../../../frameloop/index.mjs';\nimport { frameData } from '../../../frameloop/data.mjs';\n\nconst frameloopDriver = (update) => {\n const passTimestamp = ({ timestamp }) => update(timestamp);\n return {\n start: () => sync.update(passTimestamp, true),\n stop: () => cancelSync.update(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 * Create a new finished Promise every time we enter the\n * finished state and resolve the old Promise. This is\n * WAAPI-compatible behaviour.\n */\n const updateFinishedPromise = () => {\n resolveFinishedPromise && resolveFinishedPromise();\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 (holdTime !== null) {\n currentTime = holdTime;\n }\n else {\n currentTime = (timestamp - startTime) * speed;\n }\n // Rebase on delay\n const timeWithoutDelay = currentTime - delay;\n const isInDelayPhase = timeWithoutDelay < 0;\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 = currentTime >= totalDuration;\n }\n const isAnimationFinished = holdTime === null &&\n (playState === \"finished\" ||\n (playState === \"running\" && done) ||\n (speed < 0 && currentTime <= 0));\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 updateFinishedPromise();\n startTime = cancelTime = null;\n };\n const finish = () => {\n playState = \"finished\";\n onComplete && onComplete();\n stopAnimationDriver();\n updateFinishedPromise();\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 playState = \"running\";\n if (holdTime !== null) {\n startTime = now - holdTime;\n }\n else if (!startTime) {\n // TODO When implementing play/pause, check WAAPI\n // logic around finished animations\n startTime = now;\n }\n cancelTime = startTime;\n holdTime = null;\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 { sync } from '../../../frameloop/index.mjs';\nimport { animateStyle } from './index.mjs';\nimport { isWaapiSupportedEasing } from './easing.mjs';\nimport { supports } from './supports.mjs';\nimport { getFinalKeyframe } from './utils/get-final-keyframe.mjs';\nimport { animateValue } from '../js/index.mjs';\nimport { millisecondsToSeconds, secondsToMilliseconds } from '../../../utils/time-conversion.mjs';\n\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 = supports.waapi() &&\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 * Create a new finished Promise every time we enter the\n * finished state and resolve the old Promise. This is\n * 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 safeCancel = () => {\n sync.update(() => animation.cancel());\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 return {\n then(resolve, reject) {\n return currentFinishedPromise.then(resolve, reject);\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 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}\n\nexport { createAcceleratedAnimation };\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 { 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) && // 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","import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.mjs';\n\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 isZero(value) {\n return (value === 0 ||\n (typeof value === \"string\" &&\n parseFloat(value) === 0 &&\n value.indexOf(\" \") === -1));\n}\nfunction getZeroUnit(potentialUnitType) {\n return typeof potentialUnitType === \"number\"\n ? 0\n : getAnimatableNone(\"\", potentialUnitType);\n}\nfunction getValueTransition(transition, key) {\n return transition[key] || transition[\"default\"] || transition;\n}\n\nexport { getValueTransition, getZeroUnit, isTransitionDefined, isZero };\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';\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 /**\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(options);\n }\n /**\n * Animate via WAAPI if possible.\n */\n if (value.owner &&\n value.owner.current instanceof HTMLElement &&\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 { isZero, getZeroUnit } from './transitions.mjs';\nimport { fillWildcardKeyframes } from './wildcards.mjs';\n\nfunction getKeyframes(value, valueName, target, transition) {\n const isTargetAnimatable = isAnimatable(valueName, target);\n let origin = transition.from !== undefined ? transition.from : value.get();\n if (origin === \"none\" && isTargetAnimatable && typeof target === \"string\") {\n /**\n * If we're trying to animate from \"none\", try and get an animatable version\n * of the target. This could be improved to work both ways.\n */\n origin = getAnimatableNone(valueName, target);\n }\n else if (isZero(origin) && typeof target === \"string\") {\n origin = getZeroUnit(target);\n }\n else if (!Array.isArray(target) &&\n isZero(target) &&\n typeof origin === \"string\") {\n target = getZeroUnit(origin);\n }\n /**\n * If the target has been defined as a series of keyframes\n */\n if (Array.isArray(target)) {\n return fillWildcardKeyframes(origin, target);\n }\n else {\n return [origin, target];\n }\n}\n\nexport { getKeyframes };\n","function fillWildcardKeyframes(origin, [...keyframes]) {\n /**\n * Ensure an wildcard keyframes are hydrated by the origin.\n */\n for (let i = 0; i < keyframes.length; i++) {\n if (keyframes[i] === null) {\n keyframes[i] = i === 0 ? origin : keyframes[i - 1];\n }\n }\n return keyframes;\n}\n\nexport { fillWildcardKeyframes };\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 { 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","/**\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","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 { frameData } from '../frameloop/data.mjs';\nimport { sync } from '../frameloop/index.mjs';\nimport { SubscriptionManager } from '../utils/subscription-manager.mjs';\nimport { velocityPerSecond } from '../utils/velocity-per-second.mjs';\nimport { warnOnce } from '../utils/warn-once.mjs';\n\nconst isFloat = (value) => {\n return !isNaN(parseFloat(value));\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.11.2\";\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 sync.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 = () => sync.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 t.priority-a.priority),()=>this.remove(t)}remove(t){this.callbacks=this.callbacks.filter(({callback:a})=>t!==a)}};export{t as raf};\n//# sourceMappingURL=tempus.modern.mjs.map\n","function t(t,e,i){return Math.max(t,Math.min(e,i))}class e{advance(e){var i;if(!this.isRunning)return;let s=!1;if(this.lerp)this.value=(1-(o=this.lerp))*this.value+o*this.to,Math.round(this.value)===this.to&&(this.value=this.to,s=!0);else{this.currentTime+=e;const i=t(0,this.currentTime/this.duration,1);s=i>=1;const o=s?1:this.easing(i);this.value=this.from+(this.to-this.from)*o}var o;null==(i=this.onUpdate)||i.call(this,this.value,{completed:s}),s&&this.stop()}stop(){this.isRunning=!1}fromTo(t,e,{lerp:i=.1,duration:s=1,easing:o=(t=>t),onUpdate:n}){this.from=this.value=t,this.to=e,this.lerp=i,this.duration=s,this.easing=o,this.currentTime=0,this.isRunning=!0,this.onUpdate=n}}function i(t,e){let i;return function(){let s=arguments,o=this;clearTimeout(i),i=setTimeout(function(){t.apply(o,s)},e)}}class s{constructor(t,e){this.onWindowResize=()=>{this.width=window.innerWidth,this.height=window.innerHeight},this.onWrapperResize=()=>{this.width=this.wrapper.clientWidth,this.height=this.wrapper.clientHeight},this.onContentResize=()=>{const t=this.wrapper===window?document.documentElement:this.wrapper;this.scrollHeight=t.scrollHeight,this.scrollWidth=t.scrollWidth},this.wrapper=t,this.content=e,this.wrapper===window?(window.addEventListener(\"resize\",this.onWindowResize,!1),this.onWindowResize()):(this.wrapperResizeObserver=new ResizeObserver(i(this.onWrapperResize,100)),this.wrapperResizeObserver.observe(this.wrapper),this.onWrapperResize()),this.contentResizeObserver=new ResizeObserver(i(this.onContentResize,100)),this.contentResizeObserver.observe(this.content),this.onContentResize()}destroy(){var t,e;window.removeEventListener(\"resize\",this.onWindowResize,!1),null==(t=this.wrapperResizeObserver)||t.disconnect(),null==(e=this.contentResizeObserver)||e.disconnect()}get limit(){return{x:this.scrollWidth-this.width,y:this.scrollHeight-this.height}}}let o=()=>({events:{},emit(t,...e){let i=this.events[t]||[];for(let t=0,s=i.length;t{var i;this.events[t]=null==(i=this.events[t])?void 0:i.filter(t=>e!==t)}}});class n{constructor(e,{wheelMultiplier:i=1,touchMultiplier:s=2,normalizeWheel:n=!1}){this.onTouchStart=t=>{const{pageX:e,pageY:i}=t.targetTouches?t.targetTouches[0]:t;this.touchStart.x=e,this.touchStart.y=i},this.onTouchMove=t=>{const{pageX:e,pageY:i}=t.targetTouches?t.targetTouches[0]:t,s=-(e-this.touchStart.x)*this.touchMultiplier,o=-(i-this.touchStart.y)*this.touchMultiplier;this.touchStart.x=e,this.touchStart.y=i,this.emitter.emit(\"scroll\",{type:\"touch\",deltaX:s,deltaY:o,event:t})},this.onWheel=e=>{let{deltaX:i,deltaY:s}=e;this.normalizeWheel&&(i=t(-100,i,100),s=t(-100,s,100)),i*=this.wheelMultiplier,s*=this.wheelMultiplier,this.emitter.emit(\"scroll\",{type:\"wheel\",deltaX:i,deltaY:s,event:e})},this.element=e,this.wheelMultiplier=i,this.touchMultiplier=s,this.normalizeWheel=n,this.touchStart={x:null,y:null},this.emitter=o(),this.element.addEventListener(\"wheel\",this.onWheel,{passive:!1}),this.element.addEventListener(\"touchstart\",this.onTouchStart,{passive:!1}),this.element.addEventListener(\"touchmove\",this.onTouchMove,{passive:!1})}on(t,e){return this.emitter.on(t,e)}destroy(){this.emitter.events={},this.element.removeEventListener(\"wheel\",this.onWheel,{passive:!1}),this.element.removeEventListener(\"touchstart\",this.onTouchStart,{passive:!1}),this.element.removeEventListener(\"touchmove\",this.onTouchMove,{passive:!1})}}class r{constructor({direction:t,gestureDirection:i,mouseMultiplier:r,smooth:l,wrapper:h=window,content:a=document.documentElement,wheelEventsTarget:c=h,smoothWheel:u=null==l||l,smoothTouch:p=!1,duration:d,easing:m=(t=>Math.min(1,1.001-Math.pow(2,-10*t))),lerp:v=(d?null:.1),infinite:g=!1,orientation:S=(null!=t?t:\"vertical\"),gestureOrientation:w=(null!=i?i:\"vertical\"),touchMultiplier:f=2,wheelMultiplier:z=(null!=r?r:1),normalizeWheel:M=!1}={}){this.onVirtualScroll=({type:t,deltaX:e,deltaY:i,event:s})=>{if(s.ctrlKey)return;if(\"vertical\"===this.options.gestureOrientation&&0===i||\"horizontal\"===this.options.gestureOrientation&&0===e)return;if(s.composedPath().find(t=>null==t||null==t.hasAttribute?void 0:t.hasAttribute(\"data-lenis-prevent\")))return;if(this.isStopped||this.isLocked)return void s.preventDefault();if(this.isSmooth=this.options.smoothTouch&&\"touch\"===t||this.options.smoothWheel&&\"wheel\"===t,!this.isSmooth)return this.isScrolling=!1,void this.animate.stop();s.preventDefault();let o=i;\"both\"===this.options.gestureOrientation?o=Math.abs(i)>Math.abs(e)?i:e:\"horizontal\"===this.options.gestureOrientation&&(o=e),this.scrollTo(this.targetScroll+o,{programmatic:!1})},this.onScroll=()=>{if(!this.isScrolling){const t=this.animatedScroll;this.animatedScroll=this.targetScroll=this.actualScroll,this.velocity=0,this.direction=Math.sign(this.animatedScroll-t),this.emit()}},t&&console.warn(\"Lenis: `direction` option is deprecated, use `orientation` instead\"),i&&console.warn(\"Lenis: `gestureDirection` option is deprecated, use `gestureOrientation` instead\"),r&&console.warn(\"Lenis: `mouseMultiplier` option is deprecated, use `wheelMultiplier` instead\"),l&&console.warn(\"Lenis: `smooth` option is deprecated, use `smoothWheel` instead\"),window.lenisVersion=\"1.0.5\",h!==document.documentElement&&h!==document.body||(h=window),this.options={wrapper:h,content:a,wheelEventsTarget:c,smoothWheel:u,smoothTouch:p,duration:d,easing:m,lerp:v,infinite:g,gestureOrientation:w,orientation:S,touchMultiplier:f,wheelMultiplier:z,normalizeWheel:M},this.dimensions=new s(h,a),this.rootElement.classList.add(\"lenis\"),this.velocity=0,this.isStopped=!1,this.isSmooth=u||p,this.isScrolling=!1,this.targetScroll=this.animatedScroll=this.actualScroll,this.animate=new e,this.emitter=o(),this.options.wrapper.addEventListener(\"scroll\",this.onScroll,{passive:!1}),this.virtualScroll=new n(c,{touchMultiplier:f,wheelMultiplier:z,normalizeWheel:M}),this.virtualScroll.on(\"scroll\",this.onVirtualScroll)}destroy(){this.emitter.events={},this.options.wrapper.removeEventListener(\"scroll\",this.onScroll,{passive:!1}),this.virtualScroll.destroy()}on(t,e){return this.emitter.on(t,e)}off(t,e){var i;this.emitter.events[t]=null==(i=this.emitter.events[t])?void 0:i.filter(t=>e!==t)}setScroll(t){this.isHorizontal?this.rootElement.scrollLeft=t:this.rootElement.scrollTop=t}emit(){this.emitter.emit(\"scroll\",this)}reset(){this.isLocked=!1,this.isScrolling=!1,this.velocity=0,this.animate.stop()}start(){this.isStopped=!1,this.reset()}stop(){this.isStopped=!0,this.animate.stop(),this.reset()}raf(t){const e=t-(this.time||t);this.time=t,this.animate.advance(.001*e)}scrollTo(e,{offset:i=0,immediate:s=!1,lock:o=!1,duration:n=this.options.duration,easing:r=this.options.easing,lerp:l=!n&&this.options.lerp,onComplete:h=null,force:a=!1,programmatic:c=!0}={}){if(!this.isStopped||a){if([\"top\",\"left\",\"start\"].includes(e))e=0;else if([\"bottom\",\"right\",\"end\"].includes(e))e=this.limit;else{var u;let t;if(\"string\"==typeof e?t=document.querySelector(e):null!=(u=e)&&u.nodeType&&(t=e),t){if(this.options.wrapper!==window){const t=this.options.wrapper.getBoundingClientRect();i-=this.isHorizontal?t.left:t.top}const s=t.getBoundingClientRect();e=(this.isHorizontal?s.left:s.top)+this.animatedScroll}}if(\"number\"==typeof e){if(e+=i,e=Math.round(e),this.options.infinite?c&&(this.targetScroll=this.animatedScroll=this.scroll):e=t(0,e,this.limit),s)return this.animatedScroll=this.targetScroll=e,this.setScroll(this.scroll),this.reset(),this.emit(),void(null==h||h());if(!c){if(e===this.targetScroll)return;this.targetScroll=e}this.animate.fromTo(this.animatedScroll,e,{duration:n,easing:r,lerp:l,onUpdate:(t,{completed:e})=>{o&&(this.isLocked=!0),this.isScrolling=!0,this.velocity=t-this.animatedScroll,this.direction=Math.sign(this.velocity),this.animatedScroll=t,this.setScroll(this.scroll),c&&(this.targetScroll=t),e&&(o&&(this.isLocked=!1),requestAnimationFrame(()=>{this.isScrolling=!1}),this.velocity=0,null==h||h()),this.emit()}})}}}get rootElement(){return this.options.wrapper===window?this.options.content:this.options.wrapper}get limit(){return this.isHorizontal?this.dimensions.limit.x:this.dimensions.limit.y}get isHorizontal(){return\"horizontal\"===this.options.orientation}get actualScroll(){return this.isHorizontal?this.rootElement.scrollLeft:this.rootElement.scrollTop}get scroll(){return this.options.infinite?function(t,e){let i=t%e;return(e>0&&i<0||e<0&&i>0)&&(i+=e),i}(this.animatedScroll,this.limit):this.animatedScroll}get progress(){return 0===this.limit?1:this.scroll/this.limit}get isSmooth(){return this.__isSmooth}set isSmooth(t){this.__isSmooth!==t&&(this.rootElement.classList.toggle(\"lenis-smooth\",t),this.__isSmooth=t)}get isScrolling(){return this.__isScrolling}set isScrolling(t){this.__isScrolling!==t&&(this.rootElement.classList.toggle(\"lenis-scrolling\",t),this.__isScrolling=t)}get isStopped(){return this.__isStopped}set isStopped(t){this.__isStopped!==t&&(this.rootElement.classList.toggle(\"lenis-stopped\",t),this.__isStopped=t)}}export{r as default};\n//# sourceMappingURL=lenis.modern.mjs.map\n","const createStoreImpl = (createState) => {\n let state;\n const listeners = /* @__PURE__ */ new Set();\n const setState = (partial, replace) => {\n const nextState = typeof partial === \"function\" ? partial(state) : partial;\n if (!Object.is(nextState, state)) {\n const previousState = state;\n state = (replace != null ? replace : typeof nextState !== \"object\") ? nextState : Object.assign({}, state, nextState);\n listeners.forEach((listener) => listener(state, previousState));\n }\n };\n const getState = () => state;\n const subscribe = (listener) => {\n listeners.add(listener);\n return () => listeners.delete(listener);\n };\n const destroy = () => {\n if ((import.meta.env && import.meta.env.MODE) !== \"production\") {\n console.warn(\n \"[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected.\"\n );\n }\n listeners.clear();\n };\n const api = { setState, getState, subscribe, destroy };\n state = createState(setState, getState, api);\n return api;\n};\nconst createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;\nvar vanilla = (createState) => {\n if ((import.meta.env && import.meta.env.MODE) !== \"production\") {\n console.warn(\n \"[DEPRECATED] Default export is deprecated. Instead use import { createStore } from 'zustand/vanilla'.\"\n );\n }\n return createStore(createState);\n};\n\nexport { createStore, vanilla as default };\n","import { createStore } from 'zustand/vanilla';\nexport * from 'zustand/vanilla';\nimport { useDebugValue } from 'react';\nimport useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector.js';\n\nconst { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;\nfunction useStore(api, selector = api.getState, equalityFn) {\n const slice = useSyncExternalStoreWithSelector(\n api.subscribe,\n api.getState,\n api.getServerState || api.getState,\n selector,\n equalityFn\n );\n useDebugValue(slice);\n return slice;\n}\nconst createImpl = (createState) => {\n if ((import.meta.env && import.meta.env.MODE) !== \"production\" && typeof createState !== \"function\") {\n console.warn(\n \"[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`.\"\n );\n }\n const api = typeof createState === \"function\" ? createStore(createState) : createState;\n const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn);\n Object.assign(useBoundStore, api);\n return useBoundStore;\n};\nconst create = (createState) => createState ? createImpl(createState) : createImpl;\nvar react = (createState) => {\n if ((import.meta.env && import.meta.env.MODE) !== \"production\") {\n console.warn(\n \"[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`.\"\n );\n }\n return create(createState);\n};\n\nexport { create, react as default, useStore };\n","import{useFrame as r}from\"@studio-freight/hamo\";import t from\"@studio-freight/lenis\";import e from\"prop-types\";import o,{createContext as n,forwardRef as l,useRef as a,useState as c,useCallback as i,useImperativeHandle as s,useEffect as p,useContext as u}from\"react\";import{create as f}from\"zustand\";function d(){return d=Object.assign?Object.assign.bind():function(r){for(var t=1;t({}));function b(r,t=[],e=0){const{lenis:o,addCallback:n,removeCallback:l}=function(){const r=u(v),t=m();return null!=r?r:t}();return p(()=>{if(r&&n&&l&&o)return n(r,e),r(o),()=>{l(r)}},[o,r,n,l,e,t]),o}const v=n(),y=l(({children:e,root:n=!1,options:l={},isStopped:u=!1,className:f},b)=>{const y=a(),h=a(),[g,k]=c(),C=a([]),N=i((r,t)=>{C.current.push({callback:r,priority:t}),C.current.sort((r,t)=>r.priority-t.priority)},[]),O=i(r=>{C.current=C.current.filter(t=>t.callback!==r)},[]);s(b,()=>g,[g]),p(()=>{const r=new t(d({},l,!n&&{wrapper:y.current,content:h.current}));return console.log(\"Lenis\",r),k(r),()=>{r.destroy(),k(void 0)}},[n,JSON.stringify(l)]),r(r=>{null==g||g.raf(r)}),p(()=>{g&&(u?g.stop():g.start())},[g,u]),p(()=>{n&&g&&m.setState({lenis:g,addCallback:N,removeCallback:O})},[n,g,N,O]);const j=i(r=>{for(let t=0;t{if(g)return g.on(\"scroll\",j),()=>{g.off(\"scroll\",j)}},[g,j]),/*#__PURE__*/o.createElement(v.Provider,{value:{lenis:g,addCallback:N,removeCallback:O}},n?e:/*#__PURE__*/o.createElement(\"div\",{ref:y,className:f},/*#__PURE__*/o.createElement(\"div\",{ref:h},e)))});y.displayName=\"ReactLenis\",y.propTypes={children:e.node,root:e.bool,options:e.object,isStopped:e.bool,className:e.string};export{y as Lenis,y as ReactLenis,b as useLenis};\n//# sourceMappingURL=react-lenis.modern.mjs.map\n","import{useCallback as e,useEffect as n,useState as t,useMemo as r,useRef as o}from\"react\";import{raf as c}from\"@studio-freight/tempus\";import{throttle as u}from\"throttle-debounce\";function i(t,r){const o=e(e=>{t.current&&!t.current.contains(e.target)&&r()},[t,r]);n(()=>{if(t.current)return document.addEventListener(\"mousedown\",o),()=>{document.removeEventListener(\"mousedown\",o)}},[o,t])}function s(){const[e,r]=t(!1);return n(()=>{r(!0)},[]),e}function a(){const e=s();return r(()=>e&&(window.location.href.includes(\"#debug\")||\"development\"===process.env.NODE_ENV)&&!window.location.href.includes(\"#production\"),[e])}function d(){const[e,r]=t(()=>\"undefined\"!=typeof document?document.readyState:\"loading\");return n(()=>{if(\"undefined\"!=typeof document)return r(document.readyState),document.addEventListener(\"readystatechange\",e,!1),()=>document.removeEventListener(\"readystatechange\",e,!1);function e(){r(document.readyState)}},[]),e}function f(e,t=0){n(()=>{if(e)return c.add(e,t),()=>c.remove(e)},[e,t])}function v(e,t){const r=o(),c=o();return n(()=>{r.current=e}),n(()=>{if(null!==t)return c.current=setInterval(function(){r.current()},t),()=>clearInterval(c.current)},[t]),()=>clearInterval(c.current)}function l(){const r=e(()=>\"ontouchstart\"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0,[]),[o,c]=t(void 0),u=e(()=>{c(r())},[r]);return n(()=>(u(),window.addEventListener(\"resize\",u,{passive:!0}),()=>{window.removeEventListener(\"resize\",u,{passive:!0})}),[u]),o}function m({root:r=null,rootMargin:c=\"0px\",threshold:u=1,once:i=!1}={}){const s=o(),a=o(),[d,f]=t(!1),v=e(e=>{a.current||(a.current=e)},[]),l=e(e=>{const[n]=e;f(n.isIntersecting)},[]);return n(()=>(a.current&&(s.current=new IntersectionObserver(l,{root:r,rootMargin:c,threshold:u}),s.current.observe(a.current)),()=>{s.current&&s.current.disconnect()}),[l]),n(()=>{i&&d&&s.current.disconnect()},[d]),{setRef:v,inView:d}}function p(o){const c=s(),u=r(()=>{if(c)try{return window.matchMedia(o)}catch(e){\"production\"!==process.env.NODE_ENV&&console.error(e)}return null},[o,c]),[i,a]=t(void 0),d=e(({matches:e})=>{a(e)},[]);return n(()=>{if(u)return d(u),u.addEventListener(\"change\",d,{passive:!0}),()=>{u.removeEventListener(\"change\",d,{passive:!0})}},[u,d,c]),i}function h(){return h=Object.assign?Object.assign.bind():function(e){for(var n=1;n{if(i.current){const e=w(i.current),n=g(i.current);f.current=h({},f.current,{top:e,left:n}),r||d(f.current)}},[r]);n(()=>{const e=u(c,v),n=new ResizeObserver(e);return n.observe(document.body),()=>{n.disconnect(),e.cancel({upcomingOnly:!0})}},[c,v]);const l=e(([e])=>{const{width:n,height:t}=e.contentRect;f.current=h({},f.current,{width:n,height:t}),r||d(f.current)},[r]),m=e(()=>f.current,[]);return n(()=>()=>{var e;\"development\"!==process.env.NODE_ENV&&(null==(e=s.current)||e.disconnect())},[]),[e(e=>{var n;e&&e!==i.current&&(null==(n=s.current)||n.disconnect(),s.current=new ResizeObserver(l),s.current.observe(e),i.current=e)},[v]),r?m:a]}function b(e=[],n=[]){const t=r(()=>n&&[n].flat(),[n]),o=r(()=>e&&[e].flat(),[e]);return r(()=>{if(!t||!o)return;const n=o.map(e=>{var n;return null==(n=t.find(n=>n.type===e))?void 0:n.props.children});return e[0]?n:n[0]},[t,o])}export{a as useDebug,d as useDocumentReadyState,f as useFrame,v as useInterval,s as useIsClient,l as useIsTouchDevice,m as useIsVisible,p as useMediaQuery,i as useOutsideClickEvent,y as useRect,b as useSlots};\n//# sourceMappingURL=hamo.modern.mjs.map\n","export default __webpack_public_path__ + \"static/sans-light-c3c8c35f30e86135dae3b2e4958441ad.woff\";","export default __webpack_public_path__ + \"static/sans-light-f23372ad6cf8f825f0ba95a9161b7bb2.woff2\";","export default __webpack_public_path__ + \"static/sans-medium-b21b19506fb0534741dcceb3e63b7aaf.woff\";","export default __webpack_public_path__ + \"static/sans-medium-9688a873408d33cd0d58af4fd6a53de9.woff2\";","export default __webpack_public_path__ + \"static/serif-medium-cc4270e9449ef9191ba5a5c2234cd2c4.woff\";","export default __webpack_public_path__ + \"static/serif-medium-227c69841aba579e8f95e04f71811ef6.woff2\";","import { createGlobalStyle } from \"styled-components\";\nimport BBCSansLight_woff from \"../../../static/fonts/sans-light.woff\";\nimport BBCSansLight_woff2 from \"../../../static/fonts/sans-light.woff2\";\nimport BBCSansMedium_woff from \"../../../static/fonts/sans-medium.woff\";\nimport BBCSansMedium_woff2 from \"../../../static/fonts/sans-medium.woff2\";\nimport BBCSerifMedium_woff from \"../../../static/fonts/serif-medium.woff\";\nimport BBCSerifMedium_woff2 from \"../../../static/fonts/serif-medium.woff2\";\n\n// https://fluidtypography.com/\n// h1 42 -> 58 / 1.2 -> 1.1125\n// h2 26 -> 36 / 1.22222 -> 1.2\n// h3 18 -> 26 / \"\n// h4 16 -> 12 / 1.2 1.2\n// p 14 -> 18 / 1.2 1.2\n\nconst GlobalStyle = createGlobalStyle`\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n @font-face {\n font-family: \"BBCSansLight\";\n src: url(${BBCSansLight_woff2}) format(\"woff2\"),\n url(${BBCSansLight_woff}) format(\"woff\");\n font-display: swap;\n }\n\n @font-face {\n font-family: \"BBCSansMedium\";\n src: url(${BBCSansMedium_woff2}) format(\"woff2\"),\n url(${BBCSansMedium_woff}) format(\"woff\");\n font-display: swap;\n }\n\n @font-face {\n font-family: \"BBCSerifMedium\";\n src: url(${BBCSerifMedium_woff2}) format(\"woff2\"),\n url(${BBCSerifMedium_woff}) format(\"woff\");\n font-display: swap;\n }\n\n :root {\n --text: #000000;\n --orange: #F75E49;\n }\n\n ::-moz-selection { /* Code for Firefox */\n background: rgba(253, 233, 242, 0.75);\n }\n\n ::selection {\n background: rgba(253, 233, 242, 0.75);\n }\n\n * {\n margin: 0;\n font-family: BBCSansLight, sans-serif;\n }\n\n a:focus {\n outline: 0;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n.lenis.lenis-smooth {\n scroll-behavior: auto;\n}\n\nhtml.lenis {\n height: auto;\n}\n\n html,\n body {\n height: 100%;\n background-color: #ffffff;\n max-width: 100vw;\n }\n\n body {\n -webkit-font-smoothing: antialiased;\n overflow-x: hidden;\n position: relative;\n }\n\n img,\n picture,\n video,\n canvas,\n svg {\n display: block;\n max-width: 100%;\n }\n\n input,\n button,\n textarea,\n select {\n font: inherit;\n }\n\n p,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n overflow-wrap: break-word;\n }\n\n #root,\n #__next {\n isolation: isolate;\n }\n\n main {\n padding-left: 1rem;\n padding-right: 1rem;\n }\n\n h1 {\n font-family: BBCSerifMedium, serif;\n // font-size: 58px;\n // line-height: 64px;\n font-size: clamp(2.625rem, 1.848vw + 2.147rem, 3.625rem);\n line-height: clamp(3.15rem, 1.631vw + 2.728rem, 4.033rem);\n font-weight: 400;\n text-align: center;\n max-width: 920px;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 1em;\n span {\n font-family: BBCSerifMedium, serif;\n font-size: clamp(2.625rem, 1.848vw + 2.147rem, 3.625rem);\n line-height: clamp(3.15rem, 1.631vw + 2.728rem, 4.033rem);\n font-weight: 400;\n }\n }\n\n h2 {\n font-family: BBCSansLight, serif;\n // font-size: 36px;\n // line-height: 44px;\n font-size: clamp(1.625rem, 1.155vw + 1.326rem, 2.25rem);\n line-height: clamp(1.95rem, 1.478vw + 1.568rem, 2.75rem);\n font-weight: 400;\n max-width: 930px;\n margin-left: auto;\n margin-right: auto;\n text-align: center;\n margin-bottom: 4rem;\n }\n\n h3 {\n font-family: BBCSansLight, serif;\n // font-size: 26px;\n // line-height: 30px;\n font-size: clamp(1.125rem, 0.924vw + 0.886rem, 1.625rem);\n line-height: clamp(1.35rem, 1.175vw + 1.046rem, 1.986rem);\n font-weight: 300;\n }\n\n h4 {\n font-family: BBCSansMedium, serif;\n // font-size: 16px;\n // line-height: 19.2px;\n font-size: clamp(0.75rem, 0.462vw + 0.63rem, 1rem);\n line-height: clamp(0.9rem, 0.554vw + 0.757rem, 1.2rem);\n text-transform: uppercase;\n text-align: center;\n margin-bottom: 3em;\n font-weight: 400;\n }\n\n p {\n font-family: BBCSansLight, serif;\n // font-size: 18px;\n // line-height: 21.6px;\n font-size: clamp(0.875rem, 0.462vw + 0.755rem, 1.125rem);\n line-height: clamp(1.05rem, 0.554vw + 0.907rem, 1.35rem);\n }\n\n h1 span, span.orange {\n color: var(--orange);\n }\n\n footer {\n max-width: 900px;\n margin-left: auto;\n margin-right: auto;\n padding-bottom: 150px;\n padding-left: 1rem;\n padding-right: 1rem;\n p {\n margin-bottom: 1em;\n text-align: center;\n }\n }\n\n .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }\n .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }\n\n`;\n\nexport default GlobalStyle;\n","export default \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNDcuNDMgMjQuODciPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEsIC5jbHMtMiB7CiAgICAgICAgc3Ryb2tlLXdpZHRoOiAwcHg7CiAgICAgIH0KCiAgICAgIC5jbHMtMiB7CiAgICAgICAgZmlsbDogIzIzMWYyMDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj4KICAgIDxnPgogICAgICA8ZyBpZD0iQkJDX1NUVURJT1MiIGRhdGEtbmFtZT0iQkJDIFNUVURJT1MiPgogICAgICAgIDxnIGlkPSJCQkNfQkxPQ0tTIiBkYXRhLW5hbWU9IkJCQyBCTE9DS1MiPgogICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMCwwdjI0Ljg3aDI0Ljg3VjBIMFptMTcuMzQsMTcuNTVjLS40Mi42LTEuMDMsMS4wNi0xLjgyLDEuMzktLjc5LjMzLTEuNzMuNDktMi44My40OWgtNS41N1Y1LjQ0aDUuMjVjMS41NSwwLDIuNzUuMzEsMy42LjkzLjg1LjYyLDEuMjcsMS41MSwxLjI3LDIuNjcsMCwuNjctLjE1LDEuMjQtLjQ2LDEuNzMtLjMuNDktLjc1Ljg4LTEuMzUsMS4xNi44Mi4yNywxLjQ2LjcxLDEuODksMS4zLjQ0LjU5LjY2LDEuMzEuNjYsMi4xNnMtLjIxLDEuNTUtLjY0LDIuMTVabS0zLjU2LTYuODRjLjM5LS4zMi41OC0uNzcuNTgtMS4zNCwwLTEuMTEtLjc1LTEuNjYtMi4yNi0xLjY2aC0yLjE1djMuNDhoMi4xNWMuNzQsMCwxLjMtLjE2LDEuNjgtLjQ4Wm0tMS4zMiwyLjY3aC0yLjUxdjMuNzhoMi40N2MuODUsMCwxLjUtLjE2LDEuOTYtLjQ4LjQ2LS4zMi42OC0uNzguNjgtMS4zOCwwLTEuMjgtLjg3LTEuOTItMi42MS0xLjkyWiIvPgogICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMzEuMDksMHYyNC44N2gyNC44N1YwaC0yNC44N1ptMTcuMzQsMTcuNTVjLS40Mi42LTEuMDMsMS4wNi0xLjgyLDEuMzktLjc5LjMzLTEuNzMuNDktMi44My40OWgtNS41N1Y1LjQ0aDUuMjVjMS41NSwwLDIuNzUuMzEsMy42LjkzLjg1LjYyLDEuMjcsMS41MSwxLjI3LDIuNjcsMCwuNjctLjE1LDEuMjQtLjQ2LDEuNzMtLjMuNDktLjc1Ljg4LTEuMzUsMS4xNi44Mi4yNywxLjQ2LjcxLDEuODksMS4zLjQ0LjU5LjY2LDEuMzEuNjYsMi4xNnMtLjIxLDEuNTUtLjY0LDIuMTVabS0zLjU2LTYuODRjLjM5LS4zMi41OC0uNzcuNTgtMS4zNCwwLTEuMTEtLjc1LTEuNjYtMi4yNi0xLjY2aC0yLjE1djMuNDhoMi4xNWMuNzQsMCwxLjMtLjE2LDEuNjgtLjQ4Wm0tMS4zMiwyLjY3aC0yLjUxdjMuNzhoMi40N2MuODUsMCwxLjUtLjE2LDEuOTYtLjQ4LjQ2LS4zMi42OC0uNzguNjgtMS4zOCwwLTEuMjgtLjg3LTEuOTItMi42MS0xLjkyWiIvPgogICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJtNjIuMTgsMjQuODdoMjQuODdWMGgtMjQuODd2MjQuODdabTE3Ljg2LTYuMzNjLS41OC4zMi0xLjI1LjU3LTIuMDEuNzYtLjc2LjE5LTEuNTcuMjgtMi40MS4yOC0xLjEyLDAtMi4xMy0uMTYtMy4wMi0uNDktLjktLjMzLTEuNjUtLjgtMi4yNy0xLjQxLS42Mi0uNjEtMS4wOS0xLjM2LTEuNDItMi4yNS0uMzMtLjg5LS40OS0xLjg5LS40OS0zcy4xNy0yLjA3LjUxLTIuOTRjLjM0LS44OC44NC0xLjYzLDEuNDgtMi4yNS42NC0uNjMsMS40Mi0xLjExLDIuMzItMS40NC45LS4zMywxLjkxLS41LDMuMDMtLjUuNzgsMCwxLjUxLjA4LDIuMi4yNC42OS4xNiwxLjMzLjM5LDEuOTMuN3YyLjcyYy0uNTQtLjM2LTEuMTMtLjYzLTEuNzYtLjgyLS42My0uMTktMS4zLS4yOC0xLjk5LS4yOC0uOTYsMC0xLjc4LjE4LTIuNDYuNTQtLjY4LjM2LTEuMi44OC0xLjU2LDEuNTUtLjM2LjY4LS41NCwxLjUtLjU0LDIuNDdzLjE3LDEuOC41MiwyLjQ4Yy4zNS42OC44NiwxLjIxLDEuNTIsMS41Ni42Ni4zNiwxLjQ3LjU0LDIuNDIuNTQsMS40NSwwLDIuNzgtLjM4LDQuMDEtMS4xM3YyLjY3WiIvPgogICAgICAgIDwvZz4KICAgICAgICA8ZyBpZD0iU1RVRElPUyI+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xMDIuNDUsMjIuMTVjLTEuMDMsMC0yLjA0LS4xMS0zLjA0LS4zNC0xLS4yMy0xLjk2LS41OC0yLjg4LTEuMDd2LTMuNmMxLjg2LDEuMTMsMy44MywxLjcsNS45MiwxLjcsMS4xOCwwLDIuMDgtLjIsMi43LS42LjYyLS40LjkzLS45Ni45My0xLjY3LDAtLjU0LS4xNS0uOTYtLjQ2LTEuMjctLjMtLjMtLjcxLS41NS0xLjIxLS43My0uNS0uMTgtMS4wNy0uMzUtMS43LS41MS0xLjAzLS4yNC0xLjkzLS41Mi0yLjcxLS44NC0uNzgtLjMxLTEuNDQtLjY4LTEuOTgtMS4xMS0uNTQtLjQzLS45NS0uOTQtMS4yMy0xLjU0LS4yOC0uNi0uNDItMS4zMi0uNDItMi4xNSwwLTEuMTguMy0yLjIuOS0zLjA1LjYtLjg1LDEuNDUtMS41MSwyLjU0LTEuOTcsMS4xLS40NiwyLjQtLjY5LDMuOTEtLjY5Ljk5LDAsMS45Ny4xMSwyLjk0LjMzLjk3LjIyLDEuODIuNTMsMi41Ny45M3YzLjU1Yy0uNzctLjQ3LTEuNjMtLjg0LTIuNi0xLjFzLTEuOTMtLjM5LTIuOTEtLjM5Yy0xLjA2LDAtMS44OC4xOC0yLjQ3LjU1LS41OC4zNy0uODcuODktLjg3LDEuNTcsMCwuNDkuMTQuODcuNDIsMS4xNi4yOC4yOS42Ny41MiwxLjE5LjdzMS4xMi4zNiwxLjgxLjUzYy44OS4yMywxLjcxLjQ3LDIuNDguNzQuNzcuMjcsMS40NC42MSwyLjAyLDEuMDMuNTguNDIsMS4wMy45NSwxLjM2LDEuNTkuMzIuNjQuNDgsMS40My40OCwyLjM3LDAsMS4yNC0uMywyLjI5LS45MSwzLjE3LS42MS44OC0xLjQ5LDEuNTUtMi42NCwyLjAxLTEuMTUuNDYtMi41My42OS00LjE1LjY5WiIvPgogICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTExLjE0LDMuMTFoMTUuNzZ2My41aC01Ljg3djE1LjE2aC00LjAyVjYuNmgtNS44N3YtMy41WiIvPgogICAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTM3LjIsMjIuMTVjLTEuNjcsMC0zLjEtLjMyLTQuMjktLjk1LTEuMTktLjYzLTIuMS0xLjU1LTIuNzQtMi43NS0uNjQtMS4yLS45NS0yLjY0LS45NS00LjMzVjMuMTFoNC4wMnYxMS40NWMwLDEuMzIuMzQsMi4zMywxLjAzLDMuMDQuNjkuNywxLjY3LDEuMDYsMi45NCwxLjA2czIuMjUtLjM1LDIuOTQtMS4wNmMuNjktLjcsMS4wMy0xLjcyLDEuMDMtMy4wNFYzLjExaDQuMDJ2MTEuMDFjMCwxLjY5LS4zMiwzLjEzLS45NSw0LjMzLS42NCwxLjItMS41NSwyLjEyLTIuNzQsMi43NS0xLjE5LjYzLTIuNjIuOTUtNC4yOS45NVoiLz4KICAgICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTE0OS4wNywzLjExaDcuMTJjMS45OCwwLDMuNjcuMzcsNS4wNiwxLjEsMS4zOS43MywyLjQ1LDEuNzksMy4xOCwzLjE3LjczLDEuMzgsMS4xLDMuMDYsMS4xLDUuMDJzLS4zNywzLjY1LTEuMTEsNS4wNWMtLjc0LDEuNC0xLjgsMi40Ny0zLjIsMy4yMS0xLjM5Ljc0LTMuMDgsMS4xMS01LjA2LDEuMTFoLTcuMVYzLjExWm02Ljg5LDE1LjIxYzEuNzYsMCwzLjEtLjUxLDQuMDItMS41My45Mi0xLjAyLDEuMzgtMi40OCwxLjM4LTQuNHMtLjQ2LTMuMzQtMS4zNy00LjM0Yy0uOTEtMS0yLjI1LTEuNS00LTEuNWgtMi45djExLjc3aDIuODdaIi8+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xNjguNzIsMy4xMWg0LjAydjE4LjY1aC00LjAyVjMuMTFaIi8+CiAgICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0yMDQuMjUsMjIuMTVjLTEuMDMsMC0yLjA0LS4xMS0zLjA0LS4zNC0xLS4yMy0xLjk2LS41OC0yLjg4LTEuMDd2LTMuNmMxLjg2LDEuMTMsMy44MywxLjcsNS45MiwxLjcsMS4xOCwwLDIuMDgtLjIsMi43LS42LjYyLS40LjkzLS45Ni45My0xLjY3LDAtLjU0LS4xNS0uOTYtLjQ2LTEuMjctLjMtLjMtLjcxLS41NS0xLjIxLS43My0uNS0uMTgtMS4wNy0uMzUtMS43LS41MS0xLjAzLS4yNC0xLjkzLS41Mi0yLjcxLS44NC0uNzgtLjMxLTEuNDQtLjY4LTEuOTgtMS4xMS0uNTQtLjQzLS45NS0uOTQtMS4yMy0xLjU0LS4yOC0uNi0uNDItMS4zMi0uNDItMi4xNSwwLTEuMTguMy0yLjIuOS0zLjA1LjYtLjg1LDEuNDUtMS41MSwyLjU0LTEuOTcsMS4xLS40NiwyLjQtLjY5LDMuOTEtLjY5Ljk5LDAsMS45Ny4xMSwyLjk0LjMzLjk3LjIyLDEuODIuNTMsMi41Ny45M3YzLjU1Yy0uNzctLjQ3LTEuNjMtLjg0LTIuNi0xLjFzLTEuOTMtLjM5LTIuOTEtLjM5Yy0xLjA2LDAtMS44OC4xOC0yLjQ3LjU1LS41OC4zNy0uODcuODktLjg3LDEuNTcsMCwuNDkuMTQuODcuNDIsMS4xNi4yOC4yOS42Ny41MiwxLjE5LjdzMS4xMi4zNiwxLjgxLjUzYy44OS4yMywxLjcxLjQ3LDIuNDguNzQuNzcuMjcsMS40NC42MSwyLjAyLDEuMDMuNTguNDIsMS4wMy45NSwxLjM2LDEuNTkuMzIuNjQuNDgsMS40My40OCwyLjM3LDAsMS4yNC0uMywyLjI5LS45MSwzLjE3LS42MS44OC0xLjQ5LDEuNTUtMi42NCwyLjAxLTEuMTUuNDYtMi41My42OS00LjE1LjY5WiIvPgogICAgICAgICAgPHBhdGggaWQ9IlNUVURJT1MtMiIgZGF0YS1uYW1lPSJTVFVESU9TIiBjbGFzcz0iY2xzLTEiIGQ9Im0xODUuODcsMi42M2MtNS42NSwwLTkuOTUsNC4yMS05Ljk1LDkuNzdzNC4zNiw5LjgsOS45Miw5LjgsOS45NS00LjI3LDkuOTUtOS43Ny00LjM2LTkuOC05LjkyLTkuOFptMCwzLjc0YzEuNjcsMCwzLjA1LjU0LDQuMjEsMS43LDEuMDgsMS4xNCwxLjY3LDIuNzIsMS42Nyw0LjMzLDAsMy4zNS0yLjM5LDYuMS01LjkyLDYuMS0zLjMyLDAtNS44OS0yLjU3LTUuODktNi4xLDAtMS41OC42LTMuMjMsMS42Ny00LjMsMS4wOC0xLjE0LDIuNjMtMS43Myw0LjI0LTEuNzNaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICAgIDxnPgogICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTIzMC40MywyMi4xNWMtMS40NiwwLTIuNzYtLjIyLTMuOTEtLjY2LTEuMTUtLjQ0LTIuMTMtMS4wOC0yLjkyLTEuOTEtLjgtLjgzLTEuNDEtMS44NS0xLjgzLTMuMDUtLjQyLTEuMjEtLjY0LTIuNTYtLjY0LTQuMDdzLjIyLTIuOC42Ni0zLjk5Yy40NC0xLjE5LDEuMDgtMi4yMSwxLjktMy4wNi44Mi0uODUsMS44Mi0xLjUsMi45OC0xLjk1LDEuMTYtLjQ1LDIuNDctLjY4LDMuOTMtLjY4LDEuMDQsMCwyLjAxLjEyLDIuOTIuMzVzMS43Ni41OCwyLjU2LDEuMDN2My4wOWMtLjczLS41Mi0xLjUzLS45Mi0yLjQtMS4yLS44OC0uMjgtMS44LS40Mi0yLjc3LS40Mi0xLjMzLDAtMi40Ny4yNy0zLjQyLjgxLS45NS41NC0xLjY3LDEuMzEtMi4xNywyLjMzLS41LDEuMDEtLjc1LDIuMjQtLjc1LDMuNjhzLjI1LDIuNjcuNzQsMy42OWMuNDksMS4wMiwxLjIsMS44LDIuMTMsMi4zNC45My41NCwyLjA1LjgxLDMuMzcuODEsMi4wMywwLDMuODYtLjU1LDUuNDktMS42NHYzLjAyYy0uNzYuNDctMS42Ni44My0yLjY4LDEuMDktMS4wMi4yNi0yLjA4LjM5LTMuMTcuMzlaIi8+CiAgICAgICAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMjM5LjY2LDIxLjc2VjMuMTdoNi40YzIuNDEsMCw0LjI1LjQ5LDUuNTQsMS40OCwxLjI4Ljk5LDEuOTIsMi40MSwxLjkyLDQuMjYsMCwxLjIzLS4zMSwyLjI4LS45NCwzLjE2cy0xLjUyLDEuNTMtMi42OCwxLjk2Yy44MSwxLjI1LDEuNjIsMi41MSwyLjQyLDMuOC44LDEuMjgsMS41OSwyLjU5LDIuMzcsMy45M2gtMy44Yy0uNjgtMS4yMS0xLjM3LTIuNDEtMi4wNy0zLjU5LS43LTEuMTgtMS40Mi0yLjM3LTIuMTUtMy41Ni0uMjEuMDItLjQyLjAzLS42NS4wM2gtMy4xMnY3LjEyaC0zLjI1Wm0zLjI1LTE1Ljk2djYuMjFoMi45NGMxLjQ0LDAsMi41Mi0uMjUsMy4yNS0uNzUuNzMtLjUsMS4wOS0xLjI4LDEuMDktMi4zNHMtLjM2LTEuODYtMS4wOC0yLjM3Yy0uNzItLjUtMS44LS43NS0zLjI0LS43NWgtMi45NloiLz4KICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Im0yNTcuNDcsMy4xN2gxMi40M3YyLjc4aC05LjEzdjQuODFoOC4xNHYyLjc4aC04LjE0djUuNDNoOS42MnYyLjc4aC0xMi45MlYzLjE3WiIvPgogICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTI3OS42LDMuMTdoMy41MWMxLjMyLDMuMDksMi42LDYuMTgsMy44Myw5LjI4czIuNDQsNi4yMSwzLjYsOS4zMWgtMy41NmMtLjI2LS43Ni0uNTItMS41Mi0uNzktMi4yN3MtLjU0LTEuNS0uODItMi4yNWgtOC4xNGMtLjI4Ljc1LS41NSwxLjUtLjgxLDIuMjVzLS41MiwxLjUxLS43OCwyLjI3aC0zLjQ4YzEuMi0zLjI2LDIuNDItNi40NCwzLjY3LTkuNTQsMS4yNS0zLjEsMi41LTYuMTIsMy43Ny05LjA1Wm0tMS4zNSwxMS4zMWg2LjExYy0uNS0xLjM3LTEtMi43Mi0xLjUxLTQuMDYtLjUtMS4zMy0xLjAxLTIuNjYtMS41My0zLjk4LS41NCwxLjMyLTEuMDYsMi42NS0xLjU3LDMuOTktLjUxLDEuMzQtMS4wMSwyLjY5LTEuNSw0LjA0WiIvPgogICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTI4OS40OCwzLjE3aDE1LjQydjIuODZoLTYuMDZ2MTUuNzNoLTMuM1Y2LjAzaC02LjA2di0yLjg2WiIvPgogICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTMwNy43NiwzLjE3aDMuM3YxOC41OWgtMy4zVjMuMTdaIi8+CiAgICAgICAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJtMzEzLjc5LDMuMTdoMy41NmMuODgsMi41NywxLjc4LDUuMTIsMi42OSw3LjY2czEuODMsNS4wNywyLjc3LDcuNmMuOTUtMi41MywxLjg5LTUuMDcsMi43OS03LjYuOTEtMi41NCwxLjgxLTUuMDksMi42OS03LjY2aDMuNDhjLTEuMTYsMy4xLTIuMzQsNi4yLTMuNTUsOS4yOS0xLjIsMy4wOS0yLjQ0LDYuMTktMy43MSw5LjI5aC0zLjUxYy0xLjI3LTMuMS0yLjUtNi4yMS0zLjcyLTkuMzEtMS4yMS0zLjEtMi4zOC02LjItMy41MS05LjI4WiIvPgogICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0ibTMzNC41MSwzLjE3aDEyLjQzdjIuNzhoLTkuMTN2NC44MWg4LjE0djIuNzhoLTguMTR2NS40M2g5LjYydjIuNzhoLTEyLjkyVjMuMTdaIi8+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==\"","import React from 'react'\nimport styled from 'styled-components'\nimport { Link } from 'gatsby'\nimport Maxwidth from '../maxwidth'\nimport Logo from '../../images/bbc_logo_new.svg'\nimport Burger from '../../images/burger.svg'\n\nconst Container = styled.nav`\n display: flex;\n justify-content: space-between;\n margin-bottom: 98px;\n img.logo {\n width: 371px;\n max-width: 66vw;\n margin-top: 29px;\n }\n img.menu-toggle {\n margin-top: 28px;\n width: 28px;\n cursor: pointer;\n display: none;\n }\n`\n\nconst Nav = ({ setOpen, open }) => {\n return (\n \n \n \n 
\n \n ![]()
setOpen(true)} className=\"menu-toggle\" src={Burger} alt=\"Menu\" aria-haspopup=\"true\" aria-controls=\"menu\" />\n \n \n )\n}\n\nexport default Nav\n","export default \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAxOSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogbm9uZTsKICAgICAgICBzdHJva2U6ICMwMDA7CiAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOwogICAgICAgIHN0cm9rZS13aWR0aDogMnB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEiPgogICAgPGc+CiAgICAgIDxsaW5lIGNsYXNzPSJjbHMtMSIgeTE9IjEiIHgyPSIyOCIgeTI9IjEiLz4KICAgICAgPGxpbmUgY2xhc3M9ImNscy0xIiB5MT0iOS41IiB4Mj0iMjgiIHkyPSI5LjUiLz4KICAgICAgPGxpbmUgY2xhc3M9ImNscy0xIiB5MT0iMTgiIHgyPSIyOCIgeTI9IjE4Ii8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=\"","import React from 'react'\nimport styled from 'styled-components'\nimport Socials from '../socials'\n\nconst Container = styled.footer`\n margin-top: 5rem;\n`\n\n\nconst Footer = () => {\n return (\n \n \n )\n}\n\nexport default Footer\n","import React from 'react'\nimport { navigate } from 'gatsby'\nimport styled from 'styled-components'\nimport Maxwidth from '../maxwidth'\nimport Logo from '../../images/bbc_logo_new.svg'\nimport X from '../../images/x.svg'\n\nconst Flex = styled.div`\n display: flex;\n justify-content: space-between;\n`\n\nconst Container = styled.div`\n background-color: #000;\n color: #fff;\n transition: opacity 0.25s ease-in-out;\n height: auto;\n min-height: 0;\n overflow-y: hidden;\n max-height: 0;\n opacity: 0;\n width: 100%;\n z-index: 10;\n &.open {\n position: fixed;\n min-height: 100vh;\n overflow-y: visible;\n max-height: 100vh;\n background-color: #000;\n opacity: 1;\n }\n img {\n transform: translateY(-4px);\n }\n img.logo {\n width: 371px;\n max-width: 66vw;\n margin-top: 31px;\n filter: invert(100%);\n }\n img.close {\n margin-top: 33px;\n width: 28px;\n cursor: pointer;\n }\n`\n\nconst Menu = styled.nav`\n min-height: calc(100vh - 122px);\n display: flex;\n align-items: center;\n justify-content: center;\n ul {\n list-style: none;\n padding: 0;\n li {\n font-family: BBCSansLight, sans-serif;\n text-align: center;\n // font-size: 58px;\n // line-height: 68px;\n font-size: clamp(2.625rem, 1.848vw + 2.147rem, 3.625rem);\n line-height: clamp(3.15rem, 1.631vw + 2.728rem, 4.033rem);\n a {\n color: #fff;\n text-decoration: none;\n }\n }\n }\n`\n\nconst Popover = ({ setOpen, open }) => {\n\n const handleClick = (e, url) => {\n e.preventDefault();\n navigate(url);\n setTimeout(function() {\n setOpen(false);\n }, 25);\n }\n\n return (\n \n \n \n \n ![]()
setOpen(false)} className=\"close\" src={X} aria-label=\"Close\" alt=\"\" />\n \n \n \n \n \n \n \n )\n}\n\nexport default Popover\n","export default \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMy40MSAyMy40MSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogbm9uZTsKICAgICAgICBzdHJva2U6ICNmZmY7CiAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOwogICAgICAgIHN0cm9rZS13aWR0aDogMnB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEiPgogICAgPGc+CiAgICAgIDxsaW5lIGNsYXNzPSJjbHMtMSIgeDE9Ii43MSIgeTE9Ii43MSIgeDI9IjIyLjcxIiB5Mj0iMjIuNzEiLz4KICAgICAgPGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iLjcxIiB5MT0iMjIuNzEiIHgyPSIyMi43MSIgeTI9Ii43MSIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+\"","import React, { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { ReactLenis } from '@studio-freight/react-lenis'\nimport GlobalStyle from \"../components/globalstyle\";\nimport Maxwidth from '../components/maxwidth'\nimport Nav from '../components/nav'\nimport Footer from '../components/footer'\nimport Popover from '../components/popover'\n\nexport default function Layout(props) {\n\n const { children, path } = props;\n\n const [open, setOpen] = useState(false);\n\n return (\n \n \n \n {children}\n \n \n \n \n );\n\n}\n","'use strict';\n\nvar reactIs = require('react-is');\n\n/**\n * Copyright 2015, Yahoo! Inc.\n * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.\n */\nvar REACT_STATICS = {\n childContextTypes: true,\n contextType: true,\n contextTypes: true,\n defaultProps: true,\n displayName: true,\n getDefaultProps: true,\n getDerivedStateFromError: true,\n getDerivedStateFromProps: true,\n mixins: true,\n propTypes: true,\n type: true\n};\nvar KNOWN_STATICS = {\n name: true,\n length: true,\n prototype: true,\n caller: true,\n callee: true,\n arguments: true,\n arity: true\n};\nvar FORWARD_REF_STATICS = {\n '$$typeof': true,\n render: true,\n defaultProps: true,\n displayName: true,\n propTypes: true\n};\nvar MEMO_STATICS = {\n '$$typeof': true,\n compare: true,\n defaultProps: true,\n displayName: true,\n propTypes: true,\n type: true\n};\nvar TYPE_STATICS = {};\nTYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;\nTYPE_STATICS[reactIs.Memo] = MEMO_STATICS;\n\nfunction getStatics(component) {\n // React v16.11 and below\n if (reactIs.isMemo(component)) {\n return MEMO_STATICS;\n } // React v16.12 and above\n\n\n return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;\n}\n\nvar defineProperty = Object.defineProperty;\nvar getOwnPropertyNames = Object.getOwnPropertyNames;\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\nvar getPrototypeOf = Object.getPrototypeOf;\nvar objectPrototype = Object.prototype;\nfunction hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {\n if (typeof sourceComponent !== 'string') {\n // don't hoist over string (html) components\n if (objectPrototype) {\n var inheritedComponent = getPrototypeOf(sourceComponent);\n\n if (inheritedComponent && inheritedComponent !== objectPrototype) {\n hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);\n }\n }\n\n var keys = getOwnPropertyNames(sourceComponent);\n\n if (getOwnPropertySymbols) {\n keys = keys.concat(getOwnPropertySymbols(sourceComponent));\n }\n\n var targetStatics = getStatics(targetComponent);\n var sourceStatics = getStatics(sourceComponent);\n\n for (var i = 0; i < keys.length; ++i) {\n var key = keys[i];\n\n if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {\n var descriptor = getOwnPropertyDescriptor(sourceComponent, key);\n\n try {\n // Avoid failures from read-only properties\n defineProperty(targetComponent, key, descriptor);\n } catch (e) {}\n }\n }\n }\n\n return targetComponent;\n}\n\nmodule.exports = hoistNonReactStatics;\n","/** @license React v16.13.1\n * react-is.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';var b=\"function\"===typeof Symbol&&Symbol.for,c=b?Symbol.for(\"react.element\"):60103,d=b?Symbol.for(\"react.portal\"):60106,e=b?Symbol.for(\"react.fragment\"):60107,f=b?Symbol.for(\"react.strict_mode\"):60108,g=b?Symbol.for(\"react.profiler\"):60114,h=b?Symbol.for(\"react.provider\"):60109,k=b?Symbol.for(\"react.context\"):60110,l=b?Symbol.for(\"react.async_mode\"):60111,m=b?Symbol.for(\"react.concurrent_mode\"):60111,n=b?Symbol.for(\"react.forward_ref\"):60112,p=b?Symbol.for(\"react.suspense\"):60113,q=b?\nSymbol.for(\"react.suspense_list\"):60120,r=b?Symbol.for(\"react.memo\"):60115,t=b?Symbol.for(\"react.lazy\"):60116,v=b?Symbol.for(\"react.block\"):60121,w=b?Symbol.for(\"react.fundamental\"):60117,x=b?Symbol.for(\"react.responder\"):60118,y=b?Symbol.for(\"react.scope\"):60119;\nfunction z(a){if(\"object\"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;exports.Fragment=e;exports.Lazy=t;exports.Memo=r;exports.Portal=d;\nexports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;exports.isAsyncMode=function(a){return A(a)||z(a)===l};exports.isConcurrentMode=A;exports.isContextConsumer=function(a){return z(a)===k};exports.isContextProvider=function(a){return z(a)===h};exports.isElement=function(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return z(a)===n};exports.isFragment=function(a){return z(a)===e};exports.isLazy=function(a){return z(a)===t};\nexports.isMemo=function(a){return z(a)===r};exports.isPortal=function(a){return z(a)===d};exports.isProfiler=function(a){return z(a)===g};exports.isStrictMode=function(a){return z(a)===f};exports.isSuspense=function(a){return z(a)===p};\nexports.isValidElementType=function(a){return\"string\"===typeof a||\"function\"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||\"object\"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};exports.typeOf=z;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-is.production.min.js');\n} else {\n module.exports = require('./cjs/react-is.development.js');\n}\n","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\n/**\n * Use invariant() to assert state which your program assumes to be true.\n *\n * Provide sprintf-style format (only %s is supported) and arguments\n * to provide information about what broke and what you were\n * expecting.\n *\n * The invariant message will be stripped in production, but the invariant\n * will remain to ensure logic does not differ in production.\n */\n\nvar invariant = function(condition, format, a, b, c, d, e, f) {\n if (process.env.NODE_ENV !== 'production') {\n if (format === undefined) {\n throw new Error('invariant requires an error message argument');\n }\n }\n\n if (!condition) {\n var error;\n if (format === undefined) {\n error = new Error(\n 'Minified exception occurred; use the non-minified dev environment ' +\n 'for the full error message and additional helpful warnings.'\n );\n } else {\n var args = [a, b, c, d, e, f];\n var argIndex = 0;\n error = new Error(\n format.replace(/%s/g, function() { return args[argIndex++]; })\n );\n error.name = 'Invariant Violation';\n }\n\n error.framesToPop = 1; // we don't care about invariant's own frame\n throw error;\n }\n};\n\nmodule.exports = invariant;\n","/**\n * @license React\n * react-is.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var b=Symbol.for(\"react.element\"),c=Symbol.for(\"react.portal\"),d=Symbol.for(\"react.fragment\"),e=Symbol.for(\"react.strict_mode\"),f=Symbol.for(\"react.profiler\"),g=Symbol.for(\"react.provider\"),h=Symbol.for(\"react.context\"),k=Symbol.for(\"react.server_context\"),l=Symbol.for(\"react.forward_ref\"),m=Symbol.for(\"react.suspense\"),n=Symbol.for(\"react.suspense_list\"),p=Symbol.for(\"react.memo\"),q=Symbol.for(\"react.lazy\"),t=Symbol.for(\"react.offscreen\"),u;u=Symbol.for(\"react.module.reference\");\nfunction v(a){if(\"object\"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f:case e:case m:case n:return a;default:switch(a=a&&a.$$typeof,a){case k:case h:case l:case q:case p:case g:return a;default:return r}}case c:return r}}}exports.ContextConsumer=h;exports.ContextProvider=g;exports.Element=b;exports.ForwardRef=l;exports.Fragment=d;exports.Lazy=q;exports.Memo=p;exports.Portal=c;exports.Profiler=f;exports.StrictMode=e;exports.Suspense=m;\nexports.SuspenseList=n;exports.isAsyncMode=function(){return!1};exports.isConcurrentMode=function(){return!1};exports.isContextConsumer=function(a){return v(a)===h};exports.isContextProvider=function(a){return v(a)===g};exports.isElement=function(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===b};exports.isForwardRef=function(a){return v(a)===l};exports.isFragment=function(a){return v(a)===d};exports.isLazy=function(a){return v(a)===q};exports.isMemo=function(a){return v(a)===p};\nexports.isPortal=function(a){return v(a)===c};exports.isProfiler=function(a){return v(a)===f};exports.isStrictMode=function(a){return v(a)===e};exports.isSuspense=function(a){return v(a)===m};exports.isSuspenseList=function(a){return v(a)===n};\nexports.isValidElementType=function(a){return\"string\"===typeof a||\"function\"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||\"object\"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};exports.typeOf=v;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-is.production.min.js');\n} else {\n module.exports = require('./cjs/react-is.development.js');\n}\n","/**\n * @license React\n * react-server-dom-webpack.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var k=require(\"react\"),l={stream:!0},n=new Map,p=Symbol.for(\"react.element\"),q=Symbol.for(\"react.lazy\"),r=Symbol.for(\"react.default_value\"),t=k.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ContextRegistry;function u(a){t[a]||(t[a]=k.createServerContext(a,r));return t[a]}function v(a,b,c){this._status=a;this._value=b;this._response=c}v.prototype.then=function(a){0===this._status?(null===this._value&&(this._value=[]),this._value.push(a)):a()};\nfunction w(a){switch(a._status){case 3:return a._value;case 1:var b=JSON.parse(a._value,a._response._fromJSON);a._status=3;return a._value=b;case 2:b=a._value;for(var c=b.chunks,d=0;d q) && (t = (f = f.replace(' ', ':')).length), 0 < A && void 0 !== (C = H(1, f, c, d, D, z, p.length, h, a, h)) && 0 === (t = (f = C.trim()).length) && (f = '\\x00\\x00'), q = f.charCodeAt(0), g = f.charCodeAt(1), q) {\n case 0:\n break;\n\n case 64:\n if (105 === g || 99 === g) {\n G += f + e.charAt(l);\n break;\n }\n\n default:\n 58 !== f.charCodeAt(t - 1) && (p += P(f, q, g, f.charCodeAt(2)));\n }\n I = r = u = q = 0;\n f = '';\n g = e.charCodeAt(++l);\n }\n }\n\n switch (g) {\n case 13:\n case 10:\n 47 === b ? b = 0 : 0 === 1 + q && 107 !== h && 0 < f.length && (r = 1, f += '\\x00');\n 0 < A * Y && H(0, f, c, d, D, z, p.length, h, a, h);\n z = 1;\n D++;\n break;\n\n case 59:\n case 125:\n if (0 === b + n + v + m) {\n z++;\n break;\n }\n\n default:\n z++;\n y = e.charAt(l);\n\n switch (g) {\n case 9:\n case 32:\n if (0 === n + m + b) switch (x) {\n case 44:\n case 58:\n case 9:\n case 32:\n y = '';\n break;\n\n default:\n 32 !== g && (y = ' ');\n }\n break;\n\n case 0:\n y = '\\\\0';\n break;\n\n case 12:\n y = '\\\\f';\n break;\n\n case 11:\n y = '\\\\v';\n break;\n\n case 38:\n 0 === n + b + m && (r = I = 1, y = '\\f' + y);\n break;\n\n case 108:\n if (0 === n + b + m + E && 0 < u) switch (l - u) {\n case 2:\n 112 === x && 58 === e.charCodeAt(l - 3) && (E = x);\n\n case 8:\n 111 === K && (E = K);\n }\n break;\n\n case 58:\n 0 === n + b + m && (u = l);\n break;\n\n case 44:\n 0 === b + v + n + m && (r = 1, y += '\\r');\n break;\n\n case 34:\n case 39:\n 0 === b && (n = n === g ? 0 : 0 === n ? g : n);\n break;\n\n case 91:\n 0 === n + b + v && m++;\n break;\n\n case 93:\n 0 === n + b + v && m--;\n break;\n\n case 41:\n 0 === n + b + m && v--;\n break;\n\n case 40:\n if (0 === n + b + m) {\n if (0 === q) switch (2 * x + 3 * K) {\n case 533:\n break;\n\n default:\n q = 1;\n }\n v++;\n }\n\n break;\n\n case 64:\n 0 === b + v + n + m + u + k && (k = 1);\n break;\n\n case 42:\n case 47:\n if (!(0 < n + m + v)) switch (b) {\n case 0:\n switch (2 * g + 3 * e.charCodeAt(l + 1)) {\n case 235:\n b = 47;\n break;\n\n case 220:\n t = l, b = 42;\n }\n\n break;\n\n case 42:\n 47 === g && 42 === x && t + 2 !== l && (33 === e.charCodeAt(t + 2) && (p += e.substring(t, l + 1)), y = '', b = 0);\n }\n }\n\n 0 === b && (f += y);\n }\n\n K = x;\n x = g;\n l++;\n }\n\n t = p.length;\n\n if (0 < t) {\n r = c;\n if (0 < A && (C = H(2, p, r, d, D, z, t, h, a, h), void 0 !== C && 0 === (p = C).length)) return G + p + F;\n p = r.join(',') + '{' + p + '}';\n\n if (0 !== w * E) {\n 2 !== w || L(p, 2) || (E = 0);\n\n switch (E) {\n case 111:\n p = p.replace(ha, ':-moz-$1') + p;\n break;\n\n case 112:\n p = p.replace(Q, '::-webkit-input-$1') + p.replace(Q, '::-moz-$1') + p.replace(Q, ':-ms-input-$1') + p;\n }\n\n E = 0;\n }\n }\n\n return G + p + F;\n }\n\n function X(d, c, e) {\n var h = c.trim().split(ia);\n c = h;\n var a = h.length,\n m = d.length;\n\n switch (m) {\n case 0:\n case 1:\n var b = 0;\n\n for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) {\n c[b] = Z(d, c[b], e).trim();\n }\n\n break;\n\n default:\n var v = b = 0;\n\n for (c = []; b < a; ++b) {\n for (var n = 0; n < m; ++n) {\n c[v++] = Z(d[n] + ' ', h[b], e).trim();\n }\n }\n\n }\n\n return c;\n }\n\n function Z(d, c, e) {\n var h = c.charCodeAt(0);\n 33 > h && (h = (c = c.trim()).charCodeAt(0));\n\n switch (h) {\n case 38:\n return c.replace(F, '$1' + d.trim());\n\n case 58:\n return d.trim() + c.replace(F, '$1' + d.trim());\n\n default:\n if (0 < 1 * e && 0 < c.indexOf('\\f')) return c.replace(F, (58 === d.charCodeAt(0) ? '' : '$1') + d.trim());\n }\n\n return d + c;\n }\n\n function P(d, c, e, h) {\n var a = d + ';',\n m = 2 * c + 3 * e + 4 * h;\n\n if (944 === m) {\n d = a.indexOf(':', 9) + 1;\n var b = a.substring(d, a.length - 1).trim();\n b = a.substring(0, d).trim() + b + ';';\n return 1 === w || 2 === w && L(b, 1) ? '-webkit-' + b + b : b;\n }\n\n if (0 === w || 2 === w && !L(a, 1)) return a;\n\n switch (m) {\n case 1015:\n return 97 === a.charCodeAt(10) ? '-webkit-' + a + a : a;\n\n case 951:\n return 116 === a.charCodeAt(3) ? '-webkit-' + a + a : a;\n\n case 963:\n return 110 === a.charCodeAt(5) ? '-webkit-' + a + a : a;\n\n case 1009:\n if (100 !== a.charCodeAt(4)) break;\n\n case 969:\n case 942:\n return '-webkit-' + a + a;\n\n case 978:\n return '-webkit-' + a + '-moz-' + a + a;\n\n case 1019:\n case 983:\n return '-webkit-' + a + '-moz-' + a + '-ms-' + a + a;\n\n case 883:\n if (45 === a.charCodeAt(8)) return '-webkit-' + a + a;\n if (0 < a.indexOf('image-set(', 11)) return a.replace(ja, '$1-webkit-$2') + a;\n break;\n\n case 932:\n if (45 === a.charCodeAt(4)) switch (a.charCodeAt(5)) {\n case 103:\n return '-webkit-box-' + a.replace('-grow', '') + '-webkit-' + a + '-ms-' + a.replace('grow', 'positive') + a;\n\n case 115:\n return '-webkit-' + a + '-ms-' + a.replace('shrink', 'negative') + a;\n\n case 98:\n return '-webkit-' + a + '-ms-' + a.replace('basis', 'preferred-size') + a;\n }\n return '-webkit-' + a + '-ms-' + a + a;\n\n case 964:\n return '-webkit-' + a + '-ms-flex-' + a + a;\n\n case 1023:\n if (99 !== a.charCodeAt(8)) break;\n b = a.substring(a.indexOf(':', 15)).replace('flex-', '').replace('space-between', 'justify');\n return '-webkit-box-pack' + b + '-webkit-' + a + '-ms-flex-pack' + b + a;\n\n case 1005:\n return ka.test(a) ? a.replace(aa, ':-webkit-') + a.replace(aa, ':-moz-') + a : a;\n\n case 1e3:\n b = a.substring(13).trim();\n c = b.indexOf('-') + 1;\n\n switch (b.charCodeAt(0) + b.charCodeAt(c)) {\n case 226:\n b = a.replace(G, 'tb');\n break;\n\n case 232:\n b = a.replace(G, 'tb-rl');\n break;\n\n case 220:\n b = a.replace(G, 'lr');\n break;\n\n default:\n return a;\n }\n\n return '-webkit-' + a + '-ms-' + b + a;\n\n case 1017:\n if (-1 === a.indexOf('sticky', 9)) break;\n\n case 975:\n c = (a = d).length - 10;\n b = (33 === a.charCodeAt(c) ? a.substring(0, c) : a).substring(d.indexOf(':', 7) + 1).trim();\n\n switch (m = b.charCodeAt(0) + (b.charCodeAt(7) | 0)) {\n case 203:\n if (111 > b.charCodeAt(8)) break;\n\n case 115:\n a = a.replace(b, '-webkit-' + b) + ';' + a;\n break;\n\n case 207:\n case 102:\n a = a.replace(b, '-webkit-' + (102 < m ? 'inline-' : '') + 'box') + ';' + a.replace(b, '-webkit-' + b) + ';' + a.replace(b, '-ms-' + b + 'box') + ';' + a;\n }\n\n return a + ';';\n\n case 938:\n if (45 === a.charCodeAt(5)) switch (a.charCodeAt(6)) {\n case 105:\n return b = a.replace('-items', ''), '-webkit-' + a + '-webkit-box-' + b + '-ms-flex-' + b + a;\n\n case 115:\n return '-webkit-' + a + '-ms-flex-item-' + a.replace(ba, '') + a;\n\n default:\n return '-webkit-' + a + '-ms-flex-line-pack' + a.replace('align-content', '').replace(ba, '') + a;\n }\n break;\n\n case 973:\n case 989:\n if (45 !== a.charCodeAt(3) || 122 === a.charCodeAt(4)) break;\n\n case 931:\n case 953:\n if (!0 === la.test(d)) return 115 === (b = d.substring(d.indexOf(':') + 1)).charCodeAt(0) ? P(d.replace('stretch', 'fill-available'), c, e, h).replace(':fill-available', ':stretch') : a.replace(b, '-webkit-' + b) + a.replace(b, '-moz-' + b.replace('fill-', '')) + a;\n break;\n\n case 962:\n if (a = '-webkit-' + a + (102 === a.charCodeAt(5) ? '-ms-' + a : '') + a, 211 === e + h && 105 === a.charCodeAt(13) && 0 < a.indexOf('transform', 10)) return a.substring(0, a.indexOf(';', 27) + 1).replace(ma, '$1-webkit-$2') + a;\n }\n\n return a;\n }\n\n function L(d, c) {\n var e = d.indexOf(1 === c ? ':' : '{'),\n h = d.substring(0, 3 !== c ? e : 10);\n e = d.substring(e + 1, d.length - 1);\n return R(2 !== c ? h : h.replace(na, '$1'), e, c);\n }\n\n function ea(d, c) {\n var e = P(c, c.charCodeAt(0), c.charCodeAt(1), c.charCodeAt(2));\n return e !== c + ';' ? e.replace(oa, ' or ($1)').substring(4) : '(' + c + ')';\n }\n\n function H(d, c, e, h, a, m, b, v, n, q) {\n for (var g = 0, x = c, w; g < A; ++g) {\n switch (w = S[g].call(B, d, x, e, h, a, m, b, v, n, q)) {\n case void 0:\n case !1:\n case !0:\n case null:\n break;\n\n default:\n x = w;\n }\n }\n\n if (x !== c) return x;\n }\n\n function T(d) {\n switch (d) {\n case void 0:\n case null:\n A = S.length = 0;\n break;\n\n default:\n if ('function' === typeof d) S[A++] = d;else if ('object' === typeof d) for (var c = 0, e = d.length; c < e; ++c) {\n T(d[c]);\n } else Y = !!d | 0;\n }\n\n return T;\n }\n\n function U(d) {\n d = d.prefix;\n void 0 !== d && (R = null, d ? 'function' !== typeof d ? w = 1 : (w = 2, R = d) : w = 0);\n return U;\n }\n\n function B(d, c) {\n var e = d;\n 33 > e.charCodeAt(0) && (e = e.trim());\n V = e;\n e = [V];\n\n if (0 < A) {\n var h = H(-1, c, e, e, D, z, 0, 0, 0, 0);\n void 0 !== h && 'string' === typeof h && (c = h);\n }\n\n var a = M(O, e, c, 0, 0);\n 0 < A && (h = H(-2, a, e, e, D, z, a.length, 0, 0, 0), void 0 !== h && (a = h));\n V = '';\n E = 0;\n z = D = 1;\n return a;\n }\n\n var ca = /^\\0+/g,\n N = /[\\0\\r\\f]/g,\n aa = /: */g,\n ka = /zoo|gra/,\n ma = /([,: ])(transform)/g,\n ia = /,\\r+?/g,\n F = /([\\t\\r\\n ])*\\f?&/g,\n fa = /@(k\\w+)\\s*(\\S*)\\s*/,\n Q = /::(place)/g,\n ha = /:(read-only)/g,\n G = /[svh]\\w+-[tblr]{2}/,\n da = /\\(\\s*(.*)\\s*\\)/g,\n oa = /([\\s\\S]*?);/g,\n ba = /-self|flex-/g,\n na = /[^]*?(:[rp][el]a[\\w-]+)[^]*/,\n la = /stretch|:\\s*\\w+\\-(?:conte|avail)/,\n ja = /([^-])(image-set\\()/,\n z = 1,\n D = 1,\n E = 0,\n w = 1,\n O = [],\n S = [],\n A = 0,\n R = null,\n Y = 0,\n V = '';\n B.use = T;\n B.set = U;\n void 0 !== W && U(W);\n return B;\n}\n\nexport default stylis_min;\n","var unitlessKeys = {\n animationIterationCount: 1,\n borderImageOutset: 1,\n borderImageSlice: 1,\n borderImageWidth: 1,\n boxFlex: 1,\n boxFlexGroup: 1,\n boxOrdinalGroup: 1,\n columnCount: 1,\n columns: 1,\n flex: 1,\n flexGrow: 1,\n flexPositive: 1,\n flexShrink: 1,\n flexNegative: 1,\n flexOrder: 1,\n gridRow: 1,\n gridRowEnd: 1,\n gridRowSpan: 1,\n gridRowStart: 1,\n gridColumn: 1,\n gridColumnEnd: 1,\n gridColumnSpan: 1,\n gridColumnStart: 1,\n msGridRow: 1,\n msGridRowSpan: 1,\n msGridColumn: 1,\n msGridColumnSpan: 1,\n fontWeight: 1,\n lineHeight: 1,\n opacity: 1,\n order: 1,\n orphans: 1,\n tabSize: 1,\n widows: 1,\n zIndex: 1,\n zoom: 1,\n WebkitLineClamp: 1,\n // SVG-related properties\n fillOpacity: 1,\n floodOpacity: 1,\n stopOpacity: 1,\n strokeDasharray: 1,\n strokeDashoffset: 1,\n strokeMiterlimit: 1,\n strokeOpacity: 1,\n strokeWidth: 1\n};\n\nexport default unitlessKeys;\n","function memoize(fn) {\n var cache = Object.create(null);\n return function (arg) {\n if (cache[arg] === undefined) cache[arg] = fn(arg);\n return cache[arg];\n };\n}\n\nexport default memoize;\n","import memoize from '@emotion/memoize';\n\nvar reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23\n\nvar isPropValid = /* #__PURE__ */memoize(function (prop) {\n return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111\n /* o */\n && prop.charCodeAt(1) === 110\n /* n */\n && prop.charCodeAt(2) < 91;\n}\n/* Z+1 */\n);\n\nexport default isPropValid;\n","import{typeOf as e,isElement as t,isValidElementType as n}from\"react-is\";import r,{useState as o,useContext as s,useMemo as i,useEffect as a,useRef as c,createElement as u,useDebugValue as l,useLayoutEffect as d}from\"react\";import h from\"shallowequal\";import p from\"@emotion/stylis\";import f from\"@emotion/unitless\";import m from\"@emotion/is-prop-valid\";import y from\"hoist-non-react-statics\";function v(){return(v=Object.assign||function(e){for(var t=1;t ({})}\\n```\\n\\n',8:'ThemeProvider: Please make your \"theme\" prop an object.\\n\\n',9:\"Missing document ``\\n\\n\",10:\"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\\n\\n\",11:\"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\\n\\n\",12:\"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\\\`\\\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\\n\\n\",13:\"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\\n\\n\",14:'ThemeProvider: \"theme\" prop is required.\\n\\n',15:\"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to ``, please make sure each plugin is uniquely-named, e.g.\\n\\n```js\\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\\n```\\n\\n\",16:\"Reached the limit of how many styled components may be created at group %s.\\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\\nas for instance in your render method then you may be running into this limitation.\\n\\n\",17:\"CSSStyleSheet could not be found on HTMLStyleElement.\\nHas styled-components' style tag been unmounted or altered by another script?\\n\"}:{};function D(){for(var e=arguments.length<=0?void 0:arguments[0],t=[],n=1,r=arguments.length;n1?t-1:0),r=1;r0?\" Args: \"+n.join(\", \"):\"\")):new Error(D.apply(void 0,[R[e]].concat(n)).trim())}var T=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e}var t=e.prototype;return t.indexOfGroup=function(e){for(var t=0,n=0;n=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)(o<<=1)<0&&j(16,\"\"+e);this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s1<<30)&&j(16,\"\"+t),x.set(e,t),k.set(t,e),t},z=function(e){return k.get(e)},M=function(e,t){t>=V&&(V=t+1),x.set(e,t),k.set(t,e)},G=\"style[\"+A+'][data-styled-version=\"5.3.9\"]',L=new RegExp(\"^\"+A+'\\\\.g(\\\\d+)\\\\[id=\"([\\\\w\\\\d-]+)\"\\\\].*?\"([^\"]*)'),F=function(e,t,n){for(var r,o=n.split(\",\"),s=0,i=o.length;s=0;n--){var r=t[n];if(r&&1===r.nodeType&&r.hasAttribute(A))return r}}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(A,\"active\"),r.setAttribute(\"data-styled-version\",\"5.3.9\");var i=q();return i&&r.setAttribute(\"nonce\",i),n.insertBefore(r,s),r},$=function(){function e(e){var t=this.element=H(e);t.appendChild(document.createTextNode(\"\")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n=0){var n=document.createTextNode(t),r=this.nodes[e];return this.element.insertBefore(n,r||null),this.length++,!0}return!1},t.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--},t.getRule=function(e){return e0&&(u+=e+\",\")})),r+=\"\"+a+c+'{content:\"'+u+'\"}/*!sc*/\\n'}}}return r}(this)},e}(),K=/(a)(d)/gi,Q=function(e){return String.fromCharCode(e+(e>25?39:97))};function ee(e){var t,n=\"\";for(t=Math.abs(e);t>52;t=t/52|0)n=Q(t%52)+n;return(Q(t%52)+n).replace(K,\"$1-$2\")}var te=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},ne=function(e){return te(5381,e)};function re(e){for(var t=0;t>>0);if(!t.hasNameForId(r,i)){var a=n(s,\".\"+i,void 0,r);t.insertRules(r,i,a)}o.push(i),this.staticRulesId=i}else{for(var c=this.rules.length,u=te(this.baseHash,n.hash),l=\"\",d=0;d>>0);if(!t.hasNameForId(r,m)){var y=n(l,\".\"+m,void 0,r);t.insertRules(r,m,y)}o.push(m)}}return o.join(\" \")},e}(),ie=/^\\s*\\/\\/.*$/gm,ae=[\":\",\"[\",\".\",\"#\"];function ce(e){var t,n,r,o,s=void 0===e?E:e,i=s.options,a=void 0===i?E:i,c=s.plugins,u=void 0===c?w:c,l=new p(a),d=[],h=function(e){function t(t){if(t)try{e(t+\"}\")}catch(e){}}return function(n,r,o,s,i,a,c,u,l,d){switch(n){case 1:if(0===l&&64===r.charCodeAt(0))return e(r+\";\"),\"\";break;case 2:if(0===u)return r+\"/*|*/\";break;case 3:switch(u){case 102:case 112:return e(o[0]+r),\"\";default:return r+(0===d?\"/*|*/\":\"\")}case-2:r.split(\"/*|*/}\").forEach(t)}}}((function(e){d.push(e)})),f=function(e,r,s){return 0===r&&-1!==ae.indexOf(s[n.length])||s.match(o)?e:\".\"+t};function m(e,s,i,a){void 0===a&&(a=\"&\");var c=e.replace(ie,\"\"),u=s&&i?i+\" \"+s+\" { \"+c+\" }\":c;return t=a,n=s,r=new RegExp(\"\\\\\"+n+\"\\\\b\",\"g\"),o=new RegExp(\"(\\\\\"+n+\"\\\\b){2,}\"),l(i||!s?\"\":s,u)}return l.use([].concat(u,[function(e,t,o){2===e&&o.length&&o[0].lastIndexOf(n)>0&&(o[0]=o[0].replace(r,f))},h,function(e){if(-2===e){var t=d;return d=[],t}}])),m.hash=u.length?u.reduce((function(e,t){return t.name||j(15),te(e,t.name)}),5381).toString():\"\",m}var ue=r.createContext(),le=ue.Consumer,de=r.createContext(),he=(de.Consumer,new Z),pe=ce();function fe(){return s(ue)||he}function me(){return s(de)||pe}function ye(e){var t=o(e.stylisPlugins),n=t[0],s=t[1],c=fe(),u=i((function(){var t=c;return e.sheet?t=e.sheet:e.target&&(t=t.reconstructWithOptions({target:e.target},!1)),e.disableCSSOMInjection&&(t=t.reconstructWithOptions({useCSSOMInjection:!1})),t}),[e.disableCSSOMInjection,e.sheet,e.target]),l=i((function(){return ce({options:{prefix:!e.disableVendorPrefixes},plugins:n})}),[e.disableVendorPrefixes,n]);return a((function(){h(n,e.stylisPlugins)||s(e.stylisPlugins)}),[e.stylisPlugins]),r.createElement(ue.Provider,{value:u},r.createElement(de.Provider,{value:l},\"production\"!==process.env.NODE_ENV?r.Children.only(e.children):e.children))}var ve=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=pe);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,\"@keyframes\"))},this.toString=function(){return j(12,String(n.name))},this.name=e,this.id=\"sc-keyframes-\"+e,this.rules=t}return e.prototype.getName=function(e){return void 0===e&&(e=pe),this.name+e.hash},e}(),ge=/([A-Z])/,Se=/([A-Z])/g,we=/^ms-/,Ee=function(e){return\"-\"+e.toLowerCase()};function be(e){return ge.test(e)?e.replace(Se,Ee).replace(we,\"-ms-\"):e}var _e=function(e){return null==e||!1===e||\"\"===e};function Ne(e,n,r,o){if(Array.isArray(e)){for(var s,i=[],a=0,c=e.length;a1?t-1:0),r=1;r1?t-1:0),i=1;i?@[\\\\\\]^`{|}~-]+/g,je=/(^-|-$)/g;function Te(e){return e.replace(De,\"-\").replace(je,\"\")}var xe=function(e){return ee(ne(e)>>>0)};function ke(e){return\"string\"==typeof e&&(\"production\"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var Ve=function(e){return\"function\"==typeof e||\"object\"==typeof e&&null!==e&&!Array.isArray(e)},Be=function(e){return\"__proto__\"!==e&&\"constructor\"!==e&&\"prototype\"!==e};function ze(e,t,n){var r=e[n];Ve(t)&&Ve(r)?Me(r,t):e[n]=t}function Me(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r=0||(o[n]=e[n]);return o}(t,[\"componentId\"]),s=r&&r+\"-\"+(ke(e)?e:Te(_(e)));return qe(e,v({},o,{attrs:S,componentId:s}),n)},Object.defineProperty(C,\"defaultProps\",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=o?Me({},e.defaultProps,t):t}}),\"production\"!==process.env.NODE_ENV&&(Oe(f,g),C.warnTooManyClasses=function(e,t){var n={},r=!1;return function(o){if(!r&&(n[o]=!0,Object.keys(n).length>=200)){var s=t?' with the id of \"'+t+'\"':\"\";console.warn(\"Over 200 classes were generated for component \"+e+s+\".\\nConsider using the attrs method, together with a style object for frequently changed styles.\\nExample:\\n const Component = styled.div.attrs(props => ({\\n style: {\\n background: props.background,\\n },\\n }))`width: 100%;`\\n\\n meta tag to the stylesheet, or simply embedding it manually in your index.html section for a simpler app.\"),t.server&&h(l,e,t,o,n),d((function(){if(!t.server)return h(l,e,t,o,n),function(){return u.removeStyles(l,t)}}),[l,e,t,o,n]),null}function h(e,t,n,r,o){if(u.isStatic)u.renderStyles(e,O,n,o);else{var s=v({},t,{theme:Re(t,r,l.defaultProps)});u.renderStyles(e,s,n,o)}}return\"production\"!==process.env.NODE_ENV&&Oe(a),r.memo(l)}function Ue(e){\"production\"!==process.env.NODE_ENV&&\"undefined\"!=typeof navigator&&\"ReactNative\"===navigator.product&&console.warn(\"`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.\");for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r\"+t+\"\"},this.getStyleTags=function(){return e.sealed?j(2):e._emitSheetCSS()},this.getStyleElement=function(){var t;if(e.sealed)return j(2);var n=((t={})[A]=\"\",t[\"data-styled-version\"]=\"5.3.9\",t.dangerouslySetInnerHTML={__html:e.instance.toString()},t),o=q();return o&&(n.nonce=o),[r.createElement(\"style\",v({},n,{key:\"sc-0-0\"}))]},this.seal=function(){e.sealed=!0},this.instance=new Z({isServer:!0}),this.sealed=!1}var t=e.prototype;return t.collectStyles=function(e){return this.sealed?j(2):r.createElement(ye,{sheet:this.instance},e)},t.interleaveWithNodeStream=function(e){return j(3)},e}(),Xe=function(e){var t=r.forwardRef((function(t,n){var o=s(Ge),i=e.defaultProps,a=Re(t,o,i);return\"production\"!==process.env.NODE_ENV&&void 0===a&&console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"'+_(e)+'\"'),r.createElement(e,v({},t,{theme:a,ref:n}))}));return y(t,e),t.displayName=\"WithTheme(\"+_(e)+\")\",t},Ze=function(){return s(Ge)},Ke={StyleSheet:Z,masterSheet:he};\"production\"!==process.env.NODE_ENV&&\"undefined\"!=typeof navigator&&\"ReactNative\"===navigator.product&&console.warn(\"It looks like you've imported 'styled-components' on React Native.\\nPerhaps you're looking to import 'styled-components/native'?\\nRead more about this at https://www.styled-components.com/docs/basics#react-native\"),\"production\"!==process.env.NODE_ENV&&\"test\"!==process.env.NODE_ENV&&\"undefined\"!=typeof window&&(window[\"__styled-components-init__\"]=window[\"__styled-components-init__\"]||0,1===window[\"__styled-components-init__\"]&&console.warn(\"It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\\n\\nSee https://s-c.sh/2BAXzed for more info.\"),window[\"__styled-components-init__\"]+=1);export default He;export{Je as ServerStyleSheet,le as StyleSheetConsumer,ue as StyleSheetContext,ye as StyleSheetManager,Le as ThemeConsumer,Ge as ThemeContext,Fe as ThemeProvider,Ke as __PRIVATE__,We as createGlobalStyle,Ce as css,N as isStyledComponent,Ue as keyframes,Ze as useTheme,C as version,Xe as withTheme};\n//# sourceMappingURL=styled-components.browser.esm.js.map\n","/**\n * @license React\n * use-sync-external-store-shim.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var e=require(\"react\");function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k=\"function\"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c})},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c})})},[a]);p(d);return d}\nfunction r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return!k(a,d)}catch(f){return!0}}function t(a,b){return b()}var u=\"undefined\"===typeof window||\"undefined\"===typeof window.document||\"undefined\"===typeof window.document.createElement?t:q;exports.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:u;\n","/**\n * @license React\n * use-sync-external-store-shim/with-selector.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var h=require(\"react\"),n=require(\"use-sync-external-store/shim\");function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q=\"function\"===typeof Object.is?Object.is:p,r=n.useSyncExternalStore,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;\nexports.useSyncExternalStoreWithSelector=function(a,b,e,l,g){var c=t(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f}else f=c.current;c=v(function(){function a(a){if(!c){c=!0;d=a;a=l(a);if(void 0!==g&&f.hasValue){var b=f.value;if(g(b,a))return k=b}return k=a}b=k;if(q(d,a))return b;var e=l(a);if(void 0!==g&&g(b,e))return b;d=a;return k=e}var c=!1,d,k,m=void 0===e?null:e;return[function(){return a(b())},null===m?void 0:function(){return a(m())}]},[b,e,l,g]);var d=r(a,c[0],c[1]);\nu(function(){f.hasValue=!0;f.value=d},[d]);w(d);return d};\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('../cjs/use-sync-external-store-shim.production.min.js');\n} else {\n module.exports = require('../cjs/use-sync-external-store-shim.development.js');\n}\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('../cjs/use-sync-external-store-shim/with-selector.production.min.js');\n} else {\n module.exports = require('../cjs/use-sync-external-store-shim/with-selector.development.js');\n}\n","function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n return self;\n}\nmodule.exports = _assertThisInitialized, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;","var setPrototypeOf = require(\"./setPrototypeOf.js\");\nfunction _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n setPrototypeOf(subClass, superClass);\n}\nmodule.exports = _inheritsLoose, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;","function _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n \"default\": obj\n };\n}\nmodule.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;","function _setPrototypeOf(o, p) {\n module.exports = _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n }, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;\n return _setPrototypeOf(o, p);\n}\nmodule.exports = _setPrototypeOf, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;","'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nconst PartytownSnippet = \"/* Partytown 0.7.6 - MIT builder.io */\\n!function(t,e,n,i,r,o,a,d,s,c,p,l){function u(){l||(l=1,\\\"/\\\"==(a=(o.lib||\\\"/~partytown/\\\")+(o.debug?\\\"debug/\\\":\\\"\\\"))[0]&&(s=e.querySelectorAll('script[type=\\\"text/partytown\\\"]'),i!=t?i.dispatchEvent(new CustomEvent(\\\"pt1\\\",{detail:t})):(d=setTimeout(f,1e4),e.addEventListener(\\\"pt0\\\",w),r?h(1):n.serviceWorker?n.serviceWorker.register(a+(o.swPath||\\\"partytown-sw.js\\\"),{scope:a}).then((function(t){t.active?h():t.installing&&t.installing.addEventListener(\\\"statechange\\\",(function(t){\\\"activated\\\"==t.target.state&&h()}))}),console.error):f())))}function h(t){c=e.createElement(t?\\\"script\\\":\\\"iframe\\\"),t||(c.setAttribute(\\\"style\\\",\\\"display:block;width:0;height:0;border:0;visibility:hidden\\\"),c.setAttribute(\\\"aria-hidden\\\",!0)),c.src=a+\\\"partytown-\\\"+(t?\\\"atomics.js?v=0.7.6\\\":\\\"sandbox-sw.html?\\\"+Date.now()),e.body.appendChild(c)}function f(n,r){for(w(),i==t&&(o.forward||[]).map((function(e){delete t[e.split(\\\".\\\")[0]]})),n=0;n {\n const { forward = [], ...filteredConfig } = config || {};\n const configStr = JSON.stringify(filteredConfig, (k, v) => {\n if (typeof v === 'function') {\n v = String(v);\n if (v.startsWith(k + '(')) {\n v = 'function ' + v;\n }\n }\n return v;\n });\n return [\n `!(function(w,p,f,c){`,\n Object.keys(filteredConfig).length > 0\n ? `c=w[p]=Object.assign(w[p]||{},${configStr});`\n : `c=w[p]=w[p]||{};`,\n `c[f]=(c[f]||[])`,\n forward.length > 0 ? `.concat(${JSON.stringify(forward)})` : ``,\n `})(window,'partytown','forward');`,\n snippetCode,\n ].join('');\n};\n\n/**\n * The `type` attribute for Partytown scripts, which does two things:\n *\n * 1. Prevents the `
Loading (StaticQuery)
}\n \n This website is made by BBC Studios Distribution. BBC Studios is a commercial company that is owned by the BBC (and just the BBC). No money from the licence fee was used to create this website. The profits we make from it go back to BBC programme-makers to help fund great new BBC programmes.
\nBBC is a trademark of the British Broadcasting Corporation. Logos © 1996. Terms & Conditions | Privacy Policy | Important Notice About Cookies | BBC Studios
\n