@sanity/assist 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,2341 @@
+var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{useClient,typed,useSchema,useDocumentStore,useDocumentPresence,createPatchChannel,FormBuilder,fromMutationPatches,pathToString,isObjectSchemaType,useEditState,useCurrentUser,useValidationStatus,StatusButton,FormFieldHeaderText,PatchEvent,unset,PresenceOverlay,VirtualizerScrollInstanceProvider,stringToPath,isKeySegment,useColorSchemeValue,isArraySchemaType,useFormCallbacks,set,setIfMissing,insert,FormCallbacksProvider,FormInput,ObjectInputMember,defineType,defineField,defineArrayMember,getPublishedId,definePlugin}from'sanity';import{Card,Stack,Box,Button,Spinner,Flex,Label,focusFirstDescendant,Text,useClickOutside,Popover,useLayer,useGlobalKeyDown,useToast,Dialog,Tooltip,TextArea,Container,Badge,useTheme,rgba as rgba$1,ThemeProvider,ErrorBoundary,Switch,MenuButton,Menu,MenuItem,Breadcrumbs,Autocomplete}from'@sanity/ui';import*as React from'react';import React__default,{useState,useRef,useEffect,useMemo,useCallback,createContext,useContext,createElement,useReducer,forwardRef,useId,useLayoutEffect,useInsertionEffect}from'react';import{SyncIcon,DocumentIcon,LinkIcon,ImageIcon,BlockContentIcon,OlistIcon,BlockquoteIcon,StringIcon,ErrorOutlineIcon,CheckmarkCircleIcon,CloseCircleIcon,ClockIcon,PlayIcon,SparklesIcon,RetryIcon,ArrowRightIcon,CloseIcon,CheckmarkIcon,ArrowLeftIcon,icons,SearchIcon,TokenIcon,DocumentTextIcon,ThListIcon,CodeIcon,ComposeIcon,LockIcon,ControlsIcon}from'@sanity/icons';import{mergeMap,share,take,filter as filter$1,distinctUntilChanged,catchError,tap}from'rxjs/operators';import isEqual from'react-fast-compare';import{throwError,of,partition,merge,switchMap,delay as delay$1,defer}from'rxjs';import{exhaustMapToWithTrailing}from'rxjs-exhaustmap-with-trailing';import{useDocumentPane,usePaneRouter,DocumentInspectorHeader,DocumentPaneProvider}from'sanity/desk';const assistDocumentIdPrefix="sanity.assist.schemaType.";const assistDocumentStatusIdPrefix="sanity.assist.status.";const assistSchemaIdPrefix="sanity.assist.schema.";const assistDocumentTypeName="sanity.assist.schemaType.annotations";const assistFieldTypeName="sanity.assist.schemaType.field";const instructionTypeName="sanity.assist.instruction";const promptTypeName="sanity.assist.instruction.prompt";const userInputTypeName="sanity.assist.instruction.userInput";const instructionContextTypeName="sanity.assist.instruction.context";const fieldReferenceTypeName="sanity.assist.instruction.fieldRef";const contextDocumentTypeName="assist.instruction.context";const assistTasksStatusTypeName="sanity.assist.task.status";const instructionTaskTypeName="sanity.assist.instructionTask";const fieldPresenceTypeName="sanity.assist.instructionTask.presence";const assistSerializedTypeName="sanity.assist.serialized.type";const assistSerializedFieldTypeName="sanity.assist.serialized.field";const fieldPathParam="pathKey";const instructionParam="instruction";const documentRootKey="<document>";const fetch=(client,query,params,options)=>defer(()=>// getVersionedClient(options.apiVersion)
+client.observable.fetch(query,params,{tag:options.tag,filterResponse:true}));const listen=(client,query,params,options)=>defer(()=>// getVersionedClient(options.apiVersion)
+client.listen(query,params,{events:["welcome","mutation","reconnect"],includeResult:false,visibility:"query",tag:options.tag}));function isWelcomeEvent(event){return event.type==="welcome";}const listenQuery=function(client,query){let params=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};let options=arguments.length>3&&arguments[3]!==undefined?arguments[3]:{};const fetchQuery=typeof query==="string"?query:query.fetch;const listenerQuery=typeof query==="string"?query:query.listen;const fetchOnce$=fetch(client,fetchQuery,params,options);const events$=listen(client,listenerQuery,params,options).pipe(mergeMap((ev,i)=>{const isFirst=i===0;if(isFirst&&!isWelcomeEvent(ev)){return throwError(new Error(ev.type==="reconnect"?"Could not establish EventSource connection":"Received unexpected type of first event \"".concat(ev.type,"\"")));}return of(ev);}),share());const[welcome$,mutationAndReconnect$]=partition(events$,isWelcomeEvent);const isRelevantEvent=event=>{if(!options.transitions||event.type!=="mutation"){return true;}return options.transitions.includes(event.transition);};return merge(welcome$.pipe(take(1)),mutationAndReconnect$.pipe(filter$1(isRelevantEvent),switchMap(event=>merge(of(event),of(event).pipe(delay$1(options.throttleTime||1e3)))))).pipe(exhaustMapToWithTrailing(fetchOnce$));};const DEFAULT_PARAMS={};const DEFAULT_OPTIONS={apiVersion:"v2022-05-09"};function useListeningQuery(query){let params=arguments.length>1&&arguments[1]!==undefined?arguments[1]:DEFAULT_PARAMS;let options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:DEFAULT_OPTIONS;const[loading,setLoading]=useState(true);const[error,setError]=useState(false);const[data,setData]=useState(null);const subscription=useRef(null);const client=useClient({apiVersion:"v2022-05-09"});useEffect(()=>{if(query){subscription.current=listenQuery(client,query,params,options).pipe(distinctUntilChanged(isEqual),catchError(err=>{console.error(err);setError(err);setLoading(false);setData(null);return err;})).subscribe(documents=>{setData(current=>isEqual(current,documents)?current:documents);setLoading(false);setError(false);});}return()=>{return subscription.current?subscription.current.unsubscribe():void 0;};},[query,params,options,client]);return{loading,error,data};}const hiddenTypes=["any","array","block","boolean","crossDatasetReference","date","datetime","document","email","file","image","number","object","reference","span","string","text","url","slug","geopoint","sanity.assetSourceData","sanity.imageAsset","sanity.fileAsset","sanity.imageCrop","sanity.imageHotspot","sanity.imageMetadata","sanity.imageDimensions","sanity.imagePalette","sanity.imagePaletteSwatch",assistSerializedTypeName,assistSerializedFieldTypeName,"sanity-agent.job.document"];function isPortableTextArray(type){return type.of.find(t=>isType(t,"block"));}function isType(schemaType,typeName){if(schemaType.name===typeName){return true;}if(!schemaType.type){return false;}return isType(schemaType.type,typeName);}function isSchemaAssistEnabled(type){var _a,_b;return!((_b=(_a=type.options)==null?void 0:_a.aiWritingAssistance)==null?void 0:_b.exclude);}function isAssistSupported(type){if(!isSchemaAssistEnabled(type)){return false;}if(isUnsupportedType(type)){return false;}if(type.jsonType==="array"){const unsupportedArray=type.of.every(t=>isUnsupportedType(t));return!unsupportedArray;}if(type.jsonType==="object"){const unsupportedObject=type.fields.every(field=>isUnsupportedType(field.type));return!unsupportedObject;}return true;}function isUnsupportedType(type){return!isSchemaAssistEnabled(type)||type.jsonType==="number"||type.name==="sanity.imageCrop"||type.name==="sanity.imageHotspot"||isType(type,"reference")||isType(type,"crossDatasetReference")||isType(type,"slug")||isType(type,"url")||isType(type,"date")||isType(type,"datetime")||isType(type,"file");}const inlineTypes=["document","object","image","file"];function serializeSchema(schema,options){const list=schema.getTypeNames().filter(t=>!(hiddenTypes.includes(t)||t.startsWith("sanity."))).map(t=>schema.get(t)).filter(t=>!!t).map(t=>getSchemaStub(t,schema,options)).filter(t=>{if("to"in t&&t.to&&!t.to.length){return false;}if("of"in t&&t.of&&!t.of.length){return false;}if("fields"in t&&t.fields&&!t.fields.length){return false;}return true;});list.sort((a,b)=>{var _a,_b;return((_a=a==null?void 0:a.name)!=null?_a:"").localeCompare((_b=b==null?void 0:b.name)!=null?_b:"");});return list;}function getSchemaStub(schemaType,schema,options){var _a;if(!((_a=schemaType.type)==null?void 0:_a.name)){console.error("Missing type name",schemaType.type);throw new Error("Type is missing name!");}const baseSchema={// we dont need type or id when we send using POST, so leave these out to save bandwidth
+...((options==null?void 0:options.leanFormat)?{}:{_id:"".concat(assistSchemaIdPrefix).concat(schemaType.name),_type:assistSerializedTypeName}),name:schemaType.name,title:schemaType.title,type:schemaType.type.name,...getBaseFields(schema,schemaType,schemaType.type.name,options)};return removeUndef(baseSchema);}function getBaseFields(schema,type,typeName,options){var _a,_b,_c;const imagePromptField=(_a=type.options)==null?void 0:_a.imagePromptField;return removeUndef({options:imagePromptField?{imagePromptField}:void 0,values:type.jsonType==="string"&&((_b=type==null?void 0:type.options)==null?void 0:_b.list)?(_c=type==null?void 0:type.options)==null?void 0:_c.list.map(v=>{var _a2;return typeof v==="string"?v:(_a2=v.value)!=null?_a2:"".concat(v.title);}):void 0,of:"of"in type&&typeName==="array"?arrayOf(type,schema,options):void 0,to:"to"in type&&typeName==="reference"?refToTypeNames(type):void 0,fields:"fields"in type&&inlineTypes.includes(typeName)?serializeFields(schema,type,options):void 0});}function serializeFields(schema,schemaType,options){return schemaType.fields.filter(f=>{var _a,_b;return!["sanity.imageHotspot","sanity.imageCrop"].includes((_b=(_a=f.type)==null?void 0:_a.name)!=null?_b:"");}).filter(f=>isAssistSupported(f.type)).map(field=>serializeMember(schema,field.type,field.name,options));}function serializeMember(schema,type,name,options){var _a,_b,_c,_d;const typeNameExists=!!schema.get(type==null?void 0:type.name);const typeName=typeNameExists?type.name:(_b=(_a=type.type)==null?void 0:_a.name)!=null?_b:"";return removeUndef({...((options==null?void 0:options.leanFormat)?{}:{_type:assistSerializedFieldTypeName}),name,type:typeName,title:type.title,values:type.jsonType==="string"&&((_c=type==null?void 0:type.options)==null?void 0:_c.list)?(_d=type==null?void 0:type.options)==null?void 0:_d.list.map(v=>{var _a2;return typeof v==="string"?v:(_a2=v.value)!=null?_a2:"".concat(v.title);}):void 0,of:"of"in type&&type.name==="array"?arrayOf(type,schema,options):void 0,to:"to"in type&&type.name==="reference"?refToTypeNames(type):void 0,fields:"fields"in type&&inlineTypes.includes(typeName)?serializeFields(schema,type,options):void 0});}function arrayOf(arrayType,schema,options){return arrayType.of.filter(type=>isAssistSupported(type)).map(t=>{return serializeMember(schema,t,t.name,options);});}function refToTypeNames(type){return type.to.map(t=>({type:typed(t.name)}));}function removeUndef(obj){Object.keys(obj).forEach(key=>obj[key]===void 0?delete obj[key]:{});return obj;}const NO_DATA=[];const defaultTitle="Sync schema";function SchemaTypeTool(){const schema=useSchema();const client=useClient({apiVersion:"2023-01-01"});const[saving,setSaving]=useState(false);const[syncTitle,setSyncTitle]=useState(defaultTitle);const{data}=useListeningQuery("*[_type==$type] | order(_type)",{type:assistSerializedTypeName});const types=useMemo(()=>{return serializeSchema(schema);},[schema]);const storeTypes=useCallback(()=>{setSaving(true);let canSave=true;async function store(){setSyncTitle("Syncing 0/".concat(types.length));const transaction=client.transaction();for(let i=0;i<types.length;i++){if(!canSave){break;}const type=types[i];await transaction.createOrReplace(type);if(i>0&&i%50===0){await transaction.commit();transaction.reset();setSyncTitle("Syncing ".concat(i,"/").concat(types.length));}}await transaction.commit();}store().catch(console.error).finally(()=>{setSaving(false);setSyncTitle(defaultTitle);});return()=>{canSave=false;setSaving(false);setSyncTitle(defaultTitle);};},[types,client,setSaving,setSyncTitle]);return/* @__PURE__ */jsx(Card,{padding:4,overflow:"auto",style:{height:"calc(100vh - 81px)"},children:/* @__PURE__ */jsxs(Stack,{space:4,children:[/* @__PURE__ */jsx(Box,{children:/* @__PURE__ */jsx(Button,{icon:saving?/* @__PURE__ */jsx(Spinner,{style:{marginTop:5}}):SyncIcon,text:syncTitle,disabled:saving,onClick:storeTypes})}),/* @__PURE__ */jsxs(Flex,{gap:2,children:[/* @__PURE__ */jsxs(Stack,{space:2,children:[/* @__PURE__ */jsx(Label,{children:"Studio schema"}),/* @__PURE__ */jsx("ul",{children:types.map(type=>/* @__PURE__ */jsx("li",{children:/* @__PURE__ */jsx(SchemaEntry,{schemaStub:type})},type.name))})]}),/* @__PURE__ */jsxs(Stack,{space:2,children:[/* @__PURE__ */jsx(Label,{children:"Stored schema"}),/* @__PURE__ */jsx("ul",{children:(data!=null?data:NO_DATA).map(type=>/* @__PURE__ */jsx("li",{children:/* @__PURE__ */jsx(SchemaEntry,{schemaStub:type})},type.name))})]})]})]})});}function SchemaEntry(_ref2){let{schemaStub}=_ref2;const out=useMemo(()=>JSON.stringify(schemaStub,null,2),[schemaStub]);return/* @__PURE__ */jsx("pre",{children:out});}const aiInspectorId="ai-assistance";const preventDefault=ev=>ev.preventDefault();function DocumentForm(props){var _a;const{collapsedFieldSets,collapsedPaths,displayed:value,documentId,documentType,editState,formState,onBlur,onChange,onFocus,onPathOpen,onSetActiveFieldGroup,onSetCollapsedFieldSet,onSetCollapsedPath,ready,validation}=useDocumentPane();const documentStore=useDocumentStore();const presence=useDocumentPresence(documentId);const patchChannel=useMemo(()=>createPatchChannel(),[]);const isLocked=(_a=editState==null?void 0:editState.transactionSyncLock)==null?void 0:_a.enabled;useEffect(()=>{const sub=documentStore.pair.documentEvents(documentId,documentType).pipe(tap(event=>{if(event.type==="mutation"){patchChannel.publish(prepareMutationEvent(event));}if(event.type==="rebase"){patchChannel.publish(prepareRebaseEvent(event));}})).subscribe();return()=>{sub.unsubscribe();};},[documentId,documentStore,documentType,patchChannel]);const hasRev=Boolean(value==null?void 0:value._rev);useEffect(()=>{if(hasRev){patchChannel.publish({type:"mutation",patches:[],snapshot:value});}},[hasRev]);const formRef=useRef(null);useEffect(()=>{focusFirstDescendant(formRef.current);},[]);if(isLocked){return/* @__PURE__ */jsx(Box,{as:"form",...props,ref:formRef,children:/* @__PURE__ */jsx(Flex,{align:"center",direction:"column",height:"fill",justify:"center",padding:3,sizing:"border",children:/* @__PURE__ */jsx(Text,{size:1,children:"Please hold tight while the document is synced. This usually happens right after the document has been published, and it shouldn\u2019t take more than a few seconds"})})});}return/* @__PURE__ */jsx(Box,{as:"form",...props,onSubmit:preventDefault,ref:formRef,children:ready?formState===null?/* @__PURE__ */jsx(Flex,{align:"center",direction:"column",height:"fill",justify:"center",padding:3,sizing:"border",children:/* @__PURE__ */jsx(Text,{size:1,children:"This form is hidden"})}):/* @__PURE__ */jsx(FormBuilder,{__internal_patchChannel:patchChannel,collapsedFieldSets,collapsedPaths,focusPath:formState.focusPath,changed:formState.changed,focused:formState.focused,groups:formState.groups,id:"root",members:formState.members,onChange,onFieldGroupSelect:onSetActiveFieldGroup,onPathBlur:onBlur,onPathFocus:onFocus,onPathOpen,onSetFieldSetCollapsed:onSetCollapsedFieldSet,onSetPathCollapsed:onSetCollapsedPath,presence,readOnly:formState.readOnly,schemaType:formState.schemaType,validation,value:formState.value}):/* @__PURE__ */jsxs(Flex,{align:"center",direction:"column",height:"fill",justify:"center",padding:3,sizing:"border",children:[/* @__PURE__ */jsx(Spinner,{muted:true}),/* @__PURE__ */jsx(Box,{marginTop:3,children:/* @__PURE__ */jsx(Text,{align:"center",muted:true,size:1,children:"Loading document"})})]})});}function prepareMutationEvent(event){const patches=event.mutations.map(mut=>mut.patch).filter(Boolean);return{type:"mutation",snapshot:event.document,patches:fromMutationPatches(event.origin,patches)};}function prepareRebaseEvent(event){const remotePatches=event.remoteMutations.map(mut=>mut.patch).filter(Boolean);const localPatches=event.localMutations.map(mut=>mut.patch).filter(Boolean);return{type:"rebase",snapshot:event.document,patches:fromMutationPatches("remote",remotePatches).concat(fromMutationPatches("local",localPatches))};}const SelectedFieldContext=createContext(void 0);const SelectedFieldContextProvider=SelectedFieldContext.Provider;function getTypeIcon(schemaType){let t=schemaType;while(t){if(t.icon)return t.icon;t=t.type;}if(isType(schemaType,"slug"))return LinkIcon;if(isType(schemaType,"image"))return ImageIcon;if(schemaType.jsonType==="array"&&isPortableTextArray(schemaType))return BlockContentIcon;if(schemaType.jsonType==="array")return OlistIcon;if(schemaType.jsonType==="object")return BlockquoteIcon;if(schemaType.jsonType==="string")return StringIcon;return DocumentIcon;}function getFieldRefsWithDocument(schemaType){var _a;const fields=getFieldRefs(schemaType);return[{key:documentRootKey,icon:(_a=schemaType.icon)!=null?_a:DocumentIcon,title:"The entire document",path:[],schemaType},...fields];}function getFieldRefs(schemaType,parent){return schemaType.fields.filter(f=>!f.name.startsWith("_")).flatMap(field=>{var _a;const path=parent?[...parent.path,field.name]:[field.name];const title=(_a=field.type.title)!=null?_a:field.name;const fieldRef={key:pathToString(path),path,title:parent?[parent.title,title].join(" / "):title,schemaType:field.type,icon:getTypeIcon(field.type)};const fields=field.type.jsonType==="object"?getFieldRefs(field.type,fieldRef):[];if(!isAssistSupported(field.type)){return fields;}return[fieldRef,...fields];});}function useSelectedField(documentSchemaType,path){const selectableFields=useMemo(()=>documentSchemaType&&isObjectSchemaType(documentSchemaType)?getFieldRefsWithDocument(documentSchemaType):[],[documentSchemaType]);return useMemo(()=>{return path?selectableFields==null?void 0:selectableFields.find(f=>f.key===path):void 0;},[selectableFields,path]);}function getFieldTitle(field){var _a,_b;const schemaType=field==null?void 0:field.schemaType;return(_b=(_a=schemaType==null?void 0:schemaType.title)!=null?_a:schemaType==null?void 0:schemaType.name)!=null?_b:"Untitled";}function useAiPaneRouter(){const paneRouter=usePaneRouter();return useMemo(()=>{var _a;return{...paneRouter,params:(_a=paneRouter.params)!=null?_a:{}};},[paneRouter]);}function getDefaultExportFromCjs(x){return x&&x.__esModule&&Object.prototype.hasOwnProperty.call(x,'default')?x['default']:x;}var reactIs$2={exports:{}};var reactIs_production_min$1={};/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var hasRequiredReactIs_production_min$1;function requireReactIs_production_min$1(){if(hasRequiredReactIs_production_min$1)return reactIs_production_min$1;hasRequiredReactIs_production_min$1=1;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");function 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;}}}reactIs_production_min$1.ContextConsumer=h;reactIs_production_min$1.ContextProvider=g;reactIs_production_min$1.Element=b;reactIs_production_min$1.ForwardRef=l;reactIs_production_min$1.Fragment=d;reactIs_production_min$1.Lazy=q;reactIs_production_min$1.Memo=p;reactIs_production_min$1.Portal=c;reactIs_production_min$1.Profiler=f;reactIs_production_min$1.StrictMode=e;reactIs_production_min$1.Suspense=m;reactIs_production_min$1.SuspenseList=n;reactIs_production_min$1.isAsyncMode=function(){return!1;};reactIs_production_min$1.isConcurrentMode=function(){return!1;};reactIs_production_min$1.isContextConsumer=function(a){return v(a)===h;};reactIs_production_min$1.isContextProvider=function(a){return v(a)===g;};reactIs_production_min$1.isElement=function(a){return"object"===typeof a&&null!==a&&a.$$typeof===b;};reactIs_production_min$1.isForwardRef=function(a){return v(a)===l;};reactIs_production_min$1.isFragment=function(a){return v(a)===d;};reactIs_production_min$1.isLazy=function(a){return v(a)===q;};reactIs_production_min$1.isMemo=function(a){return v(a)===p;};reactIs_production_min$1.isPortal=function(a){return v(a)===c;};reactIs_production_min$1.isProfiler=function(a){return v(a)===f;};reactIs_production_min$1.isStrictMode=function(a){return v(a)===e;};reactIs_production_min$1.isSuspense=function(a){return v(a)===m;};reactIs_production_min$1.isSuspenseList=function(a){return v(a)===n;};reactIs_production_min$1.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;};reactIs_production_min$1.typeOf=v;return reactIs_production_min$1;}var reactIs_development$1={};/**
+ * @license React
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var hasRequiredReactIs_development$1;function requireReactIs_development$1(){if(hasRequiredReactIs_development$1)return reactIs_development$1;hasRequiredReactIs_development$1=1;if(process.env.NODE_ENV!=="production"){(function(){// ATTENTION
+// When adding new symbols to this file,
+// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+// The Symbol used to tag the ReactElement-like types.
+var REACT_ELEMENT_TYPE=Symbol.for('react.element');var REACT_PORTAL_TYPE=Symbol.for('react.portal');var REACT_FRAGMENT_TYPE=Symbol.for('react.fragment');var REACT_STRICT_MODE_TYPE=Symbol.for('react.strict_mode');var REACT_PROFILER_TYPE=Symbol.for('react.profiler');var REACT_PROVIDER_TYPE=Symbol.for('react.provider');var REACT_CONTEXT_TYPE=Symbol.for('react.context');var REACT_SERVER_CONTEXT_TYPE=Symbol.for('react.server_context');var REACT_FORWARD_REF_TYPE=Symbol.for('react.forward_ref');var REACT_SUSPENSE_TYPE=Symbol.for('react.suspense');var REACT_SUSPENSE_LIST_TYPE=Symbol.for('react.suspense_list');var REACT_MEMO_TYPE=Symbol.for('react.memo');var REACT_LAZY_TYPE=Symbol.for('react.lazy');var REACT_OFFSCREEN_TYPE=Symbol.for('react.offscreen');// -----------------------------------------------------------------------------
+var enableScopeAPI=false;// Experimental Create Event Handle API.
+var enableCacheElement=false;var enableTransitionTracing=false;// No known bugs, but needs performance testing
+var enableLegacyHidden=false;// Enables unstable_avoidThisFallback feature in Fiber
+// stuff. Intended to enable React core members to more easily debug scheduling
+// issues in DEV builds.
+var enableDebugTracing=false;// Track which Fiber(s) schedule render work.
+var REACT_MODULE_REFERENCE;{REACT_MODULE_REFERENCE=Symbol.for('react.module.reference');}function isValidElementType(type){if(typeof type==='string'||typeof type==='function'){return true;}// Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+if(type===REACT_FRAGMENT_TYPE||type===REACT_PROFILER_TYPE||enableDebugTracing||type===REACT_STRICT_MODE_TYPE||type===REACT_SUSPENSE_TYPE||type===REACT_SUSPENSE_LIST_TYPE||enableLegacyHidden||type===REACT_OFFSCREEN_TYPE||enableScopeAPI||enableCacheElement||enableTransitionTracing){return true;}if(typeof type==='object'&&type!==null){if(type.$$typeof===REACT_LAZY_TYPE||type.$$typeof===REACT_MEMO_TYPE||type.$$typeof===REACT_PROVIDER_TYPE||type.$$typeof===REACT_CONTEXT_TYPE||type.$$typeof===REACT_FORWARD_REF_TYPE||// This needs to include all possible module reference object
+// types supported by any Flight configuration anywhere since
+// we don't know which Flight build this will end up being used
+// with.
+type.$$typeof===REACT_MODULE_REFERENCE||type.getModuleId!==undefined){return true;}}return false;}function typeOf(object){if(typeof object==='object'&&object!==null){var $$typeof=object.$$typeof;switch($$typeof){case REACT_ELEMENT_TYPE:var type=object.type;switch(type){case REACT_FRAGMENT_TYPE:case REACT_PROFILER_TYPE:case REACT_STRICT_MODE_TYPE:case REACT_SUSPENSE_TYPE:case REACT_SUSPENSE_LIST_TYPE:return type;default:var $$typeofType=type&&type.$$typeof;switch($$typeofType){case REACT_SERVER_CONTEXT_TYPE:case REACT_CONTEXT_TYPE:case REACT_FORWARD_REF_TYPE:case REACT_LAZY_TYPE:case REACT_MEMO_TYPE:case REACT_PROVIDER_TYPE:return $$typeofType;default:return $$typeof;}}case REACT_PORTAL_TYPE:return $$typeof;}}return undefined;}var ContextConsumer=REACT_CONTEXT_TYPE;var ContextProvider=REACT_PROVIDER_TYPE;var Element=REACT_ELEMENT_TYPE;var ForwardRef=REACT_FORWARD_REF_TYPE;var Fragment=REACT_FRAGMENT_TYPE;var Lazy=REACT_LAZY_TYPE;var Memo=REACT_MEMO_TYPE;var Portal=REACT_PORTAL_TYPE;var Profiler=REACT_PROFILER_TYPE;var StrictMode=REACT_STRICT_MODE_TYPE;var Suspense=REACT_SUSPENSE_TYPE;var SuspenseList=REACT_SUSPENSE_LIST_TYPE;var hasWarnedAboutDeprecatedIsAsyncMode=false;var hasWarnedAboutDeprecatedIsConcurrentMode=false;// AsyncMode should be deprecated
+function isAsyncMode(object){{if(!hasWarnedAboutDeprecatedIsAsyncMode){hasWarnedAboutDeprecatedIsAsyncMode=true;// Using console['warn'] to evade Babel and ESLint
+console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, '+'and will be removed in React 18+.');}}return false;}function isConcurrentMode(object){{if(!hasWarnedAboutDeprecatedIsConcurrentMode){hasWarnedAboutDeprecatedIsConcurrentMode=true;// Using console['warn'] to evade Babel and ESLint
+console['warn']('The ReactIs.isConcurrentMode() alias has been deprecated, '+'and will be removed in React 18+.');}}return false;}function isContextConsumer(object){return typeOf(object)===REACT_CONTEXT_TYPE;}function isContextProvider(object){return typeOf(object)===REACT_PROVIDER_TYPE;}function isElement(object){return typeof object==='object'&&object!==null&&object.$$typeof===REACT_ELEMENT_TYPE;}function isForwardRef(object){return typeOf(object)===REACT_FORWARD_REF_TYPE;}function isFragment(object){return typeOf(object)===REACT_FRAGMENT_TYPE;}function isLazy(object){return typeOf(object)===REACT_LAZY_TYPE;}function isMemo(object){return typeOf(object)===REACT_MEMO_TYPE;}function isPortal(object){return typeOf(object)===REACT_PORTAL_TYPE;}function isProfiler(object){return typeOf(object)===REACT_PROFILER_TYPE;}function isStrictMode(object){return typeOf(object)===REACT_STRICT_MODE_TYPE;}function isSuspense(object){return typeOf(object)===REACT_SUSPENSE_TYPE;}function isSuspenseList(object){return typeOf(object)===REACT_SUSPENSE_LIST_TYPE;}reactIs_development$1.ContextConsumer=ContextConsumer;reactIs_development$1.ContextProvider=ContextProvider;reactIs_development$1.Element=Element;reactIs_development$1.ForwardRef=ForwardRef;reactIs_development$1.Fragment=Fragment;reactIs_development$1.Lazy=Lazy;reactIs_development$1.Memo=Memo;reactIs_development$1.Portal=Portal;reactIs_development$1.Profiler=Profiler;reactIs_development$1.StrictMode=StrictMode;reactIs_development$1.Suspense=Suspense;reactIs_development$1.SuspenseList=SuspenseList;reactIs_development$1.isAsyncMode=isAsyncMode;reactIs_development$1.isConcurrentMode=isConcurrentMode;reactIs_development$1.isContextConsumer=isContextConsumer;reactIs_development$1.isContextProvider=isContextProvider;reactIs_development$1.isElement=isElement;reactIs_development$1.isForwardRef=isForwardRef;reactIs_development$1.isFragment=isFragment;reactIs_development$1.isLazy=isLazy;reactIs_development$1.isMemo=isMemo;reactIs_development$1.isPortal=isPortal;reactIs_development$1.isProfiler=isProfiler;reactIs_development$1.isStrictMode=isStrictMode;reactIs_development$1.isSuspense=isSuspense;reactIs_development$1.isSuspenseList=isSuspenseList;reactIs_development$1.isValidElementType=isValidElementType;reactIs_development$1.typeOf=typeOf;})();}return reactIs_development$1;}if(process.env.NODE_ENV==='production'){reactIs$2.exports=requireReactIs_production_min$1();}else{reactIs$2.exports=requireReactIs_development$1();}var reactIsExports$1=reactIs$2.exports;function stylis_min(W){function M(d,c,e,h,a){for(var m=0,b=0,v=0,n=0,q,g,x=0,K=0,k,u=k=q=0,l=0,r=0,I=0,t=0,B=e.length,J=B-1,y,f='',p='',F='',G='',C;l<B;){g=e.charCodeAt(l);l===J&&0!==b+n+v+m&&(0!==b&&(g=47===b?10:47),n=v=m=0,B++,J++);if(0===b+n+v+m){if(l===J&&(0<r&&(f=f.replace(N,'')),0<f.trim().length)){switch(g){case 32:case 9:case 59:case 13:case 10:break;default:f+=e.charAt(l);}g=59;}switch(g){case 123:f=f.trim();q=f.charCodeAt(0);k=1;for(t=++l;l<B;){switch(g=e.charCodeAt(l)){case 123:k++;break;case 125:k--;break;case 47:switch(g=e.charCodeAt(l+1)){case 42:case 47:a:{for(u=l+1;u<J;++u){switch(e.charCodeAt(u)){case 47:if(42===g&&42===e.charCodeAt(u-1)&&l+2!==u){l=u+1;break a;}break;case 10:if(47===g){l=u+1;break a;}}}l=u;}}break;case 91:g++;case 40:g++;case 34:case 39:for(;l++<J&&e.charCodeAt(l)!==g;){}}if(0===k)break;l++;}k=e.substring(t,l);0===q&&(q=(f=f.replace(ca,'').trim()).charCodeAt(0));switch(q){case 64:0<r&&(f=f.replace(N,''));g=f.charCodeAt(1);switch(g){case 100:case 109:case 115:case 45:r=c;break;default:r=O;}k=M(c,r,k,g,a+1);t=k.length;0<A&&(r=X(O,f,I),C=H(3,k,r,c,D,z,t,g,a,h),f=r.join(''),void 0!==C&&0===(t=(k=C.trim()).length)&&(g=0,k=''));if(0<t)switch(g){case 115:f=f.replace(da,ea);case 100:case 109:case 45:k=f+'{'+k+'}';break;case 107:f=f.replace(fa,'$1 $2');k=f+'{'+k+'}';k=1===w||2===w&&L('@'+k,3)?'@-webkit-'+k+'@'+k:'@'+k;break;default:k=f+k,112===h&&(k=(p+=k,''));}else k='';break;default:k=M(c,X(c,f,I),k,h,a+1);}F+=k;k=I=r=u=q=0;f='';g=e.charCodeAt(++l);break;case 125:case 59:f=(0<r?f.replace(N,''):f).trim();if(1<(t=f.length))switch(0===u&&(q=f.charCodeAt(0),45===q||96<q&&123>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){case 0:break;case 64:if(105===g||99===g){G+=f+e.charAt(l);break;}default:58!==f.charCodeAt(t-1)&&(p+=P(f,q,g,f.charCodeAt(2)));}I=r=u=q=0;f='';g=e.charCodeAt(++l);}}switch(g){case 13:case 10:47===b?b=0:0===1+q&&107!==h&&0<f.length&&(r=1,f+='\x00');0<A*Y&&H(0,f,c,d,D,z,p.length,h,a,h);z=1;D++;break;case 59:case 125:if(0===b+n+v+m){z++;break;}default:z++;y=e.charAt(l);switch(g){case 9:case 32:if(0===n+m+b)switch(x){case 44:case 58:case 9:case 32:y='';break;default:32!==g&&(y=' ');}break;case 0:y='\\0';break;case 12:y='\\f';break;case 11:y='\\v';break;case 38:0===n+b+m&&(r=I=1,y='\f'+y);break;case 108:if(0===n+b+m+E&&0<u)switch(l-u){case 2:112===x&&58===e.charCodeAt(l-3)&&(E=x);case 8:111===K&&(E=K);}break;case 58:0===n+b+m&&(u=l);break;case 44:0===b+v+n+m&&(r=1,y+='\r');break;case 34:case 39:0===b&&(n=n===g?0:0===n?g:n);break;case 91:0===n+b+v&&m++;break;case 93:0===n+b+v&&m--;break;case 41:0===n+b+m&&v--;break;case 40:if(0===n+b+m){if(0===q)switch(2*x+3*K){case 533:break;default:q=1;}v++;}break;case 64:0===b+v+n+m+u+k&&(k=1);break;case 42:case 47:if(!(0<n+m+v))switch(b){case 0:switch(2*g+3*e.charCodeAt(l+1)){case 235:b=47;break;case 220:t=l,b=42;}break;case 42:47===g&&42===x&&t+2!==l&&(33===e.charCodeAt(t+2)&&(p+=e.substring(t,l+1)),y='',b=0);}}0===b&&(f+=y);}K=x;x=g;l++;}t=p.length;if(0<t){r=c;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;p=r.join(',')+'{'+p+'}';if(0!==w*E){2!==w||L(p,2)||(E=0);switch(E){case 111:p=p.replace(ha,':-moz-$1')+p;break;case 112:p=p.replace(Q,'::-webkit-input-$1')+p.replace(Q,'::-moz-$1')+p.replace(Q,':-ms-input-$1')+p;}E=0;}}return G+p+F;}function X(d,c,e){var h=c.trim().split(ia);c=h;var a=h.length,m=d.length;switch(m){case 0:case 1:var b=0;for(d=0===m?'':d[0]+' ';b<a;++b){c[b]=Z(d,c[b],e).trim();}break;default:var v=b=0;for(c=[];b<a;++b){for(var n=0;n<m;++n){c[v++]=Z(d[n]+' ',h[b],e).trim();}}}return c;}function Z(d,c,e){var h=c.charCodeAt(0);33>h&&(h=(c=c.trim()).charCodeAt(0));switch(h){case 38:return c.replace(F,'$1'+d.trim());case 58:return d.trim()+c.replace(F,'$1'+d.trim());default:if(0<1*e&&0<c.indexOf('\f'))return c.replace(F,(58===d.charCodeAt(0)?'':'$1')+d.trim());}return d+c;}function P(d,c,e,h){var a=d+';',m=2*c+3*e+4*h;if(944===m){d=a.indexOf(':',9)+1;var b=a.substring(d,a.length-1).trim();b=a.substring(0,d).trim()+b+';';return 1===w||2===w&&L(b,1)?'-webkit-'+b+b:b;}if(0===w||2===w&&!L(a,1))return a;switch(m){case 1015:return 97===a.charCodeAt(10)?'-webkit-'+a+a:a;case 951:return 116===a.charCodeAt(3)?'-webkit-'+a+a:a;case 963:return 110===a.charCodeAt(5)?'-webkit-'+a+a:a;case 1009:if(100!==a.charCodeAt(4))break;case 969:case 942:return'-webkit-'+a+a;case 978:return'-webkit-'+a+'-moz-'+a+a;case 1019:case 983:return'-webkit-'+a+'-moz-'+a+'-ms-'+a+a;case 883:if(45===a.charCodeAt(8))return'-webkit-'+a+a;if(0<a.indexOf('image-set(',11))return a.replace(ja,'$1-webkit-$2')+a;break;case 932:if(45===a.charCodeAt(4))switch(a.charCodeAt(5)){case 103:return'-webkit-box-'+a.replace('-grow','')+'-webkit-'+a+'-ms-'+a.replace('grow','positive')+a;case 115:return'-webkit-'+a+'-ms-'+a.replace('shrink','negative')+a;case 98:return'-webkit-'+a+'-ms-'+a.replace('basis','preferred-size')+a;}return'-webkit-'+a+'-ms-'+a+a;case 964:return'-webkit-'+a+'-ms-flex-'+a+a;case 1023:if(99!==a.charCodeAt(8))break;b=a.substring(a.indexOf(':',15)).replace('flex-','').replace('space-between','justify');return'-webkit-box-pack'+b+'-webkit-'+a+'-ms-flex-pack'+b+a;case 1005:return ka.test(a)?a.replace(aa,':-webkit-')+a.replace(aa,':-moz-')+a:a;case 1e3:b=a.substring(13).trim();c=b.indexOf('-')+1;switch(b.charCodeAt(0)+b.charCodeAt(c)){case 226:b=a.replace(G,'tb');break;case 232:b=a.replace(G,'tb-rl');break;case 220:b=a.replace(G,'lr');break;default:return a;}return'-webkit-'+a+'-ms-'+b+a;case 1017:if(-1===a.indexOf('sticky',9))break;case 975:c=(a=d).length-10;b=(33===a.charCodeAt(c)?a.substring(0,c):a).substring(d.indexOf(':',7)+1).trim();switch(m=b.charCodeAt(0)+(b.charCodeAt(7)|0)){case 203:if(111>b.charCodeAt(8))break;case 115:a=a.replace(b,'-webkit-'+b)+';'+a;break;case 207:case 102:a=a.replace(b,'-webkit-'+(102<m?'inline-':'')+'box')+';'+a.replace(b,'-webkit-'+b)+';'+a.replace(b,'-ms-'+b+'box')+';'+a;}return a+';';case 938:if(45===a.charCodeAt(5))switch(a.charCodeAt(6)){case 105:return b=a.replace('-items',''),'-webkit-'+a+'-webkit-box-'+b+'-ms-flex-'+b+a;case 115:return'-webkit-'+a+'-ms-flex-item-'+a.replace(ba,'')+a;default:return'-webkit-'+a+'-ms-flex-line-pack'+a.replace('align-content','').replace(ba,'')+a;}break;case 973:case 989:if(45!==a.charCodeAt(3)||122===a.charCodeAt(4))break;case 931:case 953: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;break;case 962: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;}return a;}function L(d,c){var e=d.indexOf(1===c?':':'{'),h=d.substring(0,3!==c?e:10);e=d.substring(e+1,d.length-1);return R(2!==c?h:h.replace(na,'$1'),e,c);}function ea(d,c){var e=P(c,c.charCodeAt(0),c.charCodeAt(1),c.charCodeAt(2));return e!==c+';'?e.replace(oa,' or ($1)').substring(4):'('+c+')';}function H(d,c,e,h,a,m,b,v,n,q){for(var g=0,x=c,w;g<A;++g){switch(w=S[g].call(B,d,x,e,h,a,m,b,v,n,q)){case void 0:case!1:case!0:case null:break;default:x=w;}}if(x!==c)return x;}function T(d){switch(d){case void 0:case null:A=S.length=0;break;default:if('function'===typeof d)S[A++]=d;else if('object'===typeof d)for(var c=0,e=d.length;c<e;++c){T(d[c]);}else Y=!!d|0;}return T;}function U(d){d=d.prefix;void 0!==d&&(R=null,d?'function'!==typeof d?w=1:(w=2,R=d):w=0);return U;}function B(d,c){var e=d;33>e.charCodeAt(0)&&(e=e.trim());V=e;e=[V];if(0<A){var h=H(-1,c,e,e,D,z,0,0,0,0);void 0!==h&&'string'===typeof h&&(c=h);}var a=M(O,e,c,0,0);0<A&&(h=H(-2,a,e,e,D,z,a.length,0,0,0),void 0!==h&&(a=h));V='';E=0;z=D=1;return a;}var ca=/^\0+/g,N=/[\0\r\f]/g,aa=/: */g,ka=/zoo|gra/,ma=/([,: ])(transform)/g,ia=/,\r+?/g,F=/([\t\r\n ])*\f?&/g,fa=/@(k\w+)\s*(\S*)\s*/,Q=/::(place)/g,ha=/:(read-only)/g,G=/[svh]\w+-[tblr]{2}/,da=/\(\s*(.*)\s*\)/g,oa=/([\s\S]*?);/g,ba=/-self|flex-/g,na=/[^]*?(:[rp][el]a[\w-]+)[^]*/,la=/stretch|:\s*\w+\-(?:conte|avail)/,ja=/([^-])(image-set\()/,z=1,D=1,E=0,w=1,O=[],S=[],A=0,R=null,Y=0,V='';B.use=T;B.set=U;void 0!==W&&U(W);return B;}var unitlessKeys={animationIterationCount:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,// SVG-related properties
+fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1};function memoize(fn){var cache=Object.create(null);return function(arg){if(cache[arg]===undefined)cache[arg]=fn(arg);return cache[arg];};}var 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
+var isPropValid=/* #__PURE__ */memoize(function(prop){return reactPropsRegex.test(prop)||prop.charCodeAt(0)===111/* o */&&prop.charCodeAt(1)===110/* n */&&prop.charCodeAt(2)<91;}/* Z+1 */);var reactIs$1={exports:{}};var reactIs_production_min={};/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var hasRequiredReactIs_production_min;function requireReactIs_production_min(){if(hasRequiredReactIs_production_min)return reactIs_production_min;hasRequiredReactIs_production_min=1;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?Symbol.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;function 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;}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l;};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k;};reactIs_production_min.isContextProvider=function(a){return z(a)===h;};reactIs_production_min.isElement=function(a){return"object"===typeof a&&null!==a&&a.$$typeof===c;};reactIs_production_min.isForwardRef=function(a){return z(a)===n;};reactIs_production_min.isFragment=function(a){return z(a)===e;};reactIs_production_min.isLazy=function(a){return z(a)===t;};reactIs_production_min.isMemo=function(a){return z(a)===r;};reactIs_production_min.isPortal=function(a){return z(a)===d;};reactIs_production_min.isProfiler=function(a){return z(a)===g;};reactIs_production_min.isStrictMode=function(a){return z(a)===f;};reactIs_production_min.isSuspense=function(a){return z(a)===p;};reactIs_production_min.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);};reactIs_production_min.typeOf=z;return reactIs_production_min;}var reactIs_development={};/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var hasRequiredReactIs_development;function requireReactIs_development(){if(hasRequiredReactIs_development)return reactIs_development;hasRequiredReactIs_development=1;if(process.env.NODE_ENV!=="production"){(function(){// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var hasSymbol=typeof Symbol==='function'&&Symbol.for;var REACT_ELEMENT_TYPE=hasSymbol?Symbol.for('react.element'):0xeac7;var REACT_PORTAL_TYPE=hasSymbol?Symbol.for('react.portal'):0xeaca;var REACT_FRAGMENT_TYPE=hasSymbol?Symbol.for('react.fragment'):0xeacb;var REACT_STRICT_MODE_TYPE=hasSymbol?Symbol.for('react.strict_mode'):0xeacc;var REACT_PROFILER_TYPE=hasSymbol?Symbol.for('react.profiler'):0xead2;var REACT_PROVIDER_TYPE=hasSymbol?Symbol.for('react.provider'):0xeacd;var REACT_CONTEXT_TYPE=hasSymbol?Symbol.for('react.context'):0xeace;// TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+// (unstable) APIs that have been removed. Can we remove the symbols?
+var REACT_ASYNC_MODE_TYPE=hasSymbol?Symbol.for('react.async_mode'):0xeacf;var REACT_CONCURRENT_MODE_TYPE=hasSymbol?Symbol.for('react.concurrent_mode'):0xeacf;var REACT_FORWARD_REF_TYPE=hasSymbol?Symbol.for('react.forward_ref'):0xead0;var REACT_SUSPENSE_TYPE=hasSymbol?Symbol.for('react.suspense'):0xead1;var REACT_SUSPENSE_LIST_TYPE=hasSymbol?Symbol.for('react.suspense_list'):0xead8;var REACT_MEMO_TYPE=hasSymbol?Symbol.for('react.memo'):0xead3;var REACT_LAZY_TYPE=hasSymbol?Symbol.for('react.lazy'):0xead4;var REACT_BLOCK_TYPE=hasSymbol?Symbol.for('react.block'):0xead9;var REACT_FUNDAMENTAL_TYPE=hasSymbol?Symbol.for('react.fundamental'):0xead5;var REACT_RESPONDER_TYPE=hasSymbol?Symbol.for('react.responder'):0xead6;var REACT_SCOPE_TYPE=hasSymbol?Symbol.for('react.scope'):0xead7;function isValidElementType(type){return typeof type==='string'||typeof type==='function'||// Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+type===REACT_FRAGMENT_TYPE||type===REACT_CONCURRENT_MODE_TYPE||type===REACT_PROFILER_TYPE||type===REACT_STRICT_MODE_TYPE||type===REACT_SUSPENSE_TYPE||type===REACT_SUSPENSE_LIST_TYPE||typeof type==='object'&&type!==null&&(type.$$typeof===REACT_LAZY_TYPE||type.$$typeof===REACT_MEMO_TYPE||type.$$typeof===REACT_PROVIDER_TYPE||type.$$typeof===REACT_CONTEXT_TYPE||type.$$typeof===REACT_FORWARD_REF_TYPE||type.$$typeof===REACT_FUNDAMENTAL_TYPE||type.$$typeof===REACT_RESPONDER_TYPE||type.$$typeof===REACT_SCOPE_TYPE||type.$$typeof===REACT_BLOCK_TYPE);}function typeOf(object){if(typeof object==='object'&&object!==null){var $$typeof=object.$$typeof;switch($$typeof){case REACT_ELEMENT_TYPE:var type=object.type;switch(type){case REACT_ASYNC_MODE_TYPE:case REACT_CONCURRENT_MODE_TYPE:case REACT_FRAGMENT_TYPE:case REACT_PROFILER_TYPE:case REACT_STRICT_MODE_TYPE:case REACT_SUSPENSE_TYPE:return type;default:var $$typeofType=type&&type.$$typeof;switch($$typeofType){case REACT_CONTEXT_TYPE:case REACT_FORWARD_REF_TYPE:case REACT_LAZY_TYPE:case REACT_MEMO_TYPE:case REACT_PROVIDER_TYPE:return $$typeofType;default:return $$typeof;}}case REACT_PORTAL_TYPE:return $$typeof;}}return undefined;}// AsyncMode is deprecated along with isAsyncMode
+var AsyncMode=REACT_ASYNC_MODE_TYPE;var ConcurrentMode=REACT_CONCURRENT_MODE_TYPE;var ContextConsumer=REACT_CONTEXT_TYPE;var ContextProvider=REACT_PROVIDER_TYPE;var Element=REACT_ELEMENT_TYPE;var ForwardRef=REACT_FORWARD_REF_TYPE;var Fragment=REACT_FRAGMENT_TYPE;var Lazy=REACT_LAZY_TYPE;var Memo=REACT_MEMO_TYPE;var Portal=REACT_PORTAL_TYPE;var Profiler=REACT_PROFILER_TYPE;var StrictMode=REACT_STRICT_MODE_TYPE;var Suspense=REACT_SUSPENSE_TYPE;var hasWarnedAboutDeprecatedIsAsyncMode=false;// AsyncMode should be deprecated
+function isAsyncMode(object){{if(!hasWarnedAboutDeprecatedIsAsyncMode){hasWarnedAboutDeprecatedIsAsyncMode=true;// Using console['warn'] to evade Babel and ESLint
+console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, '+'and will be removed in React 17+. Update your code to use '+'ReactIs.isConcurrentMode() instead. It has the exact same API.');}}return isConcurrentMode(object)||typeOf(object)===REACT_ASYNC_MODE_TYPE;}function isConcurrentMode(object){return typeOf(object)===REACT_CONCURRENT_MODE_TYPE;}function isContextConsumer(object){return typeOf(object)===REACT_CONTEXT_TYPE;}function isContextProvider(object){return typeOf(object)===REACT_PROVIDER_TYPE;}function isElement(object){return typeof object==='object'&&object!==null&&object.$$typeof===REACT_ELEMENT_TYPE;}function isForwardRef(object){return typeOf(object)===REACT_FORWARD_REF_TYPE;}function isFragment(object){return typeOf(object)===REACT_FRAGMENT_TYPE;}function isLazy(object){return typeOf(object)===REACT_LAZY_TYPE;}function isMemo(object){return typeOf(object)===REACT_MEMO_TYPE;}function isPortal(object){return typeOf(object)===REACT_PORTAL_TYPE;}function isProfiler(object){return typeOf(object)===REACT_PROFILER_TYPE;}function isStrictMode(object){return typeOf(object)===REACT_STRICT_MODE_TYPE;}function isSuspense(object){return typeOf(object)===REACT_SUSPENSE_TYPE;}reactIs_development.AsyncMode=AsyncMode;reactIs_development.ConcurrentMode=ConcurrentMode;reactIs_development.ContextConsumer=ContextConsumer;reactIs_development.ContextProvider=ContextProvider;reactIs_development.Element=Element;reactIs_development.ForwardRef=ForwardRef;reactIs_development.Fragment=Fragment;reactIs_development.Lazy=Lazy;reactIs_development.Memo=Memo;reactIs_development.Portal=Portal;reactIs_development.Profiler=Profiler;reactIs_development.StrictMode=StrictMode;reactIs_development.Suspense=Suspense;reactIs_development.isAsyncMode=isAsyncMode;reactIs_development.isConcurrentMode=isConcurrentMode;reactIs_development.isContextConsumer=isContextConsumer;reactIs_development.isContextProvider=isContextProvider;reactIs_development.isElement=isElement;reactIs_development.isForwardRef=isForwardRef;reactIs_development.isFragment=isFragment;reactIs_development.isLazy=isLazy;reactIs_development.isMemo=isMemo;reactIs_development.isPortal=isPortal;reactIs_development.isProfiler=isProfiler;reactIs_development.isStrictMode=isStrictMode;reactIs_development.isSuspense=isSuspense;reactIs_development.isValidElementType=isValidElementType;reactIs_development.typeOf=typeOf;})();}return reactIs_development;}if(process.env.NODE_ENV==='production'){reactIs$1.exports=requireReactIs_production_min();}else{reactIs$1.exports=requireReactIs_development();}var reactIsExports=reactIs$1.exports;var reactIs=reactIsExports;/**
+ * Copyright 2015, Yahoo! Inc.
+ * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
+ */var REACT_STATICS={childContextTypes:true,contextType:true,contextTypes:true,defaultProps:true,displayName:true,getDefaultProps:true,getDerivedStateFromError:true,getDerivedStateFromProps:true,mixins:true,propTypes:true,type:true};var KNOWN_STATICS={name:true,length:true,prototype:true,caller:true,callee:true,arguments:true,arity:true};var FORWARD_REF_STATICS={'$$typeof':true,render:true,defaultProps:true,displayName:true,propTypes:true};var MEMO_STATICS={'$$typeof':true,compare:true,defaultProps:true,displayName:true,propTypes:true,type:true};var TYPE_STATICS={};TYPE_STATICS[reactIs.ForwardRef]=FORWARD_REF_STATICS;TYPE_STATICS[reactIs.Memo]=MEMO_STATICS;function getStatics(component){// React v16.11 and below
+if(reactIs.isMemo(component)){return MEMO_STATICS;}// React v16.12 and above
+return TYPE_STATICS[component['$$typeof']]||REACT_STATICS;}var defineProperty=Object.defineProperty;var getOwnPropertyNames=Object.getOwnPropertyNames;var getOwnPropertySymbols=Object.getOwnPropertySymbols;var getOwnPropertyDescriptor=Object.getOwnPropertyDescriptor;var getPrototypeOf=Object.getPrototypeOf;var objectPrototype=Object.prototype;function hoistNonReactStatics(targetComponent,sourceComponent,blacklist){if(typeof sourceComponent!=='string'){// don't hoist over string (html) components
+if(objectPrototype){var inheritedComponent=getPrototypeOf(sourceComponent);if(inheritedComponent&&inheritedComponent!==objectPrototype){hoistNonReactStatics(targetComponent,inheritedComponent,blacklist);}}var keys=getOwnPropertyNames(sourceComponent);if(getOwnPropertySymbols){keys=keys.concat(getOwnPropertySymbols(sourceComponent));}var targetStatics=getStatics(targetComponent);var sourceStatics=getStatics(sourceComponent);for(var i=0;i<keys.length;++i){var key=keys[i];if(!KNOWN_STATICS[key]&&!(blacklist&&blacklist[key])&&!(sourceStatics&&sourceStatics[key])&&!(targetStatics&&targetStatics[key])){var descriptor=getOwnPropertyDescriptor(sourceComponent,key);try{// Avoid failures from read-only properties
+defineProperty(targetComponent,key,descriptor);}catch(e){}}}}return targetComponent;}var hoistNonReactStatics_cjs=hoistNonReactStatics;var f=/*@__PURE__*/getDefaultExportFromCjs(hoistNonReactStatics_cjs);function m(){return(m=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);}return e;}).apply(this,arguments);}var y=function(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n;},v=function(t){return null!==t&&"object"==typeof t&&"[object Object]"===(t.toString?t.toString():Object.prototype.toString.call(t))&&!reactIsExports$1.typeOf(t);},g=Object.freeze([]),S=Object.freeze({});function w(e){return"function"==typeof e;}function E(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component";}function b(e){return e&&"string"==typeof e.styledComponentId;}var _="undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",A="undefined"!=typeof window&&"HTMLElement"in window,C=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&(void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV)),P="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\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 `<StyleSheetManager stylisPlugins={[]}>`, 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 O(){for(var e=arguments.length<=0?void 0:arguments[0],t=[],n=1,r=arguments.length;n<r;n+=1)t.push(n<0||arguments.length<=n?void 0:arguments[n]);return t.forEach(function(t){e=e.replace(/%[a-z]/,t);}),e;}function R(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];throw"production"===process.env.NODE_ENV?new Error("An error occurred. See https://git.io/JUIaE#"+e+" for more information."+(n.length>0?" Args: "+n.join(", "):"")):new Error(O.apply(void 0,[P[e]].concat(n)).trim());}var D=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<e;n++)t+=this.groupSizes[n];return t;},t.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)(o<<=1)<0&&R(16,""+e);this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s<o;s++)this.groupSizes[s]=0;}for(var i=this.indexOfGroup(e+1),a=0,c=t.length;a<c;a++)this.tag.insertRule(i,t[a])&&(this.groupSizes[e]++,i++);},t.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n);}},t.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s<o;s++)t+=this.tag.getRule(s)+"/*!sc*/\n";return t;},e;}(),j=new Map(),T=new Map(),x=1,k=function(e){if(j.has(e))return j.get(e);for(;T.has(x);)x++;var t=x++;return"production"!==process.env.NODE_ENV&&((0|t)<0||t>1<<30)&&R(16,""+t),j.set(e,t),T.set(t,e),t;},V=function(e){return T.get(e);},z=function(e,t){t>=x&&(x=t+1),j.set(e,t),T.set(t,e);},B="style["+_+'][data-styled-version="5.3.11"]',M=new RegExp("^"+_+'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'),G=function(e,t,n){for(var r,o=n.split(","),s=0,i=o.length;s<i;s++)(r=o[s])&&e.registerName(t,r);},L=function(e,t){for(var n=(t.textContent||"").split("/*!sc*/\n"),r=[],o=0,s=n.length;o<s;o++){var i=n[o].trim();if(i){var a=i.match(M);if(a){var c=0|parseInt(a[1],10),u=a[2];0!==c&&(z(u,c),G(e,u,a[3]),e.getTag().insertRules(c,r)),r.length=0;}else r.push(i);}}},F=function(){return"undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null;},Y=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(e){for(var t=e.childNodes,n=t.length;n>=0;n--){var r=t[n];if(r&&1===r.nodeType&&r.hasAttribute(_))return r;}}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(_,"active"),r.setAttribute("data-styled-version","5.3.11");var i=F();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r;},q=function(){function e(e){var t=this.element=Y(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<r;n++){var o=t[n];if(o.ownerNode===e)return o;}R(17);}(t),this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0;}catch(e){return!1;}},t.deleteRule=function(e){this.sheet.deleteRule(e),this.length--;},t.getRule=function(e){var t=this.sheet.cssRules[e];return void 0!==t&&"string"==typeof t.cssText?t.cssText:"";},e;}(),H=function(){function e(e){var t=this.element=Y(e);this.nodes=t.childNodes,this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){if(e<=this.length&&e>=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 e<this.length?this.nodes[e].textContent:"";},e;}(),$=function(){function e(e){this.rules=[],this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0);},t.deleteRule=function(e){this.rules.splice(e,1),this.length--;},t.getRule=function(e){return e<this.length?this.rules[e]:"";},e;}(),W=A,U={isServer:!A,useCSSOMInjection:!C},J=function(){function e(e,t,n){void 0===e&&(e=S),void 0===t&&(t={}),this.options=m({},U,{},e),this.gs=t,this.names=new Map(n),this.server=!!e.isServer,!this.server&&A&&W&&(W=!1,function(e){for(var t=document.querySelectorAll(B),n=0,r=t.length;n<r;n++){var o=t[n];o&&"active"!==o.getAttribute(_)&&(L(e,o),o.parentNode&&o.parentNode.removeChild(o));}}(this));}e.registerId=function(e){return k(e);};var t=e.prototype;return t.reconstructWithOptions=function(t,n){return void 0===n&&(n=!0),new e(m({},this.options,{},t),this.gs,n&&this.names||void 0);},t.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1;},t.getTag=function(){return this.tag||(this.tag=(n=(t=this.options).isServer,r=t.useCSSOMInjection,o=t.target,e=n?new $(o):r?new q(o):new H(o),new D(e)));var e,t,n,r,o;},t.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t);},t.registerName=function(e,t){if(k(e),this.names.has(e))this.names.get(e).add(t);else{var n=new Set();n.add(t),this.names.set(e,n);}},t.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(k(e),n);},t.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear();},t.clearRules=function(e){this.getTag().clearGroup(k(e)),this.clearNames(e);},t.clearTag=function(){this.tag=void 0;},t.toString=function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=0;o<n;o++){var s=V(o);if(void 0!==s){var i=e.names.get(s),a=t.getGroup(o);if(i&&a&&i.size){var c=_+".g"+o+'[id="'+s+'"]',u="";void 0!==i&&i.forEach(function(e){e.length>0&&(u+=e+",");}),r+=""+a+c+'{content:"'+u+'"}/*!sc*/\n';}}}return r;}(this);},e;}(),X=/(a)(d)/gi,Z=function(e){return String.fromCharCode(e+(e>25?39:97));};function K(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=Z(t%52)+n;return(Z(t%52)+n).replace(X,"$1-$2");}var Q=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e;},ee=function(e){return Q(5381,e);};function te(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(w(n)&&!b(n))return!1;}return!0;}var ne=ee("5.3.11"),re=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&te(e),this.componentId=t,this.baseHash=Q(ne,t),this.baseStyle=n,J.registerId(t);}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.componentId,o=[];if(this.baseStyle&&o.push(this.baseStyle.generateAndInjectStyles(e,t,n)),this.isStatic&&!n.hash){if(this.staticRulesId&&t.hasNameForId(r,this.staticRulesId))o.push(this.staticRulesId);else{var s=be(this.rules,e,t,n).join(""),i=K(Q(this.baseHash,s)>>>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=Q(this.baseHash,n.hash),l="",d=0;d<c;d++){var h=this.rules[d];if("string"==typeof h)l+=h,"production"!==process.env.NODE_ENV&&(u=Q(u,h+d));else if(h){var p=be(h,e,t,n),f=Array.isArray(p)?p.join(""):p;u=Q(u,f+d),l+=f;}}if(l){var m=K(u>>>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;}(),oe=/^\s*\/\/.*$/gm,se=[":","[",".","#"];function ie(e){var t,n,r,o,s=void 0===e?S:e,i=s.options,a=void 0===i?S:i,c=s.plugins,u=void 0===c?g:c,l=new stylis_min(a),h=[],p=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){h.push(e);}),f=function(e,r,s){return 0===r&&-1!==se.indexOf(s[n.length])||s.match(o)?e:"."+t;};function m(e,s,i,a){void 0===a&&(a="&");var c=e.replace(oe,""),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));},p,function(e){if(-2===e){var t=h;return h=[],t;}}])),m.hash=u.length?u.reduce(function(e,t){return t.name||R(15),Q(e,t.name);},5381).toString():"",m;}var ae=React__default.createContext(),ue=React__default.createContext(),le=new J(),de=ie();function he(){return useContext(ae)||le;}function pe(){return useContext(ue)||de;}var me=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=de);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 R(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=de),this.name+e.hash;},e;}(),ye=/([A-Z])/,ve=/([A-Z])/g,ge=/^ms-/,Se=function(e){return"-"+e.toLowerCase();};function we(e){return ye.test(e)?e.replace(ve,Se).replace(ge,"-ms-"):e;}var Ee=function(e){return null==e||!1===e||""===e;};function be(e,n,r,o){if(Array.isArray(e)){for(var s,i=[],a=0,c=e.length;a<c;a+=1)""!==(s=be(e[a],n,r,o))&&(Array.isArray(s)?i.push.apply(i,s):i.push(s));return i;}if(Ee(e))return"";if(b(e))return"."+e.styledComponentId;if(w(e)){if("function"!=typeof(l=e)||l.prototype&&l.prototype.isReactComponent||!n)return e;var u=e(n);return"production"!==process.env.NODE_ENV&&reactIsExports$1.isElement(u)&&console.warn(E(e)+" 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."),be(u,n,r,o);}var l;return e instanceof me?r?(e.inject(r,o),e.getName(o)):e:v(e)?function e(t,n){var r,o,s=[];for(var i in t)t.hasOwnProperty(i)&&!Ee(t[i])&&(Array.isArray(t[i])&&t[i].isCss||w(t[i])?s.push(we(i)+":",t[i],";"):v(t[i])?s.push.apply(s,e(t[i],i)):s.push(we(i)+": "+(r=i,null==(o=t[i])||"boolean"==typeof o||""===o?"":"number"!=typeof o||0===o||r in unitlessKeys||r.startsWith("--")?String(o).trim():o+"px")+";"));return n?[n+" {"].concat(s,["}"]):s;}(e):e.toString();}var _e=function(e){return Array.isArray(e)&&(e.isCss=!0),e;};function Ne(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return w(e)||v(e)?_e(be(y(g,[e].concat(n)))):0===n.length&&1===e.length&&"string"==typeof e[0]?e:_e(be(y(e,n)));}var Ae=/invalid hook call/i,Ce=new Set(),Ie=function(e,t){if("production"!==process.env.NODE_ENV){var n="The component "+e+(t?' with the id of "'+t+'"':"")+" has been created dynamically.\nYou may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",r=console.error;try{var o=!0;console.error=function(e){if(Ae.test(e))o=!1,Ce.delete(n);else{for(var t=arguments.length,s=new Array(t>1?t-1:0),i=1;i<t;i++)s[i-1]=arguments[i];r.apply(void 0,[e].concat(s));}},useRef(),o&&!Ce.has(n)&&(console.warn(n),Ce.add(n));}catch(e){Ae.test(e.message)&&Ce.delete(n);}finally{console.error=r;}}},Pe=function(e,t,n){return void 0===n&&(n=S),e.theme!==n.theme&&e.theme||t||n.theme;},Oe=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,Re=/(^-|-$)/g;function De(e){return e.replace(Oe,"-").replace(Re,"");}var je=function(e){return K(ee(e)>>>0);};function Te(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase());}var xe=function(e){return"function"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e);},ke=function(e){return"__proto__"!==e&&"constructor"!==e&&"prototype"!==e;};function Ve(e,t,n){var r=e[n];xe(t)&&xe(r)?ze(r,t):e[n]=t;}function ze(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];for(var o=0,s=n;o<s.length;o++){var i=s[o];if(xe(i))for(var a in i)ke(a)&&Ve(e,i[a],a);}return e;}var Be=React__default.createContext();var Le={};function Fe(e,t,n){var o=b(e),i=!Te(e),a=t.attrs,c=void 0===a?g:a,l=t.componentId,d=void 0===l?function(e,t){var n="string"!=typeof e?"sc":De(e);Le[n]=(Le[n]||0)+1;var r=n+"-"+je("5.3.11"+n+Le[n]);return t?t+"-"+r:r;}(t.displayName,t.parentComponentId):l,h=t.displayName,y=void 0===h?function(e){return Te(e)?"styled."+e:"Styled("+E(e)+")";}(e):h,v=t.displayName&&t.componentId?De(t.displayName)+"-"+t.componentId:t.componentId||d,_=o&&e.attrs?Array.prototype.concat(e.attrs,c).filter(Boolean):c,N=t.shouldForwardProp;o&&e.shouldForwardProp&&(N=t.shouldForwardProp?function(n,r,o){return e.shouldForwardProp(n,r,o)&&t.shouldForwardProp(n,r,o);}:e.shouldForwardProp);var A,C=new re(n,v,o?e.componentStyle:void 0),I=C.isStatic&&0===c.length,P=function(e,t){return function(e,t,n,r){var o=e.attrs,i=e.componentStyle,a=e.defaultProps,c=e.foldedComponentIds,l=e.shouldForwardProp,d=e.styledComponentId,h=e.target,f=function(e,t,n){void 0===e&&(e=S);var r=m({},t,{theme:e}),o={};return n.forEach(function(e){var t,n,s,i=e;for(t in w(i)&&(i=i(r)),i)r[t]=o[t]="className"===t?(n=o[t],s=i[t],n&&s?n+" "+s:n||s):i[t];}),[r,o];}(Pe(t,useContext(Be),a)||S,t,o),y=f[0],v=f[1],g=function(e,t,n,r){var o=he(),s=pe(),i=t?e.generateAndInjectStyles(S,o,s):e.generateAndInjectStyles(n,o,s);return"production"!==process.env.NODE_ENV&&!t&&r&&r(i),i;}(i,r,y,"production"!==process.env.NODE_ENV?e.warnTooManyClasses:void 0),E=n,b=v.$as||t.$as||v.as||t.as||h,_=Te(b),N=v!==t?m({},t,{},v):t,A={};for(var C in N)"$"!==C[0]&&"as"!==C&&("forwardedAs"===C?A.as=N[C]:(l?l(C,isPropValid,b):!_||isPropValid(C))&&(A[C]=N[C]));return t.style&&v.style!==t.style&&(A.style=m({},t.style,{},v.style)),A.className=Array.prototype.concat(c,d,g!==d?g:null,t.className,v.className).filter(Boolean).join(" "),A.ref=E,createElement(b,A);}(A,e,t,I);};return P.displayName=y,(A=React__default.forwardRef(P)).attrs=_,A.componentStyle=C,A.displayName=y,A.shouldForwardProp=N,A.foldedComponentIds=o?Array.prototype.concat(e.foldedComponentIds,e.styledComponentId):g,A.styledComponentId=v,A.target=o?e.target:e,A.withComponent=function(e){var r=t.componentId,o=function(e,t){if(null==e)return{};var n,r,o={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(o[n]=e[n]);return o;}(t,["componentId"]),s=r&&r+"-"+(Te(e)?e:De(E(e)));return Fe(e,m({},o,{attrs:_,componentId:s}),n);},Object.defineProperty(A,"defaultProps",{get:function(){return this._foldedDefaultProps;},set:function(t){this._foldedDefaultProps=o?ze({},e.defaultProps,t):t;}}),"production"!==process.env.NODE_ENV&&(Ie(y,v),A.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  <Component />"),r=!0,n={};}};}(y,v)),Object.defineProperty(A,"toString",{value:function(){return"."+A.styledComponentId;}}),i&&f(A,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0,withComponent:!0}),A;}var Ye=function(e){return function e(t,r,o){if(void 0===o&&(o=S),!reactIsExports$1.isValidElementType(r))return R(1,String(r));var s=function(){return t(r,o,Ne.apply(void 0,arguments));};return s.withConfig=function(n){return e(t,r,m({},o,{},n));},s.attrs=function(n){return e(t,r,m({},o,{attrs:Array.prototype.concat(o.attrs,n).filter(Boolean)}));},s;}(Fe,e);};["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","textPath","tspan"].forEach(function(e){Ye[e]=Ye(e);});function $e(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;r++)n[r-1]=arguments[r];var o=Ne.apply(void 0,[e].concat(n)).join(""),s=je(o);return new me(s,o);}"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);var styled=Ye;function useDocumentState(id,docType){const state=useEditState(id,docType);return state.draft||state.published;}const aiDocPrefixPattern=new RegExp("^".concat(assistDocumentIdPrefix));function publicId(id){return id.replace("drafts.","");}function assistDocumentId(documentType){return"".concat(assistDocumentIdPrefix).concat(documentType);}function documentTypeFromAiDocumentId(id){return id.replace(aiDocPrefixPattern,"");}function assistTasksStatusId(documentId){return"".concat(assistDocumentStatusIdPrefix).concat(publicId(documentId));}function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}function toInteger(dirtyNumber){if(dirtyNumber===null||dirtyNumber===true||dirtyNumber===false){return NaN;}var number=Number(dirtyNumber);if(isNaN(number)){return number;}return number<0?Math.ceil(number):Math.floor(number);}function requiredArgs(required,args){if(args.length<required){throw new TypeError(required+' argument'+(required>1?'s':'')+' required, but only '+args.length+' present');}}/**
+ * @name toDate
+ * @category Common Helpers
+ * @summary Convert the given argument to an instance of Date.
+ *
+ * @description
+ * Convert the given argument to an instance of Date.
+ *
+ * If the argument is an instance of Date, the function returns its clone.
+ *
+ * If the argument is a number, it is treated as a timestamp.
+ *
+ * If the argument is none of the above, the function returns Invalid Date.
+ *
+ * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
+ *
+ * @param {Date|Number} argument - the value to convert
+ * @returns {Date} the parsed date in the local time zone
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // Clone the date:
+ * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
+ * //=> Tue Feb 11 2014 11:30:30
+ *
+ * @example
+ * // Convert the timestamp to date:
+ * const result = toDate(1392098430000)
+ * //=> Tue Feb 11 2014 11:30:30
+ */function toDate(argument){requiredArgs(1,arguments);var argStr=Object.prototype.toString.call(argument);// Clone the date
+if(argument instanceof Date||_typeof(argument)==='object'&&argStr==='[object Date]'){// Prevent the date to lose the milliseconds when passed to new Date() in IE10
+return new Date(argument.getTime());}else if(typeof argument==='number'||argStr==='[object Number]'){return new Date(argument);}else{if((typeof argument==='string'||argStr==='[object String]')&&typeof console!=='undefined'){// eslint-disable-next-line no-console
+console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments");// eslint-disable-next-line no-console
+console.warn(new Error().stack);}return new Date(NaN);}}/**
+ * @name addMilliseconds
+ * @category Millisecond Helpers
+ * @summary Add the specified number of milliseconds to the given date.
+ *
+ * @description
+ * Add the specified number of milliseconds to the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of milliseconds to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} the new date with the milliseconds added
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Add 750 milliseconds to 10 July 2014 12:45:30.000:
+ * const result = addMilliseconds(new Date(2014, 6, 10, 12, 45, 30, 0), 750)
+ * //=> Thu Jul 10 2014 12:45:30.750
+ */function addMilliseconds(dirtyDate,dirtyAmount){requiredArgs(2,arguments);var timestamp=toDate(dirtyDate).getTime();var amount=toInteger(dirtyAmount);return new Date(timestamp+amount);}var defaultOptions={};function getDefaultOptions(){return defaultOptions;}/**
+ * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds.
+ * They usually appear for dates that denote time before the timezones were introduced
+ * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891
+ * and GMT+01:00:00 after that date)
+ *
+ * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above,
+ * which would lead to incorrect calculations.
+ *
+ * This function returns the timezone offset in milliseconds that takes seconds in account.
+ */function getTimezoneOffsetInMilliseconds(date){var utcDate=new Date(Date.UTC(date.getFullYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds(),date.getMilliseconds()));utcDate.setUTCFullYear(date.getFullYear());return date.getTime()-utcDate.getTime();}/**
+ * @name addSeconds
+ * @category Second Helpers
+ * @summary Add the specified number of seconds to the given date.
+ *
+ * @description
+ * Add the specified number of seconds to the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of seconds to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} the new date with the seconds added
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Add 30 seconds to 10 July 2014 12:45:00:
+ * const result = addSeconds(new Date(2014, 6, 10, 12, 45, 0), 30)
+ * //=> Thu Jul 10 2014 12:45:30
+ */function addSeconds(dirtyDate,dirtyAmount){requiredArgs(2,arguments);var amount=toInteger(dirtyAmount);return addMilliseconds(dirtyDate,amount*1000);}/**
+ * @name compareAsc
+ * @category Common Helpers
+ * @summary Compare the two dates and return -1, 0 or 1.
+ *
+ * @description
+ * Compare the two dates and return 1 if the first date is after the second,
+ * -1 if the first date is before the second or 0 if dates are equal.
+ *
+ * @param {Date|Number} dateLeft - the first date to compare
+ * @param {Date|Number} dateRight - the second date to compare
+ * @returns {Number} the result of the comparison
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Compare 11 February 1987 and 10 July 1989:
+ * const result = compareAsc(new Date(1987, 1, 11), new Date(1989, 6, 10))
+ * //=> -1
+ *
+ * @example
+ * // Sort the array of dates:
+ * const result = [
+ *   new Date(1995, 6, 2),
+ *   new Date(1987, 1, 11),
+ *   new Date(1989, 6, 10)
+ * ].sort(compareAsc)
+ * //=> [
+ * //   Wed Feb 11 1987 00:00:00,
+ * //   Mon Jul 10 1989 00:00:00,
+ * //   Sun Jul 02 1995 00:00:00
+ * // ]
+ */function compareAsc(dirtyDateLeft,dirtyDateRight){requiredArgs(2,arguments);var dateLeft=toDate(dirtyDateLeft);var dateRight=toDate(dirtyDateRight);var diff=dateLeft.getTime()-dateRight.getTime();if(diff<0){return-1;}else if(diff>0){return 1;// Return 0 if diff is 0; return NaN if diff is NaN
+}else{return diff;}}/**
+ * Days in 1 week.
+ *
+ * @name daysInWeek
+ * @constant
+ * @type {number}
+ * @default
+ */ /**
+ * Milliseconds in 1 minute
+ *
+ * @name millisecondsInMinute
+ * @constant
+ * @type {number}
+ * @default
+ */var millisecondsInMinute=60000;/**
+ * @name differenceInCalendarMonths
+ * @category Month Helpers
+ * @summary Get the number of calendar months between the given dates.
+ *
+ * @description
+ * Get the number of calendar months between the given dates.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @returns {Number} the number of calendar months
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many calendar months are between 31 January 2014 and 1 September 2014?
+ * const result = differenceInCalendarMonths(
+ *   new Date(2014, 8, 1),
+ *   new Date(2014, 0, 31)
+ * )
+ * //=> 8
+ */function differenceInCalendarMonths(dirtyDateLeft,dirtyDateRight){requiredArgs(2,arguments);var dateLeft=toDate(dirtyDateLeft);var dateRight=toDate(dirtyDateRight);var yearDiff=dateLeft.getFullYear()-dateRight.getFullYear();var monthDiff=dateLeft.getMonth()-dateRight.getMonth();return yearDiff*12+monthDiff;}/**
+ * @name differenceInMilliseconds
+ * @category Millisecond Helpers
+ * @summary Get the number of milliseconds between the given dates.
+ *
+ * @description
+ * Get the number of milliseconds between the given dates.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @returns {Number} the number of milliseconds
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many milliseconds are between
+ * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?
+ * const result = differenceInMilliseconds(
+ *   new Date(2014, 6, 2, 12, 30, 21, 700),
+ *   new Date(2014, 6, 2, 12, 30, 20, 600)
+ * )
+ * //=> 1100
+ */function differenceInMilliseconds(dateLeft,dateRight){requiredArgs(2,arguments);return toDate(dateLeft).getTime()-toDate(dateRight).getTime();}var roundingMap={ceil:Math.ceil,round:Math.round,floor:Math.floor,trunc:function trunc(value){return value<0?Math.ceil(value):Math.floor(value);}// Math.trunc is not supported by IE
+};var defaultRoundingMethod='trunc';function getRoundingMethod(method){return method?roundingMap[method]:roundingMap[defaultRoundingMethod];}/**
+ * @name endOfDay
+ * @category Day Helpers
+ * @summary Return the end of a day for the given date.
+ *
+ * @description
+ * Return the end of a day for the given date.
+ * The result will be in the local timezone.
+ *
+ * @param {Date|Number} date - the original date
+ * @returns {Date} the end of a day
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The end of a day for 2 September 2014 11:55:00:
+ * const result = endOfDay(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 02 2014 23:59:59.999
+ */function endOfDay(dirtyDate){requiredArgs(1,arguments);var date=toDate(dirtyDate);date.setHours(23,59,59,999);return date;}/**
+ * @name endOfMonth
+ * @category Month Helpers
+ * @summary Return the end of a month for the given date.
+ *
+ * @description
+ * Return the end of a month for the given date.
+ * The result will be in the local timezone.
+ *
+ * @param {Date|Number} date - the original date
+ * @returns {Date} the end of a month
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The end of a month for 2 September 2014 11:55:00:
+ * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 30 2014 23:59:59.999
+ */function endOfMonth(dirtyDate){requiredArgs(1,arguments);var date=toDate(dirtyDate);var month=date.getMonth();date.setFullYear(date.getFullYear(),month+1,0);date.setHours(23,59,59,999);return date;}/**
+ * @name isLastDayOfMonth
+ * @category Month Helpers
+ * @summary Is the given date the last day of a month?
+ *
+ * @description
+ * Is the given date the last day of a month?
+ *
+ * @param {Date|Number} date - the date to check
+ * @returns {Boolean} the date is the last day of a month
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // Is 28 February 2014 the last day of a month?
+ * const result = isLastDayOfMonth(new Date(2014, 1, 28))
+ * //=> true
+ */function isLastDayOfMonth(dirtyDate){requiredArgs(1,arguments);var date=toDate(dirtyDate);return endOfDay(date).getTime()===endOfMonth(date).getTime();}/**
+ * @name differenceInMonths
+ * @category Month Helpers
+ * @summary Get the number of full months between the given dates.
+ *
+ * @description
+ * Get the number of full months between the given dates using trunc as a default rounding method.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @returns {Number} the number of full months
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many full months are between 31 January 2014 and 1 September 2014?
+ * const result = differenceInMonths(new Date(2014, 8, 1), new Date(2014, 0, 31))
+ * //=> 7
+ */function differenceInMonths(dirtyDateLeft,dirtyDateRight){requiredArgs(2,arguments);var dateLeft=toDate(dirtyDateLeft);var dateRight=toDate(dirtyDateRight);var sign=compareAsc(dateLeft,dateRight);var difference=Math.abs(differenceInCalendarMonths(dateLeft,dateRight));var result;// Check for the difference of less than month
+if(difference<1){result=0;}else{if(dateLeft.getMonth()===1&&dateLeft.getDate()>27){// This will check if the date is end of Feb and assign a higher end of month date
+// to compare it with Jan
+dateLeft.setDate(30);}dateLeft.setMonth(dateLeft.getMonth()-sign*difference);// Math.abs(diff in full months - diff in calendar months) === 1 if last calendar month is not full
+// If so, result must be decreased by 1 in absolute value
+var isLastMonthNotFull=compareAsc(dateLeft,dateRight)===-sign;// Check for cases of one full calendar month
+if(isLastDayOfMonth(toDate(dirtyDateLeft))&&difference===1&&compareAsc(dirtyDateLeft,dateRight)===1){isLastMonthNotFull=false;}result=sign*(difference-Number(isLastMonthNotFull));}// Prevent negative zero
+return result===0?0:result;}/**
+ * @name differenceInSeconds
+ * @category Second Helpers
+ * @summary Get the number of seconds between the given dates.
+ *
+ * @description
+ * Get the number of seconds between the given dates.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @param {Object} [options] - an object with options.
+ * @param {String} [options.roundingMethod='trunc'] - a rounding method (`ceil`, `floor`, `round` or `trunc`)
+ * @returns {Number} the number of seconds
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many seconds are between
+ * // 2 July 2014 12:30:07.999 and 2 July 2014 12:30:20.000?
+ * const result = differenceInSeconds(
+ *   new Date(2014, 6, 2, 12, 30, 20, 0),
+ *   new Date(2014, 6, 2, 12, 30, 7, 999)
+ * )
+ * //=> 12
+ */function differenceInSeconds(dateLeft,dateRight,options){requiredArgs(2,arguments);var diff=differenceInMilliseconds(dateLeft,dateRight)/1000;return getRoundingMethod(options===null||options===void 0?void 0:options.roundingMethod)(diff);}var formatDistanceLocale={lessThanXSeconds:{one:'less than a second',other:'less than {{count}} seconds'},xSeconds:{one:'1 second',other:'{{count}} seconds'},halfAMinute:'half a minute',lessThanXMinutes:{one:'less than a minute',other:'less than {{count}} minutes'},xMinutes:{one:'1 minute',other:'{{count}} minutes'},aboutXHours:{one:'about 1 hour',other:'about {{count}} hours'},xHours:{one:'1 hour',other:'{{count}} hours'},xDays:{one:'1 day',other:'{{count}} days'},aboutXWeeks:{one:'about 1 week',other:'about {{count}} weeks'},xWeeks:{one:'1 week',other:'{{count}} weeks'},aboutXMonths:{one:'about 1 month',other:'about {{count}} months'},xMonths:{one:'1 month',other:'{{count}} months'},aboutXYears:{one:'about 1 year',other:'about {{count}} years'},xYears:{one:'1 year',other:'{{count}} years'},overXYears:{one:'over 1 year',other:'over {{count}} years'},almostXYears:{one:'almost 1 year',other:'almost {{count}} years'}};var formatDistance$1=function formatDistance(token,count,options){var result;var tokenValue=formatDistanceLocale[token];if(typeof tokenValue==='string'){result=tokenValue;}else if(count===1){result=tokenValue.one;}else{result=tokenValue.other.replace('{{count}}',count.toString());}if(options!==null&&options!==void 0&&options.addSuffix){if(options.comparison&&options.comparison>0){return'in '+result;}else{return result+' ago';}}return result;};function buildFormatLongFn(args){return function(){var options=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};// TODO: Remove String()
+var width=options.width?String(options.width):args.defaultWidth;var format=args.formats[width]||args.formats[args.defaultWidth];return format;};}var dateFormats={full:'EEEE, MMMM do, y',long:'MMMM do, y',medium:'MMM d, y',short:'MM/dd/yyyy'};var timeFormats={full:'h:mm:ss a zzzz',long:'h:mm:ss a z',medium:'h:mm:ss a',short:'h:mm a'};var dateTimeFormats={full:"{{date}} 'at' {{time}}",long:"{{date}} 'at' {{time}}",medium:'{{date}}, {{time}}',short:'{{date}}, {{time}}'};var formatLong={date:buildFormatLongFn({formats:dateFormats,defaultWidth:'full'}),time:buildFormatLongFn({formats:timeFormats,defaultWidth:'full'}),dateTime:buildFormatLongFn({formats:dateTimeFormats,defaultWidth:'full'})};var formatRelativeLocale={lastWeek:"'last' eeee 'at' p",yesterday:"'yesterday at' p",today:"'today at' p",tomorrow:"'tomorrow at' p",nextWeek:"eeee 'at' p",other:'P'};var formatRelative=function formatRelative(token,_date,_baseDate,_options){return formatRelativeLocale[token];};function buildLocalizeFn(args){return function(dirtyIndex,options){var context=options!==null&&options!==void 0&&options.context?String(options.context):'standalone';var valuesArray;if(context==='formatting'&&args.formattingValues){var defaultWidth=args.defaultFormattingWidth||args.defaultWidth;var width=options!==null&&options!==void 0&&options.width?String(options.width):defaultWidth;valuesArray=args.formattingValues[width]||args.formattingValues[defaultWidth];}else{var _defaultWidth=args.defaultWidth;var _width=options!==null&&options!==void 0&&options.width?String(options.width):args.defaultWidth;valuesArray=args.values[_width]||args.values[_defaultWidth];}var index=args.argumentCallback?args.argumentCallback(dirtyIndex):dirtyIndex;// @ts-ignore: For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it!
+return valuesArray[index];};}var eraValues={narrow:['B','A'],abbreviated:['BC','AD'],wide:['Before Christ','Anno Domini']};var quarterValues={narrow:['1','2','3','4'],abbreviated:['Q1','Q2','Q3','Q4'],wide:['1st quarter','2nd quarter','3rd quarter','4th quarter']};// Note: in English, the names of days of the week and months are capitalized.
+// If you are making a new locale based on this one, check if the same is true for the language you're working on.
+// Generally, formatted dates should look like they are in the middle of a sentence,
+// e.g. in Spanish language the weekdays and months should be in the lowercase.
+var monthValues={narrow:['J','F','M','A','M','J','J','A','S','O','N','D'],abbreviated:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],wide:['January','February','March','April','May','June','July','August','September','October','November','December']};var dayValues={narrow:['S','M','T','W','T','F','S'],short:['Su','Mo','Tu','We','Th','Fr','Sa'],abbreviated:['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],wide:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']};var dayPeriodValues={narrow:{am:'a',pm:'p',midnight:'mi',noon:'n',morning:'morning',afternoon:'afternoon',evening:'evening',night:'night'},abbreviated:{am:'AM',pm:'PM',midnight:'midnight',noon:'noon',morning:'morning',afternoon:'afternoon',evening:'evening',night:'night'},wide:{am:'a.m.',pm:'p.m.',midnight:'midnight',noon:'noon',morning:'morning',afternoon:'afternoon',evening:'evening',night:'night'}};var formattingDayPeriodValues={narrow:{am:'a',pm:'p',midnight:'mi',noon:'n',morning:'in the morning',afternoon:'in the afternoon',evening:'in the evening',night:'at night'},abbreviated:{am:'AM',pm:'PM',midnight:'midnight',noon:'noon',morning:'in the morning',afternoon:'in the afternoon',evening:'in the evening',night:'at night'},wide:{am:'a.m.',pm:'p.m.',midnight:'midnight',noon:'noon',morning:'in the morning',afternoon:'in the afternoon',evening:'in the evening',night:'at night'}};var ordinalNumber=function ordinalNumber(dirtyNumber,_options){var number=Number(dirtyNumber);// If ordinal numbers depend on context, for example,
+// if they are different for different grammatical genders,
+// use `options.unit`.
+//
+// `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear',
+// 'day', 'hour', 'minute', 'second'.
+var rem100=number%100;if(rem100>20||rem100<10){switch(rem100%10){case 1:return number+'st';case 2:return number+'nd';case 3:return number+'rd';}}return number+'th';};var localize={ordinalNumber:ordinalNumber,era:buildLocalizeFn({values:eraValues,defaultWidth:'wide'}),quarter:buildLocalizeFn({values:quarterValues,defaultWidth:'wide',argumentCallback:function argumentCallback(quarter){return quarter-1;}}),month:buildLocalizeFn({values:monthValues,defaultWidth:'wide'}),day:buildLocalizeFn({values:dayValues,defaultWidth:'wide'}),dayPeriod:buildLocalizeFn({values:dayPeriodValues,defaultWidth:'wide',formattingValues:formattingDayPeriodValues,defaultFormattingWidth:'wide'})};function buildMatchFn(args){return function(string){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var width=options.width;var matchPattern=width&&args.matchPatterns[width]||args.matchPatterns[args.defaultMatchWidth];var matchResult=string.match(matchPattern);if(!matchResult){return null;}var matchedString=matchResult[0];var parsePatterns=width&&args.parsePatterns[width]||args.parsePatterns[args.defaultParseWidth];var key=Array.isArray(parsePatterns)?findIndex(parsePatterns,function(pattern){return pattern.test(matchedString);}):findKey(parsePatterns,function(pattern){return pattern.test(matchedString);});var value;value=args.valueCallback?args.valueCallback(key):key;value=options.valueCallback?options.valueCallback(value):value;var rest=string.slice(matchedString.length);return{value:value,rest:rest};};}function findKey(object,predicate){for(var key in object){if(object.hasOwnProperty(key)&&predicate(object[key])){return key;}}return undefined;}function findIndex(array,predicate){for(var key=0;key<array.length;key++){if(predicate(array[key])){return key;}}return undefined;}function buildMatchPatternFn(args){return function(string){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var matchResult=string.match(args.matchPattern);if(!matchResult)return null;var matchedString=matchResult[0];var parseResult=string.match(args.parsePattern);if(!parseResult)return null;var value=args.valueCallback?args.valueCallback(parseResult[0]):parseResult[0];value=options.valueCallback?options.valueCallback(value):value;var rest=string.slice(matchedString.length);return{value:value,rest:rest};};}var matchOrdinalNumberPattern=/^(\d+)(th|st|nd|rd)?/i;var parseOrdinalNumberPattern=/\d+/i;var matchEraPatterns={narrow:/^(b|a)/i,abbreviated:/^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,wide:/^(before christ|before common era|anno domini|common era)/i};var parseEraPatterns={any:[/^b/i,/^(a|c)/i]};var matchQuarterPatterns={narrow:/^[1234]/i,abbreviated:/^q[1234]/i,wide:/^[1234](th|st|nd|rd)? quarter/i};var parseQuarterPatterns={any:[/1/i,/2/i,/3/i,/4/i]};var matchMonthPatterns={narrow:/^[jfmasond]/i,abbreviated:/^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,wide:/^(january|february|march|april|may|june|july|august|september|october|november|december)/i};var parseMonthPatterns={narrow:[/^j/i,/^f/i,/^m/i,/^a/i,/^m/i,/^j/i,/^j/i,/^a/i,/^s/i,/^o/i,/^n/i,/^d/i],any:[/^ja/i,/^f/i,/^mar/i,/^ap/i,/^may/i,/^jun/i,/^jul/i,/^au/i,/^s/i,/^o/i,/^n/i,/^d/i]};var matchDayPatterns={narrow:/^[smtwf]/i,short:/^(su|mo|tu|we|th|fr|sa)/i,abbreviated:/^(sun|mon|tue|wed|thu|fri|sat)/i,wide:/^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i};var parseDayPatterns={narrow:[/^s/i,/^m/i,/^t/i,/^w/i,/^t/i,/^f/i,/^s/i],any:[/^su/i,/^m/i,/^tu/i,/^w/i,/^th/i,/^f/i,/^sa/i]};var matchDayPeriodPatterns={narrow:/^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,any:/^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i};var parseDayPeriodPatterns={any:{am:/^a/i,pm:/^p/i,midnight:/^mi/i,noon:/^no/i,morning:/morning/i,afternoon:/afternoon/i,evening:/evening/i,night:/night/i}};var match={ordinalNumber:buildMatchPatternFn({matchPattern:matchOrdinalNumberPattern,parsePattern:parseOrdinalNumberPattern,valueCallback:function valueCallback(value){return parseInt(value,10);}}),era:buildMatchFn({matchPatterns:matchEraPatterns,defaultMatchWidth:'wide',parsePatterns:parseEraPatterns,defaultParseWidth:'any'}),quarter:buildMatchFn({matchPatterns:matchQuarterPatterns,defaultMatchWidth:'wide',parsePatterns:parseQuarterPatterns,defaultParseWidth:'any',valueCallback:function valueCallback(index){return index+1;}}),month:buildMatchFn({matchPatterns:matchMonthPatterns,defaultMatchWidth:'wide',parsePatterns:parseMonthPatterns,defaultParseWidth:'any'}),day:buildMatchFn({matchPatterns:matchDayPatterns,defaultMatchWidth:'wide',parsePatterns:parseDayPatterns,defaultParseWidth:'any'}),dayPeriod:buildMatchFn({matchPatterns:matchDayPeriodPatterns,defaultMatchWidth:'any',parsePatterns:parseDayPeriodPatterns,defaultParseWidth:'any'})};/**
+ * @type {Locale}
+ * @category Locales
+ * @summary English locale (United States).
+ * @language English
+ * @iso-639-2 eng
+ * @author Sasha Koss [@kossnocorp]{@link https://github.com/kossnocorp}
+ * @author Lesha Koss [@leshakoss]{@link https://github.com/leshakoss}
+ */var locale={code:'en-US',formatDistance:formatDistance$1,formatLong:formatLong,formatRelative:formatRelative,localize:localize,match:match,options:{weekStartsOn:0/* Sunday */,firstWeekContainsDate:1}};var defaultLocale=locale;function assign(target,object){if(target==null){throw new TypeError('assign requires that input parameter not be null or undefined');}for(var property in object){if(Object.prototype.hasOwnProperty.call(object,property)){target[property]=object[property];}}return target;}function cloneObject(object){return assign({},object);}var MINUTES_IN_DAY=1440;var MINUTES_IN_ALMOST_TWO_DAYS=2520;var MINUTES_IN_MONTH=43200;var MINUTES_IN_TWO_MONTHS=86400;/**
+ * @name formatDistance
+ * @category Common Helpers
+ * @summary Return the distance between the given dates in words.
+ *
+ * @description
+ * Return the distance between the given dates in words.
+ *
+ * | Distance between dates                                            | Result              |
+ * |-------------------------------------------------------------------|---------------------|
+ * | 0 ... 30 secs                                                     | less than a minute  |
+ * | 30 secs ... 1 min 30 secs                                         | 1 minute            |
+ * | 1 min 30 secs ... 44 mins 30 secs                                 | [2..44] minutes     |
+ * | 44 mins ... 30 secs ... 89 mins 30 secs                           | about 1 hour        |
+ * | 89 mins 30 secs ... 23 hrs 59 mins 30 secs                        | about [2..24] hours |
+ * | 23 hrs 59 mins 30 secs ... 41 hrs 59 mins 30 secs                 | 1 day               |
+ * | 41 hrs 59 mins 30 secs ... 29 days 23 hrs 59 mins 30 secs         | [2..30] days        |
+ * | 29 days 23 hrs 59 mins 30 secs ... 44 days 23 hrs 59 mins 30 secs | about 1 month       |
+ * | 44 days 23 hrs 59 mins 30 secs ... 59 days 23 hrs 59 mins 30 secs | about 2 months      |
+ * | 59 days 23 hrs 59 mins 30 secs ... 1 yr                           | [2..12] months      |
+ * | 1 yr ... 1 yr 3 months                                            | about 1 year        |
+ * | 1 yr 3 months ... 1 yr 9 month s                                  | over 1 year         |
+ * | 1 yr 9 months ... 2 yrs                                           | almost 2 years      |
+ * | N yrs ... N yrs 3 months                                          | about N years       |
+ * | N yrs 3 months ... N yrs 9 months                                 | over N years        |
+ * | N yrs 9 months ... N+1 yrs                                        | almost N+1 years    |
+ *
+ * With `options.includeSeconds == true`:
+ * | Distance between dates | Result               |
+ * |------------------------|----------------------|
+ * | 0 secs ... 5 secs      | less than 5 seconds  |
+ * | 5 secs ... 10 secs     | less than 10 seconds |
+ * | 10 secs ... 20 secs    | less than 20 seconds |
+ * | 20 secs ... 40 secs    | half a minute        |
+ * | 40 secs ... 60 secs    | less than a minute   |
+ * | 60 secs ... 90 secs    | 1 minute             |
+ *
+ * @param {Date|Number} date - the date
+ * @param {Date|Number} baseDate - the date to compare with
+ * @param {Object} [options] - an object with options.
+ * @param {Boolean} [options.includeSeconds=false] - distances less than a minute are more detailed
+ * @param {Boolean} [options.addSuffix=false] - result indicates if the second date is earlier or later than the first
+ * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
+ * @returns {String} the distance in words
+ * @throws {TypeError} 2 arguments required
+ * @throws {RangeError} `date` must not be Invalid Date
+ * @throws {RangeError} `baseDate` must not be Invalid Date
+ * @throws {RangeError} `options.locale` must contain `formatDistance` property
+ *
+ * @example
+ * // What is the distance between 2 July 2014 and 1 January 2015?
+ * const result = formatDistance(new Date(2014, 6, 2), new Date(2015, 0, 1))
+ * //=> '6 months'
+ *
+ * @example
+ * // What is the distance between 1 January 2015 00:00:15
+ * // and 1 January 2015 00:00:00, including seconds?
+ * const result = formatDistance(
+ *   new Date(2015, 0, 1, 0, 0, 15),
+ *   new Date(2015, 0, 1, 0, 0, 0),
+ *   { includeSeconds: true }
+ * )
+ * //=> 'less than 20 seconds'
+ *
+ * @example
+ * // What is the distance from 1 January 2016
+ * // to 1 January 2015, with a suffix?
+ * const result = formatDistance(new Date(2015, 0, 1), new Date(2016, 0, 1), {
+ *   addSuffix: true
+ * })
+ * //=> 'about 1 year ago'
+ *
+ * @example
+ * // What is the distance between 1 August 2016 and 1 January 2015 in Esperanto?
+ * import { eoLocale } from 'date-fns/locale/eo'
+ * const result = formatDistance(new Date(2016, 7, 1), new Date(2015, 0, 1), {
+ *   locale: eoLocale
+ * })
+ * //=> 'pli ol 1 jaro'
+ */function formatDistance(dirtyDate,dirtyBaseDate,options){var _ref,_options$locale;requiredArgs(2,arguments);var defaultOptions=getDefaultOptions();var locale=(_ref=(_options$locale=options===null||options===void 0?void 0:options.locale)!==null&&_options$locale!==void 0?_options$locale:defaultOptions.locale)!==null&&_ref!==void 0?_ref:defaultLocale;if(!locale.formatDistance){throw new RangeError('locale must contain formatDistance property');}var comparison=compareAsc(dirtyDate,dirtyBaseDate);if(isNaN(comparison)){throw new RangeError('Invalid time value');}var localizeOptions=assign(cloneObject(options),{addSuffix:Boolean(options===null||options===void 0?void 0:options.addSuffix),comparison:comparison});var dateLeft;var dateRight;if(comparison>0){dateLeft=toDate(dirtyBaseDate);dateRight=toDate(dirtyDate);}else{dateLeft=toDate(dirtyDate);dateRight=toDate(dirtyBaseDate);}var seconds=differenceInSeconds(dateRight,dateLeft);var offsetInSeconds=(getTimezoneOffsetInMilliseconds(dateRight)-getTimezoneOffsetInMilliseconds(dateLeft))/1000;var minutes=Math.round((seconds-offsetInSeconds)/60);var months;// 0 up to 2 mins
+if(minutes<2){if(options!==null&&options!==void 0&&options.includeSeconds){if(seconds<5){return locale.formatDistance('lessThanXSeconds',5,localizeOptions);}else if(seconds<10){return locale.formatDistance('lessThanXSeconds',10,localizeOptions);}else if(seconds<20){return locale.formatDistance('lessThanXSeconds',20,localizeOptions);}else if(seconds<40){return locale.formatDistance('halfAMinute',0,localizeOptions);}else if(seconds<60){return locale.formatDistance('lessThanXMinutes',1,localizeOptions);}else{return locale.formatDistance('xMinutes',1,localizeOptions);}}else{if(minutes===0){return locale.formatDistance('lessThanXMinutes',1,localizeOptions);}else{return locale.formatDistance('xMinutes',minutes,localizeOptions);}}// 2 mins up to 0.75 hrs
+}else if(minutes<45){return locale.formatDistance('xMinutes',minutes,localizeOptions);// 0.75 hrs up to 1.5 hrs
+}else if(minutes<90){return locale.formatDistance('aboutXHours',1,localizeOptions);// 1.5 hrs up to 24 hrs
+}else if(minutes<MINUTES_IN_DAY){var hours=Math.round(minutes/60);return locale.formatDistance('aboutXHours',hours,localizeOptions);// 1 day up to 1.75 days
+}else if(minutes<MINUTES_IN_ALMOST_TWO_DAYS){return locale.formatDistance('xDays',1,localizeOptions);// 1.75 days up to 30 days
+}else if(minutes<MINUTES_IN_MONTH){var days=Math.round(minutes/MINUTES_IN_DAY);return locale.formatDistance('xDays',days,localizeOptions);// 1 month up to 2 months
+}else if(minutes<MINUTES_IN_TWO_MONTHS){months=Math.round(minutes/MINUTES_IN_MONTH);return locale.formatDistance('aboutXMonths',months,localizeOptions);}months=differenceInMonths(dateRight,dateLeft);// 2 months up to 12 months
+if(months<12){var nearestMonth=Math.round(minutes/MINUTES_IN_MONTH);return locale.formatDistance('xMonths',nearestMonth,localizeOptions);// 1 year up to max Date
+}else{var monthsSinceStartOfYear=months%12;var years=Math.floor(months/12);// N years up to 1 years 3 months
+if(monthsSinceStartOfYear<3){return locale.formatDistance('aboutXYears',years,localizeOptions);// N years 3 months up to N years 9 months
+}else if(monthsSinceStartOfYear<9){return locale.formatDistance('overXYears',years,localizeOptions);// N years 9 months up to N year 12 months
+}else{return locale.formatDistance('almostXYears',years+1,localizeOptions);}}}/**
+ * @name formatDistanceToNow
+ * @category Common Helpers
+ * @summary Return the distance between the given date and now in words.
+ * @pure false
+ *
+ * @description
+ * Return the distance between the given date and now in words.
+ *
+ * | Distance to now                                                   | Result              |
+ * |-------------------------------------------------------------------|---------------------|
+ * | 0 ... 30 secs                                                     | less than a minute  |
+ * | 30 secs ... 1 min 30 secs                                         | 1 minute            |
+ * | 1 min 30 secs ... 44 mins 30 secs                                 | [2..44] minutes     |
+ * | 44 mins ... 30 secs ... 89 mins 30 secs                           | about 1 hour        |
+ * | 89 mins 30 secs ... 23 hrs 59 mins 30 secs                        | about [2..24] hours |
+ * | 23 hrs 59 mins 30 secs ... 41 hrs 59 mins 30 secs                 | 1 day               |
+ * | 41 hrs 59 mins 30 secs ... 29 days 23 hrs 59 mins 30 secs         | [2..30] days        |
+ * | 29 days 23 hrs 59 mins 30 secs ... 44 days 23 hrs 59 mins 30 secs | about 1 month       |
+ * | 44 days 23 hrs 59 mins 30 secs ... 59 days 23 hrs 59 mins 30 secs | about 2 months      |
+ * | 59 days 23 hrs 59 mins 30 secs ... 1 yr                           | [2..12] months      |
+ * | 1 yr ... 1 yr 3 months                                            | about 1 year        |
+ * | 1 yr 3 months ... 1 yr 9 month s                                  | over 1 year         |
+ * | 1 yr 9 months ... 2 yrs                                           | almost 2 years      |
+ * | N yrs ... N yrs 3 months                                          | about N years       |
+ * | N yrs 3 months ... N yrs 9 months                                 | over N years        |
+ * | N yrs 9 months ... N+1 yrs                                        | almost N+1 years    |
+ *
+ * With `options.includeSeconds == true`:
+ * | Distance to now     | Result               |
+ * |---------------------|----------------------|
+ * | 0 secs ... 5 secs   | less than 5 seconds  |
+ * | 5 secs ... 10 secs  | less than 10 seconds |
+ * | 10 secs ... 20 secs | less than 20 seconds |
+ * | 20 secs ... 40 secs | half a minute        |
+ * | 40 secs ... 60 secs | less than a minute   |
+ * | 60 secs ... 90 secs | 1 minute             |
+ *
+ * > ⚠️ Please note that this function is not present in the FP submodule as
+ * > it uses `Date.now()` internally hence impure and can't be safely curried.
+ *
+ * @param {Date|Number} date - the given date
+ * @param {Object} [options] - the object with options
+ * @param {Boolean} [options.includeSeconds=false] - distances less than a minute are more detailed
+ * @param {Boolean} [options.addSuffix=false] - result specifies if now is earlier or later than the passed date
+ * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
+ * @returns {String} the distance in words
+ * @throws {TypeError} 1 argument required
+ * @throws {RangeError} `date` must not be Invalid Date
+ * @throws {RangeError} `options.locale` must contain `formatDistance` property
+ *
+ * @example
+ * // If today is 1 January 2015, what is the distance to 2 July 2014?
+ * const result = formatDistanceToNow(
+ *   new Date(2014, 6, 2)
+ * )
+ * //=> '6 months'
+ *
+ * @example
+ * // If now is 1 January 2015 00:00:00,
+ * // what is the distance to 1 January 2015 00:00:15, including seconds?
+ * const result = formatDistanceToNow(
+ *   new Date(2015, 0, 1, 0, 0, 15),
+ *   {includeSeconds: true}
+ * )
+ * //=> 'less than 20 seconds'
+ *
+ * @example
+ * // If today is 1 January 2015,
+ * // what is the distance to 1 January 2016, with a suffix?
+ * const result = formatDistanceToNow(
+ *   new Date(2016, 0, 1),
+ *   {addSuffix: true}
+ * )
+ * //=> 'in about 1 year'
+ *
+ * @example
+ * // If today is 1 January 2015,
+ * // what is the distance to 1 August 2016 in Esperanto?
+ * const eoLocale = require('date-fns/locale/eo')
+ * const result = formatDistanceToNow(
+ *   new Date(2016, 7, 1),
+ *   {locale: eoLocale}
+ * )
+ * //=> 'pli ol 1 jaro'
+ */function formatDistanceToNow(dirtyDate,options){requiredArgs(1,arguments);return formatDistance(dirtyDate,Date.now(),options);}/**
+ * @name isAfter
+ * @category Common Helpers
+ * @summary Is the first date after the second one?
+ *
+ * @description
+ * Is the first date after the second one?
+ *
+ * @param {Date|Number} date - the date that should be after the other one to return true
+ * @param {Date|Number} dateToCompare - the date to compare with
+ * @returns {Boolean} the first date is after the second date
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Is 10 July 1989 after 11 February 1987?
+ * const result = isAfter(new Date(1989, 6, 10), new Date(1987, 1, 11))
+ * //=> true
+ */function isAfter(dirtyDate,dirtyDateToCompare){requiredArgs(2,arguments);var date=toDate(dirtyDate);var dateToCompare=toDate(dirtyDateToCompare);return date.getTime()>dateToCompare.getTime();}/**
+ * @name minutesToMilliseconds
+ * @category Conversion Helpers
+ * @summary Convert minutes to milliseconds.
+ *
+ * @description
+ * Convert a number of minutes to a full number of milliseconds.
+ *
+ * @param {number} minutes - number of minutes to be converted
+ *
+ * @returns {number} the number of minutes converted in milliseconds
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // Convert 2 minutes to milliseconds
+ * const result = minutesToMilliseconds(2)
+ * //=> 120000
+ */function minutesToMilliseconds(minutes){requiredArgs(1,arguments);return Math.floor(minutes*millisecondsInMinute);}const releaseAnnouncementUrl="https://www.sanity.io/blog/sanity-ai-assist-announcement?utm_source=sanity-assist-plugin&utm_medium=organic_social&utm_campaign=ai-assist&utm_content=";const instructionGuideUrl="https://sanity.io/guides/getting-started-with-ai-assist-instructions?utm_source=sanity-assist-plugin&utm_medium=organic_social&utm_campaign=ai-assist&utm_content=";const giveFeedbackUrl="https://forms.gle/Kwz7CThxGeA2GiEU8";const salesUrl="https://www.sanity.io/contact/sales?utm_source=sanity-assist-plugin&utm_medium=organic_social&utm_campaign=ai-assist&utm_content=";const packageName="@sanity/assist";const pluginTitle="Sanity AI Assist";const pluginTitleShort="AI Assist";const maxHistoryVisibilityMs=minutesToMilliseconds(30);function useStudioAssistDocument(_ref3){let{documentId,schemaType}=_ref3;const documentTypeName=schemaType.name;const currentUser=useCurrentUser();const validation=useValidationStatus(publicId(documentId),schemaType.name).validation;const assistDocument=useDocumentState(assistDocumentId(documentTypeName),assistDocumentTypeName);const assistTasksStatus=useDocumentState(assistTasksStatusId(documentId!=null?documentId:""),assistTasksStatusTypeName);const client=useClient({apiVersion:"2023-01-01"});useEffect(()=>{if(!assistDocument){client.createIfNotExists({_id:assistDocumentId(documentTypeName),_type:assistDocumentTypeName});}},[client,assistDocument,documentTypeName]);return useMemo(()=>{var _a,_b;if(!assistDocument){return void 0;}const tasks=(_a=assistTasksStatus==null?void 0:assistTasksStatus.tasks)!=null?_a:[];const fields=((_b=assistDocument==null?void 0:assistDocument.fields)!=null?_b:[]).map(assistField=>{var _a2;return{...assistField,tasks:tasks.filter(task=>task.path===assistField.path),instructions:(_a2=assistField.instructions)==null?void 0:_a2.filter(p=>!p.userId||p.userId===(currentUser==null?void 0:currentUser.id)).map(instruction=>asStudioInstruction(instruction,tasks,validation))};});return typed({...assistDocument,tasks:tasks==null?void 0:tasks.map(task=>{var _a2,_b2;const instruction=(_b2=(_a2=fields.find(f=>f.path===task.path))==null?void 0:_a2.instructions)==null?void 0:_b2.find(i=>i._key===task.instructionKey);return{...task,instruction};}),fields});},[assistDocument,assistTasksStatus,currentUser,validation]);}function asStudioInstruction(instruction,run,validation){var _a;const errors=validation.filter(marker=>marker.level==="error");const fieldRefs=((_a=instruction==null?void 0:instruction.prompt)!=null?_a:[]).flatMap(block=>{if(block._type==="block"){return block.children.filter(c=>c._type===fieldReferenceTypeName);}return[];});return{...instruction,tasks:run.filter(task=>task.instructionKey===instruction._key).filter(task=>task.started&&/* @__PURE__ */new Date().getTime()-new Date(task.started).getTime()<maxHistoryVisibilityMs),validation:errors.filter(marker=>fieldRefs.map(r=>r.path).filter(p=>!!p).find(path=>pathToString(marker.path)===path))};}function useInterval(ms){const[tick,update]=useReducer(n=>n+1,0);useEffect(()=>{const i=setInterval(update,ms);return()=>clearInterval(i);},[ms]);return tick;}function TimeAgo(_ref4){let{date}=_ref4;useInterval(1e3);const timeSince=formatDistanceToNow(date?new Date(date):/* @__PURE__ */new Date());return/* @__PURE__ */jsxs("span",{title:timeSince,children:[timeSince," ago"]});}function usePathKey(path){return useMemo(()=>{if(path.length){return Array.isArray(path)?pathToString(path):path;}return documentRootKey;},[path]);}function getInstructionTitle(instruction){var _a;return(_a=instruction==null?void 0:instruction.title)!=null?_a:"Untitled";}const rotate=$e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"])));const SyncSpinningIcon=styled(SyncIcon)(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n  animation: "," 1s linear infinite;\n"])),rotate);const TASK_CONFIG={aborted:{title:"Canceled",icon:CloseCircleIcon,tone:"transparent"},error:{title:"Error",icon:ErrorOutlineIcon,tone:"critical"},success:{title:"Completed",icon:CheckmarkCircleIcon,tone:"positive"},timeout:{title:"Timeout",icon:ClockIcon,tone:"caution"}};function InstructionTaskHistoryButton(props){const{tasks,instructions,documentId,showTitles}=props;const client=useClient({apiVersion:"2023-01-01"});const cancelRun=useCallback(taskKey=>{if(!documentId){return;}const statusDocId=assistTasksStatusId(documentId);const basePath="".concat(typed("tasks"),"[_key==\"").concat(taskKey,"\"]");client.patch(statusDocId).set({["".concat(basePath,".").concat(typed("ended"))]:/* @__PURE__ */new Date().toISOString(),["".concat(basePath,".").concat(typed("reason"))]:typed("aborted")}).commit().catch(console.error);},[client,documentId]);const titledTasks=useMemo(()=>{var _a;const t=(_a=tasks==null?void 0:tasks.filter(task=>task.started&&/* @__PURE__ */new Date().getTime()-new Date(task.started).getTime()<maxHistoryVisibilityMs).map(task=>{const instruction=instructions==null?void 0:instructions.find(i=>i._key===task.instructionKey);return{...task,title:showTitles?getInstructionTitle(instruction):void 0,cancel:()=>cancelRun(task._key)};}))!=null?_a:[];t.sort((a,b)=>{var _a2,_b;return new Date((_a2=b.started)!=null?_a2:"").getTime()-new Date((_b=a.started)!=null?_b:"").getTime();});return t;},[tasks,instructions,cancelRun,showTitles]);const isRunning=useMemo(()=>titledTasks.some(r=>!r.ended),[titledTasks]);const hasErrors=useMemo(()=>titledTasks.some(r=>r.reason==="error"||r.reason==="timeout"),[titledTasks]);const[open,setOpen]=useState(false);const toggleOpen=useCallback(()=>setOpen(v=>!v),[]);const[button,setButton]=useState(null);const[popover,setPopover]=useState(null);const handleClickOutside=useCallback(()=>{setOpen(false);},[]);useClickOutside(handleClickOutside,[button,popover]);const handleEscape=useCallback(()=>{setOpen(false);button==null?void 0:button.focus();},[button]);return/* @__PURE__ */jsx(Popover,{constrainSize:true,content:/* @__PURE__ */jsx(TaskList,{onEscape:handleEscape,tasks:titledTasks}),open:open&&!!(titledTasks==null?void 0:titledTasks.length),placement:"top",portal:true,ref:setPopover,width:0,children:/* @__PURE__ */jsx(TaskStatusButton,{disabled:!(titledTasks==null?void 0:titledTasks.length),hasErrors,isRunning,onClick:toggleOpen,ref:setButton,selected:open})});}const TASK_STATUS_BUTTON_TOOLTIP_PROPS={placement:"top"};const TaskStatusButton=forwardRef(function TaskStatusButton2(props,ref){const{disabled,hasErrors,isRunning,onClick,selected}=props;return/* @__PURE__ */jsx(StatusButton,{label:"".concat(pluginTitle," status"),icon:isRunning?SyncSpinningIcon:hasErrors?ErrorOutlineIcon:CheckmarkCircleIcon,mode:"bleed",onClick,tone:hasErrors?"critical":void 0,fontSize:1,disabled,ref,selected,tooltip:TASK_STATUS_BUTTON_TOOLTIP_PROPS});});function TaskList(props){const{onEscape,tasks}=props;const{isTopLayer}=useLayer();useGlobalKeyDown(useCallback(event=>{if(isTopLayer&&event.key==="Escape"){onEscape();}},[isTopLayer,onEscape]));return/* @__PURE__ */jsx(Stack,{padding:1,space:1,children:tasks.map(task=>/* @__PURE__ */jsx(TaskItem,{task},task._key))});}function TaskItem(props){var _a;const{task}=props;const taskType=task.reason&&TASK_CONFIG[task.reason];return/* @__PURE__ */jsx(Card,{radius:2,tone:taskType&&(taskType==null?void 0:taskType.tone),children:/* @__PURE__ */jsxs(Flex,{align:"center",gap:1,children:[/* @__PURE__ */jsxs(Flex,{align:"flex-start",flex:1,gap:3,padding:3,children:[/* @__PURE__ */jsx(Box,{flex:"none",children:/* @__PURE__ */jsxs(Text,{size:1,children:[taskType&&createElement(taskType.icon),!task.reason&&/* @__PURE__ */jsx(Spinner,{})]})}),/* @__PURE__ */jsxs(Stack,{flex:1,space:2,children:[/* @__PURE__ */jsxs(Text,{size:1,weight:"medium",children:[taskType?taskType.title:"Running",task.title&&/* @__PURE__ */jsxs(Fragment,{children:[": ",task.title]})]}),task.message?/* @__PURE__ */jsx(Text,{size:1,children:task.message}):null,/* @__PURE__ */jsx(Text,{muted:true,size:1,children:/* @__PURE__ */jsx(TimeAgo,{date:(_a=task.ended)!=null?_a:task.started})})]})]}),!task.ended&&/* @__PURE__ */jsx(Box,{flex:"none",padding:1,children:/* @__PURE__ */jsx(Button,{fontSize:1,mode:"bleed",onClick:task.cancel,text:"Cancel"})})]})});}const basePath="/assist/tasks/instruction";const editorialAiFieldActionFeature="editorialAiFieldActions";function useApiClient(customApiClient){const client=useClient({apiVersion:"2023-06-05"});return useMemo(()=>customApiClient?customApiClient(client):client,[client,customApiClient]);}function useGetInstructStatus(apiClient){const[loading,setLoading]=useState(true);const projectClient=useClient({apiVersion:"2023-06-05"});const getInstructStatus=useCallback(async()=>{setLoading(true);const projectId=apiClient.config().projectId;try{const features=await projectClient.request({method:"GET",url:"/projects/".concat(projectId,"/features")});const enabled=features.some(f=>f===editorialAiFieldActionFeature);const status=await apiClient.request({method:"GET",url:"".concat(basePath,"/").concat(apiClient.config().dataset,"/status?projectId=").concat(projectId)});return{...status,enabled};}finally{setLoading(false);}},[setLoading,apiClient,projectClient]);return{loading,getInstructStatus};}function useInitInstruct(apiClient){const[loading,setLoading]=useState(false);const initInstruct=useCallback(()=>{setLoading(true);return apiClient.request({method:"GET",url:"".concat(basePath,"/").concat(apiClient.config().dataset,"/init?projectId=").concat(apiClient.config().projectId)}).finally(()=>{setLoading(false);});},[setLoading,apiClient]);return{loading,initInstruct};}function useRunInstructionApi(apiClient){const toast=useToast();const[loading,setLoading]=useState(false);const user=useCurrentUser();const schema=useSchema();const types=useMemo(()=>serializeSchema(schema,{leanFormat:true}),[schema]);const runInstruction=useCallback(request=>{setLoading(true);return apiClient.request({method:"POST",url:"".concat(basePath,"/").concat(apiClient.config().dataset,"?projectId=").concat(apiClient.config().projectId),body:{...request,types,userId:user==null?void 0:user.id}}).catch(e=>{toast.push({status:"error",title:"Instruction failed",description:e.message});throw e;}).finally(()=>{setLoading(false);});},[apiClient,types,user,toast]);return useMemo(()=>({runInstruction,loading}),[runInstruction,loading]);}const AiAssistanceConfigContext=createContext({});function useAiAssistanceConfig(){const context=useContext(AiAssistanceConfigContext);if(!context){throw new Error("Missing AiAssistanceConfigContext");}return context;}function AiAssistanceConfigProvider(props){var _a;const[status,setStatus]=useState();const[error,setError]=useState();const apiClient=useApiClient((_a=props.config)==null?void 0:_a.__customApiClient);const{getInstructStatus,loading:statusLoading}=useGetInstructStatus(apiClient);const{initInstruct,loading:initLoading}=useInitInstruct(apiClient);useEffect(()=>{getInstructStatus().then(s=>setStatus(s)).catch(e=>{console.error(e);setError(e);});},[getInstructStatus]);const init=useCallback(async()=>{setError(void 0);try{await initInstruct();const status2=await getInstructStatus();setStatus(status2);}catch(e){console.error("Failed to init ai assistance",e);setError(e);}},[initInstruct,getInstructStatus,setStatus]);const{config,children}=props;const context=useMemo(()=>{return{config,status,statusLoading,init,initLoading,error};},[config,status,init,statusLoading,initLoading,error]);return/* @__PURE__ */jsx(AiAssistanceConfigContext.Provider,{value:context,children});}const NO_INPUT={};const RunInstructionContext=createContext({runInstruction:()=>{},instructionLoading:false});function useRunInstruction(){return useContext(RunInstructionContext);}function isUserInputBlock(block){return block._type===userInputTypeName;}function RunInstructionProvider(props){var _a;const{config}=useAiAssistanceConfig();const apiClient=useApiClient(config==null?void 0:config.__customApiClient);const{runInstruction:runInstructionRequest,loading}=useRunInstructionApi(apiClient);const id=useId();const[inputs,setInputs]=useState(NO_INPUT);const[runRequest,setRunRequest]=useState();const runInstruction=useCallback(req=>{var _a2;if(loading){return;}const{instruction,...request}=req;const instructionKey=instruction._key;const userInputBlocks=(_a2=instruction==null?void 0:instruction.prompt)==null?void 0:_a2.flatMap(block=>block._type==="block"?block.children.filter(isUserInputBlock):[block]).filter(isUserInputBlock);if(!(userInputBlocks==null?void 0:userInputBlocks.length)){runInstructionRequest({...request,instructionKey,userTexts:void 0});return;}setRunRequest({...req,userInputBlocks});},[setRunRequest,runInstructionRequest,loading]);const close=useCallback(()=>{setRunRequest(void 0);setInputs(NO_INPUT);},[setRunRequest,setInputs]);const runWithInput=useCallback(()=>{if(runRequest){const{instruction,userTexts,...request}=runRequest;runInstructionRequest({...request,instructionKey:instruction._key,userTexts:Object.entries(inputs).map(_ref5=>{let[key,value]=_ref5;return{blockKey:key,userInput:value};})});}close();},[close,runInstructionRequest,runRequest,inputs]);const open=!!runRequest;const runDisabled=useMemo(()=>{var _a2,_b;return((_b=(_a2=runRequest==null?void 0:runRequest.userInputBlocks)==null?void 0:_a2.length)!=null?_b:0)>Object.entries(inputs).filter(_ref6=>{let[,value]=_ref6;return!!value;}).length;},[runRequest==null?void 0:runRequest.userInputBlocks,inputs]);const runButton=/* @__PURE__ */jsx(Button,{text:"Run instruction",onClick:runWithInput,tone:"primary",icon:PlayIcon,style:{width:"100%"},disabled:runDisabled});const contextValue=useMemo(()=>({runInstruction,instructionLoading:loading}),[runInstruction,loading]);return/* @__PURE__ */jsxs(RunInstructionContext.Provider,{value:contextValue,children:[open?/* @__PURE__ */jsx(Dialog,{id,open,onClose:close,width:1,header:getInstructionTitle(runRequest==null?void 0:runRequest.instruction),footer:/* @__PURE__ */jsx(Flex,{justify:"space-between",padding:2,flex:1,children:runDisabled?/* @__PURE__ */jsx(Tooltip,{content:/* @__PURE__ */jsx(Flex,{padding:2,children:/* @__PURE__ */jsx(Text,{children:"Unable to run instruction. All fields must have a value."})}),placement:"top",children:/* @__PURE__ */jsx(Flex,{flex:1,children:runButton})}):runButton}),children:/* @__PURE__ */jsx(Stack,{padding:4,space:2,children:(_a=runRequest==null?void 0:runRequest.userInputBlocks)==null?void 0:_a.map((block,i)=>/* @__PURE__ */jsx(UserInput,{block,autoFocus:i===0,inputs,setInputs},block._key))})}):null,props.children]});}function UserInput(props){var _a;const{block,autoFocus,setInputs,inputs}=props;const key=block._key;const textAreaRef=useRef(null);const onChange=useCallback(e=>{setInputs(current=>{var _a2;return{...current,[key]:((_a2=e.currentTarget)!=null?_a2:e.target).value};});},[key,setInputs]);const value=useMemo(()=>inputs[key],[inputs,key]);useEffect(()=>{if(!autoFocus){return;}setTimeout(()=>{var _a2;return(_a2=textAreaRef.current)==null?void 0:_a2.focus();},0);},[autoFocus]);return/* @__PURE__ */jsxs(Stack,{padding:2,space:3,children:[/* @__PURE__ */jsx(FormFieldHeaderText,{title:(_a=block==null?void 0:block.message)!=null?_a:"Provide more context",description:block.description}),/* @__PURE__ */jsx(TextArea,{ref:textAreaRef,rows:4,value,onChange,style:{resize:"vertical"}})]});}function isDocAssistable(documentSchemaType,published,draft){return!!(documentSchemaType.liveEdit?published:draft);}function getAssistableDocId(documentSchemaType,documentId){const baseId=publicId(documentId);return documentSchemaType.liveEdit?baseId:"drafts.".concat(baseId);}function useRequestRunInstruction(args){const{documentOnChange,isDocAssistable:isDocAssistable2}=args;const{runInstruction,instructionLoading}=useRunInstruction();const[queuedTask,setQueuedTask]=useState(void 0);useEffect(()=>{if(queuedTask&&isDocAssistable2){runInstruction(queuedTask);setQueuedTask(void 0);}},[queuedTask,isDocAssistable2,runInstruction]);return{instructionLoading,requestRunInstruction:useCallback(task=>{documentOnChange(PatchEvent.from([unset(["_force_document_creation"])]));setQueuedTask(task);},[setQueuedTask,documentOnChange])};}const SparklesIllustration=styled(SparklesIcon)({fontSize:"3.125em","& path":{strokeWidth:"0.6px !important"}});function InspectorOnboarding(props){const{onDismiss}=props;return/* @__PURE__ */jsx(Box,{padding:4,children:/* @__PURE__ */jsx(Container,{width:0,children:/* @__PURE__ */jsxs(Stack,{space:4,children:[/* @__PURE__ */jsx("div",{style:{textAlign:"center"},children:/* @__PURE__ */jsx(SparklesIllustration,{})}),/* @__PURE__ */jsx(Text,{align:"center",size:1,children:"Create reusable AI instructions that can be applied across all documents of a certain type."}),/* @__PURE__ */jsxs(Flex,{align:"center",gap:2,justify:"center",children:[/* @__PURE__ */jsx(Button,{as:"a",href:releaseAnnouncementUrl,rel:"noreferrer",target:"_blank",fontSize:1,mode:"default",onClick:onDismiss,padding:2,text:"Learn more",tone:"primary"}),/* @__PURE__ */jsx(Button,{fontSize:1,mode:"bleed",onClick:onDismiss,padding:2,text:"Dismiss"})]})]})})});}const inspectorOnboardingKey="sanityStudio:assist:inspector:onboarding:dismissed";const fieldOnboardingKey="sanityStudio:assist:field:onboarding:dismissed";function isFeatureOnboardingDismissed(featureKey){if(typeof localStorage==="undefined"){return false;}const value=localStorage.getItem(featureKey);return value==="true";}function dismissFeatureOnboarding(featureKey){if(typeof localStorage==="undefined"){return;}localStorage.setItem(featureKey,"true");}function useOnboardingFeature(featureKey){const[showOnboarding,setShowOnboarding]=useState(()=>!isFeatureOnboardingDismissed(featureKey));const dismissOnboarding=useCallback(()=>{setShowOnboarding(false);dismissFeatureOnboarding(featureKey);},[setShowOnboarding,featureKey]);return{showOnboarding,dismissOnboarding};}const CardWithShadowBelow=styled(Card)(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    border-bottom: 1px solid var(--card-border-color);\n    opacity: 0.5;\n    z-index: 100;\n  }\n"])));const CardWithShadowAbove=styled(Card)(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: -1px;\n    border-top: 1px solid var(--card-border-color);\n    opacity: 0.5;\n    z-index: 100;\n  }\n"])));function AssistInspectorWrapper(props){const context=useAiAssistanceConfig();if(context.statusLoading){return/* @__PURE__ */jsx(Flex,{align:"center",height:"fill",justify:"center",padding:4,sizing:"border",children:/* @__PURE__ */jsxs(Stack,{space:3,style:{textAlign:"center"},children:[/* @__PURE__ */jsx(Spinner,{muted:true}),/* @__PURE__ */jsxs(Text,{muted:true,size:1,children:["Loading ",pluginTitle,"..."]})]})});}const status=context.status;if(!(status==null?void 0:status.enabled)){return/* @__PURE__ */jsxs(Flex,{direction:"column",height:"fill",children:[/* @__PURE__ */jsx(DocumentInspectorHeader,{closeButtonLabel:"Close",onClose:props.onClose,title:pluginTitle}),/* @__PURE__ */jsxs(Stack,{flex:1,overflow:"auto",padding:4,space:3,children:[/* @__PURE__ */jsxs(Text,{as:"p",size:1,weight:"semibold",children:[pluginTitle," is not available"]}),/* @__PURE__ */jsxs(Text,{as:"p",muted:true,size:1,children:["Please get in touch with a Sanity account manager or"," ",/* @__PURE__ */jsx("a",{href:salesUrl,target:"_blank",rel:"noreferrer",children:"contact our sales team"})," ","to get started with ",pluginTitle,"."," ",/* @__PURE__ */jsx("a",{href:releaseAnnouncementUrl,target:"_blank",rel:"noreferrer",children:"Learn more \u2192"})]})]})]});}if(!(status==null?void 0:status.initialized)||!status.validToken){return/* @__PURE__ */jsxs(Flex,{direction:"column",height:"fill",children:[/* @__PURE__ */jsx(DocumentInspectorHeader,{closeButtonLabel:"Close",onClose:props.onClose,title:pluginTitle}),/* @__PURE__ */jsxs(Stack,{padding:4,space:3,children:[context.error?/* @__PURE__ */jsxs(Text,{size:1,weight:"semibold",children:["Failed to start ",pluginTitle]}):null,!context.error&&!(status==null?void 0:status.initialized)?/* @__PURE__ */jsxs(Text,{size:1,weight:"semibold",children:[pluginTitle," is not enabled"]}):null,!context.error&&(status==null?void 0:status.initialized)&&!status.validToken?/* @__PURE__ */jsxs(Fragment,{children:[/* @__PURE__ */jsx(Text,{size:1,weight:"semibold",children:"Invalid token"}),/* @__PURE__ */jsx(Text,{muted:true,size:1,children:"The token used by the AI Assistant is not valid and has to be regenerated."})]}):null,context.error&&/* @__PURE__ */jsx(Text,{muted:true,size:1,children:"Something went wrong. See console for details."}),!context.error&&!(status==null?void 0:status.initialized)&&/* @__PURE__ */jsxs(Text,{size:1,muted:true,children:["Please enable ",pluginTitle,"."]}),/* @__PURE__ */jsx(Button,{fontSize:1,icon:context.initLoading?/* @__PURE__ */jsx(Box,{marginTop:1,children:/* @__PURE__ */jsx(Spinner,{})}):context.error?RetryIcon:void 0,text:context.error?"Retry":(status==null?void 0:status.initialized)&&!status.validToken?"Restore ".concat(pluginTitle):"Enable ".concat(pluginTitle," now"),tone:"primary",onClick:context.init,disabled:context.initLoading})]})]});}return/* @__PURE__ */jsx(AssistInspector,{...props});}function AssistInspector(props){var _a,_b;const{params}=useAiPaneRouter();const[boundary,setBoundary]=useState(null);const pathKey=params==null?void 0:params[fieldPathParam];const instructionKey=params==null?void 0:params[instructionParam];const documentPane=useDocumentPane();const{documentId,documentType,schemaType,onChange:documentOnChange}=documentPane;const{published,draft}=useEditState(documentId,documentType,"low");const assistableDocId=getAssistableDocId(schemaType,documentId);const{instructionLoading,requestRunInstruction}=useRequestRunInstruction({documentOnChange,isDocAssistable:isDocAssistable(schemaType,published,draft)});const selectedField=useSelectedField(schemaType,params[fieldPathParam]);const aiDocId=assistDocumentId(documentType);const assistDocument=useStudioAssistDocument({documentId,schemaType});const assistField=(_a=assistDocument==null?void 0:assistDocument.fields)==null?void 0:_a.find(f=>f.path===pathKey);const instruction=(_b=assistField==null?void 0:assistField.instructions)==null?void 0:_b.find(i=>i._key===instructionKey);const tasks=useMemo(()=>{var _a2;return(_a2=assistDocument==null?void 0:assistDocument.tasks)==null?void 0:_a2.filter(i=>!instructionKey||i.instructionKey===instructionKey);},[assistDocument==null?void 0:assistDocument.tasks,instructionKey]);const instructions=useMemo(()=>{var _a2;return(_a2=assistDocument==null?void 0:assistDocument.fields)==null?void 0:_a2.flatMap(f=>{var _a3;return(_a3=f.instructions)!=null?_a3:[];});},[assistDocument==null?void 0:assistDocument.fields]);const promptValue=instruction==null?void 0:instruction.prompt;const isEmptyPrompt=useMemo(()=>{var _a2,_b2;if(!(promptValue==null?void 0:promptValue.length)){return true;}const firstBlock=promptValue[0];const children=firstBlock==null?void 0:firstBlock.children;return promptValue.length==1&&(children==null?void 0:children.length)===1&&!((_b2=(_a2=children==null?void 0:children[0])==null?void 0:_a2.text)==null?void 0:_b2.length);},[promptValue]);const paneNode=useMemo(()=>({type:"document",id:aiDocId,title:pluginTitle,options:{id:aiDocId,type:assistDocumentTypeName}}),[aiDocId]);const runCurrentInstruction=useCallback(()=>instruction&&pathKey&&requestRunInstruction({documentId:assistableDocId,path:pathKey,assistDocumentId:assistDocumentId(documentType),instruction}),[instruction,pathKey,documentType,assistableDocId,requestRunInstruction]);const Region=useCallback(_props=>{return/* @__PURE__ */jsx("div",{..._props,style:{height:"100%",flex:1,overflow:"auto"}});},[]);if(!documentId||!schemaType||schemaType.jsonType!=="object"){return/* @__PURE__ */jsx(Card,{flex:1,padding:4,children:/* @__PURE__ */jsx(Text,{children:"Document not ready yet."})});}return/* @__PURE__ */jsxs(Flex,{ref:setBoundary,direction:"column",height:"fill",overflow:"hidden",sizing:"border",style:{lineHeight:0},children:[/* @__PURE__ */jsx(AiInspectorHeader,{onClose:props.onClose,fieldTitle:getFieldTitle(selectedField)}),/* @__PURE__ */jsx(Card,{as:Region,flex:1,overflow:"auto",children:/* @__PURE__ */jsxs(Flex,{direction:"column",style:{minHeight:"100%"},children:[/* @__PURE__ */jsx(Box,{flex:1,children:/* @__PURE__ */jsx(PresenceOverlay,{children:/* @__PURE__ */jsx(Box,{padding:4,children:selectedField&&/* @__PURE__ */jsx(VirtualizerScrollInstanceProvider,{scrollElement:boundary,children:/* @__PURE__ */jsx(DocumentPaneProvider,{paneKey:documentPane.paneKey,index:documentPane.index,itemId:"ai",pane:paneNode,children:/* @__PURE__ */jsx(DocumentForm,{})})})})})}),/* @__PURE__ */jsx(Box,{flex:"none",padding:4,children:/* @__PURE__ */jsxs(Text,{muted:true,size:1,children:["How is Sanity AI Assist working for you?"," ",/* @__PURE__ */jsxs("a",{href:giveFeedbackUrl,target:"_blank",rel:"noreferrer",style:{whiteSpace:"nowrap"},children:["Let us know ",/* @__PURE__ */jsx(ArrowRightIcon,{})]})]})})]})}),/* @__PURE__ */jsx(CardWithShadowAbove,{flex:"none",paddingX:4,paddingY:3,style:{justifySelf:"flex-end"},children:/* @__PURE__ */jsxs(Flex,{gap:2,flex:1,justify:"flex-end",children:[(schemaType==null?void 0:schemaType.name)&&pathKey&&instructionKey&&/* @__PURE__ */jsx(Stack,{flex:1,children:/* @__PURE__ */jsx(Button,{mode:"ghost",disabled:isEmptyPrompt||instructionLoading,fontSize:1,icon:instructionLoading?/* @__PURE__ */jsx(Spinner,{}):PlayIcon,onClick:runCurrentInstruction,padding:3,text:"Run instruction"})}),/* @__PURE__ */jsx(InstructionTaskHistoryButton,{documentId:assistableDocId,tasks,instructions,showTitles:!instructionKey})]})})]});}function AiInspectorHeader(props){const{onClose,fieldTitle}=props;const{showOnboarding,dismissOnboarding}=useOnboardingFeature(inspectorOnboardingKey);return/* @__PURE__ */jsxs(CardWithShadowBelow,{flex:"none",padding:2,children:[/* @__PURE__ */jsxs(Flex,{flex:1,align:"center",children:[/* @__PURE__ */jsx(Flex,{flex:1,padding:3,gap:2,align:"center",children:/* @__PURE__ */jsxs(Flex,{gap:1,align:"center",children:[/* @__PURE__ */jsx(Text,{size:1,weight:"semibold",children:"AI instructions for"}),/* @__PURE__ */jsx(Card,{radius:2,border:true,padding:1,style:{margin:"-4px 0"},children:/* @__PURE__ */jsx(Text,{size:1,weight:"semibold",children:fieldTitle})})]})}),/* @__PURE__ */jsx(Box,{flex:"none",children:/* @__PURE__ */jsx(Button,{fontSize:1,icon:CloseIcon,mode:"bleed",onClick:onClose})})]}),showOnboarding&&/* @__PURE__ */jsx(InspectorOnboarding,{onDismiss:dismissOnboarding})]});}const assistInspector={name:aiInspectorId,useMenuItem:()=>({icon:SparklesIcon,title:pluginTitle,hidden:true,showAsAction:false}),component:AssistInspectorWrapper,onClose(_ref7){let{params}=_ref7;return{params:typed({...params,[fieldPathParam]:void 0,[instructionParam]:void 0})};}};const AssistDocumentContext=createContext(void 0);function useAssistDocumentContext(){const context=useContext(AssistDocumentContext);if(!context){throw new Error("AssistDocumentContext value is missing");}return context;}const NO_PRESENCE=[];function useAssistPresence(path,showFocusWithin){const context=useAssistDocumentContext();const assistDocument=context&&"assistDocument"in context?context.assistDocument:void 0;const tasks=assistDocument==null?void 0:assistDocument.tasks;return useMemo(()=>{var _a,_b;const activePresence=(_b=(_a=tasks==null?void 0:tasks.filter(task=>!task.ended))==null?void 0:_a.flatMap(task=>{var _a2;return(_a2=task.presence)!=null?_a2:[];}))==null?void 0:_b.filter(p=>p.started&&/* @__PURE__ */new Date().getTime()-new Date(p.started).getTime()<maxHistoryVisibilityMs).filter(presence=>{if(!presence.path||!path.length){return false;}const statusPath=stringToPath(presence.path);if(!showFocusWithin&&statusPath.length!==path.length){return false;}return path.every((pathSegment,i)=>{const statusSegment=statusPath[i];if(typeof pathSegment==="string"){return pathSegment===statusSegment;}if(isKeySegment(pathSegment)&&isKeySegment(statusSegment)){return pathSegment._key===statusSegment._key;}return false;});});if(!(activePresence==null?void 0:activePresence.length)){return NO_PRESENCE;}return activePresence.map(status=>aiPresence(status,path));},[showFocusWithin,tasks,path]);}function aiPresence(presence,path,title){var _a;return{user:{id:"sanity-assistant_".concat(presence._key),displayName:pluginTitle},path,sessionId:"not-available",lastActiveAt:(_a=presence==null?void 0:presence.started)!=null?_a:/* @__PURE__ */new Date().toISOString()};}/**
+ * @public
+ */const MotionConfigContext=createContext({transformPagePoint:p=>p,isStatic:false,reducedMotion:"never"});const MotionContext=createContext({});/**
+ * @public
+ */const PresenceContext=createContext(null);const isBrowser=typeof document!=="undefined";const useIsomorphicLayoutEffect=isBrowser?useLayoutEffect:useEffect;const LazyContext=createContext({strict:false});function useVisualElement(Component,visualState,props,createVisualElement){const{visualElement:parent}=useContext(MotionContext);const lazyContext=useContext(LazyContext);const presenceContext=useContext(PresenceContext);const reducedMotionConfig=useContext(MotionConfigContext).reducedMotion;const visualElementRef=useRef();/**
+     * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
+     */createVisualElement=createVisualElement||lazyContext.renderer;if(!visualElementRef.current&&createVisualElement){visualElementRef.current=createVisualElement(Component,{visualState,parent,props,presenceContext,blockInitialAnimation:presenceContext?presenceContext.initial===false:false,reducedMotionConfig});}const visualElement=visualElementRef.current;useInsertionEffect(()=>{visualElement&&visualElement.update(props,presenceContext);});useIsomorphicLayoutEffect(()=>{visualElement&&visualElement.render();});useEffect(()=>{visualElement&&visualElement.updateFeatures();});/**
+     * Ideally this function would always run in a useEffect.
+     *
+     * However, if we have optimised appear animations to handoff from,
+     * it needs to happen synchronously to ensure there's no flash of
+     * incorrect styles in the event of a hydration error.
+     *
+     * So if we detect a situtation where optimised appear animations
+     * are running, we use useLayoutEffect to trigger animations.
+     */const useAnimateChangesEffect=window.HandoffAppearAnimations?useIsomorphicLayoutEffect:useEffect;useAnimateChangesEffect(()=>{if(visualElement&&visualElement.animationState){visualElement.animationState.animateChanges();}});return visualElement;}function isRefObject(ref){return typeof ref==="object"&&Object.prototype.hasOwnProperty.call(ref,"current");}/**
+ * Creates a ref function that, when called, hydrates the provided
+ * external ref and VisualElement.
+ */function useMotionRef(visualState,visualElement,externalRef){return useCallback(instance=>{instance&&visualState.mount&&visualState.mount(instance);if(visualElement){instance?visualElement.mount(instance):visualElement.unmount();}if(externalRef){if(typeof externalRef==="function"){externalRef(instance);}else if(isRefObject(externalRef)){externalRef.current=instance;}}},/**
+     * Only pass a new ref callback to React if we've received a visual element
+     * factory. Otherwise we'll be mounting/remounting every time externalRef
+     * or other dependencies change.
+     */[visualElement]);}/**
+ * Decides if the supplied variable is variant label
+ */function isVariantLabel(v){return typeof v==="string"||Array.isArray(v);}function isAnimationControls(v){return typeof v==="object"&&typeof v.start==="function";}const variantPriorityOrder=["animate","whileInView","whileFocus","whileHover","whileTap","whileDrag","exit"];const variantProps=["initial",...variantPriorityOrder];function isControllingVariants(props){return isAnimationControls(props.animate)||variantProps.some(name=>isVariantLabel(props[name]));}function isVariantNode(props){return Boolean(isControllingVariants(props)||props.variants);}function getCurrentTreeVariants(props,context){if(isControllingVariants(props)){const{initial,animate}=props;return{initial:initial===false||isVariantLabel(initial)?initial:undefined,animate:isVariantLabel(animate)?animate:undefined};}return props.inherit!==false?context:{};}function useCreateMotionContext(props){const{initial,animate}=getCurrentTreeVariants(props,useContext(MotionContext));return useMemo(()=>({initial,animate}),[variantLabelsAsDependency(initial),variantLabelsAsDependency(animate)]);}function variantLabelsAsDependency(prop){return Array.isArray(prop)?prop.join(" "):prop;}const featureProps={animation:["animate","variants","whileHover","whileTap","exit","whileInView","whileFocus","whileDrag"],exit:["exit"],drag:["drag","dragControls"],focus:["whileFocus"],hover:["whileHover","onHoverStart","onHoverEnd"],tap:["whileTap","onTap","onTapStart","onTapCancel"],pan:["onPan","onPanStart","onPanSessionStart","onPanEnd"],inView:["whileInView","onViewportEnter","onViewportLeave"],layout:["layout","layoutId"]};const featureDefinitions={};for(const key in featureProps){featureDefinitions[key]={isEnabled:props=>featureProps[key].some(name=>!!props[name])};}function loadFeatures(features){for(const key in features){featureDefinitions[key]={...featureDefinitions[key],...features[key]};}}const LayoutGroupContext=createContext({});/**
+ * Internal, exported only for usage in Framer
+ */const SwitchLayoutGroupContext=createContext({});const motionComponentSymbol=Symbol.for("motionComponentSymbol");/**
+ * Create a `motion` component.
+ *
+ * This function accepts a Component argument, which can be either a string (ie "div"
+ * for `motion.div`), or an actual React component.
+ *
+ * Alongside this is a config option which provides a way of rendering the provided
+ * component "offline", or outside the React render cycle.
+ */function createMotionComponent(_ref8){let{preloadedFeatures,createVisualElement,useRender,useVisualState,Component}=_ref8;preloadedFeatures&&loadFeatures(preloadedFeatures);function MotionComponent(props,externalRef){/**
+         * If we need to measure the element we load this functionality in a
+         * separate class component in order to gain access to getSnapshotBeforeUpdate.
+         */let MeasureLayout;const configAndProps={...useContext(MotionConfigContext),...props,layoutId:useLayoutId(props)};const{isStatic}=configAndProps;const context=useCreateMotionContext(props);const visualState=useVisualState(props,isStatic);if(!isStatic&&isBrowser){/**
+             * Create a VisualElement for this component. A VisualElement provides a common
+             * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as
+             * providing a way of rendering to these APIs outside of the React render loop
+             * for more performant animations and interactions
+             */context.visualElement=useVisualElement(Component,visualState,configAndProps,createVisualElement);/**
+             * Load Motion gesture and animation features. These are rendered as renderless
+             * components so each feature can optionally make use of React lifecycle methods.
+             */const initialLayoutGroupConfig=useContext(SwitchLayoutGroupContext);const isStrict=useContext(LazyContext).strict;if(context.visualElement){MeasureLayout=context.visualElement.loadFeatures(// Note: Pass the full new combined props to correctly re-render dynamic feature components.
+configAndProps,isStrict,preloadedFeatures,initialLayoutGroupConfig);}}/**
+         * The mount order and hierarchy is specific to ensure our element ref
+         * is hydrated by the time features fire their effects.
+         */return React.createElement(MotionContext.Provider,{value:context},MeasureLayout&&context.visualElement?React.createElement(MeasureLayout,{visualElement:context.visualElement,...configAndProps}):null,useRender(Component,props,useMotionRef(visualState,context.visualElement,externalRef),visualState,isStatic,context.visualElement));}const ForwardRefComponent=forwardRef(MotionComponent);ForwardRefComponent[motionComponentSymbol]=Component;return ForwardRefComponent;}function useLayoutId(_ref9){let{layoutId}=_ref9;const layoutGroupId=useContext(LayoutGroupContext).id;return layoutGroupId&&layoutId!==undefined?layoutGroupId+"-"+layoutId:layoutId;}/**
+ * Convert any React component into a `motion` component. The provided component
+ * **must** use `React.forwardRef` to the underlying DOM component you want to animate.
+ *
+ * ```jsx
+ * const Component = React.forwardRef((props, ref) => {
+ *   return <div ref={ref} />
+ * })
+ *
+ * const MotionComponent = motion(Component)
+ * ```
+ *
+ * @public
+ */function createMotionProxy(createConfig){function custom(Component){let customMotionComponentConfig=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};return createMotionComponent(createConfig(Component,customMotionComponentConfig));}if(typeof Proxy==="undefined"){return custom;}/**
+     * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
+     * Rather than generating them anew every render.
+     */const componentCache=new Map();return new Proxy(custom,{/**
+         * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
+         * The prop name is passed through as `key` and we can use that to generate a `motion`
+         * DOM component with that name.
+         */get:(_target,key)=>{/**
+             * If this element doesn't exist in the component cache, create it and cache.
+             */if(!componentCache.has(key)){componentCache.set(key,custom(key));}return componentCache.get(key);}});}/**
+ * We keep these listed seperately as we use the lowercase tag names as part
+ * of the runtime bundle to detect SVG components
+ */const lowercaseSVGElements=["animate","circle","defs","desc","ellipse","g","image","line","filter","marker","mask","metadata","path","pattern","polygon","polyline","rect","stop","switch","symbol","svg","text","tspan","use","view"];function isSVGComponent(Component){if(/**
+     * If it's not a string, it's a custom React component. Currently we only support
+     * HTML custom React components.
+     */typeof Component!=="string"||/**
+         * If it contains a dash, the element is a custom HTML webcomponent.
+         */Component.includes("-")){return false;}else if(/**
+     * If it's in our list of lowercase SVG tags, it's an SVG component
+     */lowercaseSVGElements.indexOf(Component)>-1||/**
+         * If it contains a capital letter, it's an SVG component
+         */ /[A-Z]/.test(Component)){return true;}return false;}const scaleCorrectors={};function addScaleCorrector(correctors){Object.assign(scaleCorrectors,correctors);}/**
+ * Generate a list of every possible transform key.
+ */const transformPropOrder=["transformPerspective","x","y","z","translateX","translateY","translateZ","scale","scaleX","scaleY","rotate","rotateX","rotateY","rotateZ","skew","skewX","skewY"];/**
+ * A quick lookup for transform props.
+ */const transformProps=new Set(transformPropOrder);function isForcedMotionValue(key,_ref10){let{layout,layoutId}=_ref10;return transformProps.has(key)||key.startsWith("origin")||(layout||layoutId!==undefined)&&(!!scaleCorrectors[key]||key==="opacity");}const isMotionValue=value=>Boolean(value&&value.getVelocity);const translateAlias={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"};const numTransforms=transformPropOrder.length;/**
+ * Build a CSS transform style from individual x/y/scale etc properties.
+ *
+ * This outputs with a default order of transforms/scales/rotations, this can be customised by
+ * providing a transformTemplate function.
+ */function buildTransform(transform,_ref11,transformIsDefault,transformTemplate){let{enableHardwareAcceleration=true,allowTransformNone=true}=_ref11;// The transform string we're going to build into.
+let transformString="";/**
+     * Loop over all possible transforms in order, adding the ones that
+     * are present to the transform string.
+     */for(let i=0;i<numTransforms;i++){const key=transformPropOrder[i];if(transform[key]!==undefined){const transformName=translateAlias[key]||key;transformString+="".concat(transformName,"(").concat(transform[key],") ");}}if(enableHardwareAcceleration&&!transform.z){transformString+="translateZ(0)";}transformString=transformString.trim();// If we have a custom `transform` template, pass our transform values and
+// generated transformString to that before returning
+if(transformTemplate){transformString=transformTemplate(transform,transformIsDefault?"":transformString);}else if(allowTransformNone&&transformIsDefault){transformString="none";}return transformString;}const checkStringStartsWith=token=>key=>typeof key==="string"&&key.startsWith(token);const isCSSVariableName=checkStringStartsWith("--");const isCSSVariableToken=checkStringStartsWith("var(--");const cssVariableRegex=/var\s*\(\s*--[\w-]+(\s*,\s*(?:(?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)+)?\s*\)/g;/**
+ * Provided a value and a ValueType, returns the value as that value type.
+ */const getValueAsType=(value,type)=>{return type&&typeof value==="number"?type.transform(value):value;};const clamp=(min,max,v)=>Math.min(Math.max(v,min),max);const number={test:v=>typeof v==="number",parse:parseFloat,transform:v=>v};const alpha={...number,transform:v=>clamp(0,1,v)};const scale={...number,default:1};/**
+ * TODO: When we move from string as a source of truth to data models
+ * everything in this folder should probably be referred to as models vs types
+ */ // If this number is a decimal, make it just five decimal places
+// to avoid exponents
+const sanitize=v=>Math.round(v*100000)/100000;const floatRegex=/(-)?([\d]*\.?[\d])+/g;const colorRegex=/(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi;const singleColorRegex=/^(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i;function isString(v){return typeof v==="string";}const createUnitType=unit=>({test:v=>isString(v)&&v.endsWith(unit)&&v.split(" ").length===1,parse:parseFloat,transform:v=>"".concat(v).concat(unit)});const degrees=createUnitType("deg");const percent=createUnitType("%");const px=createUnitType("px");const vh=createUnitType("vh");const vw=createUnitType("vw");const progressPercentage={...percent,parse:v=>percent.parse(v)/100,transform:v=>percent.transform(v*100)};const int={...number,transform:Math.round};const numberValueTypes={// Border props
+borderWidth:px,borderTopWidth:px,borderRightWidth:px,borderBottomWidth:px,borderLeftWidth:px,borderRadius:px,radius:px,borderTopLeftRadius:px,borderTopRightRadius:px,borderBottomRightRadius:px,borderBottomLeftRadius:px,// Positioning props
+width:px,maxWidth:px,height:px,maxHeight:px,size:px,top:px,right:px,bottom:px,left:px,// Spacing props
+padding:px,paddingTop:px,paddingRight:px,paddingBottom:px,paddingLeft:px,margin:px,marginTop:px,marginRight:px,marginBottom:px,marginLeft:px,// Transform props
+rotate:degrees,rotateX:degrees,rotateY:degrees,rotateZ:degrees,scale,scaleX:scale,scaleY:scale,scaleZ:scale,skew:degrees,skewX:degrees,skewY:degrees,distance:px,translateX:px,translateY:px,translateZ:px,x:px,y:px,z:px,perspective:px,transformPerspective:px,opacity:alpha,originX:progressPercentage,originY:progressPercentage,originZ:px,// Misc
+zIndex:int,// SVG
+fillOpacity:alpha,strokeOpacity:alpha,numOctaves:int};function buildHTMLStyles(state,latestValues,options,transformTemplate){const{style,vars,transform,transformOrigin}=state;// Track whether we encounter any transform or transformOrigin values.
+let hasTransform=false;let hasTransformOrigin=false;// Does the calculated transform essentially equal "none"?
+let transformIsNone=true;/**
+     * Loop over all our latest animated values and decide whether to handle them
+     * as a style or CSS variable.
+     *
+     * Transforms and transform origins are kept seperately for further processing.
+     */for(const key in latestValues){const value=latestValues[key];/**
+         * If this is a CSS variable we don't do any further processing.
+         */if(isCSSVariableName(key)){vars[key]=value;continue;}// Convert the value to its default value type, ie 0 -> "0px"
+const valueType=numberValueTypes[key];const valueAsType=getValueAsType(value,valueType);if(transformProps.has(key)){// If this is a transform, flag to enable further transform processing
+hasTransform=true;transform[key]=valueAsType;// If we already know we have a non-default transform, early return
+if(!transformIsNone)continue;// Otherwise check to see if this is a default transform
+if(value!==(valueType.default||0))transformIsNone=false;}else if(key.startsWith("origin")){// If this is a transform origin, flag and enable further transform-origin processing
+hasTransformOrigin=true;transformOrigin[key]=valueAsType;}else{style[key]=valueAsType;}}if(!latestValues.transform){if(hasTransform||transformTemplate){style.transform=buildTransform(state.transform,options,transformIsNone,transformTemplate);}else if(style.transform){/**
+             * If we have previously created a transform but currently don't have any,
+             * reset transform style to none.
+             */style.transform="none";}}/**
+     * Build a transformOrigin style. Uses the same defaults as the browser for
+     * undefined origins.
+     */if(hasTransformOrigin){const{originX="50%",originY="50%",originZ=0}=transformOrigin;style.transformOrigin="".concat(originX," ").concat(originY," ").concat(originZ);}}const createHtmlRenderState=()=>({style:{},transform:{},transformOrigin:{},vars:{}});function copyRawValuesOnly(target,source,props){for(const key in source){if(!isMotionValue(source[key])&&!isForcedMotionValue(key,props)){target[key]=source[key];}}}function useInitialMotionValues(_ref12,visualState,isStatic){let{transformTemplate}=_ref12;return useMemo(()=>{const state=createHtmlRenderState();buildHTMLStyles(state,visualState,{enableHardwareAcceleration:!isStatic},transformTemplate);return Object.assign({},state.vars,state.style);},[visualState]);}function useStyle(props,visualState,isStatic){const styleProp=props.style||{};const style={};/**
+     * Copy non-Motion Values straight into style
+     */copyRawValuesOnly(style,styleProp,props);Object.assign(style,useInitialMotionValues(props,visualState,isStatic));return props.transformValues?props.transformValues(style):style;}function useHTMLProps(props,visualState,isStatic){// The `any` isn't ideal but it is the type of createElement props argument
+const htmlProps={};const style=useStyle(props,visualState,isStatic);if(props.drag&&props.dragListener!==false){// Disable the ghost element when a user drags
+htmlProps.draggable=false;// Disable text selection
+style.userSelect=style.WebkitUserSelect=style.WebkitTouchCallout="none";// Disable scrolling on the draggable direction
+style.touchAction=props.drag===true?"none":"pan-".concat(props.drag==="x"?"y":"x");}if(props.tabIndex===undefined&&(props.onTap||props.onTapStart||props.whileTap)){htmlProps.tabIndex=0;}htmlProps.style=style;return htmlProps;}/**
+ * A list of all valid MotionProps.
+ *
+ * @privateRemarks
+ * This doesn't throw if a `MotionProp` name is missing - it should.
+ */const validMotionProps=new Set(["animate","exit","variants","initial","style","values","variants","transition","transformTemplate","transformValues","custom","inherit","onLayoutAnimationStart","onLayoutAnimationComplete","onLayoutMeasure","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","_dragX","_dragY","onHoverStart","onHoverEnd","onViewportEnter","onViewportLeave","ignoreStrict","viewport"]);/**
+ * Check whether a prop name is a valid `MotionProp` key.
+ *
+ * @param key - Name of the property to check
+ * @returns `true` is key is a valid `MotionProp`.
+ *
+ * @public
+ */function isValidMotionProp(key){return key.startsWith("while")||key.startsWith("drag")&&key!=="draggable"||key.startsWith("layout")||key.startsWith("onTap")||key.startsWith("onPan")||validMotionProps.has(key);}let shouldForward=key=>!isValidMotionProp(key);function loadExternalIsValidProp(isValidProp){if(!isValidProp)return;// Explicitly filter our events
+shouldForward=key=>key.startsWith("on")?!isValidMotionProp(key):isValidProp(key);}/**
+ * Emotion and Styled Components both allow users to pass through arbitrary props to their components
+ * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which
+ * of these should be passed to the underlying DOM node.
+ *
+ * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props
+ * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props
+ * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of
+ * `@emotion/is-prop-valid`, however to fix this problem we need to use it.
+ *
+ * By making it an optionalDependency we can offer this functionality only in the situations where it's
+ * actually required.
+ */try{/**
+     * We attempt to import this package but require won't be defined in esm environments, in that case
+     * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed
+     * in favour of explicit injection.
+     */loadExternalIsValidProp(require("@emotion/is-prop-valid").default);}catch(_a){// We don't need to actually do anything here - the fallback is the existing `isPropValid`.
+}function filterProps(props,isDom,forwardMotionProps){const filteredProps={};for(const key in props){/**
+         * values is considered a valid prop by Emotion, so if it's present
+         * this will be rendered out to the DOM unless explicitly filtered.
+         *
+         * We check the type as it could be used with the `feColorMatrix`
+         * element, which we support.
+         */if(key==="values"&&typeof props.values==="object")continue;if(shouldForward(key)||forwardMotionProps===true&&isValidMotionProp(key)||!isDom&&!isValidMotionProp(key)||// If trying to use native HTML drag events, forward drag listeners
+props["draggable"]&&key.startsWith("onDrag")){filteredProps[key]=props[key];}}return filteredProps;}function calcOrigin$1(origin,offset,size){return typeof origin==="string"?origin:px.transform(offset+size*origin);}/**
+ * The SVG transform origin defaults are different to CSS and is less intuitive,
+ * so we use the measured dimensions of the SVG to reconcile these.
+ */function calcSVGTransformOrigin(dimensions,originX,originY){const pxOriginX=calcOrigin$1(originX,dimensions.x,dimensions.width);const pxOriginY=calcOrigin$1(originY,dimensions.y,dimensions.height);return"".concat(pxOriginX," ").concat(pxOriginY);}const dashKeys={offset:"stroke-dashoffset",array:"stroke-dasharray"};const camelKeys={offset:"strokeDashoffset",array:"strokeDasharray"};/**
+ * Build SVG path properties. Uses the path's measured length to convert
+ * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
+ * and stroke-dasharray attributes.
+ *
+ * This function is mutative to reduce per-frame GC.
+ */function buildSVGPath(attrs,length){let spacing=arguments.length>2&&arguments[2]!==undefined?arguments[2]:1;let offset=arguments.length>3&&arguments[3]!==undefined?arguments[3]:0;let useDashCase=arguments.length>4&&arguments[4]!==undefined?arguments[4]:true;// Normalise path length by setting SVG attribute pathLength to 1
+attrs.pathLength=1;// We use dash case when setting attributes directly to the DOM node and camel case
+// when defining props on a React component.
+const keys=useDashCase?dashKeys:camelKeys;// Build the dash offset
+attrs[keys.offset]=px.transform(-offset);// Build the dash array
+const pathLength=px.transform(length);const pathSpacing=px.transform(spacing);attrs[keys.array]="".concat(pathLength," ").concat(pathSpacing);}/**
+ * Build SVG visual attrbutes, like cx and style.transform
+ */function buildSVGAttrs(state,_ref13,options,isSVGTag,transformTemplate){let{attrX,attrY,attrScale,originX,originY,pathLength,pathSpacing=1,pathOffset=0,// This is object creation, which we try to avoid per-frame.
+...latest}=_ref13;buildHTMLStyles(state,latest,options,transformTemplate);/**
+     * For svg tags we just want to make sure viewBox is animatable and treat all the styles
+     * as normal HTML tags.
+     */if(isSVGTag){if(state.style.viewBox){state.attrs.viewBox=state.style.viewBox;}return;}state.attrs=state.style;state.style={};const{attrs,style,dimensions}=state;/**
+     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
+     * and copy it into style.
+     */if(attrs.transform){if(dimensions)style.transform=attrs.transform;delete attrs.transform;}// Parse transformOrigin
+if(dimensions&&(originX!==undefined||originY!==undefined||style.transform)){style.transformOrigin=calcSVGTransformOrigin(dimensions,originX!==undefined?originX:0.5,originY!==undefined?originY:0.5);}// Render attrX/attrY/attrScale as attributes
+if(attrX!==undefined)attrs.x=attrX;if(attrY!==undefined)attrs.y=attrY;if(attrScale!==undefined)attrs.scale=attrScale;// Build SVG path if one has been defined
+if(pathLength!==undefined){buildSVGPath(attrs,pathLength,pathSpacing,pathOffset,false);}}const createSvgRenderState=()=>({...createHtmlRenderState(),attrs:{}});const isSVGTag=tag=>typeof tag==="string"&&tag.toLowerCase()==="svg";function useSVGProps(props,visualState,_isStatic,Component){const visualProps=useMemo(()=>{const state=createSvgRenderState();buildSVGAttrs(state,visualState,{enableHardwareAcceleration:false},isSVGTag(Component),props.transformTemplate);return{...state.attrs,style:{...state.style}};},[visualState]);if(props.style){const rawStyles={};copyRawValuesOnly(rawStyles,props.style,props);visualProps.style={...rawStyles,...visualProps.style};}return visualProps;}function createUseRender(){let forwardMotionProps=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;const useRender=(Component,props,ref,_ref14,isStatic)=>{let{latestValues}=_ref14;const useVisualProps=isSVGComponent(Component)?useSVGProps:useHTMLProps;const visualProps=useVisualProps(props,latestValues,isStatic,Component);const filteredProps=filterProps(props,typeof Component==="string",forwardMotionProps);const elementProps={...filteredProps,...visualProps,ref};/**
+         * If component has been handed a motion value as its child,
+         * memoise its initial value and render that. Subsequent updates
+         * will be handled by the onChange handler
+         */const{children}=props;const renderedChildren=useMemo(()=>isMotionValue(children)?children.get():children,[children]);return createElement(Component,{...elementProps,children:renderedChildren});};return useRender;}/**
+ * Convert camelCase to dash-case properties.
+ */const camelToDash=str=>str.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();function renderHTML(element,_ref15,styleProp,projection){let{style,vars}=_ref15;Object.assign(element.style,style,projection&&projection.getProjectionStyles(styleProp));// Loop over any CSS variables and assign those.
+for(const key in vars){element.style.setProperty(key,vars[key]);}}/**
+ * A set of attribute names that are always read/written as camel case.
+ */const camelCaseAttributes=new Set(["baseFrequency","diffuseConstant","kernelMatrix","kernelUnitLength","keySplines","keyTimes","limitingConeAngle","markerHeight","markerWidth","numOctaves","targetX","targetY","surfaceScale","specularConstant","specularExponent","stdDeviation","tableValues","viewBox","gradientTransform","pathLength","startOffset","textLength","lengthAdjust"]);function renderSVG(element,renderState,_styleProp,projection){renderHTML(element,renderState,undefined,projection);for(const key in renderState.attrs){element.setAttribute(!camelCaseAttributes.has(key)?camelToDash(key):key,renderState.attrs[key]);}}function scrapeMotionValuesFromProps$1(props,prevProps){const{style}=props;const newValues={};for(const key in style){if(isMotionValue(style[key])||prevProps.style&&isMotionValue(prevProps.style[key])||isForcedMotionValue(key,props)){newValues[key]=style[key];}}return newValues;}function scrapeMotionValuesFromProps(props,prevProps){const newValues=scrapeMotionValuesFromProps$1(props,prevProps);for(const key in props){if(isMotionValue(props[key])||isMotionValue(prevProps[key])){const targetKey=transformPropOrder.indexOf(key)!==-1?"attr"+key.charAt(0).toUpperCase()+key.substring(1):key;newValues[targetKey]=props[key];}}return newValues;}function resolveVariantFromProps(props,definition,custom){let currentValues=arguments.length>3&&arguments[3]!==undefined?arguments[3]:{};let currentVelocity=arguments.length>4&&arguments[4]!==undefined?arguments[4]:{};/**
+     * If the variant definition is a function, resolve.
+     */if(typeof definition==="function"){definition=definition(custom!==undefined?custom:props.custom,currentValues,currentVelocity);}/**
+     * If the variant definition is a variant label, or
+     * the function returned a variant label, resolve.
+     */if(typeof definition==="string"){definition=props.variants&&props.variants[definition];}/**
+     * At this point we've resolved both functions and variant labels,
+     * but the resolved variant label might itself have been a function.
+     * If so, resolve. This can only have returned a valid target object.
+     */if(typeof definition==="function"){definition=definition(custom!==undefined?custom:props.custom,currentValues,currentVelocity);}return definition;}/**
+ * Creates a constant value over the lifecycle of a component.
+ *
+ * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
+ * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
+ * you can ensure that initialisers don't execute twice or more.
+ */function useConstant(init){const ref=useRef(null);if(ref.current===null){ref.current=init();}return ref.current;}const isKeyframesTarget=v=>{return Array.isArray(v);};const isCustomValue=v=>{return Boolean(v&&typeof v==="object"&&v.mix&&v.toValue);};const resolveFinalValueInKeyframes=v=>{// TODO maybe throw if v.length - 1 is placeholder token?
+return isKeyframesTarget(v)?v[v.length-1]||0:v;};/**
+ * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
+ *
+ * TODO: Remove and move to library
+ */function resolveMotionValue(value){const unwrappedValue=isMotionValue(value)?value.get():value;return isCustomValue(unwrappedValue)?unwrappedValue.toValue():unwrappedValue;}function makeState(_ref16,props,context,presenceContext){let{scrapeMotionValuesFromProps,createRenderState,onMount}=_ref16;const state={latestValues:makeLatestValues(props,context,presenceContext,scrapeMotionValuesFromProps),renderState:createRenderState()};if(onMount){state.mount=instance=>onMount(props,instance,state);}return state;}const makeUseVisualState=config=>(props,isStatic)=>{const context=useContext(MotionContext);const presenceContext=useContext(PresenceContext);const make=()=>makeState(config,props,context,presenceContext);return isStatic?make():useConstant(make);};function makeLatestValues(props,context,presenceContext,scrapeMotionValues){const values={};const motionValues=scrapeMotionValues(props,{});for(const key in motionValues){values[key]=resolveMotionValue(motionValues[key]);}let{initial,animate}=props;const isControllingVariants$1=isControllingVariants(props);const isVariantNode$1=isVariantNode(props);if(context&&isVariantNode$1&&!isControllingVariants$1&&props.inherit!==false){if(initial===undefined)initial=context.initial;if(animate===undefined)animate=context.animate;}let isInitialAnimationBlocked=presenceContext?presenceContext.initial===false:false;isInitialAnimationBlocked=isInitialAnimationBlocked||initial===false;const variantToSet=isInitialAnimationBlocked?animate:initial;if(variantToSet&&typeof variantToSet!=="boolean"&&!isAnimationControls(variantToSet)){const list=Array.isArray(variantToSet)?variantToSet:[variantToSet];list.forEach(definition=>{const resolved=resolveVariantFromProps(props,definition);if(!resolved)return;const{transitionEnd,transition,...target}=resolved;for(const key in target){let valueTarget=target[key];if(Array.isArray(valueTarget)){/**
+                     * Take final keyframe if the initial animation is blocked because
+                     * we want to initialise at the end of that blocked animation.
+                     */const index=isInitialAnimationBlocked?valueTarget.length-1:0;valueTarget=valueTarget[index];}if(valueTarget!==null){values[key]=valueTarget;}}for(const key in transitionEnd)values[key]=transitionEnd[key];});}return values;}const svgMotionConfig={useVisualState:makeUseVisualState({scrapeMotionValuesFromProps:scrapeMotionValuesFromProps,createRenderState:createSvgRenderState,onMount:(props,instance,_ref17)=>{let{renderState,latestValues}=_ref17;try{renderState.dimensions=typeof instance.getBBox==="function"?instance.getBBox():instance.getBoundingClientRect();}catch(e){// Most likely trying to measure an unrendered element under Firefox
+renderState.dimensions={x:0,y:0,width:0,height:0};}buildSVGAttrs(renderState,latestValues,{enableHardwareAcceleration:false},isSVGTag(instance.tagName),props.transformTemplate);renderSVG(instance,renderState);}})};const htmlMotionConfig={useVisualState:makeUseVisualState({scrapeMotionValuesFromProps:scrapeMotionValuesFromProps$1,createRenderState:createHtmlRenderState})};function createDomMotionConfig(Component,_ref18,preloadedFeatures,createVisualElement){let{forwardMotionProps=false}=_ref18;const baseConfig=isSVGComponent(Component)?svgMotionConfig:htmlMotionConfig;return{...baseConfig,preloadedFeatures,useRender:createUseRender(forwardMotionProps),createVisualElement,Component};}function addDomEvent(target,eventName,handler){let options=arguments.length>3&&arguments[3]!==undefined?arguments[3]:{passive:true};target.addEventListener(eventName,handler,options);return()=>target.removeEventListener(eventName,handler);}const isPrimaryPointer=event=>{if(event.pointerType==="mouse"){return typeof event.button!=="number"||event.button<=0;}else{/**
+         * isPrimary is true for all mice buttons, whereas every touch point
+         * is regarded as its own input. So subsequent concurrent touch points
+         * will be false.
+         *
+         * Specifically match against false here as incomplete versions of
+         * PointerEvents in very old browser might have it set as undefined.
+         */return event.isPrimary!==false;}};function extractEventInfo(event){let pointType=arguments.length>1&&arguments[1]!==undefined?arguments[1]:"page";return{point:{x:event[pointType+"X"],y:event[pointType+"Y"]}};}const addPointerInfo=handler=>{return event=>isPrimaryPointer(event)&&handler(event,extractEventInfo(event));};function addPointerEvent(target,eventName,handler,options){return addDomEvent(target,eventName,addPointerInfo(handler),options);}/**
+ * Pipe
+ * Compose other transformers to run linearily
+ * pipe(min(20), max(40))
+ * @param  {...functions} transformers
+ * @return {function}
+ */const combineFunctions=(a,b)=>v=>b(a(v));const pipe=function(){for(var _len=arguments.length,transformers=new Array(_len),_key=0;_key<_len;_key++){transformers[_key]=arguments[_key];}return transformers.reduce(combineFunctions);};function createLock(name){let lock=null;return()=>{const openLock=()=>{lock=null;};if(lock===null){lock=name;return openLock;}return false;};}const globalHorizontalLock=createLock("dragHorizontal");const globalVerticalLock=createLock("dragVertical");function getGlobalLock(drag){let lock=false;if(drag==="y"){lock=globalVerticalLock();}else if(drag==="x"){lock=globalHorizontalLock();}else{const openHorizontal=globalHorizontalLock();const openVertical=globalVerticalLock();if(openHorizontal&&openVertical){lock=()=>{openHorizontal();openVertical();};}else{// Release the locks because we don't use them
+if(openHorizontal)openHorizontal();if(openVertical)openVertical();}}return lock;}function isDragActive(){// Check the gesture lock - if we get it, it means no drag gesture is active
+// and we can safely fire the tap gesture.
+const openGestureLock=getGlobalLock(true);if(!openGestureLock)return true;openGestureLock();return false;}class Feature{constructor(node){this.isMounted=false;this.node=node;}update(){}}function createRenderStep(runNextFrame){/**
+     * We create and reuse two arrays, one to queue jobs for the current frame
+     * and one for the next. We reuse to avoid triggering GC after x frames.
+     */let toRun=[];let toRunNextFrame=[];/**
+     *
+     */let numToRun=0;/**
+     * Track whether we're currently processing jobs in this step. This way
+     * we can decide whether to schedule new jobs for this frame or next.
+     */let isProcessing=false;let flushNextFrame=false;/**
+     * A set of processes which were marked keepAlive when scheduled.
+     */const toKeepAlive=new WeakSet();const step={/**
+         * Schedule a process to run on the next frame.
+         */schedule:function(callback){let keepAlive=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;let immediate=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;const addToCurrentFrame=immediate&&isProcessing;const buffer=addToCurrentFrame?toRun:toRunNextFrame;if(keepAlive)toKeepAlive.add(callback);// If the buffer doesn't already contain this callback, add it
+if(buffer.indexOf(callback)===-1){buffer.push(callback);// If we're adding it to the currently running buffer, update its measured size
+if(addToCurrentFrame&&isProcessing)numToRun=toRun.length;}return callback;},/**
+         * Cancel the provided callback from running on the next frame.
+         */cancel:callback=>{const index=toRunNextFrame.indexOf(callback);if(index!==-1)toRunNextFrame.splice(index,1);toKeepAlive.delete(callback);},/**
+         * Execute all schedule callbacks.
+         */process:frameData=>{/**
+             * If we're already processing we've probably been triggered by a flushSync
+             * inside an existing process. Instead of executing, mark flushNextFrame
+             * as true and ensure we flush the following frame at the end of this one.
+             */if(isProcessing){flushNextFrame=true;return;}isProcessing=true;[toRun,toRunNextFrame]=[toRunNextFrame,toRun];// Clear the next frame list
+toRunNextFrame.length=0;// Execute this frame
+numToRun=toRun.length;if(numToRun){for(let i=0;i<numToRun;i++){const callback=toRun[i];callback(frameData);if(toKeepAlive.has(callback)){step.schedule(callback);runNextFrame();}}}isProcessing=false;if(flushNextFrame){flushNextFrame=false;step.process(frameData);}}};return step;}const frameData={delta:0,timestamp:0,isProcessing:false};const maxElapsed=40;let useDefaultElapsed=true;let runNextFrame=false;const stepsOrder=["read","update","preRender","render","postRender"];const steps=stepsOrder.reduce((acc,key)=>{acc[key]=createRenderStep(()=>runNextFrame=true);return acc;},{});const processStep=stepId=>steps[stepId].process(frameData);const processFrame=timestamp=>{runNextFrame=false;frameData.delta=useDefaultElapsed?1000/60:Math.max(Math.min(timestamp-frameData.timestamp,maxElapsed),1);frameData.timestamp=timestamp;frameData.isProcessing=true;stepsOrder.forEach(processStep);frameData.isProcessing=false;if(runNextFrame){useDefaultElapsed=false;requestAnimationFrame(processFrame);}};const startLoop=()=>{runNextFrame=true;useDefaultElapsed=true;if(!frameData.isProcessing)requestAnimationFrame(processFrame);};const frame=stepsOrder.reduce((acc,key)=>{const step=steps[key];acc[key]=function(process){let keepAlive=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;let immediate=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;if(!runNextFrame)startLoop();return step.schedule(process,keepAlive,immediate);};return acc;},{});function cancelFrame(process){stepsOrder.forEach(key=>steps[key].cancel(process));}function addHoverEvent(node,isActive){const eventName="pointer"+(isActive?"enter":"leave");const callbackName="onHover"+(isActive?"Start":"End");const handleEvent=(event,info)=>{if(event.type==="touch"||isDragActive())return;const props=node.getProps();if(node.animationState&&props.whileHover){node.animationState.setActive("whileHover",isActive);}if(props[callbackName]){frame.update(()=>props[callbackName](event,info));}};return addPointerEvent(node.current,eventName,handleEvent,{passive:!node.getProps()[callbackName]});}class HoverGesture extends Feature{mount(){this.unmount=pipe(addHoverEvent(this.node,true),addHoverEvent(this.node,false));}unmount(){}}class FocusGesture extends Feature{constructor(){super(...arguments);this.isActive=false;}onFocus(){let isFocusVisible=false;/**
+         * If this element doesn't match focus-visible then don't
+         * apply whileHover. But, if matches throws that focus-visible
+         * is not a valid selector then in that browser outline styles will be applied
+         * to the element by default and we want to match that behaviour with whileFocus.
+         */try{isFocusVisible=this.node.current.matches(":focus-visible");}catch(e){isFocusVisible=true;}if(!isFocusVisible||!this.node.animationState)return;this.node.animationState.setActive("whileFocus",true);this.isActive=true;}onBlur(){if(!this.isActive||!this.node.animationState)return;this.node.animationState.setActive("whileFocus",false);this.isActive=false;}mount(){this.unmount=pipe(addDomEvent(this.node.current,"focus",()=>this.onFocus()),addDomEvent(this.node.current,"blur",()=>this.onBlur()));}unmount(){}}/**
+ * Recursively traverse up the tree to check whether the provided child node
+ * is the parent or a descendant of it.
+ *
+ * @param parent - Element to find
+ * @param child - Element to test against parent
+ */const isNodeOrChild=(parent,child)=>{if(!child){return false;}else if(parent===child){return true;}else{return isNodeOrChild(parent,child.parentElement);}};const noop=any=>any;function fireSyntheticPointerEvent(name,handler){if(!handler)return;const syntheticPointerEvent=new PointerEvent("pointer"+name);handler(syntheticPointerEvent,extractEventInfo(syntheticPointerEvent));}class PressGesture extends Feature{constructor(){super(...arguments);this.removeStartListeners=noop;this.removeEndListeners=noop;this.removeAccessibleListeners=noop;this.startPointerPress=(startEvent,startInfo)=>{this.removeEndListeners();if(this.isPressing)return;const props=this.node.getProps();const endPointerPress=(endEvent,endInfo)=>{if(!this.checkPressEnd())return;const{onTap,onTapCancel}=this.node.getProps();frame.update(()=>{/**
+                     * We only count this as a tap gesture if the event.target is the same
+                     * as, or a child of, this component's element
+                     */!isNodeOrChild(this.node.current,endEvent.target)?onTapCancel&&onTapCancel(endEvent,endInfo):onTap&&onTap(endEvent,endInfo);});};const removePointerUpListener=addPointerEvent(window,"pointerup",endPointerPress,{passive:!(props.onTap||props["onPointerUp"])});const removePointerCancelListener=addPointerEvent(window,"pointercancel",(cancelEvent,cancelInfo)=>this.cancelPress(cancelEvent,cancelInfo),{passive:!(props.onTapCancel||props["onPointerCancel"])});this.removeEndListeners=pipe(removePointerUpListener,removePointerCancelListener);this.startPress(startEvent,startInfo);};this.startAccessiblePress=()=>{const handleKeydown=keydownEvent=>{if(keydownEvent.key!=="Enter"||this.isPressing)return;const handleKeyup=keyupEvent=>{if(keyupEvent.key!=="Enter"||!this.checkPressEnd())return;fireSyntheticPointerEvent("up",(event,info)=>{const{onTap}=this.node.getProps();if(onTap){frame.update(()=>onTap(event,info));}});};this.removeEndListeners();this.removeEndListeners=addDomEvent(this.node.current,"keyup",handleKeyup);fireSyntheticPointerEvent("down",(event,info)=>{this.startPress(event,info);});};const removeKeydownListener=addDomEvent(this.node.current,"keydown",handleKeydown);const handleBlur=()=>{if(!this.isPressing)return;fireSyntheticPointerEvent("cancel",(cancelEvent,cancelInfo)=>this.cancelPress(cancelEvent,cancelInfo));};const removeBlurListener=addDomEvent(this.node.current,"blur",handleBlur);this.removeAccessibleListeners=pipe(removeKeydownListener,removeBlurListener);};}startPress(event,info){this.isPressing=true;const{onTapStart,whileTap}=this.node.getProps();/**
+         * Ensure we trigger animations before firing event callback
+         */if(whileTap&&this.node.animationState){this.node.animationState.setActive("whileTap",true);}if(onTapStart){frame.update(()=>onTapStart(event,info));}}checkPressEnd(){this.removeEndListeners();this.isPressing=false;const props=this.node.getProps();if(props.whileTap&&this.node.animationState){this.node.animationState.setActive("whileTap",false);}return!isDragActive();}cancelPress(event,info){if(!this.checkPressEnd())return;const{onTapCancel}=this.node.getProps();if(onTapCancel){frame.update(()=>onTapCancel(event,info));}}mount(){const props=this.node.getProps();const removePointerListener=addPointerEvent(this.node.current,"pointerdown",this.startPointerPress,{passive:!(props.onTapStart||props["onPointerStart"])});const removeFocusListener=addDomEvent(this.node.current,"focus",this.startAccessiblePress);this.removeStartListeners=pipe(removePointerListener,removeFocusListener);}unmount(){this.removeStartListeners();this.removeEndListeners();this.removeAccessibleListeners();}}/**
+ * Map an IntersectionHandler callback to an element. We only ever make one handler for one
+ * element, so even though these handlers might all be triggered by different
+ * observers, we can keep them in the same map.
+ */const observerCallbacks=new WeakMap();/**
+ * Multiple observers can be created for multiple element/document roots. Each with
+ * different settings. So here we store dictionaries of observers to each root,
+ * using serialised settings (threshold/margin) as lookup keys.
+ */const observers=new WeakMap();const fireObserverCallback=entry=>{const callback=observerCallbacks.get(entry.target);callback&&callback(entry);};const fireAllObserverCallbacks=entries=>{entries.forEach(fireObserverCallback);};function initIntersectionObserver(_ref19){let{root,...options}=_ref19;const lookupRoot=root||document;/**
+     * If we don't have an observer lookup map for this root, create one.
+     */if(!observers.has(lookupRoot)){observers.set(lookupRoot,{});}const rootObservers=observers.get(lookupRoot);const key=JSON.stringify(options);/**
+     * If we don't have an observer for this combination of root and settings,
+     * create one.
+     */if(!rootObservers[key]){rootObservers[key]=new IntersectionObserver(fireAllObserverCallbacks,{root,...options});}return rootObservers[key];}function observeIntersection(element,options,callback){const rootInteresectionObserver=initIntersectionObserver(options);observerCallbacks.set(element,callback);rootInteresectionObserver.observe(element);return()=>{observerCallbacks.delete(element);rootInteresectionObserver.unobserve(element);};}const thresholdNames={some:0,all:1};class InViewFeature extends Feature{constructor(){super(...arguments);this.hasEnteredView=false;this.isInView=false;}startObserver(){this.unmount();const{viewport={}}=this.node.getProps();const{root,margin:rootMargin,amount="some",once}=viewport;const options={root:root?root.current:undefined,rootMargin,threshold:typeof amount==="number"?amount:thresholdNames[amount]};const onIntersectionUpdate=entry=>{const{isIntersecting}=entry;/**
+             * If there's been no change in the viewport state, early return.
+             */if(this.isInView===isIntersecting)return;this.isInView=isIntersecting;/**
+             * Handle hasEnteredView. If this is only meant to run once, and
+             * element isn't visible, early return. Otherwise set hasEnteredView to true.
+             */if(once&&!isIntersecting&&this.hasEnteredView){return;}else if(isIntersecting){this.hasEnteredView=true;}if(this.node.animationState){this.node.animationState.setActive("whileInView",isIntersecting);}/**
+             * Use the latest committed props rather than the ones in scope
+             * when this observer is created
+             */const{onViewportEnter,onViewportLeave}=this.node.getProps();const callback=isIntersecting?onViewportEnter:onViewportLeave;callback&&callback(entry);};return observeIntersection(this.node.current,options,onIntersectionUpdate);}mount(){this.startObserver();}update(){if(typeof IntersectionObserver==="undefined")return;const{props,prevProps}=this.node;const hasOptionsChanged=["amount","margin","root"].some(hasViewportOptionChanged(props,prevProps));if(hasOptionsChanged){this.startObserver();}}unmount(){}}function hasViewportOptionChanged(_ref20){let{viewport={}}=_ref20;let{viewport:prevViewport={}}=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};return name=>viewport[name]!==prevViewport[name];}const gestureAnimations={inView:{Feature:InViewFeature},tap:{Feature:PressGesture},focus:{Feature:FocusGesture},hover:{Feature:HoverGesture}};function shallowCompare(next,prev){if(!Array.isArray(prev))return false;const prevLength=prev.length;if(prevLength!==next.length)return false;for(let i=0;i<prevLength;i++){if(prev[i]!==next[i])return false;}return true;}/**
+ * Creates an object containing the latest state of every MotionValue on a VisualElement
+ */function getCurrent(visualElement){const current={};visualElement.values.forEach((value,key)=>current[key]=value.get());return current;}/**
+ * Creates an object containing the latest velocity of every MotionValue on a VisualElement
+ */function getVelocity$1(visualElement){const velocity={};visualElement.values.forEach((value,key)=>velocity[key]=value.getVelocity());return velocity;}function resolveVariant(visualElement,definition,custom){const props=visualElement.getProps();return resolveVariantFromProps(props,definition,custom!==undefined?custom:props.custom,getCurrent(visualElement),getVelocity$1(visualElement));}const optimizedAppearDataId="framerAppearId";const optimizedAppearDataAttribute="data-"+camelToDash(optimizedAppearDataId);let warning=noop;let invariant=noop;if(process.env.NODE_ENV!=="production"){warning=(check,message)=>{if(!check&&typeof console!=="undefined"){console.warn(message);}};invariant=(check,message)=>{if(!check){throw new Error(message);}};}/**
+ * Converts seconds to milliseconds
+ *
+ * @param seconds - Time in seconds.
+ * @return milliseconds - Converted time in milliseconds.
+ */const secondsToMilliseconds=seconds=>seconds*1000;const millisecondsToSeconds=milliseconds=>milliseconds/1000;const instantAnimationState={current:false};const isBezierDefinition=easing=>Array.isArray(easing)&&typeof easing[0]==="number";function isWaapiSupportedEasing(easing){return Boolean(!easing||typeof easing==="string"&&supportedWaapiEasing[easing]||isBezierDefinition(easing)||Array.isArray(easing)&&easing.every(isWaapiSupportedEasing));}const cubicBezierAsString=_ref21=>{let[a,b,c,d]=_ref21;return"cubic-bezier(".concat(a,", ").concat(b,", ").concat(c,", ").concat(d,")");};const supportedWaapiEasing={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:cubicBezierAsString([0,0.65,0.55,1]),circOut:cubicBezierAsString([0.55,0,1,0.45]),backIn:cubicBezierAsString([0.31,0.01,0.66,-0.59]),backOut:cubicBezierAsString([0.33,1.53,0.69,0.99])};function mapEasingToNativeEasing(easing){if(!easing)return undefined;return isBezierDefinition(easing)?cubicBezierAsString(easing):Array.isArray(easing)?easing.map(mapEasingToNativeEasing):supportedWaapiEasing[easing];}function animateStyle(element,valueName,keyframes){let{delay=0,duration,repeat=0,repeatType="loop",ease,times}=arguments.length>3&&arguments[3]!==undefined?arguments[3]:{};const keyframeOptions={[valueName]:keyframes};if(times)keyframeOptions.offset=times;const easing=mapEasingToNativeEasing(ease);/**
+     * If this is an easing array, apply to keyframes, not animation as a whole
+     */if(Array.isArray(easing))keyframeOptions.easing=easing;return element.animate(keyframeOptions,{delay,duration,easing:!Array.isArray(easing)?easing:"linear",fill:"both",iterations:repeat+1,direction:repeatType==="reverse"?"alternate":"normal"});}const featureTests={waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate")};const results={};const supports={};/**
+ * Generate features tests that cache their results.
+ */for(const key in featureTests){supports[key]=()=>{if(results[key]===undefined)results[key]=featureTests[key]();return results[key];};}function getFinalKeyframe(keyframes,_ref22){let{repeat,repeatType="loop"}=_ref22;const index=repeat&&repeatType!=="loop"&&repeat%2===1?0:keyframes.length-1;return keyframes[index];}/*
+  Bezier function generator
+  This has been modified from Gaëtan Renaudeau's BezierEasing
+  https://github.com/gre/bezier-easing/blob/master/src/index.js
+  https://github.com/gre/bezier-easing/blob/master/LICENSE
+  
+  I've removed the newtonRaphsonIterate algo because in benchmarking it
+  wasn't noticiably faster than binarySubdivision, indeed removing it
+  usually improved times, depending on the curve.
+  I also removed the lookup table, as for the added bundle size and loop we're
+  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
+  to 12 to compensate and this still tended to be faster for no perceivable
+  loss in accuracy.
+  Usage
+    const easeOut = cubicBezier(.17,.67,.83,.67);
+    const x = easeOut(0.5); // returns 0.627...
+*/ // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+const calcBezier=(t,a1,a2)=>(((1.0-3.0*a2+3.0*a1)*t+(3.0*a2-6.0*a1))*t+3.0*a1)*t;const subdivisionPrecision=0.0000001;const subdivisionMaxIterations=12;function binarySubdivide(x,lowerBound,upperBound,mX1,mX2){let currentX;let currentT;let i=0;do{currentT=lowerBound+(upperBound-lowerBound)/2.0;currentX=calcBezier(currentT,mX1,mX2)-x;if(currentX>0.0){upperBound=currentT;}else{lowerBound=currentT;}}while(Math.abs(currentX)>subdivisionPrecision&&++i<subdivisionMaxIterations);return currentT;}function cubicBezier(mX1,mY1,mX2,mY2){// If this is a linear gradient, return linear easing
+if(mX1===mY1&&mX2===mY2)return noop;const getTForX=aX=>binarySubdivide(aX,0,1,mX1,mX2);// If animation is at start/end, return t without easing
+return t=>t===0||t===1?t:calcBezier(getTForX(t),mY1,mY2);}const easeIn=cubicBezier(0.42,0,1,1);const easeOut=cubicBezier(0,0,0.58,1);const easeInOut=cubicBezier(0.42,0,0.58,1);const isEasingArray=ease=>{return Array.isArray(ease)&&typeof ease[0]!=="number";};// Accepts an easing function and returns a new one that outputs mirrored values for
+// the second half of the animation. Turns easeIn into easeInOut.
+const mirrorEasing=easing=>p=>p<=0.5?easing(2*p)/2:(2-easing(2*(1-p)))/2;// Accepts an easing function and returns a new one that outputs reversed values.
+// Turns easeIn into easeOut.
+const reverseEasing=easing=>p=>1-easing(1-p);const circIn=p=>1-Math.sin(Math.acos(p));const circOut=reverseEasing(circIn);const circInOut=mirrorEasing(circOut);const backOut=cubicBezier(0.33,1.53,0.69,0.99);const backIn=reverseEasing(backOut);const backInOut=mirrorEasing(backIn);const anticipate=p=>(p*=2)<1?0.5*backIn(p):0.5*(2-Math.pow(2,-10*(p-1)));const easingLookup={linear:noop,easeIn,easeInOut,easeOut,circIn,circInOut,circOut,backIn,backInOut,backOut,anticipate};const easingDefinitionToFunction=definition=>{if(Array.isArray(definition)){// If cubic bezier definition, create bezier curve
+invariant(definition.length===4,"Cubic bezier arrays must contain four numerical values.");const[x1,y1,x2,y2]=definition;return cubicBezier(x1,y1,x2,y2);}else if(typeof definition==="string"){// Else lookup from table
+invariant(easingLookup[definition]!==undefined,"Invalid easing type '".concat(definition,"'"));return easingLookup[definition];}return definition;};/**
+ * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
+ * but false if a number or multiple colors
+ */const isColorString=(type,testProp)=>v=>{return Boolean(isString(v)&&singleColorRegex.test(v)&&v.startsWith(type)||testProp&&Object.prototype.hasOwnProperty.call(v,testProp));};const splitColor=(aName,bName,cName)=>v=>{if(!isString(v))return v;const[a,b,c,alpha]=v.match(floatRegex);return{[aName]:parseFloat(a),[bName]:parseFloat(b),[cName]:parseFloat(c),alpha:alpha!==undefined?parseFloat(alpha):1};};const clampRgbUnit=v=>clamp(0,255,v);const rgbUnit={...number,transform:v=>Math.round(clampRgbUnit(v))};const rgba={test:isColorString("rgb","red"),parse:splitColor("red","green","blue"),transform:_ref23=>{let{red,green,blue,alpha:alpha$1=1}=_ref23;return"rgba("+rgbUnit.transform(red)+", "+rgbUnit.transform(green)+", "+rgbUnit.transform(blue)+", "+sanitize(alpha.transform(alpha$1))+")";}};function parseHex(v){let r="";let g="";let b="";let a="";// If we have 6 characters, ie #FF0000
+if(v.length>5){r=v.substring(1,3);g=v.substring(3,5);b=v.substring(5,7);a=v.substring(7,9);// Or we have 3 characters, ie #F00
+}else{r=v.substring(1,2);g=v.substring(2,3);b=v.substring(3,4);a=v.substring(4,5);r+=r;g+=g;b+=b;a+=a;}return{red:parseInt(r,16),green:parseInt(g,16),blue:parseInt(b,16),alpha:a?parseInt(a,16)/255:1};}const hex={test:isColorString("#"),parse:parseHex,transform:rgba.transform};const hsla={test:isColorString("hsl","hue"),parse:splitColor("hue","saturation","lightness"),transform:_ref24=>{let{hue,saturation,lightness,alpha:alpha$1=1}=_ref24;return"hsla("+Math.round(hue)+", "+percent.transform(sanitize(saturation))+", "+percent.transform(sanitize(lightness))+", "+sanitize(alpha.transform(alpha$1))+")";}};const color={test:v=>rgba.test(v)||hex.test(v)||hsla.test(v),parse:v=>{if(rgba.test(v)){return rgba.parse(v);}else if(hsla.test(v)){return hsla.parse(v);}else{return hex.parse(v);}},transform:v=>{return isString(v)?v:v.hasOwnProperty("red")?rgba.transform(v):hsla.transform(v);}};/*
+  Value in range from progress
+
+  Given a lower limit and an upper limit, we return the value within
+  that range as expressed by progress (usually a number from 0 to 1)
+
+  So progress = 0.5 would change
+
+  from -------- to
+
+  to
+
+  from ---- to
+
+  E.g. from = 10, to = 20, progress = 0.5 => 15
+
+  @param [number]: Lower limit of range
+  @param [number]: Upper limit of range
+  @param [number]: The progress between lower and upper limits expressed 0-1
+  @return [number]: Value as calculated from progress within range (not limited within range)
+*/const mix=(from,to,progress)=>-progress*from+progress*to+from;// Adapted from https://gist.github.com/mjackson/5311256
+function hueToRgb(p,q,t){if(t<0)t+=1;if(t>1)t-=1;if(t<1/6)return p+(q-p)*6*t;if(t<1/2)return q;if(t<2/3)return p+(q-p)*(2/3-t)*6;return p;}function hslaToRgba(_ref25){let{hue,saturation,lightness,alpha}=_ref25;hue/=360;saturation/=100;lightness/=100;let red=0;let green=0;let blue=0;if(!saturation){red=green=blue=lightness;}else{const q=lightness<0.5?lightness*(1+saturation):lightness+saturation-lightness*saturation;const p=2*lightness-q;red=hueToRgb(p,q,hue+1/3);green=hueToRgb(p,q,hue);blue=hueToRgb(p,q,hue-1/3);}return{red:Math.round(red*255),green:Math.round(green*255),blue:Math.round(blue*255),alpha};}// Linear color space blending
+// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
+// Demonstrated http://codepen.io/osublake/pen/xGVVaN
+const mixLinearColor=(from,to,v)=>{const fromExpo=from*from;return Math.sqrt(Math.max(0,v*(to*to-fromExpo)+fromExpo));};const colorTypes=[hex,rgba,hsla];const getColorType=v=>colorTypes.find(type=>type.test(v));function asRGBA(color){const type=getColorType(color);invariant(Boolean(type),"'".concat(color,"' is not an animatable color. Use the equivalent color code instead."));let model=type.parse(color);if(type===hsla){// TODO Remove this cast - needed since Framer Motion's stricter typing
+model=hslaToRgba(model);}return model;}const mixColor=(from,to)=>{const fromRGBA=asRGBA(from);const toRGBA=asRGBA(to);const blended={...fromRGBA};return v=>{blended.red=mixLinearColor(fromRGBA.red,toRGBA.red,v);blended.green=mixLinearColor(fromRGBA.green,toRGBA.green,v);blended.blue=mixLinearColor(fromRGBA.blue,toRGBA.blue,v);blended.alpha=mix(fromRGBA.alpha,toRGBA.alpha,v);return rgba.transform(blended);};};function test(v){var _a,_b;return isNaN(v)&&isString(v)&&(((_a=v.match(floatRegex))===null||_a===void 0?void 0:_a.length)||0)+(((_b=v.match(colorRegex))===null||_b===void 0?void 0:_b.length)||0)>0;}const cssVarTokeniser={regex:cssVariableRegex,countKey:"Vars",token:"${v}",parse:noop};const colorTokeniser={regex:colorRegex,countKey:"Colors",token:"${c}",parse:color.parse};const numberTokeniser={regex:floatRegex,countKey:"Numbers",token:"${n}",parse:number.parse};function tokenise(info,_ref26){let{regex,countKey,token,parse}=_ref26;const matches=info.tokenised.match(regex);if(!matches)return;info["num"+countKey]=matches.length;info.tokenised=info.tokenised.replace(regex,token);info.values.push(...matches.map(parse));}function analyseComplexValue(value){const originalValue=value.toString();const info={value:originalValue,tokenised:originalValue,values:[],numVars:0,numColors:0,numNumbers:0};if(info.value.includes("var(--"))tokenise(info,cssVarTokeniser);tokenise(info,colorTokeniser);tokenise(info,numberTokeniser);return info;}function parseComplexValue(v){return analyseComplexValue(v).values;}function createTransformer(source){const{values,numColors,numVars,tokenised}=analyseComplexValue(source);const numValues=values.length;return v=>{let output=tokenised;for(let i=0;i<numValues;i++){if(i<numVars){output=output.replace(cssVarTokeniser.token,v[i]);}else if(i<numVars+numColors){output=output.replace(colorTokeniser.token,color.transform(v[i]));}else{output=output.replace(numberTokeniser.token,sanitize(v[i]));}}return output;};}const convertNumbersToZero=v=>typeof v==="number"?0:v;function getAnimatableNone$1(v){const parsed=parseComplexValue(v);const transformer=createTransformer(v);return transformer(parsed.map(convertNumbersToZero));}const complex={test,parse:parseComplexValue,createTransformer,getAnimatableNone:getAnimatableNone$1};const mixImmediate=(origin,target)=>p=>"".concat(p>0?target:origin);function getMixer(origin,target){if(typeof origin==="number"){return v=>mix(origin,target,v);}else if(color.test(origin)){return mixColor(origin,target);}else{return origin.startsWith("var(")?mixImmediate(origin,target):mixComplex(origin,target);}}const mixArray=(from,to)=>{const output=[...from];const numValues=output.length;const blendValue=from.map((fromThis,i)=>getMixer(fromThis,to[i]));return v=>{for(let i=0;i<numValues;i++){output[i]=blendValue[i](v);}return output;};};const mixObject=(origin,target)=>{const output={...origin,...target};const blendValue={};for(const key in output){if(origin[key]!==undefined&&target[key]!==undefined){blendValue[key]=getMixer(origin[key],target[key]);}}return v=>{for(const key in blendValue){output[key]=blendValue[key](v);}return output;};};const mixComplex=(origin,target)=>{const template=complex.createTransformer(target);const originStats=analyseComplexValue(origin);const targetStats=analyseComplexValue(target);const canInterpolate=originStats.numVars===targetStats.numVars&&originStats.numColors===targetStats.numColors&&originStats.numNumbers>=targetStats.numNumbers;if(canInterpolate){return pipe(mixArray(originStats.values,targetStats.values),template);}else{warning(true,"Complex values '".concat(origin,"' and '").concat(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."));return mixImmediate(origin,target);}};/*
+  Progress within given range
+
+  Given a lower limit and an upper limit, we return the progress
+  (expressed as a number 0-1) represented by the given value, and
+  limit that progress to within 0-1.
+
+  @param [number]: Lower limit
+  @param [number]: Upper limit
+  @param [number]: Value to find progress within given range
+  @return [number]: Progress of value within range as expressed 0-1
+*/const progress=(from,to,value)=>{const toFromDifference=to-from;return toFromDifference===0?1:(value-from)/toFromDifference;};const mixNumber=(from,to)=>p=>mix(from,to,p);function detectMixerFactory(v){if(typeof v==="number"){return mixNumber;}else if(typeof v==="string"){return color.test(v)?mixColor:mixComplex;}else if(Array.isArray(v)){return mixArray;}else if(typeof v==="object"){return mixObject;}return mixNumber;}function createMixers(output,ease,customMixer){const mixers=[];const mixerFactory=customMixer||detectMixerFactory(output[0]);const numMixers=output.length-1;for(let i=0;i<numMixers;i++){let mixer=mixerFactory(output[i],output[i+1]);if(ease){const easingFunction=Array.isArray(ease)?ease[i]||noop:ease;mixer=pipe(easingFunction,mixer);}mixers.push(mixer);}return mixers;}/**
+ * Create a function that maps from a numerical input array to a generic output array.
+ *
+ * Accepts:
+ *   - Numbers
+ *   - Colors (hex, hsl, hsla, rgb, rgba)
+ *   - Complex (combinations of one or more numbers or strings)
+ *
+ * ```jsx
+ * const mixColor = interpolate([0, 1], ['#fff', '#000'])
+ *
+ * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
+ * ```
+ *
+ * TODO Revist this approach once we've moved to data models for values,
+ * probably not needed to pregenerate mixer functions.
+ *
+ * @public
+ */function interpolate(input,output){let{clamp:isClamp=true,ease,mixer}=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};const inputLength=input.length;invariant(inputLength===output.length,"Both input and output ranges must be the same length");/**
+     * If we're only provided a single input, we can just make a function
+     * that returns the output.
+     */if(inputLength===1)return()=>output[0];// If input runs highest -> lowest, reverse both arrays
+if(input[0]>input[inputLength-1]){input=[...input].reverse();output=[...output].reverse();}const mixers=createMixers(output,ease,mixer);const numMixers=mixers.length;const interpolator=v=>{let i=0;if(numMixers>1){for(;i<input.length-2;i++){if(v<input[i+1])break;}}const progressInRange=progress(input[i],input[i+1],v);return mixers[i](progressInRange);};return isClamp?v=>interpolator(clamp(input[0],input[inputLength-1],v)):interpolator;}function fillOffset(offset,remaining){const min=offset[offset.length-1];for(let i=1;i<=remaining;i++){const offsetProgress=progress(0,remaining,i);offset.push(mix(min,1,offsetProgress));}}function defaultOffset(arr){const offset=[0];fillOffset(offset,arr.length-1);return offset;}function convertOffsetToTimes(offset,duration){return offset.map(o=>o*duration);}function defaultEasing(values,easing){return values.map(()=>easing||easeInOut).splice(0,values.length-1);}function keyframes(_ref27){let{duration=300,keyframes:keyframeValues,times,ease="easeInOut"}=_ref27;/**
+     * Easing functions can be externally defined as strings. Here we convert them
+     * into actual functions.
+     */const easingFunctions=isEasingArray(ease)?ease.map(easingDefinitionToFunction):easingDefinitionToFunction(ease);/**
+     * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
+     * to reduce GC during animation.
+     */const state={done:false,value:keyframeValues[0]};/**
+     * Create a times array based on the provided 0-1 offsets
+     */const absoluteTimes=convertOffsetToTimes(// Only use the provided offsets if they're the correct length
+// TODO Maybe we should warn here if there's a length mismatch
+times&&times.length===keyframeValues.length?times:defaultOffset(keyframeValues),duration);const mapTimeToKeyframe=interpolate(absoluteTimes,keyframeValues,{ease:Array.isArray(easingFunctions)?easingFunctions:defaultEasing(keyframeValues,easingFunctions)});return{calculatedDuration:duration,next:t=>{state.value=mapTimeToKeyframe(t);state.done=t>=duration;return state;}};}/*
+  Convert velocity into velocity per second
+
+  @param [number]: Unit per frame
+  @param [number]: Frame duration in ms
+*/function velocityPerSecond(velocity,frameDuration){return frameDuration?velocity*(1000/frameDuration):0;}const velocitySampleDuration=5;// ms
+function calcGeneratorVelocity(resolveValue,t,current){const prevT=Math.max(t-velocitySampleDuration,0);return velocityPerSecond(current-resolveValue(prevT),t-prevT);}const safeMin=0.001;const minDuration=0.01;const maxDuration$1=10.0;const minDamping=0.05;const maxDamping=1;function findSpring(_ref28){let{duration=800,bounce=0.25,velocity=0,mass=1}=_ref28;let envelope;let derivative;warning(duration<=secondsToMilliseconds(maxDuration$1),"Spring duration must be 10 seconds or less");let dampingRatio=1-bounce;/**
+     * Restrict dampingRatio and duration to within acceptable ranges.
+     */dampingRatio=clamp(minDamping,maxDamping,dampingRatio);duration=clamp(minDuration,maxDuration$1,millisecondsToSeconds(duration));if(dampingRatio<1){/**
+         * Underdamped spring
+         */envelope=undampedFreq=>{const exponentialDecay=undampedFreq*dampingRatio;const delta=exponentialDecay*duration;const a=exponentialDecay-velocity;const b=calcAngularFreq(undampedFreq,dampingRatio);const c=Math.exp(-delta);return safeMin-a/b*c;};derivative=undampedFreq=>{const exponentialDecay=undampedFreq*dampingRatio;const delta=exponentialDecay*duration;const d=delta*velocity+velocity;const e=Math.pow(dampingRatio,2)*Math.pow(undampedFreq,2)*duration;const f=Math.exp(-delta);const g=calcAngularFreq(Math.pow(undampedFreq,2),dampingRatio);const factor=-envelope(undampedFreq)+safeMin>0?-1:1;return factor*((d-e)*f)/g;};}else{/**
+         * Critically-damped spring
+         */envelope=undampedFreq=>{const a=Math.exp(-undampedFreq*duration);const b=(undampedFreq-velocity)*duration+1;return-safeMin+a*b;};derivative=undampedFreq=>{const a=Math.exp(-undampedFreq*duration);const b=(velocity-undampedFreq)*(duration*duration);return a*b;};}const initialGuess=5/duration;const undampedFreq=approximateRoot(envelope,derivative,initialGuess);duration=secondsToMilliseconds(duration);if(isNaN(undampedFreq)){return{stiffness:100,damping:10,duration};}else{const stiffness=Math.pow(undampedFreq,2)*mass;return{stiffness,damping:dampingRatio*2*Math.sqrt(mass*stiffness),duration};}}const rootIterations=12;function approximateRoot(envelope,derivative,initialGuess){let result=initialGuess;for(let i=1;i<rootIterations;i++){result=result-envelope(result)/derivative(result);}return result;}function calcAngularFreq(undampedFreq,dampingRatio){return undampedFreq*Math.sqrt(1-dampingRatio*dampingRatio);}const durationKeys=["duration","bounce"];const physicsKeys=["stiffness","damping","mass"];function isSpringType(options,keys){return keys.some(key=>options[key]!==undefined);}function getSpringOptions(options){let springOptions={velocity:0.0,stiffness:100,damping:10,mass:1.0,isResolvedFromDuration:false,...options};// stiffness/damping/mass overrides duration/bounce
+if(!isSpringType(options,physicsKeys)&&isSpringType(options,durationKeys)){const derived=findSpring(options);springOptions={...springOptions,...derived,velocity:0.0,mass:1.0};springOptions.isResolvedFromDuration=true;}return springOptions;}function spring(_ref29){let{keyframes,restDelta,restSpeed,...options}=_ref29;const origin=keyframes[0];const target=keyframes[keyframes.length-1];/**
+     * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
+     * to reduce GC during animation.
+     */const state={done:false,value:origin};const{stiffness,damping,mass,velocity,duration,isResolvedFromDuration}=getSpringOptions(options);const initialVelocity=velocity?-millisecondsToSeconds(velocity):0.0;const dampingRatio=damping/(2*Math.sqrt(stiffness*mass));const initialDelta=target-origin;const undampedAngularFreq=millisecondsToSeconds(Math.sqrt(stiffness/mass));/**
+     * If we're working on a granular scale, use smaller defaults for determining
+     * when the spring is finished.
+     *
+     * These defaults have been selected emprically based on what strikes a good
+     * ratio between feeling good and finishing as soon as changes are imperceptible.
+     */const isGranularScale=Math.abs(initialDelta)<5;restSpeed||(restSpeed=isGranularScale?0.01:2);restDelta||(restDelta=isGranularScale?0.005:0.5);let resolveSpring;if(dampingRatio<1){const angularFreq=calcAngularFreq(undampedAngularFreq,dampingRatio);// Underdamped spring
+resolveSpring=t=>{const envelope=Math.exp(-dampingRatio*undampedAngularFreq*t);return target-envelope*((initialVelocity+dampingRatio*undampedAngularFreq*initialDelta)/angularFreq*Math.sin(angularFreq*t)+initialDelta*Math.cos(angularFreq*t));};}else if(dampingRatio===1){// Critically damped spring
+resolveSpring=t=>target-Math.exp(-undampedAngularFreq*t)*(initialDelta+(initialVelocity+undampedAngularFreq*initialDelta)*t);}else{// Overdamped spring
+const dampedAngularFreq=undampedAngularFreq*Math.sqrt(dampingRatio*dampingRatio-1);resolveSpring=t=>{const envelope=Math.exp(-dampingRatio*undampedAngularFreq*t);// When performing sinh or cosh values can hit Infinity so we cap them here
+const freqForT=Math.min(dampedAngularFreq*t,300);return target-envelope*((initialVelocity+dampingRatio*undampedAngularFreq*initialDelta)*Math.sinh(freqForT)+dampedAngularFreq*initialDelta*Math.cosh(freqForT))/dampedAngularFreq;};}return{calculatedDuration:isResolvedFromDuration?duration||null:null,next:t=>{const current=resolveSpring(t);if(!isResolvedFromDuration){let currentVelocity=initialVelocity;if(t!==0){/**
+                     * We only need to calculate velocity for under-damped springs
+                     * as over- and critically-damped springs can't overshoot, so
+                     * checking only for displacement is enough.
+                     */if(dampingRatio<1){currentVelocity=calcGeneratorVelocity(resolveSpring,t,current);}else{currentVelocity=0;}}const isBelowVelocityThreshold=Math.abs(currentVelocity)<=restSpeed;const isBelowDisplacementThreshold=Math.abs(target-current)<=restDelta;state.done=isBelowVelocityThreshold&&isBelowDisplacementThreshold;}else{state.done=t>=duration;}state.value=state.done?target:current;return state;}};}function inertia(_ref30){let{keyframes,velocity=0.0,power=0.8,timeConstant=325,bounceDamping=10,bounceStiffness=500,modifyTarget,min,max,restDelta=0.5,restSpeed}=_ref30;const origin=keyframes[0];const state={done:false,value:origin};const isOutOfBounds=v=>min!==undefined&&v<min||max!==undefined&&v>max;const nearestBoundary=v=>{if(min===undefined)return max;if(max===undefined)return min;return Math.abs(min-v)<Math.abs(max-v)?min:max;};let amplitude=power*velocity;const ideal=origin+amplitude;const target=modifyTarget===undefined?ideal:modifyTarget(ideal);/**
+     * If the target has changed we need to re-calculate the amplitude, otherwise
+     * the animation will start from the wrong position.
+     */if(target!==ideal)amplitude=target-origin;const calcDelta=t=>-amplitude*Math.exp(-t/timeConstant);const calcLatest=t=>target+calcDelta(t);const applyFriction=t=>{const delta=calcDelta(t);const latest=calcLatest(t);state.done=Math.abs(delta)<=restDelta;state.value=state.done?target:latest;};/**
+     * Ideally this would resolve for t in a stateless way, we could
+     * do that by always precalculating the animation but as we know
+     * this will be done anyway we can assume that spring will
+     * be discovered during that.
+     */let timeReachedBoundary;let spring$1;const checkCatchBoundary=t=>{if(!isOutOfBounds(state.value))return;timeReachedBoundary=t;spring$1=spring({keyframes:[state.value,nearestBoundary(state.value)],velocity:calcGeneratorVelocity(calcLatest,t,state.value),damping:bounceDamping,stiffness:bounceStiffness,restDelta,restSpeed});};checkCatchBoundary(0);return{calculatedDuration:null,next:t=>{/**
+             * We need to resolve the friction to figure out if we need a
+             * spring but we don't want to do this twice per frame. So here
+             * we flag if we updated for this frame and later if we did
+             * we can skip doing it again.
+             */let hasUpdatedFrame=false;if(!spring$1&&timeReachedBoundary===undefined){hasUpdatedFrame=true;applyFriction(t);checkCatchBoundary(t);}/**
+             * If we have a spring and the provided t is beyond the moment the friction
+             * animation crossed the min/max boundary, use the spring.
+             */if(timeReachedBoundary!==undefined&&t>timeReachedBoundary){return spring$1.next(t-timeReachedBoundary);}else{!hasUpdatedFrame&&applyFriction(t);return state;}}};}const frameloopDriver=update=>{const passTimestamp=_ref31=>{let{timestamp}=_ref31;return update(timestamp);};return{start:()=>frame.update(passTimestamp,true),stop:()=>cancelFrame(passTimestamp),/**
+         * If we're processing this frame we can use the
+         * framelocked timestamp to keep things in sync.
+         */now:()=>frameData.isProcessing?frameData.timestamp:performance.now()};};/**
+ * Implement a practical max duration for keyframe generation
+ * to prevent infinite loops
+ */const maxGeneratorDuration=20000;function calcGeneratorDuration(generator){let duration=0;const timeStep=50;let state=generator.next(duration);while(!state.done&&duration<maxGeneratorDuration){duration+=timeStep;state=generator.next(duration);}return duration>=maxGeneratorDuration?Infinity:duration;}const types={decay:inertia,inertia,tween:keyframes,keyframes:keyframes,spring};/**
+ * Animate a single value on the main thread.
+ *
+ * This function is written, where functionality overlaps,
+ * to be largely spec-compliant with WAAPI to allow fungibility
+ * between the two.
+ */function animateValue(_ref32){let{autoplay=true,delay=0,driver=frameloopDriver,keyframes:keyframes$1,type="keyframes",repeat=0,repeatDelay=0,repeatType="loop",onPlay,onStop,onComplete,onUpdate,...options}=_ref32;let speed=1;let hasStopped=false;let resolveFinishedPromise;let currentFinishedPromise;/**
+     * Create a new finished Promise every time we enter the
+     * finished state and resolve the old Promise. This is
+     * WAAPI-compatible behaviour.
+     */const updateFinishedPromise=()=>{resolveFinishedPromise&&resolveFinishedPromise();currentFinishedPromise=new Promise(resolve=>{resolveFinishedPromise=resolve;});};// Create the first finished promise
+updateFinishedPromise();let animationDriver;const generatorFactory=types[type]||keyframes;/**
+     * If this isn't the keyframes generator and we've been provided
+     * strings as keyframes, we need to interpolate these.
+     * TODO: Support velocity for units and complex value types/
+     */let mapNumbersToKeyframes;if(generatorFactory!==keyframes&&typeof keyframes$1[0]!=="number"){mapNumbersToKeyframes=interpolate([0,100],keyframes$1,{clamp:false});keyframes$1=[0,100];}const generator=generatorFactory({...options,keyframes:keyframes$1});let mirroredGenerator;if(repeatType==="mirror"){mirroredGenerator=generatorFactory({...options,keyframes:[...keyframes$1].reverse(),velocity:-(options.velocity||0)});}let playState="idle";let holdTime=null;let startTime=null;let cancelTime=null;/**
+     * If duration is undefined and we have repeat options,
+     * we need to calculate a duration from the generator.
+     *
+     * We set it to the generator itself to cache the duration.
+     * Any timeline resolver will need to have already precalculated
+     * the duration by this step.
+     */if(generator.calculatedDuration===null&&repeat){generator.calculatedDuration=calcGeneratorDuration(generator);}const{calculatedDuration}=generator;let resolvedDuration=Infinity;let totalDuration=Infinity;if(calculatedDuration!==null){resolvedDuration=calculatedDuration+repeatDelay;totalDuration=resolvedDuration*(repeat+1)-repeatDelay;}let currentTime=0;const tick=timestamp=>{if(startTime===null)return;/**
+         * requestAnimationFrame timestamps can come through as lower than
+         * the startTime as set by performance.now(). Here we prevent this,
+         * though in the future it could be possible to make setting startTime
+         * a pending operation that gets resolved here.
+         */if(speed>0)startTime=Math.min(startTime,timestamp);if(holdTime!==null){currentTime=holdTime;}else{currentTime=(timestamp-startTime)*speed;}// Rebase on delay
+const timeWithoutDelay=currentTime-delay;const isInDelayPhase=timeWithoutDelay<0;currentTime=Math.max(timeWithoutDelay,0);/**
+         * If this animation has finished, set the current time
+         * to the total duration.
+         */if(playState==="finished"&&holdTime===null){currentTime=totalDuration;}let elapsed=currentTime;let frameGenerator=generator;if(repeat){/**
+             * Get the current progress (0-1) of the animation. If t is >
+             * than duration we'll get values like 2.5 (midway through the
+             * third iteration)
+             */const progress=currentTime/resolvedDuration;/**
+             * Get the current iteration (0 indexed). For instance the floor of
+             * 2.5 is 2.
+             */let currentIteration=Math.floor(progress);/**
+             * Get the current progress of the iteration by taking the remainder
+             * so 2.5 is 0.5 through iteration 2
+             */let iterationProgress=progress%1.0;/**
+             * If iteration progress is 1 we count that as the end
+             * of the previous iteration.
+             */if(!iterationProgress&&progress>=1){iterationProgress=1;}iterationProgress===1&&currentIteration--;currentIteration=Math.min(currentIteration,repeat+1);/**
+             * Reverse progress if we're not running in "normal" direction
+             */const iterationIsOdd=Boolean(currentIteration%2);if(iterationIsOdd){if(repeatType==="reverse"){iterationProgress=1-iterationProgress;if(repeatDelay){iterationProgress-=repeatDelay/resolvedDuration;}}else if(repeatType==="mirror"){frameGenerator=mirroredGenerator;}}let p=clamp(0,1,iterationProgress);if(currentTime>totalDuration){p=repeatType==="reverse"&&iterationIsOdd?1:0;}elapsed=p*resolvedDuration;}/**
+         * If we're in negative time, set state as the initial keyframe.
+         * This prevents delay: x, duration: 0 animations from finishing
+         * instantly.
+         */const state=isInDelayPhase?{done:false,value:keyframes$1[0]}:frameGenerator.next(elapsed);if(mapNumbersToKeyframes){state.value=mapNumbersToKeyframes(state.value);}let{done}=state;if(!isInDelayPhase&&calculatedDuration!==null){done=currentTime>=totalDuration;}const isAnimationFinished=holdTime===null&&(playState==="finished"||playState==="running"&&done||speed<0&&currentTime<=0);if(onUpdate){onUpdate(state.value);}if(isAnimationFinished){finish();}return state;};const stopAnimationDriver=()=>{animationDriver&&animationDriver.stop();animationDriver=undefined;};const cancel=()=>{playState="idle";stopAnimationDriver();updateFinishedPromise();startTime=cancelTime=null;};const finish=()=>{playState="finished";onComplete&&onComplete();stopAnimationDriver();updateFinishedPromise();};const play=()=>{if(hasStopped)return;if(!animationDriver)animationDriver=driver(tick);const now=animationDriver.now();onPlay&&onPlay();if(holdTime!==null){startTime=now-holdTime;}else if(!startTime||playState==="finished"){startTime=now;}cancelTime=startTime;holdTime=null;/**
+         * Set playState to running only after we've used it in
+         * the previous logic.
+         */playState="running";animationDriver.start();};if(autoplay){play();}const controls={then(resolve,reject){return currentFinishedPromise.then(resolve,reject);},get time(){return millisecondsToSeconds(currentTime);},set time(newTime){newTime=secondsToMilliseconds(newTime);currentTime=newTime;if(holdTime!==null||!animationDriver||speed===0){holdTime=newTime;}else{startTime=animationDriver.now()-newTime/speed;}},get duration(){const duration=generator.calculatedDuration===null?calcGeneratorDuration(generator):generator.calculatedDuration;return millisecondsToSeconds(duration);},get speed(){return speed;},set speed(newSpeed){if(newSpeed===speed||!animationDriver)return;speed=newSpeed;controls.time=millisecondsToSeconds(currentTime);},get state(){return playState;},play,pause:()=>{playState="paused";holdTime=currentTime;},stop:()=>{hasStopped=true;if(playState==="idle")return;playState="idle";onStop&&onStop();cancel();},cancel:()=>{if(cancelTime!==null)tick(cancelTime);cancel();},complete:()=>{playState="finished";},sample:elapsed=>{startTime=0;return tick(elapsed);}};return controls;}/**
+ * A list of values that can be hardware-accelerated.
+ */const acceleratedValues=new Set(["opacity","clipPath","filter","transform","backgroundColor"]);/**
+ * 10ms is chosen here as it strikes a balance between smooth
+ * results (more than one keyframe per frame at 60fps) and
+ * keyframe quantity.
+ */const sampleDelta=10;//ms
+/**
+ * Implement a practical max duration for keyframe generation
+ * to prevent infinite loops
+ */const maxDuration=20000;const requiresPregeneratedKeyframes=(valueName,options)=>options.type==="spring"||valueName==="backgroundColor"||!isWaapiSupportedEasing(options.ease);function createAcceleratedAnimation(value,valueName,_ref33){let{onUpdate,onComplete,...options}=_ref33;const canAccelerateAnimation=supports.waapi()&&acceleratedValues.has(valueName)&&!options.repeatDelay&&options.repeatType!=="mirror"&&options.damping!==0&&options.type!=="inertia";if(!canAccelerateAnimation)return false;/**
+     * TODO: Unify with js/index
+     */let hasStopped=false;let resolveFinishedPromise;let currentFinishedPromise;/**
+     * Create a new finished Promise every time we enter the
+     * finished state and resolve the old Promise. This is
+     * WAAPI-compatible behaviour.
+     */const updateFinishedPromise=()=>{currentFinishedPromise=new Promise(resolve=>{resolveFinishedPromise=resolve;});};// Create the first finished promise
+updateFinishedPromise();let{keyframes,duration=300,ease,times}=options;/**
+     * If this animation needs pre-generated keyframes then generate.
+     */if(requiresPregeneratedKeyframes(valueName,options)){const sampleAnimation=animateValue({...options,repeat:0,delay:0});let state={done:false,value:keyframes[0]};const pregeneratedKeyframes=[];/**
+         * Bail after 20 seconds of pre-generated keyframes as it's likely
+         * we're heading for an infinite loop.
+         */let t=0;while(!state.done&&t<maxDuration){state=sampleAnimation.sample(t);pregeneratedKeyframes.push(state.value);t+=sampleDelta;}times=undefined;keyframes=pregeneratedKeyframes;duration=t-sampleDelta;ease="linear";}const animation=animateStyle(value.owner.current,valueName,keyframes,{...options,duration,/**
+         * This function is currently not called if ease is provided
+         * as a function so the cast is safe.
+         *
+         * However it would be possible for a future refinement to port
+         * in easing pregeneration from Motion One for browsers that
+         * support the upcoming `linear()` easing function.
+         */ease:ease,times});const cancelAnimation=()=>animation.cancel();const safeCancel=()=>{frame.update(cancelAnimation);resolveFinishedPromise();updateFinishedPromise();};/**
+     * Prefer the `onfinish` prop as it's more widely supported than
+     * the `finished` promise.
+     *
+     * Here, we synchronously set the provided MotionValue to the end
+     * keyframe. If we didn't, when the WAAPI animation is finished it would
+     * be removed from the element which would then revert to its old styles.
+     */animation.onfinish=()=>{value.set(getFinalKeyframe(keyframes,options));onComplete&&onComplete();safeCancel();};/**
+     * Animation interrupt callback.
+     */return{then(resolve,reject){return currentFinishedPromise.then(resolve,reject);},get time(){return millisecondsToSeconds(animation.currentTime||0);},set time(newTime){animation.currentTime=secondsToMilliseconds(newTime);},get speed(){return animation.playbackRate;},set speed(newSpeed){animation.playbackRate=newSpeed;},get duration(){return millisecondsToSeconds(duration);},play:()=>{if(hasStopped)return;animation.play();/**
+             * Cancel any pending cancel tasks
+             */cancelFrame(cancelAnimation);},pause:()=>animation.pause(),stop:()=>{hasStopped=true;if(animation.playState==="idle")return;/**
+             * WAAPI doesn't natively have any interruption capabilities.
+             *
+             * Rather than read commited styles back out of the DOM, we can
+             * create a renderless JS animation and sample it twice to calculate
+             * its current value, "previous" value, and therefore allow
+             * Motion to calculate velocity for any subsequent animation.
+             */const{currentTime}=animation;if(currentTime){const sampleAnimation=animateValue({...options,autoplay:false});value.setWithVelocity(sampleAnimation.sample(currentTime-sampleDelta).value,sampleAnimation.sample(currentTime).value,sampleDelta);}safeCancel();},complete:()=>animation.finish(),cancel:safeCancel};}function createInstantAnimation(_ref34){let{keyframes,delay,onUpdate,onComplete}=_ref34;const setValue=()=>{onUpdate&&onUpdate(keyframes[keyframes.length-1]);onComplete&&onComplete();/**
+         * TODO: As this API grows it could make sense to always return
+         * animateValue. This will be a bigger project as animateValue
+         * is frame-locked whereas this function resolves instantly.
+         * This is a behavioural change and also has ramifications regarding
+         * assumptions within tests.
+         */return{time:0,speed:1,duration:0,play:noop,pause:noop,stop:noop,then:resolve=>{resolve();return Promise.resolve();},cancel:noop,complete:noop};};return delay?animateValue({keyframes:[0,1],duration:0,delay,onComplete:setValue}):setValue();}const underDampedSpring={type:"spring",stiffness:500,damping:25,restSpeed:10};const criticallyDampedSpring=target=>({type:"spring",stiffness:550,damping:target===0?2*Math.sqrt(550):30,restSpeed:10});const keyframesTransition={type:"keyframes",duration:0.8};/**
+ * Default easing curve is a slightly shallower version of
+ * the default browser easing curve.
+ */const ease={type:"keyframes",ease:[0.25,0.1,0.35,1],duration:0.3};const getDefaultTransition=(valueKey,_ref35)=>{let{keyframes}=_ref35;if(keyframes.length>2){return keyframesTransition;}else if(transformProps.has(valueKey)){return valueKey.startsWith("scale")?criticallyDampedSpring(keyframes[1]):underDampedSpring;}return ease;};/**
+ * Check if a value is animatable. Examples:
+ *
+ * ✅: 100, "100px", "#fff"
+ * ❌: "block", "url(2.jpg)"
+ * @param value
+ *
+ * @internal
+ */const isAnimatable=(key,value)=>{// If the list of keys tat might be non-animatable grows, replace with Set
+if(key==="zIndex")return false;// If it's a number or a keyframes array, we can animate it. We might at some point
+// need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
+// but for now lets leave it like this for performance reasons
+if(typeof value==="number"||Array.isArray(value))return true;if(typeof value==="string"&&(// It's animatable if we have a string
+complex.test(value)||value==="0")&&// And it contains numbers and/or colors
+!value.startsWith("url(")// Unless it starts with "url("
+){return true;}return false;};/**
+ * Properties that should default to 1 or 100%
+ */const maxDefaults=new Set(["brightness","contrast","saturate","opacity"]);function applyDefaultFilter(v){const[name,value]=v.slice(0,-1).split("(");if(name==="drop-shadow")return v;const[number]=value.match(floatRegex)||[];if(!number)return v;const unit=value.replace(number,"");let defaultValue=maxDefaults.has(name)?1:0;if(number!==value)defaultValue*=100;return name+"("+defaultValue+unit+")";}const functionRegex=/([a-z-]*)\(.*?\)/g;const filter={...complex,getAnimatableNone:v=>{const functions=v.match(functionRegex);return functions?functions.map(applyDefaultFilter).join(" "):v;}};/**
+ * A map of default value types for common values
+ */const defaultValueTypes={...numberValueTypes,// Color props
+color,backgroundColor:color,outlineColor:color,fill:color,stroke:color,// Border props
+borderColor:color,borderTopColor:color,borderRightColor:color,borderBottomColor:color,borderLeftColor:color,filter,WebkitFilter:filter};/**
+ * Gets the default ValueType for the provided value key
+ */const getDefaultValueType=key=>defaultValueTypes[key];function getAnimatableNone(key,value){let defaultValueType=getDefaultValueType(key);if(defaultValueType!==filter)defaultValueType=complex;// If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
+return defaultValueType.getAnimatableNone?defaultValueType.getAnimatableNone(value):undefined;}/**
+ * Check if the value is a zero value string like "0px" or "0%"
+ */const isZeroValueString=v=>/^0[^.\s]+$/.test(v);function isNone(value){if(typeof value==="number"){return value===0;}else if(value!==null){return value==="none"||value==="0"||isZeroValueString(value);}}function getKeyframes(value,valueName,target,transition){const isTargetAnimatable=isAnimatable(valueName,target);let keyframes;if(Array.isArray(target)){keyframes=[...target];}else{keyframes=[null,target];}const defaultOrigin=transition.from!==undefined?transition.from:value.get();let animatableTemplateValue=undefined;const noneKeyframeIndexes=[];for(let i=0;i<keyframes.length;i++){/**
+         * Fill null/wildcard keyframes
+         */if(keyframes[i]===null){keyframes[i]=i===0?defaultOrigin:keyframes[i-1];}if(isNone(keyframes[i])){noneKeyframeIndexes.push(i);}// TODO: Clean this conditional, it works for now
+if(typeof keyframes[i]==="string"&&keyframes[i]!=="none"&&keyframes[i]!=="0"){animatableTemplateValue=keyframes[i];}}if(isTargetAnimatable&&noneKeyframeIndexes.length&&animatableTemplateValue){for(let i=0;i<noneKeyframeIndexes.length;i++){const index=noneKeyframeIndexes[i];keyframes[index]=getAnimatableNone(valueName,animatableTemplateValue);}}return keyframes;}/**
+ * Decide whether a transition is defined on a given Transition.
+ * This filters out orchestration options and returns true
+ * if any options are left.
+ */function isTransitionDefined(_ref36){let{when,delay:_delay,delayChildren,staggerChildren,staggerDirection,repeat,repeatType,repeatDelay,from,elapsed,...transition}=_ref36;return!!Object.keys(transition).length;}function getValueTransition(transition,key){return transition[key]||transition["default"]||transition;}const animateMotionValue=function(valueName,value,target){let transition=arguments.length>3&&arguments[3]!==undefined?arguments[3]:{};return onComplete=>{const valueTransition=getValueTransition(transition,valueName)||{};/**
+         * Most transition values are currently completely overwritten by value-specific
+         * transitions. In the future it'd be nicer to blend these transitions. But for now
+         * delay actually does inherit from the root transition if not value-specific.
+         */const delay=valueTransition.delay||transition.delay||0;/**
+         * Elapsed isn't a public transition option but can be passed through from
+         * optimized appear effects in milliseconds.
+         */let{elapsed=0}=transition;elapsed=elapsed-secondsToMilliseconds(delay);const keyframes=getKeyframes(value,valueName,target,valueTransition);/**
+         * Check if we're able to animate between the start and end keyframes,
+         * and throw a warning if we're attempting to animate between one that's
+         * animatable and another that isn't.
+         */const originKeyframe=keyframes[0];const targetKeyframe=keyframes[keyframes.length-1];const isOriginAnimatable=isAnimatable(valueName,originKeyframe);const isTargetAnimatable=isAnimatable(valueName,targetKeyframe);warning(isOriginAnimatable===isTargetAnimatable,"You are trying to animate ".concat(valueName," from \"").concat(originKeyframe,"\" to \"").concat(targetKeyframe,"\". ").concat(originKeyframe," is not an animatable value - to enable this animation set ").concat(originKeyframe," to a value animatable to ").concat(targetKeyframe," via the `style` property."));let options={keyframes,velocity:value.getVelocity(),ease:"easeOut",...valueTransition,delay:-elapsed,onUpdate:v=>{value.set(v);valueTransition.onUpdate&&valueTransition.onUpdate(v);},onComplete:()=>{onComplete();valueTransition.onComplete&&valueTransition.onComplete();}};/**
+         * If there's no transition defined for this value, we can generate
+         * unqiue transition settings for this value.
+         */if(!isTransitionDefined(valueTransition)){options={...options,...getDefaultTransition(valueName,options)};}/**
+         * Both WAAPI and our internal animation functions use durations
+         * as defined by milliseconds, while our external API defines them
+         * as seconds.
+         */if(options.duration){options.duration=secondsToMilliseconds(options.duration);}if(options.repeatDelay){options.repeatDelay=secondsToMilliseconds(options.repeatDelay);}if(!isOriginAnimatable||!isTargetAnimatable||instantAnimationState.current||valueTransition.type===false){/**
+             * If we can't animate this value, or the global instant animation flag is set,
+             * or this is simply defined as an instant transition, return an instant transition.
+             */return createInstantAnimation(options);}/**
+         * Animate via WAAPI if possible.
+         */if(value.owner&&value.owner.current instanceof HTMLElement&&!value.owner.getProps().onUpdate){const acceleratedAnimation=createAcceleratedAnimation(value,valueName,options);if(acceleratedAnimation)return acceleratedAnimation;}/**
+         * If we didn't create an accelerated animation, create a JS animation
+         */return animateValue(options);};};function isWillChangeMotionValue(value){return Boolean(isMotionValue(value)&&value.add);}/**
+ * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
+ */const isNumericalString=v=>/^\-?\d*\.?\d+$/.test(v);function addUniqueItem(arr,item){if(arr.indexOf(item)===-1)arr.push(item);}function removeItem(arr,item){const index=arr.indexOf(item);if(index>-1)arr.splice(index,1);}class SubscriptionManager{constructor(){this.subscriptions=[];}add(handler){addUniqueItem(this.subscriptions,handler);return()=>removeItem(this.subscriptions,handler);}notify(a,b,c){const numSubscriptions=this.subscriptions.length;if(!numSubscriptions)return;if(numSubscriptions===1){/**
+             * If there's only a single handler we can just call it without invoking a loop.
+             */this.subscriptions[0](a,b,c);}else{for(let i=0;i<numSubscriptions;i++){/**
+                 * Check whether the handler exists before firing as it's possible
+                 * the subscriptions were modified during this loop running.
+                 */const handler=this.subscriptions[i];handler&&handler(a,b,c);}}}getSize(){return this.subscriptions.length;}clear(){this.subscriptions.length=0;}}const warned=new Set();function warnOnce(condition,message,element){if(condition||warned.has(message))return;console.warn(message);if(element)console.warn(element);warned.add(message);}const isFloat=value=>{return!isNaN(parseFloat(value));};/**
+ * `MotionValue` is used to track the state and velocity of motion values.
+ *
+ * @public
+ */class MotionValue{/**
+     * @param init - The initiating value
+     * @param config - Optional configuration options
+     *
+     * -  `transformer`: A function to transform incoming values with.
+     *
+     * @internal
+     */constructor(init){var _this=this;let options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};/**
+         * This will be replaced by the build step with the latest version number.
+         * When MotionValues are provided to motion components, warn if versions are mixed.
+         */this.version="10.12.16";/**
+         * Duration, in milliseconds, since last updating frame.
+         *
+         * @internal
+         */this.timeDelta=0;/**
+         * Timestamp of the last time this `MotionValue` was updated.
+         *
+         * @internal
+         */this.lastUpdated=0;/**
+         * Tracks whether this value can output a velocity. Currently this is only true
+         * if the value is numerical, but we might be able to widen the scope here and support
+         * other value types.
+         *
+         * @internal
+         */this.canTrackVelocity=false;/**
+         * An object containing a SubscriptionManager for each active event.
+         */this.events={};this.updateAndNotify=function(v){let render=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;_this.prev=_this.current;_this.current=v;// Update timestamp
+const{delta,timestamp}=frameData;if(_this.lastUpdated!==timestamp){_this.timeDelta=delta;_this.lastUpdated=timestamp;frame.postRender(_this.scheduleVelocityCheck);}// Update update subscribers
+if(_this.prev!==_this.current&&_this.events.change){_this.events.change.notify(_this.current);}// Update velocity subscribers
+if(_this.events.velocityChange){_this.events.velocityChange.notify(_this.getVelocity());}// Update render subscribers
+if(render&&_this.events.renderRequest){_this.events.renderRequest.notify(_this.current);}};/**
+         * Schedule a velocity check for the next frame.
+         *
+         * This is an instanced and bound function to prevent generating a new
+         * function once per frame.
+         *
+         * @internal
+         */this.scheduleVelocityCheck=()=>frame.postRender(this.velocityCheck);/**
+         * Updates `prev` with `current` if the value hasn't been updated this frame.
+         * This ensures velocity calculations return `0`.
+         *
+         * This is an instanced and bound function to prevent generating a new
+         * function once per frame.
+         *
+         * @internal
+         */this.velocityCheck=_ref37=>{let{timestamp}=_ref37;if(timestamp!==this.lastUpdated){this.prev=this.current;if(this.events.velocityChange){this.events.velocityChange.notify(this.getVelocity());}}};this.hasAnimated=false;this.prev=this.current=init;this.canTrackVelocity=isFloat(this.current);this.owner=options.owner;}/**
+     * Adds a function that will be notified when the `MotionValue` is updated.
+     *
+     * It returns a function that, when called, will cancel the subscription.
+     *
+     * When calling `onChange` inside a React component, it should be wrapped with the
+     * `useEffect` hook. As it returns an unsubscribe function, this should be returned
+     * from the `useEffect` function to ensure you don't add duplicate subscribers..
+     *
+     * ```jsx
+     * export const MyComponent = () => {
+     *   const x = useMotionValue(0)
+     *   const y = useMotionValue(0)
+     *   const opacity = useMotionValue(1)
+     *
+     *   useEffect(() => {
+     *     function updateOpacity() {
+     *       const maxXY = Math.max(x.get(), y.get())
+     *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
+     *       opacity.set(newOpacity)
+     *     }
+     *
+     *     const unsubscribeX = x.on("change", updateOpacity)
+     *     const unsubscribeY = y.on("change", updateOpacity)
+     *
+     *     return () => {
+     *       unsubscribeX()
+     *       unsubscribeY()
+     *     }
+     *   }, [])
+     *
+     *   return <motion.div style={{ x }} />
+     * }
+     * ```
+     *
+     * @param subscriber - A function that receives the latest value.
+     * @returns A function that, when called, will cancel this subscription.
+     *
+     * @deprecated
+     */onChange(subscription){if(process.env.NODE_ENV!=="production"){warnOnce(false,"value.onChange(callback) is deprecated. Switch to value.on(\"change\", callback).");}return this.on("change",subscription);}on(eventName,callback){if(!this.events[eventName]){this.events[eventName]=new SubscriptionManager();}const unsubscribe=this.events[eventName].add(callback);if(eventName==="change"){return()=>{unsubscribe();/**
+                 * If we have no more change listeners by the start
+                 * of the next frame, stop active animations.
+                 */frame.read(()=>{if(!this.events.change.getSize()){this.stop();}});};}return unsubscribe;}clearListeners(){for(const eventManagers in this.events){this.events[eventManagers].clear();}}/**
+     * Attaches a passive effect to the `MotionValue`.
+     *
+     * @internal
+     */attach(passiveEffect,stopPassiveEffect){this.passiveEffect=passiveEffect;this.stopPassiveEffect=stopPassiveEffect;}/**
+     * Sets the state of the `MotionValue`.
+     *
+     * @remarks
+     *
+     * ```jsx
+     * const x = useMotionValue(0)
+     * x.set(10)
+     * ```
+     *
+     * @param latest - Latest value to set.
+     * @param render - Whether to notify render subscribers. Defaults to `true`
+     *
+     * @public
+     */set(v){let render=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;if(!render||!this.passiveEffect){this.updateAndNotify(v,render);}else{this.passiveEffect(v,this.updateAndNotify);}}setWithVelocity(prev,current,delta){this.set(current);this.prev=prev;this.timeDelta=delta;}/**
+     * Set the state of the `MotionValue`, stopping any active animations,
+     * effects, and resets velocity to `0`.
+     */jump(v){this.updateAndNotify(v);this.prev=v;this.stop();if(this.stopPassiveEffect)this.stopPassiveEffect();}/**
+     * Returns the latest state of `MotionValue`
+     *
+     * @returns - The latest state of `MotionValue`
+     *
+     * @public
+     */get(){return this.current;}/**
+     * @public
+     */getPrevious(){return this.prev;}/**
+     * Returns the latest velocity of `MotionValue`
+     *
+     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
+     *
+     * @public
+     */getVelocity(){// This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful
+return this.canTrackVelocity?// These casts could be avoided if parseFloat would be typed better
+velocityPerSecond(parseFloat(this.current)-parseFloat(this.prev),this.timeDelta):0;}/**
+     * Registers a new animation to control this `MotionValue`. Only one
+     * animation can drive a `MotionValue` at one time.
+     *
+     * ```jsx
+     * value.start()
+     * ```
+     *
+     * @param animation - A function that starts the provided animation
+     *
+     * @internal
+     */start(startAnimation){this.stop();return new Promise(resolve=>{this.hasAnimated=true;this.animation=startAnimation(resolve);if(this.events.animationStart){this.events.animationStart.notify();}}).then(()=>{if(this.events.animationComplete){this.events.animationComplete.notify();}this.clearAnimation();});}/**
+     * Stop the currently active animation.
+     *
+     * @public
+     */stop(){if(this.animation){this.animation.stop();if(this.events.animationCancel){this.events.animationCancel.notify();}}this.clearAnimation();}/**
+     * Returns `true` if this value is currently animating.
+     *
+     * @public
+     */isAnimating(){return!!this.animation;}clearAnimation(){delete this.animation;}/**
+     * Destroy and clean up subscribers to this `MotionValue`.
+     *
+     * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
+     * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
+     * created a `MotionValue` via the `motionValue` function.
+     *
+     * @public
+     */destroy(){this.clearListeners();this.stop();if(this.stopPassiveEffect){this.stopPassiveEffect();}}}function motionValue(init,options){return new MotionValue(init,options);}/**
+ * Tests a provided value against a ValueType
+ */const testValueType=v=>type=>type.test(v);/**
+ * ValueType for "auto"
+ */const auto={test:v=>v==="auto",parse:v=>v};/**
+ * A list of value types commonly used for dimensions
+ */const dimensionValueTypes=[number,px,percent,degrees,vw,vh,auto];/**
+ * Tests a dimensional value against the list of dimension ValueTypes
+ */const findDimensionValueType=v=>dimensionValueTypes.find(testValueType(v));/**
+ * A list of all ValueTypes
+ */const valueTypes=[...dimensionValueTypes,color,complex];/**
+ * Tests a value against the list of ValueTypes
+ */const findValueType=v=>valueTypes.find(testValueType(v));/**
+ * Set VisualElement's MotionValue, creating a new MotionValue for it if
+ * it doesn't exist.
+ */function setMotionValue(visualElement,key,value){if(visualElement.hasValue(key)){visualElement.getValue(key).set(value);}else{visualElement.addValue(key,motionValue(value));}}function setTarget(visualElement,definition){const resolved=resolveVariant(visualElement,definition);let{transitionEnd={},transition={},...target}=resolved?visualElement.makeTargetAnimatable(resolved,false):{};target={...target,...transitionEnd};for(const key in target){const value=resolveFinalValueInKeyframes(target[key]);setMotionValue(visualElement,key,value);}}function checkTargetForNewValues(visualElement,target,origin){var _a,_b;const newValueKeys=Object.keys(target).filter(key=>!visualElement.hasValue(key));const numNewValues=newValueKeys.length;if(!numNewValues)return;for(let i=0;i<numNewValues;i++){const key=newValueKeys[i];const targetValue=target[key];let value=null;/**
+         * If the target is a series of keyframes, we can use the first value
+         * in the array. If this first value is null, we'll still need to read from the DOM.
+         */if(Array.isArray(targetValue)){value=targetValue[0];}/**
+         * If the target isn't keyframes, or the first keyframe was null, we need to
+         * first check if an origin value was explicitly defined in the transition as "from",
+         * if not read the value from the DOM. As an absolute fallback, take the defined target value.
+         */if(value===null){value=(_b=(_a=origin[key])!==null&&_a!==void 0?_a:visualElement.readValue(key))!==null&&_b!==void 0?_b:target[key];}/**
+         * If value is still undefined or null, ignore it. Preferably this would throw,
+         * but this was causing issues in Framer.
+         */if(value===undefined||value===null)continue;if(typeof value==="string"&&(isNumericalString(value)||isZeroValueString(value))){// If this is a number read as a string, ie "0" or "200", convert it to a number
+value=parseFloat(value);}else if(!findValueType(value)&&complex.test(targetValue)){value=getAnimatableNone(key,targetValue);}visualElement.addValue(key,motionValue(value,{owner:visualElement}));if(origin[key]===undefined){origin[key]=value;}if(value!==null)visualElement.setBaseTarget(key,value);}}function getOriginFromTransition(key,transition){if(!transition)return;const valueTransition=transition[key]||transition["default"]||transition;return valueTransition.from;}function getOrigin(target,transition,visualElement){const origin={};for(const key in target){const transitionOrigin=getOriginFromTransition(key,transition);if(transitionOrigin!==undefined){origin[key]=transitionOrigin;}else{const value=visualElement.getValue(key);if(value){origin[key]=value.get();}}}return origin;}/**
+ * Decide whether we should block this animation. Previously, we achieved this
+ * just by checking whether the key was listed in protectedKeys, but this
+ * posed problems if an animation was triggered by afterChildren and protectedKeys
+ * had been set to true in the meantime.
+ */function shouldBlockAnimation(_ref38,key){let{protectedKeys,needsAnimating}=_ref38;const shouldBlock=protectedKeys.hasOwnProperty(key)&&needsAnimating[key]!==true;needsAnimating[key]=false;return shouldBlock;}function animateTarget(visualElement,definition){let{delay=0,transitionOverride,type}=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};let{transition=visualElement.getDefaultTransition(),transitionEnd,...target}=visualElement.makeTargetAnimatable(definition);const willChange=visualElement.getValue("willChange");if(transitionOverride)transition=transitionOverride;const animations=[];const animationTypeState=type&&visualElement.animationState&&visualElement.animationState.getState()[type];for(const key in target){const value=visualElement.getValue(key);const valueTarget=target[key];if(!value||valueTarget===undefined||animationTypeState&&shouldBlockAnimation(animationTypeState,key)){continue;}const valueTransition={delay,elapsed:0,...transition};/**
+         * If this is the first time a value is being animated, check
+         * to see if we're handling off from an existing animation.
+         */if(window.HandoffAppearAnimations&&!value.hasAnimated){const appearId=visualElement.getProps()[optimizedAppearDataAttribute];if(appearId){valueTransition.elapsed=window.HandoffAppearAnimations(appearId,key,value,frame);}}value.start(animateMotionValue(key,value,valueTarget,visualElement.shouldReduceMotion&&transformProps.has(key)?{type:false}:valueTransition));const animation=value.animation;if(isWillChangeMotionValue(willChange)){willChange.add(key);animation.then(()=>willChange.remove(key));}animations.push(animation);}if(transitionEnd){Promise.all(animations).then(()=>{transitionEnd&&setTarget(visualElement,transitionEnd);});}return animations;}function animateVariant(visualElement,variant){let options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};const resolved=resolveVariant(visualElement,variant,options.custom);let{transition=visualElement.getDefaultTransition()||{}}=resolved||{};if(options.transitionOverride){transition=options.transitionOverride;}/**
+     * If we have a variant, create a callback that runs it as an animation.
+     * Otherwise, we resolve a Promise immediately for a composable no-op.
+     */const getAnimation=resolved?()=>Promise.all(animateTarget(visualElement,resolved,options)):()=>Promise.resolve();/**
+     * If we have children, create a callback that runs all their animations.
+     * Otherwise, we resolve a Promise immediately for a composable no-op.
+     */const getChildAnimations=visualElement.variantChildren&&visualElement.variantChildren.size?function(){let forwardDelay=arguments.length>0&&arguments[0]!==undefined?arguments[0]:0;const{delayChildren=0,staggerChildren,staggerDirection}=transition;return animateChildren(visualElement,variant,delayChildren+forwardDelay,staggerChildren,staggerDirection,options);}:()=>Promise.resolve();/**
+     * If the transition explicitly defines a "when" option, we need to resolve either
+     * this animation or all children animations before playing the other.
+     */const{when}=transition;if(when){const[first,last]=when==="beforeChildren"?[getAnimation,getChildAnimations]:[getChildAnimations,getAnimation];return first().then(()=>last());}else{return Promise.all([getAnimation(),getChildAnimations(options.delay)]);}}function animateChildren(visualElement,variant){let delayChildren=arguments.length>2&&arguments[2]!==undefined?arguments[2]:0;let staggerChildren=arguments.length>3&&arguments[3]!==undefined?arguments[3]:0;let staggerDirection=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;let options=arguments.length>5?arguments[5]:undefined;const animations=[];const maxStaggerDuration=(visualElement.variantChildren.size-1)*staggerChildren;const generateStaggerDuration=staggerDirection===1?function(){let i=arguments.length>0&&arguments[0]!==undefined?arguments[0]:0;return i*staggerChildren;}:function(){let i=arguments.length>0&&arguments[0]!==undefined?arguments[0]:0;return maxStaggerDuration-i*staggerChildren;};Array.from(visualElement.variantChildren).sort(sortByTreeOrder).forEach((child,i)=>{child.notify("AnimationStart",variant);animations.push(animateVariant(child,variant,{...options,delay:delayChildren+generateStaggerDuration(i)}).then(()=>child.notify("AnimationComplete",variant)));});return Promise.all(animations);}function sortByTreeOrder(a,b){return a.sortNodePosition(b);}function animateVisualElement(visualElement,definition){let options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};visualElement.notify("AnimationStart",definition);let animation;if(Array.isArray(definition)){const animations=definition.map(variant=>animateVariant(visualElement,variant,options));animation=Promise.all(animations);}else if(typeof definition==="string"){animation=animateVariant(visualElement,definition,options);}else{const resolvedDefinition=typeof definition==="function"?resolveVariant(visualElement,definition,options.custom):definition;animation=Promise.all(animateTarget(visualElement,resolvedDefinition,options));}return animation.then(()=>visualElement.notify("AnimationComplete",definition));}const reversePriorityOrder=[...variantPriorityOrder].reverse();const numAnimationTypes=variantPriorityOrder.length;function animateList(visualElement){return animations=>Promise.all(animations.map(_ref39=>{let{animation,options}=_ref39;return animateVisualElement(visualElement,animation,options);}));}function createAnimationState(visualElement){let animate=animateList(visualElement);const state=createState();let isInitialRender=true;/**
+     * This function will be used to reduce the animation definitions for
+     * each active animation type into an object of resolved values for it.
+     */const buildResolvedTypeValues=(acc,definition)=>{const resolved=resolveVariant(visualElement,definition);if(resolved){const{transition,transitionEnd,...target}=resolved;acc={...acc,...target,...transitionEnd};}return acc;};/**
+     * This just allows us to inject mocked animation functions
+     * @internal
+     */function setAnimateFunction(makeAnimator){animate=makeAnimator(visualElement);}/**
+     * When we receive new props, we need to:
+     * 1. Create a list of protected keys for each type. This is a directory of
+     *    value keys that are currently being "handled" by types of a higher priority
+     *    so that whenever an animation is played of a given type, these values are
+     *    protected from being animated.
+     * 2. Determine if an animation type needs animating.
+     * 3. Determine if any values have been removed from a type and figure out
+     *    what to animate those to.
+     */function animateChanges(options,changedActiveType){const props=visualElement.getProps();const context=visualElement.getVariantContext(true)||{};/**
+         * A list of animations that we'll build into as we iterate through the animation
+         * types. This will get executed at the end of the function.
+         */const animations=[];/**
+         * Keep track of which values have been removed. Then, as we hit lower priority
+         * animation types, we can check if they contain removed values and animate to that.
+         */const removedKeys=new Set();/**
+         * A dictionary of all encountered keys. This is an object to let us build into and
+         * copy it without iteration. Each time we hit an animation type we set its protected
+         * keys - the keys its not allowed to animate - to the latest version of this object.
+         */let encounteredKeys={};/**
+         * If a variant has been removed at a given index, and this component is controlling
+         * variant animations, we want to ensure lower-priority variants are forced to animate.
+         */let removedVariantIndex=Infinity;/**
+         * Iterate through all animation types in reverse priority order. For each, we want to
+         * detect which values it's handling and whether or not they've changed (and therefore
+         * need to be animated). If any values have been removed, we want to detect those in
+         * lower priority props and flag for animation.
+         */for(let i=0;i<numAnimationTypes;i++){const type=reversePriorityOrder[i];const typeState=state[type];const prop=props[type]!==undefined?props[type]:context[type];const propIsVariant=isVariantLabel(prop);/**
+             * If this type has *just* changed isActive status, set activeDelta
+             * to that status. Otherwise set to null.
+             */const activeDelta=type===changedActiveType?typeState.isActive:null;if(activeDelta===false)removedVariantIndex=i;/**
+             * If this prop is an inherited variant, rather than been set directly on the
+             * component itself, we want to make sure we allow the parent to trigger animations.
+             *
+             * TODO: Can probably change this to a !isControllingVariants check
+             */let isInherited=prop===context[type]&&prop!==props[type]&&propIsVariant;/**
+             *
+             */if(isInherited&&isInitialRender&&visualElement.manuallyAnimateOnMount){isInherited=false;}/**
+             * Set all encountered keys so far as the protected keys for this type. This will
+             * be any key that has been animated or otherwise handled by active, higher-priortiy types.
+             */typeState.protectedKeys={...encounteredKeys};// Check if we can skip analysing this prop early
+if(// If it isn't active and hasn't *just* been set as inactive
+!typeState.isActive&&activeDelta===null||// If we didn't and don't have any defined prop for this animation type
+!prop&&!typeState.prevProp||// Or if the prop doesn't define an animation
+isAnimationControls(prop)||typeof prop==="boolean"){continue;}/**
+             * As we go look through the values defined on this type, if we detect
+             * a changed value or a value that was removed in a higher priority, we set
+             * this to true and add this prop to the animation list.
+             */const variantDidChange=checkVariantsDidChange(typeState.prevProp,prop);let shouldAnimateType=variantDidChange||// If we're making this variant active, we want to always make it active
+type===changedActiveType&&typeState.isActive&&!isInherited&&propIsVariant||// If we removed a higher-priority variant (i is in reverse order)
+i>removedVariantIndex&&propIsVariant;/**
+             * As animations can be set as variant lists, variants or target objects, we
+             * coerce everything to an array if it isn't one already
+             */const definitionList=Array.isArray(prop)?prop:[prop];/**
+             * Build an object of all the resolved values. We'll use this in the subsequent
+             * animateChanges calls to determine whether a value has changed.
+             */let resolvedValues=definitionList.reduce(buildResolvedTypeValues,{});if(activeDelta===false)resolvedValues={};/**
+             * Now we need to loop through all the keys in the prev prop and this prop,
+             * and decide:
+             * 1. If the value has changed, and needs animating
+             * 2. If it has been removed, and needs adding to the removedKeys set
+             * 3. If it has been removed in a higher priority type and needs animating
+             * 4. If it hasn't been removed in a higher priority but hasn't changed, and
+             *    needs adding to the type's protectedKeys list.
+             */const{prevResolvedValues={}}=typeState;const allKeys={...prevResolvedValues,...resolvedValues};const markToAnimate=key=>{shouldAnimateType=true;removedKeys.delete(key);typeState.needsAnimating[key]=true;};for(const key in allKeys){const next=resolvedValues[key];const prev=prevResolvedValues[key];// If we've already handled this we can just skip ahead
+if(encounteredKeys.hasOwnProperty(key))continue;/**
+                 * If the value has changed, we probably want to animate it.
+                 */if(next!==prev){/**
+                     * If both values are keyframes, we need to shallow compare them to
+                     * detect whether any value has changed. If it has, we animate it.
+                     */if(isKeyframesTarget(next)&&isKeyframesTarget(prev)){if(!shallowCompare(next,prev)||variantDidChange){markToAnimate(key);}else{/**
+                             * If it hasn't changed, we want to ensure it doesn't animate by
+                             * adding it to the list of protected keys.
+                             */typeState.protectedKeys[key]=true;}}else if(next!==undefined){// If next is defined and doesn't equal prev, it needs animating
+markToAnimate(key);}else{// If it's undefined, it's been removed.
+removedKeys.add(key);}}else if(next!==undefined&&removedKeys.has(key)){/**
+                     * If next hasn't changed and it isn't undefined, we want to check if it's
+                     * been removed by a higher priority
+                     */markToAnimate(key);}else{/**
+                     * If it hasn't changed, we add it to the list of protected values
+                     * to ensure it doesn't get animated.
+                     */typeState.protectedKeys[key]=true;}}/**
+             * Update the typeState so next time animateChanges is called we can compare the
+             * latest prop and resolvedValues to these.
+             */typeState.prevProp=prop;typeState.prevResolvedValues=resolvedValues;/**
+             *
+             */if(typeState.isActive){encounteredKeys={...encounteredKeys,...resolvedValues};}if(isInitialRender&&visualElement.blockInitialAnimation){shouldAnimateType=false;}/**
+             * If this is an inherited prop we want to hard-block animations
+             * TODO: Test as this should probably still handle animations triggered
+             * by removed values?
+             */if(shouldAnimateType&&!isInherited){animations.push(...definitionList.map(animation=>({animation:animation,options:{type,...options}})));}}/**
+         * If there are some removed value that haven't been dealt with,
+         * we need to create a new animation that falls back either to the value
+         * defined in the style prop, or the last read value.
+         */if(removedKeys.size){const fallbackAnimation={};removedKeys.forEach(key=>{const fallbackTarget=visualElement.getBaseTarget(key);if(fallbackTarget!==undefined){fallbackAnimation[key]=fallbackTarget;}});animations.push({animation:fallbackAnimation});}let shouldAnimate=Boolean(animations.length);if(isInitialRender&&props.initial===false&&!visualElement.manuallyAnimateOnMount){shouldAnimate=false;}isInitialRender=false;return shouldAnimate?animate(animations):Promise.resolve();}/**
+     * Change whether a certain animation type is active.
+     */function setActive(type,isActive,options){var _a;// If the active state hasn't changed, we can safely do nothing here
+if(state[type].isActive===isActive)return Promise.resolve();// Propagate active change to children
+(_a=visualElement.variantChildren)===null||_a===void 0?void 0:_a.forEach(child=>{var _a;return(_a=child.animationState)===null||_a===void 0?void 0:_a.setActive(type,isActive);});state[type].isActive=isActive;const animations=animateChanges(options,type);for(const key in state){state[key].protectedKeys={};}return animations;}return{animateChanges,setActive,setAnimateFunction,getState:()=>state};}function checkVariantsDidChange(prev,next){if(typeof next==="string"){return next!==prev;}else if(Array.isArray(next)){return!shallowCompare(next,prev);}return false;}function createTypeState(){let isActive=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;return{isActive,protectedKeys:{},needsAnimating:{},prevResolvedValues:{}};}function createState(){return{animate:createTypeState(true),whileInView:createTypeState(),whileHover:createTypeState(),whileTap:createTypeState(),whileDrag:createTypeState(),whileFocus:createTypeState(),exit:createTypeState()};}class AnimationFeature extends Feature{/**
+     * We dynamically generate the AnimationState manager as it contains a reference
+     * to the underlying animation library. We only want to load that if we load this,
+     * so people can optionally code split it out using the `m` component.
+     */constructor(node){super(node);node.animationState||(node.animationState=createAnimationState(node));}updateAnimationControlsSubscription(){const{animate}=this.node.getProps();this.unmount();if(isAnimationControls(animate)){this.unmount=animate.subscribe(this.node);}}/**
+     * Subscribe any provided AnimationControls to the component's VisualElement
+     */mount(){this.updateAnimationControlsSubscription();}update(){const{animate}=this.node.getProps();const{animate:prevAnimate}=this.node.prevProps||{};if(animate!==prevAnimate){this.updateAnimationControlsSubscription();}}unmount(){}}let id$1=0;class ExitAnimationFeature extends Feature{constructor(){super(...arguments);this.id=id$1++;}update(){if(!this.node.presenceContext)return;const{isPresent,onExitComplete,custom}=this.node.presenceContext;const{isPresent:prevIsPresent}=this.node.prevPresenceContext||{};if(!this.node.animationState||isPresent===prevIsPresent){return;}const exitAnimation=this.node.animationState.setActive("exit",!isPresent,{custom:custom!==null&&custom!==void 0?custom:this.node.getProps().custom});if(onExitComplete&&!isPresent){exitAnimation.then(()=>onExitComplete(this.id));}}mount(){const{register}=this.node.presenceContext||{};if(register){this.unmount=register(this.id);}}unmount(){}}const animations={animation:{Feature:AnimationFeature},exit:{Feature:ExitAnimationFeature}};const distance=(a,b)=>Math.abs(a-b);function distance2D(a,b){// Multi-dimensional
+const xDelta=distance(a.x,b.x);const yDelta=distance(a.y,b.y);return Math.sqrt(xDelta**2+yDelta**2);}/**
+ * @internal
+ */class PanSession{constructor(event,handlers){let{transformPagePoint}=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};/**
+         * @internal
+         */this.startEvent=null;/**
+         * @internal
+         */this.lastMoveEvent=null;/**
+         * @internal
+         */this.lastMoveEventInfo=null;/**
+         * @internal
+         */this.handlers={};this.updatePoint=()=>{if(!(this.lastMoveEvent&&this.lastMoveEventInfo))return;const info=getPanInfo(this.lastMoveEventInfo,this.history);const isPanStarted=this.startEvent!==null;// Only start panning if the offset is larger than 3 pixels. If we make it
+// any larger than this we'll want to reset the pointer history
+// on the first update to avoid visual snapping to the cursoe.
+const isDistancePastThreshold=distance2D(info.offset,{x:0,y:0})>=3;if(!isPanStarted&&!isDistancePastThreshold)return;const{point}=info;const{timestamp}=frameData;this.history.push({...point,timestamp});const{onStart,onMove}=this.handlers;if(!isPanStarted){onStart&&onStart(this.lastMoveEvent,info);this.startEvent=this.lastMoveEvent;}onMove&&onMove(this.lastMoveEvent,info);};this.handlePointerMove=(event,info)=>{this.lastMoveEvent=event;this.lastMoveEventInfo=transformPoint(info,this.transformPagePoint);// Throttle mouse move event to once per frame
+frame.update(this.updatePoint,true);};this.handlePointerUp=(event,info)=>{this.end();if(!(this.lastMoveEvent&&this.lastMoveEventInfo))return;const{onEnd,onSessionEnd}=this.handlers;const panInfo=getPanInfo(event.type==="pointercancel"?this.lastMoveEventInfo:transformPoint(info,this.transformPagePoint),this.history);if(this.startEvent&&onEnd){onEnd(event,panInfo);}onSessionEnd&&onSessionEnd(event,panInfo);};// If we have more than one touch, don't start detecting this gesture
+if(!isPrimaryPointer(event))return;this.handlers=handlers;this.transformPagePoint=transformPagePoint;const info=extractEventInfo(event);const initialInfo=transformPoint(info,this.transformPagePoint);const{point}=initialInfo;const{timestamp}=frameData;this.history=[{...point,timestamp}];const{onSessionStart}=handlers;onSessionStart&&onSessionStart(event,getPanInfo(initialInfo,this.history));this.removeListeners=pipe(addPointerEvent(window,"pointermove",this.handlePointerMove),addPointerEvent(window,"pointerup",this.handlePointerUp),addPointerEvent(window,"pointercancel",this.handlePointerUp));}updateHandlers(handlers){this.handlers=handlers;}end(){this.removeListeners&&this.removeListeners();cancelFrame(this.updatePoint);}}function transformPoint(info,transformPagePoint){return transformPagePoint?{point:transformPagePoint(info.point)}:info;}function subtractPoint(a,b){return{x:a.x-b.x,y:a.y-b.y};}function getPanInfo(_ref40,history){let{point}=_ref40;return{point,delta:subtractPoint(point,lastDevicePoint(history)),offset:subtractPoint(point,startDevicePoint(history)),velocity:getVelocity(history,0.1)};}function startDevicePoint(history){return history[0];}function lastDevicePoint(history){return history[history.length-1];}function getVelocity(history,timeDelta){if(history.length<2){return{x:0,y:0};}let i=history.length-1;let timestampedPoint=null;const lastPoint=lastDevicePoint(history);while(i>=0){timestampedPoint=history[i];if(lastPoint.timestamp-timestampedPoint.timestamp>secondsToMilliseconds(timeDelta)){break;}i--;}if(!timestampedPoint){return{x:0,y:0};}const time=millisecondsToSeconds(lastPoint.timestamp-timestampedPoint.timestamp);if(time===0){return{x:0,y:0};}const currentVelocity={x:(lastPoint.x-timestampedPoint.x)/time,y:(lastPoint.y-timestampedPoint.y)/time};if(currentVelocity.x===Infinity){currentVelocity.x=0;}if(currentVelocity.y===Infinity){currentVelocity.y=0;}return currentVelocity;}function calcLength(axis){return axis.max-axis.min;}function isNear(value){let target=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;let maxDistance=arguments.length>2&&arguments[2]!==undefined?arguments[2]:0.01;return Math.abs(value-target)<=maxDistance;}function calcAxisDelta(delta,source,target){let origin=arguments.length>3&&arguments[3]!==undefined?arguments[3]:0.5;delta.origin=origin;delta.originPoint=mix(source.min,source.max,delta.origin);delta.scale=calcLength(target)/calcLength(source);if(isNear(delta.scale,1,0.0001)||isNaN(delta.scale))delta.scale=1;delta.translate=mix(target.min,target.max,delta.origin)-delta.originPoint;if(isNear(delta.translate)||isNaN(delta.translate))delta.translate=0;}function calcBoxDelta(delta,source,target,origin){calcAxisDelta(delta.x,source.x,target.x,origin?origin.originX:undefined);calcAxisDelta(delta.y,source.y,target.y,origin?origin.originY:undefined);}function calcRelativeAxis(target,relative,parent){target.min=parent.min+relative.min;target.max=target.min+calcLength(relative);}function calcRelativeBox(target,relative,parent){calcRelativeAxis(target.x,relative.x,parent.x);calcRelativeAxis(target.y,relative.y,parent.y);}function calcRelativeAxisPosition(target,layout,parent){target.min=layout.min-parent.min;target.max=target.min+calcLength(layout);}function calcRelativePosition(target,layout,parent){calcRelativeAxisPosition(target.x,layout.x,parent.x);calcRelativeAxisPosition(target.y,layout.y,parent.y);}/**
+ * Apply constraints to a point. These constraints are both physical along an
+ * axis, and an elastic factor that determines how much to constrain the point
+ * by if it does lie outside the defined parameters.
+ */function applyConstraints(point,_ref41,elastic){let{min,max}=_ref41;if(min!==undefined&&point<min){// If we have a min point defined, and this is outside of that, constrain
+point=elastic?mix(min,point,elastic.min):Math.max(point,min);}else if(max!==undefined&&point>max){// If we have a max point defined, and this is outside of that, constrain
+point=elastic?mix(max,point,elastic.max):Math.min(point,max);}return point;}/**
+ * Calculate constraints in terms of the viewport when defined relatively to the
+ * measured axis. This is measured from the nearest edge, so a max constraint of 200
+ * on an axis with a max value of 300 would return a constraint of 500 - axis length
+ */function calcRelativeAxisConstraints(axis,min,max){return{min:min!==undefined?axis.min+min:undefined,max:max!==undefined?axis.max+max-(axis.max-axis.min):undefined};}/**
+ * Calculate constraints in terms of the viewport when
+ * defined relatively to the measured bounding box.
+ */function calcRelativeConstraints(layoutBox,_ref42){let{top,left,bottom,right}=_ref42;return{x:calcRelativeAxisConstraints(layoutBox.x,left,right),y:calcRelativeAxisConstraints(layoutBox.y,top,bottom)};}/**
+ * Calculate viewport constraints when defined as another viewport-relative axis
+ */function calcViewportAxisConstraints(layoutAxis,constraintsAxis){let min=constraintsAxis.min-layoutAxis.min;let max=constraintsAxis.max-layoutAxis.max;// If the constraints axis is actually smaller than the layout axis then we can
+// flip the constraints
+if(constraintsAxis.max-constraintsAxis.min<layoutAxis.max-layoutAxis.min){[min,max]=[max,min];}return{min,max};}/**
+ * Calculate viewport constraints when defined as another viewport-relative box
+ */function calcViewportConstraints(layoutBox,constraintsBox){return{x:calcViewportAxisConstraints(layoutBox.x,constraintsBox.x),y:calcViewportAxisConstraints(layoutBox.y,constraintsBox.y)};}/**
+ * Calculate a transform origin relative to the source axis, between 0-1, that results
+ * in an asthetically pleasing scale/transform needed to project from source to target.
+ */function calcOrigin(source,target){let origin=0.5;const sourceLength=calcLength(source);const targetLength=calcLength(target);if(targetLength>sourceLength){origin=progress(target.min,target.max-sourceLength,source.min);}else if(sourceLength>targetLength){origin=progress(source.min,source.max-targetLength,target.min);}return clamp(0,1,origin);}/**
+ * Rebase the calculated viewport constraints relative to the layout.min point.
+ */function rebaseAxisConstraints(layout,constraints){const relativeConstraints={};if(constraints.min!==undefined){relativeConstraints.min=constraints.min-layout.min;}if(constraints.max!==undefined){relativeConstraints.max=constraints.max-layout.min;}return relativeConstraints;}const defaultElastic=0.35;/**
+ * Accepts a dragElastic prop and returns resolved elastic values for each axis.
+ */function resolveDragElastic(){let dragElastic=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultElastic;if(dragElastic===false){dragElastic=0;}else if(dragElastic===true){dragElastic=defaultElastic;}return{x:resolveAxisElastic(dragElastic,"left","right"),y:resolveAxisElastic(dragElastic,"top","bottom")};}function resolveAxisElastic(dragElastic,minLabel,maxLabel){return{min:resolvePointElastic(dragElastic,minLabel),max:resolvePointElastic(dragElastic,maxLabel)};}function resolvePointElastic(dragElastic,label){return typeof dragElastic==="number"?dragElastic:dragElastic[label]||0;}const createAxisDelta=()=>({translate:0,scale:1,origin:0,originPoint:0});const createDelta=()=>({x:createAxisDelta(),y:createAxisDelta()});const createAxis=()=>({min:0,max:0});const createBox=()=>({x:createAxis(),y:createAxis()});function eachAxis(callback){return[callback("x"),callback("y")];}/**
+ * Bounding boxes tend to be defined as top, left, right, bottom. For various operations
+ * it's easier to consider each axis individually. This function returns a bounding box
+ * as a map of single-axis min/max values.
+ */function convertBoundingBoxToBox(_ref43){let{top,left,right,bottom}=_ref43;return{x:{min:left,max:right},y:{min:top,max:bottom}};}function convertBoxToBoundingBox(_ref44){let{x,y}=_ref44;return{top:y.min,right:x.max,bottom:y.max,left:x.min};}/**
+ * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function
+ * provided by Framer to allow measured points to be corrected for device scaling. This is used
+ * when measuring DOM elements and DOM event points.
+ */function transformBoxPoints(point,transformPoint){if(!transformPoint)return point;const topLeft=transformPoint({x:point.left,y:point.top});const bottomRight=transformPoint({x:point.right,y:point.bottom});return{top:topLeft.y,left:topLeft.x,bottom:bottomRight.y,right:bottomRight.x};}function isIdentityScale(scale){return scale===undefined||scale===1;}function hasScale(_ref45){let{scale,scaleX,scaleY}=_ref45;return!isIdentityScale(scale)||!isIdentityScale(scaleX)||!isIdentityScale(scaleY);}function hasTransform(values){return hasScale(values)||has2DTranslate(values)||values.z||values.rotate||values.rotateX||values.rotateY;}function has2DTranslate(values){return is2DTranslate(values.x)||is2DTranslate(values.y);}function is2DTranslate(value){return value&&value!=="0%";}/**
+ * Scales a point based on a factor and an originPoint
+ */function scalePoint(point,scale,originPoint){const distanceFromOrigin=point-originPoint;const scaled=scale*distanceFromOrigin;return originPoint+scaled;}/**
+ * Applies a translate/scale delta to a point
+ */function applyPointDelta(point,translate,scale,originPoint,boxScale){if(boxScale!==undefined){point=scalePoint(point,boxScale,originPoint);}return scalePoint(point,scale,originPoint)+translate;}/**
+ * Applies a translate/scale delta to an axis
+ */function applyAxisDelta(axis){let translate=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;let scale=arguments.length>2&&arguments[2]!==undefined?arguments[2]:1;let originPoint=arguments.length>3?arguments[3]:undefined;let boxScale=arguments.length>4?arguments[4]:undefined;axis.min=applyPointDelta(axis.min,translate,scale,originPoint,boxScale);axis.max=applyPointDelta(axis.max,translate,scale,originPoint,boxScale);}/**
+ * Applies a translate/scale delta to a box
+ */function applyBoxDelta(box,_ref46){let{x,y}=_ref46;applyAxisDelta(box.x,x.translate,x.scale,x.originPoint);applyAxisDelta(box.y,y.translate,y.scale,y.originPoint);}/**
+ * Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms
+ * in a tree upon our box before then calculating how to project it into our desired viewport-relative box
+ *
+ * This is the final nested loop within updateLayoutDelta for future refactoring
+ */function applyTreeDeltas(box,treeScale,treePath){let isSharedTransition=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;const treeLength=treePath.length;if(!treeLength)return;// Reset the treeScale
+treeScale.x=treeScale.y=1;let node;let delta;for(let i=0;i<treeLength;i++){node=treePath[i];delta=node.projectionDelta;/**
+         * TODO: Prefer to remove this, but currently we have motion components with
+         * display: contents in Framer.
+         */const instance=node.instance;if(instance&&instance.style&&instance.style.display==="contents"){continue;}if(isSharedTransition&&node.options.layoutScroll&&node.scroll&&node!==node.root){transformBox(box,{x:-node.scroll.offset.x,y:-node.scroll.offset.y});}if(delta){// Incoporate each ancestor's scale into a culmulative treeScale for this component
+treeScale.x*=delta.x.scale;treeScale.y*=delta.y.scale;// Apply each ancestor's calculated delta into this component's recorded layout box
+applyBoxDelta(box,delta);}if(isSharedTransition&&hasTransform(node.latestValues)){transformBox(box,node.latestValues);}}/**
+     * Snap tree scale back to 1 if it's within a non-perceivable threshold.
+     * This will help reduce useless scales getting rendered.
+     */treeScale.x=snapToDefault(treeScale.x);treeScale.y=snapToDefault(treeScale.y);}function snapToDefault(scale){if(Number.isInteger(scale))return scale;return scale>1.0000000000001||scale<0.999999999999?scale:1;}function translateAxis(axis,distance){axis.min=axis.min+distance;axis.max=axis.max+distance;}/**
+ * Apply a transform to an axis from the latest resolved motion values.
+ * This function basically acts as a bridge between a flat motion value map
+ * and applyAxisDelta
+ */function transformAxis(axis,transforms,_ref47){let[key,scaleKey,originKey]=_ref47;const axisOrigin=transforms[originKey]!==undefined?transforms[originKey]:0.5;const originPoint=mix(axis.min,axis.max,axisOrigin);// Apply the axis delta to the final axis
+applyAxisDelta(axis,transforms[key],transforms[scaleKey],originPoint,transforms.scale);}/**
+ * The names of the motion values we want to apply as translation, scale and origin.
+ */const xKeys$1=["x","scaleX","originX"];const yKeys$1=["y","scaleY","originY"];/**
+ * Apply a transform to a box from the latest resolved motion values.
+ */function transformBox(box,transform){transformAxis(box.x,transform,xKeys$1);transformAxis(box.y,transform,yKeys$1);}function measureViewportBox(instance,transformPoint){return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(),transformPoint));}function measurePageBox(element,rootProjectionNode,transformPagePoint){const viewportBox=measureViewportBox(element,transformPagePoint);const{scroll}=rootProjectionNode;if(scroll){translateAxis(viewportBox.x,scroll.offset.x);translateAxis(viewportBox.y,scroll.offset.y);}return viewportBox;}const elementDragControls=new WeakMap();/**
+ *
+ */ // let latestPointerEvent: PointerEvent
+class VisualElementDragControls{constructor(visualElement){// This is a reference to the global drag gesture lock, ensuring only one component
+// can "capture" the drag of one or both axes.
+// TODO: Look into moving this into pansession?
+this.openGlobalLock=null;this.isDragging=false;this.currentDirection=null;this.originPoint={x:0,y:0};/**
+         * The permitted boundaries of travel, in pixels.
+         */this.constraints=false;this.hasMutatedConstraints=false;/**
+         * The per-axis resolved elastic values.
+         */this.elastic=createBox();this.visualElement=visualElement;}start(originEvent){let{snapToCursor=false}=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};/**
+         * Don't start dragging if this component is exiting
+         */const{presenceContext}=this.visualElement;if(presenceContext&&presenceContext.isPresent===false)return;const onSessionStart=event=>{// Stop any animations on both axis values immediately. This allows the user to throw and catch
+// the component.
+this.stopAnimation();if(snapToCursor){this.snapToCursor(extractEventInfo(event,"page").point);}};const onStart=(event,info)=>{// Attempt to grab the global drag gesture lock - maybe make this part of PanSession
+const{drag,dragPropagation,onDragStart}=this.getProps();if(drag&&!dragPropagation){if(this.openGlobalLock)this.openGlobalLock();this.openGlobalLock=getGlobalLock(drag);// If we don 't have the lock, don't start dragging
+if(!this.openGlobalLock)return;}this.isDragging=true;this.currentDirection=null;this.resolveConstraints();if(this.visualElement.projection){this.visualElement.projection.isAnimationBlocked=true;this.visualElement.projection.target=undefined;}/**
+             * Record gesture origin
+             */eachAxis(axis=>{let current=this.getAxisMotionValue(axis).get()||0;/**
+                 * If the MotionValue is a percentage value convert to px
+                 */if(percent.test(current)){const{projection}=this.visualElement;if(projection&&projection.layout){const measuredAxis=projection.layout.layoutBox[axis];if(measuredAxis){const length=calcLength(measuredAxis);current=length*(parseFloat(current)/100);}}}this.originPoint[axis]=current;});// Fire onDragStart event
+if(onDragStart){frame.update(()=>onDragStart(event,info),false,true);}const{animationState}=this.visualElement;animationState&&animationState.setActive("whileDrag",true);};const onMove=(event,info)=>{// latestPointerEvent = event
+const{dragPropagation,dragDirectionLock,onDirectionLock,onDrag}=this.getProps();// If we didn't successfully receive the gesture lock, early return.
+if(!dragPropagation&&!this.openGlobalLock)return;const{offset}=info;// Attempt to detect drag direction if directionLock is true
+if(dragDirectionLock&&this.currentDirection===null){this.currentDirection=getCurrentDirection(offset);// If we've successfully set a direction, notify listener
+if(this.currentDirection!==null){onDirectionLock&&onDirectionLock(this.currentDirection);}return;}// Update each point with the latest position
+this.updateAxis("x",info.point,offset);this.updateAxis("y",info.point,offset);/**
+             * Ideally we would leave the renderer to fire naturally at the end of
+             * this frame but if the element is about to change layout as the result
+             * of a re-render we want to ensure the browser can read the latest
+             * bounding box to ensure the pointer and element don't fall out of sync.
+             */this.visualElement.render();/**
+             * This must fire after the render call as it might trigger a state
+             * change which itself might trigger a layout update.
+             */onDrag&&onDrag(event,info);};const onSessionEnd=(event,info)=>this.stop(event,info);this.panSession=new PanSession(originEvent,{onSessionStart,onStart,onMove,onSessionEnd},{transformPagePoint:this.visualElement.getTransformPagePoint()});}stop(event,info){const isDragging=this.isDragging;this.cancel();if(!isDragging)return;const{velocity}=info;this.startAnimation(velocity);const{onDragEnd}=this.getProps();if(onDragEnd){frame.update(()=>onDragEnd(event,info));}}cancel(){this.isDragging=false;const{projection,animationState}=this.visualElement;if(projection){projection.isAnimationBlocked=false;}this.panSession&&this.panSession.end();this.panSession=undefined;const{dragPropagation}=this.getProps();if(!dragPropagation&&this.openGlobalLock){this.openGlobalLock();this.openGlobalLock=null;}animationState&&animationState.setActive("whileDrag",false);}updateAxis(axis,_point,offset){const{drag}=this.getProps();// If we're not dragging this axis, do an early return.
+if(!offset||!shouldDrag(axis,drag,this.currentDirection))return;const axisValue=this.getAxisMotionValue(axis);let next=this.originPoint[axis]+offset[axis];// Apply constraints
+if(this.constraints&&this.constraints[axis]){next=applyConstraints(next,this.constraints[axis],this.elastic[axis]);}axisValue.set(next);}resolveConstraints(){const{dragConstraints,dragElastic}=this.getProps();const{layout}=this.visualElement.projection||{};const prevConstraints=this.constraints;if(dragConstraints&&isRefObject(dragConstraints)){if(!this.constraints){this.constraints=this.resolveRefConstraints();}}else{if(dragConstraints&&layout){this.constraints=calcRelativeConstraints(layout.layoutBox,dragConstraints);}else{this.constraints=false;}}this.elastic=resolveDragElastic(dragElastic);/**
+         * If we're outputting to external MotionValues, we want to rebase the measured constraints
+         * from viewport-relative to component-relative.
+         */if(prevConstraints!==this.constraints&&layout&&this.constraints&&!this.hasMutatedConstraints){eachAxis(axis=>{if(this.getAxisMotionValue(axis)){this.constraints[axis]=rebaseAxisConstraints(layout.layoutBox[axis],this.constraints[axis]);}});}}resolveRefConstraints(){const{dragConstraints:constraints,onMeasureDragConstraints}=this.getProps();if(!constraints||!isRefObject(constraints))return false;const constraintsElement=constraints.current;invariant(constraintsElement!==null,"If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");const{projection}=this.visualElement;// TODO
+if(!projection||!projection.layout)return false;const constraintsBox=measurePageBox(constraintsElement,projection.root,this.visualElement.getTransformPagePoint());let measuredConstraints=calcViewportConstraints(projection.layout.layoutBox,constraintsBox);/**
+         * If there's an onMeasureDragConstraints listener we call it and
+         * if different constraints are returned, set constraints to that
+         */if(onMeasureDragConstraints){const userConstraints=onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints));this.hasMutatedConstraints=!!userConstraints;if(userConstraints){measuredConstraints=convertBoundingBoxToBox(userConstraints);}}return measuredConstraints;}startAnimation(velocity){const{drag,dragMomentum,dragElastic,dragTransition,dragSnapToOrigin,onDragTransitionEnd}=this.getProps();const constraints=this.constraints||{};const momentumAnimations=eachAxis(axis=>{if(!shouldDrag(axis,drag,this.currentDirection)){return;}let transition=constraints&&constraints[axis]||{};if(dragSnapToOrigin)transition={min:0,max:0};/**
+             * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame
+             * of spring animations so we should look into adding a disable spring option to `inertia`.
+             * We could do something here where we affect the `bounceStiffness` and `bounceDamping`
+             * using the value of `dragElastic`.
+             */const bounceStiffness=dragElastic?200:1000000;const bounceDamping=dragElastic?40:10000000;const inertia={type:"inertia",velocity:dragMomentum?velocity[axis]:0,bounceStiffness,bounceDamping,timeConstant:750,restDelta:1,restSpeed:10,...dragTransition,...transition};// If we're not animating on an externally-provided `MotionValue` we can use the
+// component's animation controls which will handle interactions with whileHover (etc),
+// otherwise we just have to animate the `MotionValue` itself.
+return this.startAxisValueAnimation(axis,inertia);});// Run all animations and then resolve the new drag constraints.
+return Promise.all(momentumAnimations).then(onDragTransitionEnd);}startAxisValueAnimation(axis,transition){const axisValue=this.getAxisMotionValue(axis);return axisValue.start(animateMotionValue(axis,axisValue,0,transition));}stopAnimation(){eachAxis(axis=>this.getAxisMotionValue(axis).stop());}/**
+     * Drag works differently depending on which props are provided.
+     *
+     * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
+     * - Otherwise, we apply the delta to the x/y motion values.
+     */getAxisMotionValue(axis){const dragKey="_drag"+axis.toUpperCase();const props=this.visualElement.getProps();const externalMotionValue=props[dragKey];return externalMotionValue?externalMotionValue:this.visualElement.getValue(axis,(props.initial?props.initial[axis]:undefined)||0);}snapToCursor(point){eachAxis(axis=>{const{drag}=this.getProps();// If we're not dragging this axis, do an early return.
+if(!shouldDrag(axis,drag,this.currentDirection))return;const{projection}=this.visualElement;const axisValue=this.getAxisMotionValue(axis);if(projection&&projection.layout){const{min,max}=projection.layout.layoutBox[axis];axisValue.set(point[axis]-mix(min,max,0.5));}});}/**
+     * When the viewport resizes we want to check if the measured constraints
+     * have changed and, if so, reposition the element within those new constraints
+     * relative to where it was before the resize.
+     */scalePositionWithinConstraints(){if(!this.visualElement.current)return;const{drag,dragConstraints}=this.getProps();const{projection}=this.visualElement;if(!isRefObject(dragConstraints)||!projection||!this.constraints)return;/**
+         * Stop current animations as there can be visual glitching if we try to do
+         * this mid-animation
+         */this.stopAnimation();/**
+         * Record the relative position of the dragged element relative to the
+         * constraints box and save as a progress value.
+         */const boxProgress={x:0,y:0};eachAxis(axis=>{const axisValue=this.getAxisMotionValue(axis);if(axisValue){const latest=axisValue.get();boxProgress[axis]=calcOrigin({min:latest,max:latest},this.constraints[axis]);}});/**
+         * Update the layout of this element and resolve the latest drag constraints
+         */const{transformTemplate}=this.visualElement.getProps();this.visualElement.current.style.transform=transformTemplate?transformTemplate({},""):"none";projection.root&&projection.root.updateScroll();projection.updateLayout();this.resolveConstraints();/**
+         * For each axis, calculate the current progress of the layout axis
+         * within the new constraints.
+         */eachAxis(axis=>{if(!shouldDrag(axis,drag,null))return;/**
+             * Calculate a new transform based on the previous box progress
+             */const axisValue=this.getAxisMotionValue(axis);const{min,max}=this.constraints[axis];axisValue.set(mix(min,max,boxProgress[axis]));});}addListeners(){if(!this.visualElement.current)return;elementDragControls.set(this.visualElement,this);const element=this.visualElement.current;/**
+         * Attach a pointerdown event listener on this DOM element to initiate drag tracking.
+         */const stopPointerListener=addPointerEvent(element,"pointerdown",event=>{const{drag,dragListener=true}=this.getProps();drag&&dragListener&&this.start(event);});const measureDragConstraints=()=>{const{dragConstraints}=this.getProps();if(isRefObject(dragConstraints)){this.constraints=this.resolveRefConstraints();}};const{projection}=this.visualElement;const stopMeasureLayoutListener=projection.addEventListener("measure",measureDragConstraints);if(projection&&!projection.layout){projection.root&&projection.root.updateScroll();projection.updateLayout();}measureDragConstraints();/**
+         * Attach a window resize listener to scale the draggable target within its defined
+         * constraints as the window resizes.
+         */const stopResizeListener=addDomEvent(window,"resize",()=>this.scalePositionWithinConstraints());/**
+         * If the element's layout changes, calculate the delta and apply that to
+         * the drag gesture's origin point.
+         */const stopLayoutUpdateListener=projection.addEventListener("didUpdate",_ref48=>{let{delta,hasLayoutChanged}=_ref48;if(this.isDragging&&hasLayoutChanged){eachAxis(axis=>{const motionValue=this.getAxisMotionValue(axis);if(!motionValue)return;this.originPoint[axis]+=delta[axis].translate;motionValue.set(motionValue.get()+delta[axis].translate);});this.visualElement.render();}});return()=>{stopResizeListener();stopPointerListener();stopMeasureLayoutListener();stopLayoutUpdateListener&&stopLayoutUpdateListener();};}getProps(){const props=this.visualElement.getProps();const{drag=false,dragDirectionLock=false,dragPropagation=false,dragConstraints=false,dragElastic=defaultElastic,dragMomentum=true}=props;return{...props,drag,dragDirectionLock,dragPropagation,dragConstraints,dragElastic,dragMomentum};}}function shouldDrag(direction,drag,currentDirection){return(drag===true||drag===direction)&&(currentDirection===null||currentDirection===direction);}/**
+ * Based on an x/y offset determine the current drag direction. If both axis' offsets are lower
+ * than the provided threshold, return `null`.
+ *
+ * @param offset - The x/y offset from origin.
+ * @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction.
+ */function getCurrentDirection(offset){let lockThreshold=arguments.length>1&&arguments[1]!==undefined?arguments[1]:10;let direction=null;if(Math.abs(offset.y)>lockThreshold){direction="y";}else if(Math.abs(offset.x)>lockThreshold){direction="x";}return direction;}class DragGesture extends Feature{constructor(node){super(node);this.removeGroupControls=noop;this.removeListeners=noop;this.controls=new VisualElementDragControls(node);}mount(){// If we've been provided a DragControls for manual control over the drag gesture,
+// subscribe this component to it on mount.
+const{dragControls}=this.node.getProps();if(dragControls){this.removeGroupControls=dragControls.subscribe(this.controls);}this.removeListeners=this.controls.addListeners()||noop;}unmount(){this.removeGroupControls();this.removeListeners();}}const asyncHandler=handler=>(event,info)=>{if(handler){frame.update(()=>handler(event,info));}};class PanGesture extends Feature{constructor(){super(...arguments);this.removePointerDownListener=noop;}onPointerDown(pointerDownEvent){this.session=new PanSession(pointerDownEvent,this.createPanHandlers(),{transformPagePoint:this.node.getTransformPagePoint()});}createPanHandlers(){const{onPanSessionStart,onPanStart,onPan,onPanEnd}=this.node.getProps();return{onSessionStart:asyncHandler(onPanSessionStart),onStart:asyncHandler(onPanStart),onMove:onPan,onEnd:(event,info)=>{delete this.session;if(onPanEnd){frame.update(()=>onPanEnd(event,info));}}};}mount(){this.removePointerDownListener=addPointerEvent(this.node.current,"pointerdown",event=>this.onPointerDown(event));}update(){this.session&&this.session.updateHandlers(this.createPanHandlers());}unmount(){this.removePointerDownListener();this.session&&this.session.end();}}/**
+ * When a component is the child of `AnimatePresence`, it can use `usePresence`
+ * to access information about whether it's still present in the React tree.
+ *
+ * ```jsx
+ * import { usePresence } from "framer-motion"
+ *
+ * export const Component = () => {
+ *   const [isPresent, safeToRemove] = usePresence()
+ *
+ *   useEffect(() => {
+ *     !isPresent && setTimeout(safeToRemove, 1000)
+ *   }, [isPresent])
+ *
+ *   return <div />
+ * }
+ * ```
+ *
+ * If `isPresent` is `false`, it means that a component has been removed the tree, but
+ * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
+ *
+ * @public
+ */function usePresence(){const context=useContext(PresenceContext);if(context===null)return[true,null];const{isPresent,onExitComplete,register}=context;// It's safe to call the following hooks conditionally (after an early return) because the context will always
+// either be null or non-null for the lifespan of the component.
+const id=useId();useEffect(()=>register(id),[]);const safeToRemove=()=>onExitComplete&&onExitComplete(id);return!isPresent&&onExitComplete?[false,safeToRemove]:[true];}/**
+ * This should only ever be modified on the client otherwise it'll
+ * persist through server requests. If we need instanced states we
+ * could lazy-init via root.
+ */const globalProjectionState={/**
+     * Global flag as to whether the tree has animated since the last time
+     * we resized the window
+     */hasAnimatedSinceResize:true,/**
+     * We set this to true once, on the first update. Any nodes added to the tree beyond that
+     * update will be given a `data-projection-id` attribute.
+     */hasEverUpdated:false};function pixelsToPercent(pixels,axis){if(axis.max===axis.min)return 0;return pixels/(axis.max-axis.min)*100;}/**
+ * We always correct borderRadius as a percentage rather than pixels to reduce paints.
+ * For example, if you are projecting a box that is 100px wide with a 10px borderRadius
+ * into a box that is 200px wide with a 20px borderRadius, that is actually a 10%
+ * borderRadius in both states. If we animate between the two in pixels that will trigger
+ * a paint each time. If we animate between the two in percentage we'll avoid a paint.
+ */const correctBorderRadius={correct:(latest,node)=>{if(!node.target)return latest;/**
+         * If latest is a string, if it's a percentage we can return immediately as it's
+         * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.
+         */if(typeof latest==="string"){if(px.test(latest)){latest=parseFloat(latest);}else{return latest;}}/**
+         * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that
+         * pixel value as a percentage of each axis
+         */const x=pixelsToPercent(latest,node.target.x);const y=pixelsToPercent(latest,node.target.y);return"".concat(x,"% ").concat(y,"%");}};const correctBoxShadow={correct:(latest,_ref49)=>{let{treeScale,projectionDelta}=_ref49;const original=latest;const shadow=complex.parse(latest);// TODO: Doesn't support multiple shadows
+if(shadow.length>5)return original;const template=complex.createTransformer(latest);const offset=typeof shadow[0]!=="number"?1:0;// Calculate the overall context scale
+const xScale=projectionDelta.x.scale*treeScale.x;const yScale=projectionDelta.y.scale*treeScale.y;shadow[0+offset]/=xScale;shadow[1+offset]/=yScale;/**
+         * Ideally we'd correct x and y scales individually, but because blur and
+         * spread apply to both we have to take a scale average and apply that instead.
+         * We could potentially improve the outcome of this by incorporating the ratio between
+         * the two scales.
+         */const averageScale=mix(xScale,yScale,0.5);// Blur
+if(typeof shadow[2+offset]==="number")shadow[2+offset]/=averageScale;// Spread
+if(typeof shadow[3+offset]==="number")shadow[3+offset]/=averageScale;return template(shadow);}};class MeasureLayoutWithContext extends React__default.Component{/**
+     * This only mounts projection nodes for components that
+     * need measuring, we might want to do it for all components
+     * in order to incorporate transforms
+     */componentDidMount(){const{visualElement,layoutGroup,switchLayoutGroup,layoutId}=this.props;const{projection}=visualElement;addScaleCorrector(defaultScaleCorrectors);if(projection){if(layoutGroup.group)layoutGroup.group.add(projection);if(switchLayoutGroup&&switchLayoutGroup.register&&layoutId){switchLayoutGroup.register(projection);}projection.root.didUpdate();projection.addEventListener("animationComplete",()=>{this.safeToRemove();});projection.setOptions({...projection.options,onExitComplete:()=>this.safeToRemove()});}globalProjectionState.hasEverUpdated=true;}getSnapshotBeforeUpdate(prevProps){const{layoutDependency,visualElement,drag,isPresent}=this.props;const projection=visualElement.projection;if(!projection)return null;/**
+         * TODO: We use this data in relegate to determine whether to
+         * promote a previous element. There's no guarantee its presence data
+         * will have updated by this point - if a bug like this arises it will
+         * have to be that we markForRelegation and then find a new lead some other way,
+         * perhaps in didUpdate
+         */projection.isPresent=isPresent;if(drag||prevProps.layoutDependency!==layoutDependency||layoutDependency===undefined){projection.willUpdate();}else{this.safeToRemove();}if(prevProps.isPresent!==isPresent){if(isPresent){projection.promote();}else if(!projection.relegate()){/**
+                 * If there's another stack member taking over from this one,
+                 * it's in charge of the exit animation and therefore should
+                 * be in charge of the safe to remove. Otherwise we call it here.
+                 */frame.postRender(()=>{const stack=projection.getStack();if(!stack||!stack.members.length){this.safeToRemove();}});}}return null;}componentDidUpdate(){const{projection}=this.props.visualElement;if(projection){projection.root.didUpdate();queueMicrotask(()=>{if(!projection.currentAnimation&&projection.isLead()){this.safeToRemove();}});}}componentWillUnmount(){const{visualElement,layoutGroup,switchLayoutGroup:promoteContext}=this.props;const{projection}=visualElement;if(projection){projection.scheduleCheckAfterUnmount();if(layoutGroup&&layoutGroup.group)layoutGroup.group.remove(projection);if(promoteContext&&promoteContext.deregister)promoteContext.deregister(projection);}}safeToRemove(){const{safeToRemove}=this.props;safeToRemove&&safeToRemove();}render(){return null;}}function MeasureLayout(props){const[isPresent,safeToRemove]=usePresence();const layoutGroup=useContext(LayoutGroupContext);return React__default.createElement(MeasureLayoutWithContext,{...props,layoutGroup:layoutGroup,switchLayoutGroup:useContext(SwitchLayoutGroupContext),isPresent:isPresent,safeToRemove:safeToRemove});}const defaultScaleCorrectors={borderRadius:{...correctBorderRadius,applyTo:["borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"]},borderTopLeftRadius:correctBorderRadius,borderTopRightRadius:correctBorderRadius,borderBottomLeftRadius:correctBorderRadius,borderBottomRightRadius:correctBorderRadius,boxShadow:correctBoxShadow};const borders=["TopLeft","TopRight","BottomLeft","BottomRight"];const numBorders=borders.length;const asNumber=value=>typeof value==="string"?parseFloat(value):value;const isPx=value=>typeof value==="number"||px.test(value);function mixValues(target,follow,lead,progress,shouldCrossfadeOpacity,isOnlyMember){if(shouldCrossfadeOpacity){target.opacity=mix(0,// TODO Reinstate this if only child
+lead.opacity!==undefined?lead.opacity:1,easeCrossfadeIn(progress));target.opacityExit=mix(follow.opacity!==undefined?follow.opacity:1,0,easeCrossfadeOut(progress));}else if(isOnlyMember){target.opacity=mix(follow.opacity!==undefined?follow.opacity:1,lead.opacity!==undefined?lead.opacity:1,progress);}/**
+     * Mix border radius
+     */for(let i=0;i<numBorders;i++){const borderLabel="border".concat(borders[i],"Radius");let followRadius=getRadius(follow,borderLabel);let leadRadius=getRadius(lead,borderLabel);if(followRadius===undefined&&leadRadius===undefined)continue;followRadius||(followRadius=0);leadRadius||(leadRadius=0);const canMix=followRadius===0||leadRadius===0||isPx(followRadius)===isPx(leadRadius);if(canMix){target[borderLabel]=Math.max(mix(asNumber(followRadius),asNumber(leadRadius),progress),0);if(percent.test(leadRadius)||percent.test(followRadius)){target[borderLabel]+="%";}}else{target[borderLabel]=leadRadius;}}/**
+     * Mix rotation
+     */if(follow.rotate||lead.rotate){target.rotate=mix(follow.rotate||0,lead.rotate||0,progress);}}function getRadius(values,radiusName){return values[radiusName]!==undefined?values[radiusName]:values.borderRadius;}// /**
+//  * We only want to mix the background color if there's a follow element
+//  * that we're not crossfading opacity between. For instance with switch
+//  * AnimateSharedLayout animations, this helps the illusion of a continuous
+//  * element being animated but also cuts down on the number of paints triggered
+//  * for elements where opacity is doing that work for us.
+//  */
+// if (
+//     !hasFollowElement &&
+//     latestLeadValues.backgroundColor &&
+//     latestFollowValues.backgroundColor
+// ) {
+//     /**
+//      * This isn't ideal performance-wise as mixColor is creating a new function every frame.
+//      * We could probably create a mixer that runs at the start of the animation but
+//      * the idea behind the crossfader is that it runs dynamically between two potentially
+//      * changing targets (ie opacity or borderRadius may be animating independently via variants)
+//      */
+//     leadState.backgroundColor = followState.backgroundColor = mixColor(
+//         latestFollowValues.backgroundColor as string,
+//         latestLeadValues.backgroundColor as string
+//     )(p)
+// }
+const easeCrossfadeIn=compress(0,0.5,circOut);const easeCrossfadeOut=compress(0.5,0.95,noop);function compress(min,max,easing){return p=>{// Could replace ifs with clamp
+if(p<min)return 0;if(p>max)return 1;return easing(progress(min,max,p));};}/**
+ * Reset an axis to the provided origin box.
+ *
+ * This is a mutative operation.
+ */function copyAxisInto(axis,originAxis){axis.min=originAxis.min;axis.max=originAxis.max;}/**
+ * Reset a box to the provided origin box.
+ *
+ * This is a mutative operation.
+ */function copyBoxInto(box,originBox){copyAxisInto(box.x,originBox.x);copyAxisInto(box.y,originBox.y);}/**
+ * Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse
+ */function removePointDelta(point,translate,scale,originPoint,boxScale){point-=translate;point=scalePoint(point,1/scale,originPoint);if(boxScale!==undefined){point=scalePoint(point,1/boxScale,originPoint);}return point;}/**
+ * Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse
+ */function removeAxisDelta(axis){let translate=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;let scale=arguments.length>2&&arguments[2]!==undefined?arguments[2]:1;let origin=arguments.length>3&&arguments[3]!==undefined?arguments[3]:0.5;let boxScale=arguments.length>4?arguments[4]:undefined;let originAxis=arguments.length>5&&arguments[5]!==undefined?arguments[5]:axis;let sourceAxis=arguments.length>6&&arguments[6]!==undefined?arguments[6]:axis;if(percent.test(translate)){translate=parseFloat(translate);const relativeProgress=mix(sourceAxis.min,sourceAxis.max,translate/100);translate=relativeProgress-sourceAxis.min;}if(typeof translate!=="number")return;let originPoint=mix(originAxis.min,originAxis.max,origin);if(axis===originAxis)originPoint-=translate;axis.min=removePointDelta(axis.min,translate,scale,originPoint,boxScale);axis.max=removePointDelta(axis.max,translate,scale,originPoint,boxScale);}/**
+ * Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse
+ * and acts as a bridge between motion values and removeAxisDelta
+ */function removeAxisTransforms(axis,transforms,_ref50,origin,sourceAxis){let[key,scaleKey,originKey]=_ref50;removeAxisDelta(axis,transforms[key],transforms[scaleKey],transforms[originKey],transforms.scale,origin,sourceAxis);}/**
+ * The names of the motion values we want to apply as translation, scale and origin.
+ */const xKeys=["x","scaleX","originX"];const yKeys=["y","scaleY","originY"];/**
+ * Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse
+ * and acts as a bridge between motion values and removeAxisDelta
+ */function removeBoxTransforms(box,transforms,originBox,sourceBox){removeAxisTransforms(box.x,transforms,xKeys,originBox?originBox.x:undefined,sourceBox?sourceBox.x:undefined);removeAxisTransforms(box.y,transforms,yKeys,originBox?originBox.y:undefined,sourceBox?sourceBox.y:undefined);}function isAxisDeltaZero(delta){return delta.translate===0&&delta.scale===1;}function isDeltaZero(delta){return isAxisDeltaZero(delta.x)&&isAxisDeltaZero(delta.y);}function boxEquals(a,b){return a.x.min===b.x.min&&a.x.max===b.x.max&&a.y.min===b.y.min&&a.y.max===b.y.max;}function aspectRatio(box){return calcLength(box.x)/calcLength(box.y);}class NodeStack{constructor(){this.members=[];}add(node){addUniqueItem(this.members,node);node.scheduleRender();}remove(node){removeItem(this.members,node);if(node===this.prevLead){this.prevLead=undefined;}if(node===this.lead){const prevLead=this.members[this.members.length-1];if(prevLead){this.promote(prevLead);}}}relegate(node){const indexOfNode=this.members.findIndex(member=>node===member);if(indexOfNode===0)return false;/**
+         * Find the next projection node that is present
+         */let prevLead;for(let i=indexOfNode;i>=0;i--){const member=this.members[i];if(member.isPresent!==false){prevLead=member;break;}}if(prevLead){this.promote(prevLead);return true;}else{return false;}}promote(node,preserveFollowOpacity){const prevLead=this.lead;if(node===prevLead)return;this.prevLead=prevLead;this.lead=node;node.show();if(prevLead){prevLead.instance&&prevLead.scheduleRender();node.scheduleRender();node.resumeFrom=prevLead;if(preserveFollowOpacity){node.resumeFrom.preserveOpacity=true;}if(prevLead.snapshot){node.snapshot=prevLead.snapshot;node.snapshot.latestValues=prevLead.animationValues||prevLead.latestValues;}if(node.root&&node.root.isUpdating){node.isLayoutDirty=true;}const{crossfade}=node.options;if(crossfade===false){prevLead.hide();}/**
+             * TODO:
+             *   - Test border radius when previous node was deleted
+             *   - boxShadow mixing
+             *   - Shared between element A in scrolled container and element B (scroll stays the same or changes)
+             *   - Shared between element A in transformed container and element B (transform stays the same or changes)
+             *   - Shared between element A in scrolled page and element B (scroll stays the same or changes)
+             * ---
+             *   - Crossfade opacity of root nodes
+             *   - layoutId changes after animation
+             *   - layoutId changes mid animation
+             */}}exitAnimationComplete(){this.members.forEach(node=>{const{options,resumingFrom}=node;options.onExitComplete&&options.onExitComplete();if(resumingFrom){resumingFrom.options.onExitComplete&&resumingFrom.options.onExitComplete();}});}scheduleRender(){this.members.forEach(node=>{node.instance&&node.scheduleRender(false);});}/**
+     * Clear any leads that have been removed this render to prevent them from being
+     * used in future animations and to prevent memory leaks
+     */removeLeadSnapshot(){if(this.lead&&this.lead.snapshot){this.lead.snapshot=undefined;}}}function buildProjectionTransform(delta,treeScale,latestTransform){let transform="";/**
+     * The translations we use to calculate are always relative to the viewport coordinate space.
+     * But when we apply scales, we also scale the coordinate space of an element and its children.
+     * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need
+     * to move an element 100 pixels, we actually need to move it 200 in within that scaled space.
+     */const xTranslate=delta.x.translate/treeScale.x;const yTranslate=delta.y.translate/treeScale.y;if(xTranslate||yTranslate){transform="translate3d(".concat(xTranslate,"px, ").concat(yTranslate,"px, 0) ");}/**
+     * Apply scale correction for the tree transform.
+     * This will apply scale to the screen-orientated axes.
+     */if(treeScale.x!==1||treeScale.y!==1){transform+="scale(".concat(1/treeScale.x,", ").concat(1/treeScale.y,") ");}if(latestTransform){const{rotate,rotateX,rotateY}=latestTransform;if(rotate)transform+="rotate(".concat(rotate,"deg) ");if(rotateX)transform+="rotateX(".concat(rotateX,"deg) ");if(rotateY)transform+="rotateY(".concat(rotateY,"deg) ");}/**
+     * Apply scale to match the size of the element to the size we want it.
+     * This will apply scale to the element-orientated axes.
+     */const elementScaleX=delta.x.scale*treeScale.x;const elementScaleY=delta.y.scale*treeScale.y;if(elementScaleX!==1||elementScaleY!==1){transform+="scale(".concat(elementScaleX,", ").concat(elementScaleY,")");}return transform||"none";}const compareByDepth=(a,b)=>a.depth-b.depth;class FlatTree{constructor(){this.children=[];this.isDirty=false;}add(child){addUniqueItem(this.children,child);this.isDirty=true;}remove(child){removeItem(this.children,child);this.isDirty=true;}forEach(callback){this.isDirty&&this.children.sort(compareByDepth);this.isDirty=false;this.children.forEach(callback);}}/**
+ * Timeout defined in ms
+ */function delay(callback,timeout){const start=performance.now();const checkElapsed=_ref51=>{let{timestamp}=_ref51;const elapsed=timestamp-start;if(elapsed>=timeout){cancelFrame(checkElapsed);callback(elapsed-timeout);}};frame.read(checkElapsed,true);return()=>cancelFrame(checkElapsed);}function record(data){if(window.MotionDebug){window.MotionDebug.record(data);}}function isSVGElement(element){return element instanceof SVGElement&&element.tagName!=="svg";}function animateSingleValue(value,keyframes,options){const motionValue$1=isMotionValue(value)?value:motionValue(value);motionValue$1.start(animateMotionValue("",motionValue$1,keyframes,options));return motionValue$1.animation;}const transformAxes=["","X","Y","Z"];/**
+ * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
+ * which has a noticeable difference in spring animations
+ */const animationTarget=1000;let id=0;/**
+ * Use a mutable data object for debug data so as to not create a new
+ * object every frame.
+ */const projectionFrameData={type:"projectionFrame",totalNodes:0,resolvedTargetDeltas:0,recalculatedProjection:0};function createProjectionNode(_ref52){let{attachResizeListener,defaultParent,measureScroll,checkIsScrollRoot,resetTransform}=_ref52;return class ProjectionNode{constructor(){let latestValues=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};let parent=arguments.length>1&&arguments[1]!==undefined?arguments[1]:defaultParent===null||defaultParent===void 0?void 0:defaultParent();/**
+             * A unique ID generated for every projection node.
+             */this.id=id++;/**
+             * An id that represents a unique session instigated by startUpdate.
+             */this.animationId=0;/**
+             * A Set containing all this component's children. This is used to iterate
+             * through the children.
+             *
+             * TODO: This could be faster to iterate as a flat array stored on the root node.
+             */this.children=new Set();/**
+             * Options for the node. We use this to configure what kind of layout animations
+             * we should perform (if any).
+             */this.options={};/**
+             * We use this to detect when its safe to shut down part of a projection tree.
+             * We have to keep projecting children for scale correction and relative projection
+             * until all their parents stop performing layout animations.
+             */this.isTreeAnimating=false;this.isAnimationBlocked=false;/**
+             * Flag to true if we think this layout has been changed. We can't always know this,
+             * currently we set it to true every time a component renders, or if it has a layoutDependency
+             * if that has changed between renders. Additionally, components can be grouped by LayoutGroup
+             * and if one node is dirtied, they all are.
+             */this.isLayoutDirty=false;/**
+             * Flag to true if we think the projection calculations for this node needs
+             * recalculating as a result of an updated transform or layout animation.
+             */this.isProjectionDirty=false;/**
+             * Flag to true if the layout *or* transform has changed. This then gets propagated
+             * throughout the projection tree, forcing any element below to recalculate on the next frame.
+             */this.isSharedProjectionDirty=false;/**
+             * Flag transform dirty. This gets propagated throughout the whole tree but is only
+             * respected by shared nodes.
+             */this.isTransformDirty=false;/**
+             * Block layout updates for instant layout transitions throughout the tree.
+             */this.updateManuallyBlocked=false;this.updateBlockedByResize=false;/**
+             * Set to true between the start of the first `willUpdate` call and the end of the `didUpdate`
+             * call.
+             */this.isUpdating=false;/**
+             * If this is an SVG element we currently disable projection transforms
+             */this.isSVG=false;/**
+             * Flag to true (during promotion) if a node doing an instant layout transition needs to reset
+             * its projection styles.
+             */this.needsReset=false;/**
+             * Flags whether this node should have its transform reset prior to measuring.
+             */this.shouldResetTransform=false;/**
+             * An object representing the calculated contextual/accumulated/tree scale.
+             * This will be used to scale calculcated projection transforms, as these are
+             * calculated in screen-space but need to be scaled for elements to layoutly
+             * make it to their calculated destinations.
+             *
+             * TODO: Lazy-init
+             */this.treeScale={x:1,y:1};/**
+             *
+             */this.eventHandlers=new Map();this.hasTreeAnimated=false;// Note: Currently only running on root node
+this.updateScheduled=false;this.checkUpdateFailed=()=>{if(this.isUpdating){this.isUpdating=false;this.clearAllSnapshots();}};/**
+             * This is a multi-step process as shared nodes might be of different depths. Nodes
+             * are sorted by depth order, so we need to resolve the entire tree before moving to
+             * the next step.
+             */this.updateProjection=()=>{/**
+                 * Reset debug counts. Manually resetting rather than creating a new
+                 * object each frame.
+                 */projectionFrameData.totalNodes=projectionFrameData.resolvedTargetDeltas=projectionFrameData.recalculatedProjection=0;this.nodes.forEach(propagateDirtyNodes);this.nodes.forEach(resolveTargetDelta);this.nodes.forEach(calcProjection);this.nodes.forEach(cleanDirtyNodes);record(projectionFrameData);};this.hasProjected=false;this.isVisible=true;this.animationProgress=0;/**
+             * Shared layout
+             */ // TODO Only running on root node
+this.sharedNodes=new Map();this.latestValues=latestValues;this.root=parent?parent.root||parent:this;this.path=parent?[...parent.path,parent]:[];this.parent=parent;this.depth=parent?parent.depth+1:0;for(let i=0;i<this.path.length;i++){this.path[i].shouldResetTransform=true;}if(this.root===this)this.nodes=new FlatTree();}addEventListener(name,handler){if(!this.eventHandlers.has(name)){this.eventHandlers.set(name,new SubscriptionManager());}return this.eventHandlers.get(name).add(handler);}notifyListeners(name){const subscriptionManager=this.eventHandlers.get(name);for(var _len2=arguments.length,args=new Array(_len2>1?_len2-1:0),_key2=1;_key2<_len2;_key2++){args[_key2-1]=arguments[_key2];}subscriptionManager&&subscriptionManager.notify(...args);}hasListeners(name){return this.eventHandlers.has(name);}/**
+         * Lifecycles
+         */mount(instance){let isLayoutDirty=arguments.length>1&&arguments[1]!==undefined?arguments[1]:this.root.hasTreeAnimated;if(this.instance)return;this.isSVG=isSVGElement(instance);this.instance=instance;const{layoutId,layout,visualElement}=this.options;if(visualElement&&!visualElement.current){visualElement.mount(instance);}this.root.nodes.add(this);this.parent&&this.parent.children.add(this);if(isLayoutDirty&&(layout||layoutId)){this.isLayoutDirty=true;}if(attachResizeListener){let cancelDelay;const resizeUnblockUpdate=()=>this.root.updateBlockedByResize=false;attachResizeListener(instance,()=>{this.root.updateBlockedByResize=true;cancelDelay&&cancelDelay();cancelDelay=delay(resizeUnblockUpdate,250);if(globalProjectionState.hasAnimatedSinceResize){globalProjectionState.hasAnimatedSinceResize=false;this.nodes.forEach(finishAnimation);}});}if(layoutId){this.root.registerSharedNode(layoutId,this);}// Only register the handler if it requires layout animation
+if(this.options.animate!==false&&visualElement&&(layoutId||layout)){this.addEventListener("didUpdate",_ref53=>{let{delta,hasLayoutChanged,hasRelativeTargetChanged,layout:newLayout}=_ref53;if(this.isTreeAnimationBlocked()){this.target=undefined;this.relativeTarget=undefined;return;}// TODO: Check here if an animation exists
+const layoutTransition=this.options.transition||visualElement.getDefaultTransition()||defaultLayoutTransition;const{onLayoutAnimationStart,onLayoutAnimationComplete}=visualElement.getProps();/**
+                     * The target layout of the element might stay the same,
+                     * but its position relative to its parent has changed.
+                     */const targetChanged=!this.targetLayout||!boxEquals(this.targetLayout,newLayout)||hasRelativeTargetChanged;/**
+                     * If the layout hasn't seemed to have changed, it might be that the
+                     * element is visually in the same place in the document but its position
+                     * relative to its parent has indeed changed. So here we check for that.
+                     */const hasOnlyRelativeTargetChanged=!hasLayoutChanged&&hasRelativeTargetChanged;if(this.options.layoutRoot||this.resumeFrom&&this.resumeFrom.instance||hasOnlyRelativeTargetChanged||hasLayoutChanged&&(targetChanged||!this.currentAnimation)){if(this.resumeFrom){this.resumingFrom=this.resumeFrom;this.resumingFrom.resumingFrom=undefined;}this.setAnimationOrigin(delta,hasOnlyRelativeTargetChanged);const animationOptions={...getValueTransition(layoutTransition,"layout"),onPlay:onLayoutAnimationStart,onComplete:onLayoutAnimationComplete};if(visualElement.shouldReduceMotion||this.options.layoutRoot){animationOptions.delay=0;animationOptions.type=false;}this.startAnimation(animationOptions);}else{/**
+                         * If the layout hasn't changed and we have an animation that hasn't started yet,
+                         * finish it immediately. Otherwise it will be animating from a location
+                         * that was probably never commited to screen and look like a jumpy box.
+                         */if(!hasLayoutChanged){finishAnimation(this);}if(this.isLead()&&this.options.onExitComplete){this.options.onExitComplete();}}this.targetLayout=newLayout;});}}unmount(){this.options.layoutId&&this.willUpdate();this.root.nodes.remove(this);const stack=this.getStack();stack&&stack.remove(this);this.parent&&this.parent.children.delete(this);this.instance=undefined;cancelFrame(this.updateProjection);}// only on the root
+blockUpdate(){this.updateManuallyBlocked=true;}unblockUpdate(){this.updateManuallyBlocked=false;}isUpdateBlocked(){return this.updateManuallyBlocked||this.updateBlockedByResize;}isTreeAnimationBlocked(){return this.isAnimationBlocked||this.parent&&this.parent.isTreeAnimationBlocked()||false;}// Note: currently only running on root node
+startUpdate(){if(this.isUpdateBlocked())return;this.isUpdating=true;this.nodes&&this.nodes.forEach(resetRotation);this.animationId++;}getTransformTemplate(){const{visualElement}=this.options;return visualElement&&visualElement.getProps().transformTemplate;}willUpdate(){let shouldNotifyListeners=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;this.root.hasTreeAnimated=true;if(this.root.isUpdateBlocked()){this.options.onExitComplete&&this.options.onExitComplete();return;}!this.root.isUpdating&&this.root.startUpdate();if(this.isLayoutDirty)return;this.isLayoutDirty=true;for(let i=0;i<this.path.length;i++){const node=this.path[i];node.shouldResetTransform=true;node.updateScroll("snapshot");if(node.options.layoutRoot){node.willUpdate(false);}}const{layoutId,layout}=this.options;if(layoutId===undefined&&!layout)return;const transformTemplate=this.getTransformTemplate();this.prevTransformTemplateValue=transformTemplate?transformTemplate(this.latestValues,""):undefined;this.updateSnapshot();shouldNotifyListeners&&this.notifyListeners("willUpdate");}update(){this.updateScheduled=false;const updateWasBlocked=this.isUpdateBlocked();// When doing an instant transition, we skip the layout update,
+// but should still clean up the measurements so that the next
+// snapshot could be taken correctly.
+if(updateWasBlocked){this.unblockUpdate();this.clearAllSnapshots();this.nodes.forEach(clearMeasurements);return;}if(!this.isUpdating){this.nodes.forEach(clearIsLayoutDirty);}this.isUpdating=false;/**
+             * Write
+             */this.nodes.forEach(resetTransformStyle);/**
+             * Read ==================
+             */ // Update layout measurements of updated children
+this.nodes.forEach(updateLayout);/**
+             * Write
+             */ // Notify listeners that the layout is updated
+this.nodes.forEach(notifyLayoutUpdate);this.clearAllSnapshots();/**
+             * Manually flush any pending updates. Ideally
+             * we could leave this to the following requestAnimationFrame but this seems
+             * to leave a flash of incorrectly styled content.
+             */const now=performance.now();frameData.delta=clamp(0,1000/60,now-frameData.timestamp);frameData.timestamp=now;frameData.isProcessing=true;steps.update.process(frameData);steps.preRender.process(frameData);steps.render.process(frameData);frameData.isProcessing=false;}didUpdate(){if(!this.updateScheduled){this.updateScheduled=true;queueMicrotask(()=>this.update());}}clearAllSnapshots(){this.nodes.forEach(clearSnapshot);this.sharedNodes.forEach(removeLeadSnapshots);}scheduleUpdateProjection(){frame.preRender(this.updateProjection,false,true);}scheduleCheckAfterUnmount(){/**
+             * If the unmounting node is in a layoutGroup and did trigger a willUpdate,
+             * we manually call didUpdate to give a chance to the siblings to animate.
+             * Otherwise, cleanup all snapshots to prevents future nodes from reusing them.
+             */frame.postRender(()=>{if(this.isLayoutDirty){this.root.didUpdate();}else{this.root.checkUpdateFailed();}});}/**
+         * Update measurements
+         */updateSnapshot(){if(this.snapshot||!this.instance)return;this.snapshot=this.measure();}updateLayout(){if(!this.instance)return;// TODO: Incorporate into a forwarded scroll offset
+this.updateScroll();if(!(this.options.alwaysMeasureLayout&&this.isLead())&&!this.isLayoutDirty){return;}/**
+             * When a node is mounted, it simply resumes from the prevLead's
+             * snapshot instead of taking a new one, but the ancestors scroll
+             * might have updated while the prevLead is unmounted. We need to
+             * update the scroll again to make sure the layout we measure is
+             * up to date.
+             */if(this.resumeFrom&&!this.resumeFrom.instance){for(let i=0;i<this.path.length;i++){const node=this.path[i];node.updateScroll();}}const prevLayout=this.layout;this.layout=this.measure(false);this.layoutCorrected=createBox();this.isLayoutDirty=false;this.projectionDelta=undefined;this.notifyListeners("measure",this.layout.layoutBox);const{visualElement}=this.options;visualElement&&visualElement.notify("LayoutMeasure",this.layout.layoutBox,prevLayout?prevLayout.layoutBox:undefined);}updateScroll(){let phase=arguments.length>0&&arguments[0]!==undefined?arguments[0]:"measure";let needsMeasurement=Boolean(this.options.layoutScroll&&this.instance);if(this.scroll&&this.scroll.animationId===this.root.animationId&&this.scroll.phase===phase){needsMeasurement=false;}if(needsMeasurement){this.scroll={animationId:this.root.animationId,phase,isRoot:checkIsScrollRoot(this.instance),offset:measureScroll(this.instance)};}}resetTransform(){if(!resetTransform)return;const isResetRequested=this.isLayoutDirty||this.shouldResetTransform;const hasProjection=this.projectionDelta&&!isDeltaZero(this.projectionDelta);const transformTemplate=this.getTransformTemplate();const transformTemplateValue=transformTemplate?transformTemplate(this.latestValues,""):undefined;const transformTemplateHasChanged=transformTemplateValue!==this.prevTransformTemplateValue;if(isResetRequested&&(hasProjection||hasTransform(this.latestValues)||transformTemplateHasChanged)){resetTransform(this.instance,transformTemplateValue);this.shouldResetTransform=false;this.scheduleRender();}}measure(){let removeTransform=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;const pageBox=this.measurePageBox();let layoutBox=this.removeElementScroll(pageBox);/**
+             * Measurements taken during the pre-render stage
+             * still have transforms applied so we remove them
+             * via calculation.
+             */if(removeTransform){layoutBox=this.removeTransform(layoutBox);}roundBox(layoutBox);return{animationId:this.root.animationId,measuredBox:pageBox,layoutBox,latestValues:{},source:this.id};}measurePageBox(){const{visualElement}=this.options;if(!visualElement)return createBox();const box=visualElement.measureViewportBox();// Remove viewport scroll to give page-relative coordinates
+const{scroll}=this.root;if(scroll){translateAxis(box.x,scroll.offset.x);translateAxis(box.y,scroll.offset.y);}return box;}removeElementScroll(box){const boxWithoutScroll=createBox();copyBoxInto(boxWithoutScroll,box);/**
+             * Performance TODO: Keep a cumulative scroll offset down the tree
+             * rather than loop back up the path.
+             */for(let i=0;i<this.path.length;i++){const node=this.path[i];const{scroll,options}=node;if(node!==this.root&&scroll&&options.layoutScroll){/**
+                     * If this is a new scroll root, we want to remove all previous scrolls
+                     * from the viewport box.
+                     */if(scroll.isRoot){copyBoxInto(boxWithoutScroll,box);const{scroll:rootScroll}=this.root;/**
+                         * Undo the application of page scroll that was originally added
+                         * to the measured bounding box.
+                         */if(rootScroll){translateAxis(boxWithoutScroll.x,-rootScroll.offset.x);translateAxis(boxWithoutScroll.y,-rootScroll.offset.y);}}translateAxis(boxWithoutScroll.x,scroll.offset.x);translateAxis(boxWithoutScroll.y,scroll.offset.y);}}return boxWithoutScroll;}applyTransform(box){let transformOnly=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;const withTransforms=createBox();copyBoxInto(withTransforms,box);for(let i=0;i<this.path.length;i++){const node=this.path[i];if(!transformOnly&&node.options.layoutScroll&&node.scroll&&node!==node.root){transformBox(withTransforms,{x:-node.scroll.offset.x,y:-node.scroll.offset.y});}if(!hasTransform(node.latestValues))continue;transformBox(withTransforms,node.latestValues);}if(hasTransform(this.latestValues)){transformBox(withTransforms,this.latestValues);}return withTransforms;}removeTransform(box){const boxWithoutTransform=createBox();copyBoxInto(boxWithoutTransform,box);for(let i=0;i<this.path.length;i++){const node=this.path[i];if(!node.instance)continue;if(!hasTransform(node.latestValues))continue;hasScale(node.latestValues)&&node.updateSnapshot();const sourceBox=createBox();const nodeBox=node.measurePageBox();copyBoxInto(sourceBox,nodeBox);removeBoxTransforms(boxWithoutTransform,node.latestValues,node.snapshot?node.snapshot.layoutBox:undefined,sourceBox);}if(hasTransform(this.latestValues)){removeBoxTransforms(boxWithoutTransform,this.latestValues);}return boxWithoutTransform;}setTargetDelta(delta){this.targetDelta=delta;this.root.scheduleUpdateProjection();this.isProjectionDirty=true;}setOptions(options){this.options={...this.options,...options,crossfade:options.crossfade!==undefined?options.crossfade:true};}clearMeasurements(){this.scroll=undefined;this.layout=undefined;this.snapshot=undefined;this.prevTransformTemplateValue=undefined;this.targetDelta=undefined;this.target=undefined;this.isLayoutDirty=false;}forceRelativeParentToResolveTarget(){if(!this.relativeParent)return;/**
+             * If the parent target isn't up-to-date, force it to update.
+             * This is an unfortunate de-optimisation as it means any updating relative
+             * projection will cause all the relative parents to recalculate back
+             * up the tree.
+             */if(this.relativeParent.resolvedRelativeTargetAt!==frameData.timestamp){this.relativeParent.resolveTargetDelta(true);}}resolveTargetDelta(){let forceRecalculation=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;var _a;/**
+             * Once the dirty status of nodes has been spread through the tree, we also
+             * need to check if we have a shared node of a different depth that has itself
+             * been dirtied.
+             */const lead=this.getLead();this.isProjectionDirty||(this.isProjectionDirty=lead.isProjectionDirty);this.isTransformDirty||(this.isTransformDirty=lead.isTransformDirty);this.isSharedProjectionDirty||(this.isSharedProjectionDirty=lead.isSharedProjectionDirty);const isShared=Boolean(this.resumingFrom)||this!==lead;/**
+             * We don't use transform for this step of processing so we don't
+             * need to check whether any nodes have changed transform.
+             */const canSkip=!(forceRecalculation||isShared&&this.isSharedProjectionDirty||this.isProjectionDirty||((_a=this.parent)===null||_a===void 0?void 0:_a.isProjectionDirty)||this.attemptToResolveRelativeTarget);if(canSkip)return;const{layout,layoutId}=this.options;/**
+             * If we have no layout, we can't perform projection, so early return
+             */if(!this.layout||!(layout||layoutId))return;this.resolvedRelativeTargetAt=frameData.timestamp;/**
+             * If we don't have a targetDelta but do have a layout, we can attempt to resolve
+             * a relativeParent. This will allow a component to perform scale correction
+             * even if no animation has started.
+             */ // TODO If this is unsuccessful this currently happens every frame
+if(!this.targetDelta&&!this.relativeTarget){// TODO: This is a semi-repetition of further down this function, make DRY
+const relativeParent=this.getClosestProjectingParent();if(relativeParent&&relativeParent.layout&&this.animationProgress!==1){this.relativeParent=relativeParent;this.forceRelativeParentToResolveTarget();this.relativeTarget=createBox();this.relativeTargetOrigin=createBox();calcRelativePosition(this.relativeTargetOrigin,this.layout.layoutBox,relativeParent.layout.layoutBox);copyBoxInto(this.relativeTarget,this.relativeTargetOrigin);}else{this.relativeParent=this.relativeTarget=undefined;}}/**
+             * If we have no relative target or no target delta our target isn't valid
+             * for this frame.
+             */if(!this.relativeTarget&&!this.targetDelta)return;/**
+             * Lazy-init target data structure
+             */if(!this.target){this.target=createBox();this.targetWithTransforms=createBox();}/**
+             * If we've got a relative box for this component, resolve it into a target relative to the parent.
+             */if(this.relativeTarget&&this.relativeTargetOrigin&&this.relativeParent&&this.relativeParent.target){this.forceRelativeParentToResolveTarget();calcRelativeBox(this.target,this.relativeTarget,this.relativeParent.target);/**
+                 * If we've only got a targetDelta, resolve it into a target
+                 */}else if(this.targetDelta){if(Boolean(this.resumingFrom)){// TODO: This is creating a new object every frame
+this.target=this.applyTransform(this.layout.layoutBox);}else{copyBoxInto(this.target,this.layout.layoutBox);}applyBoxDelta(this.target,this.targetDelta);}else{/**
+                 * If no target, use own layout as target
+                 */copyBoxInto(this.target,this.layout.layoutBox);}/**
+             * If we've been told to attempt to resolve a relative target, do so.
+             */if(this.attemptToResolveRelativeTarget){this.attemptToResolveRelativeTarget=false;const relativeParent=this.getClosestProjectingParent();if(relativeParent&&Boolean(relativeParent.resumingFrom)===Boolean(this.resumingFrom)&&!relativeParent.options.layoutScroll&&relativeParent.target&&this.animationProgress!==1){this.relativeParent=relativeParent;this.forceRelativeParentToResolveTarget();this.relativeTarget=createBox();this.relativeTargetOrigin=createBox();calcRelativePosition(this.relativeTargetOrigin,this.target,relativeParent.target);copyBoxInto(this.relativeTarget,this.relativeTargetOrigin);}else{this.relativeParent=this.relativeTarget=undefined;}}/**
+             * Increase debug counter for resolved target deltas
+             */projectionFrameData.resolvedTargetDeltas++;}getClosestProjectingParent(){if(!this.parent||hasScale(this.parent.latestValues)||has2DTranslate(this.parent.latestValues)){return undefined;}if(this.parent.isProjecting()){return this.parent;}else{return this.parent.getClosestProjectingParent();}}isProjecting(){return Boolean((this.relativeTarget||this.targetDelta||this.options.layoutRoot)&&this.layout);}calcProjection(){var _a;const lead=this.getLead();const isShared=Boolean(this.resumingFrom)||this!==lead;let canSkip=true;/**
+             * If this is a normal layout animation and neither this node nor its nearest projecting
+             * is dirty then we can't skip.
+             */if(this.isProjectionDirty||((_a=this.parent)===null||_a===void 0?void 0:_a.isProjectionDirty)){canSkip=false;}/**
+             * If this is a shared layout animation and this node's shared projection is dirty then
+             * we can't skip.
+             */if(isShared&&(this.isSharedProjectionDirty||this.isTransformDirty)){canSkip=false;}/**
+             * If we have resolved the target this frame we must recalculate the
+             * projection to ensure it visually represents the internal calculations.
+             */if(this.resolvedRelativeTargetAt===frameData.timestamp){canSkip=false;}if(canSkip)return;const{layout,layoutId}=this.options;/**
+             * If this section of the tree isn't animating we can
+             * delete our target sources for the following frame.
+             */this.isTreeAnimating=Boolean(this.parent&&this.parent.isTreeAnimating||this.currentAnimation||this.pendingAnimation);if(!this.isTreeAnimating){this.targetDelta=this.relativeTarget=undefined;}if(!this.layout||!(layout||layoutId))return;/**
+             * Reset the corrected box with the latest values from box, as we're then going
+             * to perform mutative operations on it.
+             */copyBoxInto(this.layoutCorrected,this.layout.layoutBox);/**
+             * Record previous tree scales before updating.
+             */const prevTreeScaleX=this.treeScale.x;const prevTreeScaleY=this.treeScale.y;/**
+             * Apply all the parent deltas to this box to produce the corrected box. This
+             * is the layout box, as it will appear on screen as a result of the transforms of its parents.
+             */applyTreeDeltas(this.layoutCorrected,this.treeScale,this.path,isShared);/**
+             * If this layer needs to perform scale correction but doesn't have a target,
+             * use the layout as the target.
+             */if(lead.layout&&!lead.target&&(this.treeScale.x!==1||this.treeScale.y!==1)){lead.target=lead.layout.layoutBox;}const{target}=lead;if(!target){/**
+                 * If we don't have a target to project into, but we were previously
+                 * projecting, we want to remove the stored transform and schedule
+                 * a render to ensure the elements reflect the removed transform.
+                 */if(this.projectionTransform){this.projectionDelta=createDelta();this.projectionTransform="none";this.scheduleRender();}return;}if(!this.projectionDelta){this.projectionDelta=createDelta();this.projectionDeltaWithTransform=createDelta();}const prevProjectionTransform=this.projectionTransform;/**
+             * Update the delta between the corrected box and the target box before user-set transforms were applied.
+             * This will allow us to calculate the corrected borderRadius and boxShadow to compensate
+             * for our layout reprojection, but still allow them to be scaled correctly by the user.
+             * It might be that to simplify this we may want to accept that user-set scale is also corrected
+             * and we wouldn't have to keep and calc both deltas, OR we could support a user setting
+             * to allow people to choose whether these styles are corrected based on just the
+             * layout reprojection or the final bounding box.
+             */calcBoxDelta(this.projectionDelta,this.layoutCorrected,target,this.latestValues);this.projectionTransform=buildProjectionTransform(this.projectionDelta,this.treeScale);if(this.projectionTransform!==prevProjectionTransform||this.treeScale.x!==prevTreeScaleX||this.treeScale.y!==prevTreeScaleY){this.hasProjected=true;this.scheduleRender();this.notifyListeners("projectionUpdate",target);}/**
+             * Increase debug counter for recalculated projections
+             */projectionFrameData.recalculatedProjection++;}hide(){this.isVisible=false;// TODO: Schedule render
+}show(){this.isVisible=true;// TODO: Schedule render
+}scheduleRender(){let notifyAll=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;this.options.scheduleRender&&this.options.scheduleRender();if(notifyAll){const stack=this.getStack();stack&&stack.scheduleRender();}if(this.resumingFrom&&!this.resumingFrom.instance){this.resumingFrom=undefined;}}setAnimationOrigin(delta){let hasOnlyRelativeTargetChanged=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;const snapshot=this.snapshot;const snapshotLatestValues=snapshot?snapshot.latestValues:{};const mixedValues={...this.latestValues};const targetDelta=createDelta();if(!this.relativeParent||!this.relativeParent.options.layoutRoot){this.relativeTarget=this.relativeTargetOrigin=undefined;}this.attemptToResolveRelativeTarget=!hasOnlyRelativeTargetChanged;const relativeLayout=createBox();const snapshotSource=snapshot?snapshot.source:undefined;const layoutSource=this.layout?this.layout.source:undefined;const isSharedLayoutAnimation=snapshotSource!==layoutSource;const stack=this.getStack();const isOnlyMember=!stack||stack.members.length<=1;const shouldCrossfadeOpacity=Boolean(isSharedLayoutAnimation&&!isOnlyMember&&this.options.crossfade===true&&!this.path.some(hasOpacityCrossfade));this.animationProgress=0;let prevRelativeTarget;this.mixTargetDelta=latest=>{const progress=latest/1000;mixAxisDelta(targetDelta.x,delta.x,progress);mixAxisDelta(targetDelta.y,delta.y,progress);this.setTargetDelta(targetDelta);if(this.relativeTarget&&this.relativeTargetOrigin&&this.layout&&this.relativeParent&&this.relativeParent.layout){calcRelativePosition(relativeLayout,this.layout.layoutBox,this.relativeParent.layout.layoutBox);mixBox(this.relativeTarget,this.relativeTargetOrigin,relativeLayout,progress);/**
+                     * If this is an unchanged relative target we can consider the
+                     * projection not dirty.
+                     */if(prevRelativeTarget&&boxEquals(this.relativeTarget,prevRelativeTarget)){this.isProjectionDirty=false;}if(!prevRelativeTarget)prevRelativeTarget=createBox();copyBoxInto(prevRelativeTarget,this.relativeTarget);}if(isSharedLayoutAnimation){this.animationValues=mixedValues;mixValues(mixedValues,snapshotLatestValues,this.latestValues,progress,shouldCrossfadeOpacity,isOnlyMember);}this.root.scheduleUpdateProjection();this.scheduleRender();this.animationProgress=progress;};this.mixTargetDelta(this.options.layoutRoot?1000:0);}startAnimation(options){this.notifyListeners("animationStart");this.currentAnimation&&this.currentAnimation.stop();if(this.resumingFrom&&this.resumingFrom.currentAnimation){this.resumingFrom.currentAnimation.stop();}if(this.pendingAnimation){cancelFrame(this.pendingAnimation);this.pendingAnimation=undefined;}/**
+             * Start the animation in the next frame to have a frame with progress 0,
+             * where the target is the same as when the animation started, so we can
+             * calculate the relative positions correctly for instant transitions.
+             */this.pendingAnimation=frame.update(()=>{globalProjectionState.hasAnimatedSinceResize=true;this.currentAnimation=animateSingleValue(0,animationTarget,{...options,onUpdate:latest=>{this.mixTargetDelta(latest);options.onUpdate&&options.onUpdate(latest);},onComplete:()=>{options.onComplete&&options.onComplete();this.completeAnimation();}});if(this.resumingFrom){this.resumingFrom.currentAnimation=this.currentAnimation;}this.pendingAnimation=undefined;});}completeAnimation(){if(this.resumingFrom){this.resumingFrom.currentAnimation=undefined;this.resumingFrom.preserveOpacity=undefined;}const stack=this.getStack();stack&&stack.exitAnimationComplete();this.resumingFrom=this.currentAnimation=this.animationValues=undefined;this.notifyListeners("animationComplete");}finishAnimation(){if(this.currentAnimation){this.mixTargetDelta&&this.mixTargetDelta(animationTarget);this.currentAnimation.stop();}this.completeAnimation();}applyTransformsToTarget(){const lead=this.getLead();let{targetWithTransforms,target,layout,latestValues}=lead;if(!targetWithTransforms||!target||!layout)return;/**
+             * If we're only animating position, and this element isn't the lead element,
+             * then instead of projecting into the lead box we instead want to calculate
+             * a new target that aligns the two boxes but maintains the layout shape.
+             */if(this!==lead&&this.layout&&layout&&shouldAnimatePositionOnly(this.options.animationType,this.layout.layoutBox,layout.layoutBox)){target=this.target||createBox();const xLength=calcLength(this.layout.layoutBox.x);target.x.min=lead.target.x.min;target.x.max=target.x.min+xLength;const yLength=calcLength(this.layout.layoutBox.y);target.y.min=lead.target.y.min;target.y.max=target.y.min+yLength;}copyBoxInto(targetWithTransforms,target);/**
+             * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.
+             * This is the final box that we will then project into by calculating a transform delta and
+             * applying it to the corrected box.
+             */transformBox(targetWithTransforms,latestValues);/**
+             * Update the delta between the corrected box and the final target box, after
+             * user-set transforms are applied to it. This will be used by the renderer to
+             * create a transform style that will reproject the element from its layout layout
+             * into the desired bounding box.
+             */calcBoxDelta(this.projectionDeltaWithTransform,this.layoutCorrected,targetWithTransforms,latestValues);}registerSharedNode(layoutId,node){if(!this.sharedNodes.has(layoutId)){this.sharedNodes.set(layoutId,new NodeStack());}const stack=this.sharedNodes.get(layoutId);stack.add(node);const config=node.options.initialPromotionConfig;node.promote({transition:config?config.transition:undefined,preserveFollowOpacity:config&&config.shouldPreserveFollowOpacity?config.shouldPreserveFollowOpacity(node):undefined});}isLead(){const stack=this.getStack();return stack?stack.lead===this:true;}getLead(){var _a;const{layoutId}=this.options;return layoutId?((_a=this.getStack())===null||_a===void 0?void 0:_a.lead)||this:this;}getPrevLead(){var _a;const{layoutId}=this.options;return layoutId?(_a=this.getStack())===null||_a===void 0?void 0:_a.prevLead:undefined;}getStack(){const{layoutId}=this.options;if(layoutId)return this.root.sharedNodes.get(layoutId);}promote(){let{needsReset,transition,preserveFollowOpacity}=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};const stack=this.getStack();if(stack)stack.promote(this,preserveFollowOpacity);if(needsReset){this.projectionDelta=undefined;this.needsReset=true;}if(transition)this.setOptions({transition});}relegate(){const stack=this.getStack();if(stack){return stack.relegate(this);}else{return false;}}resetRotation(){const{visualElement}=this.options;if(!visualElement)return;// If there's no detected rotation values, we can early return without a forced render.
+let hasRotate=false;/**
+             * An unrolled check for rotation values. Most elements don't have any rotation and
+             * skipping the nested loop and new object creation is 50% faster.
+             */const{latestValues}=visualElement;if(latestValues.rotate||latestValues.rotateX||latestValues.rotateY||latestValues.rotateZ){hasRotate=true;}// If there's no rotation values, we don't need to do any more.
+if(!hasRotate)return;const resetValues={};// Check the rotate value of all axes and reset to 0
+for(let i=0;i<transformAxes.length;i++){const key="rotate"+transformAxes[i];// Record the rotation and then temporarily set it to 0
+if(latestValues[key]){resetValues[key]=latestValues[key];visualElement.setStaticValue(key,0);}}// Force a render of this element to apply the transform with all rotations
+// set to 0.
+visualElement.render();// Put back all the values we reset
+for(const key in resetValues){visualElement.setStaticValue(key,resetValues[key]);}// Schedule a render for the next frame. This ensures we won't visually
+// see the element with the reset rotate value applied.
+visualElement.scheduleRender();}getProjectionStyles(){let styleProp=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var _a,_b;// TODO: Return lifecycle-persistent object
+const styles={};if(!this.instance||this.isSVG)return styles;if(!this.isVisible){return{visibility:"hidden"};}else{styles.visibility="";}const transformTemplate=this.getTransformTemplate();if(this.needsReset){this.needsReset=false;styles.opacity="";styles.pointerEvents=resolveMotionValue(styleProp.pointerEvents)||"";styles.transform=transformTemplate?transformTemplate(this.latestValues,""):"none";return styles;}const lead=this.getLead();if(!this.projectionDelta||!this.layout||!lead.target){const emptyStyles={};if(this.options.layoutId){emptyStyles.opacity=this.latestValues.opacity!==undefined?this.latestValues.opacity:1;emptyStyles.pointerEvents=resolveMotionValue(styleProp.pointerEvents)||"";}if(this.hasProjected&&!hasTransform(this.latestValues)){emptyStyles.transform=transformTemplate?transformTemplate({},""):"none";this.hasProjected=false;}return emptyStyles;}const valuesToRender=lead.animationValues||lead.latestValues;this.applyTransformsToTarget();styles.transform=buildProjectionTransform(this.projectionDeltaWithTransform,this.treeScale,valuesToRender);if(transformTemplate){styles.transform=transformTemplate(valuesToRender,styles.transform);}const{x,y}=this.projectionDelta;styles.transformOrigin="".concat(x.origin*100,"% ").concat(y.origin*100,"% 0");if(lead.animationValues){/**
+                 * If the lead component is animating, assign this either the entering/leaving
+                 * opacity
+                 */styles.opacity=lead===this?(_b=(_a=valuesToRender.opacity)!==null&&_a!==void 0?_a:this.latestValues.opacity)!==null&&_b!==void 0?_b:1:this.preserveOpacity?this.latestValues.opacity:valuesToRender.opacityExit;}else{/**
+                 * Or we're not animating at all, set the lead component to its layout
+                 * opacity and other components to hidden.
+                 */styles.opacity=lead===this?valuesToRender.opacity!==undefined?valuesToRender.opacity:"":valuesToRender.opacityExit!==undefined?valuesToRender.opacityExit:0;}/**
+             * Apply scale correction
+             */for(const key in scaleCorrectors){if(valuesToRender[key]===undefined)continue;const{correct,applyTo}=scaleCorrectors[key];/**
+                 * Only apply scale correction to the value if we have an
+                 * active projection transform. Otherwise these values become
+                 * vulnerable to distortion if the element changes size without
+                 * a corresponding layout animation.
+                 */const corrected=styles.transform==="none"?valuesToRender[key]:correct(valuesToRender[key],lead);if(applyTo){const num=applyTo.length;for(let i=0;i<num;i++){styles[applyTo[i]]=corrected;}}else{styles[key]=corrected;}}/**
+             * Disable pointer events on follow components. This is to ensure
+             * that if a follow component covers a lead component it doesn't block
+             * pointer events on the lead.
+             */if(this.options.layoutId){styles.pointerEvents=lead===this?resolveMotionValue(styleProp.pointerEvents)||"":"none";}return styles;}clearSnapshot(){this.resumeFrom=this.snapshot=undefined;}// Only run on root
+resetTree(){this.root.nodes.forEach(node=>{var _a;return(_a=node.currentAnimation)===null||_a===void 0?void 0:_a.stop();});this.root.nodes.forEach(clearMeasurements);this.root.sharedNodes.clear();}};}function updateLayout(node){node.updateLayout();}function notifyLayoutUpdate(node){var _a;const snapshot=((_a=node.resumeFrom)===null||_a===void 0?void 0:_a.snapshot)||node.snapshot;if(node.isLead()&&node.layout&&snapshot&&node.hasListeners("didUpdate")){const{layoutBox:layout,measuredBox:measuredLayout}=node.layout;const{animationType}=node.options;const isShared=snapshot.source!==node.layout.source;// TODO Maybe we want to also resize the layout snapshot so we don't trigger
+// animations for instance if layout="size" and an element has only changed position
+if(animationType==="size"){eachAxis(axis=>{const axisSnapshot=isShared?snapshot.measuredBox[axis]:snapshot.layoutBox[axis];const length=calcLength(axisSnapshot);axisSnapshot.min=layout[axis].min;axisSnapshot.max=axisSnapshot.min+length;});}else if(shouldAnimatePositionOnly(animationType,snapshot.layoutBox,layout)){eachAxis(axis=>{const axisSnapshot=isShared?snapshot.measuredBox[axis]:snapshot.layoutBox[axis];const length=calcLength(layout[axis]);axisSnapshot.max=axisSnapshot.min+length;/**
+                 * Ensure relative target gets resized and rerendererd
+                 */if(node.relativeTarget&&!node.currentAnimation){node.isProjectionDirty=true;node.relativeTarget[axis].max=node.relativeTarget[axis].min+length;}});}const layoutDelta=createDelta();calcBoxDelta(layoutDelta,layout,snapshot.layoutBox);const visualDelta=createDelta();if(isShared){calcBoxDelta(visualDelta,node.applyTransform(measuredLayout,true),snapshot.measuredBox);}else{calcBoxDelta(visualDelta,layout,snapshot.layoutBox);}const hasLayoutChanged=!isDeltaZero(layoutDelta);let hasRelativeTargetChanged=false;if(!node.resumeFrom){const relativeParent=node.getClosestProjectingParent();/**
+             * If the relativeParent is itself resuming from a different element then
+             * the relative snapshot is not relavent
+             */if(relativeParent&&!relativeParent.resumeFrom){const{snapshot:parentSnapshot,layout:parentLayout}=relativeParent;if(parentSnapshot&&parentLayout){const relativeSnapshot=createBox();calcRelativePosition(relativeSnapshot,snapshot.layoutBox,parentSnapshot.layoutBox);const relativeLayout=createBox();calcRelativePosition(relativeLayout,layout,parentLayout.layoutBox);if(!boxEquals(relativeSnapshot,relativeLayout)){hasRelativeTargetChanged=true;}if(relativeParent.options.layoutRoot){node.relativeTarget=relativeLayout;node.relativeTargetOrigin=relativeSnapshot;node.relativeParent=relativeParent;}}}}node.notifyListeners("didUpdate",{layout,snapshot,delta:visualDelta,layoutDelta,hasLayoutChanged,hasRelativeTargetChanged});}else if(node.isLead()){const{onExitComplete}=node.options;onExitComplete&&onExitComplete();}/**
+     * Clearing transition
+     * TODO: Investigate why this transition is being passed in as {type: false } from Framer
+     * and why we need it at all
+     */node.options.transition=undefined;}function propagateDirtyNodes(node){/**
+     * Increase debug counter for nodes encountered this frame
+     */projectionFrameData.totalNodes++;if(!node.parent)return;/**
+     * If this node isn't projecting, propagate isProjectionDirty. It will have
+     * no performance impact but it will allow the next child that *is* projecting
+     * but *isn't* dirty to just check its parent to see if *any* ancestor needs
+     * correcting.
+     */if(!node.isProjecting()){node.isProjectionDirty=node.parent.isProjectionDirty;}/**
+     * Propagate isSharedProjectionDirty and isTransformDirty
+     * throughout the whole tree. A future revision can take another look at
+     * this but for safety we still recalcualte shared nodes.
+     */node.isSharedProjectionDirty||(node.isSharedProjectionDirty=Boolean(node.isProjectionDirty||node.parent.isProjectionDirty||node.parent.isSharedProjectionDirty));node.isTransformDirty||(node.isTransformDirty=node.parent.isTransformDirty);}function cleanDirtyNodes(node){node.isProjectionDirty=node.isSharedProjectionDirty=node.isTransformDirty=false;}function clearSnapshot(node){node.clearSnapshot();}function clearMeasurements(node){node.clearMeasurements();}function clearIsLayoutDirty(node){node.isLayoutDirty=false;}function resetTransformStyle(node){const{visualElement}=node.options;if(visualElement&&visualElement.getProps().onBeforeLayoutMeasure){visualElement.notify("BeforeLayoutMeasure");}node.resetTransform();}function finishAnimation(node){node.finishAnimation();node.targetDelta=node.relativeTarget=node.target=undefined;node.isProjectionDirty=true;}function resolveTargetDelta(node){node.resolveTargetDelta();}function calcProjection(node){node.calcProjection();}function resetRotation(node){node.resetRotation();}function removeLeadSnapshots(stack){stack.removeLeadSnapshot();}function mixAxisDelta(output,delta,p){output.translate=mix(delta.translate,0,p);output.scale=mix(delta.scale,1,p);output.origin=delta.origin;output.originPoint=delta.originPoint;}function mixAxis(output,from,to,p){output.min=mix(from.min,to.min,p);output.max=mix(from.max,to.max,p);}function mixBox(output,from,to,p){mixAxis(output.x,from.x,to.x,p);mixAxis(output.y,from.y,to.y,p);}function hasOpacityCrossfade(node){return node.animationValues&&node.animationValues.opacityExit!==undefined;}const defaultLayoutTransition={duration:0.45,ease:[0.4,0,0.1,1]};function roundAxis(axis){axis.min=Math.round(axis.min);axis.max=Math.round(axis.max);}function roundBox(box){roundAxis(box.x);roundAxis(box.y);}function shouldAnimatePositionOnly(animationType,snapshot,layout){return animationType==="position"||animationType==="preserve-aspect"&&!isNear(aspectRatio(snapshot),aspectRatio(layout),0.2);}const DocumentProjectionNode=createProjectionNode({attachResizeListener:(ref,notify)=>addDomEvent(ref,"resize",notify),measureScroll:()=>({x:document.documentElement.scrollLeft||document.body.scrollLeft,y:document.documentElement.scrollTop||document.body.scrollTop}),checkIsScrollRoot:()=>true});const rootProjectionNode={current:undefined};const HTMLProjectionNode=createProjectionNode({measureScroll:instance=>({x:instance.scrollLeft,y:instance.scrollTop}),defaultParent:()=>{if(!rootProjectionNode.current){const documentNode=new DocumentProjectionNode({});documentNode.mount(window);documentNode.setOptions({layoutScroll:true});rootProjectionNode.current=documentNode;}return rootProjectionNode.current;},resetTransform:(instance,value)=>{instance.style.transform=value!==undefined?value:"none";},checkIsScrollRoot:instance=>Boolean(window.getComputedStyle(instance).position==="fixed")});const drag={pan:{Feature:PanGesture},drag:{Feature:DragGesture,ProjectionNode:HTMLProjectionNode,MeasureLayout}};/**
+ * Parse Framer's special CSS variable format into a CSS token and a fallback.
+ *
+ * ```
+ * `var(--foo, #fff)` => [`--foo`, '#fff']
+ * ```
+ *
+ * @param current
+ */const splitCSSVariableRegex=/var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;function parseCSSVariable(current){const match=splitCSSVariableRegex.exec(current);if(!match)return[,];const[,token,fallback]=match;return[token,fallback];}const maxDepth=4;function getVariableValue(current,element){let depth=arguments.length>2&&arguments[2]!==undefined?arguments[2]:1;invariant(depth<=maxDepth,"Max CSS variable fallback depth detected in property \"".concat(current,"\". This may indicate a circular fallback dependency."));const[token,fallback]=parseCSSVariable(current);// No CSS variable detected
+if(!token)return;// Attempt to read this CSS variable off the element
+const resolved=window.getComputedStyle(element).getPropertyValue(token);if(resolved){return resolved.trim();}else if(isCSSVariableToken(fallback)){// The fallback might itself be a CSS variable, in which case we attempt to resolve it too.
+return getVariableValue(fallback,element,depth+1);}else{return fallback;}}/**
+ * Resolve CSS variables from
+ *
+ * @internal
+ */function resolveCSSVariables(visualElement,_ref54,transitionEnd){let{...target}=_ref54;const element=visualElement.current;if(!(element instanceof Element))return{target,transitionEnd};// If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
+// only if they change but I think this reads clearer and this isn't a performance-critical path.
+if(transitionEnd){transitionEnd={...transitionEnd};}// Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
+visualElement.values.forEach(value=>{const current=value.get();if(!isCSSVariableToken(current))return;const resolved=getVariableValue(current,element);if(resolved)value.set(resolved);});// Cycle through every target property and resolve CSS variables. Currently
+// we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`
+for(const key in target){const current=target[key];if(!isCSSVariableToken(current))continue;const resolved=getVariableValue(current,element);if(!resolved)continue;// Clone target if it hasn't already been
+target[key]=resolved;if(!transitionEnd)transitionEnd={};// If the user hasn't already set this key on `transitionEnd`, set it to the unresolved
+// CSS variable. This will ensure that after the animation the component will reflect
+// changes in the value of the CSS variable.
+if(transitionEnd[key]===undefined){transitionEnd[key]=current;}}return{target,transitionEnd};}const positionalKeys=new Set(["width","height","top","left","right","bottom","x","y","translateX","translateY"]);const isPositionalKey=key=>positionalKeys.has(key);const hasPositionalKey=target=>{return Object.keys(target).some(isPositionalKey);};const isNumOrPxType=v=>v===number||v===px;const getPosFromMatrix=(matrix,pos)=>parseFloat(matrix.split(", ")[pos]);const getTranslateFromMatrix=(pos2,pos3)=>(_bbox,_ref55)=>{let{transform}=_ref55;if(transform==="none"||!transform)return 0;const matrix3d=transform.match(/^matrix3d\((.+)\)$/);if(matrix3d){return getPosFromMatrix(matrix3d[1],pos3);}else{const matrix=transform.match(/^matrix\((.+)\)$/);if(matrix){return getPosFromMatrix(matrix[1],pos2);}else{return 0;}}};const transformKeys=new Set(["x","y","z"]);const nonTranslationalTransformKeys=transformPropOrder.filter(key=>!transformKeys.has(key));function removeNonTranslationalTransform(visualElement){const removedTransforms=[];nonTranslationalTransformKeys.forEach(key=>{const value=visualElement.getValue(key);if(value!==undefined){removedTransforms.push([key,value.get()]);value.set(key.startsWith("scale")?1:0);}});// Apply changes to element before measurement
+if(removedTransforms.length)visualElement.render();return removedTransforms;}const positionalValues={// Dimensions
+width:(_ref56,_ref57)=>{let{x}=_ref56;let{paddingLeft="0",paddingRight="0"}=_ref57;return x.max-x.min-parseFloat(paddingLeft)-parseFloat(paddingRight);},height:(_ref58,_ref59)=>{let{y}=_ref58;let{paddingTop="0",paddingBottom="0"}=_ref59;return y.max-y.min-parseFloat(paddingTop)-parseFloat(paddingBottom);},top:(_bbox,_ref60)=>{let{top}=_ref60;return parseFloat(top);},left:(_bbox,_ref61)=>{let{left}=_ref61;return parseFloat(left);},bottom:(_ref62,_ref63)=>{let{y}=_ref62;let{top}=_ref63;return parseFloat(top)+(y.max-y.min);},right:(_ref64,_ref65)=>{let{x}=_ref64;let{left}=_ref65;return parseFloat(left)+(x.max-x.min);},// Transform
+x:getTranslateFromMatrix(4,13),y:getTranslateFromMatrix(5,14)};const convertChangedValueTypes=(target,visualElement,changedKeys)=>{const originBbox=visualElement.measureViewportBox();const element=visualElement.current;const elementComputedStyle=getComputedStyle(element);const{display}=elementComputedStyle;const origin={};// If the element is currently set to display: "none", make it visible before
+// measuring the target bounding box
+if(display==="none"){visualElement.setStaticValue("display",target.display||"block");}/**
+     * Record origins before we render and update styles
+     */changedKeys.forEach(key=>{origin[key]=positionalValues[key](originBbox,elementComputedStyle);});// Apply the latest values (as set in checkAndConvertChangedValueTypes)
+visualElement.render();const targetBbox=visualElement.measureViewportBox();changedKeys.forEach(key=>{// Restore styles to their **calculated computed style**, not their actual
+// originally set style. This allows us to animate between equivalent pixel units.
+const value=visualElement.getValue(key);value&&value.jump(origin[key]);target[key]=positionalValues[key](targetBbox,elementComputedStyle);});return target;};const checkAndConvertChangedValueTypes=function(visualElement,target){let origin=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};let transitionEnd=arguments.length>3&&arguments[3]!==undefined?arguments[3]:{};target={...target};transitionEnd={...transitionEnd};const targetPositionalKeys=Object.keys(target).filter(isPositionalKey);// We want to remove any transform values that could affect the element's bounding box before
+// it's measured. We'll reapply these later.
+let removedTransformValues=[];let hasAttemptedToRemoveTransformValues=false;const changedValueTypeKeys=[];targetPositionalKeys.forEach(key=>{const value=visualElement.getValue(key);if(!visualElement.hasValue(key))return;let from=origin[key];let fromType=findDimensionValueType(from);const to=target[key];let toType;// TODO: The current implementation of this basically throws an error
+// if you try and do value conversion via keyframes. There's probably
+// a way of doing this but the performance implications would need greater scrutiny,
+// as it'd be doing multiple resize-remeasure operations.
+if(isKeyframesTarget(to)){const numKeyframes=to.length;const fromIndex=to[0]===null?1:0;from=to[fromIndex];fromType=findDimensionValueType(from);for(let i=fromIndex;i<numKeyframes;i++){/**
+                 * Don't allow wildcard keyframes to be used to detect
+                 * a difference in value types.
+                 */if(to[i]===null)break;if(!toType){toType=findDimensionValueType(to[i]);invariant(toType===fromType||isNumOrPxType(fromType)&&isNumOrPxType(toType),"Keyframes must be of the same dimension as the current value");}else{invariant(findDimensionValueType(to[i])===toType,"All keyframes must be of the same type");}}}else{toType=findDimensionValueType(to);}if(fromType!==toType){// If they're both just number or px, convert them both to numbers rather than
+// relying on resize/remeasure to convert (which is wasteful in this situation)
+if(isNumOrPxType(fromType)&&isNumOrPxType(toType)){const current=value.get();if(typeof current==="string"){value.set(parseFloat(current));}if(typeof to==="string"){target[key]=parseFloat(to);}else if(Array.isArray(to)&&toType===px){target[key]=to.map(parseFloat);}}else if((fromType===null||fromType===void 0?void 0:fromType.transform)&&(toType===null||toType===void 0?void 0:toType.transform)&&(from===0||to===0)){// If one or the other value is 0, it's safe to coerce it to the
+// type of the other without measurement
+if(from===0){value.set(toType.transform(from));}else{target[key]=fromType.transform(to);}}else{// If we're going to do value conversion via DOM measurements, we first
+// need to remove non-positional transform values that could affect the bbox measurements.
+if(!hasAttemptedToRemoveTransformValues){removedTransformValues=removeNonTranslationalTransform(visualElement);hasAttemptedToRemoveTransformValues=true;}changedValueTypeKeys.push(key);transitionEnd[key]=transitionEnd[key]!==undefined?transitionEnd[key]:target[key];value.jump(to);}}});if(changedValueTypeKeys.length){const scrollY=changedValueTypeKeys.indexOf("height")>=0?window.pageYOffset:null;const convertedTarget=convertChangedValueTypes(target,visualElement,changedValueTypeKeys);// If we removed transform values, reapply them before the next render
+if(removedTransformValues.length){removedTransformValues.forEach(_ref66=>{let[key,value]=_ref66;visualElement.getValue(key).set(value);});}// Reapply original values
+visualElement.render();// Restore scroll position
+if(isBrowser&&scrollY!==null){window.scrollTo({top:scrollY});}return{target:convertedTarget,transitionEnd};}else{return{target,transitionEnd};}};/**
+ * Convert value types for x/y/width/height/top/left/bottom/right
+ *
+ * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'`
+ *
+ * @internal
+ */function unitConversion(visualElement,target,origin,transitionEnd){return hasPositionalKey(target)?checkAndConvertChangedValueTypes(visualElement,target,origin,transitionEnd):{target,transitionEnd};}/**
+ * Parse a DOM variant to make it animatable. This involves resolving CSS variables
+ * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels.
+ */const parseDomVariant=(visualElement,target,origin,transitionEnd)=>{const resolved=resolveCSSVariables(visualElement,target,transitionEnd);target=resolved.target;transitionEnd=resolved.transitionEnd;return unitConversion(visualElement,target,origin,transitionEnd);};// Does this device prefer reduced motion? Returns `null` server-side.
+const prefersReducedMotion={current:null};const hasReducedMotionListener={current:false};function initPrefersReducedMotion(){hasReducedMotionListener.current=true;if(!isBrowser)return;if(window.matchMedia){const motionMediaQuery=window.matchMedia("(prefers-reduced-motion)");const setReducedMotionPreferences=()=>prefersReducedMotion.current=motionMediaQuery.matches;motionMediaQuery.addListener(setReducedMotionPreferences);setReducedMotionPreferences();}else{prefersReducedMotion.current=false;}}function updateMotionValuesFromProps(element,next,prev){const{willChange}=next;for(const key in next){const nextValue=next[key];const prevValue=prev[key];if(isMotionValue(nextValue)){/**
+             * If this is a motion value found in props or style, we want to add it
+             * to our visual element's motion value map.
+             */element.addValue(key,nextValue);if(isWillChangeMotionValue(willChange)){willChange.add(key);}/**
+             * Check the version of the incoming motion value with this version
+             * and warn against mismatches.
+             */if(process.env.NODE_ENV==="development"){warnOnce(nextValue.version==="10.12.16","Attempting to mix Framer Motion versions ".concat(nextValue.version," with 10.12.16 may not work as expected."));}}else if(isMotionValue(prevValue)){/**
+             * If we're swapping from a motion value to a static value,
+             * create a new motion value from that
+             */element.addValue(key,motionValue(nextValue,{owner:element}));if(isWillChangeMotionValue(willChange)){willChange.remove(key);}}else if(prevValue!==nextValue){/**
+             * If this is a flat value that has changed, update the motion value
+             * or create one if it doesn't exist. We only want to do this if we're
+             * not handling the value with our animation state.
+             */if(element.hasValue(key)){const existingValue=element.getValue(key);// TODO: Only update values that aren't being animated or even looked at
+!existingValue.hasAnimated&&existingValue.set(nextValue);}else{const latestValue=element.getStaticValue(key);element.addValue(key,motionValue(latestValue!==undefined?latestValue:nextValue,{owner:element}));}}}// Handle removed values
+for(const key in prev){if(next[key]===undefined)element.removeValue(key);}return next;}const visualElementStore=new WeakMap();const featureNames=Object.keys(featureDefinitions);const numFeatures=featureNames.length;const propEventHandlers=["AnimationStart","AnimationComplete","Update","BeforeLayoutMeasure","LayoutMeasure","LayoutAnimationStart","LayoutAnimationComplete"];const numVariantProps=variantProps.length;/**
+ * A VisualElement is an imperative abstraction around UI elements such as
+ * HTMLElement, SVGElement, Three.Object3D etc.
+ */class VisualElement{constructor(_ref67){let{parent,props,presenceContext,reducedMotionConfig,visualState}=_ref67;let options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};/**
+         * A reference to the current underlying Instance, e.g. a HTMLElement
+         * or Three.Mesh etc.
+         */this.current=null;/**
+         * A set containing references to this VisualElement's children.
+         */this.children=new Set();/**
+         * Determine what role this visual element should take in the variant tree.
+         */this.isVariantNode=false;this.isControllingVariants=false;/**
+         * Decides whether this VisualElement should animate in reduced motion
+         * mode.
+         *
+         * TODO: This is currently set on every individual VisualElement but feels
+         * like it could be set globally.
+         */this.shouldReduceMotion=null;/**
+         * A map of all motion values attached to this visual element. Motion
+         * values are source of truth for any given animated value. A motion
+         * value might be provided externally by the component via props.
+         */this.values=new Map();/**
+         * Cleanup functions for active features (hover/tap/exit etc)
+         */this.features={};/**
+         * A map of every subscription that binds the provided or generated
+         * motion values onChange listeners to this visual element.
+         */this.valueSubscriptions=new Map();/**
+         * A reference to the previously-provided motion values as returned
+         * from scrapeMotionValuesFromProps. We use the keys in here to determine
+         * if any motion values need to be removed after props are updated.
+         */this.prevMotionValues={};/**
+         * An object containing a SubscriptionManager for each active event.
+         */this.events={};/**
+         * An object containing an unsubscribe function for each prop event subscription.
+         * For example, every "Update" event can have multiple subscribers via
+         * VisualElement.on(), but only one of those can be defined via the onUpdate prop.
+         */this.propEventSubscriptions={};this.notifyUpdate=()=>this.notify("Update",this.latestValues);this.render=()=>{if(!this.current)return;this.triggerBuild();this.renderInstance(this.current,this.renderState,this.props.style,this.projection);};this.scheduleRender=()=>frame.render(this.render,false,true);const{latestValues,renderState}=visualState;this.latestValues=latestValues;this.baseTarget={...latestValues};this.initialValues=props.initial?{...latestValues}:{};this.renderState=renderState;this.parent=parent;this.props=props;this.presenceContext=presenceContext;this.depth=parent?parent.depth+1:0;this.reducedMotionConfig=reducedMotionConfig;this.options=options;this.isControllingVariants=isControllingVariants(props);this.isVariantNode=isVariantNode(props);if(this.isVariantNode){this.variantChildren=new Set();}this.manuallyAnimateOnMount=Boolean(parent&&parent.current);/**
+         * Any motion values that are provided to the element when created
+         * aren't yet bound to the element, as this would technically be impure.
+         * However, we iterate through the motion values and set them to the
+         * initial values for this component.
+         *
+         * TODO: This is impure and we should look at changing this to run on mount.
+         * Doing so will break some tests but this isn't neccessarily a breaking change,
+         * more a reflection of the test.
+         */const{willChange,...initialMotionValues}=this.scrapeMotionValuesFromProps(props,{});for(const key in initialMotionValues){const value=initialMotionValues[key];if(latestValues[key]!==undefined&&isMotionValue(value)){value.set(latestValues[key],false);if(isWillChangeMotionValue(willChange)){willChange.add(key);}}}}/**
+     * This method takes React props and returns found MotionValues. For example, HTML
+     * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
+     *
+     * This isn't an abstract method as it needs calling in the constructor, but it is
+     * intended to be one.
+     */scrapeMotionValuesFromProps(_props,_prevProps){return{};}mount(instance){this.current=instance;visualElementStore.set(instance,this);if(this.projection&&!this.projection.instance){this.projection.mount(instance);}if(this.parent&&this.isVariantNode&&!this.isControllingVariants){this.removeFromVariantTree=this.parent.addVariantChild(this);}this.values.forEach((value,key)=>this.bindToMotionValue(key,value));if(!hasReducedMotionListener.current){initPrefersReducedMotion();}this.shouldReduceMotion=this.reducedMotionConfig==="never"?false:this.reducedMotionConfig==="always"?true:prefersReducedMotion.current;if(process.env.NODE_ENV!=="production"){warnOnce(this.shouldReduceMotion!==true,"You have Reduced Motion enabled on your device. Animations may not appear as expected.");}if(this.parent)this.parent.children.add(this);this.update(this.props,this.presenceContext);}unmount(){visualElementStore.delete(this.current);this.projection&&this.projection.unmount();cancelFrame(this.notifyUpdate);cancelFrame(this.render);this.valueSubscriptions.forEach(remove=>remove());this.removeFromVariantTree&&this.removeFromVariantTree();this.parent&&this.parent.children.delete(this);for(const key in this.events){this.events[key].clear();}for(const key in this.features){this.features[key].unmount();}this.current=null;}bindToMotionValue(key,value){const valueIsTransform=transformProps.has(key);const removeOnChange=value.on("change",latestValue=>{this.latestValues[key]=latestValue;this.props.onUpdate&&frame.update(this.notifyUpdate,false,true);if(valueIsTransform&&this.projection){this.projection.isTransformDirty=true;}});const removeOnRenderRequest=value.on("renderRequest",this.scheduleRender);this.valueSubscriptions.set(key,()=>{removeOnChange();removeOnRenderRequest();});}sortNodePosition(other){/**
+         * If these nodes aren't even of the same type we can't compare their depth.
+         */if(!this.current||!this.sortInstanceNodePosition||this.type!==other.type){return 0;}return this.sortInstanceNodePosition(this.current,other.current);}loadFeatures(_ref68,isStrict,preloadedFeatures,initialLayoutGroupConfig){let{children,...renderedProps}=_ref68;let ProjectionNodeConstructor;let MeasureLayout;/**
+         * If we're in development mode, check to make sure we're not rendering a motion component
+         * as a child of LazyMotion, as this will break the file-size benefits of using it.
+         */if(process.env.NODE_ENV!=="production"&&preloadedFeatures&&isStrict){const strictMessage="You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";renderedProps.ignoreStrict?warning(false,strictMessage):invariant(false,strictMessage);}for(let i=0;i<numFeatures;i++){const name=featureNames[i];const{isEnabled,Feature:FeatureConstructor,ProjectionNode,MeasureLayout:MeasureLayoutComponent}=featureDefinitions[name];if(ProjectionNode)ProjectionNodeConstructor=ProjectionNode;if(isEnabled(renderedProps)){if(!this.features[name]&&FeatureConstructor){this.features[name]=new FeatureConstructor(this);}if(MeasureLayoutComponent){MeasureLayout=MeasureLayoutComponent;}}}if(!this.projection&&ProjectionNodeConstructor){this.projection=new ProjectionNodeConstructor(this.latestValues,this.parent&&this.parent.projection);const{layoutId,layout,drag,dragConstraints,layoutScroll,layoutRoot}=renderedProps;this.projection.setOptions({layoutId,layout,alwaysMeasureLayout:Boolean(drag)||dragConstraints&&isRefObject(dragConstraints),visualElement:this,scheduleRender:()=>this.scheduleRender(),/**
+                 * TODO: Update options in an effect. This could be tricky as it'll be too late
+                 * to update by the time layout animations run.
+                 * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
+                 * ensuring it gets called if there's no potential layout animations.
+                 *
+                 */animationType:typeof layout==="string"?layout:"both",initialPromotionConfig:initialLayoutGroupConfig,layoutScroll,layoutRoot});}return MeasureLayout;}updateFeatures(){for(const key in this.features){const feature=this.features[key];if(feature.isMounted){feature.update();}else{feature.mount();feature.isMounted=true;}}}triggerBuild(){this.build(this.renderState,this.latestValues,this.options,this.props);}/**
+     * Measure the current viewport box with or without transforms.
+     * Only measures axis-aligned boxes, rotate and skew must be manually
+     * removed with a re-render to work.
+     */measureViewportBox(){return this.current?this.measureInstanceViewportBox(this.current,this.props):createBox();}getStaticValue(key){return this.latestValues[key];}setStaticValue(key,value){this.latestValues[key]=value;}/**
+     * Make a target animatable by Popmotion. For instance, if we're
+     * trying to animate width from 100px to 100vw we need to measure 100vw
+     * in pixels to determine what we really need to animate to. This is also
+     * pluggable to support Framer's custom value types like Color,
+     * and CSS variables.
+     */makeTargetAnimatable(target){let canMutate=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;return this.makeTargetAnimatableFromInstance(target,this.props,canMutate);}/**
+     * Update the provided props. Ensure any newly-added motion values are
+     * added to our map, old ones removed, and listeners updated.
+     */update(props,presenceContext){if(props.transformTemplate||this.props.transformTemplate){this.scheduleRender();}this.prevProps=this.props;this.props=props;this.prevPresenceContext=this.presenceContext;this.presenceContext=presenceContext;/**
+         * Update prop event handlers ie onAnimationStart, onAnimationComplete
+         */for(let i=0;i<propEventHandlers.length;i++){const key=propEventHandlers[i];if(this.propEventSubscriptions[key]){this.propEventSubscriptions[key]();delete this.propEventSubscriptions[key];}const listener=props["on"+key];if(listener){this.propEventSubscriptions[key]=this.on(key,listener);}}this.prevMotionValues=updateMotionValuesFromProps(this,this.scrapeMotionValuesFromProps(props,this.prevProps),this.prevMotionValues);if(this.handleChildMotionValue){this.handleChildMotionValue();}}getProps(){return this.props;}/**
+     * Returns the variant definition with a given name.
+     */getVariant(name){return this.props.variants?this.props.variants[name]:undefined;}/**
+     * Returns the defined default transition on this component.
+     */getDefaultTransition(){return this.props.transition;}getTransformPagePoint(){return this.props.transformPagePoint;}getClosestVariantNode(){return this.isVariantNode?this:this.parent?this.parent.getClosestVariantNode():undefined;}getVariantContext(){let startAtParent=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;if(startAtParent){return this.parent?this.parent.getVariantContext():undefined;}if(!this.isControllingVariants){const context=this.parent?this.parent.getVariantContext()||{}:{};if(this.props.initial!==undefined){context.initial=this.props.initial;}return context;}const context={};for(let i=0;i<numVariantProps;i++){const name=variantProps[i];const prop=this.props[name];if(isVariantLabel(prop)||prop===false){context[name]=prop;}}return context;}/**
+     * Add a child visual element to our set of children.
+     */addVariantChild(child){const closestVariantNode=this.getClosestVariantNode();if(closestVariantNode){closestVariantNode.variantChildren&&closestVariantNode.variantChildren.add(child);return()=>closestVariantNode.variantChildren.delete(child);}}/**
+     * Add a motion value and bind it to this visual element.
+     */addValue(key,value){// Remove existing value if it exists
+if(value!==this.values.get(key)){this.removeValue(key);this.bindToMotionValue(key,value);}this.values.set(key,value);this.latestValues[key]=value.get();}/**
+     * Remove a motion value and unbind any active subscriptions.
+     */removeValue(key){this.values.delete(key);const unsubscribe=this.valueSubscriptions.get(key);if(unsubscribe){unsubscribe();this.valueSubscriptions.delete(key);}delete this.latestValues[key];this.removeValueFromRenderState(key,this.renderState);}/**
+     * Check whether we have a motion value for this key
+     */hasValue(key){return this.values.has(key);}getValue(key,defaultValue){if(this.props.values&&this.props.values[key]){return this.props.values[key];}let value=this.values.get(key);if(value===undefined&&defaultValue!==undefined){value=motionValue(defaultValue,{owner:this});this.addValue(key,value);}return value;}/**
+     * If we're trying to animate to a previously unencountered value,
+     * we need to check for it in our state and as a last resort read it
+     * directly from the instance (which might have performance implications).
+     */readValue(key){return this.latestValues[key]!==undefined||!this.current?this.latestValues[key]:this.readValueFromInstance(this.current,key,this.options);}/**
+     * Set the base target to later animate back to. This is currently
+     * only hydrated on creation and when we first read a value.
+     */setBaseTarget(key,value){this.baseTarget[key]=value;}/**
+     * Find the base target for a value thats been removed from all animation
+     * props.
+     */getBaseTarget(key){var _a;const{initial}=this.props;const valueFromInitial=typeof initial==="string"||typeof initial==="object"?(_a=resolveVariantFromProps(this.props,initial))===null||_a===void 0?void 0:_a[key]:undefined;/**
+         * If this value still exists in the current initial variant, read that.
+         */if(initial&&valueFromInitial!==undefined){return valueFromInitial;}/**
+         * Alternatively, if this VisualElement config has defined a getBaseTarget
+         * so we can read the value from an alternative source, try that.
+         */const target=this.getBaseTargetFromProps(this.props,key);if(target!==undefined&&!isMotionValue(target))return target;/**
+         * If the value was initially defined on initial, but it doesn't any more,
+         * return undefined. Otherwise return the value as initially read from the DOM.
+         */return this.initialValues[key]!==undefined&&valueFromInitial===undefined?undefined:this.baseTarget[key];}on(eventName,callback){if(!this.events[eventName]){this.events[eventName]=new SubscriptionManager();}return this.events[eventName].add(callback);}notify(eventName){if(this.events[eventName]){for(var _len3=arguments.length,args=new Array(_len3>1?_len3-1:0),_key3=1;_key3<_len3;_key3++){args[_key3-1]=arguments[_key3];}this.events[eventName].notify(...args);}}}class DOMVisualElement extends VisualElement{sortInstanceNodePosition(a,b){/**
+         * compareDocumentPosition returns a bitmask, by using the bitwise &
+         * we're returning true if 2 in that bitmask is set to true. 2 is set
+         * to true if b preceeds a.
+         */return a.compareDocumentPosition(b)&2?1:-1;}getBaseTargetFromProps(props,key){return props.style?props.style[key]:undefined;}removeValueFromRenderState(key,_ref69){let{vars,style}=_ref69;delete vars[key];delete style[key];}makeTargetAnimatableFromInstance(_ref70,_ref71,isMounted){let{transition,transitionEnd,...target}=_ref70;let{transformValues}=_ref71;let origin=getOrigin(target,transition||{},this);/**
+         * If Framer has provided a function to convert `Color` etc value types, convert them
+         */if(transformValues){if(transitionEnd)transitionEnd=transformValues(transitionEnd);if(target)target=transformValues(target);if(origin)origin=transformValues(origin);}if(isMounted){checkTargetForNewValues(this,target,origin);const parsed=parseDomVariant(this,target,origin,transitionEnd);transitionEnd=parsed.transitionEnd;target=parsed.target;}return{transition,transitionEnd,...target};}}function getComputedStyle$1(element){return window.getComputedStyle(element);}class HTMLVisualElement extends DOMVisualElement{readValueFromInstance(instance,key){if(transformProps.has(key)){const defaultType=getDefaultValueType(key);return defaultType?defaultType.default||0:0;}else{const computedStyle=getComputedStyle$1(instance);const value=(isCSSVariableName(key)?computedStyle.getPropertyValue(key):computedStyle[key])||0;return typeof value==="string"?value.trim():value;}}measureInstanceViewportBox(instance,_ref72){let{transformPagePoint}=_ref72;return measureViewportBox(instance,transformPagePoint);}build(renderState,latestValues,options,props){buildHTMLStyles(renderState,latestValues,options,props.transformTemplate);}scrapeMotionValuesFromProps(props,prevProps){return scrapeMotionValuesFromProps$1(props,prevProps);}handleChildMotionValue(){if(this.childSubscription){this.childSubscription();delete this.childSubscription;}const{children}=this.props;if(isMotionValue(children)){this.childSubscription=children.on("change",latest=>{if(this.current)this.current.textContent="".concat(latest);});}}renderInstance(instance,renderState,styleProp,projection){renderHTML(instance,renderState,styleProp,projection);}}class SVGVisualElement extends DOMVisualElement{constructor(){super(...arguments);this.isSVGTag=false;}getBaseTargetFromProps(props,key){return props[key];}readValueFromInstance(instance,key){if(transformProps.has(key)){const defaultType=getDefaultValueType(key);return defaultType?defaultType.default||0:0;}key=!camelCaseAttributes.has(key)?camelToDash(key):key;return instance.getAttribute(key);}measureInstanceViewportBox(){return createBox();}scrapeMotionValuesFromProps(props,prevProps){return scrapeMotionValuesFromProps(props,prevProps);}build(renderState,latestValues,options,props){buildSVGAttrs(renderState,latestValues,options,this.isSVGTag,props.transformTemplate);}renderInstance(instance,renderState,styleProp,projection){renderSVG(instance,renderState,styleProp,projection);}mount(instance){this.isSVGTag=isSVGTag(instance.tagName);super.mount(instance);}}const createDomVisualElement=(Component,options)=>{return isSVGComponent(Component)?new SVGVisualElement(options,{enableHardwareAcceleration:false}):new HTMLVisualElement(options,{enableHardwareAcceleration:true});};const layout={layout:{ProjectionNode:HTMLProjectionNode,MeasureLayout}};const preloadedFeatures={...animations,...gestureAnimations,...drag,...layout};/**
+ * HTML & SVG components, optimised for use with gestures and animation. These can be used as
+ * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
+ *
+ * @public
+ */const motion=/*@__PURE__*/createMotionProxy((Component,config)=>createDomMotionConfig(Component,config,preloadedFeatures,createDomVisualElement));function Delay(_ref73){let{children,ms=1e3,durationMs=250}=_ref73;return/* @__PURE__ */jsx(motion.div,{initial:{opacity:0,scale:0.75},animate:{opacity:1,scale:1},transition:{delay:ms/1e3,duration:durationMs/1e3},children});}const purple={"50":{title:"Purple 50",hex:"#f8e9fe"},"100":{title:"Purple 100",hex:"#f2d3fe"},"200":{title:"Purple 200",hex:"#e6a7fd"},"300":{title:"Purple 300",hex:"#d97bfd"},"400":{title:"Purple 400",hex:"#cd4efc"},"500":{title:"Purple 500",hex:"#c123fc"},"600":{title:"Purple 600",hex:"#9d1fcd"},"700":{title:"Purple 700",hex:"#7a1b9e"},"800":{title:"Purple 800",hex:"#56186f"},"900":{title:"Purple 900",hex:"#331440"},"950":{title:"Purple 950",hex:"#211229"}};const Root=styled.span(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n  display: block;\n  width: 25px;\n  height: 25px;\n  position: relative;\n"])));const dash=$e(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(43deg);\n  }\n"])));const Outline=styled.svg(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  & > circle {\n    stroke: var(--ai-avatar-stroke-color);\n    stroke-width: 1.5px;\n    stroke-linecap: round;\n    transform-origin: center;\n    animation: "," 500ms ease-in-out infinite;\n    transition: stroke-dasharray 200ms ease-in-out;\n\n    stroke-dasharray: 2.34px 0;\n\n    [data-state='active'] > & {\n      stroke-dasharray: 2px 2.34px;\n    }\n  }\n"])),dash);const IconDisc=styled.span(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n  background: var(--ai-avatar-disc-color);\n  color: white;\n  width: 21px;\n  height: 21px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10.5px;\n  position: absolute;\n  top: 2px;\n  left: 2px;\n"])));function AssistAvatar(props){const{state="present"}=props;const scheme=useColorSchemeValue();const style=useMemo(()=>{if(scheme==="dark"){return{["--ai-avatar-stroke-color"]:purple[400].hex,["--ai-avatar-disc-color"]:purple[600].hex};}return{["--ai-avatar-stroke-color"]:purple[500].hex,["--ai-avatar-disc-color"]:purple[600].hex};},[scheme]);return/* @__PURE__ */jsxs(Root,{"data-state":state,style,children:[/* @__PURE__ */jsx(Outline,{width:"25",height:"25",viewBox:"0 0 25 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:/* @__PURE__ */jsx("circle",{cx:"12.5",cy:"12.5",r:"11.75"})}),/* @__PURE__ */jsx(IconDisc,{children:/* @__PURE__ */jsx(Text,{as:"span",size:0,style:{color:"inherit"},children:/* @__PURE__ */jsx(SparklesIcon,{})})})]});}function AiFieldPresence(props){return/* @__PURE__ */jsx(Card,{style:{position:"relative",background:"transparent"},contentEditable:false,children:/* @__PURE__ */jsx(Tooltip,{placement:"left",content:/* @__PURE__ */jsx(Card,{padding:3,border:true,children:/* @__PURE__ */jsx(Flex,{align:"center",children:/* @__PURE__ */jsx(Text,{size:1,children:"Running instruction..."})})}),children:/* @__PURE__ */jsx("div",{children:/* @__PURE__ */jsx(Delay,{durationMs:200,ms:250,children:/* @__PURE__ */jsx(AssistAvatar,{state:"active"})})})})});}const FirstAssistedPathContext=createContext(void 0);function FirstAssistedPathProvider(props){const{members}=props;const firstAssistedPath=useMemo(()=>{const firstAssisted=members.find(member=>member.kind==="field"&&isAssistSupported(member.field.schemaType));return(firstAssisted==null?void 0:firstAssisted.field.path)?pathToString(firstAssisted==null?void 0:firstAssisted.field.path):void 0;},[members]);return/* @__PURE__ */jsx(FirstAssistedPathContext.Provider,{value:firstAssistedPath,children:props.children});}function AssistFeatureBadge(){return/* @__PURE__ */jsx(Badge,{fontSize:0,style:{margin:"-2px 0"},tone:"primary",children:"Beta"});}function FieldActionsOnboarding(props){const{path,children}=props;const firstAssistedPath=useContext(FirstAssistedPathContext);const isFirstAssisted=useMemo(()=>pathToString(path)===firstAssistedPath,[path,firstAssistedPath]);if(!isFirstAssisted){return/* @__PURE__ */jsx(Fragment,{children});}return/* @__PURE__ */jsx(AssistOnboardingPopover,{...props});}function AssistOnboardingPopover(props){const{showOnboarding,dismissOnboarding}=useOnboardingFeature(fieldOnboardingKey);if(!showOnboarding){return/* @__PURE__ */jsx(Fragment,{children:props.children});}return/* @__PURE__ */jsx(Popover,{content:/* @__PURE__ */jsx(AssistIntroCard,{path:props.path,dismiss:dismissOnboarding}),open:true,portal:true,placeholder:"bottom",tone:"default",width:0,children:/* @__PURE__ */jsx("div",{children:/* @__PURE__ */jsx(Button,{disabled:true,fontSize:1,icon:SparklesIcon,mode:"ghost",padding:2})})});}function AssistIntroCard(props){const buttonRef=useRef(null);return/* @__PURE__ */jsxs(Stack,{as:"section",padding:3,space:3,children:[/* @__PURE__ */jsxs(Stack,{padding:2,space:4,children:[/* @__PURE__ */jsxs(Flex,{gap:2,align:"center",children:[/* @__PURE__ */jsx(Text,{as:"h1",size:1,weight:"semibold",children:pluginTitle}),/* @__PURE__ */jsx("div",{"aria-hidden":true,style:{margin:"-3px 0",lineHeight:0},children:/* @__PURE__ */jsx(AssistFeatureBadge,{})})]}),/* @__PURE__ */jsx(Stack,{space:3,children:/* @__PURE__ */jsxs(Text,{as:"p",muted:true,size:1,children:["Manage reusable AI instructions to boost your content creation and reduce amount of repetitive chores."," ",/* @__PURE__ */jsxs("a",{href:releaseAnnouncementUrl,target:"_blank",rel:"noreferrer",children:["Learn more ",/* @__PURE__ */jsx(ArrowRightIcon,{})]})]})})]}),/* @__PURE__ */jsx(Button,{fontSize:1,icon:CheckmarkIcon,onClick:props.dismiss,padding:3,ref:buttonRef,text:"Ok, good to know!",tone:"primary"})]});}function AssistFieldWrapper(props){const{schemaType}=props;const isSupported=useMemo(()=>isAssistSupported(schemaType),[schemaType]);if(!isSupported||schemaType.name.startsWith("sanity.")||schemaType.name===contextDocumentTypeName){return props.renderDefault(props);}if(!isType(props.schemaType,"document")&&props.inputId!=="root"){return/* @__PURE__ */jsx(AssistField,{...props,children:props.children});}return props.renderDefault(props);}function AssistField(props){const isPortableText=useMemo(()=>!!(isArraySchemaType(props.schemaType)&&isPortableTextArray(props.schemaType)),[props.schemaType]);const presence=useAssistPresence(props.path,isPortableText);const actions=/* @__PURE__ */jsxs(Flex,{gap:2,align:"center",justify:"space-between",children:[presence.map(pre=>/* @__PURE__ */jsx(Box,{children:/* @__PURE__ */jsx(AiFieldPresence,{presence:pre},pre.lastActiveAt)},pre.user.id)),/* @__PURE__ */jsx(FieldActionsOnboarding,{...props,children:props.actions})]});return props.renderDefault({...props,actions});}const ConnectorsStoreContext=createContext(null);function useConnectorsStore(){const store=useContext(ConnectorsStoreContext);if(!store){throw new Error("Missing connectors store context");}return store;}function hasOverflowScroll(el){const overflow=getComputedStyle(el).overflow;return overflow.includes("auto")||overflow.includes("hidden")||overflow.includes("scroll");}function useRegionRects(){const ref=useRef(null);const[relativeBoundsRect,setRelativeBoundsRect]=useState(null);const[relativeElementRect,setRelativeElementRect]=useState(null);const[boundsScroll,setBoundsScroll]=useState({x:0,y:0});const[scroll,setScroll]=useState({x:0,y:0});const boundsScrollXRef=useRef(0);const boundsScrollYRef=useRef(0);const elementScrollXRef=useRef(0);const elementScrollYRef=useRef(0);useEffect(()=>{const el=ref.current;if(!el)return void 0;const scrollParents=[];let parent=el.parentElement;while(parent&&parent!==document.body){if(hasOverflowScroll(parent)){scrollParents.push(parent);}parent=parent.parentElement;}function handleResize(){const scrollParent=scrollParents[0];const boundsRect=(scrollParent==null?void 0:scrollParent.getBoundingClientRect())||{x:0,y:0,width:window.innerWidth,height:window.innerHeight};const domRect=el.getBoundingClientRect();setRelativeBoundsRect({x:boundsRect.x+boundsScrollXRef.current,y:boundsRect.y+boundsScrollYRef.current,w:boundsRect.width,h:boundsRect.height});setRelativeElementRect({x:domRect.x+elementScrollXRef.current,y:domRect.y+elementScrollYRef.current,w:domRect.width,h:domRect.height});}function handleScroll(){let scrollX=window.scrollX;let scrollY=window.scrollY;for(const scrollParent2 of scrollParents){scrollX+=scrollParent2.scrollLeft;scrollY+=scrollParent2.scrollTop;}const scrollParent=scrollParents[0];boundsScrollXRef.current=scrollX-((scrollParent==null?void 0:scrollParent.scrollLeft)||window.scrollX);boundsScrollYRef.current=scrollY-((scrollParent==null?void 0:scrollParent.scrollTop)||window.scrollY);setBoundsScroll({x:boundsScrollXRef.current,y:boundsScrollYRef.current});elementScrollXRef.current=scrollX;elementScrollYRef.current=scrollY;setScroll({x:scrollX,y:scrollY});}window.addEventListener("scroll",handleScroll,{passive:true});const ro=new ResizeObserver(handleResize);ro.observe(el);for(const scrollParent of scrollParents){scrollParent.addEventListener("scroll",handleScroll,{passive:true});ro.observe(scrollParent);}handleScroll();return()=>{ro.unobserve(el);for(const scrollParent of scrollParents){ro.unobserve(scrollParent);scrollParent.removeEventListener("scroll",handleScroll);}ro.disconnect();window.removeEventListener("scroll",handleScroll);};},[]);const bounds=useMemo(()=>relativeBoundsRect&&{x:relativeBoundsRect.x-boundsScroll.x,y:relativeBoundsRect.y-boundsScroll.y,w:relativeBoundsRect.w,h:relativeBoundsRect.h},[relativeBoundsRect,boundsScroll]);const element=useMemo(()=>relativeElementRect&&{x:relativeElementRect.x-scroll.x,y:relativeElementRect.y-scroll.y,w:relativeElementRect.w,h:relativeElementRect.h},[relativeElementRect,scroll]);return{bounds,element,ref};}function ConnectorRegion(props){const{children,onRectsChange,...restProps}=props;const{bounds,element,ref}=useRegionRects();useEffect(()=>{onRectsChange==null?void 0:onRectsChange(bounds&&element?{bounds,element}:null);},[bounds,element,onRectsChange]);return/* @__PURE__ */jsx("div",{...restProps,ref,children});}function ConnectFromRegion(props){const{children,_key:key,zIndex,...restProps}=props;const store=useConnectorsStore();const[rects,setRects]=useState(null);useEffect(()=>store.from.subscribe(key,{zIndex}),[key,store,zIndex]);useEffect(()=>{if(rects)store.from.next(key,rects);},[key,rects,store]);return/* @__PURE__ */jsx(ConnectorRegion,{...restProps,onRectsChange:setRects,children});}function createConnectorsStore(){const configKeys=[];const fieldKeys=[];const channels={from:/* @__PURE__ */new Map(),to:/* @__PURE__ */new Map()};const payloads={from:/* @__PURE__ */new Map(),to:/* @__PURE__ */new Map()};const observers=[];function notifyObservers(){const connectors=[];for(const key of configKeys){const toRects=channels.to.get(key);const toPayload=payloads.from.get(key);const fromRects=channels.from.get(key);const fromPayload=payloads.from.get(key);if(toRects&&fromRects){connectors.push({key,from:{...fromRects,payload:fromPayload},to:{...toRects,payload:toPayload}});}}for(const observer of observers){observer(connectors);}}return{to:{subscribe(key,payload){channels.to.set(key,null);payloads.to.set(key,payload);configKeys.push(key);return()=>{channels.to.delete(key);payloads.to.delete(key);const idx=configKeys.indexOf(key);if(idx>-1)configKeys.splice(idx,1);notifyObservers();};},next(key,rects){channels.to.set(key,rects);if(fieldKeys.includes(key))notifyObservers();}},connectors:{subscribe(observer){observers.push(observer);return()=>{const idx=observers.indexOf(observer);if(idx>-1)observers.splice(idx,1);};}},from:{subscribe(key,payload){channels.from.set(key,null);payloads.from.set(key,payload);fieldKeys.push(key);return()=>{channels.from.delete(key);payloads.from.delete(key);const idx=fieldKeys.indexOf(key);if(idx>-1)fieldKeys.splice(idx,1);notifyObservers();};},next(key,rects){channels.from.set(key,rects);if(configKeys.includes(key))notifyObservers();}}};}function ConnectorsProvider(props){const{children,onConnectorsChange}=props;const store=useMemo(()=>createConnectorsStore(),[]);useEffect(()=>onConnectorsChange&&store.connectors.subscribe(onConnectorsChange),[onConnectorsChange,store]);return/* @__PURE__ */jsx(ConnectorsStoreContext.Provider,{value:store,children});}function getConnectorLinePoint(options,rect,bounds){const centerY=rect.y+rect.h/2;const isAbove=rect.y+rect.h<bounds.y+options.arrow.marginY;const isBelow=rect.y>bounds.y+bounds.h-options.arrow.marginY;return{bounds,x:rect.x,y:centerY,centerY,startY:rect.y+options.path.marginY,endY:rect.y+rect.h-options.path.marginY,isAbove,isBelow,outOfBounds:isAbove||isBelow};}function mapConnectorToLine(options,connector){const fromBounds={y:connector.from.bounds.y+options.arrow.threshold,// bottom: connector.from.bounds.y + connector.from.bounds.h - options.arrow.threshold,
+x:connector.from.bounds.x,// right: connector.from.bounds.x + connector.from.bounds.w,
+w:connector.from.bounds.w,h:connector.from.bounds.h-options.arrow.threshold*2};const from=getConnectorLinePoint(options,connector.from.element,fromBounds);from.x=connector.from.element.x+connector.from.element.w;const fromBottom=fromBounds.y+fromBounds.h;const toBounds={y:connector.to.bounds.y+options.arrow.threshold,// bottom: connector.to.bounds.y + connector.to.bounds.h - options.arrow.threshold,
+x:connector.to.bounds.x,// right: connector.to.bounds.x + connector.to.bounds.w,
+w:connector.to.bounds.w,h:connector.to.bounds.h-options.arrow.threshold*2};const toBottom=toBounds.y+toBounds.h;const to=getConnectorLinePoint(options,connector.to.element,toBounds);const maxStartY=Math.max(to.startY,from.startY);from.y=Math.min(maxStartY,from.endY);if(from.y<toBounds.y){from.y=Math.min(toBounds.y,from.endY);}else if(from.y>toBottom){from.y=Math.max(toBottom,from.startY);}to.y=Math.min(maxStartY,to.endY);if(to.y<fromBounds.y){to.y=Math.min(fromBounds.y,to.endY);}else if(to.y>fromBottom){to.y=Math.max(fromBottom,to.startY);}from.y=Math.min(Math.max(from.y,fromBounds.y),fromBottom);to.y=Math.min(Math.max(to.y,toBounds.y),toBottom);return{from,to};}function arrowPath(options,x,y,dir){return["M ".concat(x-options.arrow.size," ").concat(y-options.arrow.size*dir," "),"L ".concat(x," ").concat(y),"L ".concat(x+options.arrow.size," ").concat(y-options.arrow.size*dir)].join("");}function moveTo(x,y){return"M".concat(x," ").concat(y);}function lineTo(x,y){return"L".concat(x," ").concat(y);}function join(strings){let delim=arguments.length>1&&arguments[1]!==undefined?arguments[1]:"";return strings.join(delim);}function quadCurve(x1,y1,x,y){return"Q".concat(x1," ").concat(y1," ").concat(x," ").concat(y);}function drawConnectorPath(options,line){const{cornerRadius}=options.path;const{from,to}=line;const{x:fromX,y:fromY}=from;const{x:_toX,y:toY}=to;const toX=_toX-1;const dividerX=to.bounds.x+options.divider.offsetX;const fromPathX=from.isAbove||from.isBelow?fromX+options.arrow.marginX:fromX;const r0=Math.min(cornerRadius,Math.abs(fromPathX-dividerX)/2);const r1=Math.min(cornerRadius,Math.abs(fromY-toY)/2);const cmds=[];if(from.isAbove){cmds.push(moveTo(fromX+options.arrow.marginX,fromY-options.arrow.threshold+options.arrow.marginY),lineTo(fromX+options.arrow.marginX,fromY-r0),quadCurve(fromX+options.arrow.marginX,fromY,fromX+options.arrow.marginX+r0,fromY));}else if(from.isBelow){cmds.push(moveTo(fromX+options.arrow.marginX,fromY+options.arrow.threshold-options.arrow.marginY),lineTo(fromX+options.arrow.marginX,fromY+r0),quadCurve(fromX+options.arrow.marginX,fromY,fromX+options.arrow.marginX+r0,fromY));}else{cmds.push(moveTo(fromX,fromY));}if(to.isAbove){if(fromY<to.bounds.y){cmds.push(lineTo(dividerX-r1,fromY),quadCurve(dividerX,fromY,dividerX,fromY+r1),lineTo(dividerX,toY-r1),quadCurve(dividerX,toY,dividerX+r1,toY),lineTo(dividerX-cornerRadius,toY),quadCurve(dividerX,toY,dividerX,toY-cornerRadius),lineTo(dividerX,toY-options.arrow.threshold+options.arrow.marginY));}else{cmds.push(lineTo(dividerX-cornerRadius,fromY),quadCurve(dividerX,fromY,dividerX,fromY-cornerRadius),lineTo(dividerX,toY-options.arrow.threshold+options.arrow.marginY));}}else if(to.isBelow){if(fromY>to.bounds.y+to.bounds.h){cmds.push(lineTo(dividerX-options.arrow.marginX-r1,fromY),quadCurve(dividerX-options.arrow.marginX,fromY,dividerX-options.arrow.marginX,fromY-r1),lineTo(dividerX-options.arrow.marginX,toY+r1),quadCurve(dividerX-options.arrow.marginX,toY,dividerX-options.arrow.marginX+r1,toY),lineTo(dividerX-cornerRadius,toY),quadCurve(dividerX,toY,dividerX,toY+cornerRadius),lineTo(dividerX,toY+options.arrow.threshold-options.arrow.marginY));}else{cmds.push(lineTo(dividerX-cornerRadius,fromY),quadCurve(dividerX,fromY,dividerX,fromY+cornerRadius),lineTo(dividerX,toY+options.arrow.threshold-options.arrow.marginY));}}else if(fromY<toY){cmds.push(lineTo(dividerX-r0,fromY),quadCurve(dividerX,fromY,dividerX,fromY+r1),lineTo(dividerX,toY-r1),quadCurve(dividerX,toY,dividerX+r1,toY),lineTo(toX,toY));}else{cmds.push(lineTo(dividerX-Math.min(r0,r1),fromY),quadCurve(dividerX,fromY,dividerX,fromY-Math.min(r0,r1)),lineTo(dividerX,toY+r1),quadCurve(dividerX,toY,dividerX+r1,toY),lineTo(toX,toY));}return join(cmds);}function ConnectorPath(props){const{from,options,to}=props;const{strokeWidth}=options.path;const theme=useTheme();const line=useMemo(()=>mapConnectorToLine(options,{from,to}),[from,options,to]);return/* @__PURE__ */jsxs(Fragment,{children:[/* @__PURE__ */jsx("path",{d:drawConnectorPath(options,line),stroke:theme.sanity.color.base.bg,strokeWidth:strokeWidth+4}),/* @__PURE__ */jsx("path",{d:drawConnectorPath(options,line),stroke:rgba$1(theme.sanity.color.base.border,0.5),strokeWidth}),line.from.isAbove&&/* @__PURE__ */jsx("path",{d:arrowPath(options,line.from.x+options.arrow.marginX,line.from.bounds.y-options.arrow.threshold+options.arrow.marginY,-1),stroke:theme.sanity.color.base.border,strokeWidth}),line.from.isBelow&&/* @__PURE__ */jsx("path",{d:arrowPath(options,line.from.x+options.arrow.marginX,line.from.bounds.y+line.from.bounds.h+options.arrow.threshold-options.arrow.marginY,1),stroke:theme.sanity.color.base.border,strokeWidth})]});}const DEBUG=false;const options={arrow:{marginX:10.5,marginY:5,size:4,threshold:16.5},divider:{offsetX:-10.5},path:{cornerRadius:3,marginY:10.5,strokeWidth:1}};function AssistConnectorsOverlay(props){const{connectors}=props;const[,setRedraw]=useState(false);useEffect(()=>{setRedraw(true);},[]);return/* @__PURE__ */jsxs(Fragment,{children:[/* @__PURE__ */jsx("svg",{fill:"none",width:window.innerWidth,height:window.innerHeight,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",zIndex:150// zIndex,
+},children:connectors.map(connector=>/* @__PURE__ */jsx(ConnectorPath,{from:connector.from,options,to:connector.to},connector.key))}),DEBUG]});}const legacyAssistDocumentIdPrefix="sanity.ai.";const legacyAssistDocumentTypeName="sanity.ai.docType";const legacyContextDocumentTypeName="ai.instruction.context";const legacyAssistStatusDocumentTypeName="sanity.ai.instructionStatus";const NO_ASSIST_DOCS=[];const NO_CONTEXT_DOCS=[];const NO_IDS=[];function AlphaMigration(){const[alphaAssistDocs,setAlphaAssistDocs]=useState(NO_ASSIST_DOCS);const[contextDocs,setContextDocs]=useState(NO_CONTEXT_DOCS);const[staleStatusDocIds,setStaleStatusDocs]=useState(NO_IDS);const[error,setError]=useState(void 0);const[progress,setProgress]=useState(void 0);const toast=useToast();const client=useClient({apiVersion:"2023-06-01"});useEffect(()=>{let canUpdate=true;client.fetch("\n    {\n      \"assistDocs\": *[_type==\"".concat(legacyAssistDocumentTypeName,"\"],\n      \"staleStatusDocIds\": *[_type==\"").concat(legacyAssistStatusDocumentTypeName,"\"]._id,\n      \"contextDocs\": *[_type==\"").concat(legacyContextDocumentTypeName,"\"],\n     }\n    ")).then(result=>{var _a,_b,_c;if(!canUpdate||!result){return;}setAlphaAssistDocs((_a=result==null?void 0:result.assistDocs)!=null?_a:NO_ASSIST_DOCS);setStaleStatusDocs((_b=result==null?void 0:result.staleStatusDocIds)!=null?_b:NO_IDS);setContextDocs((_c=result==null?void 0:result.contextDocs)!=null?_c:NO_CONTEXT_DOCS);});return()=>{canUpdate=false;};},[client,setAlphaAssistDocs,setStaleStatusDocs,setContextDocs]);const convert=useCallback(async()=>{try{setProgress(1e-4);const tasks=[()=>convertContextDocs(client,contextDocs),subtaskProgress=>deleteDocs(client,staleStatusDocIds,subtaskProgress),subtaskProgress=>convertDocs(client,alphaAssistDocs,subtaskProgress),subtaskProgress=>deleteDocs(client,contextDocs.map(d=>d._id),subtaskProgress)];const taskSize=1/tasks.length;for(let i=0;i<tasks.length;i++){const startProgress=i/tasks.length;await tasks[i](subProgress=>setProgress(startProgress+subProgress*taskSize));setProgress((i+1)/tasks.length);}setProgress(1);setAlphaAssistDocs(NO_ASSIST_DOCS);setContextDocs(NO_CONTEXT_DOCS);setStaleStatusDocs(NO_IDS);toast.push({title:"Converted instructions to new format.",status:"success",description:"Pending feature name",closable:true});}catch(e){console.error(e);toast.push({title:"An error occured",status:"error",closable:true});setError(e);setProgress(void 0);}},[contextDocs,client,alphaAssistDocs,staleStatusDocIds,setProgress,toast]);if((alphaAssistDocs.length||staleStatusDocIds.length||contextDocs.length)&&(!progress||progress<1)){return/* @__PURE__ */jsx(Dialog,{id:"outdated-assist-docs",header:pluginTitle,children:/* @__PURE__ */jsx(Card,{padding:3,children:/* @__PURE__ */jsxs(Stack,{space:4,style:{maxWidth:500},children:[/* @__PURE__ */jsxs(Text,{size:1,children:["It seems like this workspace contains documents from an"," ",/* @__PURE__ */jsxs("strong",{children:["older version of ",pluginTitle]}),"."]}),/* @__PURE__ */jsx(Text,{size:1,children:"Cleanup is required."}),error?/* @__PURE__ */jsxs(Card,{padding:2,tone:"critical",border:true,children:[/* @__PURE__ */jsx(Text,{size:1,children:"An error occurred. See console for details."})," "]}):null,/* @__PURE__ */jsx(Button,{icon:progress?/* @__PURE__ */jsx(Box,{style:{marginTop:5},children:/* @__PURE__ */jsx(Spinner,{})}):CheckmarkIcon,disabled:!!progress,text:progress?"".concat(Math.floor(progress*100),"%"):"Ok, convert to new format!",tone:"primary",onClick:convert})]})})});}return null;}async function deleteDocs(client,ids,updateProgress){const chunkSize=50;for(let i=0;i<ids.length;i+=chunkSize){const progressCount=Math.min(ids.length,i+chunkSize);const chunk=ids.slice(i,progressCount);const trans=client.transaction();chunk.forEach(id=>trans.delete(id));await trans.commit();updateProgress(progressCount/ids.length);}}async function convertContextDocs(client,docs){const trans=client.transaction();for(const doc of docs){const{_id,_type,...rest}=doc;trans.createOrReplace({...rest,_id:"port.".concat(_id),_alphaId:_id,_type:contextDocumentTypeName});}await trans.commit();}async function convertDocs(client,docs,updateProgress){const chunkSize=10;for(let i=0;i<docs.length;i+=chunkSize){const progressCount=Math.min(docs.length,i+chunkSize);const chunk=docs.slice(i,progressCount);const trans=client.transaction();const contextDocs=await client.fetch("*[_type==\"".concat(contextDocumentTypeName,"\" && _alphaId != null]{_id, _alphaId}"));chunk.forEach(oldDoc=>{var _a;const documentType=oldDoc._id.replace(new RegExp("^(".concat(legacyAssistDocumentIdPrefix,"|").concat(assistDocumentIdPrefix,")")),"");const id=assistDocumentId(documentType);const fields=((_a=oldDoc.fields)!=null?_a:[]).filter(field=>{var _a2;return(_a2=field.instructions)==null?void 0:_a2.length;}).map(oldField=>{var _a2;const instructions=((_a2=oldField.instructions)!=null?_a2:[]).map(inst=>{var _a3;const prompt=((_a3=inst.prompt)!=null?_a3:[]).map(block=>{return mapBlock(block,contextDocs);});return{...inst,_type:instructionTypeName,prompt};});return{...oldField,_type:assistFieldTypeName,instructions};});if(fields.length){trans.createOrReplace({_id:id,_type:assistDocumentTypeName,fields});}trans.delete(oldDoc._id);});await trans.commit();updateProgress(progressCount/docs.length);}}function isFieldRef(block){return block._type==="sanity.ai.prompt.fieldRef";}function isContext(block){return block._type==="sanity.ai.prompt.context";}function isUserInput(block){return block._type==="sanity.ai.prompt.userInput";}function isSpan(block){return block._type==="span";}function mapBlock(block,migratedContexts){var _a,_b,_c,_d;if(isFieldRef(block)){return{...block,_type:fieldReferenceTypeName};}if(isUserInput(block)){return{...block,_type:userInputTypeName};}if(isContext(block)){const newBlock={...block,_type:instructionContextTypeName,reference:{_type:"reference",_ref:(_c=(_a=migratedContexts.find(c=>{var _a2;return c._alphaId===((_a2=block.reference)==null?void 0:_a2._ref);}))==null?void 0:_a._id)!=null?_c:(_b=block.reference)==null?void 0:_b._ref}};return newBlock;}if(isSpan(block)){return block;}const textBlock=block;return{...textBlock,children:((_d=textBlock.children)!=null?_d:[]).map(child=>mapBlock(child,migratedContexts))};}function AssistLayout(props){var _a;const[connectors,setConnectors]=useState([]);const migrate=(_a=props.config.alphaMigration)!=null?_a:true;return/* @__PURE__ */jsxs(AiAssistanceConfigProvider,{config:props.config,children:[migrate?/* @__PURE__ */jsx(AlphaMigration,{}):null,/* @__PURE__ */jsx(RunInstructionProvider,{children:/* @__PURE__ */jsxs(ConnectorsProvider,{onConnectorsChange:setConnectors,children:[props.renderDefault(props),/* @__PURE__ */jsx(ThemeProvider,{tone:"default",children:/* @__PURE__ */jsx(AssistConnectorsOverlay,{connectors})})]})})]});}const WrapPreCard=styled(Card)(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\n  & pre {\n    white-space: pre-wrap !important;\n  }\n"])));function SafeValueInput(props){return/* @__PURE__ */jsx(ErrorWrapper,{onChange:props.onChange,children:/* @__PURE__ */jsx(PteValueFixer,{...props})});}function ErrorWrapper(props){const{onChange}=props;const[error,setError]=useState();const catchError=useCallback(params=>{setError(params.error);},[setError]);const unsetValue=useCallback(()=>onChange(PatchEvent.from(unset())),[onChange]);const dismiss=useCallback(()=>setError(void 0),[]);const catcher=/* @__PURE__ */jsx(ErrorBoundary,{onCatch:catchError,children:props.children});return error?/* @__PURE__ */jsx(Card,{border:true,tone:"critical",padding:2,contentEditable:false,children:/* @__PURE__ */jsxs(Stack,{space:3,children:[/* @__PURE__ */jsx(Text,{muted:true,weight:"semibold",children:"An error occurred."}),/* @__PURE__ */jsx(WrapPreCard,{flex:1,padding:2,tone:"critical",border:true,children:catcher}),/* @__PURE__ */jsxs(Flex,{width:"fill",flex:1,gap:3,children:[/* @__PURE__ */jsx(Box,{flex:1,children:/* @__PURE__ */jsx(Button,{text:"Dismiss",onClick:dismiss,tone:"primary"})}),/* @__PURE__ */jsx(Button,{text:"Unset value",onClick:unsetValue,tone:"critical"})]})]})}):catcher;}function PteValueFixer(props){const isPortableText=useMemo(()=>isArraySchemaType(props.schemaType)&&isPortableTextArray(props.schemaType),[props.schemaType]);const value=props.value;if(isPortableText&&value&&!value.length){return props.renderDefault({...props,value:void 0});}return props.renderDefault(props);}function AssistFormBlock(props){const presence=useAssistPresence(props.path,true);const{onChange}=useFormCallbacks();const key=props.value._key;const localOnChange=useCallback(patchEvent=>{if(!key){return;}onChange(PatchEvent.from(patchEvent).prefixAll({_key:key}));},[onChange,key]);return/* @__PURE__ */jsx(ErrorWrapper,{onChange:localOnChange,children:/* @__PURE__ */jsxs(Flex,{align:"center",justify:"space-between",children:[/* @__PURE__ */jsx(Box,{flex:1,children:props.renderDefault(props)}),presence.map(pre=>/* @__PURE__ */jsx(AiFieldPresence,{presence:pre},pre.lastActiveAt))]})});}function AssistItem(props){const{path}=props;const presence=useAssistPresence(path,true);return/* @__PURE__ */jsxs(Flex,{align:"center",width:"fill",style:{position:"relative"},children:[/* @__PURE__ */jsx(Box,{flex:1,children:props.renderDefault({...props})}),presence.map(pre=>/* @__PURE__ */jsx(Box,{style:{position:"absolute",right:35},children:/* @__PURE__ */jsx(AiFieldPresence,{presence:pre})},pre.user.id))]});}function BackToInstructionListLink(){const{openInspector}=useDocumentPane();const goBack=useCallback(()=>openInspector(aiInspectorId,{[instructionParam]:void 0}),[openInspector]);return/* @__PURE__ */jsx("div",{children:/* @__PURE__ */jsx(Button,{as:"a",fontSize:1,icon:ArrowLeftIcon,mode:"bleed",padding:1,space:2,onClick:goBack,text:"  Instructions",textAlign:"left"})});}const EMPTY_FIELDS=[];function AssistDocumentForm(props){const{onChange}=props;const value=props.value;const id=value==null?void 0:value._id;const fields=value==null?void 0:value.fields;const targetDocumentType=useMemo(()=>{if(!id){return void 0;}return documentTypeFromAiDocumentId(id);},[id]);const{params,setParams}=useAiPaneRouter();const pathKey=params[fieldPathParam];const instruction=params[instructionParam];const activeKey=useMemo(()=>{var _a;return(_a=(fields!=null?fields:EMPTY_FIELDS).find(f=>f.path===pathKey))==null?void 0:_a._key;},[fields,pathKey]);const activePath=useMemo(()=>{if(!activeKey){return void 0;}const base=["fields",{_key:activeKey}];return instruction?[...base,"instructions",{_key:instruction}]:base;},[activeKey,instruction]);const schema=useSchema();const documentSchema=useMemo(()=>{if(!targetDocumentType){return void 0;}return schema.get(targetDocumentType);},[schema,targetDocumentType]);const fieldSchema=useSelectedSchema(pathKey,documentSchema);const context=useMemo(()=>({documentSchema,fieldSchema:fieldSchema!=null?fieldSchema:documentSchema}),[fieldSchema,documentSchema]);const title=value==null?void 0:value.title;useEffect(()=>{var _a;if(!title&&documentSchema&&!(id==null?void 0:id.startsWith("drafts."))){onChange(set((_a=documentSchema.title)!=null?_a:documentSchema.name,["title"]));}},[title,documentSchema,onChange,id]);useEffect(()=>{if(activePath||!pathKey){return;}onChange([setIfMissing([],["fields"]),insert([typed({_key:pathKey,_type:assistFieldTypeName,path:pathKey})],"after",["fields",-1])]);},[activePath,onChange,pathKey]);const{onPathOpen,...formCallbacks}=useFormCallbacks();const newCallbacks=useMemo(()=>({...formCallbacks,onPathOpen:path=>{var _a;if(!instruction&&path.length===4&&path[2]==="instructions"){setParams(typed({...params,[instructionParam]:(_a=path[3])==null?void 0:_a._key}));onPathOpen([]);}else{setTimeout(()=>onPathOpen(path),0);}}}),[formCallbacks,onPathOpen,params,setParams,instruction]);useEffect(()=>{if(activePath&&!instruction){onPathOpen([]);}},[activePath,instruction,onPathOpen]);return/* @__PURE__ */jsx(SelectedFieldContextProvider,{value:context,children:/* @__PURE__ */jsxs(Stack,{space:5,children:[instruction&&/* @__PURE__ */jsx(BackToInstructionListLink,{}),activePath&&/* @__PURE__ */jsx(FormCallbacksProvider,{...newCallbacks,children:/* @__PURE__ */jsx("div",{style:{lineHeight:"1.25em"},children:/* @__PURE__ */jsx(FormInput,{...props,absolutePath:activePath})})}),!activePath&&props.renderDefault(props)]})});}function useSelectedSchema(fieldPath,documentSchema){return useMemo(()=>{if(!fieldPath){return void 0;}if(fieldPath===documentRootKey){return documentSchema;}const path=stringToPath(fieldPath);let currentSchema=documentSchema;for(let i=0;i<path.length;i++){const segment=path[i];const field=currentSchema==null?void 0:currentSchema.fields.find(f=>f.name===segment);if(!field){return void 0;}if(i===path.length-1){return field.type;}if(field.type.jsonType!=="object"){return void 0;}currentSchema=field.type;}return currentSchema;},[documentSchema,fieldPath]);}function findFieldMember(members,fieldName){return members.find(m=>m.kind==="field"&&m.name===fieldName||m.kind==="error"&&m.fieldName===fieldName);}function findFieldsetMember(members,fieldsetName){return members.find(m=>m.kind==="fieldSet"&&m.fieldSet.name===fieldsetName);}function InstructionInput(props){return/* @__PURE__ */jsxs(Stack,{space:[4,4,4,5],children:[/* @__PURE__ */jsx(NameField,{...props}),/* @__PURE__ */jsx(ShareField,{...props}),/* @__PURE__ */jsx(PromptField,{...props})]});}function PromptField(props){const promptMember=findFieldMember(props.members,"prompt");return promptMember?/* @__PURE__ */jsx(ObjectInputMember,{...props,member:promptMember}):null;}const NONE=[];function NameField(props){var _a;const fieldsetMember=findFieldsetMember(props.members,"appearance");const titleId=useId();const members=(_a=fieldsetMember==null?void 0:fieldsetMember.fieldSet.members)!=null?_a:NONE;const iconMember=findFieldMember(members,"icon");const titleMember=findFieldMember(members,"title");const titlePlaceholder="Untitled";const moddedTitleMember=useMemo(()=>{if(!titleMember){return void 0;}if(titleMember.kind==="error"){return titleMember;}return{...titleMember,field:{...(titleMember==null?void 0:titleMember.field),schemaType:{...(titleMember==null?void 0:titleMember.field.schemaType),placeholder:titlePlaceholder}}};},[titleMember,titlePlaceholder]);return/* @__PURE__ */jsx(Stack,{space:5,children:/* @__PURE__ */jsxs(Stack,{space:2,children:[/* @__PURE__ */jsx(Flex,{gap:1,children:/* @__PURE__ */jsx(Text,{as:"label",weight:"semibold",size:1,htmlFor:titleId,children:"Name"})}),/* @__PURE__ */jsx(Text,{muted:true,size:1,children:"How this instruction appears in menus"}),/* @__PURE__ */jsxs(Flex,{align:"center",children:[iconMember&&/* @__PURE__ */jsx(Box,{flex:"none",children:/* @__PURE__ */jsx(ObjectInputMember,{...props,member:iconMember})}),moddedTitleMember&&/* @__PURE__ */jsx(Box,{flex:1,style:{marginLeft:-1},children:/* @__PURE__ */jsx(ObjectInputMember,{...props,member:moddedTitleMember})})]})]})});}function ShareField(props){var _a;const fieldsetMember=findFieldsetMember(props.members,"appearance");const members=(_a=fieldsetMember==null?void 0:fieldsetMember.fieldSet.members)!=null?_a:NONE;const visibilityMember=findFieldMember(members,"userId");return/* @__PURE__ */jsx(Fragment,{children:visibilityMember&&/* @__PURE__ */jsx(ObjectInputMember,{...props,member:visibilityMember})});}function HiddenFieldTitle(props){return props.renderDefault({...props,title:"",level:props.level-2,changed:false});}function InstructionVisibility(props){const{value,onChange}=props;const user=useCurrentUser();const handleChange=useCallback(()=>{var _a;const newValue=value?"":(_a=user==null?void 0:user.id)!=null?_a:"";onChange(newValue?set(newValue):unset());},[onChange,user,value]);const id=useId();return/* @__PURE__ */jsx(Card,{children:/* @__PURE__ */jsxs(Flex,{gap:2,align:"flex-start",children:[/* @__PURE__ */jsx("div",{style:{margin:"-3px 0"},children:/* @__PURE__ */jsx(Switch,{...props.elementProps,id,value:"".concat(!value),checked:!value,onChange:handleChange,disabled:props.elementProps.readOnly})}),/* @__PURE__ */jsx(Text,{muted:true,size:1,weight:"medium",children:/* @__PURE__ */jsx("label",{htmlFor:id,children:"Make visible to all Studio members"})})]})});}function IconInput(props){const{value,onChange}=props;const id=useId();const items=useMemo(()=>Object.entries(icons).map(_ref74=>{let[key,icon]=_ref74;return/* @__PURE__ */jsx(IconItem,{iconKey:key,icon,onChange},key);}),[onChange]);const selectedIcon=useMemo(()=>getIcon(value),[value]);return/* @__PURE__ */jsx(MenuButton,{button:/* @__PURE__ */jsx(Button,{icon:selectedIcon,title:"Select icon",padding:3,mode:"ghost",radius:1}),id,menu:/* @__PURE__ */jsx(Menu,{style:{maxHeight:300},children:items}),popover:{portal:true}});}function IconItem(_ref75){let{icon,iconKey:key,onChange}=_ref75;const onClick=useCallback(()=>onChange(set(key)),[onChange,key]);return/* @__PURE__ */jsx(MenuItem,{icon,title:key,text:key,onClick});}function getIcon(iconName){var _a,_b;return(_b=(_a=Object.entries(icons).find(_ref76=>{let[key]=_ref76;return key===iconName;}))==null?void 0:_a[1])!=null?_b:icons.sparkles;}function FieldAutocomplete(props){const{id,schemaType,fieldPath,onSelect,includeDocument}=props;const fieldNames=useMemo(()=>{if(includeDocument){return getFieldRefsWithDocument(schemaType);}return getFieldRefs(schemaType);},[schemaType,includeDocument]);const currentField=useMemo(()=>fieldNames.find(f=>f.key===fieldPath),[fieldPath,fieldNames]);const autocompleteOptions=useMemo(()=>fieldNames.map(field=>({value:field.key,field})),[fieldNames]);const renderOption=useCallback(option=>{const{value,field}=option;if(!value){return/* @__PURE__ */jsx(Card,{as:"button",padding:3,radius:1,children:/* @__PURE__ */jsx(Text,{accent:true,size:1,children:option.value})});}if(isType(field.schemaType,"document")){return/* @__PURE__ */jsx(Card,{as:"button",padding:3,radius:1,children:/* @__PURE__ */jsx(Text,{size:1,weight:"semibold",children:"The entire document"})});}const splitTitle=field.title.split("/");return/* @__PURE__ */jsx(Card,{as:"button",padding:3,radius:1,children:/* @__PURE__ */jsxs(Flex,{gap:3,children:[/* @__PURE__ */jsx(Text,{size:1,children:createElement(field.icon)}),/* @__PURE__ */jsx(Box,{flex:"none",children:/* @__PURE__ */jsxs(Breadcrumbs,{separator:/* @__PURE__ */jsx(Text,{muted:true,size:1,children:"/"}),space:1,children:[splitTitle.slice(0,splitTitle.length-1).map((pt,i)=>// eslint-disable-next-line react/no-array-index-key
+/* @__PURE__ */jsx(Text,{muted:true,size:1,children:pt.trim()},i)),/* @__PURE__ */jsx(Text,{size:1,weight:"medium",children:splitTitle[splitTitle.length-1]})]})})]})});},[]);const renderValue=useCallback((value,option)=>{var _a;return(_a=option==null?void 0:option.field.title)!=null?_a:value;},[]);const filterOption=useCallback((query,option)=>{var _a,_b,_c;const lQuery=query.toLowerCase();return((_a=option==null?void 0:option.value)==null?void 0:_a.toLowerCase().includes(lQuery))||((_c=(_b=option==null?void 0:option.field)==null?void 0:_b.title)==null?void 0:_c.toLowerCase().includes(lQuery));},[]);return/* @__PURE__ */jsx(Autocomplete,{fontSize:1,icon:currentField?currentField.icon:SearchIcon,onChange:onSelect,openButton:true,id,options:autocompleteOptions,placeholder:"Search for a field",radius:2,renderOption,renderValue,value:currentField==null?void 0:currentField.key,filterOption});}function FieldRefPathInput(props){var _a;const documentSchema=(_a=useContext(SelectedFieldContext))==null?void 0:_a.documentSchema;const ref=useRef(null);const id=useId();const{onChange}=props;useEffect(()=>{var _a2,_b;(_b=(_a2=ref.current)==null?void 0:_a2.querySelector("input"))==null?void 0:_b.focus();},[]);const onSelect=useCallback(path=>onChange(set(path)),[onChange]);if(!documentSchema){return props.renderDefault(props);}return/* @__PURE__ */jsx(Box,{flex:1,style:{minWidth:200},ref,children:/* @__PURE__ */jsx(FieldAutocomplete,{id,schemaType:documentSchema,onSelect,fieldPath:props.value})});}function InstructionsArrayInput(props){const user=useCurrentUser();const originalValue=props.value;const originalMembers=props.members;const value=useMemo(()=>(originalValue!=null?originalValue:[]).filter(v=>!v.userId||v.userId===(user==null?void 0:user.id)),[originalValue,user]);const members=useMemo(()=>(originalMembers!=null?originalMembers:[]).filter(v=>{var _a;if(v.kind==="error"){return true;}const value2=(_a=v==null?void 0:v.item)==null?void 0:_a.value;return!value2.userId||value2.userId===(user==null?void 0:user.id);}),[originalMembers,user]);return props.renderDefault({...props,value,members});}const InlineBlockValueContext=createContext(void 0);function AssistInlineFormBlock(props){return/* @__PURE__ */jsx(InlineBlockValueContext.Provider,{value:props.value,children:/* @__PURE__ */jsx(Box,{flex:1,children:props.renderDefault(props)})});}function FieldRefPreview(props){var _a,_b,_c,_d;const documentSchema=(_a=useContext(SelectedFieldContext))==null?void 0:_a.documentSchema;const path=(_c=(_b=useContext(InlineBlockValueContext))==null?void 0:_b.path)!=null?_c:props.path;const selectedField=useSelectedField(documentSchema,path);return/* @__PURE__ */jsxs(Flex,{gap:2,align:"center",style:{width:"100%"},children:[/* @__PURE__ */jsx(Flex,{flex:1,gap:2,align:"center",paddingY:3,paddingX:1,children:/* @__PURE__ */jsx(Box,{children:/* @__PURE__ */jsx(Text,{size:1,textOverflow:"ellipsis",children:(_d=selectedField==null?void 0:selectedField.title)!=null?_d:"Select field"})})}),/* @__PURE__ */jsx(Fragment,{children:props.actions})]});}function HideReferenceChangedBannerInput(props){const ref=useRef(null);useEffect(()=>{var _a;const parent=(_a=ref.current)==null?void 0:_a.closest('[data-testid="pane-content"]');if(!parent){return;}const style=document.createElement("style");const parentId="id-".concat(Math.random()).replace(".","-");parent.id=parentId;style.innerText="\n      #".concat(parentId," [data-testid=\"reference-changed-banner\"] { display: none; }\n    ");parent.prepend(style);},[ref]);return/* @__PURE__ */jsx(Box,{ref,children:props.renderDefault(props)});}const contextDocumentSchema=defineType({type:"document",name:contextDocumentTypeName,title:"AI context",liveEdit:true,icon:TokenIcon,components:{input:HideReferenceChangedBannerInput},fields:[defineField({type:"string",name:"title",title:"Title"}),defineField({name:"context",type:"array",title:"Context",of:[defineArrayMember({type:"block",styles:[{title:"Normal",value:"normal"}],lists:[],marks:{decorators:[],annotations:[]}})]})],preview:{select:{title:"title",context:"context"},prepare(_ref77){let{title,context}=_ref77;var _a;const text=context==null?void 0:context.flatMap(block=>block==null?void 0:block.children).flatMap(child=>{var _a2;return(_a2=child==null?void 0:child.text)==null?void 0:_a2.split(" ");}).filter(Boolean);const words=(_a=text==null?void 0:text.length)!=null?_a:0;return{title,subtitle:"Words: ".concat(words),media:DocumentTextIcon};}}});// Strict ESM env, designed to run outside Node.js in envs that provide WebCrypto (deno, browsers, etc)
+function getRandomValues(typedArray){return window.crypto.getRandomValues(typedArray);}function whatwgRNG(){let length=arguments.length>0&&arguments[0]!==undefined?arguments[0]:16;const rnds8=new Uint8Array(length);getRandomValues(rnds8);return rnds8;}const getByteHexTable=(()=>{let table;return()=>{if(table){return table;}table=[];for(let i=0;i<256;++i){table[i]=(i+256).toString(16).substring(1);}return table;};})();function randomKey(length){const table=getByteHexTable();return whatwgRNG(length).reduce((str,n)=>str+table[n],"").slice(0,length);}const PteMods=styled(Box)(_templateObject10||(_templateObject10=_taggedTemplateLiteral(["\n  & [data-testid='pt-editor__toolbar-card'] > div > div:last-child {\n    display: none;\n  }\n  & [data-testid='pt-editor'] {\n    min-height: 300px;\n  }\n  & [data-testid='pt-editor'] .pt-inline-object * {\n    max-width: 400px;\n  }\n"])));function PromptInput(props){useOnlyInlineBlocks(props);return/* @__PURE__ */jsx(PteMods,{children:props.renderDefault(props)});}function useOnlyInlineBlocks(props){useEffect(()=>{var _a;let needsFix=false;const val=((_a=props.value)!=null?_a:[]).map(block=>{if(block._type==="block"){return block;}needsFix=true;return typed({_key:randomKey(12),_type:"block",level:0,markDefs:[],style:"normal",children:[block]});});if(needsFix){props.onChange(set(val));}},[]);}function InstructionsArrayField(props){return props.renderDefault({...props,title:void 0});}const fieldReference=defineType({type:"object",name:fieldReferenceTypeName,title:"Document field",icon:ThListIcon,fields:[defineField({type:"string",name:"path",title:"Field",components:{input:FieldRefPathInput},validation:rule=>rule.custom((value,context)=>{var _a;if(!value){return"Please select a field";}try{const docId=(_a=context.document)==null?void 0:_a._id;if(!docId){return"Field reference cannot be used outside document inspector context. Could not resolve document id.";}const targetDocType=docId.replace(new RegExp("^".concat(assistDocumentIdPrefix)),"");const schema=context.schema.get(targetDocType);if(!schema){return"Field reference cannot be used outside document inspector context. Could not resolve schema: ".concat(targetDocType);}const refs=getFieldRefsWithDocument(schema);const fieldRef=refs.find(r=>r.key===value);if(!fieldRef){return"Field with path \"".concat(value,"\" does not exist in the schema.");}return true;}catch(e){console.error("Failed to resolve field reference",e);return"Invalid field reference.";}})})],preview:{select:{path:"path"},prepare(_ref78){let{path}=_ref78;return{title:path,path,icon:CodeIcon};}},components:{preview:FieldRefPreview},options:{modal:{type:"popover"}}});const userInput=defineType({type:"object",name:userInputTypeName,title:"User input",icon:ComposeIcon,fields:[defineField({type:"string",name:"message",title:"User input title",placeholder:"Provide instruction text",description:"The header above the user input text field",validation:rule=>rule.required()}),defineField({type:"text",rows:3,name:"description",title:"User input description",description:"The description above the user input text field"})],preview:{select:{title:"message"}},options:{modal:{type:"popover",width:1}}});const promptContext=defineType({type:"object",name:instructionContextTypeName,title:contextDocumentSchema.title,icon:contextDocumentSchema.icon,fields:[defineField({type:"reference",name:"reference",to:[{type:contextDocumentSchema.name}],title:"Context",description:"The referenced context will be inserted into the instruction",validation:rule=>rule.required(),components:{input:function Fix(props){return/* @__PURE__ */jsx(Box,{style:{maxWidth:300},children:props.renderDefault(props)});}}})],preview:{select:{ref:"reference._ref",title:"reference.title",context:"reference.context"},prepare(select){var _a,_b,_c,_d;return select.ref?(_d=(_c=(_b=(_a=contextDocumentSchema)==null?void 0:_a.preview)==null?void 0:_b.prepare)==null?void 0:_c.call(_b,select))!=null?_d:select:{title:"No reference selected",media:contextDocumentSchema.icon};}},options:{modal:{type:"popover",width:"auto"}}});const prompt=defineType({type:"array",name:promptTypeName,title:"Prompt",of:[defineArrayMember({type:"block",styles:[{title:"Normal",value:"normal"}],lists:[],marks:{decorators:[],annotations:[]},of:[defineArrayMember({type:fieldReference.name}),defineArrayMember({type:promptContext.name}),defineArrayMember({type:userInput.name})]})/*    defineArrayMember({
+      type: fieldReference.name,
+    }),
+    defineArrayMember({
+      type: promptContext.name,
+    }),
+    defineArrayMember({
+      type: userInput.name,
+    }),*/]});const instruction=defineType({type:"object",name:instructionTypeName,title:"Instruction",fieldsets:[{name:"appearance",title:"Appearance",options:{collapsible:true,collapsed:true}}],preview:{select:{icon:"icon",title:"title",userId:"userId"},prepare:_ref79=>{let{icon,title,userId}=_ref79;return{title,icon:icon?icons[icon]:SparklesIcon,userId};}},components:{input:InstructionInput,preview:props=>{return/* @__PURE__ */jsxs(Flex,{gap:3,align:"center",padding:2,children:[props.icon&&/* @__PURE__ */jsx(Box,{flex:"none",children:/* @__PURE__ */jsx(Text,{size:1,children:createElement(props.icon)})}),/* @__PURE__ */jsx(Stack,{flex:1,space:2,children:/* @__PURE__ */jsx(Text,{size:1,textOverflow:"ellipsis",weight:"medium",children:getInstructionTitle(props)})}),props.userId&&/* @__PURE__ */jsx(Text,{size:1,children:/* @__PURE__ */jsx(Tooltip,{content:/* @__PURE__ */jsx(Text,{size:1,children:"Only visible to you"}),padding:2,placement:"top",portal:true,children:/* @__PURE__ */jsx(LockIcon,{})})})]});}},fields:[defineField({type:prompt.name,name:"prompt",title:"Instruction",description:/* @__PURE__ */jsxs(Fragment,{children:["Learn from"," ",/* @__PURE__ */jsxs("a",{href:instructionGuideUrl,target:"_blank",rel:"noreferrer",children:["our instruction guide ",/* @__PURE__ */jsx(ArrowRightIcon,{})]})]}),components:{input:PromptInput}}),defineField({type:"string",name:"icon",title:"Icon",fieldset:"appearance",components:{field:HiddenFieldTitle,input:IconInput}}),defineField({type:"string",name:"title",title:"Title",fieldset:"appearance",components:{field:HiddenFieldTitle}}),defineField({type:"string",name:"userId",title:"Visibility",fieldset:"appearance",components:{field:HiddenFieldTitle,input:InstructionVisibility},initialValue:(params,context)=>{var _a,_b;return(_b=(_a=context.currentUser)==null?void 0:_a.id)!=null?_b:"";},readOnly:context=>{var _a,_b,_c;return Boolean(((_a=context.parent)==null?void 0:_a.createdById)&&((_b=context.parent)==null?void 0:_b.createdById)!==((_c=context.currentUser)==null?void 0:_c.id));}}),defineField({type:"string",name:"createdById",title:"Created by",hidden:true,fieldset:"appearance",initialValue:(params,context)=>{var _a,_b;return(_b=(_a=context.currentUser)==null?void 0:_a.id)!=null?_b:"";}})]});const fieldInstructions=defineType({type:"object",name:assistFieldTypeName,title:"Field prompt",/*  components: {
+    input: FieldPromptInput,
+  },*/fields:[defineField({type:"string",name:"path",title:"Path",readOnly:true,hidden:true}),defineField({type:"array",name:"instructions",title:"Instructions",of:[{type:instruction.name}],components:{field:InstructionsArrayField,input:InstructionsArrayInput}})],preview:{select:{title:"path"}}});const assistDocumentSchema=defineType({//NOTE: this is a document type. Using object here ensures it does not appear in structure menus
+type:"object",//workaround for using object and not document
+...{liveEdit:true},name:assistDocumentTypeName,title:"AI Document",components:{input:AssistDocumentForm,field:props=>{return props.renderDefault({...props,title:""});}},fields:[defineField({type:"string",name:"title",title:"Title"}),defineField({type:"array",name:"fields",title:"Fields",of:[{type:fieldInstructions.name}]})],preview:{select:{title:"title"}}});const instructionTask=defineType({type:"object",name:instructionTaskTypeName,title:"Instruction task",fields:[defineField({type:"string",name:"path",title:"Path"}),defineField({type:"string",name:"instructionKey",title:"Instruction key"}),defineField({type:"datetime",name:"started",title:"Started"}),defineField({type:"datetime",name:"updated",title:"Updated"}),defineField({type:"string",name:"info",title:"Info"})]});const documentInstructionStatus=defineType({//NOTE: this is a document type. Using object here ensures it does not appear in structure menus
+type:"object",//workaround for using object and not document
+...{liveEdit:true},name:assistTasksStatusTypeName,title:"Document instruction status",fields:[defineField({type:"array",name:"tasks",title:"Tasks",of:[{type:instructionTask.name}]})]});const schemaTypes=[fieldInstructions,assistDocumentSchema,prompt,fieldReference,instruction,documentInstructionStatus,instructionTask,contextDocumentSchema,userInput,promptContext];function useAssistSupported(path,schemaType){return useMemo(()=>path.every(p=>typeof p==="string")&&isAssistSupported(schemaType),[path,schemaType]);}function useAssistDocumentContextValue(documentId,documentSchemaType){const{published,draft}=useEditState(getPublishedId(documentId),documentSchemaType.name,"low");const assistableDocumentId=(draft==null?void 0:draft._id)||(published==null?void 0:published._id)||documentId;const documentIsNew=Boolean(!(draft==null?void 0:draft._id)&&!(published==null?void 0:published._id));const documentIsAssistable=isDocAssistable(documentSchemaType,published,draft);const{params}=useAiPaneRouter();const selectedPath=params[fieldPathParam];const{openInspector,closeInspector,inspector,onChange:documentOnChange}=useDocumentPane();const assistDocument=useStudioAssistDocument({documentId,schemaType:documentSchemaType});const value=useMemo(()=>{const base={documentId,assistableDocumentId,documentSchemaType,documentIsNew,documentIsAssistable,openInspector,closeInspector,inspector,documentOnChange,selectedPath};if(!assistDocument){return{...base,loading:true,assistDocument:void 0};}return{...base,loading:false,assistDocument};},[assistDocument,documentIsAssistable,documentId,assistableDocumentId,documentSchemaType,documentIsNew,openInspector,closeInspector,inspector,documentOnChange,selectedPath]);return value;}function PrivateIcon(){return/* @__PURE__ */jsx(Tooltip,{content:/* @__PURE__ */jsx(Text,{size:1,style:{whiteSpace:"nowrap"},children:"Only visible to you"}),fallbackPlacements:["bottom"],padding:2,placement:"top",portal:true,children:/* @__PURE__ */jsx(LockIcon,{})});}function node(node2){return node2;}const assistFieldActions={name:"sanity-assist-actions",useAction(props){const assistSupported=useAssistSupported(props.path,props.schemaType);const isDocumentLevel=props.path.length===0;const{assistDocument,documentIsNew,documentIsAssistable,openInspector,closeInspector,inspector,documentOnChange,documentSchemaType,documentId,selectedPath}=// document field actions do not have access to the document context
+// conditional hook _should_ be safe here since the logical path will be stable
+isDocumentLevel?// eslint-disable-next-line react-hooks/rules-of-hooks
+useAssistDocumentContextValue(props.documentId,props.schemaType):// eslint-disable-next-line react-hooks/rules-of-hooks
+useAssistDocumentContext();const currentUser=useCurrentUser();const isHidden=!assistDocument;const pathKey=usePathKey(props.path);const assistDocumentId=assistDocument==null?void 0:assistDocument._id;const assistableDocId=getAssistableDocId(documentSchemaType,documentId);const{requestRunInstruction}=useRequestRunInstruction({documentOnChange,isDocAssistable:documentIsAssistable!=null?documentIsAssistable:false});const fieldAssist=useMemo(()=>{var _a;return((_a=assistDocument==null?void 0:assistDocument.fields)!=null?_a:[]).find(f=>f.path==pathKey);},[assistDocument==null?void 0:assistDocument.fields,pathKey]);const fieldAssistKey=fieldAssist==null?void 0:fieldAssist._key;const isInspectorOpen=(inspector==null?void 0:inspector.name)===aiInspectorId;const isPathSelected=pathKey===selectedPath;const isSelected=isInspectorOpen&&isPathSelected;const manageInstructions=useCallback(()=>isSelected?closeInspector(aiInspectorId):openInspector(aiInspectorId,{[fieldPathParam]:pathKey,[instructionParam]:void 0}),[openInspector,closeInspector,isSelected,pathKey]);const onInstructionAction=useCallback(instruction=>{if(!pathKey||!fieldAssistKey||!assistDocumentId||!assistableDocId){return;}requestRunInstruction({documentId:assistableDocId,assistDocumentId,path:pathKey,instruction});},[requestRunInstruction,assistableDocId,pathKey,assistDocumentId,fieldAssistKey]);const privateInstructions=useMemo(()=>{var _a;return((_a=fieldAssist==null?void 0:fieldAssist.instructions)==null?void 0:_a.filter(i=>i.userId&&i.userId===(currentUser==null?void 0:currentUser.id)))||[];},[fieldAssist==null?void 0:fieldAssist.instructions,currentUser]);const sharedInstructions=useMemo(()=>{var _a;return((_a=fieldAssist==null?void 0:fieldAssist.instructions)==null?void 0:_a.filter(i=>!i.userId))||[];},[fieldAssist==null?void 0:fieldAssist.instructions]);const instructions=useMemo(()=>[...privateInstructions,...sharedInstructions],[privateInstructions,sharedInstructions]);const runInstructionsGroup=useMemo(()=>{return(instructions==null?void 0:instructions.length)?node({type:"group",icon:()=>null,title:"Run instructions",children:instructions.map(instruction=>instructionItem({instruction,isPrivate:Boolean(instruction.userId&&instruction.userId===(currentUser==null?void 0:currentUser.id)),onInstructionAction,hidden:isHidden,documentIsNew:!!documentIsNew,assistSupported})),expanded:true}):void 0;},[instructions,currentUser==null?void 0:currentUser.id,onInstructionAction,isHidden,documentIsNew,assistSupported]);const instructionsLength=(instructions==null?void 0:instructions.length)||0;const manageInstructionsItem=useMemo(()=>node({type:"action",icon:ControlsIcon,title:"Manage instructions",onAction:manageInstructions,selected:isSelected}),[manageInstructions,isSelected]);const group=useMemo(()=>node({type:"group",icon:SparklesIcon,title:pluginTitleShort,children:[runInstructionsGroup,/*         documentIsNew && {
+            type: 'action',
+            disabled: true,
+            title: `Document is new. Make an edit to enable `,
+            icon: WarningOutlineIcon,
+            tone: 'caution',
+            status: 'warning',
+            onAction: () => {},
+          },*/manageInstructionsItem].filter(c=>!!c),expanded:false,renderAsButton:true,hidden:!assistSupported}),[//documentIsNew,
+runInstructionsGroup,manageInstructionsItem,assistSupported]);const emptyAction=useMemo(()=>node({type:"action",hidden:!assistSupported,icon:SparklesIcon,onAction:manageInstructions,renderAsButton:true,title:pluginTitleShort,selected:isSelected}),[assistSupported,manageInstructions,isSelected]);if(instructionsLength===0){return emptyAction;}return group;}};function instructionItem(props){const{hidden,isPrivate,onInstructionAction,assistSupported,instruction}=props;return node({type:"action",icon:getIcon(instruction.icon),iconRight:isPrivate?PrivateIcon:void 0,title:getInstructionTitle(instruction),onAction:()=>onInstructionAction(instruction),disabled:assistSupported?false:{reason:"".concat(pluginTitle," is not supported for this field")},hidden});}function AssistDocumentContextProvider(props){const{documentId,schemaType}=props;const value=useAssistDocumentContextValue(documentId,schemaType);return/* @__PURE__ */jsx(AssistDocumentContext.Provider,{value,children:props.children});}const NO_TASKS=[];function useInstructionToaster(documentId,documentSchemaType){const assistDocument=useStudioAssistDocument({documentId,schemaType:documentSchemaType});const assistDocLoaded=!!assistDocument;const currentUser=useCurrentUser();const toast=useToast();const tasks=assistDocument==null?void 0:assistDocument.tasks;const previousTasks=useRef("initial");useEffect(()=>{var _a;if(!assistDocLoaded){return;}if(previousTasks.current!=="initial"){const prevTaskByKey=Object.fromEntries(((_a=previousTasks.current)!=null?_a:NO_TASKS).map(run=>[run._key,run]));const endedTasks=tasks==null?void 0:tasks.filter(task=>task.startedByUserId===(currentUser==null?void 0:currentUser.id)).filter(task=>{const prevTask=prevTaskByKey[task._key];return!prevTask&&task.ended||!(prevTask==null?void 0:prevTask.ended)&&task.ended;}).filter(task=>task.ended&&isAfter(addSeconds(new Date(task.ended),30),/* @__PURE__ */new Date()));endedTasks==null?void 0:endedTasks.forEach(task=>{var _a2;const title=getInstructionTitle(task.instruction);if(task.reason==="error"){toast.push({title:"Failed: ".concat(title),status:"error",description:"Instruction failed. ".concat((_a2=task.message)!=null?_a2:""),closable:true,duration:1e4});}else if(task.reason==="timeout"){toast.push({title:"Timeout: ".concat(title),status:"error",description:"Instruction timed out.",closable:true});}else if(task.reason==="success"){toast.push({title:"Success: ".concat(title),status:"success",description:"Instruction completed.",closable:true});}else if(task.reason==="aborted"){toast.push({title:"Canceled: ".concat(title),status:"warning",description:"Instruction canceled.",closable:true});}});}previousTasks.current=tasks;},[tasks,previousTasks,toast,currentUser,assistDocLoaded]);}function AssistDocumentInputWrapper(props){var _a;if(!isType(props.schemaType,"document")&&props.id!=="root"){return/* @__PURE__ */jsx(AssistInput,{...props});}const documentId=(_a=props.value)==null?void 0:_a._id;if(!documentId){return props.renderDefault(props);}return/* @__PURE__ */jsx(AssistDocumentInput,{...props,documentId});}function AssistDocumentInput(_ref80){let{documentId,...props}=_ref80;useInstructionToaster(documentId,props.schemaType);return/* @__PURE__ */jsx(FirstAssistedPathProvider,{members:props.members,children:/* @__PURE__ */jsx(AssistDocumentContextProvider,{schemaType:props.schemaType,documentId,children:props.renderDefault(props)})});}function AssistInput(props){const{zIndex}=useLayer();const{paneKey}=useDocumentPane();const pathKey=usePathKey(props.path);return/* @__PURE__ */jsx(ConnectFromRegion,{_key:"".concat(paneKey,"_").concat(pathKey),zIndex,style:{minWidth:0},children:props.renderDefault(props)});}function createAssistDocumentPresence(documentId,schemaType){return function AssistDocumentPresenceWrapper(){return documentId?/* @__PURE__ */jsx(AssistDocumentPresence,{documentId,schemaType}):null;};}function AssistDocumentPresence(props){const{assistDocument}=useAssistDocumentContextValue(props.documentId,props.schemaType);const anyPresence=useMemo(()=>{var _a,_b,_c,_d;const anyPresence2=(_b=(_a=assistDocument==null?void 0:assistDocument.tasks)==null?void 0:_a.filter(run=>!run.ended&&!run.reason))==null?void 0:_b.flatMap(run=>{var _a2;return(_a2=run.presence)!=null?_a2:[];}).find(f=>f.started&&/* @__PURE__ */new Date().getTime()-new Date(f.started).getTime()<3e4);if(anyPresence2){return aiPresence(anyPresence2,[]);}const anyRun=(_d=(_c=assistDocument==null?void 0:assistDocument.tasks)==null?void 0:_c.filter(run=>!run.ended&&!run.reason))==null?void 0:_d.find(f=>f.started&&/* @__PURE__ */new Date().getTime()-new Date(f.started).getTime()<3e4);return anyRun?aiPresence({started:anyRun.started,path:documentRootKey,_key:anyRun._key,_type:fieldPresenceTypeName},[]):void 0;},[assistDocument==null?void 0:assistDocument.tasks]);return/* @__PURE__ */jsx(Card,{children:/* @__PURE__ */jsx(Flex,{flex:1,justify:"flex-end",children:/* @__PURE__ */jsx(Flex,{gap:2,align:"center",children:anyPresence&&/* @__PURE__ */jsx(AiFieldPresence,{presence:anyPresence})})})});}const assist=definePlugin(config=>{const configWithDefaults=config!=null?config:{};return{name:packageName,schema:{types:schemaTypes},document:{inspectors:(prev,context)=>{const docSchema=context.schema.get(context.documentType);if(docSchema&&isSchemaAssistEnabled(docSchema)){return[...prev,assistInspector];}return prev;},unstable_fieldActions:prev=>{return[...prev,assistFieldActions];},unstable_languageFilter:(prev,_ref81)=>{let{documentId,schema,schemaType}=_ref81;const docSchema=schema.get(schemaType);return[...prev,createAssistDocumentPresence(documentId,docSchema)];}},studio:{components:{layout:function Layout(props){return/* @__PURE__ */jsx(AssistLayout,{...props,config:configWithDefaults});}}},form:{components:{input:AssistDocumentInputWrapper,field:AssistFieldWrapper,item:AssistItem,block:AssistFormBlock,inlineBlock:AssistInlineFormBlock}},plugins:[definePlugin({name:"".concat(packageName,"/safe-value-input"),form:{components:{input:SafeValueInput}}})()]};});export{SchemaTypeTool,assist,contextDocumentTypeName};
+//# sourceMappingURL=index.esm.js.map